tide-design-system 2.5.13 → 2.5.14

package/src/components/TideInputTextDeprecated.vue

@@ -1,327 +0,0 @@
-<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,
-    name: 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"
-        type="button"
-        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"
-        type="button"
-        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-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-on-surface);
-  }
-</style>

package/src/components/TideInputTextarea.vue

@@ -1,235 +0,0 @@
-<script lang="ts">
-  /**
-   * Renders a textarea input intended to be used in forms.
-   *
-   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tideinputtextarea--docs) for TideInputTextarea
-   */
-  export default {};
-</script>
-
-<script lang="ts" setup>
-  import { computed, ref, watch, watchEffect } from 'vue';
-
-  import TideInputSupportingText from '@/components/TideInputSupportingText.vue';
-  import { useFormContext } from '@/composables/useTideForm';
-  import { CSS } from '@/types/Styles';
-  import { ERROR_DISPLAY } from '@/types/Validation';
-  import { VALIDATION_RESULT, getFieldValidationResult } from '@/utilities/validation';
-
-  import type { ErrorDisplay, ValidationResult, Validator } from '@/types/Validation';
-
-  type Props = {
-    /** Overrides the default error message and valid state */
-    error?: string;
-
-    /** Determines whether errors display prior to blur */
-    errorDisplay?: ErrorDisplay;
-
-    /** Unique ID attribute (to bind input label to input) */
-    inputId?: string;
-
-    /** Label content */
-    label?: string;
-
-    /** Applies a maximum character count to the input */
-    maxlength?: number | undefined;
-
-    /** Applies a minimum character count to the input */
-    minlength?: number | undefined;
-
-    /** Name attribute */
-    name?: string;
-
-    /** Determines whether input is required */
-    required?: boolean;
-
-    /** Determines the height of the input */
-    rows?: number;
-
-    /** Explainer text beneath input */
-    supportingText?: string;
-
-    /** Determines method(s) used to check for valid input value upon invoking relevant listener event(s) */
-    validators?: Validator[];
-  };
-
-  const props = withDefaults(defineProps<Props>(), {
-    error: '',
-    errorDisplay: ERROR_DISPLAY.LAZY,
-    inputId: undefined,
-    label: undefined,
-    maxlength: undefined,
-    minlength: undefined,
-    name: undefined,
-    required: false,
-    rows: 8,
-    supportingText: undefined,
-    validators: undefined,
-  });
-
-  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 formattedLabel = computed(() => (props.required ? `${props.label} *` : props.label));
-  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(() => 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();
-  };
-
-  const preventTextareaFocusLossOnMousedown = (e: MouseEvent) => {
-    if (!hasFocus.value) return;
-    if (e.target !== textareaElement.value) e.preventDefault();
-  };
-
-  watchEffect(() => {
-    errorRef.value = getFieldValidationResult({
-      errorFromProps: props.error,
-      maxlength: props.maxlength,
-      minlength: props.minlength,
-      required: props.required,
-      validators: props.validators,
-      value: modelValue,
-    });
-  });
-
-  watch(
-    () => formContext?.forceShowErrors.value,
-    (newValue) => {
-      if (newValue) isValidating.value = true;
-    },
-    { immediate: true }
-  );
-
-  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, showError && 'error']"
-  >
-    <label
-      :class="[
-        'tide-input-textarea-field',
-        CSS.GAP.HALF,
-        CSS.POSITION.RELATIVE,
-        CSS.BORDER.RADIUS.HALF,
-        CSS.PADDING.TOP.HALF,
-        CSS.OVERFLOW.XY.HIDDEN,
-        CSS.BG.SURFACE.DEFAULT,
-        CSS.CURSOR.TEXT,
-      ]"
-      :for="inputId"
-      @click="handleFieldClick"
-      @mousedown="preventTextareaFocusLossOnMousedown"
-    >
-      <div
-        :class="[
-          'tide-input-textarea-label',
-          CSS.PADDING.X.ONE,
-          hasMinilabel ? ['minilabel', CSS.FONT.ROLE.LABEL_3] : CSS.FONT.ROLE.LABEL_1,
-          !showError && CSS.FONT.COLOR.SURFACE.VARIANT,
-          CSS.POINTER_EVENTS.OFF,
-        ]"
-        v-if="label"
-      >
-        {{ formattedLabel }}
-      </div>
-
-      <textarea
-        :class="[CSS.DISPLAY.BLOCK, CSS.FONT.ROLE.BODY_1, CSS.PADDING.X.ONE, CSS.WIDTH.FULL]"
-        :maxlength="maxlength"
-        :minlength="minlength"
-        :name="name"
-        ref="textareaElement"
-        :required="required"
-        :rows="rows"
-        @focus="handleFocus"
-        @focusout="handleFocusOut"
-        :id="inputId"
-        v-model="modelValue"
-      />
-    </label>
-
-    <TideInputSupportingText
-      :is-error="showError"
-      :message="supportingTextMessage"
-      v-if="supportingTextMessage"
-    />
-  </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-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-on-surface);
-  }
-</style>