tide-design-system 2.5.13 → 2.5.14

package/src/components/TideInputTextareaDeprecated.vue

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

package/src/components/TideLink.vue

@@ -1,95 +0,0 @@
-<script lang="ts">
-  /**
-   * Renders a link element.
-   *
-   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidelink--docs) for TideLink
-   */
-  export default {};
-</script>
-
-<script lang="ts" setup>
-  import { computed } from 'vue';
-
-  import InternalBaseLink from '@/components/InternalBaseLink.vue';
-  import TideIcon from '@/components/TideIcon.vue';
-  import { ELEMENT } from '@/types/Element';
-  import { SIZE } from '@/types/Size';
-  import { CSS } from '@/types/Styles';
-  import { TARGET } from '@/types/Target';
-
-  import type { Element } from '@/types/Element';
-  import type { Icon } from '@/types/Icon';
-  import type { Size } from '@/types/Size';
-
-  type Props = {
-    /** HTML tag type */
-    element?: Element;
-
-    /** URL to open (Link only) */
-    href?: string;
-
-    /** Icon to left of label */
-    iconLeading?: Icon;
-
-    /** Size of the icons */
-    iconSize?: Size;
-
-    /** Icon to right of label */
-    iconTrailing?: Icon;
-
-    /** Determines whether to target a new browser tab (Link only) */
-    isNewTab?: boolean;
-
-    /** Link text */
-    label: string;
-
-    /** Hides the underline until hovered, de-emphasizing the link */
-    subtle?: boolean;
-  };
-
-  const props = withDefaults(defineProps<Props>(), {
-    element: ELEMENT.LINK,
-    href: undefined,
-    iconLeading: undefined,
-    iconSize: SIZE.SMALL,
-    iconTrailing: undefined,
-    isNewTab: false,
-    label: undefined,
-    subtle: false,
-  });
-
-  const rootElement = computed(() => (props.element === ELEMENT.LINK ? InternalBaseLink : props.element));
-</script>
-
-<template>
-  <component
-    :class="[
-      'tide-link',
-      CSS.DISPLAY.INLINE,
-      CSS.ALIGN.X.LEFT,
-      subtle ? [CSS.UNDERLINE.REST.OFF, CSS.UNDERLINE.HOVER.ON] : [CSS.UNDERLINE.REST.ON, CSS.UNDERLINE.HOVER.OFF],
-    ]"
-    :href="props.href"
-    :target="props.isNewTab ? TARGET.BLANK : TARGET.SELF"
-    :type="element === ELEMENT.BUTTON ? ELEMENT.BUTTON : undefined"
-    :is="rootElement"
-  >
-    <TideIcon
-      :class="[CSS.DISPLAY.INLINE_BLOCK, CSS.ALIGN.Y.MIDDLE, CSS.MARGIN.RIGHT.QUARTER, CSS.POINTER_EVENTS.OFF]"
-      :icon="props.iconLeading"
-      :size="iconSize"
-      v-if="props.iconLeading"
-    />
-
-    <span :class="[CSS.ALIGN.Y.MIDDLE]">
-      {{ props.label }}
-    </span>
-
-    <TideIcon
-      :class="[CSS.DISPLAY.INLINE_BLOCK, CSS.ALIGN.Y.MIDDLE, CSS.MARGIN.LEFT.QUARTER, CSS.POINTER_EVENTS.OFF]"
-      :icon="props.iconTrailing"
-      :size="iconSize"
-      v-if="props.iconTrailing"
-    />
-  </component>
-</template>

package/src/components/TideMenuItem.vue

@@ -1,83 +0,0 @@
-<script lang="ts">
-  /**
-   * Renders a generic menu item intended to be used in navigation menus or dropdowns.
-   *
-   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidemenuitem--docs) for TideMenuItem
-   */
-  export default {};
-</script>
-
-<script setup lang="ts">
-  import TideIcon from '@/components/TideIcon.vue';
-  import { ELEMENT } from '@/types/Element';
-  import { SIZE } from '@/types/Size';
-  import { CSS } from '@/types/Styles';
-  import { TARGET } from '@/types/Target';
-
-  import type { Element } from '@/types/Element';
-  import type { Icon } from '@/types/Icon';
-
-  type Props = {
-    /** The element to render the root element as. */
-    element?: Element;
-
-    /** The href attribute to apply when the element is a link. */
-    href?: string;
-
-    /** Whether to open link in a new tab. */
-    isNewTab?: boolean;
-
-    /** Icon to show after the label. */
-    iconTrailing?: Icon;
-
-    /** The label to be displayed. */
-    label: string;
-  };
-
-  withDefaults(defineProps<Props>(), {
-    element: ELEMENT.LINK,
-    href: undefined,
-    iconTrailing: undefined,
-    isNewTab: false,
-  });
-</script>
-
-<template>
-  <component
-    :class="[
-      'tide-menu-item',
-      CSS.AXIS2.CENTER,
-      CSS.BORDER.RADIUS.ZERO,
-      CSS.DISPLAY.FLEX,
-      CSS.ELLIPSIS,
-      CSS.FONT.ROLE.LABEL_1,
-      CSS.GAP.QUARTER,
-      CSS.PADDING.X.ONE,
-      CSS.PADDING.Y.HALF,
-      CSS.UNDERLINE.REST.OFF,
-      CSS.WIDTH.FULL,
-    ]"
-    :href="href"
-    :target="isNewTab ? TARGET.BLANK : undefined"
-    :is="element"
-  >
-    <span>{{ label }}</span>
-
-    <TideIcon
-      :class="[CSS.MARGIN.LEFT.AUTO]"
-      :icon="iconTrailing"
-      :size="SIZE.LARGE"
-      v-if="iconTrailing"
-    />
-  </component>
-</template>
-
-<style scoped>
-  .tide-menu-item {
-    height: 40px;
-  }
-
-  .tide-menu-item:hover {
-    background-color: var(--tide-surface-variant);
-  }
-</style>

