srcdev-nuxt-forms 6.0.1 → 6.1.1

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

@@ -1,11 +1,30 @@
 <template>
-  <div class="input-checkbox-radio-options-button" :data-theme="formTheme" :data-size="size" :class="[size, elementClasses, optionsLayout, { error: fieldHasError }]">
-    <InputCheckboxRadioCore :isButton="true" :type :id :name :required v-model="modelValue" :size :trueValue :falseValue :fieldHasError :theme :ariaDescribedby :displayAsDisc>
+  <div
+    class="input-checkbox-radio-options-button"
+    :data-theme="formTheme"
+    :data-size="size"
+    :class="[size, elementClasses, optionsLayout, { error: fieldHasError }]"
+  >
+    <InputCheckboxRadioCore
+      :isButton="true"
+      :type
+      :id
+      :name
+      :required
+      v-model="modelValue"
+      :size
+      :trueValue
+      :falseValue
+      :fieldHasError
+      :theme
+      :ariaDescribedby
+      :displayAsDisc
+    >
       <template #checkedIcon>
         <slot name="checkedIcon"></slot>
       </template>
     </InputCheckboxRadioCore>
-    <label v-if="hasLabelContent" class="input-checkbox-radio-options-button-label" :for="id">
+    <label v-if="slots.labelContent" class="input-checkbox-radio-options-button-label" :for="id">
       <slot name="labelContent"></slot>
     </label>
     <label v-else class="input-checkbox-radio-options-button-label" :for="id">{{ label }}</label>
@@ -18,11 +37,11 @@
 </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<'checkbox' | 'radio'>,
+    type: String as PropType<"checkbox" | "radio">,
     required: true,
   },
   id: {
@@ -55,16 +74,16 @@ 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)
     },
   },
   optionsLayout: {
     type: String as PropType<string>,
-    default: 'equal-widths',
+    default: "equal-widths",
     validator(value: string) {
-      return propValidators.optionsLayout.includes(value);
+      return propValidators.optionsLayout.includes(value)
     },
   },
   styleClassPassthrough: {
@@ -73,16 +92,16 @@ 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)
     },
   },
   direction: {
-    type: String as PropType<'row' | 'row-reverse'>,
-    default: 'row',
+    type: String as PropType<"row" | "row-reverse">,
+    default: "row",
     validator(value: string) {
-      return ['row', 'row-reverse'].includes(value);
+      return ["row", "row-reverse"].includes(value)
     },
   },
   ariaDescribedby: {
@@ -93,19 +112,18 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-});
+})
 
-const slots = useSlots();
-const hasLabelContent = computed(() => slots.labelContent !== undefined);
-const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const slots = useSlots()
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 
-const modelValue = defineModel();
+const modelValue = defineModel()
 
 const formTheme = computed(() => {
-  return props.fieldHasError ? 'error' : props.theme;
-});
+  return props.fieldHasError ? "error" : props.theme
+})
 
-const flexDirection = ref(props.direction);
+const flexDirection = ref(props.direction)
 </script>
 
 <style lang="css">

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

@@ -1,12 +1,29 @@
 <template>
-  <div class="input-checkbox-radio-with-label" :data-size="size" :class="[elementClasses, optionsLayout, { error: fieldHasError }]">
-    <InputCheckboxRadioCore :type :id :name :required v-model="modelValue" :size :trueValue :falseValue :fieldHasError :theme :ariaDescribedby :displayAsDisc>
+  <div
+    class="input-checkbox-radio-with-label"
+    :data-size="size"
+    :class="[elementClasses, optionsLayout, { error: fieldHasError }]"
+  >
+    <InputCheckboxRadioCore
+      :type
+      :id
+      :name
+      :required
+      v-model="modelValue"
+      :size
+      :trueValue
+      :falseValue
+      :fieldHasError
+      :theme
+      :ariaDescribedby
+      :displayAsDisc
+    >
       <template #checkedIcon>
         <slot name="checkedIcon"></slot>
       </template>
     </InputCheckboxRadioCore>
 
-    <label v-if="hasLabelContent" class="input-checkbox-radio-label body-normal" :for="id">
+    <label v-if="slots.labelContent" class="input-checkbox-radio-label body-normal" :for="id">
       <slot name="labelContent"></slot>
     </label>
     <label v-else class="input-checkbox-radio-label body-normal-semibold" :for="id">{{ label }}</label>
@@ -14,11 +31,11 @@
 </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<'checkbox' | 'radio'>,
