srcdev-nuxt-forms 2.1.30 → 2.1.32

package/assets/styles/forms/themes/_error.css

@@ -27,6 +27,18 @@
 
     --theme-form-range-accent-color: light-dark(var(--red-12), var(--red-3));
 
+    /*
+    * ToggleSwitch
+    **/
+    --theme-form-toggle-bg-off: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-toggle-bg-on: light-dark(var(--gray-1), var(--gray-6));
+    --theme-form-toggle-border: 1px solid light-dark(var(--red-12), var(--red-1));
+    --theme-form-toggle-outline: 1px solid light-dark(var(--red-12), var(--red-12));
+    --theme-form-toggle-symbol-off: var(--orange-12);
+    --theme-form-toggle-symbol-on: var(--gray-12);
+    --theme-form-toggle-icon-stroke-colour-off: var(--gray-1);
+    --theme-form-toggle-icon-stroke-colour-on: var(--gray-1);
+
     /*
     * Checkbox as button
     **/

package/assets/styles/forms/themes/_ghost.css

@@ -27,6 +27,18 @@
 
     --theme-form-range-accent-color: light-dark(var(--gray-12), var(--gray-3));
 
+    /*
+    * ToggleSwitch
+    **/
+    --theme-form-toggle-bg-off: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-toggle-bg-on: light-dark(var(--gray-1), var(--gray-6));
+    --theme-form-toggle-border: 1px solid light-dark(var(--gray-12), var(--gray-1));
+    --theme-form-toggle-outline: 1px solid light-dark(var(--gray-12), var(--gray-12));
+    --theme-form-toggle-symbol-off: var(--gray-4);
+    --theme-form-toggle-symbol-on: var(--gray-12);
+    --theme-form-toggle-icon-stroke-colour-off: var(--gray-1);
+    --theme-form-toggle-icon-stroke-colour-on: var(--gray-1);
+
     /*
     * Checkbox as button
     **/

package/assets/styles/forms/themes/_primary.css

@@ -34,8 +34,10 @@
     --theme-form-toggle-bg-on: light-dark(var(--gray-1), var(--gray-6));
     --theme-form-toggle-border: 1px solid light-dark(var(--blue-12), var(--blue-1));
     --theme-form-toggle-outline: 1px solid light-dark(var(--blue-12), var(--blue-12));
-    --theme-form-toggle-symbol-off: var(--orange-12);
+    --theme-form-toggle-symbol-off: var(--blue-7);
     --theme-form-toggle-symbol-on: var(--gray-12);
+    --theme-form-toggle-icon-stroke-colour-off: var(--gray-1);
+    --theme-form-toggle-icon-stroke-colour-on: var(--gray-1);
 
     /*
     * Checkbox as button

package/assets/styles/forms/themes/_secondary.css

@@ -27,6 +27,18 @@
 
     --theme-form-range-accent-color: light-dark(var(--gray-12), var(--gray-3));
 
+    /*
+    * ToggleSwitch
+    **/
+    --theme-form-toggle-bg-off: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-toggle-bg-on: light-dark(var(--gray-1), var(--gray-6));
+    --theme-form-toggle-border: 1px solid light-dark(var(--gray-12), var(--gray-1));
+    --theme-form-toggle-outline: 1px solid light-dark(var(--gray-12), var(--gray-12));
+    --theme-form-toggle-symbol-off: var(--gray-4);
+    --theme-form-toggle-symbol-on: var(--gray-12);
+    --theme-form-toggle-icon-stroke-colour-off: var(--gray-1);
+    --theme-form-toggle-icon-stroke-colour-on: var(--gray-1);
+
     /*
     * Checkbox as button
     **/

package/assets/styles/forms/themes/_success.css

@@ -27,6 +27,18 @@
 
     --theme-form-range-accent-color: light-dark(var(--green-12), var(--green-3));
 
