tide-design-system 2.5.13 → 2.5.14

package/src/components/TideInputSelectDeprecated.vue

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

@@ -1,44 +0,0 @@
-<script lang="ts">
-  /**
-   * Renders an input supporting text component.
-   *
-   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tideinputsupportingtext--docs) for TideInputSupportingText
-   */
-  export default {};
-</script>
-
-<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>

package/src/components/TideInputText.vue

@@ -1,382 +0,0 @@
-<script lang="ts">
-  /**
-   * Renders a text input intended to be used in forms.
-   *
-   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tideinputtext--docs) for TideInputText
-   */
-  export default {};
-</script>
-
-<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 { 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 { InputMode, TextInputType } from '@/types/TextInput';
-  import type { ErrorDisplay, ValidationResult, Validator } from '@/types/Validation';
-
-  type Props = {
-    /** Determines whether browser attempts to autocomplete */
-    autocomplete?: boolean;
-
-    /** Determines whether input is interactable */
-    disabled?: boolean;
-
-    /** Overrides the default error message and valid state */
-    error?: string;
-
-    /** Determines whether errors display prior to blur */
-    errorDisplay?: ErrorDisplay;
-
-    /** Determines whether a clear/reset button is shown for the input */
-    hasClear?: boolean;
-
-    /** Icon at left of input value */
-    iconLeading?: Icon;
-
-    /** Unique ID attribute (to bind input label to input) */
-    inputId?: string;
-
-    /** Determines the input editing features offered by the browser */
-    inputmode?: InputMode;
-
-    /** Label content */
-    label?: string;
-
-    /** Applies a maximum character count to the input */
-    maxlength?: number;
-
-    /** Applies a minimum character count to the input */
-    minlength?: number;
-
-    /** Name attribute */
-    name?: string;
-
-    /** Input prefix */
-    prefix?: string;
-
-    /** Determines whether input is required */
-    required?: boolean;
-
-    /** Input suffix (i.e. units) */
-    suffix?: string;
-
-    /** Explainer text beneath input */
-    supportingText?: string;
-
-    /** Determines text formatting applied to input value upon invoking relevant listener event(s) */
-    transformValue?: FormValueTransformer;
-
-    /** Determines the type(s) of values expected by the input */
-    type?: TextInputType;
-
-    /** Determines method(s) used to check for valid input value upon invoking relevant listener event(s) */
-    validators?: Validator[];
-  };
-
-  const props = withDefaults(defineProps<Props>(), {
-    autocomplete: false,
-    disabled: 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,
-    supportingText: undefined,
-    transformValue: undefined,
-    type: TEXT_INPUT_TYPE.TEXT,
-    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 inputElement = ref<HTMLInputElement | null>(null);
-  const isValidating = ref<boolean>(false);
-  const showPassword = ref<boolean>(false);
-
-  const formattedLabel = computed(() => (props.required && props.label ? `${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 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 == null || 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 = () => {
-    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 (props.errorDisplay === ERROR_DISPLAY.LAZY) isValidating.value = true;
-  };
-
-  const handleFieldClick = () => {
-    inputElement.value?.focus();
-  };
-
-  const preventInputFocusLossOnMousedown = (e: MouseEvent) => {
-    if (!hasFocus.value) return;
-    if (e.target !== inputElement.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(
-    [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(
-    () => 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-text',
-      CSS.DISPLAY.FLEX,
-      CSS.FLEX.DIRECTION.COLUMN,
-      CSS.GAP.QUARTER,
-      disabled && 'disabled',
-      showError && '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,
-        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]"
-        :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,
-            !showError && 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,
-              !showError && 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, CSS.FONT.ROLE.BODY_1, disabled && CSS.CURSOR.NOT_ALLOWED]"
-            :disabled="disabled"
-            :inputmode="inputModeAttribute"
-            :maxlength="maxlength"
-            :minlength="minlength"
-            :name="name"
-            ref="inputElement"
-            :required="required"
-            :type="inputType"
-            @focus="handleFocus"
-            @focusout="handleFocusOut"
-            :id="inputId"
-            v-model="modelValue"
-          />
-        </div>
-
-        <div
-          :class="[
-            'tide-input-text-suffix',
-            CSS.FONT.ROLE.BODY_1,
-            !showError && CSS.FONT.COLOR.SURFACE.VARIANT,
-            hasMinilabel ? '' : 'offset',
-          ]"
-          v-if="suffix"
-        >
-          {{ suffix }}
-        </div>
-      </div>
-
-      <button
-        @click="handleClear"
-        type="button"
-        v-if="shouldShowClearButton"
-      >
-        <TideIcon
-          :class="[CSS.MARGIN.FULL.HALF]"
-          :icon="ICON.CLOSE"
-          :size="SIZE.SMALL"
-        />
-      </button>
-
-      <button
-        @click="showPassword = !showPassword"
-        type="button"
-        v-if="shouldShowPasswordButton"
-      >
-        <TideIcon
-          :class="[CSS.MARGIN.FULL.HALF]"
-          :icon="ICON.VISIBILITY"
-          :size="SIZE.SMALL"
-        />
-      </button>
-    </label>
-
-    <TideInputSupportingText
-      :is-error="showError"
-      :message="supportingTextMessage"
-      v-if="supportingTextMessage"
-    />
-  </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>