tide-design-system 2.3.1 → 2.4.1

package/src/components/TideInputTextarea.vue

@@ -1,16 +1,17 @@
 <script lang="ts" setup>
-  import { computed, ref, watch } from 'vue';
+  import { computed, ref, watch, watchEffect } from 'vue';
 
-  import TideIcon from '@/components/TideIcon.vue';
-  import { ICON } from '@/types/Icon';
-  import { SIZE } from '@/types/Size';
+  import TideInputSupportingText from '@/components/TideInputSupportingText.vue';
+  import { useFormContext } from '@/composables/useTideForm';
   import { CSS } from '@/types/Styles';
-  import { getErrorMessage, getFieldHasError, handleFieldValidation } from '@/utilities/validation';
+  import { ERROR_DISPLAY } from '@/types/Validation';
+  import { VALIDATION_RESULT, getFieldValidationResult } from '@/utilities/validation';
 
-  import type { ValidationError } from '@/types/Validation';
+  import type { ErrorDisplay, ValidationResult, Validator } from '@/types/Validation';
 
   type Props = {
-    error?: ValidationError;
+    error?: string;
+    errorDisplay?: ErrorDisplay;
     inputId?: string;
     label?: string;
     maxlength?: number | undefined;
@@ -19,11 +20,12 @@
     required?: boolean;
     rows?: number;
     supportingText?: string;
-    value?: string;
+    validators?: Validator[];
   };
 
   const props = withDefaults(defineProps<Props>(), {
-    error: false,
+    error: '',
+    errorDisplay: ERROR_DISPLAY.LAZY,
     inputId: undefined,
     label: undefined,
     maxlength: undefined,
@@ -32,64 +34,84 @@
     required: false,
     rows: 8,
     supportingText: undefined,
-    value: undefined,
+    validators: undefined,
   });
 
-  const error = ref(props.error);
-  const hasFocus = ref(false);
-  const input = ref<HTMLInputElement | null>(null);
-  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 isValidating = ref<boolean>(false);
+  const textareaElement = ref<HTMLTextAreaElement | 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 !== 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 isEmpty = computed(() => modelValue.value === '');
+  const supportingTextMessage = computed(() => (showError.value && errorRef.value.message) || props.supportingText);
 
   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;
+  };
+
+  const handleFieldClick = () => {
+    textareaElement.value?.focus();
+  };
 
-    if (!value.value) {
-      value.value = '';
-    }
+  const preventTextareaFocusLossOnMousedown = (e: MouseEvent) => {
+    if (!hasFocus.value) return;
+    if (e.target !== textareaElement.value) e.preventDefault();
   };
 
