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

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

* Update explore.featured.vue

1 files changed, 60 insertions, 51 deletions

diff --git a/packages/frontend/src/components/MkTab.vue b/packages/frontend/src/components/MkTab.vue
index f557ffa5dc..d8ae52482e 100644
--- a/packages/frontend/src/components/MkTab.vue
+++ b/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;
+	icon?: string;
+	label?: string;
+};
+</script>
+
+<script setup lang="ts" generic="const T extends Tab">
+import { defineProps, defineEmits } from 'vue';
 
-export default defineComponent({
-	props: {
-		modelValue: {
-			required: true,
-		},
-	},
-	setup(props, { emit, slots }) {
-		const options = slots.default?.() ?? [];
+defineProps<{
+	tabs: T[];
+}>();
 
-		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')],
-		])));
-	},
-});
+const model = defineModel<T['key']>();
+
+function update(key: T['key']) {
+	model.value = key;
+}
 </script>
 
-<style lang="scss">
-.pxhvhrfw {
+<style module lang="scss">
+.tabsRoot {
 	display: flex;
 	font-size: 90%;
+}
 
-	> button {
-		flex: 1;
-		padding: 10px 8px;
-		border-radius: 999px;
+.tabButton {
+	flex: 1;
+	padding: 10px 8px;
+	border-radius: 999px;
 
-		&:disabled {
-			opacity: 1 !important;
-			cursor: default;
-		}
+	&:disabled {
+		opacity: 1 !important;
+		cursor: default;
+	}
 
-		&.active {
-			color: var(--MI_THEME-accent);
-			background: var(--MI_THEME-accentedBg);
-		}
+	&.active {
+		color: var(--MI_THEME-accent);
+		background: var(--MI_THEME-accentedBg);
+	}
 
-		&:not(.active):hover {
-			color: var(--MI_THEME-fgHighlighted);
-			background: var(--MI_THEME-panelHighlight);
-		}
+	&:not(.active):hover {
+		color: var(--MI_THEME-fgHighlighted);
+		background: var(--MI_THEME-panelHighlight);
+	}
 
-		&:not(:first-child) {
-			margin-left: 8px;
-		}
+	&:not(:first-child) {
+		margin-left: 8px;
+	}
 
-		> .icon {
-			margin-right: 6px;
-		}
+	> .icon {
+		margin-right: 6px;
 	}
 }
 
 @container (max-width: 500px) {
-	.pxhvhrfw {
+	.tabsRoot {
 		font-size: 80%;
+	}
 
-		> button {
-			padding: 11px 8px;
-		}
+	.tabButton {
+		padding: 11px 8px;
 	}
 }
 </style>