tide-design-system 2.3.1 → 2.4.1

package/src/components/TideInputText.vue

@@ -1,29 +1,35 @@
-<script lang="ts" setup>
-  import { computed, ref, watch } from 'vue';
+<script setup lang="ts">
+  import { computed, ref, watch, watchEffect } from 'vue';
 
   import TideIcon from '@/components/TideIcon.vue';
+  import TideInputSupportingText from '@/components/TideInputSupportingText.vue';
+  import { useFormContext } from '@/composables/useTideForm';
   import { ICON } from '@/types/Icon';
   import { SIZE } from '@/types/Size';
   import { CSS } from '@/types/Styles';
   import { TEXT_INPUT_TYPE } from '@/types/TextInput';
-  import { getErrorMessage, getFieldHasError, handleFieldValidation } from '@/utilities/validation';
+  import { ERROR_DISPLAY } from '@/types/Validation';
+  import { getTextInputMode } from '@/utilities/forms';
+  import { VALIDATION_RESULT, getFieldValidationResult } from '@/utilities/validation';
 
   import type { FormValueTransformer } from '@/types/Form';
   import type { Icon } from '@/types/Icon';
-  import type { TextInputType } from '@/types/TextInput';
-  import type { ValidationError, Validator } from '@/types/Validation';
+  import type { InputMode, TextInputType } from '@/types/TextInput';
+  import type { ErrorDisplay, ValidationResult, Validator } from '@/types/Validation';
 
   type Props = {
     autocomplete?: boolean;
     disabled?: boolean;
-    error?: ValidationError;
+    error?: string;
+    errorDisplay?: ErrorDisplay;
     hasClear?: boolean;
     iconLeading?: Icon;
     inputId?: string;
-    label: string;
-    maxlength?: number | undefined;
-    minlength?: number | undefined;
-    name: string;
+    inputmode?: InputMode;
+    label?: string;
+    maxlength?: number;
+    minlength?: number;
+    name?: string;
     prefix?: string;
     required?: boolean;
     suffix?: string;
@@ -31,19 +37,21 @@
     transformValue?: FormValueTransformer;
     type?: TextInputType;
     validators?: Validator[];
-    value?: string;
   };
 
   const props = withDefaults(defineProps<Props>(), {
     autocomplete: false,
     disabled: false,
-    error: false,
+    error: '',
+    errorDisplay: ERROR_DISPLAY.LAZY,
     hasClear: false,
     iconLeading: undefined,
     inputId: undefined,
+    inputmode: undefined,
     label: undefined,
     maxlength: undefined,
     minlength: undefined,
+    name: undefined,
     prefix: undefined,
     required: false,
     suffix: undefined,
@@ -51,85 +59,103 @@
     transformValue: undefined,
     type: TEXT_INPUT_TYPE.TEXT,
     validators: undefined,
-    value: undefined,
   });
 
-  const error = ref(props.error);
-  const hasFocus = ref(false);
-  const input = ref<HTMLInputElement | null>(null);
-  const showPassword = ref(false);
-  const value = ref(props.value);
+  type Emits = {
+    (event: 'valid', isValid: boolean): void;
+  };
+  const emit = defineEmits<Emits>();
+
+  const modelValue = defineModel<string>({ required: true });
+
+  const formContext = useFormContext();
+
+  const errorRef = ref<ValidationResult>(VALIDATION_RESULT.NO_ERROR);
+  const hasFocus = ref<boolean>(false);
+  const inputElement = ref<HTMLInputElement | null>(null);
+  const isValidating = ref<boolean>(false);
+  const showPassword = ref<boolean>(false);
 
-  const errorMessage = computed(() => getErrorMessage(props.error, error.value));
   const formattedLabel = computed(() => (props.required && props.label ? `${props.label} *` : props.label));
-  const hasClear = computed(() => props.hasClear && value.value);
-  const hasError = computed(
-    () => (props.required && value.value !== undefined && !value.value) || getFieldHasError(error.value, props.error)
-  );
+  const showError = computed(() => {
+    if (hasErrorFromProp.value) return true;
+    if (!isValidating.value) return false;
+    return !errorRef.value.valid;
+  });
+  const hasErrorFromProp = computed(() => props.error !== '');
   const hasMinilabel = computed(() => hasFocus.value || !isEmpty.value);
-  const isEmpty = computed(() => value.value === '' || value.value === undefined);
+  const inputModeAttribute = computed<InputMode | undefined>(() => getTextInputMode(props.type, props.inputmode));
   const inputType = computed(() =>
     props.type === TEXT_INPUT_TYPE.PASSWORD && showPassword.value === true ? TEXT_INPUT_TYPE.TEXT : props.type
   );
