tide-design-system 2.3.0 → 2.4.0

package/src/components/TideInputSelect.vue

@@ -1,65 +1,108 @@
 <script lang="ts" setup>
-  import { computed, ref, watch } from 'vue';
+  import { computed, ref, useId, 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 { getErrorMessage, getFieldHasError } from '@/utilities/validation';
+  import { ERROR_DISPLAY } from '@/types/Validation';
+  import { VALIDATION_RESULT, getFieldValidationResult } from '@/utilities/validation';
 
-  import type { SelectField } from '@/types/Field';
   import type { SelectOption, SelectOptionGroup } from '@/types/Select';
+  import type { ErrorDisplay, ValidationResult } from '@/types/Validation';
 
-  interface Props extends SelectField {
-    inputId?: string;
+  type Props = {
+    disabled?: boolean;
+    error?: string;
+    errorDisplay?: ErrorDisplay;
+    label?: string;
+    name?: string;
+    optgroups?: (SelectOption | SelectOptionGroup)[] | readonly (SelectOption | SelectOptionGroup)[];
+    options?: SelectOption[] | readonly SelectOption[];
+    required?: boolean;
     supportingText?: string;
-  }
+  };
 
   const props = withDefaults(defineProps<Props>(), {
     disabled: false,
-    error: false,
+    error: '',
+    errorDisplay: ERROR_DISPLAY.LAZY,
     inputId: undefined,
     label: undefined,
+    name: undefined,
+    optgroups: undefined,
+    options: undefined,
     required: false,
     supportingText: undefined,
-    value: undefined,
   });
 
-  const error = ref(props.error);
-  const hasFocus = ref(false);
-  const input = ref<HTMLSelectElement | null>(null);
-  const required = ref(props.required);
-  const value = ref<string | undefined>(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 inputId = useId();
+  const isValidating = ref<boolean>(false);
+  const selectElement = ref<HTMLSelectElement | null>(null);
 
-  const errorMessage = computed(() => getErrorMessage(props.error, error.value));
   const formattedLabel = computed(() => (props.required ? `${props.label} *` : props.label));
-  const hasError = computed(() => (props.required && !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 === undefined);
+  const isEmpty = computed(() => modelValue.value === '');
+  const supportingTextMessage = computed(() => (showError.value && errorRef.value.message) || props.supportingText);
 
   const expandOptions = () => {
     const event = new MouseEvent('mousedown');
-    input?.value?.dispatchEvent(event);
+    selectElement?.value?.dispatchEvent(event);
   };
 
   const handleFocus = () => {
     hasFocus.value = true;
+    if (props.errorDisplay === ERROR_DISPLAY.EAGER) isValidating.value = true;
   };
 
   const handleFocusOut = () => {
     hasFocus.value = false;
+    if (props.errorDisplay === ERROR_DISPLAY.LAZY) isValidating.value = true;
   };
 
+  watchEffect(() => {
+    errorRef.value = getFieldValidationResult({
+      errorFromProps: props.error,
+      required: props.required,
+      value: modelValue,
+    });
+  });
+
   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, value });
+  watch(
+    errorRef,
+    () => {
+      emit('valid', errorRef.value.valid);
+    },
+    { deep: true, immediate: true }
+  );
 </script>
 
 <template>
@@ -70,7 +113,7 @@
       CSS.FLEX.DIRECTION.COLUMN,
       CSS.GAP.QUARTER,
       disabled && 'disabled',
-      hasError && 'error',
+      showError && 'error',
     ]"
   >
     <div
@@ -95,10 +138,10 @@
             CSS.POSITIONING.LEFT,
             CSS.MARGIN.TOP.HALF,
             CSS.MARGIN.LEFT.ONE,
-            !hasError && CSS.FONT.COLOR.SURFACE.VARIANT,
+            !showError && CSS.FONT.COLOR.SURFACE.VARIANT,
             CSS.POINTER_EVENTS.OFF,
           ]"
-          :for="props.inputId"
+          :for="inputId"
           v-if="label"
         >
           {{ formattedLabel }}
@@ -114,12 +157,12 @@
           ]"
           :disabled="disabled"
           :name="name"
-          ref="input"
+          ref="selectElement"
           :required="required"
           @focus="handleFocus"
           @focusout="handleFocusOut"
-          :id="props.inputId"
-          v-model="value"
+          :id="inputId"
+          v-model="modelValue"
         >
           <template v-for="optgroup in props.optgroups">
             <optgroup
@@ -141,7 +184,7 @@
             <option
               :class="[CSS.WIDTH.FULL, CSS.BG.SURFACE.DEFAULT]"
               :key="(optgroup as SelectOption).value"
-              :selected="value === (optgroup as SelectOption).value ? true : undefined"
+              :selected="modelValue === (optgroup as SelectOption).value ? true : undefined"
               :value="(optgroup as SelectOption).value"
               v-else
             >
