Redo custom token support

primefaces · Dec 28, 2024 · 2ebda30 · 2ebda30
1 parent 121b8fc
commit 2ebda30
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 20 deletions.
diff --git a/apps/showcase/components/layout/AppDesigner.vue b/apps/showcase/components/layout/AppDesigner.vue
@@ -135,13 +135,13 @@ export default {
                         const tokenValue = $dt(tokenName).value;
                         const isColor = tokenName.includes('color') || tokenName.includes('background') || regex.test(tokenName);
 
-                        this.$appState.designer.theme.acTokens.push({ token: tokenName, label: '{' + tokenName + '}', variable: $dt(tokenName).variable, value: tokenValue, isColor: isColor });
+                        this.$appState.designer.acTokens.push({ token: tokenName, label: '{' + tokenName + '}', variable: $dt(tokenName).variable, value: tokenValue, isColor: isColor });
                     }
                 }
             }
         },
         refreshACTokens() {
-            this.$appState.designer.theme.acTokens = [];
+            this.$appState.designer.acTokens = [];
             this.generateACTokens(null, this.$appState.designer.theme.preset);
         },
         openDashboard() {

diff --git a/apps/showcase/components/layout/designer/create/DesignCreateTheme.vue b/apps/showcase/components/layout/designer/create/DesignCreateTheme.vue
@@ -67,6 +67,7 @@ export default {
             designerApiBase: runtimeConfig.public.designerApiBase
         };
     },
+    inject: ['designerService'],
     data() {
         return {
             themeName: null,
@@ -171,15 +172,15 @@ export default {
                 name: this.themeName,
                 key: t_key,
                 preset: preset,
-                customTokens: [],
-                acTokens: [],
                 config: {
                     baseFontSize: '14px',
                     fontFamily: 'Inter var'
                 }
             };
+            this.design;
             this.replaceColorPalette();
             usePreset(preset);
+            this.designerService.refreshACTokens();
 
             this.$appState.designer.activeView = 'editor';
         }

diff --git a/apps/showcase/components/layout/designer/dashboard/DesignDashboard.vue b/apps/showcase/components/layout/designer/dashboard/DesignDashboard.vue
@@ -171,9 +171,7 @@ export default {
                     key: data.t_key,
                     name: data.t_name,
                     preset: JSON.parse(data.t_preset),
-                    config: JSON.parse(data.t_config),
-                    customTokens: [],
-                    acTokens: []
+                    config: JSON.parse(data.t_config)
                 };
 
                 usePreset(this.$appState.designer.theme.preset);

diff --git a/apps/showcase/components/layout/designer/editor/custom/DesignCustomTokens.vue b/apps/showcase/components/layout/designer/editor/custom/DesignCustomTokens.vue
@@ -1,15 +1,15 @@
 <template>
     <span class="leading-6 text-muted-color">Extend the theming system with your own design tokens e.g. <span class="font-medium">accent.color</span>. Do not use curly braces in the name field.</span>
     <ul class="flex flex-col gap-4 list-none p-0 mx-0 my-4">
-        <li v-for="(token, index) of $appState.designer.customTokens" :key="index" class="first:border-t border-b border-surface-200 dark:border-surface-300 py-2">
+        <li v-for="(token, index) of tokens" :key="index" class="first:border-t border-b border-surface-200 dark:border-surface-300 py-2">
             <div class="flex items-center gap-4">
                 <label class="flex items-center gap-2 flex-auto">
                     <span class="text-sm">Name</span>
-                    <input v-model="token['name']" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg py-2 px-2 w-full" />
+                    <input v-model="token['name']" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg py-2 px-2 w-full" placeholder="custom.token.name" />
                 </label>
                 <label class="flex items-center gap-2 flex-auto">
                     <span class="text-sm">Value</span>
-                    <input v-model="token['value']" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg py-2 px-2 w-full" />
+                    <input v-model="token['value']" type="text" class="border border-surface-300 dark:border-surface-600 rounded-lg py-2 px-2 w-full" placeholder="token value" />
                 </label>
                 <button
                     type="button"
@@ -30,9 +30,8 @@
             Add New
         </button>
         <button
-            v-if="$appState.designer.theme.customTokens.length"
             type="button"
-            @click="saveTokens"
+            @click="save"
             class="px-3 py-2 bg-zinc-950 hover:bg-zinc-800 text-white dark:bg-white dark:hover:bg-gray-100 dark:text-black rounded-md font-medium cursor-pointer transition-colors duration-200 focus:outline focus:outline-offset-2 focus:outline-zinc-950 focus:dark:outline-white"
         >
             Save
@@ -43,22 +42,38 @@
 <script>
 export default {
     inject: ['designerService'],
+    data() {
+        return {
+            tokens: []
+        };
+    },
+    created() {
+        const extend = this.$appState.designer.theme.preset.extend;
+
+        this.tokens = [];
+
+        if (extend) {
+            for (let token in extend) {
+                this.tokens.push({ name: token.replace(/([a-z])([A-Z])/g, '$1.$2').toLowerCase(), value: extend[token] });
+            }
+        }
+    },
     methods: {
         addToken() {
-            this.$appState.designer.theme.customTokens = [...this.$appState.designer.theme.customTokens, ...[{}]];
+            this.tokens = [...this.tokens, ...[{}]];
         },
         removeToken(index) {
-            this.$appState.designer.theme.customTokens.splice(index, 1);
+            this.tokens.splice(index, 1);
         },
-        saveTokens() {
+        save() {
             this.$appState.designer.theme.preset.extend = {};
-            this.$appState.designer.theme.customTokens.forEach((token) => {
+
+            this.tokens.forEach((token) => {
                 this.$appState.designer.theme.preset.extend[this.transformTokenName(token.name)] = token.value;
             });
 
+            this.designerService.saveTheme(this.$appState.designer.theme);
             this.designerService.refreshACTokens();
-            this.designerService.saveTheme();
-
             this.$toast.add({ severity: 'success', summary: 'Success', detail: 'Tokens saved', life: 3000 });
         },
         transformTokenName(name) {

diff --git a/apps/showcase/plugins/app-state.js b/apps/showcase/plugins/app-state.js
@@ -24,10 +24,9 @@ const $appState = {
                     key: null,
                     name: null,
                     preset: null,
-                    customTokens: [],
-                    acTokens: [],
                     config: null
                 },
+                acTokens: [],
                 themes: []
             }
         });