+    /*
+    * ToggleSwitch
+    **/
+    --theme-form-toggle-bg-off: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-toggle-bg-on: light-dark(var(--gray-1), var(--gray-6));
+    --theme-form-toggle-border: 1px solid light-dark(var(--green-12), var(--green-1));
+    --theme-form-toggle-outline: 1px solid light-dark(var(--green-12), var(--green-12));
+    --theme-form-toggle-symbol-off: var(--green-4);
+    --theme-form-toggle-symbol-on: var(--green-12);
+    --theme-form-toggle-icon-stroke-colour-off: var(--gray-1);
+    --theme-form-toggle-icon-stroke-colour-on: var(--gray-1);
+
     /*
     * Checkbox as button
     **/

package/assets/styles/forms/themes/_tertiary.css

@@ -27,6 +27,18 @@
 
     --theme-form-range-accent-color: light-dark(var(--gray-12), var(--gray-3));
 
+    /*
+    * ToggleSwitch
+    **/
+    --theme-form-toggle-bg-off: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-toggle-bg-on: light-dark(var(--gray-1), var(--gray-6));
+    --theme-form-toggle-border: 1px solid light-dark(var(--gray-12), var(--gray-1));
+    --theme-form-toggle-outline: 1px solid light-dark(var(--gray-12), var(--gray-12));
+    --theme-form-toggle-symbol-off: var(--gray-4);
+    --theme-form-toggle-symbol-on: var(--gray-12);
+    --theme-form-toggle-icon-stroke-colour-off: var(--gray-1);
+    --theme-form-toggle-icon-stroke-colour-on: var(--gray-1);
+
     /*
     * Checkbox as button
     **/

package/assets/styles/forms/themes/_warning.css

@@ -27,6 +27,18 @@
 
     --theme-form-range-accent-color: light-dark(var(--orange-12), var(--orange-3));
 
+    /*
+    * ToggleSwitch
+    **/
+    --theme-form-toggle-bg-off: light-dark(var(--gray-1), var(--gray-4));
+    --theme-form-toggle-bg-on: light-dark(var(--gray-1), var(--gray-6));
+    --theme-form-toggle-border: 1px solid light-dark(var(--orange-12), var(--orange-1));
+    --theme-form-toggle-outline: 1px solid light-dark(var(--orange-12), var(--orange-12));
+    --theme-form-toggle-symbol-off: var(--orange-12);
+    --theme-form-toggle-symbol-on: var(--gray-12);
+    --theme-form-toggle-icon-stroke-colour-off: var(--gray-1);
+    --theme-form-toggle-icon-stroke-colour-on: var(--gray-1);
+
     /*
     * Checkbox as button
     **/

package/components/forms/toggle-switch/ToggleSwitchCore.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="toggle-switch-core" :class="(elementClasses, size)" :data-form-theme="formTheme">
     <label class="toggle-switch-input" :class="[{ round }]" :for="inputId">
-      <input type="checkbox" v-model="modelValue" :id="inputId" :aria-describedby="`${id}-description`" :name :required />
+      <input type="checkbox" v-model="modelValue" :true-value :false-value :id="inputId" :aria-describedby="`${id}-description`" :name :required />
       <div class="symbol-wrapper" :class="[{ round }]">
         <div class="symbol" :class="[{ round }]">
           <div v-if="hasIconOnSlot" class="symbol-icon icon-on">
@@ -20,7 +20,7 @@
 <script setup lang="ts">
 import propValidators from '../c12/prop-validators';
 
