Refactor

src/layout/AppConfigurator.vue

@@ -1,10 +1,10 @@
 <script setup>
-import { ref, computed } from 'vue';
-import { $t, updatePreset, updateSurfacePalette } from '@primevue/themes';
 import { useLayout } from '@/layout/composables/layout';
+import { $t, updatePreset, updateSurfacePalette } from '@primevue/themes';
 import Aura from '@primevue/themes/aura';
 import Lara from '@primevue/themes/lara';
 import Nora from '@primevue/themes/nora';
+import { ref } from 'vue';
 
 const { layoutConfig, setPrimary, setSurface, setPreset, isDarkTheme } = useLayout();
 
@@ -123,7 +123,7 @@ function getPresetExt() {
             }
         };
     } else {
-        if (layoutConfig.preset === 'Nora') {
+        if (layoutConfig.preset.value === 'Nora') {
             return {
                 semantic: {
                     primary: color.palette,
@@ -222,22 +222,10 @@ function applyTheme(type, color) {
 function onPresetChange(value) {
     setPreset(value);
     const presetValue = presets[value];
-    const surfacePalette = surfaces.value.find((s) => s.name === selectedSurfaceColor.value)?.palette;
+    const surfacePalette = surfaces.value.find((s) => s.name === layoutConfig.surface.value)?.palette;
 
     $t().preset(presetValue).preset(getPresetExt()).surfacePalette(surfacePalette).use({ useDefaultOptions: true });
 }
-
-const selectedPrimaryColor = computed(() => {
-    return layoutConfig.primary.value;
-});
-
-const selectedSurfaceColor = computed(() => {
-    return layoutConfig.surface.value;
-});
-
-const preset = computed(() => {
-    return layoutConfig.preset.value;
-});
 </script>
 
 <template>
@@ -252,7 +240,7 @@ const preset = computed(() => {
                         type="button"
                         :title="primaryColor.name"
                         @click="updateColors('primary', primaryColor)"
-                        :class="{ 'active-color': selectedPrimaryColor === primaryColor.name }"
+                        :class="{ 'active-color': layoutConfig.primary.value === primaryColor.name }"
                         :style="{ backgroundColor: `${primaryColor.name === 'noir' ? 'var(--text-color)' : primaryColor.palette['500']}` }"
                     ></button>
                 </div>
@@ -266,14 +254,14 @@ const preset = computed(() => {
                         type="button"
                         :title="surface.name"
                         @click="updateColors('surface', surface)"
-                        :class="{ 'active-color': selectedSurfaceColor ? selectedSurfaceColor === surface.name : isDarkTheme ? surface.name === 'zinc' : surface.name === 'slate' }"
+                        :class="{ 'active-color': layoutConfig.surface.value ? layoutConfig.surface.value === surface.name : isDarkTheme ? surface.name === 'zinc' : surface.name === 'slate' }"
                         :style="{ backgroundColor: `${surface.palette['500']}` }"
                     ></button>
                 </div>
             </div>
             <div class="config-panel-settings">
                 <span class="config-panel-label">Presets</span>
-                <SelectButton v-model="preset" @update:modelValue="onPresetChange" :options="presetOptions" :allowEmpty="false" />
+                <SelectButton v-model="layoutConfig.preset.value" @update:modelValue="onPresetChange" :options="presetOptions" :allowEmpty="false" />
             </div>
         </div>
     </div>

src/layout/AppLayout.vue

@@ -1,9 +1,9 @@
 <script setup>
-import { computed, watch, ref } from 'vue';
+import { useLayout } from '@/layout/composables/layout';
-import AppTopbar from './AppTopbar.vue';
+import { computed, ref, watch } from 'vue';
 import AppFooter from './AppFooter.vue';
 import AppSidebar from './AppSidebar.vue';
-import { useLayout } from '@/layout/composables/layout';
+import AppTopbar from './AppTopbar.vue';
 
 const { layoutConfig, layoutState, isSidebarActive } = useLayout();
 
@@ -19,14 +19,13 @@ watch(isSidebarActive, (newVal) => {
 
 const containerClass = computed(() => {
     return {
-        'layout-theme-light': layoutConfig.darkTheme.value === 'light',
+        'layout-theme-light': !layoutConfig.darkTheme.value,
-        'layout-theme-dark': layoutConfig.darkTheme.value === 'dark',
+        'layout-theme-dark': layoutConfig.darkTheme.value,
         'layout-overlay': layoutConfig.menuMode.value === 'overlay',
         'layout-static': layoutConfig.menuMode.value === 'static',
         'layout-static-inactive': layoutState.staticMenuDesktopInactive.value && layoutConfig.menuMode.value === 'static',
         'layout-overlay-active': layoutState.overlayMenuActive.value,
-        'layout-mobile-active': layoutState.staticMenuMobileActive.value,
+        'layout-mobile-active': layoutState.staticMenuMobileActive.value
-        'p-ripple-disabled': layoutConfig.ripple.value === false
     };
 });
 const bindOutsideClickListener = () => {

src/layout/composables/layout.js

@@ -1,15 +1,11 @@
-import { toRefs, reactive, computed } from 'vue';
+import { computed, reactive, toRefs } from 'vue';
 
 const layoutConfig = reactive({
-    ripple: true,
+    preset: 'Aura',
-    darkTheme: false,
-    inputStyle: 'outlined',
-    menuMode: 'static',
-    theme: 'aura-light-green',
-    scale: 14,
     primary: 'emerald',
     surface: null,
-    preset: 'Aura',
+    darkTheme: false,
+    menuMode: 'static',
     activeMenuItem: null
 });
 
@@ -23,14 +19,27 @@ const layoutState = reactive({
 });
 
 export function useLayout() {
-    const setScale = (scale) => {
+    const setPrimary = (value) => {
-        layoutConfig.scale = scale;
+        layoutConfig.primary = value;
+    };
+
+    const setSurface = (value) => {
+        layoutConfig.surface = value;
+    };
+
+    const setPreset = (value) => {
+        layoutConfig.preset = value;
     };
 
     const setActiveMenuItem = (item) => {
         layoutConfig.activeMenuItem = item.value || item;
     };
 
+    const toggleDarkMode = () => {
+        layoutConfig.darkTheme = !layoutConfig.darkTheme;
+        document.documentElement.classList.toggle('app-dark');
+    };
+
     const onMenuToggle = () => {
         if (layoutConfig.menuMode === 'overlay') {
             layoutState.overlayMenuActive = !layoutState.overlayMenuActive;
@@ -47,22 +56,5 @@ export function useLayout() {
 
     const isDarkTheme = computed(() => layoutConfig.darkTheme);
 
-    const toggleDarkMode = () => {
+    return { layoutConfig: toRefs(layoutConfig), layoutState: toRefs(layoutState), onMenuToggle, isSidebarActive, isDarkTheme, setActiveMenuItem, toggleDarkMode, setPrimary, setSurface, setPreset };
-        layoutConfig.darkTheme = !layoutConfig.darkTheme;
-        document.documentElement.classList.toggle('app-dark');
-    };
-
-    const setPrimary = (value) => {
-        layoutConfig.primary = value;
-    };
-
-    const setSurface = (value) => {
-        layoutConfig.surface = value;
-    };
-
-    const setPreset = (value) => {
-        layoutConfig.preset = value;
-    };
-
-    return { layoutConfig: toRefs(layoutConfig), layoutState: toRefs(layoutState), setScale, onMenuToggle, isSidebarActive, isDarkTheme, setActiveMenuItem, toggleDarkMode, setPrimary, setSurface, setPreset };
 }

src/views/uikit/ChartDoc.vue

@@ -1,6 +1,6 @@
 <script setup>
-import { ref, watch } from 'vue';
 import { useLayout } from '@/layout/composables/layout';
+import { ref, watch } from 'vue';
 
 const { layoutConfig } = useLayout();
 let documentStyle = getComputedStyle(document.documentElement);
@@ -223,7 +223,16 @@ const setChart = () => {
 };
 
 watch(
-    layoutConfig.theme,
+    layoutConfig.primary,
+    () => {
+        setColorOptions();
+        setChart();
+    },
+    { immediate: true }
+);
+
+watch(
+    layoutConfig.darkTheme,
     () => {
         setColorOptions();
         setChart();