46 lines
1.3 KiB
Vue
46 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
import { type TabItem } from './type'
|
|
|
|
const props = defineProps<{
|
|
initialActiveTab: string
|
|
data: TabItem[]
|
|
}>()
|
|
|
|
const activeTab = ref(props.initialActiveTab)
|
|
const emit = defineEmits<{
|
|
changeTab: [value: string]
|
|
}>()
|
|
|
|
function changeTab(value: string) {
|
|
activeTab.value = value
|
|
emit('changeTab', value)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<!-- Tabs -->
|
|
<div class="mt-4 flex flex-wrap gap-2 rounded-md border bg-white p-4 shadow-sm dark:bg-neutral-950">
|
|
<Button
|
|
v-for="tab in data"
|
|
:key="tab.value"
|
|
:data-active="activeTab === tab.value"
|
|
class="rounded-full transition data-[active=false]:bg-gray-100 data-[active=true]:bg-primary data-[active=false]:text-gray-700 data-[active=true]:text-white"
|
|
@click="changeTab(tab.value)"
|
|
>
|
|
{{ tab.label }}
|
|
</Button>
|
|
</div>
|
|
|
|
<!-- Active Tab Content -->
|
|
<div class="mt-4 rounded-md border p-4">
|
|
<component
|
|
:is="data.find((t) => t.value === activeTab)?.component"
|
|
v-bind="data.find((t) => t.value === activeTab)?.props"
|
|
/>
|
|
<!-- v-if="data.find((t) => t.value === activeTab)?.component" -->
|
|
<!-- :is="data.find((t) => t.value === activeTab)?.component" -->
|
|
<!-- v-bind="data.find((t) => t.value === activeTab)?.props || {}" -->
|
|
<!-- :label="data.find((t) => t.value === activeTab)?.label" -->
|
|
</div>
|
|
</template>
|