43 lines
990 B
Vue
43 lines
990 B
Vue
|
<script setup lang="ts">
|
||
|
|
import type { TabsItem } from '@vben/types';
|
||
|
|
|
||
|
|
import { computed } from 'vue';
|
||
|
|
|
||
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@vben-core/shadcn-ui';
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
tabs: TabsItem[];
|
||
|
|
}
|
||
|
|
|
||
|
|
defineOptions({
|
||
|
|
name: 'AnalysisChartsTabs',
|
||
|
|
});
|
||
|
|
|
||
|
|
const props = withDefaults(defineProps<Props>(), {
|
||
|
|
tabs: () => [],
|
||
|
|
});
|
||
|
|
|
||
|
|
const defaultValue = computed(() => {
|
||
|
|
return props.tabs?.[0].value;
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<div
|
||
|
|
class="bg-card border-border w-full rounded-xl border px-4 pb-5 pt-3 shadow"
|
||
|
|
>
|
||
|
|
<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>
|