tide-design-system 2.5.13 → 2.5.14

package/src/components/TideInputCheckboxDeprecated.vue

@@ -1,117 +0,0 @@
-<script lang="ts">
-  /**
-   * @deprecated Use `TideInputCheckbox.vue` imported from 'tide-design-system' npm package instead.
-   */
-  export default {};
-</script>
-
-<script lang="ts" setup>
-  import { computed } from 'vue';
-
-  import TideIcon from '@/components/TideIcon.vue';
-  import { ICON } from '@/types/Icon';
-  import { SIZE } from '@/types/Size';
-  import { CSS } from '@/types/Styles';
-  import { formatNumber } from '@/utilities/format';
-
-  type Props = {
-    checked?: boolean;
-    disabled?: boolean;
-    indeterminate?: boolean;
-    inputId?: string;
-    label?: string;
-    name?: string;
-    number?: number;
-  };
-
-  const props = withDefaults(defineProps<Props>(), {
-    checked: false,
-    disabled: false,
-    indeterminate: false,
-    inputId: undefined,
-    label: undefined,
-    name: undefined,
-    number: undefined,
-  });
-
-  const isChecked = computed(() => props.checked || props.indeterminate);
-</script>
-
-<template>
-  <div
-    :class="[
-      'tide-input-checkbox',
-      CSS.DISPLAY.FLEX,
-      CSS.AXIS2.CENTER,
-      CSS.GAP.HALF,
-      CSS.FONT.ROLE.BODY_1,
-      disabled ? ['disabled', CSS.POINTER_EVENTS.OFF] : CSS.CURSOR.POINTER,
-    ]"
-  >
-    <input
-      :checked="isChecked"
-      :class="[CSS.DISPLAY.NONE]"
-      :disabled="props.disabled"
-      :name="props.name"
-      ref="input"
-      @click.prevent
-      :id="props.inputId"
-      type="checkbox"
-    />
-
-    <div
-      :class="[
-        'tide-input-checkbox-custom',
-        CSS.POSITION.RELATIVE,
-        CSS.DISPLAY.FLEX,
-        CSS.AXIS1.CENTER,
-        CSS.AXIS2.CENTER,
-        CSS.FLEX.SHRINK.OFF,
-        CSS.BORDER.FULL.ONE,
-        isChecked ? [CSS.BORDER.COLOR.HIGH, CSS.BG.SECONDARY] : [CSS.BORDER.COLOR.DEFAULT, CSS.BG.SURFACE.DEFAULT],
-        CSS.BORDER.RADIUS.QUARTER,
-        isChecked && 'checked',
-        disabled ? CSS.CURSOR.NOT_ALLOWED : CSS.CURSOR.POINTER,
-      ]"
-    >
-      <TideIcon
-        :class="[CSS.FONT.COLOR.SECONDARY]"
-        :icon="props.indeterminate ? ICON.REMOVE : ICON.CHECK"
-        :size="SIZE.SMALL"
-        v-if="isChecked"
-      />
-    </div>
-
-    <label
-      :class="[
-        CSS.DISPLAY.FLEX,
-        CSS.AXIS1.BETWEEN,
-        CSS.FLEX.GROW.ON,
-        CSS.FONT.ROLE.BODY_1,
-        disabled ? CSS.CURSOR.NOT_ALLOWED : CSS.CURSOR.POINTER,
-      ]"
-      :for="props.inputId"
-      @click.prevent
-      v-if="label"
-    >
-      <span>{{ label }}</span>
-      <span
-        :class="[CSS.FONT.COLOR.SURFACE.VARIANT]"
-        v-if="props.number"
-      >
-        ({{ formatNumber(props.number) }})
-      </span>
-    </label>
-  </div>
-</template>
-
-<style scoped>
-  .tide-input-checkbox.disabled {
-    opacity: var(--tide-disabled);
-  }
-
-  .tide-input-checkbox-custom {
-    width: 24px;
-    height: 24px;
-  }
-</style>

package/src/components/TideInputRadio.vue

