srcdev-nuxt-forms 6.1.0 → 6.1.1

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

@@ -1,11 +1,23 @@
 <template>
   <div>
-    <div class="input-text-with-label" :data-theme="formTheme" :class="[elementClasses, inputVariant, { dirty: isDirty }, { active: isActive }]">
-      <InputLabel :for="id" :id :theme :name :input-variant :field-has-error :style-class-passthrough="['input-text-label']">
+    <div
+      class="input-text-with-label"
+      :data-theme="formTheme"
+      :class="[elementClasses, inputVariant, { dirty: isDirty }, { active: isActive }]"
+    >
+      <InputLabel
+        :for="id"
+        :id
+        :theme
+        :name
+        :input-variant
+        :field-has-error
+        :style-class-passthrough="['input-text-label']"
+      >
         <template #textLabel>{{ label }}</template>
       </InputLabel>
 
-      <div v-if="inputVariant === 'normal' && hasDescriptionSlot" :id="`${id}-description`">
+      <div v-if="inputVariant === 'normal' && slots.description" :id="`${id}-description`">
         <slot name="description"></slot>
       </div>
 
@@ -29,10 +41,10 @@
         :size
         :inputVariant
       >
-        <template v-if="hasLeftSlot" #left>
+        <template v-if="slots.left" #left>
           <slot name="left"></slot>
         </template>
-        <template v-if="hasRightSlot" #right>
+        <template v-if="slots.right" #right>
           <slot name="right"></slot>
         </template>
       </InputTextCore>
@@ -40,28 +52,28 @@
       <InputError :errorMessage :showError="fieldHasError" :id="errorId" :isDetached="false" :inputVariant />
     </div>
 
-    <div v-if="inputVariant !== 'normal' && hasDescriptionSlot" :id="`${id}-description`">
+    <div v-if="inputVariant !== 'normal' && slots.description" :id="`${id}-description`">
       <slot name="description"></slot>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import propValidators from '../../c12/prop-validators';
+import propValidators from "../../c12/prop-validators"
 const props = defineProps({
   maxlength: {
     type: Number,
     default: 255,
   },
   type: {
-    type: String as PropType<'text' | 'email' | 'password' | 'number' | 'tel' | 'url'>,
+    type: String as PropType<"text" | "email" | "password" | "number" | "tel" | "url">,
     required: true,
   },
   inputmode: {
-    type: String as PropType<'text' | 'email' | 'tel' | 'url' | 'search' | 'numeric' | 'none' | 'decimal'>,
-    default: 'text',
+    type: String as PropType<"text" | "email" | "tel" | "url" | "search" | "numeric" | "none" | "decimal">,
+    default: "text",
     validator(value: string) {
-      return propValidators.inputMode.includes(value);
+      return propValidators.inputMode.includes(value)
     },
   },
   name: {
@@ -70,7 +82,7 @@ const props = defineProps({
   },
   placeholder: {
     type: String,
-    default: '',
+    default: "",
   },
   label: {
     type: String,
@@ -94,65 +106,62 @@ 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: 'default',
+    default: "default",
     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 slots = useSlots();
-const hasDescriptionSlot = computed(() => slots.description !== undefined);
-const hasLeftSlot = computed(() => slots.left !== undefined);
-const hasRightSlot = computed(() => slots.right !== undefined);
+const slots = useSlots()
 
 const formTheme = computed(() => {
-  return props.fieldHasError ? 'error' : props.theme;
-});
+  return props.fieldHasError ? "error" : props.theme
+})
 
-const id = `${props.name}-${useId()}`;
-const errorId = `${id}-error-message`;
+const id = `${props.name}-${useId()}`
+const errorId = `${id}-error-message`
 const ariaDescribedby = computed(() => {
-  const ariaDescribedbyId = hasDescriptionSlot.value ? `${id}-description` : undefined;
-  return props.fieldHasError ? errorId : ariaDescribedbyId;
-});
+  const ariaDescribedbyId = slots.description ? `${id}-description` : undefined
+  return props.fieldHasError ? errorId : ariaDescribedbyId
+})
 
-const modelValue = defineModel();
-const isActive = ref<boolean>(false);
-const isDirty = ref<boolean>(false);
+const modelValue = defineModel()
+const isActive = ref<boolean>(false)
+const isDirty = ref<boolean>(false)
 
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 
 const testDirty = () => {
-  const watchValue = modelValue.value ?? '';
+  const watchValue = modelValue.value ?? ""
 
-  if (!isDirty.value && typeof watchValue === 'string' && watchValue.length > 0) {
-    isDirty.value = true;
+  if (!isDirty.value && typeof watchValue === "string" && watchValue.length > 0) {
+    isDirty.value = true
   }
-};
+}
 
 onMounted(() => {
-  testDirty();
-});
+  testDirty()
+})
 
 watch(
   () => modelValue.value,
   () => {
-    testDirty();
+    testDirty()
   }
-);
+)
 </script>

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

