Merge branch 'master' of https://github.com/primefaces/primevue

primefaces · Nov 14, 2024 · bd113c7 · bd113c7
2 parents 1d5309a + 5a03589
commit bd113c7
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 8 deletions.
diff --git a/apps/showcase/components/layout/AppDesigner.vue b/apps/showcase/components/layout/AppDesigner.vue
@@ -156,8 +156,9 @@
 </template>
 
 <script>
+import EventBus from '@/app/AppEventBus';
 import { NoirPreset } from '@/themes/app-theme.js';
-import { $t, updatePreset, usePreset } from '@primevue/themes';
+import { $dt, $t, updatePreset, usePreset } from '@primevue/themes';
 import Aura from '@primevue/themes/aura';
 import Lara from '@primevue/themes/lara';
 import Material from '@primevue/themes/material';
@@ -371,6 +372,7 @@ export default {
         apply() {
             this.saveTheme();
             updatePreset(this.preset);
+            EventBus.emit('theme-palette-change');
         },
         download() {
             const basePreset = this.$appState.preset;
@@ -510,7 +512,7 @@ app.mount("#app");
             }
         },
         camelCaseToDotCase(name) {
-            return '{' + name.replace(/([a-z])([A-Z])/g, '$1.$2').toLowerCase() + '}';
+            return name.replace(/([a-z])([A-Z])/g, '$1.$2').toLowerCase();
         },
         generateACTokens(parentPath, obj) {
             for (let key in obj) {
@@ -524,7 +526,12 @@ app.mount("#app");
                     if (typeof obj[key] === 'object') {
                         this.generateACTokens(parentPath ? parentPath + '.' + key : key, obj[key]);
                     } else {
-                        this.acTokens.push(this.camelCaseToDotCase(parentPath ? parentPath + '.' + key : key));
+                        const regex = /\.\d+$/;
+                        const tokenName = this.camelCaseToDotCase(parentPath ? parentPath + '.' + key : key);
+                        const tokenValue = $dt(tokenName).value;
+                        const isColor = tokenName.includes('color') || tokenName.includes('background') || regex.test(tokenName);
+
+                        this.acTokens.push({ token: tokenName, label: '{' + tokenName + '}', variable: $dt(tokenName).variable, value: tokenValue, isColor: isColor });
                     }
                 }
             }

diff --git a/apps/showcase/components/layout/designer/DesignTokenField.vue b/apps/showcase/components/layout/designer/DesignTokenField.vue
@@ -9,18 +9,30 @@
                 :suggestions="items"
                 @complete="search"
                 unstyled
+                optionLabel="label"
                 :showEmptyMessage="false"
                 :pt="{
                     pcInputText: {
                         root: ['border border-surface-300 dark:border-surface-600 rounded-lg py-2 px-2 w-full', { 'pr-8': type === 'color' }]
                     },
                     overlay: 'border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-950 shadow-2 rounded-md',
                     listContainer: 'max-h-40 overflow-auto',
-                    list: 'm-0 py-2 px-0 list-none',
-                    option: 'cursor-pointer py-1 px-2 text-sm text-surface-700 dark:text-white/80 data-[p-focus=true]:bg-surface-100 data-[p-focus=true]:dark:bg-surface-800'
+                    list: 'm-0 py-2 px-2 list-none',
+                    loader: 'hidden',
+                    option: 'cursor-pointer py-1 text-sm text-surface-700 dark:text-white/80 data-[p-focus=true]:bg-surface-100 data-[p-focus=true]:dark:bg-surface-800 rounded-md'
                 }"
                 @option-select="onOptionSelect"
-            />
+            >
+                <template #option="slotProps">
+                    <div v-tooltip.left="slotProps.option.value" class="flex items-center justify-between gap-4 px-2">
+                        <span>{{ slotProps.option.token }}</span>
+                        <div v-if="slotProps.option.isColor" class="border border-surface-200 dark:border-surface-700 w-4 h-4 rounded-full" :style="{ backgroundColor: slotProps.option.variable }"></div>
+                        <div v-else class="text-xs max-w-16 text-ellipsis whitespace-nowrap overflow-hidden">
+                            {{ slotProps.option.value }}
+                        </div>
+                    </div>
+                </template>
+            </AutoComplete>
             <div v-if="type === 'color'" class="absolute right-[4px] top-1/2 -mt-3 w-6 h-6 rounded-md border border-surface-300 dark:border-surface-600" :style="{ backgroundColor: previewColor }"></div>
         </div>
     </div>
@@ -68,9 +80,9 @@ export default {
             const query = event.query;
 
             if (query.startsWith('{')) {
-                this.items = this.$acTokens.filter((t) => t.startsWith(query));
+                this.items = this.$acTokens.filter((t) => t.label.startsWith(query));
             } else {
-                this.items = null;
+                this.items = [];
             }
         }
     },