refactor: fix some type errors

This commit is contained in:
yukineko 2024-01-06 19:51:29 +09:00
parent 55a0080e15
commit dd908b724e
No known key found for this signature in database
GPG Key ID: E5BACB72109B7B90
6 changed files with 43 additions and 38 deletions

View File

@ -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 === 'pie' || type === 'doughnut') {
if (type.value === 'pie' || type.value === '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();
}

View File

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

View File

@ -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 height = rootEl.value.offsetHeight;
const width = rootEl.value?.offsetWidth ?? 0;
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`;
rootEl.value.style.left = `${left}px`;
if (rootEl.value) {
rootEl.value.style.top = `${top}px`;
rootEl.value.style.left = `${left}px`;
}
document.body.addEventListener('mousedown', onMousedown);
});

View File

@ -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(
defaultStore.state.animation ? TransitionGroup : 'div',
{
class: {
[$style['date-separated-list']]: true,
[$style['date-separated-list-nogap']]: props.noGap,
[$style['reversed']]: props.reversed,
[$style['direction-down']]: props.direction === 'down',
[$style['direction-up']]: props.direction === 'up',
},
...(defaultStore.state.animation ? {
name: 'list',
tag: 'div',
onBeforeLeave,
onLeaveCanceled,
} : {}),
},
{ default: renderChildren });
// eslint-disable-next-line vue/no-setup-props-destructure
const classes = {
[$style['date-separated-list']]: true,
[$style['date-separated-list-nogap']]: props.noGap,
[$style['reversed']]: props.reversed,
[$style['direction-down']]: props.direction === 'down',
[$style['direction-up']]: props.direction === 'up',
};
return () => defaultStore.state.animation ? h(TransitionGroup, {
class: classes,
name: 'list',
tag: 'div',
onBeforeLeave,
onLeaveCancelled,
}, { default: renderChildren }) : h('div', {
class: classes,
}, { default: renderChildren });
},
});
</script>

View File

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

View File

@ -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) {