@@ -3,9 +3,16 @@
     class="input-textarea-wrapper"
     :data-theme="formTheme"
     :data-size="size"
-    :class="[inputVariant, { dirty: isDirty }, { active: isActive }, { error: fieldHasError }, { 'has-left-slot': hasLeftSlot }, { 'has-right-slot': hasRightSlot }]"
+    :class="[
+      inputVariant,
+      { dirty: isDirty },
+      { active: isActive },
+      { error: fieldHasError },
+      { 'has-left-slot': slots.left },
+      { 'has-right-slot': slots.right },
+    ]"
   >
-    <span v-if="hasLeftSlot" class="slot left-slot">
+    <span v-if="slots.left" class="slot left-slot">
       <slot name="left"></slot>
     </span>
 
@@ -24,14 +31,14 @@
       @focusout="updateFocus(false)"
     ></textarea>
 
-    <span v-if="hasRightSlot" class="slot right-slot">
+    <span v-if="slots.right" class="slot right-slot">
       <slot name="right"></slot>
     </span>
   </div>
 </template>
 
 <script setup lang="ts">
-import propValidators from '../c12/prop-validators';
+import propValidators from "../c12/prop-validators"
 const props = defineProps({
   maxlength: {
     type: Number,
@@ -47,7 +54,7 @@ const props = defineProps({
   },
   placeholder: {
     type: String,
-    default: '',
+    default: "",
   },
   fieldHasError: {
     type: Boolean,
@@ -63,46 +70,44 @@ 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: 'default',
+    default: "default",
     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 slots = useSlots();
-const hasLeftSlot = computed(() => slots.left !== undefined);
-const hasRightSlot = computed(() => slots.right !== undefined);
+const slots = useSlots()
 
 const formTheme = computed(() => {
-  return props.fieldHasError ? 'error' : props.theme;
-});
+  return props.fieldHasError ? "error" : props.theme
+})
 
-const modelValue = defineModel<string | number | readonly string[] | null | undefined>();
-const isDirty = defineModel('isDirty');
-const isActive = defineModel('isActive');
+const modelValue = defineModel<string | number | readonly string[] | null | undefined>()
+const isDirty = defineModel("isDirty")
+const isActive = defineModel("isActive")
 
 const updateFocus = (isFocused: boolean) => {
-  isActive.value = isFocused;
-};
+  isActive.value = isFocused
+}
 
-const inputField = ref<HTMLInputElement | null>(null);
+const inputField = ref<HTMLInputElement | null>(null)
 
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 </script>
 
 <style lang="css">

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

@@ -1,6 +1,18 @@
 <template>
-  <div class="input-textarea-with-label" :data-theme="formTheme" :class="[elementClasses, inputVariant, { dirty: isDirty }, { active: isActive }]">
-    <InputLabel :for="id" :id :theme :name :input-variant :field-has-error :style-class-passthrough="['input-textarea-label']">
+  <div
+    class="input-textarea-with-label"
+    :data-theme="formTheme"
+    :class="[elementClasses, inputVariant, { dirty: isDirty }, { active: isActive }]"
+  >
+    <InputLabel
+      :for="id"
+      :id
+      :theme
+      :name
+      :input-variant
+      :field-has-error
+      :style-class-passthrough="['input-textarea-label']"
+    >
       <template #textLabel>{{ label }}</template>
     </InputLabel>
 
@@ -20,10 +32,10 @@
       :size
       :inputVariant
     >
-      <template v-if="hasLeftSlot" #left>
+      <template v-if="slots.left" #left>
         <slot name="left"></slot>
       </template>
-      <template v-if="hasRightSlot" #right>
+      <template v-if="slots.right" #right>
         <slot name="right"></slot>
       </template>
     </InputTextareaCore>
@@ -32,7 +44,7 @@
 </template>
 
 <script setup lang="ts">
-import propValidators from '../../c12/prop-validators';
+import propValidators from "../../c12/prop-validators"
 const props = defineProps({
   maxlength: {
     type: Number,
@@ -44,7 +56,7 @@ const props = defineProps({
   },
   placeholder: {
     type: String,
-    default: '',
+    default: "",
   },
   label: {
     type: String,
@@ -68,58 +80,56 @@ 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: 'default',
+    default: "default",
     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 slots = useSlots();
-const hasLeftSlot = computed(() => slots.left !== undefined);
-const hasRightSlot = computed(() => slots.right !== undefined);
+const slots = useSlots()
 
-const id = useId();
+const id = useId()
 const formTheme = computed(() => {
-  return props.fieldHasError ? 'error' : props.theme;
-});
+  return props.fieldHasError ? "error" : props.theme
+})
 
-const modelValue = defineModel<string | number | readonly string[] | null | undefined>();
-const isActive = ref<boolean>(false);
-const isDirty = ref<boolean>(false);
+const modelValue = defineModel<string | number | readonly string[] | null | undefined>()
+const isActive = ref<boolean>(false)
+const isDirty = ref<boolean>(false)
 
-const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 
 const testDirty = () => {
-  const watchValue = modelValue.value ?? '';
+  const watchValue = modelValue.value ?? ""
 
-  if (!isDirty.value && typeof watchValue === 'string' && watchValue.length > 0) {
-    isDirty.value = true;
+  if (!isDirty.value && typeof watchValue === "string" && watchValue.length > 0) {
+    isDirty.value = true
   }
-};
+}
 
 onMounted(() => {
-  testDirty();
-});
+  testDirty()
+})
 
 watch(
   () => modelValue.value,
   () => {
-    testDirty();
+    testDirty()
   }
-);
+)
 </script>

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

@@ -1,7 +1,23 @@
 <template>
   <div class="toggle-switch-core" :class="elementClasses" :data-size="size" :data-theme="formTheme">
-    <div @click="toggleSwitchValue" class="toggle-switch-wrapper" :class="[{ round }, { 'use-default-icons': useDefaultIcons }]" :for="inputId">
-      <input type="checkbox" v-model="modelValue" :true-value :false-value :aria-invalid="fieldHasError" :id="inputId" :aria-describedby="`${id}-description`" :name :required :checked="isChecked" />
+    <div
+      @click="toggleSwitchValue"
+      class="toggle-switch-wrapper"
+      :class="[{ round }, { 'use-default-icons': useDefaultIcons }]"
+      :for="inputId"
+    >
+      <input
+        type="checkbox"
+        v-model="modelValue"
+        :true-value
+        :false-value
+        :aria-invalid="fieldHasError"
+        :id="inputId"
+        :aria-describedby="`${id}-description`"
+        :name
+        :required
+        :checked="isChecked"
+      />
       <div class="symbol-wrapper" :class="[{ round }]">
         <div class="symbol" :class="[{ round }]">
           <div class="symbol-icon icon-on">
@@ -22,7 +38,7 @@
 </template>
 
 <script setup lang="ts">
-import propValidators from '../c12/prop-validators';
+import propValidators from "../c12/prop-validators"
 
 const props = defineProps({
   id: {
@@ -55,9 +71,9 @@ 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)
     },
   },
   round: {
@@ -66,39 +82,36 @@ const props = defineProps({
   },
   size: {
     type: String as PropType<string>,
-    default: 'default',
+    default: "default",
     validator(value: string) {
-      return propValidators.size.includes(value);
+      return propValidators.size.includes(value)
     },
   },
   ariaDescribedby: {
     type: String,
     default: null,
   },
-});
+})
 
