50 lines
1.8 KiB
Vue
50 lines
1.8 KiB
Vue
<template>
|
|
<section class="flex flex-col gap-3">
|
|
<div class="text-lg font-semibold capitalize">{{ componentKey }}</div>
|
|
<template v-for="(value, name) in tokens" :key="name">
|
|
<DesignComponentSection v-if="name !== 'colorScheme'" :componentKey="componentKey" :name="name" />
|
|
</template>
|
|
<Tabs v-if="hasColorScheme" value="cs-0">
|
|
<TabList>
|
|
<Tab value="cs-0">Light</Tab>
|
|
<Tab value="cs-1">Dark</Tab>
|
|
</TabList>
|
|
<TabPanels class="!px-0">
|
|
<TabPanel value="cs-0">
|
|
<div class="flex flex-col gap-3">
|
|
<DesignComponentSection v-for="(value, name) in lightTokens" :key="name" :componentKey="componentKey" :name="name" colorScheme="light" />
|
|
</div>
|
|
</TabPanel>
|
|
<TabPanel value="cs-1">
|
|
<div class="flex flex-col gap-3">
|
|
<DesignComponentSection v-for="(value, name) in darkTokens" :key="name" :componentKey="componentKey" :name="name" colorScheme="dark" />
|
|
</div>
|
|
</TabPanel>
|
|
</TabPanels>
|
|
</Tabs>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
inject: ['$preset'],
|
|
computed: {
|
|
componentKey() {
|
|
return this.$route.name;
|
|
},
|
|
tokens() {
|
|
return this.$preset.components[this.componentKey];
|
|
},
|
|
lightTokens() {
|
|
return this.$preset.components[this.componentKey].colorScheme.light;
|
|
},
|
|
darkTokens() {
|
|
return this.$preset.components[this.componentKey].colorScheme.dark;
|
|
},
|
|
hasColorScheme() {
|
|
return this.tokens.colorScheme != undefined;
|
|
}
|
|
}
|
|
};
|
|
</script>
|