+    type: String as PropType<"checkbox" | "radio">,
     required: true,
   },
   name: {
@@ -47,16 +64,16 @@ 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)
     },
   },
   optionsLayout: {
     type: String as PropType<string>,
-    default: 'equal-widths',
+    default: "equal-widths",
     validator(value: string) {
-      return propValidators.optionsLayout.includes(value);
+      return propValidators.optionsLayout.includes(value)
     },
   },
   styleClassPassthrough: {
@@ -65,9 +82,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: {
@@ -78,14 +95,13 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
-});
+})
 
-const slots = useSlots();
-const hasLabelContent = computed(() => slots.labelContent !== undefined);
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const slots = useSlots()
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 
-const modelValue = defineModel();
-const id = useId();
+const modelValue = defineModel()
+const id = useId()
 </script>
 
 <style lang="css">

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

@@ -1,12 +1,12 @@
 <template>
   <label :for="id" class="input-label" :class="[elementClasses, inputVariant]">
-    <slot v-if="hasHtmlLabel" name="htmlLabel"></slot>
-    <slot v-if="hasTextLabel" name="textLabel"></slot>
+    <slot v-if="slots.htmlLabel" name="htmlLabel"></slot>
+    <slot v-if="slots.textLabel" name="textLabel"></slot>
   </label>
 </template>
 
 <script setup lang="ts">
-import propValidators from '../c12/prop-validators';
+import propValidators from "../c12/prop-validators"
 
 const props = defineProps({
   id: {
@@ -27,25 +27,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)
     },
   },
   inputVariant: {
     type: String as PropType<string>,
-    default: 'default',
+    default: "default",
     validator(value: string) {
-      return propValidators.inputVariant.includes(value);
+      return propValidators.inputVariant.includes(value)
     },
   },
-});
+})
 
-const slots = useSlots();
-const hasHtmlLabel = computed(() => slots.htmlLabel !== undefined);
-const hasTextLabel = computed(() => slots.textLabel !== undefined);
+const slots = useSlots()
 
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 </script>
 
 <style lang="css">

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

@@ -1,6 +1,6 @@
 <template>
   <div class="input-number-wrapper" :data-theme="formTheme" :data-size="size">
-    <div v-if="hasLeftContent" class="slot left">
+    <div v-if="slots.left" class="slot left">
       <slot name="left"></slot>
     </div>
 
@@ -13,21 +13,27 @@
         :min
         :max
         :step
-        :class="[elementClasses, 'input-number-core', `input-number--${theme}`, `input-number--${size}`, `input-number--${weight}`]"
+        :class="[
+          elementClasses,
+          'input-number-core',
+          `input-number--${theme}`,
+          `input-number--${size}`,
+          `input-number--${weight}`,
+        ]"
         v-model="modelValue"
         ref="inputField"
         inputmode="numeric"
         pattern="[0-9]+"
       />
     </div>
-    <div v-if="hasRightContent" class="slot right">
+    <div v-if="slots.right" class="slot right">
       <slot name="right"></slot>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import propValidators from '../c12/prop-validators';
+import propValidators from "../c12/prop-validators"
 
 const props = defineProps({
   id: {
@@ -52,7 +58,7 @@ const props = defineProps({
   },
   placeholder: {
     type: String,
-    default: '',
+    default: "",
   },
   required: {
     type: Boolean,
@@ -60,23 +66,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: {
@@ -87,20 +93,18 @@ const props = defineProps({
     type: Array as PropType<string[]>,
     default: () => [],
   },
-});
+})
 
-const slots = useSlots();
-const hasLeftContent = computed(() => slots.left !== undefined);
-const hasRightContent = 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<number | readonly number[]>();
+const modelValue = defineModel<number | readonly number[]>()
 
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
-const minLength = computed(() => `${props.max.toString().length + 1}em`);
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
+const minLength = computed(() => `${props.max.toString().length + 1}em`)
 </script>
 
 <style lang="css">
@@ -196,8 +200,8 @@ const minLength = computed(() => `${props.max.toString().length + 1}em`);
   }
 }
 
-input[type='number']::-webkit-inner-spin-button,
-input[type='number']::-webkit-outer-spin-button {
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }

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

@@ -1,15 +1,41 @@
 <template>
-  <div class="input-number-with-label" :data-theme="formTheme" :data-size="size" :class="[elementClasses, `theme-${theme}`, { error: fieldHasError }]">
-    <InputLabel :for="id" :id :theme :name input-variant="normal" :field-has-error :style-class-passthrough="['input-number-label', 'body-normal-bold']">
+  <div
+    class="input-number-with-label"
+    :data-theme="formTheme"
+    :data-size="size"
+    :class="[elementClasses, `theme-${theme}`, { error: fieldHasError }]"
+  >
+    <InputLabel
+      :for="id"
+      :id
+      :theme
+      :name
+      input-variant="normal"
+      :field-has-error
+      :style-class-passthrough="['input-number-label', 'body-normal-bold']"
+    >
       <template #textLabel>{{ label }}</template>
     </InputLabel>
 
-    <template v-if="hasDescription">
+    <template v-if="slots.description">
       <slot name="description"></slot>
     </template>
 
-    <InputNumberCore v-model="modelValue" :id :name :min :max :step :theme :required :size :weight :fieldHasError :styleClassPassthrough>
-      <template v-if="hasLeftContent" #left>
+    <InputNumberCore
+      v-model="modelValue"
+      :id
+      :name
+      :min
+      :max
+      :step
+      :theme
+      :required
+      :size
+      :weight
+      :fieldHasError
+      :styleClassPassthrough
+    >
+      <template v-if="slots.left" #left>
         <InputButtonCore
           type="button"
           @click.stop.prevent="updateValue(-step, Number(modelValue) > min)"
@@ -24,7 +50,7 @@
           </template>
         </InputButtonCore>
       </template>
-      <template v-if="hasRightContent" #right>
+      <template v-if="slots.right" #right>
         <InputButtonCore
           type="button"
           @click.stop.prevent="updateValue(step, Number(modelValue) < max)"
@@ -45,7 +71,7 @@
 </template>
 
 <script setup lang="ts">
-import propValidators from '../../c12/prop-validators';
+import propValidators from "../../c12/prop-validators"
 
 const props = defineProps({
   name: {
@@ -70,7 +96,7 @@ const props = defineProps({
   },
   placeholder: {
     type: String,
-    default: '',
+    default: "",
   },
   errorMessage: {
     type: [Object, String],
@@ -86,51 +112,48 @@ 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)
     },
   },
   styleClassPassthrough: {
     type: Array as PropType<string[]>,
     default: () => [],
   },
-});
+})
 
