tide-design-system 2.5.13 → 2.5.15

package/src/components/TideCarousel.vue

@@ -1,489 +0,0 @@
-<script lang="ts">
-  /**
-   * Renders a carousel component with navigation controls and slide indicators.
-   *
-   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidecarousel--docs) for TideCarousel
-   */
-  export default {};
-</script>
-
-<script lang="ts" setup>
-  import { computed, onMounted, onUnmounted, ref } from 'vue';
-
-  import TideButtonIcon from '@/components/TideButtonIcon.vue';
-  import { ICON } from '@/types/Icon';
-  import { PRIORITY } from '@/types/Priority';
-  import { CSS } from '@/types/Styles';
-
-  type Props = {
-    /** Determines whether to display the indicator dots overlay<br />(Only valid with full width cards) */
-    hasDots?: boolean;
-
-    /** Determines whether to display on-page or floating carousel */
-    isFloating?: boolean;
-
-    /** Determines font role used for title display */
-    isHeadline1?: boolean;
-
-    /** Determines whether on-page buttons should be hidden until hover */
-    isHideawayButtons?: boolean;
-
-    /** Determines whether to scroll by page or by individual slide */
-    isScrollByPage?: boolean;
-
-    /** Determines the max number of indicator dots to display at a given time */
-    maxDots?: number;
-
-    /** Determines the text displayed to the right of the title */
-    subtitle?: string;
-
-    /** Determines the title text displayed above the carousel */
-    title?: string;
-  };
-
-  const props = withDefaults(defineProps<Props>(), {
-    hasDots: undefined,
-    isFloating: false,
-    isHeadline1: false,
-    isHideawayButtons: true,
-    isScrollByPage: true,
-    maxDots: 5,
-    subtitle: undefined,
-    title: undefined,
-  });
-
-  type Emits = {
-    (event: 'slidesAddedToView', slidesInView: number[]): void;
-  };
-
-  const emit = defineEmits<Emits>();
-
-  const carouselRef = ref<HTMLDivElement | null>(null);
-  const containerRef = ref<HTMLDivElement | null>(null);
-  const contentWidth = ref<number>(0);
-  const currentPageIndex = ref<number>(0);
-  const dotsRef = ref<HTMLDivElement | null>(null);
-  const frameWidth = ref<number>(0);
-  const isFirstSlide = ref<boolean>(true);
-  const isLastSlide = ref<boolean>(false);
-  const showButtons = ref<boolean>(true);
-  const slideObserver = ref<IntersectionObserver | null>(null);
-  const slides = ref<HTMLElement[]>([]);
-  const slidesInView = ref<number[]>([]);
-  const slotObserver = ref<MutationObserver | null>(null);
-  const touchStart = ref<Touch | undefined>(undefined);
-  const slidesInViewCount = ref<number>(1);
-
-  const currentPage = computed(() => currentPageIndex.value + 1);
-  const dotContainerWidth = computed(() => dotCountVisible.value * dotWidth + (dotCountVisible.value - 1) * dotGap);
-  const dotCountVisible = computed(() => (props.maxDots > totalPages.value ? totalPages.value : props.maxDots));
-  const totalPages = computed(() => {
-    if (!slides.value.length) return 0;
-    if (!props.isScrollByPage) return slides.value.length;
-
-    const quotient = Math.floor(slides.value.length / slidesInViewCount.value);
-    const remainder = slides.value.length % slidesInViewCount.value;
-
-    return remainder ? quotient + 1 : quotient;
-  });
-
-  const dotGap: number = 8;
-  const dotWidth: number = 8;
-  let scrollTimeout: number | undefined;
-
-  const getDotClass = (dotIndex: number) => {
-    let className = '';
-
-    if (dotIndex === currentPageIndex.value) className = 'tide-carousel-dot-active';
-    if (Math.abs(currentPageIndex.value - dotIndex) === 1) className = 'tide-carousel-dot-neighbor';
-
-    return className;
-  };
-
-  const getIsElementWithinContainer = (element: HTMLElement, container: HTMLElement) => {
-    const containerRect = container.getBoundingClientRect();
-    const containerRight = containerRect.left + containerRect.width;
-    const elementRect = element.getBoundingClientRect();
-    const elementRight = elementRect.left + elementRect.width;
-
-    return elementRight <= containerRight && elementRect.left >= containerRect.left;
-  };
-
-  const handleTouchEnd = (event: TouchEvent) => {
-    if (!touchStart.value) return;
-
-    const touchEnd = event.changedTouches[0];
-    const deltaX = touchStart.value.clientX - touchEnd.clientX;
-    const deltaY = touchEnd.clientY - touchStart.value.clientY;
-
-    if (Math.abs(deltaX) > Math.abs(deltaY)) scrollByDelta(deltaX);
-  };
-
-  const handleTouchStart = (event: TouchEvent) => {
-    touchStart.value = event.touches[0];
-  };
-
-  const handleWheel = (event: WheelEvent) => {
-    const isShiftKeyDown = event.shiftKey;
-    const isWheel = Math.abs(event.deltaY) >= 80;
-
-    if (isWheel && !isShiftKeyDown) return;
-    if (event.shiftKey) event.preventDefault();
-
-    clearTimeout(scrollTimeout);
-
-    scrollTimeout = window.setTimeout(() => {
-      if (isWheel) {
-        scrollByDelta(event.deltaY);
-      } else {
-        const offset = slides.value[slidesInView.value[0]]?.offsetLeft || 0;
-
-        scrollToOffset(offset);
-      }
-    }, 100);
-  };
-
-  const measureDom = () => {
-    if (!containerRef.value) return;
-
-    contentWidth.value = containerRef.value.scrollWidth;
-    frameWidth.value = containerRef.value.clientWidth;
-    showButtons.value = contentWidth.value > frameWidth.value;
-
-    slidesInViewCount.value = slides.value.filter((slide) =>
-      getIsElementWithinContainer(slide, containerRef.value as HTMLElement)
-    ).length;
-  };
-
-  const observeSlides = () => {
-    const options = {
-      root: carouselRef?.value,
-      rootMargin: '0px 1px 0px 0px',
-      threshold: 1,
-    };
-
-    slideObserver.value = new IntersectionObserver((entries) => {
-      let slidesAddedToView: number[] = [];
-
-      entries.forEach((entry) => {
-        const slideIndex = slides.value.indexOf(entry.target as HTMLElement);
-
-        if (entry.isIntersecting) {
-          slidesAddedToView.push(slideIndex);
-          slidesInView.value.push(slideIndex);
-        } else {
-          slidesInView.value = slidesInView.value.filter((slide) => slide !== slideIndex);
-        }
-
-        slidesInView.value.sort((a, b) => a - b);
-      });
-
-      isFirstSlide.value = slidesInView.value.includes(0);
-      isLastSlide.value = slidesInView.value.includes(slides.value.length - 1);
-
-      if (slidesAddedToView.length > 0) emit('slidesAddedToView', slidesAddedToView);
-    }, options);
-
-    slides.value.forEach((child) => {
-      if (slideObserver.value) slideObserver.value.observe(child);
-    });
-  };
-
-  const observeSlot = () => {
-    const observerCallback = () => {
-      if (containerRef.value === null) return;
-
-      slides.value = Array.from(containerRef.value.children) as HTMLElement[];
-      observeSlides();
-    };
-
-    slotObserver.value = new MutationObserver(observerCallback);
-
-    if (containerRef.value) slotObserver.value.observe(containerRef.value, { childList: true });
-  };
-
-  const scrollByDelta = (delta: number) => {
-    const isScrollingLeft = delta < 0;
-
-    if (isScrollingLeft) {
-      props.isScrollByPage ? showPreviousPage() : showPreviousSlide();
-    } else {
-      props.isScrollByPage ? showNextPage() : showNextSlide();
-    }
-  };
-
-  const scrollToOffset = (target: number) => {
-    if (containerRef.value === null) return;
-
-    const isScrollingLeft = target <= containerRef.value.scrollLeft;
-
-    currentPageIndex.value = isScrollingLeft ? currentPageIndex.value - 1 : currentPageIndex.value + 1;
-
-    containerRef.value.scrollTo({
-      behavior: 'smooth',
-      left: target,
-    });
-    updateDots(isScrollingLeft);
-  };
-
-  const showNextPage = () => {
-    if (slidesInView.value.length === 0 || isLastSlide.value) return;
-
-    const nextSlide: number = slidesInView.value[slidesInView.value.length - 1] + 1;
-    const offset = slides.value[nextSlide]?.offsetLeft;
-
-    scrollToOffset(offset);
-  };
-
-  const showPreviousPage = () => {
-    if (slidesInView.value.length === 0 || isFirstSlide.value) return;
-
-    const previousSlide: number = slidesInView.value[0] - slidesInView.value.length;
-    const offset = slides.value[previousSlide]?.offsetLeft || 0;
-
-    scrollToOffset(offset);
-  };
-
-  const showNextSlide = () => {
-    if (slidesInView.value.length === 0) return;
-
-    const nextSlide: number = slidesInView.value.length > 1 ? slidesInView.value[1] : slidesInView.value[0] + 1;
-
-    scrollToOffset(slides.value[nextSlide].offsetLeft);
-  };
-
-  const showPreviousSlide = () => {
-    if (slidesInView.value.length === 0) return;
-
-    const previousSlide: number = slidesInView.value[0] - 1;
-
-    scrollToOffset(slides.value[previousSlide].offsetLeft);
-  };
-
-  const updateDots = (isScrollingLeft: boolean) => {
-    if (!dotsRef.value || dotCountVisible.value >= totalPages.value) return;
-
-    const isOddDotCount = dotCountVisible.value % 2 !== 0;
-    const centerDot =
-      isOddDotCount || isScrollingLeft
-        ? Math.floor(dotCountVisible.value / 2) + 1
-        : Math.floor(dotCountVisible.value / 2);
-
-    dotsRef.value.scrollTo({
-      behavior: 'smooth',
-      left: currentPage.value < centerDot ? 0 : (currentPage.value - centerDot) * (dotWidth + dotGap),
-    });
-  };
-
-  onMounted(() => {
-    if (containerRef.value === null) return;
-
-    slides.value = Array.from(containerRef.value.children) as HTMLElement[];
-
-    measureDom();
-    observeSlides();
-    observeSlot();
-
-    if (window) {
-      window.addEventListener('resize', measureDom);
-    }
-  });
-
-  onUnmounted(() => {
-    slideObserver.value?.disconnect();
-    slotObserver.value?.disconnect();
-    window.removeEventListener('resize', measureDom);
-  });
-</script>
-
-<template>
-  <section
-    :class="[
-      'tide-carousel',
-      CSS.POSITION.RELATIVE,
-      CSS.DISPLAY.FLEX,
-      CSS.FLEX.DIRECTION.COLUMN,
-      CSS.GAP.ONE,
-      CSS.WIDTH.MAX_FULL,
-    ]"
-    ref="carouselRef"
-  >
-    <section
-      :class="[CSS.DISPLAY.FLEX, props.title ? CSS.AXIS1.BETWEEN : CSS.AXIS1.END, CSS.AXIS2.CENTER, CSS.WIDTH.FULL]"
-      v-if="(!props.isFloating && showButtons) || props.title"
-    >
-      <div
-        :class="[CSS.DISPLAY.FLEX, CSS.FLEX.WRAP, CSS.AXIS2.CENTER, CSS.GAP.ONE]"
-        v-if="props.title"
-      >
-        <div
-          :class="[isHeadline1 ? CSS.FONT.ROLE.HEADLINE_1 : CSS.FONT.ROLE.HEADLINE_2]"
-          v-if="props.title"
-        >
-          {{ props.title }}
-        </div>
-
-        <div
-          :class="[CSS.FONT.ROLE.LABEL_2, CSS.FONT.COLOR.SURFACE.VARIANT]"
-          v-if="props.subtitle"
-        >
-          {{ props.subtitle }}
-        </div>
-      </div>
-
-      <div
-        :class="[CSS.DISPLAY.FLEX, CSS.AXIS2.CENTER, CSS.GAP.ONE]"
-        v-if="!props.isFloating && showButtons"
-      >
-        <TideButtonIcon
-          :disabled="isFirstSlide"
-          :icon="ICON.CHEVRON_LEFT"
-          :priority="PRIORITY.TERTIARY"
-          @click="isScrollByPage ? showPreviousPage() : showPreviousSlide()"
-        />
-
-        <TideButtonIcon
-          :disabled="isLastSlide"
-          :icon="ICON.CHEVRON_RIGHT"
-          :priority="PRIORITY.TERTIARY"
-          @click="isScrollByPage ? showNextPage() : showNextSlide()"
-        />
-      </div>
-    </section>
-
-    <slot name="misc" />
-
-    <div :class="[CSS.POSITION.RELATIVE, CSS.DISPLAY.FLEX]">
-      <ul
-        :class="[
-          'tide-carousel-container',
-          CSS.DISPLAY.FLEX,
-          CSS.GAP.ONE,
-          CSS.LIST_BULLETS.OFF,
-          CSS.OVERFLOW.X.SCROLL,
-          CSS.SCROLLBAR.OFF,
-          CSS.SNAP.ON,
-        ]"
-        ref="containerRef"
-        @touchend="handleTouchEnd"
-        @touchstart.passive="handleTouchStart"
-        @wheel="handleWheel"
-      >
-        <slot />
-      </ul>
-
-      <div
-        :class="[
-          CSS.POSITION.ABSOLUTE,
-          CSS.POSITIONING.BOTTOM,
-          CSS.DISPLAY.FLEX,
-          CSS.AXIS1.CENTER,
-          CSS.MARGIN.BOTTOM.HALF,
-          CSS.WIDTH.FULL,
-          CSS.POINTER_EVENTS.OFF,
-        ]"
-        v-if="hasDots && totalPages > 1"
-      >
-        <div
-          :class="['tide-carousel-dots-container']"
-          :style="{
-            width: `${dotContainerWidth}px`,
-          }"
-        >
-          <div
-            :class="[
-              'tide-carousel-dots',
-              CSS.DISPLAY.FLEX,
-              CSS.AXIS1.START,
-              CSS.AXIS2.CENTER,
-              CSS.GAP.HALF,
-              CSS.OVERFLOW.X.SCROLL,
-              CSS.POINTER_EVENTS.OFF,
-              CSS.SCROLLBAR.OFF,
-            ]"
-            ref="dotsRef"
-          >
-            <div
-              :class="[
-                'tide-carousel-dot',
-                CSS.FLEX.SHRINK.OFF,
-                CSS.HEIGHT.ZERO,
-                CSS.WIDTH.ZERO,
-                CSS.BORDER.RADIUS.FULL,
-                CSS.BG.SURFACE.DEFAULT,
-                getDotClass(index),
-              ]"
-              :key="index"
-              v-for="(_, index) in totalPages"
-            />
-          </div>
-        </div>
-      </div>
-
-      <div
-        :class="[
-          'tide-carousel-button-overlay',
-          CSS.POSITION.ABSOLUTE,
-          CSS.POSITIONING.TOP,
-          CSS.DISPLAY.FLEX,
-          CSS.AXIS1.BETWEEN,
-          CSS.AXIS2.CENTER,
-          CSS.WIDTH.FULL,
-          CSS.HEIGHT.FULL,
-          CSS.POINTER_EVENTS.OFF,
-          props.isHideawayButtons ? 'hideaway' : '',
-        ]"
-        v-if="isFloating && showButtons"
-      >
-        <TideButtonIcon
-          :class="[CSS.MARGIN.LEFT.ONE, CSS.POINTER_EVENTS.ON]"
-          :disabled="isFirstSlide"
-          :icon="ICON.CHEVRON_LEFT"
-          :priority="PRIORITY.QUATERNARY"
-          @click="isScrollByPage ? showPreviousPage() : showPreviousSlide()"
-        />
-
-        <TideButtonIcon
-          :class="[CSS.MARGIN.RIGHT.ONE, CSS.POINTER_EVENTS.ON]"
-          :disabled="isLastSlide"
-          :icon="ICON.CHEVRON_RIGHT"
-          :priority="PRIORITY.QUATERNARY"
-          @click="isScrollByPage ? showNextPage() : showNextSlide()"
-        />
-      </div>
-    </div>
-  </section>
-</template>
-
-<style scoped>
-  .tide-carousel-button-overlay.hideaway {
-    opacity: 0;
-  }
-
-  .tide-carousel:hover .tide-carousel-button-overlay.hideaway {
-    opacity: 1;
-  }
-
-  .tide-carousel-dot {
-    width: 8px;
-    height: 8px;
-    opacity: 0.75;
-    transform: scale(0.5);
-    transition: opacity var(--tide-animate), transform var(--tide-animate);
-  }
-
-  .tide-carousel-dot-neighbor {
-    transform: scale(0.75);
-  }
-
-  .tide-carousel-dot-active {
-    transform: scale(1);
-    opacity: 1;
-  }
-
-  @media (pointer: coarse) {
-    .tide-carousel .tide-carousel-button-overlay {
-      display: none;
-    }
-  }
-</style>

