Display an error for bad token values, and update theme afte migration

apps/showcase/components/layout/AppDesigner.vue

@@ -34,7 +34,7 @@
 
 <script>
 import EventBus from '@/app/AppEventBus';
-import { $dt, updatePreset } from '@primevue/themes';
+import { $dt, updatePreset, usePreset } from '@primevue/themes';
 
 export default {
     setup() {
@@ -50,6 +50,7 @@ export default {
                 refreshACTokens: this.refreshACTokens,
                 saveTheme: this.saveTheme,
                 downloadTheme: this.downloadTheme,
+                activateTheme: this.activateTheme,
                 applyTheme: this.applyTheme,
                 applyFont: this.applyFont,
                 replaceColorPalette: this.replaceColorPalette
@@ -194,6 +195,20 @@ export default {
         },
         toggleDarkMode() {
             EventBus.emit('dark-mode-toggle', { dark: !this.$appState.darkTheme });
+        },
+        activateTheme(data) {
+            this.$appState.designer.theme = {
+                key: data.t_key,
+                name: data.t_name,
+                preset: JSON.parse(data.t_preset),
+                config: JSON.parse(data.t_config)
+            };
+
+            usePreset(this.$appState.designer.theme.preset);
+            this.applyFont(this.$appState.designer.theme.config.fontFamily);
+            document.documentElement.style.fontSize = this.$appState.designer.theme.config.fontSize;
+            this.replaceColorPalette();
+            this.refreshACTokens();
         }
     },
     computed: {

apps/showcase/components/layout/designer/dashboard/DesignDashboard.vue

@@ -60,8 +60,6 @@
 </template>
 
 <script>
-import { usePreset } from '@primevue/themes';
-
 export default {
     setup() {
         const runtimeConfig = useRuntimeConfig();
@@ -186,18 +184,7 @@ export default {
             if (error) {
                 this.$toast.add({ severity: 'error', summary: 'An Error Occurred', detail: error.message, life: 3000 });
             } else {
-                this.$appState.designer.theme = {
+                this.designerService.activateTheme(data);
-                    key: data.t_key,
-                    name: data.t_name,
-                    preset: JSON.parse(data.t_preset),
-                    config: JSON.parse(data.t_config)
-                };
-
-                usePreset(this.$appState.designer.theme.preset);
-                this.designerService.applyFont(this.$appState.designer.theme.config.fontFamily);
-                document.documentElement.style.fontSize = this.$appState.designer.theme.config.fontSize;
-                this.designerService.replaceColorPalette();
-                this.designerService.refreshACTokens();
                 this.$appState.designer.activeView = 'editor';
             }
         },

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

@@ -18,7 +18,10 @@
                 :showEmptyMessage="false"
                 :pt="{
                     pcInputText: {
-                        root: ['border border-surface-300 text-zinc-950 dark:text-white dark:border-surface-600 rounded-lg py-2 px-2 w-full text-xs', { 'pr-6': type === 'color' }]
+                        root: [
+                            'border text-zinc-950 dark:text-white rounded-lg py-2 px-2 w-full text-xs',
+                            { 'pr-6': type === 'color', 'border-red-500 dark:border-red-400 bg-red-50 dark:bg-red-500/30': invalid, 'border-surface-300 dark:border-surface-600': !invalid }
+                        ]
                     },
                     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',
@@ -219,6 +222,9 @@ export default {
         },
         inputId() {
             return this.id + '_input';
+        },
+        invalid() {
+            return this.modelValue == null || this.modelValue.trim().length === 0 || this.modelValue.startsWith(this.componentKey);
         }
     }
 };

apps/showcase/components/layout/designer/editor/settings/DesignSettings.vue

@@ -137,7 +137,7 @@ export default {
             });
         },
         async migrate() {
-            const { error } = await $fetch(this.designerApiBase + '/theme/migrate/execute/' + this.$appState.designer.theme.key, {
+            const { data, error } = await $fetch(this.designerApiBase + '/theme/migrate/execute/' + this.$appState.designer.theme.key, {
                 method: 'PATCH',
                 headers: {
                     Authorization: `Bearer ${this.$appState.designer.ticket}`,
@@ -150,6 +150,8 @@ export default {
             } else {
                 this.status = 'updated';
                 this.missingTokens = [];
+
+                this.designerService.activateTheme(data);
             }
         }
     }