vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Use fieldsets in components token grouping

pull/7044/head
Cagatay Civici 2025-01-04 00:27:29 +03:00
parent 28d5cf5ea0
commit 81966b9b39
1 changed files with 30 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
apps/showcase/components/layout/designer/editor/component/DesignComponent.vue
View File

@ -1,27 +1,34 @@
<template> <template>
<section v-if="isComponentRoute" class="flex flex-col gap-3"> <section v-if="isComponentRoute">
<div class="text-lg font-semibold capitalize">{{ componentKey }}</div> <div class="text-lg font-semibold capitalize mb-2">{{ componentKey }}</div>
<template v-for="(value, name) in tokens" :key="name"> <Fieldset legend="Common" :toggleable="true" class="mb-3">
<DesignComponentSection v-if="name !== 'colorScheme'" :componentKey="componentKey" :path="name" /> <div class="flex flex-col gap-3">
</template> <template v-for="(value, name) in tokens" :key="name">
<Tabs v-if="hasColorScheme" value="cs-0"> <DesignComponentSection v-if="name !== 'colorScheme'" :componentKey="componentKey" :path="name" />
<TabList> </template>
<Tab value="cs-0">Light</Tab> </div>
<Tab value="cs-1">Dark</Tab> </Fieldset>
</TabList> <Fieldset legend="Color Scheme" :toggleable="true">
<TabPanels class="!px-0"> <Tabs v-if="hasColorScheme" value="cs-0">
<TabPanel value="cs-0"> <TabList>
<div class="flex flex-col gap-3"> <Tab value="cs-0">Light</Tab>
<DesignComponentSection v-for="(value, name) in lightTokens" :key="name" :componentKey="componentKey" :path="'colorScheme.light.' + name" /> <Tab value="cs-1">Dark</Tab>
</div> </TabList>
</TabPanel> <TabPanels>
<TabPanel value="cs-1"> <TabPanel value="cs-0">
<div class="flex flex-col gap-3"> <div class="flex flex-col gap-3">
<DesignComponentSection v-for="(value, name) in darkTokens" :key="name" :componentKey="componentKey" :path="'colorScheme.dark.' + name" /> <DesignComponentSection v-for="(value, name) in lightTokens" :key="name" :componentKey="componentKey" :path="'colorScheme.light.' + name" />
</div> </div>
</TabPanel> </TabPanel>
</TabPanels> <TabPanel value="cs-1">
</Tabs> <div class="flex flex-col gap-3">
<DesignComponentSection v-for="(value, name) in darkTokens" :key="name" :componentKey="componentKey" :path="'colorScheme.dark.' + name" />
</div>
</TabPanel>
</TabPanels>
</Tabs>
<span v-else class="block py-3"> There are no design tokens per color scheme. </span>
</Fieldset>
</section> </section>
</template> </template>