Enhanced content for token autocomplete

apps/showcase/components/layout/AppDesigner.vue

@@ -157,7 +157,7 @@
 
 <script>
 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';
@@ -510,7 +510,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 +524,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 });
                     }
                 }
             }

apps/showcase/components/layout/designer/DesignTokenField.vue

@@ -9,6 +9,7 @@
                 :suggestions="items"
                 @complete="search"
                 unstyled
+                optionLabel="label"
                 :showEmptyMessage="false"
                 :pt="{
                     pcInputText: {
@@ -16,11 +17,21 @@
                     },
                     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',
+                    list: 'm-0 py-2 px-2 list-none rounded-md',
                     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'
                 }"
                 @option-select="onOptionSelect"
-            />
+            >
+                <template #option="slotProps">
+                    <div v-tooltip.left="slotProps.option.value" class="flex items-center justify-between gap-4">
+                        <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,7 +79,7 @@ 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;
             }