-const { id, name, required, fieldHasError, styleClassPassthrough, theme, round, size } = defineProps({
+const { id, name, required, fieldHasError, trueValue, falseValue, styleClassPassthrough, theme, round, size, ariaDescribedby } = defineProps({
   id: {
     type: String,
     required: true,
@@ -37,6 +37,14 @@ const { id, name, required, fieldHasError, styleClassPassthrough, theme, round,
     type: Boolean,
     default: false,
   },
+  trueValue: {
+    type: [String, Number, Boolean],
+    default: true,
+  },
+  falseValue: {
+    type: [String, Number, Boolean],
+    default: false,
+  },
   styleClassPassthrough: {
     type: Array as PropType<string[]>,
     default: () => [],
@@ -59,10 +67,13 @@ const { id, name, required, fieldHasError, styleClassPassthrough, theme, round,
       return propValidators.size.includes(value);
     },
   },
+  ariaDescribedby: {
+    type: String,
+    default: null,
+  },
 });
 
 const slots = useSlots();
-const hasDescriptionSlot = computed(() => slots.description !== undefined);
 const hasIconOnSlot = computed(() => slots.iconOn !== undefined);
 const hasIconOffSlot = computed(() => slots.iconOff !== undefined);
 
@@ -179,22 +190,20 @@ const inputId = computed(() => `toggle-sitch-${id}`);
         }
 
         .symbol-icon {
-          transition: opacity var(--_transition-duration);
+          transition: var(--_transition-duration);
 
           &.icon-on {
+            color: var(--theme-form-toggle-icon-stroke-colour-on);
             opacity: 0;
           }
           &.icon-off {
+            color: var(--theme-form-toggle-icon-stroke-colour-off);
             opacity: 1;
           }
         }
       }
     }
 
-    /* input:checked + .symbol-wrapper .symbol {
-      background-color: var(--theme-form-toggle-bg-on);
-    } */
-
     input:focus-visible + .symbol-wrapper {
       box-shadow: var(--theme-form-focus-box-shadow);
     }

package/components/forms/toggle-switch/variants/ToggleSwitchWithLabel.vue

@@ -4,7 +4,7 @@
     <div v-if="hasDescriptionSlot" :id="`${id}-description`">
       <slot name="description"></slot>
     </div>
-    <ToggleSwitchCore v-model="modelValue" :id :name :required :field-has-error :theme :round :size>
+    <ToggleSwitchCore v-model="modelValue" :id :name :required :field-has-error :true-value :false-value :theme :round :size :ariaDescribedby>
       <template v-if="hasIconOnSlot" #iconOn>
         <slot name="iconOn"></slot>
       </template>
@@ -13,13 +13,14 @@
         <slot name="iconOff"></slot>
       </template>
     </ToggleSwitchCore>
+    <InputError :errorMessage="errorMessage" :showError="fieldHasError" :id="errorId" :isDetached="true" />
   </div>
 </template>
 
 <script setup lang="ts">
 import propValidators from '../../c12/prop-validators';
 
-const { id, name, label, required, fieldHasError, styleClassPassthrough, theme, round, size } = defineProps({
+const { id, name, label, required, errorMessage, fieldHasError, trueValue, falseValue, styleClassPassthrough, theme, round, size } = defineProps({
   id: {
     type: String,
     required: true,
@@ -36,10 +37,22 @@ const { id, name, label, required, fieldHasError, styleClassPassthrough, theme,
     type: Boolean,
     default: false,
   },
+  errorMessage: {
+    type: [Object, String],
+    required: true,
+  },
   fieldHasError: {
     type: Boolean,
     default: false,
   },
+  trueValue: {
+    type: [String, Number, Boolean],
+    default: true,
+  },
+  falseValue: {
+    type: [String, Number, Boolean],
+    default: false,
+  },
   styleClassPassthrough: {
     type: Array as PropType<string[]>,
     default: () => [],
@@ -73,6 +86,12 @@ const formTheme = computed(() => {
   return fieldHasError ? 'error' : theme;
 });
 
+const errorId = `${id}-error-message`;
+const ariaDescribedby = computed(() => {
+  const ariaDescribedbyId = hasDescriptionSlot.value ? `${id}-description` : null;
+  return fieldHasError ? errorId : ariaDescribedbyId;
+});
+
 const modelValue = defineModel();
 const { elementClasses, updateElementClasses } = useStyleClassPassthrough(styleClassPassthrough);
 </script>

package/package.json

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