srcdev-nuxt-forms 2.4.23 → 3.0.0

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

@@ -1,331 +0,0 @@
-<template>
-  <div
-    class="input-text-wrapper"
-    :data-form-theme="formTheme"
-    :data-size="size"
-    :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: '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 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 {
-  --_focus-box-shadow: var(--box-shadow-off);
-  --_input-text-core-color: var(--theme-form-input-text-color-normal);
-
-  --_input-text-wrapper-background-color: var(--theme-form-input-bg-normal);
-
-  --_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-outline: var(--form-element-outline-width) solid var(--theme-form-input-outline);
-  --_input-text-wrapper-opacity: 1;
-  --_input-text-wrapper-box-shadow: var(--_focus-box-shadow);
-  --_input-text-wrapper-margin-inline: 0;
-  --_input-text-wrapper-padding-block: 0;
-
-  &.underlined {
-    --_input-text-core-color: var(--theme-form-input-text-color-underlined);
-    --_input-text-wrapper-background-color: transparent;
-    --_input-text-wrapper-padding-block: 0.5rem;
-  }
-
-  &.outlined {
-    --_input-text-wrapper-margin-inline: 1px;
-    --_input-text-wrapper-background-color: var(--theme-form-input-bg-outlined);
-  }
-
-  &.normal {
-    &: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%);
-    }
-  }
-
-  &:not(.normal) {
-    --_input-text-wrapper-border: none;
-    --_input-text-wrapper-box-shadow: none;
-    --_input-text-wrapper-outline: none;
-    --_input-text-wrapper-opacity: 0;
-
-    &:focus {
-      --_input-text-wrapper-border: none;
-      --_input-text-wrapper-box-shadow: none;
-      --_input-text-wrapper-outline: none;
-      --_input-text-wrapper-background-color: transparent;
-    }
-
-    &:focus-within {
-      --_input-text-wrapper-border: none;
-      --_input-text-wrapper-box-shadow: none;
-      --_input-text-wrapper-outline: none;
-      --_input-text-wrapper-background-color: transparent;
-    }
-
-    &.active,
-    &.dirty {
-      --_input-text-wrapper-border: none;
-      --_input-text-wrapper-box-shadow: none;
-      --_input-text-wrapper-outline: none;
-      --_input-text-wrapper-background-color: transparent;
-
-      --_input-text-wrapper-opacity: 1;
-    }
-  }
-
-  display: flex;
-  align-items: center;
-
-  background-color: var(--_input-text-wrapper-background-color);
-  border-radius: var(--_input-text-wrapper-border-radius);
-  border: var(--_input-text-wrapper-border);
-  outline: var(--_input-text-wrapper-outline);
-  box-shadow: var(--_input-text-wrapper-box-shadow);
-  opacity: var(--_input-text-wrapper-opacity);
-
-  margin-inline: var(--_input-text-wrapper-margin-inline);
-  padding-block: var(--_input-text-wrapper-padding-block);
-
-  &:not(.normal) {
-    transition: opacity 0.2s ease-in-out;
-  }
-
-  &:not(:has(.input-button-core)) {
-    .slot {
-      display: inline-block;
-
-      .icon {
-        color: var(--_input-text-core-color);
-        aspect-ratio: 1;
-        height: var(--form-icon-size);
-        width: var(--form-icon-size);
-        margin: 0 !important;
-        padding: 0 !important;
-      }
-    }
-  }
-
-  &.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-text-core {
-    background-color: transparent;
-    border: none;
-    outline: none;
-    box-shadow: none;
-    flex-grow: 1;
-
-    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-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;
-    }
-  }
-
-  &:has(.has-left-button),
-  &:has(.has-right-button) {
-    .slot {
-      .input-button-core {
-        border: initial;
-        border-radius: 0;
-        outline: initial;
-        box-shadow: unset;
-      }
-    }
-
-    .left-slot {
-      margin-inline-end: 0;
-      border-right: 2px solid var(--theme-btn-bg-hover);
-    }
-
-    .right-slot {
-      margin-inline-end: 0;
-      border-left: 2px solid var(--theme-btn-bg-hover);
-    }
-  }
-}
-
-input:autofill,
-input:-internal-autofill-selected,
-input:-webkit-autofill-strong-password,
-input:-webkit-autofill-strong-password-viewable,
-input:-webkit-autofill-and-obscured {
-  background-color: var(--theme-form-input-bg-normal) !important;
-  background-image: none !important;
-  color: var(--_input-text-core-color) !important;
-  -webkit-box-shadow: 0 0 0rem 1000px var(--theme-form-input-bg-normal) inset;
-  -webkit-text-fill-color: var(--_input-text-core-color);
-  transition: background-color 5000s ease-in-out 0s;
-}
-</style>

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

@@ -1,130 +0,0 @@
-<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

@@ -1,187 +0,0 @@
-<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>