introduce lint for client

Resolve #7998

packages/client/src/components/date-separated-list.vue

@@ -31,10 +31,6 @@ export default defineComponent({
 	},
 
 	methods: {
-		focus() {
-			this.$slots.default[0].elm.focus();
-		},
-
 		getDateText(time: string) {
 			const date = new Date(time).getDate();
 			const month = new Date(time).getMonth() + 1;

packages/client/src/components/post-form.vue

@@ -128,7 +128,7 @@ export default defineComponent({
 			type: Boolean,
 			required: false
 		},
-		visibleUsers: {
+		initialVisibleUsers: {
 			type: Array,
 			required: false,
 			default: () => []
@@ -167,6 +167,7 @@ export default defineComponent({
 			cw: null,
 			localOnly: this.$store.state.rememberNoteVisibility ? this.$store.state.localOnly : this.$store.state.defaultNoteLocalOnly,
 			visibility: (this.$store.state.rememberNoteVisibility ? this.$store.state.visibility : this.$store.state.defaultNoteVisibility) as typeof noteVisibilities[number],
+			visibleUsers: [],
 			autocomplete: null,
 			draghover: false,
 			quoteId: null,
@@ -273,6 +274,10 @@ export default defineComponent({
 			this.localOnly = this.initialLocalOnly;
 		}
 
+		if (this.initialVisibleUsers) {
+			this.visibleUsers = this.initialVisibleUsers;
+		}
+
 		if (this.mention) {
 			this.text = this.mention.host ? `@${this.mention.username}@${toASCII(this.mention.host)}` : `@${this.mention.username}`;
 			this.text += ' ';

packages/client/src/components/sparkle.vue

@@ -33,11 +33,25 @@ export default defineComponent({
 			ctx: null,
 		};
 	},
+	unmounted() {
+		window.cancelAnimationFrame(this.anim);
+	},
+	mounted() {
+		this.ctx = this.$refs.canvas.getContext('2d');
+
+		new ResizeObserver(this.resize).observe(this.$refs.content);
+
+		this.resize();
+		this.tick();
+	},
+	updated() {
+		this.resize();
+	},
 	methods: {
 		createSparkles(w, h, count) {
-			var holder = [];
+			const holder = [];
 
-			for (var i = 0; i < count; i++) {
+			for (let i = 0; i < count; i++) {
 
 				const color = '#' + ('000000' + Math.floor(Math.random() * 16777215).toString(16)).slice(-6);
 
@@ -143,20 +157,6 @@ export default defineComponent({
 			}
 		},
 	},
-	mounted() {
-		this.ctx = this.$refs.canvas.getContext('2d');
-
-		new ResizeObserver(this.resize).observe(this.$refs.content);
-
-		this.resize();
-		this.tick();
-	},
-	updated() {
-		this.resize();
-	},
-	destroyed() {
-		window.cancelAnimationFrame(this.anim);
-	},
 });
 </script>
 

packages/client/src/components/ui/menu.vue

@@ -5,7 +5,7 @@
 	@contextmenu.self="e => e.preventDefault()"
 	v-hotkey="keymap"
 >
-	<template v-for="(item, i) in _items">
+	<template v-for="(item, i) in items2">
 		<div v-if="item === null" class="divider"></div>
 		<span v-else-if="item.type === 'label'" class="label item">
 			<span>{{ item.text }}</span>
@@ -35,7 +35,7 @@
 			<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>
 		</button>
 	</template>
-	<span v-if="_items.length === 0" class="none item">
+	<span v-if="items2.length === 0" class="none item">
 		<span>{{ $ts.none }}</span>
 	</span>
 </div>
@@ -68,7 +68,7 @@ export default defineComponent({
 	emits: ['close'],
 	data() {
 		return {
-			_items: [],
+			items2: [],
 		};
 	},
 	computed: {
@@ -96,7 +96,7 @@ export default defineComponent({
 					}
 				}
 
-				this._items = items;
+				this.items2 = items;
 			},
 			immediate: true
 		}

packages/client/src/components/ui/popup.vue

@@ -58,6 +58,7 @@ export default defineComponent({
 	mounted() {
 		this.$watch('src', () => {
 			if (this.src) {
+				// eslint-disable-next-line vue/no-mutating-props
 				this.src.style.pointerEvents = 'none';
 			}
 			this.fixed = getFixedContainer(this.src) != null;
@@ -159,6 +160,7 @@ export default defineComponent({
 		},
 
 		close() {
+			// eslint-disable-next-line vue/no-mutating-props
 			if (this.src) this.src.style.pointerEvents = 'auto';
 			this.showing = false;
 			this.$emit('close');

packages/client/src/pages/page-editor/els/page-editor.el.button.vue

@@ -1,4 +1,5 @@
 <template>
+<!-- eslint-disable vue/no-mutating-props -->
 <XContainer @remove="() => $emit('remove')" :draggable="true">
 	<template #header><i class="fas fa-bolt"></i> {{ $ts._pages.blocks.button }}</template>
 
@@ -38,6 +39,7 @@
 </template>
 
 <script lang="ts">
+/* eslint-disable vue/no-mutating-props */
 import { defineComponent } from 'vue';
 import XContainer from '../page-editor.container.vue';
 import MkSelect from '@/components/form/select.vue';

packages/client/src/pages/page-editor/els/page-editor.el.canvas.vue

@@ -1,4 +1,5 @@
 <template>
+<!-- eslint-disable vue/no-mutating-props -->
 <XContainer @remove="() => $emit('remove')" :draggable="true">
 	<template #header><i class="fas fa-paint-brush"></i> {{ $ts._pages.blocks.canvas }}</template>
 
@@ -20,6 +21,7 @@
 </template>
 
 <script lang="ts">
+/* eslint-disable vue/no-mutating-props */
 import { defineComponent } from 'vue';
 import XContainer from '../page-editor.container.vue';
 import MkInput from '@/components/form/input.vue';

packages/client/src/pages/page-editor/els/page-editor.el.counter.vue

@@ -1,4 +1,5 @@
 <template>
+<!-- eslint-disable vue/no-mutating-props -->
 <XContainer @remove="() => $emit('remove')" :draggable="true">
 	<template #header><i class="fas fa-bolt"></i> {{ $ts._pages.blocks.counter }}</template>
 
@@ -18,6 +19,7 @@
 </template>
 
 <script lang="ts">
+/* eslint-disable vue/no-mutating-props */
 import { defineComponent } from 'vue';
 import XContainer from '../page-editor.container.vue';
 import MkInput from '@/components/form/input.vue';

packages/client/src/pages/page-editor/els/page-editor.el.if.vue

@@ -1,4 +1,5 @@
 <template>
+<!-- eslint-disable vue/no-mutating-props -->
 <XContainer @remove="() => $emit('remove')" :draggable="true">
 	<template #header><i class="fas fa-question"></i> {{ $ts._pages.blocks.if }}</template>
 	<template #func>
@@ -25,6 +26,7 @@
 </template>
 
 <script lang="ts">
+/* eslint-disable vue/no-mutating-props */
 import { defineComponent, defineAsyncComponent } from 'vue';
 import { v4 as uuid } from 'uuid';
 import XContainer from '../page-editor.container.vue';

packages/client/src/pages/page-editor/els/page-editor.el.image.vue

@@ -1,4 +1,5 @@
 <template>
+<!-- eslint-disable vue/no-mutating-props -->
 <XContainer @remove="() => $emit('remove')" :draggable="true">
 	<template #header><i class="fas fa-image"></i> {{ $ts._pages.blocks.image }}</template>
 	<template #func>
@@ -14,6 +15,7 @@
 </template>
 
 <script lang="ts">
+/* eslint-disable vue/no-mutating-props */
 import { defineComponent } from 'vue';
 import XContainer from '../page-editor.container.vue';
 import MkDriveFileThumbnail from '@/components/drive-file-thumbnail.vue';

packages/client/src/pages/page-editor/els/page-editor.el.note.vue

@@ -1,4 +1,5 @@
 <template>
+<!-- eslint-disable vue/no-mutating-props -->
 <XContainer @remove="() => $emit('remove')" :draggable="true">
 	<template #header><i class="fas fa-sticky-note"></i> {{ $ts._pages.blocks.note }}</template>
 
@@ -16,6 +17,7 @@
 </template>
 
 <script lang="ts">
+/* eslint-disable vue/no-mutating-props */
 import { defineComponent } from 'vue';
 import XContainer from '../page-editor.container.vue';
 import MkInput from '@/components/form/input.vue';

packages/client/src/pages/page-editor/els/page-editor.el.number-input.vue

@@ -1,4 +1,5 @@
 <template>
+<!-- eslint-disable vue/no-mutating-props -->
 <XContainer @remove="() => $emit('remove')" :draggable="true">
 	<template #header><i class="fas fa-bolt"></i> {{ $ts._pages.blocks.numberInput }}</template>
 
@@ -18,6 +19,7 @@
 </template>
 
 <script lang="ts">
+/* eslint-disable vue/no-mutating-props */
 import { defineComponent } from 'vue';
 import XContainer from '../page-editor.container.vue';
 import MkInput from '@/components/form/input.vue';

packages/client/src/pages/page-editor/els/page-editor.el.post.vue

@@ -1,4 +1,5 @@
 <template>
+<!-- eslint-disable vue/no-mutating-props -->
 <XContainer @remove="() => $emit('remove')" :draggable="true">
 	<template #header><i class="fas fa-paper-plane"></i> {{ $ts._pages.blocks.post }}</template>
 
@@ -11,6 +12,7 @@
 </template>
 
 <script lang="ts">
+/* eslint-disable vue/no-mutating-props */
 import { defineComponent } from 'vue';
 import XContainer from '../page-editor.container.vue';
 import MkTextarea from '@/components/form/textarea.vue';

packages/client/src/pages/page-editor/els/page-editor.el.radio-button.vue

@@ -1,4 +1,5 @@
 <template>
+<!-- eslint-disable vue/no-mutating-props -->
 <XContainer @remove="() => $emit('remove')" :draggable="true">
 	<template #header><i class="fas fa-bolt"></i> {{ $ts._pages.blocks.radioButton }}</template>
 
@@ -12,6 +13,7 @@
 </template>
 
 <script lang="ts">
+/* eslint-disable vue/no-mutating-props */
 import { defineComponent } from 'vue';
 import XContainer from '../page-editor.container.vue';
 import MkTextarea from '@/components/form/textarea.vue';

packages/client/src/pages/page-editor/els/page-editor.el.section.vue

@@ -1,4 +1,5 @@
 <template>
+<!-- eslint-disable vue/no-mutating-props -->
 <XContainer @remove="() => $emit('remove')" :draggable="true">
 	<template #header><i class="fas fa-sticky-note"></i> {{ value.title }}</template>
 	<template #func>
@@ -17,6 +18,7 @@
 </template>
 
 <script lang="ts">
+/* eslint-disable vue/no-mutating-props */
 import { defineComponent, defineAsyncComponent } from 'vue';
 import { v4 as uuid } from 'uuid';
 import XContainer from '../page-editor.container.vue';

packages/client/src/pages/page-editor/els/page-editor.el.switch.vue

@@ -1,4 +1,5 @@
 <template>
+<!-- eslint-disable vue/no-mutating-props -->
 <XContainer @remove="() => $emit('remove')" :draggable="true">
 	<template #header><i class="fas fa-bolt"></i> {{ $ts._pages.blocks.switch }}</template>
 
@@ -11,6 +12,7 @@
 </template>
 
 <script lang="ts">
+/* eslint-disable vue/no-mutating-props */
 import { defineComponent } from 'vue';
 import XContainer from '../page-editor.container.vue';
 import MkSwitch from '@/components/form/switch.vue';

packages/client/src/pages/page-editor/els/page-editor.el.text-input.vue

@@ -1,4 +1,5 @@
 <template>
+<!-- eslint-disable vue/no-mutating-props -->
 <XContainer @remove="() => $emit('remove')" :draggable="true">
 	<template #header><i class="fas fa-bolt"></i> {{ $ts._pages.blocks.textInput }}</template>
 
@@ -11,6 +12,7 @@
 </template>
 
 <script lang="ts">
+/* eslint-disable vue/no-mutating-props */
 import { defineComponent } from 'vue';
 import XContainer from '../page-editor.container.vue';
 import MkInput from '@/components/form/input.vue';

packages/client/src/pages/page-editor/els/page-editor.el.text.vue

@@ -1,4 +1,5 @@
 <template>
+<!-- eslint-disable vue/no-mutating-props -->
 <XContainer @remove="() => $emit('remove')" :draggable="true">
 	<template #header><i class="fas fa-align-left"></i> {{ $ts._pages.blocks.text }}</template>
 
@@ -9,6 +10,7 @@
 </template>
 
 <script lang="ts">
+/* eslint-disable vue/no-mutating-props */
 import { defineComponent } from 'vue';
 import XContainer from '../page-editor.container.vue';
 import * as os from '@/os';

packages/client/src/pages/page-editor/els/page-editor.el.textarea-input.vue

@@ -1,4 +1,5 @@
 <template>
+<!-- eslint-disable vue/no-mutating-props -->
 <XContainer @remove="() => $emit('remove')" :draggable="true">
 	<template #header><i class="fas fa-bolt"></i> {{ $ts._pages.blocks.textareaInput }}</template>
 
@@ -11,6 +12,7 @@
 </template>
 
 <script lang="ts">
+/* eslint-disable vue/no-mutating-props */
 import { defineComponent } from 'vue';
 import XContainer from '../page-editor.container.vue';
 import MkTextarea from '@/components/form/textarea.vue';

packages/client/src/pages/page-editor/els/page-editor.el.textarea.vue

@@ -1,4 +1,5 @@
 <template>
+<!-- eslint-disable vue/no-mutating-props -->
 <XContainer @remove="() => $emit('remove')" :draggable="true">
 	<template #header><i class="fas fa-align-left"></i> {{ $ts._pages.blocks.textarea }}</template>
 
@@ -9,6 +10,7 @@
 </template>
 
 <script lang="ts">
+/* eslint-disable vue/no-mutating-props */
 import { defineComponent } from 'vue';
 import XContainer from '../page-editor.container.vue';
 import * as os from '@/os';

packages/client/src/pages/page-editor/page-editor.script-block.vue

@@ -1,4 +1,5 @@
 <template>
+<!-- eslint-disable vue/no-mutating-props -->
 <XContainer :removable="removable" @remove="() => $emit('remove')" :error="error" :warn="warn" :draggable="draggable">
 	<template #header><i v-if="icon" :class="icon"></i> <template v-if="title">{{ title }} <span class="turmquns" v-if="typeText">({{ typeText }})</span></template><template v-else-if="typeText">{{ typeText }}</template></template>
 	<template #func>
@@ -56,6 +57,7 @@
 </template>
 
 <script lang="ts">
+/* eslint-disable vue/no-mutating-props */
 import { defineAsyncComponent, defineComponent } from 'vue';
 import { v4 as uuid } from 'uuid';
 import XContainer from './page-editor.container.vue';

packages/client/src/pages/settings/index.vue

@@ -217,6 +217,7 @@ export default defineComponent({
 			if (page.value.startsWith('registry/value/system/')) {
 				return defineAsyncComponent(() => import('./registry.value.vue'));
 			}
+			return null;
 		});
 
 		watch(component, () => {

packages/client/src/pages/settings/theme.vue

@@ -148,7 +148,7 @@ export default defineComponent({
 		const themesCount = installedThemes.value.length;
 
 		watch(syncDeviceDarkMode, () => {
-			if (syncDeviceDarkMode) {
+			if (syncDeviceDarkMode.value) {
 				defaultStore.set('darkMode', isDeviceDarkmode());
 			}
 		});

packages/client/src/pages/share.vue

@@ -12,7 +12,7 @@
 				:initial-local-only="localOnly"
 				:reply="reply"
 				:renote="renote"
-				:visible-users="visibleUsers"
+				:initial-visible-users="visibleUsers"
 				@posted="state = 'posted'"
 				class="_panel"
 			/>

packages/client/src/pages/welcome.timeline.vue

@@ -12,7 +12,7 @@
 					<XMediaList :media-list="note.files"/>
 				</div>
 				<div v-if="note.poll">
-					<XPoll :note="note" :readOnly="true" />
+					<XPoll :note="note" :readOnly="true"/>
 				</div>
 			</div>
 			<XReactionsViewer :note="note" ref="reactionsViewer"/>

packages/client/src/scripts/reaction-picker.ts

@@ -4,8 +4,8 @@ import { popup } from '@/os';
 class ReactionPicker {
 	private src: Ref<HTMLElement | null> = ref(null);
 	private manualShowing = ref(false);
-	private onChosen?: Function;
-	private onClosed?: Function;
+	private onChosen?: (reaction: string) => void;
+	private onClosed?: () => void;
 
 	constructor() {
 		// nop
@@ -30,7 +30,7 @@ class ReactionPicker {
 		});
 	}
 
-	public show(src: HTMLElement, onChosen: Function, onClosed: Function) {
+	public show(src: HTMLElement, onChosen: ReactionPicker['onChosen'], onClosed: ReactionPicker['onClosed']) {
 		this.src.value = src;
 		this.manualShowing.value = true;
 		this.onChosen = onChosen;

packages/client/src/ui/chat/date-separated-list.vue

@@ -20,12 +20,6 @@ export default defineComponent({
 		},
 	},
 
-	methods: {
-		focus() {
-			this.$slots.default[0].elm.focus();
-		}
-	},
-
 	render() {
 		const getDateText = (time: string) => {
 			const date = new Date(time).getDate();

packages/client/src/ui/chat/index.vue

@@ -194,10 +194,6 @@ export default defineComponent({
 			}
 		},
 
-		onTransition() {
-			if (window._scroll) window._scroll();
-		},
-
 		showMenu() {
 			this.$refs.menu.show();
 		},

packages/client/src/ui/chat/note.sub.vue

@@ -6,7 +6,7 @@
 			<XNoteHeader class="header" :note="note" :mini="true"/>
 			<div class="body">
 				<p v-if="note.cw != null" class="cw">
-					<Mfm v-if="note.cw != ''" class="text" :text="note.cw" :author="note.user" :i="$i" :custom-emojis="note.emojis" />
+					<Mfm v-if="note.cw != ''" class="text" :text="note.cw" :author="note.user" :i="$i" :custom-emojis="note.emojis"/>
 					<XCwButton v-model="showContent" :note="note"/>
 				</p>
 				<div class="content" v-show="note.cw == null || showContent">

packages/client/src/ui/chat/post-form.vue

@@ -18,7 +18,7 @@
 			</div>
 		</div>
 		<input v-show="useCw" ref="cw" class="cw" v-model="cw" :placeholder="$ts.annotation" @keydown="onKeydown">
-		<textarea v-model="text" class="text" :class="{ withCw: useCw }" ref="text" :disabled="posting" :placeholder="placeholder" @keydown="onKeydown" @paste="onPaste" @compositionupdate="onCompositionUpdate" @compositionend="onCompositionEnd" />
+		<textarea v-model="text" class="text" :class="{ withCw: useCw }" ref="text" :disabled="posting" :placeholder="placeholder" @keydown="onKeydown" @paste="onPaste" @compositionupdate="onCompositionUpdate" @compositionend="onCompositionEnd"/>
 		<XPostFormAttaches class="attaches" :files="files" @updated="updateFiles" @detach="detachFile" @changeSensitive="updateFileSensitive" @changeName="updateFileName"/>
 		<XPollEditor v-if="poll" :poll="poll" @destroyed="poll = null" @updated="onPollUpdate"/>
 		<footer>

packages/client/src/ui/visitor/kanban.vue

@@ -17,7 +17,7 @@
 				<div class="announcements panel">
 					<header>{{ $ts.announcements }}</header>
 					<MkPagination :pagination="announcements" #default="{items}" class="list">
-						<section class="item" v-for="(announcement, i) in items" :key="announcement.id">
+						<section class="item" v-for="announcement in items" :key="announcement.id">
 							<div class="title">{{ announcement.title }}</div>
 							<div class="content">
 								<Mfm :text="announcement.text"/>