@@ -1,115 +0,0 @@
-<script lang="ts">
-  /**
-   * Renders an input radio component.
-   *
-   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tideinputradio--docs) for TideInputRadio
-   */
-  export default {};
-</script>
-
-<script lang="ts" setup>
-  import { computed } from 'vue';
-
-  import { CSS } from '@/types/Styles';
-  import { formatNumber } from '@/utilities/format';
-
-  type Props = {
-    /** Determines whether input is interactable */
-    disabled?: boolean;
-
-    /** Unique ID attribute (to bind input label to input) */
-    inputId?: string;
-
-    /** Label content */
-    label: string;
-
-    /** Name attribute */
-    name: string;
-
-    /** Parenthetical response count */
-    number?: number;
-
-    /** Value attribute */
-    value: string;
-  };
-
-  const props = withDefaults(defineProps<Props>(), {
-    disabled: false,
-    inputId: undefined,
-    label: undefined,
-    number: undefined,
-  });
-
-  const modelValue = defineModel<string>({ required: true });
-
-  const isChecked = computed(() => modelValue.value === props.value);
-</script>
-
-<template>
-  <label
-    :class="[
-      'tide-input-radio',
-      CSS.DISPLAY.FLEX,
-      CSS.AXIS2.CENTER,
-      CSS.GAP.HALF,
-      CSS.USER_SELECT.NONE,
-      props.disabled ? [CSS.OPACITY.DISABLED, CSS.CURSOR.NOT_ALLOWED] : [CSS.CURSOR.POINTER],
-    ]"
-    :for="props.inputId"
-  >
-    <input
-      :class="['tide-screen-reader-only']"
-      :disabled="disabled"
-      :name="name"
-      :value="value"
-      :id="props.inputId"
-      type="radio"
-      v-model="modelValue"
-    />
-
-    <div
-      :class="[
-        'tide-input-radio-custom',
-        CSS.POSITION.RELATIVE,
-        CSS.DISPLAY.FLEX,
-        CSS.AXIS1.CENTER,
-        CSS.AXIS2.CENTER,
-        CSS.BORDER.FULL.ONE,
-        isChecked ? [CSS.BORDER.COLOR.HIGH] : [CSS.BORDER.COLOR.DEFAULT],
-        CSS.BORDER.RADIUS.FULL,
-        CSS.BG.SURFACE.DEFAULT,
-        CSS.CURSOR.POINTER,
-        CSS.POINTER_EVENTS.ON,
-      ]"
-    >
-      <div :class="['tide-input-radio-check', CSS.BORDER.RADIUS.FULL, isChecked && CSS.BG.SECONDARY]" />
-    </div>
-
-    <div :class="[CSS.DISPLAY.FLEX, CSS.FLEX.GROW.ON, CSS.AXIS1.BETWEEN, CSS.FONT.ROLE.BODY_1]">
-      <span>{{ label }}</span>
-      <span
-        :class="[CSS.FONT.COLOR.SURFACE.VARIANT]"
-        v-if="props.number"
-      >
-        ({{ formatNumber(props.number) }})
-      </span>
-    </div>
-  </label>
-</template>
-
-<style scoped>
-  .tide-input-radio-custom {
-    width: 24px;
-    height: 24px;
-  }
-
-  .tide-input-radio-check {
-    width: 16px;
-    height: 16px;
-  }
-
-  label:has(input:focus-visible) {
-    outline: auto;
-    outline-offset: 2px;
-  }
-</style>

package/src/components/TideInputRadioDeprecated.vue