-  const handleValidation = () => {
-    return handleFieldValidation({
-      error,
+  watchEffect(() => {
+    errorRef.value = getFieldValidationResult({
       errorFromProps: props.error,
       maxlength: props.maxlength,
       minlength: props.minlength,
       required: props.required,
-      value,
+      validators: props.validators,
+      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,
-    required: props.required,
-    value,
-  });
+  watch(
+    errorRef,
+    () => {
+      emit('valid', errorRef.value.valid);
+    },
+    { deep: true, immediate: true }
+  );
 </script>
 
 <template>
   <div
-    :class="['tide-input-textarea', CSS.DISPLAY.FLEX, CSS.FLEX.DIRECTION.COLUMN, CSS.GAP.QUARTER, hasError && 'error']"
+    :class="['tide-input-textarea', CSS.DISPLAY.FLEX, CSS.FLEX.DIRECTION.COLUMN, CSS.GAP.QUARTER, showError && 'error']"
   >
     <label
       :class="[
@@ -104,12 +126,14 @@
         CSS.CURSOR.TEXT,
       ]"
       :for="inputId"
+      @click="handleFieldClick"
+      @mousedown="preventTextareaFocusLossOnMousedown"
     >
       <div
         :class="[
           'tide-input-textarea-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.POINTER_EVENTS.OFF,
         ]"
         v-if="label"
@@ -122,31 +146,21 @@
         :maxlength="maxlength"
         :minlength="minlength"
         :name="name"
-        ref="input"
+        ref="textareaElement"
         :required="required"
         :rows="rows"
-        @change="handleValidation"
         @focus="handleFocus"
         @focusout="handleFocusOut"
         :id="inputId"
-        v-model="value"
+        v-model="modelValue"
       />
     </label>
 
-    <div
-      :class="[CSS.DISPLAY.FLEX, CSS.AXIS2.CENTER, CSS.GAP.QUARTER]"
-      v-if="supportingText || hasError"
-    >
-      <TideIcon
-        :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/TideInputTextareaDeprecated.vue

@@ -0,0 +1,198 @@
+<script lang="ts">
+  /**
+   * @deprecated Use `TideInputTextarea.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, handleFieldValidation } from '@/utilities/validation-deprecated';
+
+  import type { ValidationError } from '@/types/ValidationDeprecated';
+
+  type Props = {
+    error?: ValidationError;
+    inputId?: string;
+    label?: string;
+    maxlength?: number | undefined;
+    minlength?: number | undefined;
+    name?: string;
+    required?: boolean;
+    rows?: number;
+    supportingText?: string;
+    value?: string;
+  };
+
+  const props = withDefaults(defineProps<Props>(), {
+    error: false,
+    inputId: undefined,
+    label: undefined,
+    maxlength: undefined,
+    minlength: undefined,
+    name: undefined,
+    required: false,
+    rows: 8,
+    supportingText: undefined,
+    value: undefined,
+  });
+
+  const error = ref(props.error);
+  const hasFocus = ref(false);
+  const input = ref<HTMLInputElement | null>(null);
+  const value = ref(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 !== undefined && !value.value) || getFieldHasError(error.value, props.error)
+  );
+  const hasMinilabel = computed(() => hasFocus.value || !isEmpty.value);
+  const isEmpty = computed(() => value.value === '' || value.value === undefined);
+
+  const handleFocus = () => {
+    hasFocus.value = true;
+  };
+
+  const handleFocusOut = () => {
+    hasFocus.value = false;
+
+    if (!value.value) {
+      value.value = '';
+    }
+  };
+
+  const handleValidation = () => {
+    return handleFieldValidation({
+      error,
+      errorFromProps: props.error,
+      maxlength: props.maxlength,
+      minlength: props.minlength,
+      required: props.required,
+      value,
+    });
+  };
+
+  watch(
+    () => props.value,
+    (newValue, oldValue) => {
+      if (newValue !== oldValue || newValue !== value.value) {
+        value.value = newValue;
+      }
+    }
+  );
+
+  defineExpose({
+    error,
+    required: props.required,
+    value,
+  });
+</script>
+
+<template>
+  <div
+    :class="['tide-input-textarea', CSS.DISPLAY.FLEX, CSS.FLEX.DIRECTION.COLUMN, CSS.GAP.QUARTER, hasError && 'error']"
+  >
+    <label
+      :class="[
+        'tide-input-textarea-field',
+        CSS.GAP.HALF,
+        CSS.POSITION.RELATIVE,
+        CSS.BORDER.RADIUS.HALF,
+        CSS.PADDING.LEFT.ONE,
+        CSS.PADDING.TOP.HALF,
+        CSS.OVERFLOW.XY.HIDDEN,
+        CSS.BG.SURFACE.DEFAULT,
+        CSS.CURSOR.TEXT,
+      ]"
+      :for="inputId"
+    >
+      <div
+        :class="[
+          'tide-input-textarea-label',
+          hasMinilabel ? ['minilabel', CSS.FONT.ROLE.LABEL_3] : CSS.FONT.ROLE.LABEL_1,
+          !hasError && CSS.FONT.COLOR.SURFACE.VARIANT,
+          CSS.POINTER_EVENTS.OFF,
+        ]"
+        v-if="label"
+      >
+        {{ formattedLabel }}
+      </div>
+
+      <textarea
+        :class="[CSS.DISPLAY.BLOCK, CSS.WIDTH.FULL, CSS.FONT.ROLE.BODY_1]"
+        :maxlength="maxlength"
+        :minlength="minlength"
+        :name="name"
+        ref="input"
+        :required="required"
+        :rows="rows"
+        @change="handleValidation"
+        @focus="handleFocus"
+        @focusout="handleFocusOut"
+        :id="inputId"
+        v-model="value"
+      />
+    </label>
+
+    <div
+      :class="[CSS.DISPLAY.FLEX, CSS.AXIS2.CENTER, CSS.GAP.QUARTER]"
+      v-if="supportingText || hasError"
+    >
+      <TideIcon
+        :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>
+  textarea {
+    resize: vertical;
+  }
+
+  .tide-input-textarea-label {
+    height: 1.1875rem;
+    transition: font-size var(--tide-animate), transform var(--tide-animate);
+  }
+
+  .tide-input-textarea.error {
+    color: var(--tide-error-primary);
+  }
+
+  .tide-input-textarea.error .tide-input-textarea-field {
+    outline-color: var(--tide-error-border);
+    background-color: var(--tide-error-surface);
+  }
+
+  .tide-input-textarea.error:focus-within .tide-input-textarea-field {
+    outline-color: var(--tide-error-border);
+  }
+
+  .tide-input-textarea:focus-within .tide-input-textarea-field {
+    --tide-input-outline-width: var(--tide-border-width-2);
+    outline-color: var(--tide-surface-border-high);
+  }
+
+  .tide-input-textarea textarea {
+    outline: none;
+  }
+
+  .tide-input-textarea-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>

package/src/components/TideSwitch.vue

@@ -68,7 +68,7 @@
   }
 
   .tide-switch:disabled {
-    opacity: 0.32;
+    opacity: var(--tide-opacity);
   }
 
   .tide-switch.active {

package/src/composables/useTideForm.ts

@@ -0,0 +1,25 @@
+import { inject, provide, ref } from 'vue';
+
+import type { Ref } from 'vue';
+
+type TideFormContext = {
+  forceShowErrors: Ref<boolean>;
+};
+
+const FORM_KEY = Symbol('tide-form');
+
+export const useTideForm = () => {
+  const forceShowErrors = ref<boolean>(false);
+
+  provide<TideFormContext>(FORM_KEY, { forceShowErrors });
+
+  const revealValidationErrors = () => {
+    forceShowErrors.value = true;
+  };
+
+  return { revealValidationErrors };
+};
+
+export const useFormContext = () => {
+  return inject<TideFormContext>(FORM_KEY);
+};