srcdev-nuxt-forms 6.1.13 → 6.1.15

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

@@ -13,7 +13,13 @@
           ref="optionGroup"
         >
           <span class="sr-only">{{ option.label }}</span>
-          <Icon v-if="option.icon" :name="option.icon" class="option-icon" ref="optionIcons" />
+          <Icon
+            v-if="option.icon"
+            :name="option.icon"
+            class="option-icon"
+            :class="[option.id, { active: modelValue === option.value }]"
+            ref="optionIcons"
+          />
           <input
             type="radio"
             :id="option.id"
@@ -52,8 +58,8 @@ const props = defineProps({
     },
   },
   stepAnimationDuration: {
-    type: Number as PropType<number>,
-    default: 100,
+    type: String as PropType<string>,
+    default: "250ms",
   },
   styleClassPassthrough: {
     type: Array as PropType<string[]>,
@@ -75,10 +81,13 @@ const selectedOptionIndex = computed(() => {
   return fieldData.value.data.findIndex((option) => option.value === modelValue.value)
 })
 
-const setupDefaults = () => {
+const setupDefaults = async () => {
   if (Array.isArray(optionGroupRefs.value) && optionGroupRefs.value[0]) {
     iconWidth.value = optionGroupRefs.value[0].getBoundingClientRect().width + "px"
   }
+
+  await useSleep(250)
+  showMarker.value = true
 }
 
 onMounted(() => {
@@ -105,7 +114,7 @@ onMounted(() => {
   --_select-scheme-group-background-image: none;
   --_select-scheme-group-padding: 0.5rem;
   --_scheme-icon-font-size: 2rem;
-  --_scheme-icon-colour: black;
+  /* --_scheme-icon-colour: black; */
 
   &:has(input[value="auto"]:checked) {
     --_select-scheme-group-background-color: transparent;
@@ -165,7 +174,7 @@ onMounted(() => {
       .selected-option-marker {
         aspect-ratio: 1;
         width: v-bind(iconWidth);
-        transition: all 400ms ease-in-out;
+        transition: all v-bind(stepAnimationDuration) 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));
@@ -177,7 +186,7 @@ onMounted(() => {
           v-bind(selectedOptionIndex) * v-bind(iconWidth) + (var(--_form-items-gap) * v-bind(selectedOptionIndex))
         );
 
-        opacity: 1;
+        opacity: 0;
 
         &.show {
           opacity: 1;
@@ -220,11 +229,30 @@ onMounted(() => {
         .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;
+          &.auto {
+            color: light-dark(var(--gray-12), var(--gray-3));
+
+            &.active {
+              color: var(--gray-0);
+            }
+          }
+
+          &.light {
+            color: light-dark(var(--gray-12), var(--gray-3));
+
+            &.active {
+              color: var(--gray-0);
+            }
+          }
+
+          &.dark {
+            color: light-dark(var(--gray-12), var(--gray-3));
+
+            &.active {
+              color: var(--gray-0);
+            }
           }
 
           &:hover {
@@ -242,7 +270,7 @@ onMounted(() => {
           }
         }
 
-        &:has(input[value="auto"]:checked) {
+        /* &:has(input[value="auto"]:checked) {
           --_scheme-icon-colour: white;
         }
 
@@ -252,7 +280,7 @@ onMounted(() => {
 
         &:has(input[value="dark"]:checked) {
           --_scheme-icon-colour: white;
-        }
+        } */
       }
     }
   }

package/package.json

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