From 25476069036d237cfbb5f2d84958d353e7ecf2e5 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Thu, 14 Nov 2024 11:16:00 +0300
Subject: [PATCH 1/4] Enhanced content for token autocomplete

---
 apps/showcase/components/layout/AppDesigner.vue | 11 ++++++++---
 .../layout/designer/DesignTokenField.vue        | 17 ++++++++++++++---
 2 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/apps/showcase/components/layout/AppDesigner.vue b/apps/showcase/components/layout/AppDesigner.vue
index aad6c5e86c..0206fcb3bb 100644
--- a/apps/showcase/components/layout/AppDesigner.vue
+++ b/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 });
                     }
                 }
             }
diff --git a/apps/showcase/components/layout/designer/DesignTokenField.vue b/apps/showcase/components/layout/designer/DesignTokenField.vue
index 74398273ee..5a27967479 100644
--- a/apps/showcase/components/layout/designer/DesignTokenField.vue
+++ b/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;
             }

From 8c963f2968e1a382eb2c1edc2ec6c2dac9941c7f Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Thu, 14 Nov 2024 11:18:07 +0300
Subject: [PATCH 2/4] Better positioning

---
 .../components/layout/designer/DesignTokenField.vue         | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/showcase/components/layout/designer/DesignTokenField.vue b/apps/showcase/components/layout/designer/DesignTokenField.vue
index 5a27967479..08dd675dbb 100644
--- a/apps/showcase/components/layout/designer/DesignTokenField.vue
+++ b/apps/showcase/components/layout/designer/DesignTokenField.vue
@@ -17,13 +17,13 @@
                     },
                     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-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'
+                    list: 'm-0 py-2 px-2 list-none',
+                    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">
+                    <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">

From 7a590a259a8a8c825f7eeef256b3d666ad2f535f Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Thu, 14 Nov 2024 11:58:02 +0300
Subject: [PATCH 3/4] Hide loader

---
 apps/showcase/components/layout/designer/DesignTokenField.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/showcase/components/layout/designer/DesignTokenField.vue b/apps/showcase/components/layout/designer/DesignTokenField.vue
index 08dd675dbb..794ab75b68 100644
--- a/apps/showcase/components/layout/designer/DesignTokenField.vue
+++ b/apps/showcase/components/layout/designer/DesignTokenField.vue
@@ -18,6 +18,7 @@
                     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-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"
@@ -81,7 +82,7 @@ export default {
             if (query.startsWith('{')) {
                 this.items = this.$acTokens.filter((t) => t.label.startsWith(query));
             } else {
-                this.items = null;
+                this.items = [];
             }
         }
     },

From 5a03589ef4606cf348f125b8d9760aa1aaa0f798 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Thu, 14 Nov 2024 12:02:25 +0300
Subject: [PATCH 4/4] Call callback

---
 apps/showcase/components/layout/AppDesigner.vue | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/apps/showcase/components/layout/AppDesigner.vue b/apps/showcase/components/layout/AppDesigner.vue
index 0206fcb3bb..1abc6dff7c 100644
--- a/apps/showcase/components/layout/AppDesigner.vue
+++ b/apps/showcase/components/layout/AppDesigner.vue
@@ -156,6 +156,7 @@
 </template>
 
 <script>
+import EventBus from '@/app/AppEventBus';
 import { NoirPreset } from '@/themes/app-theme.js';
 import { $dt, $t, updatePreset, usePreset } from '@primevue/themes';
 import Aura from '@primevue/themes/aura';
@@ -371,6 +372,7 @@ export default {
         apply() {
             this.saveTheme();
             updatePreset(this.preset);
+            EventBus.emit('theme-palette-change');
         },
         download() {
             const basePreset = this.$appState.preset;