srcdev-nuxt-forms 6.1.0 → 6.1.1

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

@@ -1,18 +1,26 @@
 <template>
   <div class="input-range-with-label" :data-theme="formTheme" :class="[elementClasses, { error: fieldHasError }]">
-    <InputLabel :for="id" :id :theme :name input-variant="normal" :field-has-error :style-class-passthrough="['input-number-label', 'body-normal-bold']">
+    <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>
 
     <InputRangeCore v-model="modelValue" :id :name :min :max :step :theme :required :size :weight :fieldHasError>
-      <template v-if="hasDataList" #datalist>
+      <template v-if="slots.datalist" #datalist>
         <slot name="datalist"></slot>
       </template>
-      <template v-if="hasLeftContent" #left>
+      <template v-if="slots.left" #left>
         <InputButtonCore
           type="button"
           @click.stop.prevent="updateRange(-step, Number(modelValue) > min)"
@@ -27,7 +35,7 @@
           </template>
         </InputButtonCore>
       </template>
-      <template v-if="hasRightContent" #right>
+      <template v-if="slots.right" #right>
         <InputButtonCore
           type="button"
           @click.stop.prevent="updateRange(step, Number(modelValue) < max)"
@@ -48,9 +56,22 @@
 </template>
 
 <script setup lang="ts">
-import propValidators from '../../c12/prop-validators';
+import propValidators from "../../c12/prop-validators"
 
-const { name, label, required, min, max, step, theme, size, weight, styleClassPassthrough, errorMessage, fieldHasError } = defineProps({
+const {
+  name,
+  label,
+  required,
+  min,
+  max,
+  step,
+  theme,
+  size,
+  weight,
+  styleClassPassthrough,
+  errorMessage,
+  fieldHasError,
+} = defineProps({
   name: {
     type: String,
     required: true,
@@ -73,7 +94,7 @@ const { name, label, required, min, max, step, theme, size, weight, styleClassPa
   },
   placeholder: {
     type: String,
-    default: '',
+    default: "",
   },
   errorMessage: {
     type: [Object, String],
@@ -89,23 +110,23 @@ const { name, label, required, min, max, step, theme, size, weight, styleClassPa
   },
   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: {
@@ -114,29 +135,25 @@ const { name, label, required, min, max, step, theme, size, weight, styleClassPa
   },
   deepCssClassPassthrough: {
     type: String,
-    default: '',
+    default: "",
   },
-});
+})
 
-const slots = useSlots();
-const hasDescription = computed(() => slots.description !== undefined);
-const hasDataList = computed(() => slots.datalist !== undefined);
-const hasLeftContent = computed(() => slots.left !== undefined);
-const hasRightContent = computed(() => slots.right !== undefined);
-const { elementClasses, updateElementClasses } = useStyleClassPassthrough(styleClassPassthrough);
+const slots = useSlots()
+const { elementClasses } = useStyleClassPassthrough(styleClassPassthrough)
 
-const id = useId();
+const id = useId()
 const formTheme = computed(() => {
-  return fieldHasError ? 'error' : theme;
-});
+  return fieldHasError ? "error" : theme
+})
 
-const modelValue = defineModel<number | readonly number[]>();
+const modelValue = defineModel<number | readonly number[]>()
 
 const updateRange = (step: number, withinRangeLimit: boolean) => {
   if (withinRangeLimit) {
-    modelValue.value = (Number(modelValue.value) + step) as number;
+    modelValue.value = (Number(modelValue.value) + step) as number
   }
-};
+}
 </script>
 
 <style lang="css">

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

@@ -1,17 +1,31 @@
 <template>
   <div class="input-range-fancy-with-label" :data-theme="formTheme" :class="[elementClasses, { error: fieldHasError }]">
     <label class="input-range-fancy-label body-normal-bold" :for="id">{{ label }}</label>
-    <template v-if="hasDescription">
+    <template v-if="slots.description">
       <slot name="description"></slot>
     </template>
 
-    <InputRangeFancyCore v-model="modelValue" :id :name :rangeLowLabel :rangeHighLabel :min :max :step :theme :required :size :weight :fieldHasError />
+    <InputRangeFancyCore
+      v-model="modelValue"
+      :id
+      :name
+      :rangeLowLabel
+      :rangeHighLabel
+      :min
+      :max
+      :step
+      :theme
+      :required
+      :size
+      :weight
+      :fieldHasError
+    />
     <InputError :errorMessage :showError="fieldHasError" :id :isDetached="true" :styleClassPassthrough="['mbe-20']" />
   </div>
 </template>
 
 <script setup lang="ts">
-import propValidators from '../c12/prop-validators';
+import propValidators from "../c12/prop-validators"
 
 const props = defineProps({
   id: {
@@ -48,7 +62,7 @@ const props = defineProps({
   },
   placeholder: {
     type: String,
-    default: '',
+    default: "",
   },
   errorMessage: {
     type: [Object, String],
@@ -64,23 +78,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)
     },
   },
   styleClassPassthrough: {
@@ -89,19 +103,18 @@ const props = defineProps({
   },
   deepCssClassPassthrough: {
     type: String,
-    default: '',
+    default: "",
   },
-});
+})
 
-const slots = useSlots();
-const hasDescription = computed(() => slots.description !== undefined);
-const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+const slots = useSlots()
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 
 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[]>()
 </script>
 
 <style lang="css">

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

@@ -1,11 +1,25 @@
 <template>
   <div>
-    <div class="input-select-with-label" :class="[inputVariant, { dirty: isDirty }, { active: isActive }, { error: fieldHasError }]" :data-testid :data-theme="formTheme" :data-size="size">
-      <InputLabel :for="id" :id :theme :name :input-variant :field-has-error :style-class-passthrough="['input-select-label']">
+    <div
+      class="input-select-with-label"
+      :class="[inputVariant, { dirty: isDirty }, { active: isActive }, { error: fieldHasError }]"
+      :data-testid
+      :data-theme="formTheme"
+      :data-size="size"
+    >
+      <InputLabel
+        :for="id"
+        :id
+        :theme
+        :name
+        :input-variant
+        :field-has-error
+        :style-class-passthrough="['input-select-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>
 
@@ -26,22 +40,28 @@
         :inputVariant
       />
 
-      <InputError :errorMessage="errorMessage" :showError="fieldHasError" :id="errorId" :isDetached="false" :inputVariant />
+      <InputError
+        :errorMessage="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 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: 'input-select-with-label',
+    default: "input-select-with-label",
   },
   name: {
     type: String,
@@ -53,7 +73,7 @@ const props = defineProps({
   },
   placeholder: {
     type: String,
-    default: '',
+    default: "",
   },
   errorMessage: {
     type: [Object, String],
@@ -69,9 +89,9 @@ 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: {
@@ -80,44 +100,35 @@ 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: '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 { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+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 = `${name}-error-message`;
+const id = `${props.name}-${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({ 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">
-.input-select-with-label {
-  .input-select-label {
-  }
-}
-</style>

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

@@ -9,11 +9,11 @@
       { dirty: isDirty },
       { active: isActive },
       { error: fieldHasError },
-      { 'has-left-slot': hasLeftSlot },
-      { 'has-right-slot': hasRightSlot },
+      { '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>
 
@@ -35,7 +35,7 @@
       @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>
@@ -115,8 +115,6 @@ const props = defineProps({
 })
 
 const slots = useSlots()
-const hasLeftSlot = computed(() => slots.left !== undefined)
-const hasRightSlot = computed(() => slots.right !== undefined)
 
 const formTheme = computed(() => {
   return props.fieldHasError ? "error" : props.theme

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