package/src/components/TideChipAction.vue

@@ -1,83 +0,0 @@
-<script lang="ts">
-  /**
-   * Renders a chip action button intended to be used in navigation menus relating to searches.
-   *
-   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidechipaction--docs) for TideChipAction
-   */
-  export default {};
-</script>
-
-<script setup lang="ts">
-  import { computed } from 'vue';
-
-  import InternalBaseLink from '@/components/InternalBaseLink.vue';
-  import TideIcon from '@/components/TideIcon.vue';
-  import { ELEMENT } from '@/types/Element';
-  import { ICON } from '@/types/Icon';
-  import { CSS } from '@/types/Styles';
-  import { TARGET } from '@/types/Target';
-
-  import type { Element } from '@/types/Element';
-  import type { Icon } from '@/types/Icon';
-
-  type Props = {
-    /** HTML tag type. */
-    element?: Element;
-
-    /** URL to navigate to on click. */
-    href?: string;
-
-    /** Icon to show before the label. */
-    iconLeading?: Icon;
-
-    /** Determines whether to target a new browser tab. */
-    isNewTab?: boolean;
-
-    /** Chip text. */
-    label: string;
-  };
-
-  const props = withDefaults(defineProps<Props>(), {
-    element: ELEMENT.LINK,
-    href: undefined,
-    iconLeading: ICON.SEARCH,
-    isNewTab: false,
-  });
-
-  const rootElement = computed(() => (props.element === ELEMENT.LINK ? InternalBaseLink : props.element));
-</script>
-
-<template>
-  <component
-    :class="[
-      'tide-chip-action',
-      CSS.DISPLAY.FLEX,
-      CSS.AXIS2.CENTER,
-      CSS.GAP.HALF,
-      CSS.BORDER.FULL.ONE,
-      CSS.BORDER.RADIUS.FULL,
-      CSS.BORDER.COLOR.DEFAULT,
-      CSS.PADDING.X.ONE,
-      CSS.PADDING.Y.HALF,
-      CSS.BG.SURFACE.DEFAULT,
-      CSS.FONT.ROLE.LINK_2,
-      CSS.FONT.COLOR.SURFACE.DEFAULT,
-      CSS.UNDERLINE.REST.OFF,
-    ]"
-    :href="props.href"
-    :target="props.isNewTab ? TARGET.BLANK : TARGET.SELF"
-    :type="element === ELEMENT.BUTTON ? ELEMENT.BUTTON : undefined"
-    :is="rootElement"
-  >
-    <TideIcon :icon="props.iconLeading" />
-
-    <span>{{ props.label }}</span>
-  </component>
-</template>
-
-<style scoped>
-  .tide-chip-action:hover {
-    background-color: var(--tide-surface-variant);
-    border-color: var(--tide-border-high);
-  }
-</style>

