-
Notifications
You must be signed in to change notification settings - Fork 1.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Initiate component tokens for Visual Designer
- Loading branch information
1 parent
537772d
commit 6b90a89
Showing
4 changed files
with
161 additions
and
17 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
49 changes: 49 additions & 0 deletions
49
apps/showcase/components/layout/designer/component/DesignComponent.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| <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> |
102 changes: 102 additions & 0 deletions
102
apps/showcase/components/layout/designer/component/DesignComponentSection.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,102 @@ | ||
| <template> | ||
| <section> | ||
| <div class="text-sm mb-1 font-semibold text-surface-950 dark:text-surface-0 capitalize">{{ sectionName }}</div> | ||
| <div class="grid grid-cols-4 gap-2"> | ||
| <template v-for="(t_value, t_name) in tokens" :key="t_name"> | ||
| <DesignTokenField v-if="!isObject(t_value)" v-model="tokens[t_name]" :label="camelCaseToSpaces(t_name)" :type="isColor(t_name) ? 'color' : null" /> | ||
| </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" /> | ||
| </template> | ||
| </section> | ||
| </template> | ||
|
|
||
| <script> | ||
| export default { | ||
| props: { | ||
| componentKey: { | ||
| type: null, | ||
| default: null | ||
| }, | ||
| name: { | ||
| type: null, | ||
| default: null | ||
| }, | ||
| parentPath: { | ||
| type: null, | ||
| default: null | ||
| }, | ||
| colorScheme: { | ||
| type: null, | ||
| default: null | ||
| } | ||
| }, | ||
| inject: ['$preset'], | ||
| methods: { | ||
| camelCaseToSpaces(val) { | ||
| return val.replace(/([a-z])([A-Z])/g, '$1 $2'); | ||
| }, | ||
| isColor(val) { | ||
| return val.toLowerCase().includes('color') || val.toLowerCase().includes('background'); | ||
| }, | ||
| isObject(val) { | ||
| return val !== null && typeof val === 'object'; | ||
| }, | ||
| getObjectProperty(obj, path) { | ||
| const keys = path.split('.'); | ||
| let current = obj; | ||
| for (const key of keys) { | ||
| if (current[key] !== undefined) { | ||
| current = current[key]; | ||
| } else { | ||
| return undefined; | ||
| } | ||
| } | ||
| return current; | ||
| }, | ||
| capitalize(str) { | ||
| if (typeof str !== 'string' || str.length === 0) { | ||
| return str; | ||
| } | ||
| return str.charAt(0).toUpperCase() + str.slice(1); | ||
| } | ||
| }, | ||
| computed: { | ||
| fullPath() { | ||
| return this.parentPath ? this.parentPath + '.' + this.name : this.name; | ||
| }, | ||
| sectionName() { | ||
| const names = this.fullPath.split('.'); | ||
| return names.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); | ||
| }, | ||
| nestedTokens() { | ||
| const groups = {}; | ||
| const obj = this.tokens; | ||
| for (const key in obj) { | ||
| if (obj.hasOwnProperty(key)) { | ||
| const value = obj[key]; | ||
| if (this.isObject(value)) { | ||
| groups[key] = value; | ||
| } | ||
| } | ||
| } | ||
| return groups; | ||
| }, | ||
| hasNestedTokens() { | ||
| return Object.keys(this.nestedTokens).length > 0; | ||
| } | ||
| } | ||
| }; | ||
| </script> |