refactor(frontend): MkTabの指定をpropsから行うように (#16596)

* refactor(frontend): MkTabの指定をpropsから行うように

* Update explore.featured.vue

packages/frontend/src/components/MkTab.vue

@@ -3,76 +3,85 @@ SPDX-FileCopyrightText: syuilo and misskey-project
 SPDX-License-Identifier: AGPL-3.0-only
 -->
 
+<template>
+	<div :class="$style.tabsRoot">
+		<button
+			v-for="option in tabs"
+			:key="option.key"
+			:class="['_button', $style.tabButton, { [$style.active]: modelValue === option.key }]"
+			:disabled="modelValue === option.key"
+			@click="update(option.key)"
+		>
+			<i v-if="option.icon" :class="[option.icon, $style.icon]"></i>
+			{{ option.label }}
+		</button>
+	</div>
+</template>
+
 <script lang="ts">
-import { defineComponent, h, resolveDirective, withDirectives } from 'vue';
+export type Tab<T = string> = {
-
+	key: T;
-export default defineComponent({
+	icon?: string;
-	props: {
+	label?: string;
-		modelValue: {
+};
-			required: true,
-		},
-	},
-	setup(props, { emit, slots }) {
-		const options = slots.default?.() ?? [];
-
-		return () => h('div', {
-			class: 'pxhvhrfw',
-		}, options.map(option => withDirectives(h('button', {
-			class: ['_button', { active: props.modelValue === option.props?.value }],
-			key: option.key as string,
-			disabled: props.modelValue === option.props?.value,
-			onClick: () => {
-				emit('update:modelValue', option.props?.value);
-			},
-		}, option.children ?? []), [
-			[resolveDirective('click-anime')],
-		])));
-	},
-});
 </script>
 
-<style lang="scss">
+<script setup lang="ts" generic="const T extends Tab">
-.pxhvhrfw {
+import { defineProps, defineEmits } from 'vue';
+
+defineProps<{
+	tabs: T[];
+}>();
+
+const model = defineModel<T['key']>();
+
+function update(key: T['key']) {
+	model.value = key;
+}
+</script>
+
+<style module lang="scss">
+.tabsRoot {
 	display: flex;
 	font-size: 90%;
+}
 
-	> button {
+.tabButton {
-		flex: 1;
+	flex: 1;
-		padding: 10px 8px;
+	padding: 10px 8px;
-		border-radius: 999px;
+	border-radius: 999px;
 
-		&:disabled {
+	&:disabled {
-			opacity: 1 !important;
+		opacity: 1 !important;
-			cursor: default;
+		cursor: default;
-		}
+	}
 
-		&.active {
+	&.active {
-			color: var(--MI_THEME-accent);
+		color: var(--MI_THEME-accent);
-			background: var(--MI_THEME-accentedBg);
+		background: var(--MI_THEME-accentedBg);
-		}
+	}
 
-		&:not(.active):hover {
+	&:not(.active):hover {
-			color: var(--MI_THEME-fgHighlighted);
+		color: var(--MI_THEME-fgHighlighted);
-			background: var(--MI_THEME-panelHighlight);
+		background: var(--MI_THEME-panelHighlight);
-		}
+	}
 
-		&:not(:first-child) {
+	&:not(:first-child) {
-			margin-left: 8px;
+		margin-left: 8px;
-		}
+	}
 
-		> .icon {
+	> .icon {
-			margin-right: 6px;
+		margin-right: 6px;
-		}
 	}
 }
 
 @container (max-width: 500px) {
-	.pxhvhrfw {
+	.tabsRoot {
 		font-size: 80%;
+	}
 
-		> button {
+	.tabButton {
-			padding: 11px 8px;
+		padding: 11px 8px;
-		}
 	}
 }
 </style>

packages/frontend/src/pages/explore.featured.vue

@@ -5,9 +5,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div class="_spacer" style="--MI_SPACER-w: 800px;">
-	<MkTab v-model="tab" style="margin-bottom: var(--MI-margin);">
+	<MkTab
-		<option value="notes">{{ i18n.ts.notes }}</option>
+		v-model="tab"
-		<option value="polls">{{ i18n.ts.poll }}</option>
+		:tabs="[
+			{ key: 'notes', label: i18n.ts.notes },
+			{ key: 'polls', label: i18n.ts.poll },
+		]"
+		style="margin-bottom: var(--MI-margin);"
+	>
 	</MkTab>
 	<MkNotesTimeline v-if="tab === 'notes'" :paginator="paginatorForNotes"/>
 	<MkNotesTimeline v-else-if="tab === 'polls'" :paginator="paginatorForPolls"/>
@@ -33,5 +38,5 @@ const paginatorForPolls = markRaw(new Paginator('notes/polls/recommendation', {
 	},
 }));
 
-const tab = ref('notes');
+const tab = ref<'notes' | 'polls'>('notes');
 </script>

packages/frontend/src/pages/explore.users.vue

@@ -5,9 +5,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div class="_spacer" style="--MI_SPACER-w: 1200px;">
-	<MkTab v-if="instance.federation !== 'none'" v-model="origin" style="margin-bottom: var(--MI-margin);">
+	<MkTab
-		<option value="local">{{ i18n.ts.local }}</option>
+		v-if="instance.federation !== 'none'"
-		<option value="remote">{{ i18n.ts.remote }}</option>
+		v-model="origin"
+		:tabs="[
+			{ key: 'local', label: i18n.ts.local },
+			{ key: 'remote', label: i18n.ts.remote },
+		]"
+		style="margin-bottom: var(--MI-margin);"
+	>
 	</MkTab>
 	<div v-if="origin === 'local'">
 		<template v-if="tag == null">
@@ -77,7 +83,7 @@ const props = defineProps<{
 	tag?: string;
 }>();
 
-const origin = ref('local');
+const origin = ref<'local' | 'remote'>('local');
 const tagsLocal = ref<Misskey.entities.Hashtag[]>([]);
 const tagsRemote = ref<Misskey.entities.Hashtag[]>([]);
 

packages/frontend/src/pages/qr.read.vue

@@ -39,10 +39,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 		>
 			<MkStickyContainer>
 				<template #header>
-					<MkTab v-model="tab" :class="$style.tab">
+					<MkTab
-						<option value="users">{{ i18n.ts.users }}</option>
+						v-model="tab"
-						<option value="notes">{{ i18n.ts.notes }}</option>
+						:tabs="[
-						<option value="all">{{ i18n.ts.all }}</option>
+							{ key: 'users', label: i18n.ts.users },
+							{ key: 'notes', label: i18n.ts.notes },
+							{ key: 'all', label: i18n.ts.all },
+						]"
+						:class="$style.tab"
+					>
 					</MkTab>
 				</template>
 				<div v-if="tab === 'users'" :class="[$style.users, '_margin']" style="padding-bottom: var(--MI-margin);">