package/src/components/TideChipFilter.vue

@@ -1,71 +0,0 @@
-<script lang="ts">
-  /**
-   * Renders a chip filter component for use in navigation.
-   *
-   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidechipfilter--docs) for TideChipFilter
-   */
-  export default {};
-</script>
-
-<script lang="ts" setup>
-  import { CSS } from '@/types/Styles';
-
-  type Props = {
-    /** Chip text. */
-    label: string;
-  };
-
-  defineProps<Props>();
-
-  const isActive = defineModel<boolean>({ required: true });
-
-  const handleClick = () => {
-    isActive.value = !isActive.value;
-  };
-</script>
-
-<template>
-  <button
-    :class="[
-      'tide-chip-filter',
-      isActive
-        ? ['active', CSS.BG.SECONDARY, CSS.FONT.COLOR.SECONDARY]
-        : [CSS.BG.SURFACE.VARIANT, CSS.FONT.COLOR.SURFACE.DEFAULT],
-      CSS.DISPLAY.FLEX,
-      CSS.AXIS2.CENTER,
-      CSS.GAP.HALF,
-      CSS.BORDER.FULL.ONE,
-      CSS.BORDER.RADIUS.FULL,
-      CSS.PADDING.X.ONE,
-      CSS.PADDING.Y.HALF,
-      CSS.FONT.ROLE.LABEL_2,
-    ]"
-    @click="handleClick"
-    type="button"
-  >
-    <slot />
-
-    <div :class="[CSS.DISPLAY.FLEX, CSS.AXIS1.CENTER, CSS.AXIS2.CENTER, CSS.GAP.HALF]">
-      <span :class="[CSS.FONT.ROLE.LABEL_1, CSS.WHITESPACE_WRAP.OFF]">
-        {{ label }}
-      </span>
-    </div>
-  </button>
-</template>
-
-<style scoped>
-  /* Border must always exist to prevent resize on hover state, but match background color on rest state to blend in. */
-  .tide-chip-filter {
-    border-color: var(--tide-surface-variant);
-  }
-
-  .tide-chip-filter.active {
-    border-color: var(--tide-secondary);
-  }
-
-  .tide-chip-filter:hover {
-    background-color: var(--tide-surface-variant);
-    border-color: var(--tide-border);
-    color: var(--tide-on-surface);
-  }
-</style>