+  const isEmpty = computed(() => modelValue.value === '');
+  const shouldShowClearButton = computed(
+    () => props.hasClear && modelValue.value && props.type !== TEXT_INPUT_TYPE.PASSWORD
+  );
+  const shouldShowPasswordButton = computed(() => props.type === TEXT_INPUT_TYPE.PASSWORD);
+  const supportingTextMessage = computed(() => (showError.value && errorRef.value.message) || props.supportingText);
 
   const handleClear = () => {
-    value.value = '';
-    input.value?.focus();
+    modelValue.value = '';
+    inputElement.value?.focus();
   };
 
   const handleFocus = () => {
     hasFocus.value = true;
+    if (props.errorDisplay === ERROR_DISPLAY.EAGER) isValidating.value = true;
   };
 
   const handleFocusOut = () => {
     hasFocus.value = false;
-
-    if (!value.value) {
-      value.value = '';
-    }
-
-    handleValidation();
+    if (props.errorDisplay === ERROR_DISPLAY.LAZY) isValidating.value = true;
   };
 
-  const handleInput = () => {
-    if (props.transformValue) {
-      const digits = value.value?.match(/\d/g)?.join('') || undefined;
+  const handleFieldClick = () => {
+    inputElement.value?.focus();
+  };
 
-      value.value = digits ? props.transformValue(digits) : '';
-    }
+  const preventInputFocusLossOnMousedown = (e: MouseEvent) => {
+    if (!hasFocus.value) return;
+    if (e.target !== inputElement.value) e.preventDefault();
   };
 
-  const handleValidation = () => {
-    handleFieldValidation({
-      error,
+  watchEffect(() => {
+    errorRef.value = getFieldValidationResult({
       errorFromProps: props.error,
       maxlength: props.maxlength,
       minlength: props.minlength,
       required: props.required,
       validators: props.validators,
-      value,
+      value: modelValue,
     });
-  };
+  });
 
-  const updateValue = (newValue: string) => {
-    value.value = newValue;
-  };
+  watch(
+    [modelValue, () => props.transformValue],
+    () => {
+      if (!props.transformValue) return;
+
+      const digits = modelValue.value?.match(/\d/g)?.join('') || undefined;
+      modelValue.value = digits ? props.transformValue(digits) : '';
+    },
+    { immediate: true }
+  );
 
   watch(
-    () => props.value,
-    (newValue, oldValue) => {
-      if (newValue !== oldValue || newValue !== value.value) {
-        value.value = newValue;
-      }
-    }
+    () => formContext?.forceShowErrors.value,
+    (newValue) => {
+      if (newValue) isValidating.value = true;
+    },
+    { immediate: true }
   );
 
-  defineExpose({
-    error,
-    required: props.required,
-    updateValue,
-    value,
-  });
+  watch(
+    errorRef,
+    () => {
+      emit('valid', errorRef.value.valid);
+    },
+    { deep: true, immediate: true }
+  );
 </script>
 
 <template>
@@ -140,7 +166,7 @@
       CSS.FLEX.DIRECTION.COLUMN,
       CSS.GAP.QUARTER,
       disabled && 'disabled',
-      hasError && 'error',
+      showError && 'error',
     ]"
   >
     <label
@@ -152,11 +178,13 @@
         CSS.POSITION.RELATIVE,
         CSS.BORDER.RADIUS.HALF,
         CSS.BG.SURFACE.DEFAULT,
-        hasClear ? [CSS.PADDING.RIGHT.HALF, CSS.PADDING.LEFT.ONE] : [CSS.PADDING.X.ONE],
         CSS.PADDING.Y.HALF,
+        shouldShowClearButton ? [CSS.PADDING.RIGHT.HALF, CSS.PADDING.LEFT.ONE] : [CSS.PADDING.X.ONE],
         disabled ? CSS.CURSOR.NOT_ALLOWED : CSS.CURSOR.TEXT,
       ]"
       :for="inputId"
+      @click="handleFieldClick"
+      @mousedown="preventInputFocusLossOnMousedown"
     >
       <TideIcon
         :class="[CSS.FONT.COLOR.SURFACE.VARIANT]"
@@ -170,7 +198,7 @@
           :class="[
             'tide-input-text-prefix',
             CSS.FONT.ROLE.BODY_1,
-            !hasError && CSS.FONT.COLOR.SURFACE.VARIANT,
+            !showError && CSS.FONT.COLOR.SURFACE.VARIANT,
             hasMinilabel ? '' : 'offset',
           ]"
           v-if="prefix"