@@ -1,119 +0,0 @@
-<script lang="ts">
-  /**
-   * @deprecated Use `TideInputRadio.vue` imported from 'tide-design-system' npm package instead.
-   */
-  export default {};
-</script>
-
-<script lang="ts" setup>
-  import { ref, watch } from 'vue';
-
-  import { CSS } from '@/types/Styles';
-  import { formatNumber } from '@/utilities/format';
-
-  type Props = {
-    checked?: boolean;
-    disabled?: boolean;
-    inputId?: string;
-    label?: string;
-    name?: string;
-    number?: number;
-  };
-
-  const props = withDefaults(defineProps<Props>(), {
-    checked: false,
-    disabled: false,
-    inputId: undefined,
-    label: undefined,
-    name: undefined,
-    number: undefined,
-  });
-
-  const checked = ref(props.checked);
-
-  watch(
-    () => props.checked,
-    (newValue, oldValue) => {
-      if (newValue !== oldValue || newValue !== checked.value) {
-        checked.value = newValue;
-      }
-    }
-  );
-</script>
-
-<template>
-  <div
-    :class="[
-      'tide-input-radio',
-      CSS.DISPLAY.FLEX,
-      CSS.AXIS2.CENTER,
-      CSS.GAP.HALF,
-      CSS.POINTER_EVENTS.OFF,
-      props.disabled && 'disabled',
-    ]"
-  >
-    <input
-      :checked="checked"
-      :class="[CSS.DISPLAY.NONE]"
-      :id="props.inputId"
-      name=""
-      type="radio"
-      value=""
-    />
-
-    <div
-      :class="[
-        'tide-input-radio-custom',
-        CSS.POSITION.RELATIVE,
-        CSS.DISPLAY.FLEX,
-        CSS.AXIS1.CENTER,
-        CSS.AXIS2.CENTER,
-        CSS.BORDER.FULL.ONE,
-        checked ? CSS.BORDER.COLOR.HIGH : CSS.BORDER.COLOR.DEFAULT,
-        CSS.BORDER.RADIUS.FULL,
-        CSS.BG.SURFACE.DEFAULT,
-        CSS.CURSOR.POINTER,
-        CSS.POINTER_EVENTS.ON,
-        checked && 'checked',
-      ]"
-    >
-      <div :class="['tide-input-radio-check', CSS.BORDER.RADIUS.FULL, props.checked && CSS.BG.SECONDARY]" />
-    </div>
-
-    <label
-      :class="[
-        CSS.DISPLAY.FLEX,
-        CSS.FLEX.GROW.ON,
-        CSS.AXIS1.BETWEEN,
-        CSS.FONT.ROLE.BODY_1,
-        CSS.CURSOR.POINTER,
-        CSS.POINTER_EVENTS.ON,
-      ]"
-      :for="props.inputId"
-    >
-      <span>{{ label }}</span>
-      <span
-        :class="[CSS.FONT.COLOR.SURFACE.VARIANT]"
-        v-if="props.number"
-      >
-        ({{ formatNumber(props.number) }})
-      </span>
-    </label>
-  </div>
-</template>
-
-<style scoped>
-  .tide-input-radio.disabled {
-    opacity: var(--tide-disabled);
-  }
-
-  .tide-input-radio-custom {
-    width: 24px;
-    height: 24px;
-  }
-
-  .tide-input-radio-check {
-    width: 16px;
-    height: 16px;
-  }
-</style>

package/src/components/TideInputSelect.vue

