2024-06-23 23:18:55 +08:00
|
|
|
<script setup lang="ts">
|
2024-07-13 16:35:47 +08:00
|
|
|
import type { TabsOption } from '@vben/types';
|
2024-06-23 23:18:55 +08:00
|
|
|
|
|
|
|
import { computed } from 'vue';
|
|
|
|
|
|
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@vben-core/shadcn-ui';
|
|
|
|
|
|
|
|
interface Props {
|
2024-07-13 16:35:47 +08:00
|
|
|
tabs: TabsOption[];
|
2024-06-23 23:18:55 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
defineOptions({
|
|
|
|
name: 'AnalysisChartsTabs',
|
|
|
|
});
|
|
|
|
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
|
|
tabs: () => [],
|
|
|
|
});
|
|
|
|
|
|
|
|
const defaultValue = computed(() => {
|
|
|
|
return props.tabs?.[0].value;
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<template>
|
2024-06-30 15:03:37 +08:00
|
|
|
<div class="card-box w-full px-4 pb-5 pt-3 shadow">
|
2024-06-23 23:18:55 +08:00
|
|
|
<Tabs :default-value="defaultValue">
|
|
|
|
<TabsList>
|
|
|
|
<template v-for="tab in tabs" :key="tab.label">
|
|
|
|
<TabsTrigger :value="tab.value"> {{ tab.label }} </TabsTrigger>
|
|
|
|
</template>
|
|
|
|
</TabsList>
|
|
|
|
<template v-for="tab in tabs" :key="tab.label">
|
|
|
|
<TabsContent :value="tab.value" class="pt-4">
|
|
|
|
<slot :name="tab.value"></slot>
|
|
|
|
</TabsContent>
|
|
|
|
</template>
|
|
|
|
</Tabs>
|
|
|
|
</div>
|
|
|
|
</template>
|