@@ -183,7 +211,7 @@
             :class="[
               'tide-input-text-label',
               hasMinilabel ? ['minilabel', CSS.FONT.ROLE.LABEL_3] : CSS.FONT.ROLE.LABEL_1,
-              !hasError && CSS.FONT.COLOR.SURFACE.VARIANT,
+              !showError && CSS.FONT.COLOR.SURFACE.VARIANT,
               CSS.CURSOR.TEXT,
               CSS.POINTER_EVENTS.OFF,
             ]"
@@ -194,20 +222,19 @@
 
           <input
             :autocomplete="autocomplete ? 'on' : 'off'"
-            :class="[CSS.WIDTH.FULL, disabled && CSS.CURSOR.NOT_ALLOWED, CSS.FONT.ROLE.BODY_1]"
+            :class="[CSS.WIDTH.FULL, CSS.FONT.ROLE.BODY_1, disabled && CSS.CURSOR.NOT_ALLOWED]"
             :disabled="disabled"
+            :inputmode="inputModeAttribute"
             :maxlength="maxlength"
             :minlength="minlength"
             :name="name"
-            ref="input"
+            ref="inputElement"
             :required="required"
             :type="inputType"
-            @change="handleValidation"
             @focus="handleFocus"
             @focusout="handleFocusOut"
-            @input="handleInput"
             :id="inputId"
-            v-model="value"
+            v-model="modelValue"
           />
         </div>
 
@@ -215,7 +242,7 @@
           :class="[
             'tide-input-text-suffix',
             CSS.FONT.ROLE.BODY_1,
-            !hasError && CSS.FONT.COLOR.SURFACE.VARIANT,
+            !showError && CSS.FONT.COLOR.SURFACE.VARIANT,
             hasMinilabel ? '' : 'offset',
           ]"
           v-if="suffix"
@@ -226,7 +253,7 @@
 
       <button
         @click="handleClear"
-        v-if="hasClear && type !== TEXT_INPUT_TYPE.PASSWORD"
+        v-if="shouldShowClearButton"
       >
         <TideIcon
           :class="[CSS.MARGIN.FULL.HALF]"
@@ -237,7 +264,7 @@
 
       <button
         @click="showPassword = !showPassword"
-        v-if="type === TEXT_INPUT_TYPE.PASSWORD"
+        v-if="shouldShowPasswordButton"
       >
         <TideIcon
           :class="[CSS.MARGIN.FULL.HALF]"
@@ -247,21 +274,11 @@
       </button>
     </label>
 
-    <div
-      :class="[CSS.DISPLAY.FLEX, CSS.AXIS2.CENTER, CSS.GAP.QUARTER]"
-      v-if="supportingText || hasError"
-    >
-      <TideIcon
-        :class="[]"
-        :icon="ICON.ERROR"
-        :size="SIZE.SMALL"
-        v-if="hasError"
-      />
-
-      <div :class="[CSS.FONT.ROLE.LABEL_3]">
-        {{ hasError ? errorMessage : supportingText }}
-      </div>
-    </div>
+    <TideInputSupportingText
+      :is-error="showError"
+      :message="supportingTextMessage"
+      v-if="supportingTextMessage"
+    />
   </div>
 </template>
 

package/src/components/TideInputTextDeprecated.vue

