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

Refactored component tokens visual impl

master
Cagatay Civici 2024-12-14 11:09:33 +03:00
parent 6b90a89033
commit d0511d7539
2 changed files with 11 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,7 +2,7 @@
<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" />
<DesignComponentSection v-if="name !== 'colorScheme'" :componentKey="componentKey" :path="name" />
</template>
<Tabs v-if="hasColorScheme" value="cs-0">
<TabList>
@ -12,12 +12,12 @@
<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" />
<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" :name="name" colorScheme="dark" />
<DesignComponentSection v-for="(value, name) in darkTokens" :key="name" :componentKey="componentKey" :path="'colorScheme.dark.' + name" />
</div>
</TabPanel>
</TabPanels>

25
apps/showcase/components/layout/designer/component/DesignComponentSection.vue
View File

@ -7,7 +7,7 @@
</template>
</div>
<template v-if="hasNestedTokens">
<DesignComponentSection v-for="(n_value, n_name) in nestedTokens" :key="n_name" :componentKey="componentKey" :name="n_name" :parentPath="fullPath" class="mt-3" />
<DesignComponentSection v-for="(n_value, n_name) in nestedTokens" :key="n_name" :componentKey="componentKey" :path="path + '.' + n_name" class="mt-3" />
</template>
</section>
</template>
@ -19,15 +19,7 @@ export default {
type: null,
default: null
},
name: {
type: null,
default: null
},
parentPath: {
type: null,
default: null
},
colorScheme: {
path: {
type: null,
default: null
}
@ -66,17 +58,16 @@ export default {
}
},
computed: {
fullPath() {
return this.parentPath ? this.parentPath + '.' + this.name : this.name;
},
sectionName() {
const names = this.fullPath.split('.');
const names = this.path.split('.');
return names.map((n) => this.capitalize(this.camelCaseToSpaces(n))).join(' ');
return names
.filter((n) => n !== 'colorScheme' && n !== 'light' && n !== 'dark')
.map((n) => this.capitalize(this.camelCaseToSpaces(n)))
.join(' ');
},
tokens() {
if (this.colorScheme) return this.getObjectProperty(this.$preset.components[this.componentKey].colorScheme[this.colorScheme], this.fullPath);
else return this.getObjectProperty(this.$preset.components[this.componentKey], this.fullPath);
return this.getObjectProperty(this.$preset.components[this.componentKey], this.path);
},
nestedTokens() {
const groups = {};