srcdev-nuxt-forms 5.1.0 → 6.0.0

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

@@ -0,0 +1,341 @@
+<template>
+  <div
+    class="input-text-wrapper"
+    :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 }]"
+  >
+    <span v-if="hasLeftSlot" class="slot left-slot">
+      <slot name="left"></slot>
+    </span>
+
+    <input
+      :type
+      :placeholder
+      :id
+      :name
+      :required
+      :maxlength
+      :class="['input-text-core', elementClasses, { dirty: isDirty }, { active: isActive }]"
+      v-model="modelValue"
+      ref="inputField"
+      :aria-invalid="fieldHasError"
+      :aria-describedby
+      :pattern="inputPattern"
+      :inputmode
+      @focusin="updateFocus(true)"
+      @focusout="updateFocus(false)"
+    />
+
+    <span v-if="hasRightSlot" class="slot right-slot">
+      <slot name="right"></slot>
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import propValidators from '../c12/prop-validators';
+
+const props = defineProps({
+  type: {
+    type: String as PropType<'text' | 'email' | 'password' | 'number' | 'tel' | 'url'>,
+    // type: String,
+    default: 'text',
+    validator(value: string) {
+      return propValidators.inputTypesText.includes(value);
+    },
+  },
+  inputmode: {
+    type: String as PropType<'text' | 'email' | 'tel' | 'url' | 'search' | 'numeric' | 'none' | 'decimal'>,
+    default: 'text',
+    validator(value: string) {
+      return propValidators.inputMode.includes(value);
+    },
+  },
+  maxlength: {
+    type: Number,
+    default: 255,
+  },
+  id: {
+    type: String,
+    required: true,
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  required: {
+    type: Boolean,
+    default: false,
+  },
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  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);
+    },
+  },
+  ariaDescribedby: {
+    type: String,
+    default: null,
+  },
+  size: {
+    type: String as PropType<string>,
+    default: 'default',
+    validator(value: string) {
+      return propValidators.size.includes(value);
+    },
+  },
+  inputVariant: {
+    type: String as PropType<string>,
+    default: 'normal',
+    validator(value: string) {
+      return propValidators.inputVariant.includes(value);
+    },
+  },
+});
+
+const slots = useSlots();
+const hasLeftSlot = computed(() => slots.left !== undefined);
+const hasRightSlot = computed(() => slots.right !== undefined);
+
+const formTheme = computed(() => {
+  return props.fieldHasError ? 'error' : props.theme;
+});
+
+const modelValue = defineModel();
+const isDirty = defineModel('isDirty');
+const isActive = defineModel('isActive');
+
+const inputPattern = computed(() => {
+  return props.inputmode === 'numeric' ? '[0-9]+' : undefined;
+});
+
+const updateFocus = (isFocused: boolean) => {
+  isActive.value = isFocused;
+};
+
+const inputField = ref<HTMLInputElement | null>(null);
+
+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;
+      event.target.addEventListener(
+        'input',
+        () => {
+          if (inputField.value !== null && inputField.value.validity.patternMismatch) {
+            inputField.value.value = beforeValue as string;
+          }
+        },
+        { once: true }
+      );
+    });
+  }
+};
+
+onMounted(() => {
+  if (props.inputmode === 'numeric') validateInput();
+});
+</script>
+
+<style lang="css">
+.input-text-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  background-color: var(--theme-input-surface);
+
+  &:hover {
+    background-color: var(--theme-input-surface-hover);
+  }
+
+  &:focus-within {
+    background-color: var(--theme-input-surface-hover);
+    outline: var(--theme-focus-visible-outline);
+    box-shadow: var(--theme-focus-visible-shadow);
+  }
+
+  &.normal {
+    outline: var(--form-element-outline-width) solid var(--theme-input-outline);
+
+    border-top-left-radius: var(--form-input-border-radius);
+    border-top-right-radius: var(--form-input-border-radius);
+    border-bottom-left-radius: var(--form-input-border-radius);
+    border-bottom-right-radius: var(--form-input-border-radius);
+
+    border-top: var(--form-element-border-width) solid var(--theme-input-border);
+    border-right: var(--form-element-border-width) solid var(--theme-input-border);
+    border-bottom: var(--form-element-border-width) solid var(--theme-input-border);
+    border-left: var(--form-element-border-width) solid var(--theme-input-border);
+
+    padding-inline: 1rem;
+
+    &.error {
+      border-color: var(--theme-error-surface);
+    }
+
+    .slot {
+      display: flex;
+      place-items: center;
+      background-clip: padding-box;
+
+      &.left-slot:not([data-theme='input-action']) {
+        .icon {
+          width: 2.2rem;
+          height: 2.2rem;
+        }
+
+        [data-theme='input-action'] {
+          width: initial;
+          height: initial;
+          padding: 0.5rem;
+
+          .icon {
+            width: 1.8rem;
+            height: 1.8rem;
+          }
+        }
+      }
+      &.right-slot:not([data-theme='input-action']) {
+        .icon {
+          width: 2.2rem;
+          height: 2.2rem;
+        }
+
+        [data-theme='input-action'] {
+          width: initial;
+          height: initial;
+          padding: 0.5rem;
+
+          .icon {
+            width: 1.8rem;
+            height: 1.8rem;
+          }
+        }
+      }
+    }
+
+    &[data-inputmode='numeric'] {
+      padding-block: 0rem;
+      padding-inline: 0.75rem;
+
+      .slot {
+        [data-theme='input-action'] {
+          width: initial;
+          height: initial;
+          padding: 0.5rem;
+
+          .icon {
+            width: 1.8rem;
+            height: 1.8rem;
+          }
+        }
+      }
+    }
+  }
+
+  &.underlined {
+    margin-block-start: 0;
+    padding-block: 0;
+    padding-inline: 1rem;
+
+    border-radius: 0;
+
+    border-top: none;
+    border-right: none;
+    border-bottom: var(--form-element-border-width-underlined) solid var(--theme-input-border);
+    border-left: none;
+
+    overflow: hidden;
+
+    &.error {
+      border-bottom-right-radius: 0;
+      border-bottom-left-radius: 0;
+
+      border-top: var(--form-element-border-width) solid var(--theme-error-surface);
+      border-right: var(--form-element-border-width) solid var(--theme-error-surface);
+      border-bottom: var(--form-element-border-width) solid var(--theme-error-surface);
+      border-left: var(--form-element-border-width) solid var(--theme-error-surface);
+    }
+
+    .slot {
+      display: flex;
+      place-items: center;
+      background-clip: padding-box;
+
+      &.left-slot:not([data-theme='input-action-underlined']) {
+        .icon {
+          width: 2.2rem;
+          height: 2.2rem;
+        }
+
+        [data-theme='input-action-underlined'] {
+          width: initial;
+          height: initial;
+          padding: 0.5rem;
+
+          .icon {
+            width: 1.8rem;
+            height: 1.8rem;
+          }
+        }
+      }
+      &.right-slot:not([data-theme='input-action-underlined']) {
+        .icon {
+          width: 2.2rem;
+          height: 2.2rem;
+        }
+
+        [data-theme='input-action-underlined'] {
+          width: initial;
+          height: initial;
+          padding: 0.5rem;
+
+          .icon {
+            width: 1.8rem;
+            height: 1.8rem;
+          }
+        }
+      }
+    }
+  }
+
+  .input-text-core {
+    all: unset;
+    touch-action: manipulation;
+    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: 1rem;
+
+    &::placeholder {
+      color: var(--theme-input-placeholder);
+      font-size: var(--theme-input-placeholder-font-size);
+      font-style: italic;
+      line-height: 1;
+      font-weight: normal;
+    }
+  }
+}
+</style>

