srcdev-nuxt-forms 6.1.9 → 6.1.10

package/app/components/utils/colour-scheme-select/ColourSchemeSelect.vue

@@ -7,38 +7,17 @@
       <div class="select-scheme-group-wrapper">
         <div class="select-scheme-group">
           <LazyIcon name="material-symbols:night-sight-auto-sharp" class="scheme-icon" />
-          <input
-            type="radio"
-            id="auto"
-            name="colour-scheme"
-            class="scheme-input"
-            v-model="currentColourScheme"
-            value="auto"
-          />
+          <input type="radio" id="auto" name="colour-scheme" class="scheme-input" v-model="colourMode" value="auto" />
           <label for="auto" class="sr-only">{{ labels.auto }}</label>
         </div>
         <div class="select-scheme-group">
           <LazyIcon name="radix-icons:sun" class="scheme-icon" />
-          <input
-            type="radio"
-            id="light"
-            name="colour-scheme"
-            class="scheme-input"
-            v-model="currentColourScheme"
-            value="light"
-          />
+          <input type="radio" id="light" name="colour-scheme" class="scheme-input" v-model="colourMode" value="light" />
           <label for="light" class="sr-only">{{ labels.light }}</label>
         </div>
         <div class="select-scheme-group">
           <LazyIcon name="radix-icons:moon" class="scheme-icon" />
-          <input
-            type="radio"
-            id="dark"
-            name="colour-scheme"
-            class="scheme-input"
-            v-model="currentColourScheme"
-            value="dark"
-          />
+          <input type="radio" id="dark" name="colour-scheme" class="scheme-input" v-model="colourMode" value="dark" />
           <label for="dark" class="sr-only">{{ labels.dark }}</label>
         </div>
       </div>
@@ -88,7 +67,8 @@ const props = defineProps({
 
 const duration = ref(props.stepAnimationDuration)
 
-const { currentColourScheme } = useColourScheme()
+const colourMode = ref<"light" | "dark" | "auto">("dark")
+const { setColourScheme } = useSettingsStore()
 
 const colourSchemeWrapper = ref<HTMLFormElement | null>(null)
 const colourSchemeGroupElements = ref<HTMLDivElement[]>([])
@@ -96,9 +76,9 @@ const colourSchemeInputElements = ref<HTMLInputElement[]>([])
 const showMarker = ref(false)
 
 const findIndexOfInputValueFromCurrentColourScheme = () => {
-  if (currentColourScheme.value === "auto") return 1
-  if (currentColourScheme.value === "light") return 2
-  if (currentColourScheme.value === "dark") return 3
+  if (colourMode.value === "auto") return 1
+  if (colourMode.value === "light") return 2
+  if (colourMode.value === "dark") return 3
   return undefined
 }
 
@@ -165,8 +145,9 @@ onMounted(() => {
   }
 })
 
-watch(currentColourScheme, () => {
-  setColourSchemeAttr()
+watch(colourMode, (newVal) => {
+  console.log("Colour mode changed:", newVal)
+  setColourScheme(newVal)
 })
 
 watch(currentActiveIndex, () => {

package/app/components/utils/dark-mode-switcher/DarkModeSwitcher.vue

@@ -1,5 +1,14 @@
 <template>
-  <ToggleSwitchWithLabelInline v-model="currentColourScheme" :name :label labelWeight="normal" :size trueValue="dark" falseValue="light" :style-class-passthrough>
+  <ToggleSwitchWithLabelInline
+    v-model="colourMode"
+    :name
+    :label
+    labelWeight="normal"
+    :size
+    trueValue="dark"
+    falseValue="light"
+    :style-class-passthrough
+  >
     <template #iconOn>
       <LazyIcon name="radix-icons:moon" class="icon" />
     </template>
@@ -10,7 +19,7 @@
 </template>
 
 <script setup lang="ts">
-import propValidators from '../../forms/c12/prop-validators';
+import propValidators from "../../forms/c12/prop-validators"
 
 defineProps({
   name: {
@@ -23,25 +32,32 @@ defineProps({
   },
   labelWeight: {
     type: String as PropType<string>,
-    default: 'semi-bold',
+    default: "semi-bold",
     validator(value: string) {
-      return propValidators.labelWeight.includes(value);
+      return propValidators.labelWeight.includes(value)
     },
   },
   size: {
     type: String as PropType<string>,
-    default: 'small',
+    default: "small",
     validator(value: string) {
-      return propValidators.size.includes(value);
+      return propValidators.size.includes(value)
     },
   },
   styleClassPassthrough: {
     type: Array as PropType<string[]>,
     default: () => [],
   },
-});
+})
 
 // const displayMode = ref<'auto' | 'dark' | 'light'>('auto');
 
-const { currentColourScheme } = useColourScheme();
+const colourMode = ref<"light" | "dark" | "auto">("dark")
+
+const { currentColourScheme, setColourScheme } = useSettingsStore()
+
+watch(colourMode, (newVal) => {
+  console.log("Colour mode changed:", newVal)
+  setColourScheme(newVal)
+})
 </script>

package/app/stores/useSettingsStore.ts

@@ -0,0 +1,28 @@
+// const delay = (t: number) => new Promise((r) => setTimeout(r, t))
+
+export const useSettingsStore = defineStore(
+  "settingsStore",
+  () => {
+    // State
+    const colourScheme = ref<"auto" | "dark" | "light" | null>(null)
+
+    // Getters
+    const currentColourScheme = computed(() => colourScheme.value)
+
+    // Actions
+    const setColourScheme = (state: "auto" | "dark" | "light" | null) => {
+      console.log("Setting colour scheme:", state)
+      colourScheme.value = state
+    }
+
+    return {
+      currentColourScheme,
+      setColourScheme,
+    }
+  },
+  {
+    persist: {
+      storage: piniaPluginPersistedstate.cookies(),
+    },
+  }
+)

package/nuxt.config.ts

@@ -3,6 +3,9 @@
 export default defineNuxtConfig({
   devtools: { enabled: true },
   modules: ["@nuxt/eslint", "@nuxt/icon", "@pinia/nuxt", "pinia-plugin-persistedstate/nuxt", "@nuxt/test-utils/module"],
+  imports: {
+    dirs: ["./stores"],
+  },
   alias: {
     "#shared": "./shared",
   },

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-forms",
   "type": "module",
-  "version": "6.1.9",
+  "version": "6.1.10",
   "main": "nuxt.config.ts",
   "scripts": {
     "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",