package/src/components/TideChipInput.vue

@@ -1,54 +0,0 @@
-<script lang="ts">
-  /**
-   * Renders a input chip component for use in navigation.
-   *
-   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidechipinput--docs) for TideChipInput
-   */
-  export default {};
-</script>
-
-<script lang="ts" setup>
-  import TideIcon from '@/components/TideIcon.vue';
-  import { ICON } from '@/types/Icon';
-  import { CSS } from '@/types/Styles';
-
-  type Props = {
-    /** Chip text */
-    label: string;
-  };
-
-  const props = defineProps<Props>();
-</script>
-
-<template>
-  <button
-    :class="[
-      'tide-chip-input',
-      CSS.BG.SURFACE.VARIANT,
-      CSS.FONT.COLOR.SURFACE,
-      CSS.DISPLAY.FLEX,
-      CSS.AXIS2.CENTER,
-      CSS.GAP.HALF,
-      CSS.BORDER.FULL.ONE,
-      CSS.BORDER.RADIUS.FULL,
-      CSS.PADDING.X.ONE,
-      CSS.PADDING.Y.HALF,
-      CSS.FONT.ROLE.LABEL_2,
-    ]"
-    type="button"
-  >
-    <span>{{ props.label }}</span>
-
-    <TideIcon :icon="ICON.CLOSE" />
-  </button>
-</template>
-
-<style scoped>
-  .tide-chip-input {
-    border-color: var(--tide-border);
-  }
-
-  .tide-chip-input:hover {
-    border-color: var(--tide-border-high);
-  }
-</style>