Custom buttons for designer, add more suggestions

apps/showcase/components/layout/AppDesigner.vue

@@ -1,5 +1,5 @@
 <template>
-    <Drawer v-model:visible="$appState.designerActive" header="Theme Designer" position="right" class="designer !w-screen md:!w-[48rem]" :modal="false">
+    <Drawer v-model:visible="$appState.designerActive" header="Theme Designer" position="right" class="designer !w-screen md:!w-[48rem]" :modal="false" :dismissable="false">
         <Tabs value="0">
             <TabList>
                 <Tab value="0">Base</Tab>
@@ -81,8 +81,21 @@
 
         <template #footer>
             <div class="flex justify-between gap-2">
-                <Button type="button" @click="download" label="Download" variant="outlined" icon="pi pi-download" class="!px-3 !py-2" />
+                <button
-                <Button type="button" @click="apply" label="Apply" class="!px-3 !py-2" />
+                    type="button"
+                    @click="download"
+                    icon="pi pi-download"
+                    class="px-3 py-2 bg-transparent border border-gray-200 dark:border-gray-700 hover:border-gray-800 dark:hover:border-gray-500 text-black dark:text-white rounded-md font-medium cursor-pointer transition-colors duration-200 focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-zinc-950 focus-visible:dark:outline-white"
+                >
+                    Download
+                </button>
+                <button
+                    type="button"
+                    @click="apply"
+                    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-visible:outline focus-visible:outline-offset-2 focus-visible:outline-zinc-950 focus-visible:dark:outline-white"
+                >
+                    Apply
+                </button>
             </div>
         </template>
     </Drawer>
@@ -133,6 +146,7 @@ export default {
     methods: {
         apply() {
             this.saveTheme();
+            console.log(this.preset);
             updatePreset(this.preset);
         },
         download() {

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

@@ -1,6 +1,7 @@
 <template>
     <span class="text-sm">{{ label }}</span>
     <div class="relative">
+        <input v-if="false" type="text" :value="modelValue" @input="onInput" :class="['border border-surface-300 dark:border-surface-600 rounded-lg py-2 px-2 w-full', { 'pr-8': type === 'color' }]" />
         <AutoComplete
             :modelValue="modelValue"
             @input="onInput"
@@ -11,11 +12,12 @@
                 pcInputText: {
                     root: ['border border-surface-300 dark:border-surface-600 rounded-lg py-2 px-2 w-full', { 'pr-8': type === 'color' }]
                 },
-                overlay: 'bg-surface-0 dark:bg-surface-950 shadow-2 rounded-md',
+                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: 'p-2'
+                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"
         />
         <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>
@@ -25,6 +27,14 @@
 import { $dt } from '@primevue/themes';
 
 const tokens = [
+    '{primary.color}',
+    '{primary.contrast.color}',
+    '{primary.hover.color}',
+    '{primary.active.color}',
+    '{highlight.background}',
+    '{highlight.focus.background}',
+    '{highlight.color}',
+    '{highlight.focus.color}',
     '{primary.50}',
     '{primary.100}',
     '{primary.200}',
@@ -47,7 +57,13 @@ const tokens = [
     '{surface.700}',
     '{surface.800}',
     '{surface.900}',
-    '{surface.950}'
+    '{surface.950}',
+    '{border.radius.none}',
+    '{border.radius.xs}',
+    '{border.radius.sm}',
+    '{border.radius.md}',
+    '{border.radius.lg}',
+    '{border.radius.xl}'
 ];
 
 export default {
@@ -72,17 +88,17 @@ export default {
         };
     },
     methods: {
+        onOptionSelect(event) {
+            this.$emit('update:modelValue', event.value);
+        },
         onInput(event) {
-            console.log(event.target.value);
             this.$emit('update:modelValue', event.target.value);
         },
         search(event) {
             const query = event.query;
 
             if (query.startsWith('{')) {
-                const tokenQuery = query.substring(1);
+                this.items = tokens.filter((t) => t.startsWith(query));
-
-                this.items = tokens.filter((t) => t.startsWith(tokenQuery));
             } else {
                 this.items = [];
             }
@@ -90,7 +106,7 @@ export default {
     },
     computed: {
         previewColor() {
-            return this.modelValue && this.modelValue.startsWith('{') && this.modelValue.endsWith('}') ? $dt(this.modelValue).variable : 'transparent';
+            return this.modelValue && this.modelValue.startsWith('{') && this.modelValue.endsWith('}') ? $dt(this.modelValue).variable : this.modelValue;
         }
     }
 };