@@ -152,7 +195,7 @@
           <option
             :class="[CSS.WIDTH.FULL, CSS.BG.SURFACE.DEFAULT]"
             :key="option.value"
-            :selected="value === option.value ? true : undefined"
+            :selected="modelValue === option.value ? true : undefined"
             :value="option.value"
             v-for="option in options"
           >
@@ -168,21 +211,11 @@
       />
     </div>
 
-    <div
-      :class="[CSS.DISPLAY.FLEX, CSS.AXIS2.CENTER, CSS.GAP.QUARTER]"
-      v-if="props.supportingText || hasError"
-    >
-      <TideIcon
-        :class="[]"
-        :icon="ICON.ERROR"
-        :size="SIZE.SMALL"
-        v-if="hasError"
-      />
-
-      <div :class="[CSS.FONT.ROLE.LABEL_3]">
-        {{ hasError ? errorMessage : props.supportingText }}
-      </div>
-    </div>
+    <TideInputSupportingText
+      :is-error="showError"
+      :message="supportingTextMessage"
+      v-if="supportingTextMessage"
+    />
   </div>
 </template>
 

package/src/components/TideInputSelectDeprecated.vue

@@ -0,0 +1,245 @@
+<script lang="ts">
+  /**
+   * @deprecated Use `TideInputSelect.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 { getErrorMessage, getFieldHasError } from '@/utilities/validation-deprecated';
+
+  import type { SelectField } from '@/types/FieldDeprecated';
+  import type { SelectOption, SelectOptionGroup } from '@/types/Select';
+
+  export interface Props extends SelectField {
+    inputId?: string;
+    supportingText?: string;
+  }
+
+  const props = withDefaults(defineProps<Props>(), {
+    disabled: false,
+    error: false,
+    inputId: undefined,
+    label: undefined,
+    required: false,
+    supportingText: undefined,
+    value: undefined,
+  });
+
+  const error = ref(props.error);
+  const hasFocus = ref(false);
+  const input = ref<HTMLSelectElement | null>(null);
+  const required = ref(props.required);
+  const value = ref<string | undefined>(props.value);
+
+  const errorMessage = computed(() => getErrorMessage(props.error, error.value));
+  const formattedLabel = computed(() => (props.required ? `${props.label} *` : props.label));
+  const hasError = computed(() => (props.required && !value.value) || getFieldHasError(error.value, props.error));
+  const hasMinilabel = computed(() => hasFocus.value || !isEmpty.value);
+  const isEmpty = computed(() => value.value === undefined);
+
+  const expandOptions = () => {
+    const event = new MouseEvent('mousedown');
+    input?.value?.dispatchEvent(event);
+  };
+
+  const handleFocus = () => {
+    hasFocus.value = true;
+  };
+
+  const handleFocusOut = () => {
+    hasFocus.value = false;
+  };
+
+  watch(
+    () => props.value,
+    (newValue, oldValue) => {
+      if (newValue !== oldValue || newValue !== value.value) {
+        value.value = newValue;
+      }
+    }
+  );
+
+  defineExpose({ error, value });
+</script>
+
+<template>
+  <div
+    :class="[
+      'tide-input-select',
+      CSS.DISPLAY.FLEX,
+      CSS.FLEX.DIRECTION.COLUMN,
+      CSS.GAP.QUARTER,
+      disabled && 'disabled',
+      hasError && 'error',
+    ]"
+  >
+    <div
+      :class="[
+        'tide-input-border',
+        CSS.POSITION.RELATIVE,
+        CSS.DISPLAY.FLEX,
+        CSS.AXIS2.CENTER,
+        CSS.GAP.HALF,
+        CSS.BORDER.RADIUS.HALF,
+        CSS.BG.SURFACE.DEFAULT,
+        props.disabled ? CSS.CURSOR.NOT_ALLOWED : '',
+        CSS.OVERFLOW.XY.HIDDEN,
+      ]"
+      @click="expandOptions"
+    >
+      <div :class="[CSS.DISPLAY.FLEX, CSS.FLEX.DIRECTION.COLUMN, CSS.WIDTH.FULL]">
+        <label
+          :class="[
+            hasMinilabel ? ['minilabel', CSS.FONT.ROLE.LABEL_3] : CSS.FONT.ROLE.LABEL_1,
+            CSS.POSITION.ABSOLUTE,
+            CSS.POSITIONING.LEFT,
+            CSS.MARGIN.TOP.HALF,
+            CSS.MARGIN.LEFT.ONE,
+            !hasError && CSS.FONT.COLOR.SURFACE.VARIANT,
+            CSS.POINTER_EVENTS.OFF,
+          ]"
+          :for="props.inputId"
+          v-if="label"
+        >
+          {{ formattedLabel }}
+        </label>
+
+        <select
+          :class="[
+            CSS.PADDING.BOTTOM.HALF,
+            CSS.PADDING.X.ONE,
+            CSS.WIDTH.FULL,
+            disabled && CSS.CURSOR.NOT_ALLOWED,
+            CSS.FONT.ROLE.BODY_1,
+          ]"
+          :disabled="disabled"
+          :name="name"
+          ref="input"
+          :required="required"
+          @focus="handleFocus"
+          @focusout="handleFocusOut"
+          :id="props.inputId"
+          v-model="value"
+        >
+          <template v-for="optgroup in props.optgroups">
+            <optgroup
+              :class="[CSS.WIDTH.FULL, CSS.BG.SURFACE.DEFAULT]"
+              :key="(optgroup as SelectOptionGroup).label"
+              :label="(optgroup as SelectOptionGroup).label"
+              v-if="(optgroup as SelectOptionGroup).options"
+            >
+              <option
+                :class="[CSS.WIDTH.FULL, CSS.BG.SURFACE.DEFAULT]"
+                :key="option.value"
+                :value="option.value"
+                v-for="option in (optgroup as SelectOptionGroup).options"
+              >
+                {{ option.label }}
+              </option>
+            </optgroup>
+
+            <option
+              :class="[CSS.WIDTH.FULL, CSS.BG.SURFACE.DEFAULT]"
+              :key="(optgroup as SelectOption).value"
+              :selected="value === (optgroup as SelectOption).value ? true : undefined"
+              :value="(optgroup as SelectOption).value"
+              v-else
+            >
+              {{ (optgroup as SelectOption).label }}
+            </option>
+          </template>
+
+          <option
+            :class="[CSS.WIDTH.FULL, CSS.BG.SURFACE.DEFAULT]"
+            :key="option.value"
+            :selected="value === option.value ? true : undefined"
+            :value="option.value"
+            v-for="option in options"
+          >
+            {{ option.label }}
+          </option>
+        </select>
+      </div>
+
+      <TideIcon
+        :class="[CSS.POSITION.ABSOLUTE, CSS.POSITIONING.RIGHT, CSS.MARGIN.RIGHT.ONE, CSS.POINTER_EVENTS.OFF]"
+        :icon="ICON.EXPAND_MORE"
+        :size="SIZE.SMALL"
+      />
+    </div>
+
+    <div
+      :class="[CSS.DISPLAY.FLEX, CSS.AXIS2.CENTER, CSS.GAP.QUARTER]"
+      v-if="props.supportingText || hasError"
+    >
+      <TideIcon
+        :class="[]"
+        :icon="ICON.ERROR"
+        :size="SIZE.SMALL"
+        v-if="hasError"
+      />
+
+      <div :class="[CSS.FONT.ROLE.LABEL_3]">
+        {{ hasError ? errorMessage : props.supportingText }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+  select {
+    appearance: none;
+  }
+
+  label {
+    height: 1.1875rem;
+    transition: font-size var(--tide-animate), transform var(--tide-animate);
+  }
+
+  label:not(.minilabel) {
+    transform: translate(0, calc(9 / 16 * 1rem));
+  }
+
+  .tide-input-select.disabled {
+    opacity: var(--tide-disabled);
+  }
+
+  .tide-input-select.error .tide-input-border {
+    outline-color: var(--tide-error-border);
+    background-color: var(--tide-error-surface);
+  }
+
+  .tide-input-select.error:focus-within .tide-input-border {
+    outline-color: var(--tide-error-border);
+  }
+
+  .tide-input-select:focus-within .tide-input-border {
+    --tide-input-outline-width: var(--tide-border-width-2);
+    outline-color: var(--tide-surface-border-high);
+  }
+
+  .tide-input-border {
+    --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);
+  }
+
+  .tide-input-select.error {
+    color: var(--tide-error-primary);
+  }
+
+  .tide-input-select.error option {
+    color: var(--tide-on-surface);
+  }
+
+  select {
+    padding-top: 27px;
+  }
+</style>

package/src/components/TideInputSupportingText.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+  import TideIcon from '@/components/TideIcon.vue';
+  import { ICON } from '@/types/Icon';
+  import { SIZE } from '@/types/Size';
+  import { CSS } from '@/types/Styles';
+
+  type Props = {
+    isError: boolean;
+    message: string;
+  };
+  defineProps<Props>();
+</script>
+
+<template>
+  <div
+    :class="[
+      CSS.DISPLAY.FLEX,
+      CSS.AXIS2.CENTER,
+      CSS.GAP.QUARTER,
+      CSS.FONT.ROLE.LABEL_3,
+      isError ? [CSS.FONT.COLOR.GLOBAL.ERROR] : [CSS.FONT.COLOR.SURFACE.DEFAULT],
+    ]"
+  >
+    <TideIcon
+      :class="[CSS.FLEX.SHRINK.OFF]"
+      :icon="ICON.ERROR"
+      :size="SIZE.SMALL"
+      v-if="isError"
+    />
+
+    <div>
+      {{ message }}
+    </div>
+  </div>
+</template>