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>
<section v-if="isComponentRoute" 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" :path="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" :path="'colorScheme.light.' + name" />
</div>
</TabPanel>
<TabPanel value="cs-1">
<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>
<section v-if="isComponentRoute">
<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">
<DesignComponentSection v-if="name !== 'colorScheme'" :componentKey="componentKey" :path="name" />
</template>
</div>
</Fieldset>
<Fieldset legend="Color Scheme" :toggleable="true">
<Tabs v-if="hasColorScheme" value="cs-0">
<TabList>
<Tab value="cs-0">Light</Tab>
<Tab value="cs-1">Dark</Tab>
</TabList>
<TabPanels>
<TabPanel value="cs-0">
<div class="flex flex-col gap-3">
<DesignComponentSection v-for="(value, name) in lightTokens" :key="name" :componentKey="componentKey" :path="'colorScheme.light.' + name" />
</div>
</TabPanel>
<TabPanel value="cs-1">
<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>
</template>