srcdev-nuxt-forms 6.0.1 → 6.1.1

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

@@ -4,9 +4,16 @@
     :data-theme="formTheme"
     :data-size="size"
     :data-inputmode="inputmode"
-    :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>
 
@@ -28,29 +35,28 @@
       @focusout="updateFocus(false)"
     />
 
-    <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({
   type: {
-    type: String as PropType<'text' | 'email' | 'password' | 'number' | 'tel' | 'url'>,
-    // type: String,
-    default: 'text',
+    type: String as PropType<"text" | "email" | "password" | "number" | "tel" | "url">,
+    default: "text",
     validator(value: string) {
-      return propValidators.inputTypesText.includes(value);
+      return propValidators.inputTypesText.includes(value)
     },
   },
   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)
     },
   },
   maxlength: {
@@ -71,7 +77,7 @@ const props = defineProps({
   },
   placeholder: {
     type: String,
-    default: '',
+    default: "",
   },
   fieldHasError: {
     type: Boolean,
@@ -83,9 +89,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)
     },
   },
   ariaDescribedby: {
@@ -94,66 +100,64 @@ 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)
     },
   },
   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();
-const isDirty = defineModel('isDirty');
-const isActive = defineModel('isActive');
+const modelValue = defineModel()
+const isDirty = defineModel("isDirty")
+const isActive = defineModel("isActive")
 
 const inputPattern = computed(() => {
-  return props.inputmode === 'numeric' ? '[0-9]+' : undefined;
-});
+  return props.inputmode === "numeric" ? "[0-9]+" : undefined
+})
 
 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)
 
 // TODO: Move this to a utility function to allow removeEventListener on unmounted
 // Leaving like this could lead to memory leaks
 const validateInput = () => {
   if (inputField.value !== null) {
-    inputField.value.addEventListener('beforeinput', (event: any) => {
-      let beforeValue = modelValue.value;
+    inputField.value.addEventListener("beforeinput", (event: any) => {
+      let beforeValue = modelValue.value
       event.target.addEventListener(
-        'input',
+        "input",
         () => {
           if (inputField.value !== null && inputField.value.validity.patternMismatch) {
-            inputField.value.value = beforeValue as string;
+            inputField.value.value = beforeValue as string
           }
         },
         { once: true }
-      );
-    });
+      )
+    })
   }
-};
+}
 
 onMounted(() => {
-  if (props.inputmode === 'numeric') validateInput();
-});
+  if (props.inputmode === "numeric") validateInput()
+})
 </script>
 
 <style lang="css">
@@ -197,13 +201,13 @@ onMounted(() => {
       place-items: center;
       background-clip: padding-box;
 
-      &.left-slot:not([data-theme='input-action']) {
+      &.left-slot:not([data-theme="input-action"]) {
         .icon {
           width: 2.2rem;
           height: 2.2rem;
         }
 
-        [data-theme='input-action'] {
+        [data-theme="input-action"] {
           width: initial;
           height: initial;
           padding: 0.5rem;
@@ -214,13 +218,13 @@ onMounted(() => {
           }
         }
       }
-      &.right-slot:not([data-theme='input-action']) {
+      &.right-slot:not([data-theme="input-action"]) {
         .icon {
           width: 2.2rem;
           height: 2.2rem;
         }
 
-        [data-theme='input-action'] {
+        [data-theme="input-action"] {
           width: initial;
           height: initial;
           padding: 0.5rem;
@@ -233,12 +237,12 @@ onMounted(() => {
       }
     }
 
-    &[data-inputmode='numeric'] {
+    &[data-inputmode="numeric"] {
       padding-block: 0rem;
       padding-inline: 0.75rem;
 
       .slot {
-        [data-theme='input-action'] {
+        [data-theme="input-action"] {
           width: initial;
           height: initial;
           padding: 0.5rem;
@@ -281,13 +285,13 @@ onMounted(() => {
       place-items: center;
       background-clip: padding-box;
 
-      &.left-slot:not([data-theme='input-action-underlined']) {
+      &.left-slot:not([data-theme="input-action-underlined"]) {
         .icon {
           width: 2.2rem;
           height: 2.2rem;
         }
 
-        [data-theme='input-action-underlined'] {
+        [data-theme="input-action-underlined"] {
           width: initial;
           height: initial;
           padding: 0.5rem;
@@ -298,13 +302,13 @@ onMounted(() => {
           }
         }
       }
-      &.right-slot:not([data-theme='input-action-underlined']) {
+      &.right-slot:not([data-theme="input-action-underlined"]) {
         .icon {
           width: 2.2rem;
           height: 2.2rem;
         }
 
-        [data-theme='input-action-underlined'] {
+        [data-theme="input-action-underlined"] {
           width: initial;
           height: initial;
           padding: 0.5rem;

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

@@ -1,10 +1,22 @@
 <template>
-  <div class="input-text-with-label" :data-theme="formTheme" :class="[inputVariant, elementClasses, { dirty: isDirty }, { active: isActive }]">
-    <InputLabel :for="id" :id :theme :name :input-variant :field-has-error :style-class-passthrough="['input-text-label', 'body-normal-bold']">
+  <div
+    class="input-text-with-label"
+    :data-theme="formTheme"
+    :class="[inputVariant, elementClasses, { dirty: isDirty }, { active: isActive }]"
+  >
+    <InputLabel
+      :for="id"
+      :id
+      :theme
+      :name
+      :input-variant
+      :field-has-error
+      :style-class-passthrough="['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>
 
@@ -28,7 +40,7 @@
       :size
       :inputVariant
     >
-      <template v-if="hasLeftSlot" #left>
+      <template v-if="slots.left" #left>
         <InputButtonCore
           type="button"
           @click.stop.prevent="updateValue(-step, Number(modelValue) > min)"
@@ -43,7 +55,7 @@
           </template>
         </InputButtonCore>
       </template>
-      <template v-if="hasRightSlot" #right>
+      <template v-if="slots.right" #right>
         <InputButtonCore
           type="button"
           @click.stop.prevent="updateValue(step, Number(modelValue) < max)"
@@ -64,7 +76,7 @@
 </template>
 
 <script setup lang="ts">
-import propValidators from '../../c12/prop-validators';
+import propValidators from "../../c12/prop-validators"
 const props = defineProps({
   maxlength: {
     type: Number,
@@ -76,7 +88,7 @@ const props = defineProps({
   },
   placeholder: {
     type: String,
-    default: '',
+    default: "",
   },
   label: {
     type: String,
@@ -100,9 +112,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)
     },
   },
   min: {
@@ -119,50 +131,47 @@ 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)
     },
   },
   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 = 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 isActive = ref<boolean>(false);
-const isDirty = ref<boolean>(false);
+const modelValue = defineModel()
+const isActive = ref<boolean>(false)
+const isDirty = ref<boolean>(false)
 
-const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
-const minLength = computed(() => `${props.max.toString().length + 1}em`);
+const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
+const minLength = computed(() => `${props.max.toString().length + 1}em`)
 
 const updateValue = (step: number, withinRangeLimit: boolean) => {
   if (withinRangeLimit) {
-    modelValue.value = (Number(modelValue.value) + step) as number;
+    modelValue.value = (Number(modelValue.value) + step) as number
   }
-};
+}
 
-updateElementClasses(['input-text-as-number', 'has-left-button', 'has-right-button']);
+updateElementClasses(["input-text-as-number", "has-left-button", "has-right-button"])
 </script>
 
 <style lang="css">

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">