-const slots = useSlots();
-const hasIconOnSlot = computed(() => slots.iconOn !== undefined);
-const hasIconOffSlot = computed(() => slots.iconOff !== undefined);
-const useDefaultIcons = computed(() => !hasIconOnSlot.value && !hasIconOffSlot.value);
+const slots = useSlots()
+const useDefaultIcons = computed(() => !slots.iconOn && !slots.iconOff)
 
 const formTheme = computed(() => {
-  return props.fieldHasError ? 'error' : props.theme;
-});
+  return props.fieldHasError ? "error" : props.theme
+})
 
-const modelValue = defineModel();
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const modelValue = defineModel()
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 
-const inputId = computed(() => `toggle-sitch-${props.id}`);
+const inputId = computed(() => `toggle-sitch-${props.id}`)
 
 const isChecked = computed(() => {
-  return modelValue.value === props.trueValue;
-});
+  return modelValue.value === props.trueValue
+})
 
 const toggleSwitchValue = () => {
-  modelValue.value = modelValue.value === props.trueValue ? props.falseValue : props.trueValue;
-  console.log(`toggleSwitchValue(${modelValue.value})`);
-};
+  modelValue.value = modelValue.value === props.trueValue ? props.falseValue : props.trueValue
+}
 </script>
 
 <style lang="css">