@@ -1,331 +0,0 @@
-<script lang="ts">
-  /**
-   * Renders a select input intended to be used in forms.
-   *
-   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tideinputselect--docs) for TideInputSelect
-   */
-  export default {};
-</script>
-
-<script lang="ts" setup>
-  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 { ERROR_DISPLAY } from '@/types/Validation';
-  import { VALIDATION_RESULT, getFieldValidationResult } from '@/utilities/validation';
-
-  import type { SelectOption, SelectOptionGroup } from '@/types/Select';
-  import type { ErrorDisplay, ValidationResult } from '@/types/Validation';
-
-  type Props = {
-    /** Determines whether Select is interactable */
-    disabled?: boolean;
-
-    /** Overrides the default error message and valid state */
-    error?: string;
-
-    /** Determines whether errors display prior to blur */
-    errorDisplay?: ErrorDisplay;
-
-    /** Label content */
-    label?: string;
-
-    /** Name attribute */
-    name?: string;
-
-    /** Determines grouped values found inside Select */
-    optgroups?: (SelectOption | SelectOptionGroup)[] | readonly (SelectOption | SelectOptionGroup)[];
-
-    /** Determines ungrouped values found inside Select */
-    options?: SelectOption[] | readonly SelectOption[];
-
-    /** Prefix content */
-    prefix?: string;
-
-    /** Determines whether Select is required */
-    required?: boolean;
-
-    /** Suffix content */
-    suffix?: string;
-
-    /** Explainer text beneath input */
-    supportingText?: string;
-  };
-
-  const props = withDefaults(defineProps<Props>(), {
-    disabled: false,
-    error: '',
-    errorDisplay: ERROR_DISPLAY.LAZY,
-    inputId: undefined,
-    label: undefined,
-    name: undefined,
-    optgroups: undefined,
-    options: undefined,
-    prefix: undefined,
-    required: false,
-    suffix: undefined,
-    supportingText: 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 inputId = useId();
-  const isValidating = ref<boolean>(false);
-  const selectElement = ref<HTMLSelectElement | 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 == null || modelValue.value === '');
-  const supportingTextMessage = computed(() => (showError.value && errorRef.value.message) || props.supportingText);
-
-  const expandOptions = () => {
-    const event = new MouseEvent('mousedown');
-    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(
-    () => 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-select',
-      CSS.DISPLAY.FLEX,
-      CSS.FLEX.DIRECTION.COLUMN,
-      CSS.GAP.QUARTER,
-      disabled && 'disabled',
-      showError && '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,
-        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,
-            !showError && CSS.FONT.COLOR.SURFACE.VARIANT,
-            CSS.POINTER_EVENTS.OFF,
-          ]"
-          :for="inputId"
-          v-if="label"
-        >
-          {{ formattedLabel }}
-        </label>
-
-        <div :class="[CSS.DISPLAY.FLEX, CSS.AXIS2.CENTER, CSS.WIDTH.FULL, CSS.GAP.HALF]">
-          <span
-            :class="[CSS.FONT.ROLE.BODY_1, CSS.MARGIN.LEFT.ONE, CSS.POINTER_EVENTS.OFF, label && CSS.MARGIN.TOP.ONE]"
-            v-if="prefix"
-          >
-            {{ prefix }}
-          </span>
-
-          <select
-            :class="[
-              CSS.PADDING.BOTTOM.HALF,
-              CSS.PADDING.TOP.ONE,
-              CSS.PADDING.RIGHT.TWO,
-              CSS.WIDTH.FULL,
-              CSS.FONT.ROLE.BODY_1,
-              disabled && CSS.CURSOR.NOT_ALLOWED,
-              prefix ? CSS.PADDING.LEFT.ZERO : CSS.PADDING.LEFT.ONE,
-            ]"
-            :disabled="disabled"
-            :name="name"
-            ref="selectElement"
-            :required="required"
-            @focus="handleFocus"
-            @focusout="handleFocusOut"
-            :id="inputId"
-            v-model="modelValue"
-          >
-            <template v-for="optgroup in optgroups">
-              <optgroup
-                :class="[CSS.WIDTH.FULL, CSS.BG.SURFACE.DEFAULT]"
-                :key="`group-${(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="`option-${(optgroup as SelectOption).value}`"
-                :selected="modelValue === (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="modelValue === option.value ? true : undefined"
-              :value="option.value"
-              v-for="option in options"
-            >
-              {{ option.label }}
-            </option>
-          </select>
-        </div>
-      </div>
-      <div
-        :class="[
-          CSS.POSITION.ABSOLUTE,
-          CSS.POSITIONING.RIGHT,
-          CSS.FONT.ROLE.BODY_1,
-          CSS.MARGIN.RIGHT.TWO,
-          CSS.POINTER_EVENTS.OFF,
-          label && CSS.MARGIN.TOP.ONE,
-        ]"
-        v-if="suffix"
-      >
-        <span :class="CSS.PADDING.RIGHT.ONE">
-          {{ suffix }}
-        </span>
-      </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>
-
-    <TideInputSupportingText
-      :is-error="showError"
-      :message="supportingTextMessage"
-      v-if="supportingTextMessage"
-    />
-  </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>