-const slots = useSlots();
-const hasDescription = computed(() => slots.description !== undefined);
-const hasLeftContent = computed(() => slots.left !== undefined);
-const hasRightContent = computed(() => slots.right !== undefined);
-const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const slots = useSlots()
+const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 
-const id = useId();
+const id = useId()
 const formTheme = computed(() => {
-  return props.fieldHasError ? 'error' : props.theme;
-});
+  return props.fieldHasError ? "error" : props.theme
+})
 
-const modelValue = defineModel<number | readonly number[]>();
+const modelValue = defineModel<number | readonly number[]>()
 
 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(['has-left-button', 'has-right-button']);
+updateElementClasses(["has-left-button", "has-right-button"])
 </script>
 
 <style lang="css">

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

@@ -1,5 +1,13 @@
 <template>
-  <FormFieldset :id :name :legend :fieldHasError :required :data-testid :styleClassPassthrough="['multiple-radiobuttons-fieldset']">
+  <FormFieldset
+    :id
+    :name
+    :legend
+    :fieldHasError
+    :required
+    :data-testid
+    :styleClassPassthrough="['multiple-radiobuttons-fieldset']"
+  >
     <template #description>
       <slot name="description"></slot>
     </template>
@@ -59,13 +67,13 @@
 </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({
   dataTestid: {
     type: String,
-    default: 'multiple-radio-buttons',
+    default: "multiple-radio-buttons",
   },
   name: {
     type: String,
@@ -81,7 +89,7 @@ const props = defineProps({
   },
   placeholder: {
     type: String,
-    default: '',
+    default: "",
   },
   isButton: {
     type: Boolean,
@@ -105,16 +113,16 @@ 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)
     },
   },
   optionsLayout: {
     type: String as PropType<string>,
-    default: 'equal-widths',
+    default: "equal-widths",
     validator(value: string) {
-      return propValidators.optionsLayout.includes(value);
+      return propValidators.optionsLayout.includes(value)
     },
   },
   equalCols: {
@@ -127,33 +135,31 @@ 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)
     },
   },
   direction: {
-    type: String as PropType<'row' | 'row-reverse'>,
-    default: 'row',
+    type: String as PropType<"row" | "row-reverse">,
+    default: "row",
     validator(value: string) {
-      return ['row', 'row-reverse'].includes(value);
+      return ["row", "row-reverse"].includes(value)
     },
   },
-});
+})
 
-const slots = useSlots();
-const hasDescriptionSlot = computed(() => slots.description !== undefined);
-const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const slots = useSlots()
 
-const id = `${props.name}-input-${useId()}`;
-const errorId = `${name}-error-message`;
+const id = `${props.name}-input-${useId()}`
+const errorId = `${name}-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 fieldData = defineModel('fieldData') as Ref<IFormMultipleOptions>;
+const modelValue = defineModel()
+const fieldData = defineModel("fieldData") as Ref<IFormMultipleOptions>
 </script>
 
 <style lang="css">