@@ -149,16 +162,21 @@ const toggleSwitchValue = () => {
       /* background: blue; */
       border: var(--theme-form-toggle-border-width) solid var(--theme-form-toggle-border-color);
       outline: var(--theme-form-toggle-outline-width) solid var(--theme-form-toggle-outline-color);
-      border-radius: calc(var(--_symbol-size) + calc(var(--theme-form-toggle-border-width) * 2) + calc(var(--_switch-padding) * 2));
+      border-radius: calc(
+        var(--_symbol-size) + calc(var(--theme-form-toggle-border-width) * 2) + calc(var(--_switch-padding) * 2)
+      );
       display: inline-flex;
       align-items: center;
       justify-content: start;
-      width: calc(var(--_symbol-size) + var(--_symbol-checked-offset) + calc(var(--theme-form-toggle-border-width) * 2) + calc(var(--_switch-padding) * 2));
+      width: calc(
+        var(--_symbol-size) + var(--_symbol-checked-offset) + calc(var(--theme-form-toggle-border-width) * 2) +
+          calc(var(--_switch-padding) * 2)
+      );
       padding: var(--_switch-padding);
 
       .symbol {
         display: inline-grid;
-        grid-template-areas: 'icon';
+        grid-template-areas: "icon";
         place-content: center;
 
         aspect-ratio: 1/1;

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

@@ -1,14 +1,24 @@
 <template>
   <div class="toggle-switch-core" :class="elementClasses" :data-size="size" :data-theme="formTheme">
     <div @click="toggleSwitchValue" class="toggle-switch-input" :class="[{ round }]" :for="inputId">
-      <input type="checkbox" v-model="modelValue" :true-value :false-value :aria-invalid="fieldHasError" :id="inputId" :aria-describedby="`${id}-description`" :name :required />
+      <input
+        type="checkbox"
+        v-model="modelValue"
+        :true-value
+        :false-value
+        :aria-invalid="fieldHasError"
+        :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">
+          <div v-if="slots.iconOn" class="symbol-icon icon-on">
             <slot name="iconOn"></slot>
           </div>
 
-          <div v-if="hasIconOffSlot" class="symbol-icon icon-off">
+          <div v-if="slots.iconOff" class="symbol-icon icon-off">
             <slot name="iconOff"></slot>
           </div>
         </div>
@@ -18,7 +28,7 @@
 </template>
 
 <script setup lang="ts">
-import propValidators from '../c12/prop-validators';
+import propValidators from "../c12/prop-validators"
 
 const props = defineProps({
   id: {
@@ -51,9 +61,9 @@ 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)
     },
   },
   round: {
@@ -62,33 +72,31 @@ const props = defineProps({
   },
   size: {
     type: String as PropType<string>,
-    default: 'default',
+    default: "default",
     validator(value: string) {
-      return propValidators.size.includes(value);
+      return propValidators.size.includes(value)
     },
   },
   ariaDescribedby: {
     type: String,
     default: null,
   },
-});
+})
 
-const slots = useSlots();
-const hasIconOnSlot = computed(() => slots.iconOn !== undefined);
-const hasIconOffSlot = computed(() => slots.iconOff !== undefined);
+const slots = useSlots()
 
 const formTheme = computed(() => {
-  return props.fieldHasError ? 'error' : props.theme;
-});
+  return props.fieldHasError ? "error" : props.theme
+})
 
-const modelValue = defineModel();
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const modelValue = defineModel()
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 
-const inputId = computed(() => `toggle-sitch-${props.id}`);
+const inputId = computed(() => `toggle-sitch-${props.id}`)
 
 const toggleSwitchValue = () => {
-  modelValue.value = modelValue.value === props.trueValue ? props.falseValue : props.trueValue;
-};
+  modelValue.value = modelValue.value === props.trueValue ? props.falseValue : props.trueValue
+}
 </script>
 
 <style lang="css">
@@ -102,8 +110,14 @@ const toggleSwitchValue = () => {
   .toggle-switch-input {
     position: relative;
     display: inline-block;
-    height: calc(var(--form-toggle-symbol-size) + calc(var(--form-element-border-width) * 2) + calc(var(--form-element-outline-width) * 2));
-    width: calc(var(--form-toggle-symbol-size) * 2 - calc(var(--form-element-border-width) * 2) + calc(var(--form-element-outline-width) * 2) + var(--form-toggle-switch-width-adjustment));
+    height: calc(
+      var(--form-toggle-symbol-size) + calc(var(--form-element-border-width) * 2) +
+        calc(var(--form-element-outline-width) * 2)
+    );
+    width: calc(
+      var(--form-toggle-symbol-size) * 2 - calc(var(--form-element-border-width) * 2) +
+        calc(var(--form-element-outline-width) * 2) + var(--form-toggle-switch-width-adjustment)
+    );
 
     input {
       opacity: 0;
@@ -126,7 +140,7 @@ const toggleSwitchValue = () => {
 
       .symbol {
         display: grid;
-        grid-template-areas: 'icon-stack';
+        grid-template-areas: "icon-stack";
         overflow: clip;
         position: absolute;