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

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

@ -1,15 +1,20 @@
<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>
<Fieldset legend="Common" :toggleable="true" class="mb-3">
<div class="flex flex-col gap-3">
<template v-for="(value, name) in tokens" :key="name"> <template v-for="(value, name) in tokens" :key="name">
<DesignComponentSection v-if="name !== 'colorScheme'" :componentKey="componentKey" :path="name" /> <DesignComponentSection v-if="name !== 'colorScheme'" :componentKey="componentKey" :path="name" />
</template> </template>
</div>
</Fieldset>
<Fieldset legend="Color Scheme" :toggleable="true">
<Tabs v-if="hasColorScheme" value="cs-0"> <Tabs v-if="hasColorScheme" value="cs-0">
<TabList> <TabList>
<Tab value="cs-0">Light</Tab> <Tab value="cs-0">Light</Tab>
<Tab value="cs-1">Dark</Tab> <Tab value="cs-1">Dark</Tab>
</TabList> </TabList>
<TabPanels class="!px-0"> <TabPanels>
<TabPanel value="cs-0"> <TabPanel value="cs-0">
<div class="flex flex-col gap-3"> <div class="flex flex-col gap-3">
<DesignComponentSection v-for="(value, name) in lightTokens" :key="name" :componentKey="componentKey" :path="'colorScheme.light.' + name" /> <DesignComponentSection v-for="(value, name) in lightTokens" :key="name" :componentKey="componentKey" :path="'colorScheme.light.' + name" />
@ -22,6 +27,8 @@
</TabPanel> </TabPanel>
</TabPanels> </TabPanels>
</Tabs> </Tabs>
<span v-else class="block py-3"> There are no design tokens per color scheme. </span>
</Fieldset>
</section> </section>
</template> </template>