srcdev-nuxt-forms 6.1.9 → 6.1.11

package/app/components/forms/triple-toggle-switch/TripleToggleSwitchCore.vue

@@ -0,0 +1,252 @@
+<template>
+  <div class="triple-toggle-switch" :data-size="size" :data-theme="theme">
+    <div class="triple-toggle-switch-wrapper">
+      <div class="selected-option-marker-wrapper">
+        <div class="selected-option-marker" :class="[{ show: showMarker }]"></div>
+      </div>
+      <div class="option-group-wrapper">
+        <div v-for="(option, index) in fieldData.data" :key="option.id" class="option-group" ref="optionGroup">
+          <Icon v-if="option.icon" :name="option.icon" class="option-icon" ref="optionIcons" />
+          <input
+            type="radio"
+            :id="option.id"
+            name="colour-scheme"
+            class="option-input"
+            v-model="modelValue"
+            :value="option.value"
+          />
+          <label :for="option.id" class="sr-only">{{ option.label }}</label>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import propValidators from "../../forms/c12/prop-validators"
+
+const props = defineProps({
+  name: {
+    type: String,
+    defaul: "triple-toggle-switch",
+  },
+  size: {
+    type: String as PropType<string>,
+    default: "medium",
+    validator(value: string) {
+      return propValidators.size.includes(value)
+    },
+  },
+  theme: {
+    type: String as PropType<string>,
+    default: "primary",
+    validator(value: string) {
+      return propValidators.theme.includes(value)
+    },
+  },
+  stepAnimationDuration: {
+    type: Number as PropType<number>,
+    default: 100,
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+})
+
+const modelValue = defineModel()
+
+const fieldData = defineModel("fieldData") as Ref<IFormMultipleOptions>
+
+const optionGroupRefs = useTemplateRef<HTMLDivElement>("optionGroup")
+
+const iconWidth = ref("0px")
+const showMarker = ref(false)
+
+const selectedOptionIndex = computed(() => {
+  return fieldData.value.data.findIndex((option) => option.value === modelValue.value)
+})
+
+const setupDefaults = () => {
+  if (Array.isArray(optionGroupRefs.value) && optionGroupRefs.value[0]) {
+    iconWidth.value = optionGroupRefs.value[0].getBoundingClientRect().width + "px"
+  }
+}
+
+onMounted(() => {
+  setupDefaults()
+})
+</script>
+
+<style lang="css">
+.triple-toggle-switch {
+  --_form-border-colour: var(--theme-form-radio-border);
+
+  --_form-outline-colour: var(--theme-form-radio-outline);
+
+  --_form-border-radius: calc(
+    (var(--_scheme-icon-font-size) / 2) + var(--form-element-border-width) + var(--form-element-outline-width) +
+      var(--_form-padding) + var(--_select-scheme-group-padding) + var(--form-element-border-width) +
+      var(--form-element-outline-width)
+  );
+
+  --_form-items-gap: 1rem;
+  --_form-padding: 0.6rem;
+
+  --_select-scheme-group-background-color: var(--theme-form-checkbox-bg);
+  --_select-scheme-group-background-image: none;
+  --_select-scheme-group-padding: 0.5rem;
+  --_scheme-icon-font-size: 2rem;
+  --_scheme-icon-colour: black;
+
+  &:has(input[value="auto"]:checked) {
+    --_select-scheme-group-background-color: transparent;
+    --_select-scheme-group-background-image: radial-gradient(
+      circle,
+      rgb(66, 180, 58) 0%,
+      rgb(17, 199, 0) 27%,
+      rgb(8, 117, 3) 100%
+    );
+  }
+
+  &:has(input[value="light"]:checked) {
+    --_select-scheme-group-background-color: transparent;
+    --_select-scheme-group-background-image: radial-gradient(
+      circle,
+      rgba(180, 58, 91, 1) 0%,
+      rgba(253, 29, 29, 1) 27%,
+      rgba(252, 176, 69, 1) 100%
+    );
+  }
+
+  &:has(input[value="dark"]:checked) {
+    --_select-scheme-group-background-color: transparent;
+    --_select-scheme-group-background-image: radial-gradient(
+      circle,
+      rgb(50, 20, 25) 0%,
+      rgb(0, 0, 0) 27%,
+      rgb(100, 100, 100) 100%
+    );
+  }
+
+  .triple-toggle-switch-wrapper {
+    display: inline-grid;
+    grid-template-areas: "select-stack";
+    width: fit-content;
+
+    background-color: var(--theme-input-surface);
+    border: var(--form-element-border-width) solid var(--theme-input-border);
+    outline: var(--form-element-outline-width) solid var(--theme-input-outline);
+    border-radius: var(--_form-border-radius);
+    padding: var(--_form-padding);
+
+    transition: all var(--theme-form-transition-duration) ease-in-out;
+
+    &:has(input:focus-visible) {
+      outline: var(--form-element-outline-width) solid var(--theme-input-outline-hover);
+      outline-offset: 0.2rem;
+    }
+
+    .selected-option-marker-wrapper {
+      grid-area: select-stack;
+      z-index: 1;
+      display: flex;
+      align-items: center;
+      position: relative;
+
+      .selected-option-marker {
+        aspect-ratio: 1;
+        width: v-bind(iconWidth);
+        transition: all 400ms ease-in-out;
+        background-color: var(--_select-scheme-group-background-color);
+        background-image: var(--_select-scheme-group-background-image);
+        border: var(--form-element-border-width) solid light-dark(var(--gray-12), var(--gray-0));
+
+        border-radius: 50%;
+
+        position: absolute;
+        left: calc(
+          v-bind(selectedOptionIndex) * v-bind(iconWidth) + (var(--_form-items-gap) * v-bind(selectedOptionIndex))
+        );
+
+        opacity: 1;
+
+        &.show {
+          opacity: 1;
+        }
+      }
+    }
+
+    .option-group-wrapper {
+      display: grid;
+      grid-area: select-stack;
+      grid-template-columns: repeat(3, 1fr);
+      align-items: center;
+      width: fit-content;
+      z-index: 2;
+      gap: var(--_form-items-gap);
+      position: relative;
+
+      .option-group {
+        aspect-ratio: 1;
+        display: grid;
+        grid-template-areas: "icon-stack";
+        place-content: center;
+        background: transparent;
+        border: var(--form-element-border-width) solid #ffffff50;
+        outline: var(--form-element-outline-width) solid transparent;
+        border-radius: 50%;
+        padding: var(--_select-scheme-group-padding);
+        overflow: hidden;
+
+        transition: all calc(var(--theme-form-transition-duration) / 3);
+
+        &:has(.option-icon:hover) {
+          outline: var(--form-element-outline-width) solid light-dark(var(--gray-12), var(--gray-0));
+        }
+        &:has(input:focus-visible) {
+          outline: var(--form-element-outline-width) solid var(--theme-input-outline-hover);
+          outline-offset: 0.2rem;
+        }
+
+        .option-icon {
+          grid-area: icon-stack;
+          display: block;
+          color: light-dark(var(--gray-12), var(--gray-0));
+          font-size: var(--_scheme-icon-font-size);
+
+          .icon {
+            background-color: transparent;
+          }
+
+          &:hover {
+            cursor: pointer;
+          }
+        }
+
+        .option-input {
+          grid-area: icon-stack;
+          opacity: 0;
+          aspect-ratio: 1;
+          width: var(--_scheme-icon-font-size);
+          &:hover {
+            cursor: pointer;
+          }
+        }
+
+        &:has(input[value="auto"]:checked) {
+          --_scheme-icon-colour: white;
+        }
+
+        &:has(input[value="light"]:checked) {
+          --_scheme-icon-colour: white;
+        }
+
+        &:has(input[value="dark"]:checked) {
+          --_scheme-icon-colour: white;
+        }
+      }
+    }
+  }
+}
+</style>

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/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.11",
   "main": "nuxt.config.ts",
   "scripts": {
     "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",