refactor: fix some type errors

packages/frontend/src/components/MkChartLegend.vue

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <div :class="$style.root">
 	<button v-for="item in items" class="_button item" :class="{ disabled: item.hidden }" @click="onClick(item)">
-		<span class="box" :style="{ background: chart.config.type === 'line' ? item.strokeStyle?.toString() : item.fillStyle?.toString() }"></span>
+		<span class="box" :style="{ background: type === 'line' ? item.strokeStyle?.toString() : item.fillStyle?.toString() }"></span>
 		{{ item.text }}
 	</button>
 </div>
@@ -16,25 +16,23 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { shallowRef } from 'vue';
 import { Chart, LegendItem } from 'chart.js';
 
-const props = defineProps({
-});
-
 const chart = shallowRef<Chart>();
+const type = shallowRef<string>();
 const items = shallowRef<LegendItem[]>([]);
 
 function update(_chart: Chart, _items: LegendItem[]) {
 	chart.value = _chart,
 	items.value = _items;
+	if ('type' in _chart.config) type.value = _chart.config.type;
 }
 
 function onClick(item: LegendItem) {
 	if (chart.value == null) return;
-	const { type } = chart.value.config;
+	if (type.value === 'pie' || type.value === 'doughnut') {
-	if (type === 'pie' || type === 'doughnut') {
 		// Pie and doughnut charts only have a single dataset and visibility is per item
-		chart.value.toggleDataVisibility(item.index);
+		if (item.index) chart.value.toggleDataVisibility(item.index);
 	} else {
-		chart.value.setDatasetVisibility(item.datasetIndex, !chart.value.isDatasetVisible(item.datasetIndex));
+		if (item.datasetIndex) chart.value.setDatasetVisibility(item.datasetIndex, !chart.value.isDatasetVisible(item.datasetIndex));
 	}
 	chart.value.update();
 }

packages/frontend/src/components/MkColorInput.vue

@@ -41,8 +41,8 @@ const { modelValue } = toRefs(props);
 const v = ref(modelValue.value);
 const inputEl = shallowRef<HTMLElement>();
 
-const onInput = (ev: KeyboardEvent) => {
+const onInput = () => {
-	emit('update:modelValue', v.value);
+	emit('update:modelValue', v.value ?? '');
 };
 </script>
 

packages/frontend/src/components/MkContextMenu.vue

@@ -44,8 +44,8 @@ onMounted(() => {
 	let left = props.ev.pageX + 1; // 間違って右ダブルクリックした場合に意図せずアイテムがクリックされるのを防ぐため + 1
 	let top = props.ev.pageY + 1; // 間違って右ダブルクリックした場合に意図せずアイテムがクリックされるのを防ぐため + 1
 
-	const width = rootEl.value.offsetWidth;
+	const width = rootEl.value?.offsetWidth ?? 0;
-	const height = rootEl.value.offsetHeight;
+	const height = rootEl.value?.offsetHeight ?? 0;
 
 	if (left + width - window.pageXOffset >= (window.innerWidth - SCROLLBAR_THICKNESS)) {
 		left = (window.innerWidth - SCROLLBAR_THICKNESS) - width + window.pageXOffset;
@@ -63,8 +63,10 @@ onMounted(() => {
 		left = 0;
 	}
 
-	rootEl.value.style.top = `${top}px`;
+	if (rootEl.value) {
-	rootEl.value.style.left = `${left}px`;
+		rootEl.value.style.top = `${top}px`;
+		rootEl.value.style.left = `${left}px`;
+	}
 
 	document.body.addEventListener('mousedown', onMousedown);
 });

packages/frontend/src/components/MkDateSeparatedList.vue

@@ -118,34 +118,36 @@ export default defineComponent({
 			return children;
 		};
 
-		function onBeforeLeave(el: HTMLElement) {
+		function onBeforeLeave(element: Element) {
+			const el = element as HTMLElement;
 			el.style.top = `${el.offsetTop}px`;
 			el.style.left = `${el.offsetLeft}px`;
 		}
 
-		function onLeaveCanceled(el: HTMLElement) {
+		function onLeaveCancelled(element: Element) {
+			const el = element as HTMLElement;
 			el.style.top = '';
 			el.style.left = '';
 		}
 
-		return () => h(
+		// eslint-disable-next-line vue/no-setup-props-destructure
-			defaultStore.state.animation ? TransitionGroup : 'div',
+		const classes = {
-			{
+			[$style['date-separated-list']]: true,
-				class: {
+			[$style['date-separated-list-nogap']]: props.noGap,
-					[$style['date-separated-list']]: true,
+			[$style['reversed']]: props.reversed,
-					[$style['date-separated-list-nogap']]: props.noGap,
+			[$style['direction-down']]: props.direction === 'down',
-					[$style['reversed']]: props.reversed,
+			[$style['direction-up']]: props.direction === 'up',
-					[$style['direction-down']]: props.direction === 'down',
+		};
-					[$style['direction-up']]: props.direction === 'up',
+
-				},
+		return () => defaultStore.state.animation ? h(TransitionGroup, {
-				...(defaultStore.state.animation ? {
+			class: classes,
-					name: 'list',
+			name: 'list',
-					tag: 'div',
+			tag: 'div',
-					onBeforeLeave,
+			onBeforeLeave,
-					onLeaveCanceled,
+			onLeaveCancelled,
-				} : {}),
+		}, { default: renderChildren }) : h('div', {
-			},
+			class: classes,
-			{ default: renderChildren });
+		}, { default: renderChildren });
 	},
 });
 </script>

packages/frontend/src/components/MkDrive.folder.vue

@@ -204,7 +204,7 @@ function onDragend() {
 }
 
 function go() {
-	emit('move', props.folder.id);
+	emit('move', props.folder);
 }
 
 function rename() {

packages/frontend/src/components/MkDrive.vue

@@ -98,6 +98,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { nextTick, onActivated, onBeforeUnmount, onMounted, ref, shallowRef, watch } from 'vue';
 import * as Misskey from 'misskey-js';
 import MkButton from './MkButton.vue';
+import type { MenuItem } from '@/types/menu.js';
 import XNavFolder from '@/components/MkDrive.navFolder.vue';
 import XFolder from '@/components/MkDrive.folder.vue';
 import XFile from '@/components/MkDrive.file.vue';
@@ -426,7 +427,7 @@ function chooseFolder(folderToChoose: Misskey.entities.DriveFolder) {
 	}
 }
 
-function move(target?: Misskey.entities.DriveFolder) {
+function move(target?: Misskey.entities.DriveFolder | Misskey.entities.DriveFolder['id' | 'parentId']) {
 	if (!target) {
 		goRoot();
 		return;
@@ -612,7 +613,7 @@ function fetchMoreFiles() {
 }
 
 function getMenu() {
-	return [{
+	const menu: MenuItem[] = [{
 		type: 'switch',
 		text: i18n.ts.keepOriginalUploading,
 		ref: keepOriginal,
@@ -633,7 +634,7 @@ function getMenu() {
 	}, folder.value ? {
 		text: i18n.ts.renameFolder,
 		icon: 'ti ti-forms',
-		action: () => { renameFolder(folder.value); },
+		action: () => { folder.value && renameFolder(folder.value); },
 	} : undefined, folder.value ? {
 		text: i18n.ts.deleteFolder,
 		icon: 'ti ti-trash',
@@ -643,6 +644,8 @@ function getMenu() {
 		icon: 'ti ti-folder-plus',
 		action: () => { createFolder(); },
 	}];
+
+	return menu;
 }
 
 function showMenu(ev: MouseEvent) {