srcdev-nuxt-forms 4.2.0 → 5.0.1

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

@@ -0,0 +1,60 @@
+<template>
+  <label :for="id" class="input-label" :class="[elementClasses]">
+    <slot v-if="hasHtmlLabel" name="htmlLabel"></slot>
+    <slot v-if="hasTextLabel" name="textLabel"></slot>
+  </label>
+</template>
+
+<script setup lang="ts">
+import propValidators from '../c12/prop-validators';
+
+const props = defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  fieldHasError: {
+    type: Boolean,
+    default: false,
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+  theme: {
+    type: String as PropType<string>,
+    default: 'primary',
+    validator(value: string) {
+      return propValidators.theme.includes(value);
+    },
+  },
+  inputVariant: {
+    type: String as PropType<string>,
+    default: 'normal',
+    validator(value: string) {
+      return propValidators.inputVariant.includes(value);
+    },
+  },
+});
+
+const slots = useSlots();
+const hasHtmlLabel = computed(() => slots.htmlLabel !== undefined);
+const hasTextLabel = computed(() => slots.textLabel !== undefined);
+
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+</script>
+
+<style lang="css">
+.input-label {
+  color: var(--input-label-text-color);
+  margin-block: var(--input-label-text-margin-block);
+  font-size: var(--input-label-text-size);
+  font-weight: var(--input-label-text-weight);
+  line-height: var(--input-label-text-line-height);
+  display: block;
+}
+</style>

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

@@ -1,61 +1,61 @@
 <template>
-  <fieldset :aria-required="required" :aria-invalid="fieldHasError" role="radiogroup" class="multiple-radiobuttons-fieldset" :class="[elementClasses, { error: fieldHasError }]" :data-testid>
-    <legend :class="[{ 'has-description': hasDescriptionSlot }]">{{ legend }}</legend>
-
-    <div v-if="hasDescriptionSlot" :id="`${name}-description`">
+  <FormFieldset :id :name :legend :fieldHasError :required :data-testid :styleClassPassthrough="['multiple-radiobuttons-fieldset']">
+    <template #description>
       <slot name="description"></slot>
-    </div>
+    </template>
 
-    <div class="multiple-radiobuttons-items" :class="[optionsLayout]">
-      <template v-for="item in fieldData.data" :key="item.id">
-        <InputCheckboxRadioButton
-          v-if="isButton"
-          type="radio"
-          :id="`${name}-${item.value}`"
-          :name="`${name}-${item.name}`"
-          :required
-          :label="item.label"
-          :fieldHasError
-          v-model="modelValue"
-          :true-value="item.value"
-          :size
-          :optionsLayout
-          :theme
-          :direction
-          :ariaDescribedby
-        >
-          <template #checkedIcon>
-            <slot name="checkedIcon"></slot>
-          </template>
-          <template #itemIcon>
-            <slot name="itemIcon">
-              <Icon name="material-symbols:add-2" class="icon" />
-            </slot>
-          </template>
-        </InputCheckboxRadioButton>
-        <InputCheckboxRadioWithLabel
-          v-else
-          type="radio"
-          :id="`${name}-${item.value}`"
-          :name="`${name}-${item.name}`"
-          :required
-          :label="item.label"
-          :fieldHasError
-          v-model="modelValue"
-          :true-value="item.value"
-          :size
-          :optionsLayout
-          :theme
-          :ariaDescribedby
-        >
-          <template #checkedIcon>
-            <slot name="checkedIcon"></slot>
-          </template>
-        </InputCheckboxRadioWithLabel>
-      </template>
-    </div>
-    <InputError :errorMessage="errorMessage" :showError="fieldHasError" :id="errorId" :isDetached="true" />
-  </fieldset>
+    <template #content>
+      <div class="multiple-radiobuttons-items" :class="[optionsLayout]">
+        <template v-for="item in fieldData.data" :key="item.id">
+          <InputCheckboxRadioButton
+            v-if="isButton"
+            type="radio"
+            :id="`${name}-${item.value}`"
+            :name="`${name}-${item.name}`"
+            :required
+            :label="item.label"
+            :fieldHasError
+            v-model="modelValue"
+            :true-value="item.value"
+            :size
+            :optionsLayout
+            :theme
+            :direction
+            :ariaDescribedby
+          >
+            <template #checkedIcon>
+              <slot name="checkedIcon"></slot>
+            </template>
+            <template #itemIcon>
+              <slot name="itemIcon">
+                <Icon name="material-symbols:add-2" class="icon" />
+              </slot>
+            </template>
+          </InputCheckboxRadioButton>
+          <InputCheckboxRadioWithLabel
+            v-else
+            type="radio"
+            :id="`${name}-${item.value}`"
+            :name="`${name}-${item.name}`"
+            :required
+            :label="item.label"
+            :fieldHasError
+            v-model="modelValue"
+            :true-value="item.value"
+            :size
+            :optionsLayout
+            :theme
+            :ariaDescribedby
+          >
+            <template #checkedIcon>
+              <slot name="checkedIcon"></slot>
+            </template>
+          </InputCheckboxRadioWithLabel>
+        </template>
+      </div>
+      <InputError :errorMessage="errorMessage" :showError="fieldHasError" :id="errorId" :isDetached="true" />
+    </template>
+  </FormFieldset>
 </template>
 
 <script setup lang="ts">
