srcdev-nuxt-forms 6.1.16 → 6.1.18

package/app/components/forms/form-errors/InputError.vue

@@ -1,5 +1,12 @@
 <template>
-  <div class="input-error-message" data-theme="error" :id :class="[inputVariant, elementClasses, { show: showError }, { detached: isDetached }]" :data-testid :aria-hidden="!showError">
+  <div
+    class="input-error-message"
+    data-theme="error"
+    :id
+    :class="[inputVariant, elementClasses, { show: showError }, { detached: isDetached }]"
+    :data-testid
+    :aria-hidden="!showError"
+  >
     <div class="inner" :class="[{ show: showError }]">
       <div class="inner-content">
         <div class="inner-icon">
@@ -19,12 +26,12 @@
 </template>
 
 <script setup lang="ts">
-import propValidators from '../c12/prop-validators';
+import propValidators from "../c12/prop-validators"
 
 const props = defineProps({
   dataTestid: {
     type: String,
-    default: 'inputError',
+    default: "inputError",
   },
   errorMessage: {
     type: [Array, Object, String],
@@ -39,7 +46,7 @@ const props = defineProps({
     required: true,
   },
   styleClassPassthrough: {
-    type: Array as PropType<string[]>,
+    type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
   compact: {
@@ -52,18 +59,18 @@ const props = defineProps({
   },
   inputVariant: {
     type: String as PropType<string>,
-    default: 'normal',
+    default: "normal",
     validator(value: string) {
-      return propValidators.inputVariant.includes(value);
+      return propValidators.inputVariant.includes(value)
     },
   },
-});
+})
 
 const isArray = computed(() => {
-  return Array.isArray(props.errorMessage);
-});
+  return Array.isArray(props.errorMessage)
+})
 
-const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 </script>
 
 <style lang="css">
@@ -121,7 +128,8 @@ const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.
     align-items: center;
 
     overflow: hidden;
-    transition: opacity var(--theme-form-transition-duration) linear, display var(--theme-form-transition-duration) linear allow-discrete;
+    transition: opacity var(--theme-form-transition-duration) linear,
+      display var(--theme-form-transition-duration) linear allow-discrete;
 
     .inner-content {
       display: flex;

package/app/components/forms/form-fieldset/FormFieldset.vue

@@ -52,7 +52,7 @@ const props = defineProps({
     default: "",
   },
   styleClassPassthrough: {
-    type: Array as PropType<string[]>,
+    type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
 })

package/app/components/forms/input-button/InputButtonCore.vue

@@ -70,7 +70,7 @@ const props = defineProps({
     default: "",
   },
   styleClassPassthrough: {
-    type: Array as PropType<string[]>,
+    type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
   useEffect: {

package/app/components/forms/input-button/variants/InputButtonConfirm.vue

@@ -1,5 +1,17 @@
 <template>
-  <InputButtonCore type="button" :use-effect :isPending :readonly :effect :data-testid :size :weight :button-text :style-class-passthrough :theme>
+  <InputButtonCore
+    type="button"
+    :use-effect
+    :isPending
+    :readonly
+    :effect
+    :data-testid
+    :size
+    :weight
+    :button-text
+    :style-class-passthrough
+    :theme
+  >
     <template #left>
       <Icon name="material-symbols:check-circle-outline" class="icon" aria-hidden="true" focusable="false" />
     </template>
@@ -7,28 +19,28 @@
 </template>
 
 <script setup lang="ts">
-import propValidators from '../../c12/prop-validators';
+import propValidators from "../../c12/prop-validators"
 
 defineProps({
   size: {
     type: String as PropType<string>,
-    default: 'default',
+    default: "default",
     validator(value: string) {
-      return propValidators.size.includes(value);
+      return propValidators.size.includes(value)
     },
   },
   weight: {
     type: String as PropType<string>,
-    default: 'wght-400',
+    default: "wght-400",
     validator(value: string) {
-      return propValidators.weight.includes(value);
+      return propValidators.weight.includes(value)
     },
   },
   theme: {
     type: String as PropType<string>,
-    default: 'primary',
+    default: "primary",
     validator(value: string) {
-      return propValidators.theme.includes(value);
+      return propValidators.theme.includes(value)
     },
   },
   useEffect: {
@@ -37,9 +49,9 @@ defineProps({
   },
   effect: {
     type: String as PropType<string>,
-    default: 'fancy',
+    default: "fancy",
     validator(value: string) {
-      return ['fancy', 'pulse'].includes(value);
+      return ["fancy", "pulse"].includes(value)
     },
   },
   buttonText: {
@@ -48,10 +60,10 @@ defineProps({
   },
   dataTestid: {
     type: String,
-    default: '',
+    default: "",
   },
   styleClassPassthrough: {
-    type: Array as PropType<string[]>,
+    type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
   isPending: {
@@ -62,5 +74,5 @@ defineProps({
     type: Boolean,
     default: false,
   },
-});
+})
 </script>

package/app/components/forms/input-button/variants/InputButtonSubmit.vue

@@ -1,30 +1,42 @@
 <template>
-  <InputButtonCore type="button" :use-effect :isPending :readonly :effect :data-testid :size :weight :button-text :style-class-passthrough :theme />
+  <InputButtonCore
+    type="button"
+    :use-effect
+    :isPending
+    :readonly
+    :effect
+    :data-testid
+    :size
+    :weight
+    :button-text
+    :style-class-passthrough
+    :theme
+  />
 </template>
 
 <script setup lang="ts">
-import propValidators from '../../c12/prop-validators';
+import propValidators from "../../c12/prop-validators"
 
 defineProps({
   size: {
     type: String as PropType<string>,
-    default: 'default',
+    default: "default",
     validator(value: string) {
-      return propValidators.size.includes(value);
+      return propValidators.size.includes(value)
     },
   },
   weight: {
     type: String as PropType<string>,
-    default: 'wght-400',
+    default: "wght-400",
     validator(value: string) {
-      return propValidators.weight.includes(value);
+      return propValidators.weight.includes(value)
     },
   },
   theme: {
     type: String as PropType<string>,
-    default: 'primary',
+    default: "primary",
     validator(value: string) {
-      return propValidators.theme.includes(value);
+      return propValidators.theme.includes(value)
     },
   },
   useEffect: {
@@ -33,9 +45,9 @@ defineProps({
   },
   effect: {
     type: String as PropType<string>,
-    default: 'fancy',
+    default: "fancy",
     validator(value: string) {
-      return ['fancy', 'pulse'].includes(value);
+      return ["fancy", "pulse"].includes(value)
     },
   },
   buttonText: {
@@ -44,10 +56,10 @@ defineProps({
   },
   dataTestid: {
     type: String,
-    default: '',
+    default: "",
   },
   styleClassPassthrough: {
-    type: Array as PropType<string[]>,
+    type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
   isPending: {
@@ -58,5 +70,5 @@ defineProps({
     type: Boolean,
     default: false,
   },
-});
+})
 </script>

package/app/components/forms/input-checkbox/MultipleCheckboxes.vue

@@ -137,7 +137,7 @@ const props = defineProps({
     default: true,
   },
   styleClassPassthrough: {
-    type: Array as PropType<string[]>,
+    type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
   theme: {

package/app/components/forms/input-checkbox/SingleCheckbox.vue

@@ -110,7 +110,7 @@ const props = defineProps({
     default: true,
   },
   styleClassPassthrough: {
-    type: Array as PropType<string[]>,
+    type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
   theme: {

package/app/components/forms/input-checkbox-radio/InputCheckboxRadioButton.vue

@@ -88,7 +88,7 @@ const props = defineProps({
     },
   },
   styleClassPassthrough: {
-    type: Array as PropType<string[]>,
+    type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
   theme: {

package/app/components/forms/input-checkbox-radio/InputCheckboxRadioCore.vue

@@ -91,7 +91,7 @@ const props = defineProps({
     default: false,
   },
   styleClassPassthrough: {
-    type: Array as PropType<string[]>,
+    type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
   ariaDescribedby: {

package/app/components/forms/input-checkbox-radio/InputCheckboxRadioWithLabel.vue

@@ -78,7 +78,7 @@ const props = defineProps({
     },
   },
   styleClassPassthrough: {
-    type: Array as PropType<string[]>,
+    type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
   theme: {

package/app/components/forms/input-description/InputDescription.vue

@@ -31,7 +31,7 @@ const props = defineProps({
     default: false,
   },
   styleClassPassthrough: {
-    type: Array as PropType<string[]>,
+    type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
   theme: {

package/app/components/forms/input-label/InputLabel.vue

@@ -22,7 +22,7 @@ const props = defineProps({
     default: false,
   },
   styleClassPassthrough: {
-    type: Array as PropType<string[]>,
+    type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
   theme: {

package/app/components/forms/input-number/InputNumberCore.vue

@@ -90,7 +90,7 @@ const props = defineProps({
     default: false,
   },
   styleClassPassthrough: {
-    type: Array as PropType<string[]>,
+    type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
 })

package/app/components/forms/input-number/variants/InputNumberDefault.vue

@@ -132,7 +132,7 @@ const props = defineProps({
     },
   },
   styleClassPassthrough: {
-    type: Array as PropType<string[]>,
+    type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
 })

package/app/components/forms/input-radio/MultipleRadiobuttons.vue

@@ -130,7 +130,7 @@ const props = defineProps({
     default: true,
   },
   styleClassPassthrough: {
-    type: Array as PropType<string[]>,
+    type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
   theme: {

package/app/components/forms/input-range/InputRangeCore.vue

@@ -93,7 +93,7 @@ const props = defineProps({
     default: false,
   },
   styleClassPassthrough: {
-    type: Array as PropType<string[]>,
+    type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
 })

package/app/components/forms/input-range/variants/InputRangeDefault.vue

@@ -130,7 +130,7 @@ const {
     },
   },
   styleClassPassthrough: {
-    type: Array as PropType<string[]>,
+    type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
   deepCssClassPassthrough: {

package/app/components/forms/input-range-fancy/InputRangeFancyCore.vue

@@ -2,13 +2,26 @@
   <div class="control" ref="control">
     <div aria-hidden="true" class="tooltip" ref="toolTip">
       <div class="range-label range-low-label" ref="toolTipLow">
-        {{ rangeLowLabel }}<span class="value">{{ lowValue }} %</span>
+        {{ rangeLowLabel }}
+        <span class="value">{{ lowValue }} %</span>
       </div>
       <div class="range-label range-high-label" ref="toolTipHigh">
-        <span class="value">{{ highValue }} %</span>{{ rangeHighLabel }}
+        <span class="value">{{ highValue }} %</span>
+        {{ rangeHighLabel }}
       </div>
     </div>
-    <input type="range" v-model="modelValue" ref="inputRef" @input="update()" @pointerdown="update()" :id :name :min :max :step />
+    <input
+      type="range"
+      v-model="modelValue"
+      ref="inputRef"
+      @input="update()"
+      @pointerdown="update()"
+      :id
+      :name
+      :min
+      :max
+      :step
+    />
 
     <div class="control__track" ref="controlTrack">
       <div class="control__track-slide">
@@ -21,7 +34,7 @@
 </template>
 
 <script setup lang="ts">
-import propValidators from '../c12/prop-validators';
+import propValidators from "../c12/prop-validators"
 
 const props = defineProps({
   id: {
@@ -54,7 +67,7 @@ const props = defineProps({
   },
   placeholder: {
     type: String,
-    default: '',
+    default: "",
   },
   required: {
     type: Boolean,
@@ -62,23 +75,23 @@ const props = defineProps({
   },
   theme: {
     type: String as PropType<string>,
-    default: 'primary',
+    default: "primary",
     validator(value: string) {
-      return propValidators.theme.includes(value);
+      return propValidators.theme.includes(value)
     },
   },
   size: {
     type: String as PropType<string>,
-    default: 'medium',
+    default: "medium",
     validator(value: string) {
-      return propValidators.size.includes(value);
+      return propValidators.size.includes(value)
     },
   },
   weight: {
     type: String as PropType<string>,
-    default: 'wght-400',
+    default: "wght-400",
     validator(value: string) {
-      return propValidators.weight.includes(value);
+      return propValidators.weight.includes(value)
     },
   },
   fieldHasError: {
@@ -86,63 +99,63 @@ const props = defineProps({
     default: false,
   },
   styleClassPassthrough: {
-    type: Array as PropType<string[]>,
+    type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
-});
+})
 
-const modelValue = defineModel<number | readonly number[]>();
+const modelValue = defineModel<number | readonly number[]>()
 
-const control = ref<HTMLDivElement | null>(null);
-const controlTrack = ref<HTMLDivElement | null>(null);
-const toolTip = ref<HTMLDivElement | null>(null);
-const toolTipLow = ref<HTMLDivElement | null>(null);
-const toolTipHigh = ref<HTMLDivElement | null>(null);
-const inputRef = ref<HTMLInputElement | null>(null);
+const control = ref<HTMLDivElement | null>(null)
+const controlTrack = ref<HTMLDivElement | null>(null)
+const toolTip = ref<HTMLDivElement | null>(null)
+const toolTipLow = ref<HTMLDivElement | null>(null)
+const toolTipHigh = ref<HTMLDivElement | null>(null)
+const inputRef = ref<HTMLInputElement | null>(null)
 
 // Box sizes
-const toolTipWidth = ref(0);
-const toolTipLowWidth = ref(0);
-const toolTipHighWidth = ref(0);
-const toolTipMargin = 20;
+const toolTipWidth = ref(0)
+const toolTipLowWidth = ref(0)
+const toolTipHighWidth = ref(0)
+const toolTipMargin = 20
 
 const toolTipLowContainerEnd = computed(() => {
-  return Math.floor(((toolTipHighWidth.value + toolTipMargin) / toolTipWidth.value) * 100) + '%';
-});
+  return Math.floor(((toolTipHighWidth.value + toolTipMargin) / toolTipWidth.value) * 100) + "%"
+})
 
 const toolTipHighContainerStart = computed(() => {
-  return Math.floor(((toolTipWidth.value - (toolTipHighWidth.value + toolTipMargin)) / toolTipWidth.value) * 100) + '%';
-});
+  return Math.floor(((toolTipWidth.value - (toolTipHighWidth.value + toolTipMargin)) / toolTipWidth.value) * 100) + "%"
+})
 
 const lowValue = computed(() => {
-  return Math.floor(Number(props.max) - Number(highValue.value));
-});
+  return Math.floor(Number(props.max) - Number(highValue.value))
+})
 const highValue = computed(() => {
-  return Math.floor((Number(modelValue.value) / props.max) * 100);
-});
+  return Math.floor((Number(modelValue.value) / props.max) * 100)
+})
 
 const update = () => {
-  control.value?.style.setProperty('--value', String(modelValue.value));
-  const value = typeof modelValue.value === 'number' ? modelValue.value : 0;
-  controlTrack.value?.style.setProperty('--shift', value > 40 && value < 68 ? '1' : '0');
-  toolTip.value?.style.setProperty('--shift', value > 40 && value < 68 ? '1' : '0');
-};
+  control.value?.style.setProperty("--value", String(modelValue.value))
+  const value = typeof modelValue.value === "number" ? modelValue.value : 0
+  controlTrack.value?.style.setProperty("--shift", value > 40 && value < 68 ? "1" : "0")
+  toolTip.value?.style.setProperty("--shift", value > 40 && value < 68 ? "1" : "0")
+}
 
 const updateBoxSizes = () => {
-  toolTipWidth.value = toolTip.value?.offsetWidth || 0;
-  toolTipLowWidth.value = toolTipLow.value?.offsetWidth || 0;
-  toolTipHighWidth.value = toolTipHigh.value?.offsetWidth || 0;
-  console.log('toolTipWidth', toolTipWidth.value);
-  console.log('toolTipLowContainerEnd', toolTipLowContainerEnd.value);
-  console.log('toolTipHighContainerStart', toolTipHighContainerStart.value);
-};
+  toolTipWidth.value = toolTip.value?.offsetWidth || 0
+  toolTipLowWidth.value = toolTipLow.value?.offsetWidth || 0
+  toolTipHighWidth.value = toolTipHigh.value?.offsetWidth || 0
+  console.log("toolTipWidth", toolTipWidth.value)
+  console.log("toolTipLowContainerEnd", toolTipLowContainerEnd.value)
+  console.log("toolTipHighContainerStart", toolTipHighContainerStart.value)
+}
 
 onMounted(() => {
-  updateBoxSizes();
-  if (!CSS.supports('animation-timeline: scroll()')) {
-    update();
+  updateBoxSizes()
+  if (!CSS.supports("animation-timeline: scroll()")) {
+    update()
   }
-});
+})
 </script>
 
 <style lang="css">
@@ -159,20 +172,20 @@ onMounted(() => {
     --active: 1;
   }
 
-  [type='range'] {
+  [type="range"] {
     width: 100%;
     opacity: 0;
     height: 6rem;
   }
 
-  [type='range']:hover {
+  [type="range"]:hover {
     cursor: -webkit-grab;
   }
-  [type='range']:active {
+  [type="range"]:active {
     cursor: -webkit-grabbing;
   }
 
-  [type='range']:focus-visible {
+  [type="range"]:focus-visible {
     outline-offset: var(--form-element-outline-offset-focus);
     outline-color: transparent;
   }
@@ -180,7 +193,7 @@ onMounted(() => {
   @property --shift {
     initial-value: 0;
     inherits: true;
-    syntax: '<integer>';
+    syntax: "<integer>";
   }
 
   .tooltip {
@@ -222,7 +235,7 @@ onMounted(() => {
     font-family: monospace;
   }
 
-  [type='range']::-webkit-slider-thumb {
+  [type="range"]::-webkit-slider-thumb {
     appearance: none;
     -webkit-appearance: none;
     height: 6rem;
@@ -230,14 +243,14 @@ onMounted(() => {
     margin-top: 0rem;
     opacity: 1;
   }
-  [type='range']::-webkit-slider-runnable-track {
+  [type="range"]::-webkit-slider-runnable-track {
     -webkit-appearance: none;
     height: 6rem;
     /* background: hsl(10 80% 50% / 0.5); */
     margin-top: 0rem; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
     box-shadow: 0.1rem 0.1rem 0.1rem #000000, 0rem 0rem 0.1rem #0d0d0d;
   }
-  [type='range']::-moz-range-track {
+  [type="range"]::-moz-range-track {
     height: 6rem;
     /* background: hsl(10 80% 50% / 0.5); */
     margin-top: 0rem; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
@@ -248,7 +261,7 @@ onMounted(() => {
 @layer scrolls {
   @property --value {
     initial-value: 0;
-    syntax: '<integer>';
+    syntax: "<integer>";
     inherits: true;
   }
 
@@ -258,7 +271,7 @@ onMounted(() => {
     }
   }
 
-  [type='range'] {
+  [type="range"] {
     overflow: hidden;
     opacity: 0;
     touch-action: none;
@@ -269,7 +282,7 @@ onMounted(() => {
     transition-duration: 0.25s;
   }
 
-  [data-reveal='true'] [type='range'] {
+  [data-reveal="true"] [type="range"] {
     opacity: 1;
     translate: 0 -150%;
     outline-color: white;
@@ -296,7 +309,7 @@ onMounted(() => {
     clip-path: inset(0 -0.25rem 0 -0.25rem round 0.6rem);
   }
 
-  [data-reveal='true'] .control__track {
+  [data-reveal="true"] .control__track {
     clip-path: unset;
     outline: 0.2rem dashed white;
   }
@@ -389,7 +402,7 @@ onMounted(() => {
       timeline-scope: --thumb;
     }
 
-    [type='range']::-webkit-slider-thumb {
+    [type="range"]::-webkit-slider-thumb {
       view-timeline-name: --thumb;
       view-timeline-axis: inline;
     }

package/app/components/forms/input-range-fancy/InputRangeFancyWithLabel.vue

@@ -98,7 +98,7 @@ const props = defineProps({
     },
   },
   styleClassPassthrough: {
-    type: Array as PropType<string[]>,
+    type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
   deepCssClassPassthrough: {

package/app/components/forms/input-select/InputSelectCore.vue

@@ -1,9 +1,28 @@
 <template>
-  <div class="input-select-wrapper" :data-theme="formTheme" :data-size="size" :class="[inputVariant, size, { dirty: isDirty }, { active: isActive }, { error: fieldHasError }]">
+  <div
+    class="input-select-wrapper"
+    :data-theme="formTheme"
+    :data-size="size"
+    :class="[inputVariant, size, { dirty: isDirty }, { active: isActive }, { error: fieldHasError }]"
+  >
     <select v-model="modelValue" class="input-select-core" :name :id :title>
-      <option v-if="placeholder" value="" readonly :selected="!modelValue" class="input-select-core-option placeholder">{{ placeholder }}</option>
-      <option v-for="item in fieldData.data" :key="item.id" :value="item.value" :selected="item.value === modelValue" class="input-select-core-option">
-        <Icon v-if="item.icon" :name="item.icon" class="input-select-core-option-decorator-icon" aria-hidden="true" focusable="false" />
+      <option v-if="placeholder" value="" readonly :selected="!modelValue" class="input-select-core-option placeholder">
+        {{ placeholder }}
+      </option>
+      <option
+        v-for="item in fieldData.data"
+        :key="item.id"
+        :value="item.value"
+        :selected="item.value === modelValue"
+        class="input-select-core-option"
+      >
+        <Icon
+          v-if="item.icon"
+          :name="item.icon"
+          class="input-select-core-option-decorator-icon"
+          aria-hidden="true"
+          focusable="false"
+        />
         {{ item.label }}
       </option>
     </select>
@@ -11,8 +30,8 @@
 </template>
 
 <script setup lang="ts">
-import propValidators from '../c12/prop-validators';
-import type { IFormMultipleOptions } from '../../../../shared/types/types.forms';
+import propValidators from "../c12/prop-validators"
+import type { IFormMultipleOptions } from "../../../../shared/types/types.forms"
 
 const props = defineProps({
   id: {
@@ -25,11 +44,11 @@ const props = defineProps({
   },
   placeholder: {
     type: String,
-    default: '',
+    default: "",
   },
   title: {
     type: String,
-    default: 'Please select an option',
+    default: "Please select an option",
   },
   required: {
     type: Boolean,
@@ -41,39 +60,39 @@ const props = defineProps({
   },
   size: {
     type: String as PropType<string>,
-    default: 'medium',
+    default: "medium",
     validator(value: string) {
-      return propValidators.size.includes(value);
+      return propValidators.size.includes(value)
     },
   },
   styleClassPassthrough: {
-    type: Array as PropType<string[]>,
+    type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
   theme: {
     type: String as PropType<string>,
-    default: 'primary',
+    default: "primary",
     validator(value: string) {
-      return propValidators.theme.includes(value);
+      return propValidators.theme.includes(value)
     },
   },
   inputVariant: {
     type: String as PropType<string>,
-    default: 'normal',
+    default: "normal",
     validator(value: string) {
-      return propValidators.inputVariant.includes(value);
+      return propValidators.inputVariant.includes(value)
     },
   },
-});
+})
 
 const formTheme = computed(() => {
-  return props.fieldHasError ? 'error' : props.theme;
-});
+  return props.fieldHasError ? "error" : props.theme
+})
 
-const modelValue = defineModel({ required: true });
-const isDirty = defineModel('isDirty');
-const isActive = defineModel('isActive');
-const fieldData = defineModel('fieldData') as Ref<IFormMultipleOptions>;
+const modelValue = defineModel({ required: true })
+const isDirty = defineModel("isDirty")
+const isActive = defineModel("isActive")
+const fieldData = defineModel("fieldData") as Ref<IFormMultipleOptions>
 </script>
 
 <style lang="css">
@@ -111,7 +130,8 @@ const fieldData = defineModel('fieldData') as Ref<IFormMultipleOptions>;
     }
 
     &::picker(select) {
-      transition: display allow-discrete var(--theme-form-transition-duration), opacity var(--theme-form-transition-duration), overlay var(--theme-form-transition-duration) allow-discrete;
+      transition: display allow-discrete var(--theme-form-transition-duration),
+        opacity var(--theme-form-transition-duration), overlay var(--theme-form-transition-duration) allow-discrete;
     }
 
     &:not(:open)::picker(select) {

package/app/components/forms/input-select/variants/InputSelectWithLabel.vue

@@ -119,7 +119,7 @@ const props = defineProps({
     },
   },
   styleClassPassthrough: {
-    type: Array as PropType<string[]>,
+    type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
   theme: {

package/app/components/forms/input-text/InputTextCore.vue

@@ -84,7 +84,7 @@ const props = defineProps({
     default: false,
   },
   styleClassPassthrough: {
-    type: Array as PropType<string[]>,
+    type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
   theme: {

package/app/components/forms/input-text/variants/InputPasswordWithLabel.vue

@@ -36,12 +36,12 @@
 </template>
 
 <script setup lang="ts">
-import propValidators from '../../c12/prop-validators';
+import propValidators from "../../c12/prop-validators"
 
 const props = defineProps({
   type: {
-    type: String as PropType<'text' | 'password'>,
-    default: 'password',
+    type: String as PropType<"text" | "password">,
+    default: "password",
   },
   maxlength: {
     type: Number,
@@ -53,7 +53,7 @@ const props = defineProps({
   },
   placeholder: {
     type: String,
-    default: '',
+    default: "",
   },
   label: {
     type: String,
@@ -72,59 +72,59 @@ const props = defineProps({
     default: false,
   },
   styleClassPassthrough: {
-    type: Array as PropType<string[]>,
+    type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
   theme: {
     type: String as PropType<string>,
-    default: 'primary',
+    default: "primary",
     validator(value: string) {
-      return propValidators.theme.includes(value);
+      return propValidators.theme.includes(value)
     },
   },
   size: {
     type: String as PropType<string>,
-    default: 'medium',
+    default: "medium",
     validator(value: string) {
-      return propValidators.size.includes(value);
+      return propValidators.size.includes(value)
     },
   },
   inputVariant: {
     type: String as PropType<string>,
-    default: 'normal',
+    default: "normal",
     validator(value: string) {
-      return propValidators.inputVariant.includes(value);
+      return propValidators.inputVariant.includes(value)
     },
   },
-});
+})
 
 const formTheme = computed(() => {
-  return props.fieldHasError ? 'error' : props.theme;
-});
+  return props.fieldHasError ? "error" : props.theme
+})
 
 const buttonTheme = computed(() => {
-  return props.inputVariant === 'underlined' ? 'input-action-underlined' : 'input-action';
-});
+  return props.inputVariant === "underlined" ? "input-action-underlined" : "input-action"
+})
 
-const modelValue = defineModel();
+const modelValue = defineModel()
 
-const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 
 const updateFocus = (name: string, isFocused: boolean) => {
   // console.log('updateFocus', name, isFocused);
   // modelValue.value.focusedField = isFocused ? name : '';
-};
+}
 
-const inputType = ref<'text' | 'password'>(props.type);
+const inputType = ref<"text" | "password">(props.type)
 
-const displayPassword = ref(false);
+const displayPassword = ref(false)
 const buttonText = computed(() => {
-  inputType.value = displayPassword.value ? 'text' : 'password';
-  return displayPassword.value ? 'Hide password' : 'Show password';
-});
+  inputType.value = displayPassword.value ? "text" : "password"
+  return displayPassword.value ? "Hide password" : "Show password"
+})
 const toggleDisplayPassword = () => {
-  displayPassword.value = !displayPassword.value;
-};
+  displayPassword.value = !displayPassword.value
+}
 
-updateElementClasses(['has-right-button']);
+updateElementClasses(["has-right-button"])
 </script>

package/app/components/forms/input-text/variants/InputTextAsNumberWithLabel.vue

@@ -107,7 +107,7 @@ const props = defineProps({
     default: false,
   },
   styleClassPassthrough: {
-    type: Array as PropType<string[]>,
+    type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
   theme: {

package/app/components/forms/input-text/variants/InputTextWithLabel.vue

@@ -125,7 +125,7 @@ const props = defineProps({
     default: false,
   },
   styleClassPassthrough: {
-    type: Array as PropType<string[]>,
+    type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
   theme: {

package/app/components/forms/input-textarea/InputTextareaCore.vue

@@ -69,7 +69,7 @@ const props = defineProps({
     default: false,
   },
   styleClassPassthrough: {
-    type: Array as PropType<string[]>,
+    type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
   theme: {

package/app/components/forms/input-textarea/variants/InputTextareaWithLabel.vue

@@ -109,7 +109,7 @@ const props = defineProps({
     default: false,
   },
   styleClassPassthrough: {
-    type: Array as PropType<string[]>,
+    type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
   theme: {

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

@@ -66,7 +66,7 @@ const props = defineProps({
     default: false,
   },
   styleClassPassthrough: {
-    type: Array as PropType<string[]>,
+    type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
   theme: {

package/app/components/forms/toggle-switch/ToggleSwitchCoreOld.vue

@@ -56,7 +56,7 @@ const props = defineProps({
     default: false,
   },
   styleClassPassthrough: {
-    type: Array as PropType<string[]>,
+    type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
   theme: {

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

@@ -74,7 +74,7 @@ const props = defineProps({
     default: false,
   },
   styleClassPassthrough: {
-    type: Array as PropType<string[]>,
+    type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
   theme: {

package/app/components/forms/toggle-switch/variants/ToggleSwitchWithLabelInline.vue

@@ -51,7 +51,7 @@ const props = defineProps({
     default: false,
   },
   styleClassPassthrough: {
-    type: Array as PropType<string[]>,
+    type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
   theme: {

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

@@ -62,7 +62,7 @@ const props = defineProps({
     default: "250ms",
   },
   styleClassPassthrough: {
-    type: Array as PropType<string[]>,
+    type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
 })

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

@@ -60,7 +60,7 @@ const props = defineProps({
     default: 100,
   },
   styleClassPassthrough: {
-    type: Array as PropType<string[]>,
+    type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
 })

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

@@ -38,7 +38,7 @@
 </template>
 
 <script setup lang="ts">
-import propValidators from '../../forms/c12/prop-validators';
+import propValidators from "../../forms/c12/prop-validators"
 
 defineProps({
   name: {
@@ -47,27 +47,27 @@ defineProps({
   },
   size: {
     type: String as PropType<string>,
-    default: 'medium',
+    default: "medium",
     validator(value: string) {
-      return propValidators.size.includes(value);
+      return propValidators.size.includes(value)
     },
   },
   theme: {
     type: String as PropType<string>,
-    default: 'primary',
+    default: "primary",
     validator(value: string) {
-      return propValidators.theme.includes(value);
+      return propValidators.theme.includes(value)
     },
   },
   styleClassPassthrough: {
-    type: Array as PropType<string[]>,
+    type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
-});
+})
 
-const colourScheme = ref<'auto' | 'dark' | 'light'>('auto');
+const colourScheme = ref<"auto" | "dark" | "light">("auto")
 
-useColourScheme(colourScheme);
+useColourScheme(colourScheme)
 </script>
 
 <style lang="css">
@@ -92,13 +92,16 @@ useColourScheme(colourScheme);
 
   .colour-scheme-select-form {
     display: grid;
-    grid-template-areas: 'element-stack';
+    grid-template-areas: "element-stack";
     align-items: center;
 
     background-color: var(--theme-form-radio-bg);
     border: var(--_border-width) solid var(--_border-color);
 
-    border-radius: calc((var(--_icon-size) / 2) + var(--_form-padding) + var(--_border-width) + var(--_outline-width) + var(--_form-input-outline-width));
+    border-radius: calc(
+      (var(--_icon-size) / 2) + var(--_form-padding) + var(--_border-width) + var(--_outline-width) +
+        var(--_form-input-outline-width)
+    );
 
     outline: var(--_outline-width) solid var(--_outline-color);
     box-shadow: var(--_box-shadow);
@@ -177,37 +180,37 @@ useColourScheme(colourScheme);
         outline: var(--_form-input-outline-width) solid gray;
         opacity: 0.75;
 
-        &:has(input[value='auto']) {
+        &:has(input[value="auto"]) {
           background-color: green;
 
-          &:has(input[value='auto']:checked) {
+          &:has(input[value="auto"]:checked) {
             --_scheme-marker-position: start;
             outline: var(--_form-input-outline-width) solid var(--_border-color);
             opacity: 1;
           }
         }
 
-        &:has(input[value='light']) {
+        &:has(input[value="light"]) {
           background-color: orange;
 
-          &:has(input[value='light']:checked) {
+          &:has(input[value="light"]:checked) {
             --_scheme-marker-position: center;
             outline: var(--_form-input-outline-width) solid var(--_border-color);
             opacity: 1;
           }
         }
 
-        &:has(input[value='dark']) {
+        &:has(input[value="dark"]) {
           background-color: black;
 
-          &:has(input[value='dark']:checked) {
+          &:has(input[value="dark"]:checked) {
             --_scheme-marker-position: end;
             outline: var(--_form-input-outline-width) solid var(--_border-color);
             opacity: 1;
           }
         }
 
-        input[type='radio'] {
+        input[type="radio"] {
           opacity: 0;
           height: var(--_icon-size);
           width: var(--_icon-size);

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

@@ -45,7 +45,7 @@ defineProps({
     },
   },
   styleClassPassthrough: {
-    type: Array as PropType<string[]>,
+    type: [String, Array] as PropType<string | string[]>,
     default: () => [],
   },
 })

package/app/composables/useStyleClassPassthrough.ts

@@ -1,30 +1,32 @@
-export const useStyleClassPassthrough = (styleClassPassthrough: string[]) => {
-  const styleClassPassthroughRef = ref(styleClassPassthrough);
+export const useStyleClassPassthrough = (styleClassPassthrough: string | string[]) => {
+  // Normalize initial value to an array
+  const normalize = (input: string | string[]): string[] =>
+    Array.isArray(input) ? input : input.split(/\s+/).filter(Boolean)
 
-  const elementClasses = computed(() => {
-    return styleClassPassthroughRef.value.join(' ');
-  });
+  const styleClassPassthroughRef = ref<string[]>(normalize(styleClassPassthrough))
+
+  const elementClasses = computed(() => styleClassPassthroughRef.value.join(" "))
 
   const updateElementClasses = (cssClass: string | string[]) => {
-    let cssClasses = [] as string[];
-    if (typeof cssClass === 'string') {
-      cssClasses = [cssClass];
-    } else if (Array.isArray(cssClass)) {
-      cssClasses = cssClass;
-    }
+    const cssClasses = Array.isArray(cssClass) ? cssClass : [cssClass]
 
-    cssClasses.forEach((cssClass) => {
-      if (styleClassPassthroughRef.value.includes(cssClass)) {
-        styleClassPassthroughRef.value = styleClassPassthroughRef.value.filter((className) => className !== cssClass);
+    cssClasses.forEach((cls) => {
+      if (styleClassPassthroughRef.value.includes(cls)) {
+        styleClassPassthroughRef.value = styleClassPassthroughRef.value.filter((c) => c !== cls)
       } else {
-        styleClassPassthroughRef.value.push(cssClass);
+        styleClassPassthroughRef.value.push(cls)
       }
-    });
-  };
+    })
+  }
+
+  const resetElementClasses = (propsClasses: string | string[]) => {
+    styleClassPassthroughRef.value = normalize(propsClasses)
+  }
 
   return {
     elementClasses,
     updateElementClasses,
+    resetElementClasses,
     styleClassPassthroughRef,
-  };
-};
+  }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-forms",
   "type": "module",
-  "version": "6.1.16",
+  "version": "6.1.18",
   "main": "nuxt.config.ts",
   "scripts": {
     "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",
@@ -25,20 +25,20 @@
   "devDependencies": {
     "@iconify-json/carbon": "1.2.13",
     "@iconify-json/gridicons": "1.2.4",
-    "@iconify-json/material-symbols": "1.2.35",
-    "@iconify-json/material-symbols-light": "1.2.35",
+    "@iconify-json/material-symbols": "1.2.37",
+    "@iconify-json/material-symbols-light": "1.2.37",
     "@iconify-json/radix-icons": "1.2.5",
     "@nuxt/eslint": "1.9.0",
     "@nuxt/icon": "2.0.0",
     "@nuxt/test-utils": "3.19.2",
     "@vue/test-utils": "2.4.6",
-    "eslint": "9.35.0",
+    "eslint": "9.36.0",
     "happy-dom": "18.0.1",
     "nuxt": "4.1.2",
-    "release-it": "19.0.4",
+    "release-it": "19.0.5",
     "typescript": "5.9.2",
     "vitest": "3.2.4",
-    "zod": "4.1.8"
+    "zod": "4.1.11"
   },
   "dependencies": {
     "@iconify-json/ph": "1.2.2",