@@ -0,0 +1,324 @@
+<script lang="ts">
+  /**
+   * @deprecated Use `TideInputText.vue` imported from 'tide-design-system' npm package instead.
+   */
+  export default {};
+</script>
+
+<script lang="ts" setup>
+  import { computed, ref, watch } from 'vue';
+
+  import TideIcon from '@/components/TideIcon.vue';
+  import { ICON } from '@/types/Icon';
+  import { SIZE } from '@/types/Size';
+  import { CSS } from '@/types/Styles';
+  import { TEXT_INPUT_TYPE } from '@/types/TextInput';
+  import { getErrorMessage, getFieldHasError, handleFieldValidation } from '@/utilities/validation-deprecated';
+
+  import type { FormValueTransformer } from '@/types/FormDeprecated';
+  import type { Icon } from '@/types/Icon';
+  import type { TextInputType } from '@/types/TextInput';
+  import type { ValidationError, Validator } from '@/types/ValidationDeprecated';
+
+  type Props = {
+    autocomplete?: boolean;
+    disabled?: boolean;
+    error?: ValidationError;
+    hasClear?: boolean;
+    iconLeading?: Icon;
+    inputId?: string;
+    label: string;
+    maxlength?: number | undefined;
+    minlength?: number | undefined;
+    name: string;
+    prefix?: string;
+    required?: boolean;
+    suffix?: string;
+    supportingText?: string;
+    transformValue?: FormValueTransformer;
+    type?: TextInputType;
+    validators?: Validator[];
+    value?: string;
+  };
+
+  const props = withDefaults(defineProps<Props>(), {
+    autocomplete: false,
+    disabled: false,
+    error: false,
+    hasClear: false,
+    iconLeading: undefined,
+    inputId: undefined,
+    label: undefined,
+    maxlength: undefined,
+    minlength: undefined,
+    prefix: undefined,
+    required: false,
+    suffix: undefined,
+    supportingText: undefined,
+    transformValue: undefined,
+    type: TEXT_INPUT_TYPE.TEXT,
+    validators: undefined,
+    value: undefined,
+  });
+
+  const error = ref(props.error);
+  const hasFocus = ref(false);
+  const input = ref<HTMLInputElement | null>(null);
+  const showPassword = ref(false);
+  const value = ref(props.value);
+
+  const errorMessage = computed(() => getErrorMessage(props.error, error.value));
+  const formattedLabel = computed(() => (props.required && props.label ? `${props.label} *` : props.label));
+  const hasClear = computed(() => props.hasClear && value.value);
+  const hasError = computed(
+    () => (props.required && value.value !== undefined && !value.value) || getFieldHasError(error.value, props.error)
+  );
+  const hasMinilabel = computed(() => hasFocus.value || !isEmpty.value);
+  const isEmpty = computed(() => value.value === '' || value.value === undefined);
+  const inputType = computed(() =>
+    props.type === TEXT_INPUT_TYPE.PASSWORD && showPassword.value === true ? TEXT_INPUT_TYPE.TEXT : props.type
+  );
+
+  const handleClear = () => {
+    value.value = '';
+    input.value?.focus();
+  };
+
+  const handleFocus = () => {
+    hasFocus.value = true;
+  };
+
+  const handleFocusOut = () => {
+    hasFocus.value = false;
+
+    if (!value.value) {
+      value.value = '';
+    }
+
+    handleValidation();
+  };
+
+  const handleInput = () => {
+    if (props.transformValue) {
+      const digits = value.value?.match(/\d/g)?.join('') || undefined;
+
+      value.value = digits ? props.transformValue(digits) : '';
+    }
+  };
+
+  const handleValidation = () => {
+    handleFieldValidation({
+      error,
+      errorFromProps: props.error,
+      maxlength: props.maxlength,
+      minlength: props.minlength,
+      required: props.required,
+      validators: props.validators,
+      value,
+    });
+  };
+
+  const updateValue = (newValue: string) => {
+    value.value = newValue;
+  };
+
+  watch(
+    () => props.value,
+    (newValue, oldValue) => {
+      if (newValue !== oldValue || newValue !== value.value) {
+        value.value = newValue;
+      }
+    }
+  );
+
+  defineExpose({
+    error,
+    required: props.required,
+    updateValue,
+    value,
+  });
+</script>
+
+<template>
+  <div
+    :class="[
+      'tide-input-text',
+      CSS.DISPLAY.FLEX,
+      CSS.FLEX.DIRECTION.COLUMN,
+      CSS.GAP.QUARTER,
+      disabled && 'disabled',
+      hasError && 'error',
+    ]"
+  >
+    <label
+      :class="[
+        'tide-input-text-field',
+        CSS.DISPLAY.FLEX,
+        CSS.AXIS2.CENTER,
+        CSS.GAP.HALF,
+        CSS.POSITION.RELATIVE,
+        CSS.BORDER.RADIUS.HALF,
+        CSS.BG.SURFACE.DEFAULT,
+        hasClear ? [CSS.PADDING.RIGHT.HALF, CSS.PADDING.LEFT.ONE] : [CSS.PADDING.X.ONE],
+        CSS.PADDING.Y.HALF,
+        disabled ? CSS.CURSOR.NOT_ALLOWED : CSS.CURSOR.TEXT,
+      ]"
+      :for="inputId"
+    >
+      <TideIcon
+        :class="[CSS.FONT.COLOR.SURFACE.VARIANT]"
+        :icon="iconLeading"
+        :size="SIZE.SMALL"
+        v-if="iconLeading"
+      />
+
+      <div :class="[CSS.DISPLAY.FLEX, CSS.AXIS2.CENTER, CSS.GAP.QUARTER, CSS.WIDTH.FULL]">
+        <div
+          :class="[
+            'tide-input-text-prefix',
+            CSS.FONT.ROLE.BODY_1,
+            !hasError && CSS.FONT.COLOR.SURFACE.VARIANT,
+            hasMinilabel ? '' : 'offset',
+          ]"
+          v-if="prefix"
+        >
+          {{ prefix }}
+        </div>
+
+        <div :class="[CSS.DISPLAY.FLEX, CSS.FLEX.DIRECTION.COLUMN, CSS.WIDTH.FULL]">
+          <div
+            :class="[
+              'tide-input-text-label',
+              hasMinilabel ? ['minilabel', CSS.FONT.ROLE.LABEL_3] : CSS.FONT.ROLE.LABEL_1,
+              !hasError && CSS.FONT.COLOR.SURFACE.VARIANT,
+              CSS.CURSOR.TEXT,
+              CSS.POINTER_EVENTS.OFF,
+            ]"
+            v-if="label"
+          >
+            {{ formattedLabel }}
+          </div>
+
+          <input
+            :autocomplete="autocomplete ? 'on' : 'off'"
+            :class="[CSS.WIDTH.FULL, disabled && CSS.CURSOR.NOT_ALLOWED, CSS.FONT.ROLE.BODY_1]"
+            :disabled="disabled"
+            :maxlength="maxlength"
+            :minlength="minlength"
+            :name="name"
+            ref="input"
+            :required="required"
+            :type="inputType"
+            @change="handleValidation"
+            @focus="handleFocus"
+            @focusout="handleFocusOut"
+            @input="handleInput"
+            :id="inputId"
+            v-model="value"
+          />
+        </div>
+
+        <div
+          :class="[
+            'tide-input-text-suffix',
+            CSS.FONT.ROLE.BODY_1,
+            !hasError && CSS.FONT.COLOR.SURFACE.VARIANT,
+            hasMinilabel ? '' : 'offset',
+          ]"
+          v-if="suffix"
+        >
+          {{ suffix }}
+        </div>
+      </div>
+
+      <button
+        @click="handleClear"
+        v-if="hasClear && type !== TEXT_INPUT_TYPE.PASSWORD"
+      >
+        <TideIcon
+          :class="[CSS.MARGIN.FULL.HALF]"
+          :icon="ICON.CLOSE"
+          :size="SIZE.SMALL"
+        />
+      </button>
+
+      <button
+        @click="showPassword = !showPassword"
+        v-if="type === TEXT_INPUT_TYPE.PASSWORD"
+      >
+        <TideIcon
+          :class="[CSS.MARGIN.FULL.HALF]"
+          :icon="ICON.VISIBILITY"
+          :size="SIZE.SMALL"
+        />
+      </button>
+    </label>
+
+    <div
+      :class="[CSS.DISPLAY.FLEX, CSS.AXIS2.CENTER, CSS.GAP.QUARTER]"
+      v-if="supportingText || hasError"
+    >
+      <TideIcon
+        :class="[]"
+        :icon="ICON.ERROR"
+        :size="SIZE.SMALL"
+        v-if="hasError"
+      />
+
+      <div :class="[CSS.FONT.ROLE.LABEL_3]">
+        {{ hasError ? errorMessage : supportingText }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+  .tide-input-text-label {
+    height: 1.1875rem;
+    transition: font-size var(--tide-animate), transform var(--tide-animate);
+  }
+
+  .tide-input-text-label:not(.minilabel),
+  .tide-input-text-prefix:not(.offset),
+  .tide-input-text-suffix:not(.offset) {
+    transform: translate(0, calc(9 / 16 * 1rem));
+  }
+
+  .tide-input-text-prefix,
+  .tide-input-text-suffix {
+    transition: transform var(--tide-animate);
+  }
+
+  .tide-input-text.disabled {
+    opacity: var(--tide-disabled);
+  }
+
+  .tide-input-text.error {
+    color: var(--tide-error-primary);
+  }
+
+  .tide-input-text.error .tide-input-text-field {
+    outline-color: var(--tide-error-border);
+    background-color: var(--tide-error-surface);
+  }
+
+  .tide-input-text.error:focus-within .tide-input-text-field {
+    outline-color: var(--tide-error-border);
+  }
+
+  .tide-input-text:focus-within .tide-input-text-field {
+    --tide-input-outline-width: var(--tide-border-width-2);
+    outline-color: var(--tide-surface-border-high);
+  }
+
+  .tide-input-text input {
+    outline: none;
+  }
+
+  .tide-input-text-field {
+    --tide-input-outline-width: var(--tide-border-width-1);
+    outline: var(--tide-input-outline-width) solid var(--tide-border);
+    outline-offset: calc(var(--tide-input-outline-width) * -1);
+    color: var(--tide-surface-foreground);
+  }
+</style>