@@ -145,7 +145,7 @@ const slots = useSlots();
 const hasDescriptionSlot = computed(() => slots.description !== undefined);
 const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
 
-const id = useId();
+const id = `${props.name}-input-${useId()}`;
 const errorId = `${name}-error-message`;
 const ariaDescribedby = computed(() => {
   const ariaDescribedbyId = hasDescriptionSlot.value ? `${id}-description` : undefined;
@@ -157,28 +157,6 @@ const fieldData = defineModel('fieldData') as Ref<IFormMultipleOptions>;
 </script>
 
 <style lang="css">
-.multiple-radiobuttons-fieldset {
-  margin: 0;
-  padding: 0;
-  border: 0;
-
-  legend {
-    font-family: var(--font-family);
-    font-size: 1.6rem;
-    font-weight: 500;
-
-    &.has-description {
-      margin-bottom: 0;
-    }
-  }
-
-  .label-description {
-    font-family: var(--font-family);
-    font-size: 1.6rem;
-    margin-top: 1.2rem;
-  }
-}
-
 .multiple-radiobuttons-items {
   display: flex;
   gap: 1.2rem;

package/components/forms/input-select/InputSelectCore.vue

@@ -0,0 +1,164 @@
+<template>
+  <div class="input-select-wrapper" :data-form-theme="formTheme" :data-size="size" :class="[inputVariant, size, { dirty: isDirty }, { active: isActive }, { error: fieldHasError }]">
+    <select v-model="modelValue" class="input-select-core" :name :id>
+      <option v-if="placeholder" value="" readonly :selected="!modelValue" class="input-select-core-option placeholder">{{ placeholder }}</option>
+      <option v-for="item in fieldData.data" :key="item.id" :value="item.value" :selected="item.value === modelValue" class="input-select-core-option">
+        <Icon :name="item.icon" class="input-select-core-option-icon" />
+        {{ item.label }}
+      </option>
+    </select>
+  </div>
+</template>
+
+<script setup lang="ts">
+import propValidators from '../c12/prop-validators';
+import type { IFormMultipleOptions } from '@/types/types.forms';
+
+const props = defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  required: {
+    type: Boolean,
+    default: false,
+  },
+  fieldHasError: {
+    type: Boolean,
+    default: false,
+  },
+  size: {
+    type: String as PropType<string>,
+    default: 'medium',
+    validator(value: string) {
+      return propValidators.size.includes(value);
+    },
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+  theme: {
+    type: String as PropType<string>,
+    default: 'primary',
+    validator(value: string) {
+      return propValidators.theme.includes(value);
+    },
+  },
+  inputVariant: {
+    type: String as PropType<string>,
+    default: 'normal',
+    validator(value: string) {
+      return propValidators.inputVariant.includes(value);
+    },
+  },
+});
+
+const formTheme = computed(() => {
+  return props.fieldHasError ? 'error' : props.theme;
+});
+
+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-wrapper {
+  background-color: var(--element-decorator-background-color);
+  outline: var(--element-decorator-outline-default);
+
+  border-top-left-radius: var(--element-decorator-border-top-left-radius);
+  border-top-right-radius: var(--element-decorator-border-top-right-radius);
+  border-bottom-left-radius: var(--element-decorator-border-bottom-left-radius);
+  border-bottom-right-radius: var(--element-decorator-border-bottom-right-radius);
+
+  border-top: var(--element-decorator-border-top-default);
+  border-right: var(--element-decorator-border-right-default);
+  border-bottom: var(--element-decorator-border-bottom-default);
+  border-left: var(--element-decorator-border-left-default);
+
+  .input-select-core {
+    appearance: none;
+    background-color: transparent;
+
+    /* For legacy support - eg, Safari */
+    /* &::after {
+      content: '';
+      width: 0.8em;
+      height: 0.5em;
+      background-color: var(--theme-form-input-border);
+      clip-path: polygon(100% 0%, 0 0%, 50% 100%);
+    } */
+
+    /* Start modern Select CSS */
+    &,
+    &::picker(select) {
+      appearance: base-select;
+    }
+
+    &::picker(select) {
+      transition: display allow-discrete var(--input-select-animation-duration), opacity var(--input-select-animation-duration), overlay var(--input-select-animation-duration) allow-discrete;
+    }
+
+    &:not(:open)::picker(select) {
+      opacity: 0;
+    }
+
+    &:open::picker(select) {
+      opacity: 1;
+      border: var(--form-element-border-width) solid var(--theme-form-input-border);
+      outline: var(--form-element-outline-width) solid var(--_input-select-outline-color);
+
+      @starting-style {
+        opacity: 0;
+      }
+    }
+
+    border: none;
+    outline: none;
+    border-radius: 0;
+    width: 100%;
+
+    &:hover {
+      /* background-color: lab(89.6502 -0.829279 -2.45323 / 0.1); */
+      background-color: hsl(from var(--theme-form-input-border) h s 20%);
+    }
+
+    /* END modern Select CSS */
+
+    /* color: var(--_input-text-core-color); */
+    font-family: var(--font-family);
+    font-size: var(--form-element-font-size);
+    line-height: var(--form-element-line-height);
+    padding-block: var(--input-select-padding-block);
+    padding-inline: var(--input-select-padding-inline);
+
+    .input-select-core-option {
+      padding-block: var(--input-select-option-padding-block);
+      padding-inline: var(--input-select-option-padding-inline);
+      gap: var(--input-select-option-gap);
+      transition: var(--input-select-option-transition);
+
+      &:hover {
+        background-color: var(--input-select-option-background-color-hover);
+      }
+
+      .input-select-core-option-icon {
+        display: inline-block;
+        width: var(--input-select-option-icon-size);
+        height: var(--input-select-option-icon-size);
+      }
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,123 @@
+<template>
+  <div>
+    <div class="input-select-with-label" :class="[inputVariant, { dirty: isDirty }, { active: isActive }, { error: fieldHasError }]" :data-testid :data-form-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`">
+        <slot name="description"></slot>
+      </div>
+
+      <InputSelectCore
+        v-model="modelValue"
+        v-model:fieldData="fieldData"
+        v-model:isDirty="isDirty"
+        v-model:isActive="isActive"
+        :id
+        :name
+        :placeholder
+        :fieldHasError
+        :required
+        :styleClassPassthrough
+        :theme="formTheme"
+        :ariaDescribedby="ariaDescribedby"
+        :size
+        :inputVariant
+      />
+
+      <InputError :errorMessage="errorMessage" :showError="fieldHasError" :id="errorId" :isDetached="false" :inputVariant />
+    </div>
+    <div v-if="inputVariant !== 'normal' && hasDescriptionSlot" :id="`${id}-description`">
+      <slot name="description"></slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import propValidators from '../../c12/prop-validators';
+import type { IFormMultipleOptions } from '@/types/types.forms';
+
+const props = defineProps({
+  dataTestid: {
+    type: String,
+    default: 'input-select-with-label',
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  label: {
+    type: String,
+    required: true,
+  },
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  errorMessage: {
+    type: [Object, String],
+    required: true,
+  },
+  required: {
+    type: Boolean,
+    default: false,
+  },
+  fieldHasError: {
+    type: Boolean,
+    default: false,
+  },
+  size: {
+    type: String as PropType<string>,
+    default: 'medium',
+    validator(value: string) {
+      return propValidators.size.includes(value);
+    },
+  },
+  styleClassPassthrough: {
+    type: Array as PropType<string[]>,
+    default: () => [],
+  },
+  theme: {
+    type: String as PropType<string>,
+    default: 'primary',
+    validator(value: string) {
+      return propValidators.theme.includes(value);
+    },
+  },
+  inputVariant: {
+    type: String as PropType<string>,
+    default: 'normal',
+    validator(value: string) {
+      return propValidators.inputVariant.includes(value);
+    },
+  },
+});
+
+const slots = useSlots();
+const hasDescriptionSlot = computed(() => slots.description !== undefined);
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+const formTheme = computed(() => {
+  return props.fieldHasError ? 'error' : props.theme;
+});
+
+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 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/components/forms/input-text/InputTextCore.vue

@@ -3,6 +3,7 @@
     class="input-text-wrapper"
     :data-form-theme="formTheme"
     :data-size="size"
+    :data-inputmode="inputmode"
     :class="[inputVariant, { dirty: isDirty }, { active: isActive }, { error: fieldHasError }, { 'has-left-slot': hasLeftSlot }, { 'has-right-slot': hasRightSlot }]"
   >
     <span v-if="hasLeftSlot" class="slot left-slot">
@@ -93,7 +94,7 @@ const props = defineProps({
   },
   size: {
     type: String as PropType<string>,
-    default: 'normal',
+    default: 'default',
     validator(value: string) {
       return propValidators.size.includes(value);
     },
@@ -157,6 +158,64 @@ onMounted(() => {
 
 <style lang="css">
 .input-text-wrapper {
+  background-color: var(--element-decorator-background-color);
+  outline: var(--element-decorator-outline-default);
+
+  border-top-left-radius: var(--element-decorator-border-top-left-radius);
+  border-top-right-radius: var(--element-decorator-border-top-right-radius);
+  border-bottom-left-radius: var(--element-decorator-border-bottom-left-radius);
+  border-bottom-right-radius: var(--element-decorator-border-bottom-right-radius);
+
+  border-top: var(--element-decorator-border-top-default);
+  border-right: var(--element-decorator-border-right-default);
+  border-bottom: var(--element-decorator-border-bottom-default);
+  border-left: var(--element-decorator-border-left-default);
+
+  padding-inline: var(--element-decorator-padding-inline);
+
+  &:hover {
+    /* background-color: lab(89.6502 -0.829279 -2.45323 / 0.1); */
+    background-color: hsl(from var(--theme-form-input-border) h s 20%);
+  }
+
+  display: flex;
+  align-items: center;
+  gap: 12px;
+
+  .slot {
+    display: flex;
+    place-items: center;
+    background-clip: padding-box;
+
+    &.left-slot {
+      /* background-color: green; */
+    }
+    &.right-slot {
+      /* background-color: orange; */
+    }
+  }
+
+  .input-text-core {
+    all: unset;
+    flex-grow: 1;
+
+    font-family: var(--font-family);
+    font-size: var(--form-element-font-size);
+    line-height: var(--form-element-line-height);
+    padding-block: var(--input-element-padding-block);
+    padding-inline: var(--input-element-padding-inline);
+
+    &::placeholder {
+      color: var(--input-placeholder-color);
+      font-size: var(--input-placeholder-font-size);
+      font-style: var(--input-placeholder-font-style);
+      line-height: var(--input-placeholder-line-height);
+      font-weight: var(--input-placeholder-font-weight);
+    }
+  }
+}
+
+.input-text-wrapper-XXX {
   --_focus-box-shadow: var(--box-shadow-off);
   --_input-text-core-color: var(--theme-form-input-text-color-normal);
 

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

@@ -117,7 +117,7 @@ const props = defineProps({
   },
   size: {
     type: String as PropType<string>,
-    default: 'normal',
+    default: 'default',
     validator(value: string) {
       return propValidators.size.includes(value);
     },

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

@@ -1,7 +1,9 @@
 <template>
   <div>
     <div class="input-text-with-label" :data-form-theme="formTheme" :class="[elementClasses, inputVariant, { dirty: isDirty }, { active: isActive }]">
-      <label :for="id" class="input-text-label">{{ label }}</label>
+      <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`">
         <slot name="description"></slot>
@@ -99,7 +101,7 @@ const props = defineProps({
   },
   size: {
     type: String as PropType<string>,
-    default: 'normal',
+    default: 'default',
     validator(value: string) {
       return propValidators.size.includes(value);
     },
@@ -122,7 +124,7 @@ const formTheme = computed(() => {
   return props.fieldHasError ? 'error' : props.theme;
 });
 
-const id = useId();
+const id = `${props.name}-${useId()}`;
 const errorId = `${id}-error-message`;
 const ariaDescribedby = computed(() => {
   const ariaDescribedbyId = hasDescriptionSlot.value ? `${id}-description` : undefined;
@@ -156,7 +158,7 @@ watch(
 </script>
 
 <style lang="css">
-.input-text-with-label {
+.input-text-with-label-XXX {
   --_input-text-with-label-margin-block-start: 0;
   --_input-text-with-label-background-color: transparent;
 
@@ -244,7 +246,7 @@ watch(
   /* overflow: clip; */
 
   &.underlined {
-    border-bottom: var(--_input-text-wrapper-border-underlined);
+    /* border-bottom: var(--_input-text-wrapper-border-underlined); */
     border-top-left-radius: var(--_input-text-wrapper-underlined-border-radius-top-left);
     border-top-right-radius: var(--_input-text-wrapper-underlined-border-radius-top-right);
     border-bottom-left-radius: var(--_input-text-wrapper-underlined-border-radius-bottom-left);
@@ -266,17 +268,17 @@ watch(
 
     margin-block-start: var(--_input-text-with-label-margin-block-start);
 
-    .input-text-label {
+    /* .input-text-label {
       grid-area: underlined-text-stack;
       z-index: 2;
-    }
+    } */
     .input-text-wrapper {
       grid-area: underlined-text-stack;
       z-index: 1;
     }
   }
 
-  .input-text-label {
+  /* .input-text-label {
     display: inline-block;
     color: var(--_label-text-color);
     background-color: var(--_label-text-background-color);
@@ -293,6 +295,6 @@ watch(
       display: flex;
       align-items: center;
     }
-  }
+  } */
 }
 </style>