Support for directives

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

@@ -82,6 +82,15 @@ export default {
         }
     },
     inject: ['designerService'],
+    watch: {
+        $route: {
+            handler() {
+                if (!this.isComponentRoute && this.$appState.designer.activeTab === '2') {
+                    this.$appState.designer.activeTab = '0';
+                }
+            }
+        }
+    },
     methods: {
         onKeyDown(event) {
             if (event.code === 'Enter' || event.code === 'NumpadEnter') {
@@ -92,9 +101,10 @@ export default {
     },
     computed: {
         isComponentRoute() {
-            const components = this.$appState.designer.theme?.preset?.components;
+            const components = this.$appState.designer.theme.preset.components;
+            const directives = this.$appState.designer.theme.preset.directives;
 
-            return components ? components[this.$route.name] != null : false;
+            return components[this.$route.name] != null || directives[this.$route.name];
         }
     }
 };

apps/showcase/components/layout/designer/editor/component/DesignComponent.vue

@@ -32,18 +32,19 @@ export default {
             return this.$route.name;
         },
         isComponentRoute() {
-            const components = this.$appState.designer.theme?.preset?.components;
+            const components = this.$appState.designer.theme.preset.components;
+            const directives = this.$appState.designer.theme.preset.directives;
 
-            return components ? components[this.componentKey] != null : false;
+            return components[this.componentKey] != null || directives[this.componentKey] != null;
         },
         tokens() {
-            return this.$appState.designer.theme?.preset?.components[this.componentKey];
+            return this.$appState.designer.theme.preset.components[this.componentKey] || this.$appState.designer.theme.preset.directives[this.componentKey];
         },
         lightTokens() {
-            return this.$appState.designer.theme?.preset?.components[this.componentKey].colorScheme.light;
+            return this.tokens.colorScheme?.light;
         },
         darkTokens() {
-            return this.$appState.designer.theme?.preset?.components[this.componentKey].colorScheme.dark;
+            return this.tokens.colorScheme?.dark;
         },
         hasColorScheme() {
             return this.tokens.colorScheme != undefined;

apps/showcase/components/layout/designer/editor/component/DesignComponentSection.vue

@@ -66,7 +66,9 @@ export default {
                 .join(' ');
         },
         tokens() {
-            return this.getObjectProperty(this.$appState.designer.theme.preset.components[this.componentKey], this.path);
+            const source = this.$appState.designer.theme.preset.components[this.componentKey] || this.$appState.designer.theme.preset.directives[this.componentKey];
+
+            return this.getObjectProperty(source, this.path);
         },
         nestedTokens() {
             const groups = {};

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

@@ -38,7 +38,7 @@ export default {
     inject: ['designerService'],
     data() {
         return {
-            fontSizes: ['12px', '13px', '14px', '15px', '16px', '17px', '18px'],
+            fontSizes: ['12px', '13px', '14px', '15px', '16px'],
             fonts: ['DM Sans', 'Inter var', 'Figtree', 'Lato', 'Lexend', 'Poppins', 'Public Sans', 'Raleway', 'Roboto', 'Open Sans', 'Quicksand']
         };
     },