package/{components → app/components}/forms/input-text/variants/InputPasswordWithLabel.vue

@@ -1,7 +1,7 @@
 <template>
   <InputTextWithLabel
     v-model="modelValue"
-    :data-form-theme="formTheme"
+    :data-theme="formTheme"
     :type="inputType"
     :maxlength
     :name

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

@@ -1,6 +1,8 @@
 <template>
-  <div class="input-text-with-label" :data-form-theme="formTheme" :class="[inputVariant, elementClasses, { dirty: isDirty }, { active: isActive }]">
-    <label :for="id" class="input-text-label body-normal-bold">{{ label }}</label>
+  <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`">
       <slot name="description"></slot>

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

@@ -0,0 +1,158 @@
+<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']">
+        <template #textLabel>{{ label }}</template>
+      </InputLabel>
+
+      <div v-if="inputVariant === 'normal' && hasDescriptionSlot" :id="`${id}-description`">
+        <slot name="description"></slot>
+      </div>
+
+      <InputTextCore
+        v-model="modelValue"
+        v-model:isDirty="isDirty"
+        v-model:isActive="isActive"
+        :type
+        :inputmode
+        :maxlength
+        :id
+        :name
+        :placeholder
+        :label
+        :errorMessage
+        :fieldHasError
+        :required
+        :styleClassPassthrough
+        :theme
+        :ariaDescribedby
+        :size
+        :inputVariant
+      >
+        <template v-if="hasLeftSlot" #left>
+          <slot name="left"></slot>
+        </template>
+        <template v-if="hasRightSlot" #right>
+          <slot name="right"></slot>
+        </template>
+      </InputTextCore>
+
+      <InputError :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';
+const props = defineProps({
+  maxlength: {
+    type: Number,
+    default: 255,
+  },
+  type: {
+    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',
+    validator(value: string) {
+      return propValidators.inputMode.includes(value);
+    },
+  },
+  name: {
+    type: String,
+    required: true,
+  },
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  label: {
+    type: String,
+    required: true,
+  },
+  errorMessage: {
+    type: [Object, String],
+    required: true,
+  },
+  fieldHasError: {
+    type: Boolean,
+    default: false,
+  },
+  required: {
+    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);
+    },
+  },
+  size: {
+    type: String as PropType<string>,
+    default: 'default',
+    validator(value: string) {
+      return propValidators.size.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 hasLeftSlot = computed(() => slots.left !== undefined);
+const hasRightSlot = computed(() => slots.right !== undefined);
+
+const formTheme = computed(() => {
+  return props.fieldHasError ? 'error' : props.theme;
+});
+
+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 modelValue = defineModel();
+const isActive = ref<boolean>(false);
+const isDirty = ref<boolean>(false);
+
+const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+const testDirty = () => {
+  const watchValue = modelValue.value ?? '';
+
+  if (!isDirty.value && typeof watchValue === 'string' && watchValue.length > 0) {
+    isDirty.value = true;
+  }
+};
+
+onMounted(() => {
+  testDirty();
+});
+
+watch(
+  () => modelValue.value,
+  () => {
+    testDirty();
+  }
+);
+</script>

package/{components → app/components}/forms/input-textarea/InputTextareaCore.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="input-textarea-wrapper"
-    :data-form-theme="formTheme"
+    :data-theme="formTheme"
     :data-size="size"
     :class="[inputVariant, { dirty: isDirty }, { active: isActive }, { error: fieldHasError }, { 'has-left-slot': hasLeftSlot }, { 'has-right-slot': hasRightSlot }]"
   >
@@ -107,8 +107,8 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 
 <style lang="css">
 .input-textarea-wrapper {
-  background-color: var(--element-decorator-background-color);
-  outline: var(--element-decorator-outline-default);
+  background-color: var(--theme-input-surface);
+  outline: var(--form-element-outline-width) solid var(--theme-input-outline);
 
   border-top-left-radius: var(--element-decorator-border-top-left-radius);
   border-top-right-radius: var(--element-decorator-border-top-right-radius);
@@ -124,7 +124,11 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 
   &:hover {
     /* background-color: lab(89.6502 -0.829279 -2.45323 / 0.1); */
-    background-color: var(--form-core-background-color-hover);
+    background-color: var(--theme-input-surface-hover);
+  }
+
+  &:focus-within {
+    outline: var(--element-decorator-outline-focus);
   }
 
   display: flex;
@@ -146,6 +150,7 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
 
   .input-textarea-core {
     all: unset;
+    touch-action: manipulation;
     flex-grow: 1;
     field-sizing: content;
 
@@ -155,7 +160,7 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
     padding-block: var(--input-element-padding-block);
     padding-inline: var(--input-element-padding-inline);
 
-    min-height: var(--input-textarea-min-height);
+    min-height: 4rem;
 
     &::placeholder {
       color: var(--input-placeholder-color);
@@ -166,130 +171,4 @@ const { elementClasses } = useStyleClassPassthrough(props.styleClassPassthrough)
     }
   }
 }
-
-.input-textarea-wrapper-XXX {
-  --_focus-box-shadow: var(--box-shadow-off);
-  --_input-textarea-core-color: var(--theme-form-input-text-color-normal);
-
-  --_input-textarea-wrapper-background-color: var(--theme-form-input-bg-normal);
-
-  --_input-textarea-wrapper-border: var(--form-element-border-width) solid var(--theme-form-input-border);
-  --_input-textarea-wrapper-border-radius: var(--form-input-border-radius);
-
-  --_input-textarea-wrapper-outline: var(--form-element-outline-width) solid var(--theme-form-input-outline);
-  --_input-textarea-wrapper-opacity: 1;
-  --_input-textarea-wrapper-box-shadow: var(--_focus-box-shadow);
-  --_input-textarea-wrapper-margin-inline: 0;
-  --_input-textarea-wrapper-padding-block: 0;
-
-  &.underlined {
-    --_input-textarea-core-color: var(--theme-form-input-text-color-underlined);
-    --_input-textarea-wrapper-background-color: transparent;
-    --_input-textarea-wrapper-padding-block: 0.5rem;
-  }
-
-  &.outlined {
-    --_input-textarea-wrapper-margin-inline: 1px;
-    --_input-textarea-wrapper-background-color: var(--theme-form-input-bg-outlined);
-  }
-
-  &.normal {
-    &:focus-within {
-      --_input-textarea-wrapper-box-shadow: var(--box-shadow-on);
-      --_input-textarea-wrapper-outline: var(--form-element-outline-width) solid hsl(from var(--theme-form-input-outline-focus) h s 90%);
-    }
-  }
-
-  &:not(.normal) {
-    --_input-textarea-wrapper-border: none;
-    --_input-textarea-wrapper-box-shadow: none;
-    --_input-textarea-wrapper-outline: none;
-    --_input-textarea-wrapper-opacity: 0;
-
-    &:focus {
-      --_input-textarea-wrapper-border: none;
-      --_input-textarea-wrapper-box-shadow: none;
-      --_input-textarea-wrapper-outline: none;
-      --_input-textarea-wrapper-background-color: transparent;
-    }
-
-    &:focus-within {
-      --_input-textarea-wrapper-border: none;
-      --_input-textarea-wrapper-box-shadow: none;
-      --_input-textarea-wrapper-outline: none;
-      --_input-textarea-wrapper-background-color: transparent;
-    }
-
-    &.active,
-    &.dirty {
-      --_input-textarea-wrapper-border: none;
-      --_input-textarea-wrapper-box-shadow: none;
-      --_input-textarea-wrapper-outline: none;
-      --_input-textarea-wrapper-background-color: transparent;
-
-      --_input-textarea-wrapper-opacity: 1;
-    }
-  }
-
-  display: flex;
-  align-items: center;
-
-  background-color: var(--_input-textarea-wrapper-background-color);
-  border-radius: var(--_input-textarea-wrapper-border-radius);
-  border: var(--_input-textarea-wrapper-border);
-  outline: var(--_input-textarea-wrapper-outline);
-  box-shadow: var(--_input-textarea-wrapper-box-shadow);
-  opacity: var(--_input-textarea-wrapper-opacity);
-
-  margin-inline: var(--_input-textarea-wrapper-margin-inline);
-  padding-block: var(--_input-textarea-wrapper-padding-block);
-
-  &:not(.normal) {
-    transition: opacity 0.2s ease-in-out;
-  }
-
-  &.has-left-slot {
-    .left-slot {
-      display: flex;
-      align-items: center;
-      margin-inline-start: 1rem;
-    }
-  }
-
-  &.has-right-slot {
-    .right-slot {
-      display: flex;
-      align-items: center;
-      margin-inline-end: 1rem;
-    }
-  }
-
-  .input-textarea-core {
-    background-color: transparent;
-    border: none;
-    outline: none;
-    box-shadow: none;
-    flex-grow: 1;
-
-    min-height: 4lh;
-    field-sizing: content;
-
-    color: var(--_input-textarea-core-color);
-    font-family: var(--font-family);
-    font-size: var(--form-element-font-size);
-    line-height: var(--form-element-line-height);
-
-    padding-inline: var(--form-text-padding-inline);
-    padding-block-start: var(--form-element-padding-block-start);
-    padding-block-end: var(--form-element-padding-block-end);
-
-    &::placeholder,
-    &::-webkit-input-placeholder {
-      font-family: var(--font-family);
-      font-size: var(--form-element-font-size);
-      font-style: italic;
-      font-weight: 400;
-    }
-  }
-}
 </style>