Refactored component tokens visual impl

apps/showcase/components/layout/designer/component/DesignComponent.vue

@@ -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>

apps/showcase/components/layout/designer/component/DesignComponentSection.vue

@@ -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: {
+        path: {
-            type: null,
-            default: null
-        },
-        parentPath: {
-            type: null,
-            default: null
-        },
-        colorScheme: {
             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);
+            return this.getObjectProperty(this.$preset.components[this.componentKey], this.path);
-            else return this.getObjectProperty(this.$preset.components[this.componentKey], this.fullPath);
         },
         nestedTokens() {
             const groups = {};