srcdev-nuxt-forms 6.1.10 → 6.1.12

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

@@ -0,0 +1,259 @@
+<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">
+        <label
+          v-for="(option, index) in fieldData.data"
+          :key="option.id"
+          :for="option.id"
+          class="option-group"
+          ref="optionGroup"
+        >
+          <span class="sr-only">{{ option.label }}</span>
+          <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"
+            :aria-selected="modelValue === option.value"
+          />
+        </label>
+      </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/dark-mode-switcher/DarkModeSwitcher.vue

@@ -54,10 +54,10 @@ defineProps({
 
 const colourMode = ref<"light" | "dark" | "auto">("dark")
 
-const { currentColourScheme, setColourScheme } = useSettingsStore()
+// const { currentColourScheme, setColourScheme } = useSettingsStore()
 
 watch(colourMode, (newVal) => {
-  console.log("Colour mode changed:", newVal)
-  setColourScheme(newVal)
+  // console.log("Colour mode changed:", newVal)
+  // setColourScheme(newVal)
 })
 </script>

package/package.json

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

package/app/stores/useSettingsStore.ts

@@ -1,28 +0,0 @@
-// 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(),
-    },
-  }
-)