package/src/components/TideModal.vue

@@ -1,281 +0,0 @@
-<script lang="ts">
-  /**
-   * Renders a modal intended to be used for displaying additional information or options.
-   *
-   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidemodal--docs) for TideModal
-   */
-  export default {};
-</script>
-
-<script lang="ts" setup>
-  import { nextTick, onBeforeMount, onBeforeUnmount, onMounted, ref, watch } from 'vue';
-
-  import TideButtonIcon from '@/components/TideButtonIcon.vue';
-  import { BREAKPOINT } from '@/types/Breakpoint';
-  import { ICON } from '@/types/Icon';
-  import { PRIORITY } from '@/types/Priority';
-  import { CSS } from '@/types/Styles';
-  import { TOP_LAYER_ID, initFauxTopLayer, setScrollLock } from '@/utilities/viewport';
-
-  import type { Ref } from 'vue';
-
-  type Props = {
-    /**
-     * Called before the modal closes.
-     *
-     * Return `false` to cancel the close event.
-     */
-    beforeClose?: () => void | boolean | Promise<void | boolean>;
-    /** Controls display of the back button. */
-    isBackButton?: boolean;
-    /** Controls whether the modal can be dismissed with a close button or other gestures. */
-    isDismissible?: boolean;
-    /** The title to display in the modal's header. */
-    title?: string;
-    /** Custom override to the modal's width constraint. Include units. */
-    width?: string;
-  };
-
-  const props = withDefaults(defineProps<Props>(), {
-    beforeClose: undefined,
-    isBackButton: false,
-    isDismissible: true,
-    title: undefined,
-    width: undefined,
-  });
-
-  type Emits = {
-    (e: 'back'): void;
-  };
-
-  const emit = defineEmits<Emits>();
-
-  const modalContent: Ref<HTMLDivElement | undefined> = ref();
-  const modalDialog: Ref<HTMLDialogElement | undefined> = ref();
-
-  const isOpen = defineModel<boolean>({ required: true });
-
-  const triggerNativeDialogOpen = () => {
-    modalDialog.value?.showModal();
-    setScrollLock(true);
-  };
-
-  const triggerNativeDialogClose = () => {
-    modalDialog.value?.close();
-    setScrollLock(false);
-  };
-
-  const scrollContentToTop = () => {
-    nextTick(() => {
-      if (!modalContent.value) return;
-      modalContent.value.scrollTop = 0;
-    });
-  };
-
-  const close = async () => {
-    if (props.beforeClose) {
-      const result = await props.beforeClose();
-      if (result === false) return;
-    }
-
-    isOpen.value = false;
-  };
-
-  const handleBackdropClick = () => {
-    if (props.isDismissible) close();
-  };
-
-  const handleEscapeKeydown = (e: Event) => {
-    e.preventDefault();
-    if (props.isDismissible) close();
-  };
-
-  watch(isOpen, () => {
-    if (!modalDialog.value) return;
-    if (isOpen.value) {
-      triggerNativeDialogOpen();
-      scrollContentToTop();
-    } else {
-      triggerNativeDialogClose();
-    }
-  });
-
-  onBeforeMount(() => {
-    initFauxTopLayer();
-  });
-
-  onMounted(() => {
-    if (isOpen.value) {
-      triggerNativeDialogOpen();
-    }
-  });
-
-  onBeforeUnmount(() => {
-    if (isOpen.value) {
-      isOpen.value = false;
-      triggerNativeDialogClose();
-    }
-  });
-</script>
-
-<template>
-  <Teleport :to="`#${TOP_LAYER_ID}`">
-    <dialog
-      :class="['tide-modal', CSS.BG.INITIAL, CSS.HEIGHT.FULL, CSS.WIDTH.FULL, CSS.OVERFLOW.XY.HIDDEN]"
-      ref="modalDialog"
-      :style="{ '--modal-width': width }"
-      @click.self="handleBackdropClick"
-      @close.prevent
-      @keydown.escape="handleEscapeKeydown"
-    >
-      <div
-        :class="[
-          'tide-modal-body',
-          CSS.BG.SURFACE.DEFAULT,
-          CSS.BORDER.RADIUS.ONE,
-          CSS.DISPLAY.FLEX,
-          CSS.FLEX.DIRECTION.COLUMN,
-          CSS.OVERFLOW.XY.HIDDEN,
-          CSS.POSITION.ABSOLUTE,
-          CSS.POSITIONING.BOTTOM,
-          CSS.SHADOW.TOP,
-          CSS.WIDTH.FULL,
-          CSS.WIDTH.MAX_FULL,
-          CSS.withBreakpoint([CSS.SHADOW.BOTTOM], BREAKPOINT.SM),
-        ]"
-      >
-        <header
-          :class="[
-            'tide-modal-header',
-            CSS.AXIS2.CENTER,
-            CSS.BORDER.BOTTOM.ONE,
-            CSS.BORDER.COLOR.LOW,
-            CSS.DISPLAY.FLEX,
-            CSS.GAP.HALF,
-            CSS.ISOLATION.ISOLATE,
-            CSS.PADDING.Y.ONE,
-            CSS.POSITION.RELATIVE,
-            CSS.Z_INDEX.ONE,
-          ]"
-        >
-          <TideButtonIcon
-            :icon="ICON.CHEVRON_LEFT"
-            :priority="PRIORITY.QUATERNARY"
-            @click="emit('back')"
-            title="Back"
-            v-if="isBackButton"
-          />
-
-          <div
-            :class="[CSS.FONT.ROLE.HEADLINE_2]"
-            v-text="title"
-          />
-
-          <TideButtonIcon
-            :class="[CSS.FLEX.GROW.OFF, CSS.FLEX.SHRINK.OFF, CSS.MARGIN.LEFT.AUTO]"
-            :icon="ICON.CLOSE"
-            :priority="PRIORITY.QUATERNARY"
-            @click="close"
-            v-if="isDismissible"
-          />
-        </header>
-
-        <div
-          :class="[
-            'tide-modal-content',
-            CSS.DISPLAY.GRID,
-            CSS.ISOLATION.ISOLATE,
-            CSS.OVERFLOW.X.HIDDEN,
-            CSS.OVERFLOW.Y.AUTO,
-            CSS.PADDING.Y.TWO,
-            CSS.WIDTH.FULL,
-          ]"
-          ref="modalContent"
-        >
-          <slot />
-        </div>
-
-        <footer
-          :class="[
-            'tide-modal-footer',
-            CSS.AXIS1.END,
-            CSS.DISPLAY.FLEX,
-            CSS.GAP.TWO,
-            CSS.ISOLATION.ISOLATE,
-            CSS.PADDING.Y.ONE,
-            CSS.SHADOW.TOP,
-          ]"
-          v-if="$slots.footer"
-        >
-          <slot name="footer" />
-        </footer>
-      </div>
-    </dialog>
-  </Teleport>
-</template>
-
-<style scoped>
-  .tide-modal {
-    --modal-padding-x: 20px;
-    max-width: unset;
-    max-height: unset;
-    place-items: center;
-    display: none;
-    transition: all var(--tide-animate) allow-discrete;
-    transform: translateY(100%);
-  }
-  .tide-modal[open] {
-    display: grid;
-    transform: translateY(0%);
-  }
-  .tide-modal::backdrop {
-    background-color: transparent;
-    transition: all var(--tide-animate) allow-discrete;
-    backdrop-filter: blur(0px);
-  }
-  .tide-modal[open]::backdrop {
-    background-color: var(--tide-transparent-400);
-    backdrop-filter: var(--tide-bg-blur);
-  }
-  @starting-style {
-    .tide-modal[open] {
-      display: grid;
-      transform: translateY(100%);
-    }
-    .tide-modal[open]::backdrop {
-      background-color: transparent;
-      backdrop-filter: var(--tide-bg-blur);
-    }
-  }
-  .tide-modal-body {
-    width: var(--modal-width, 576px);
-    max-height: calc(100% - var(--tide-spacing-2));
-  }
-
-  .tide-modal-header,
-  .tide-modal-footer {
-    padding-inline: var(--modal-padding-x);
-  }
-  .tide-modal-content {
-    grid-template-columns: var(--modal-padding-x) var(--tide-safe-fr) var(--modal-padding-x);
-  }
-  :where(.tide-modal-content):deep(> :where(*)) {
-    grid-column: 2;
-  }
-
-  @media (max-width: 767px) {
-    .tide-modal-body {
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-  }
-  @media (min-width: 768px) {
-    .tide-modal {
-      --modal-padding-x: var(--tide-spacing-2);
-    }
-    .tide-modal-body {
-      max-height: 85%;
-      bottom: initial;
-    }
-  }
-</style>