packages/frontend/src/pages/user/index.timeline.vue

@@ -6,11 +6,16 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <MkStickyContainer>
 	<template #header>
-		<MkTab v-model="tab" :class="$style.tab">
+		<MkTab
-			<option value="featured">{{ i18n.ts.featured }}</option>
+			v-model="tab"
-			<option value="notes">{{ i18n.ts.notes }}</option>
+			:tabs="[
-			<option value="all">{{ i18n.ts.all }}</option>
+				{ key: 'featured', label: i18n.ts.featured },
-			<option value="files">{{ i18n.ts.withFiles }}</option>
+				{ key: 'notes', label: i18n.ts.notes },
+				{ key: 'all', label: i18n.ts.all },
+				{ key: 'files', label: i18n.ts.withFiles },
+			]"
+			:class="$style.tab"
+		>
 		</MkTab>
 	</template>
 	<MkNotesTimeline v-if="tab === 'featured'" :noGap="true" :paginator="featuredPaginator" :pullToRefresh="false" :class="$style.tl"/>
@@ -30,7 +35,7 @@ const props = defineProps<{
 	user: Misskey.entities.UserDetailed;
 }>();
 
-const tab = ref<string>('all');
+const tab = ref<'featured' | 'notes' | 'all' | 'files'>('all');
 
 const featuredPaginator = markRaw(new Paginator('users/featured-notes', {
 	limit: 10,

packages/frontend/src/pages/user/notes.vue

@@ -8,11 +8,16 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<div :class="$style.root">
 		<MkStickyContainer>
 			<template #header>
-				<MkTab v-model="tab" :class="$style.tab">
+				<MkTab
-					<option value="featured">{{ i18n.ts.featured }}</option>
+					v-model="tab"
-					<option value="notes">{{ i18n.ts.notes }}</option>
+					:tabs="[
-					<option value="all">{{ i18n.ts.all }}</option>
+						{ key: 'featured', label: i18n.ts.featured },
-					<option value="files">{{ i18n.ts.withFiles }}</option>
+						{ key: 'notes', label: i18n.ts.notes },
+						{ key: 'all', label: i18n.ts.all },
+						{ key: 'files', label: i18n.ts.withFiles },
+					]"
+					:class="$style.tab"
+				>
 				</MkTab>
 			</template>
 			<MkNotesTimeline v-if="tab === 'featured'" :noGap="true" :paginator="featuredPaginator" :class="$style.tl"/>
@@ -34,7 +39,7 @@ const props = defineProps<{
 	user: Misskey.entities.UserDetailed;
 }>();
 
-const tab = ref<string>('all');
+const tab = ref<'featured' | 'notes' | 'all' | 'files'>('all');
 
 const featuredPaginator = markRaw(new Paginator('users/featured-notes', {
 	limit: 10,