From ee07d1e70fdbb51fcaabf867b2955cd73e569d12 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sun, 26 May 2024 03:28:48 +0300
Subject: [PATCH] Lift the state up

---
 layouts/AppConfigurator.vue | 15 +++++++++++----
 plugins/app-state.js        |  2 ++
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/layouts/AppConfigurator.vue b/layouts/AppConfigurator.vue
index c24b143c0..c6cd66867 100755
--- a/layouts/AppConfigurator.vue
+++ b/layouts/AppConfigurator.vue
@@ -58,8 +58,6 @@ export default {
     data() {
         return {
             presets: Object.keys(presets),
-            selectedPrimaryColor: 'noir',
-            selectedSurfaceColor: null,
             primaryColors: [
                 { name: 'noir', palette: {} },
                 { name: 'emerald', palette: { 50: '#ecfdf5', 100: '#d1fae5', 200: '#a7f3d0', 300: '#6ee7b7', 400: '#34d399', 500: '#10b981', 600: '#059669', 700: '#047857', 800: '#065f46', 900: '#064e3b', 950: '#022c22' } },
@@ -248,8 +246,11 @@ export default {
             }
         },
         updateColors(type, color) {
-            if (type === 'primary') this.selectedPrimaryColor = color.name;
-            else if (type === 'surface') this.selectedSurfaceColor = color.name;
+            if (type === 'primary') {
+                this.$appState.primary = color.name;
+            } else if (type === 'surface') {
+                this.$appState.surface = color.name;
+            }
 
             this.applyTheme(type, color);
         },
@@ -276,6 +277,12 @@ export default {
     computed: {
         rippleActive() {
             return this.$primevue.config.ripple;
+        },
+        selectedPrimaryColor() {
+            return this.$appState.primary;
+        },
+        selectedSurfaceColor() {
+            return this.$appState.surface;
         }
     }
 };
diff --git a/plugins/app-state.js b/plugins/app-state.js
index 9f59c443c..b30caa721 100644
--- a/plugins/app-state.js
+++ b/plugins/app-state.js
@@ -6,6 +6,8 @@ const $appState = {
     install: (Vue, options) => {
         Vue.config.globalProperties.$appState = reactive({
             preset: 'Aura',
+            primary: 'noir',
+            surface: null,
             darkTheme: false,
             codeSandbox: false,
             sourceType: 'options-api',