srcdev-nuxt-forms 3.0.0 → 4.1.0

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

@@ -0,0 +1,130 @@
+<template>
+  <InputTextWithLabel
+    v-model="modelValue"
+    :data-form-theme="formTheme"
+    :type="inputType"
+    :maxlength
+    :name
+    :placeholder
+    :label
+    :errorMessage
+    :fieldHasError
+    :required
+    :styleClassPassthrough
+    :theme
+    :size
+    :inputVariant
+  >
+    <template #right>
+      <InputButtonCore
+        type="button"
+        @click.stop.prevent="toggleDisplayPassword"
+        :is-pending="false"
+        :buttonText
+        :theme="buttonTheme"
+        :size
+        @focusin="updateFocus(name, true)"
+        @focusout="updateFocus(name, false)"
+      >
+        <template #iconOnly>
+          <Icon v-if="displayPassword" name="radix-icons:eye-none" class="icon" />
+          <Icon v-else name="radix-icons:eye-open" class="icon" />
+        </template>
+      </InputButtonCore>
+    </template>
+  </InputTextWithLabel>
+</template>
+
+<script setup lang="ts">
+import propValidators from '../../c12/prop-validators';
+
+const props = defineProps({
+  type: {
+    type: String as PropType<'text' | 'password'>,
+    default: 'password',
+  },
+  maxlength: {
+    type: Number,
+    default: 255,
+  },
+  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: 'medium',
+    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 formTheme = computed(() => {
+  return props.fieldHasError ? 'error' : props.theme;
+});
+
+const buttonTheme = computed(() => {
+  return props.inputVariant === 'underlined' ? 'input-action-underlined' : 'input-action';
+});
+
+const modelValue = defineModel();
+
+const { elementClasses, updateElementClasses } = useStyleClassPassthrough(props.styleClassPassthrough);
+
+const updateFocus = (name: string, isFocused: boolean) => {
+  // console.log('updateFocus', name, isFocused);
+  // modelValue.value.focusedField = isFocused ? name : '';
+};
+
+const inputType = ref<'text' | 'password'>(props.type);
+
+const displayPassword = ref(false);
+const buttonText = computed(() => {
+  inputType.value = displayPassword.value ? 'text' : 'password';
+  return displayPassword.value ? 'Hide password' : 'Show password';
+});
+const toggleDisplayPassword = () => {
+  displayPassword.value = !displayPassword.value;
+};
+
+updateElementClasses(['has-right-button']);
+</script>

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

@@ -0,0 +1,187 @@
+<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 v-if="hasDescriptionSlot" :id="`${id}-description`">
+      <slot name="description"></slot>
+    </div>
+
+    <InputTextCore
+      v-model="modelValue"
+      v-model:isDirty="isDirty"
+      v-model:isActive="isActive"
+      type="text"
+      :maxlength
+      :id
+      :name
+      :placeholder
+      :label
+      :errorMessage
+      :fieldHasError
+      :required
+      :styleClassPassthrough
+      :theme
+      inputmode="numeric"
+      :ariaDescribedby
+      :size
+      :inputVariant
+    >
+      <template v-if="hasLeftSlot" #left>
+        <InputButtonCore
+          type="button"
+          @click.stop.prevent="updateValue(-step, Number(modelValue) > min)"
+          :readonly="Number(modelValue) <= min"
+          :is-pending="false"
+          buttonText="Step down"
+          theme="input-action"
+          :size
+        >
+          <template #iconOnly>
+            <slot name="left"></slot>
+          </template>
+        </InputButtonCore>
+      </template>
+      <template v-if="hasRightSlot" #right>
+        <InputButtonCore
+          type="button"
+          @click.stop.prevent="updateValue(step, Number(modelValue) < max)"
+          :readonly="Number(modelValue) >= max"
+          :is-pending="false"
+          buttonText="Step up"
+          theme="input-action"
+          :size
+        >
+          <template #iconOnly>
+            <slot name="right"></slot>
+          </template>
+        </InputButtonCore>
+      </template>
+    </InputTextCore>
+    <InputError :errorMessage :showError="fieldHasError" :id="errorId" :isDetached="true" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import propValidators from '../../c12/prop-validators';
+const props = defineProps({
+  maxlength: {
+    type: Number,
+    default: 255,
+  },
+  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);
+    },
+  },
+  min: {
+    type: Number,
+    required: true,
+  },
+  max: {
+    type: Number,
+    required: true,
+  },
+  step: {
+    type: Number,
+    default: 1,
+  },
+  size: {
+    type: String as PropType<string>,
+    default: 'normal',
+    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 = 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, 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;
+  }
+};
+
+updateElementClasses(['input-text-as-number', 'has-left-button', 'has-right-button']);
+</script>
+
+<style lang="css">
+.input-text-as-number {
+  .input-text-wrapper {
+    width: fit-content;
+
+    &:has(.input-text-as-number) {
+      .left-slot {
+        margin-inline: 0;
+      }
+      .right-slot {
+        margin-inline: 0;
+      }
+    }
+
+    .input-text-core.input-text-as-number {
+      flex-grow: initial;
+      text-align: center;
+      width: v-bind(minLength);
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,298 @@
+<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>
+
+      <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: 'normal',
+    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 = 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>
+
+<style lang="css">
+.input-text-with-label {
+  --_input-text-with-label-margin-block-start: 0;
+  --_input-text-with-label-background-color: transparent;
+
+  --_input-text-wrapper-border: var(--form-element-border-width) solid var(--theme-form-input-border);
+  --_input-text-wrapper-border-radius: var(--form-input-border-radius);
+  --_input-text-wrapper-border-underlined: var(--form-element-border-width-underlined) solid var(--theme-form-input-border);
+  --_input-text-wrapper-outline: var(--form-element-outline-width) solid var(--theme-form-input-outline);
+  --_input-text-wrapper-box-shadow: var(--_focus-box-shadow);
+  --_input-text-wrapper-padding-block: 0;
+
+  --_focus-box-shadow: var(--box-shadow-off);
+
+  /* Label vars */
+  --_label-text-color: var(--theme-form-input-text-label-color-normal);
+  --_label-text-margin-block: 0.8rem;
+  --_label-text-size: var(--step-2);
+  --_label-text-weight: normal;
+  --_label-text-line-height: 1.5;
+  --_label-text-background-color: var(--_input-text-with-label-background-color);
+
+  &.underlined {
+    --_label-text-color: var(--theme-form-input-text-label-color-underlined);
+    --_label-offset: 1rem 0.2rem;
+    --_input-text-with-label-background-color: color-mix(in srgb, currentColor 5%, transparent);
+
+    --_input-text-wrapper-underlined-border-radius-top-left: 0;
+    --_input-text-wrapper-underlined-border-radius-top-right: 0;
+    --_input-text-wrapper-underlined-border-radius-bottom-left: 4px;
+    --_input-text-wrapper-underlined-border-radius-bottom-right: 4px;
+
+    --_label-text-background-color: transparent;
+
+    &:has(.input-text-wrapper.active),
+    &:has(.input-text-wrapper.dirty) {
+      --_label-offset: 0 -3.2rem;
+      --_label-text-weight: bolder;
+      --_label-text-size: var(--step-1);
+      /* line-height: 1.5; */
+      /* padding: 0.2rem 1.2rem; */
+    }
+  }
+
+  &.outlined {
+    --_label-text-color: var(--theme-form-input-text-label-color-outlined);
+
+    --_label-offset: 1rem -0.2rem;
+    --_input-text-with-label-background-color: var(--theme-form-input-bg-normal);
+
+    --_input-text-wrapper-padding-block: 0.4em 0;
+
+    &:has(.input-text-wrapper.active),
+    &:has(.input-text-wrapper.dirty) {
+      --_label-offset: 1rem -2.8rem;
+      --_label-text-weight: normal;
+      /* --_label-text-size: var(--step-1); */
+      /* line-height: 1.5; */
+      /* padding: 0.2rem 1.2rem; */
+    }
+  }
+
+  &:not(.normal) {
+    --_input-text-with-label-margin-block-start: 3em;
+
+    &:has(.input-text-wrapper.active),
+    &:has(.input-text-wrapper.dirty) {
+      /* --_label-offset: 1rem -2.8rem; */
+      /* font-size: var(--step-1); */
+      /* line-height: 1.5; */
+      /* padding: 0.2rem 1.2rem; */
+    }
+
+    &:focus-within {
+      --_input-text-wrapper-box-shadow: var(--box-shadow-on);
+      --_input-text-wrapper-outline: var(--form-element-outline-width) solid hsl(from var(--theme-form-input-outline-focus) h s 90%);
+    }
+  }
+
+  /*
+  * Apply generic styles
+  **/
+
+  background-color: var(--_input-text-with-label-background-color);
+  border-radius: var(--_input-text-wrapper-border-radius);
+
+  /* overflow: clip; */
+
+  &.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);
+    border-bottom-right-radius: var(--_input-text-wrapper-underlined-border-radius-bottom-right);
+  }
+
+  &.outlined {
+    border: var(--_input-text-wrapper-border);
+    outline: var(--_input-text-wrapper-outline);
+    box-shadow: var(--_input-text-wrapper-box-shadow);
+    padding-block: var(--_input-text-wrapper-padding-block);
+  }
+
+  &:not(.normal) {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr;
+    grid-template-areas: 'underlined-text-stack';
+
+    margin-block-start: var(--_input-text-with-label-margin-block-start);
+
+    .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 {
+    display: inline-block;
+    color: var(--_label-text-color);
+    background-color: var(--_label-text-background-color);
+    margin-block: var(--_label-text-margin-block);
+    font-size: var(--_label-text-size);
+    font-weight: var(--_label-text-weight);
+    line-height: var(--_label-text-line-height);
+    translate: var(--_label-offset);
+    width: fit-content;
+    height: fit-content;
+    transition: font-size 0.2s ease-in-out, translate 0.2s ease-in-out;
+
+    &:not(.normal) {
+      display: flex;
+      align-items: center;
+    }
+  }
+}
+</style>