srcdev-nuxt-forms 6.0.1 → 6.1.1

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;
 

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

@@ -1,18 +1,38 @@
 <template>
   <div class="toggle-switch-with-label" :class="[elementClasses]" :data-theme="formTheme">
-    <InputLabel :for="`toggle-sitch-${id}`" :id :theme :name input-variant="normal" :field-has-error :style-class-passthrough="['input-switch-label', 'input-text-label', 'body-normal-bold']">
+    <InputLabel
+      :for="`toggle-sitch-${id}`"
+      :id
+      :theme
+      :name
+      input-variant="normal"
+      :field-has-error
+      :style-class-passthrough="['input-switch-label', 'input-text-label', 'body-normal-bold']"
+    >
       <template #textLabel>{{ label }}</template>
     </InputLabel>
 
-    <div v-if="hasDescriptionSlot" :id="`${id}-description`">
+    <div v-if="slots.description" :id="`${id}-description`">
       <slot name="description"></slot>
     </div>
-    <ToggleSwitchCore v-model="modelValue" :id :name :required :field-has-error :true-value :false-value :theme :round :size :ariaDescribedby>
-      <template v-if="hasIconOnSlot" #iconOn>
+    <ToggleSwitchCore
+      v-model="modelValue"
+      :id
+      :name
+      :required
+      :field-has-error
+      :true-value
+      :false-value
+      :theme
+      :round
+      :size
+      :ariaDescribedby
+    >
+      <template v-if="slots.iconOn" #iconOn>
         <slot name="iconOn"></slot>
       </template>
 
-      <template v-if="hasIconOffSlot" #iconOff>
+      <template v-if="slots.iconOff" #iconOff>
         <slot name="iconOff"></slot>
       </template>
     </ToggleSwitchCore>
@@ -21,7 +41,7 @@
 </template>
 
 <script setup lang="ts">
-import propValidators from '../../c12/prop-validators';
+import propValidators from "../../c12/prop-validators"
 
 const props = defineProps({
   name: {
@@ -38,7 +58,7 @@ const props = defineProps({
   },
   errorMessage: {
     type: [Object, String],
-    default: '',
+    default: "",
     required: false,
   },
   fieldHasError: {
@@ -59,9 +79,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: {
@@ -70,31 +90,28 @@ 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)
     },
   },
-});
+})
 
-const slots = useSlots();
-const hasDescriptionSlot = computed(() => slots.description !== undefined);
-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 id = useId();
-const errorId = `${id}-error-message`;
+const id = 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 { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const modelValue = defineModel()
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 </script>
 
 <style lang="css">

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

@@ -1,15 +1,22 @@
 <template>
   <div class="toggle-switch-with-label-inline" :class="[elementClasses]" :data-theme="theme">
-    <InputLabel :for="`toggle-sitch-${id}`" :id :theme :name input-variant="normal" :style-class-passthrough="['input-switch-label', 'input-text-label', labelWeightClass]">
+    <InputLabel
+      :for="`toggle-sitch-${id}`"
+      :id
+      :theme
+      :name
+      input-variant="normal"
+      :style-class-passthrough="['input-switch-label', 'input-text-label', labelWeightClass]"
+    >
       <template #textLabel>{{ label }}</template>
     </InputLabel>
 
     <ToggleSwitchCore v-model="modelValue" :id :name :true-value :false-value :theme :round :size>
-      <template v-if="hasIconOnSlot" #iconOn>
+      <template v-if="slots.iconOn" #iconOn>
         <slot name="iconOn"></slot>
       </template>
 
-      <template v-if="hasIconOffSlot" #iconOff>
+      <template v-if="slots.iconOff" #iconOff>
         <slot name="iconOff"></slot>
       </template>
     </ToggleSwitchCore>
@@ -17,7 +24,7 @@
 </template>
 
 <script setup lang="ts">
-import propValidators from '../../c12/prop-validators';
+import propValidators from "../../c12/prop-validators"
 
 const props = defineProps({
   name: {
@@ -30,9 +37,9 @@ const props = defineProps({
   },
   labelWeight: {
     type: String as PropType<string>,
-    default: 'semi-bold',
+    default: "semi-bold",
     validator(value: string) {
-      return propValidators.labelWeight.includes(value);
+      return propValidators.labelWeight.includes(value)
     },
   },
   trueValue: {
@@ -49,9 +56,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: {
@@ -60,34 +67,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)
     },
   },
-});
+})
 
-const slots = useSlots();
-const hasIconOnSlot = computed(() => slots.iconOn !== undefined);
-const hasIconOffSlot = computed(() => slots.iconOff !== undefined);
-
-const id = useId();
+const slots = useSlots()
+const id = useId()
 
 const labelWeightClass = computed(() => {
   switch (props.labelWeight) {
-    case 'bold':
-      return 'body-normal-bold';
-    case 'semi-bold':
-      return 'body-normal-semibold';
-    case 'normal':
-      return 'body-normal';
+    case "bold":
+      return "body-normal-bold"
+    case "semi-bold":
+      return "body-normal-semibold"
+    case "normal":
+      return "body-normal"
     default:
-      return 'body-normal-semibold';
+      return "body-normal-semibold"
   }
-});
+})
 
-const modelValue = defineModel();
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const modelValue = defineModel()
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 </script>
 
 <style lang="css">

package/nuxt.config.ts

@@ -2,39 +2,39 @@
 
 export default defineNuxtConfig({
   devtools: { enabled: true },
-  css: ['modern-normalize', './app/assets/styles/main.css'],
-  modules: ['@nuxt/icon', '@nuxt/test-utils/module'],
+  css: ["modern-normalize", "./app/assets/styles/main.css"],
+  modules: ["@nuxt/eslint", "@nuxt/icon", "@nuxt/test-utils/module"],
   alias: {
-    '#shared': './shared',
+    "#shared": "./shared",
   },
   typescript: {
     tsConfig: {
       compilerOptions: {
-        types: ['vitest/globals'], // TypeScript support for globals
+        types: ["vitest/globals"], // TypeScript support for globals
       },
     },
   },
   app: {
     head: {
       htmlAttrs: {
-        lang: 'en',
-        'data-color-scheme': 'auto',
+        lang: "en",
+        "data-color-scheme": "auto",
       },
-      titleTemplate: '%s - Website name',
-      meta: [{ charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }],
+      titleTemplate: "%s - Website name",
+      meta: [{ charset: "utf-8" }, { name: "viewport", content: "width=device-width, initial-scale=1" }],
     },
   },
   components: [
     {
-      path: './components',
+      path: "./components",
       pathPrefix: false,
     },
   ],
   vue: {
     runtimeCompiler: true,
   },
-  compatibilityDate: '2024-12-01',
+  compatibilityDate: "2024-12-01",
   future: {
     compatibilityVersion: 4,
   },
-});
+})

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-forms",
   "type": "module",
-  "version": "6.0.1",
+  "version": "6.1.1",
   "main": "nuxt.config.ts",
   "scripts": {
     "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",
@@ -26,7 +26,7 @@
     "@iconify-json/carbon": "1.2.10",
     "@iconify-json/material-symbols": "1.2.29",
     "@iconify-json/material-symbols-light": "1.2.29",
-    "@nuxt/eslint-config": "1.8.0",
+    "@nuxt/eslint": "1.8.0",
     "@nuxt/icon": "1.15.0",
     "@nuxt/test-utils": "3.19.2",
     "@vue/test-utils": "2.4.6",