tide-design-system 2.5.13 → 2.5.14

package/src/components/TideSheet.vue

@@ -1,209 +0,0 @@
-<script lang="ts">
-  /**
-   * Renders a sheet component intended to be used for displaying content in a modal-like menu overlay on the right side of the screen.
-   *
-   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidesheet--docs) for TideSheet
-   */
-  export default {};
-</script>
-
-<script lang="ts" setup>
-  import { onBeforeMount, onBeforeUnmount, onMounted, ref, watch } from 'vue';
-
-  import TideButtonIcon from '@/components/TideButtonIcon.vue';
-  import TideDivider from '@/components/TideDivider.vue';
-  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 = {
-    /** Controls display of the back button. */
-    isBackButton?: boolean;
-  };
-
-  withDefaults(defineProps<Props>(), {
-    isBackButton: false,
-  });
-
-  type Emits = {
-    (e: 'back'): void;
-  };
-
-  const emit = defineEmits<Emits>();
-
-  const dialogElement: Ref<HTMLDialogElement | null> = ref(null);
-
-  const isOpen = defineModel<boolean>({ required: true });
-
-  const triggerNativeDialogOpen = () => {
-    dialogElement.value?.showModal();
-    setScrollLock(true);
-  };
-
-  const triggerNativeDialogClose = () => {
-    dialogElement.value?.close();
-    setScrollLock(false);
-  };
-
-  const close = () => {
-    isOpen.value = false;
-  };
-
-  const handleBackdropClick = () => {
-    close();
-  };
-
-  const handleEscapeKeydown = (e: Event) => {
-    e.preventDefault();
-    close();
-  };
-
-  watch(isOpen, () => {
-    if (!dialogElement.value) return;
-    if (isOpen.value) {
-      triggerNativeDialogOpen();
-    } 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-sheet', CSS.BG.INITIAL, CSS.HEIGHT.FULL, CSS.WIDTH.FULL, CSS.OVERFLOW.XY.HIDDEN]"
-      ref="dialogElement"
-      @click.self="handleBackdropClick"
-      @close.prevent
-      @keydown.escape="handleEscapeKeydown"
-    >
-      <div
-        :class="[
-          'tide-sheet-body',
-          CSS.BG.SURFACE.DEFAULT,
-          CSS.DISPLAY.FLEX,
-          CSS.FLEX.DIRECTION.COLUMN,
-          CSS.HEIGHT.FULL,
-          CSS.OVERFLOW.XY.HIDDEN,
-          CSS.WIDTH.FULL,
-        ]"
-      >
-        <header
-          :class="[
-            CSS.DISPLAY.FLEX,
-            CSS.ISOLATION.ISOLATE,
-            CSS.PADDING.TOP.ONE,
-            CSS.PADDING.X.ONE,
-            CSS.POSITION.RELATIVE,
-            CSS.Z_INDEX.ONE,
-          ]"
-        >
-          <TideButtonIcon
-            :class="[CSS.FLEX.GROW.OFF, CSS.FLEX.SHRINK.OFF]"
-            :icon="ICON.CHEVRON_LEFT"
-            :priority="PRIORITY.QUATERNARY"
-            @click="emit('back')"
-            v-if="isBackButton"
-          />
-
-          <TideButtonIcon
-            :class="[CSS.FLEX.GROW.OFF, CSS.FLEX.SHRINK.OFF, CSS.MARGIN.LEFT.AUTO]"
-            :icon="ICON.CLOSE"
-            :priority="PRIORITY.QUATERNARY"
-            @click="close"
-          />
-        </header>
-
-        <TideDivider />
-
-        <div
-          :class="[
-            'tide-sheet-content',
-            CSS.DISPLAY.GRID,
-            CSS.HEIGHT.FULL,
-            CSS.ISOLATION.ISOLATE,
-            CSS.OVERFLOW.X.HIDDEN,
-            CSS.OVERFLOW.Y.AUTO,
-            CSS.PADDING.BOTTOM.ONE,
-            CSS.POSITION.RELATIVE,
-            CSS.WIDTH.FULL,
-          ]"
-        >
-          <slot />
-        </div>
-      </div>
-    </dialog>
-  </Teleport>
-</template>
-
-<style scoped>
-  .tide-sheet {
-    --sheet-padding-x: var(--tide-spacing-1);
-    max-width: unset;
-    max-height: unset;
-    justify-items: right;
-    display: none;
-    transition: all var(--tide-animate) allow-discrete;
-    transform: translateX(100%);
-  }
-
-  .tide-sheet[open] {
-    display: grid;
-    transform: translateX(0%);
-  }
-
-  .tide-sheet::backdrop {
-    background-color: transparent;
-    transition: all var(--tide-animate) allow-discrete;
-    backdrop-filter: blur(0px);
-  }
-
-  .tide-sheet[open]::backdrop {
-    background-color: var(--tide-transparent-400);
-    backdrop-filter: var(--tide-bg-blur);
-  }
-
-  .tide-sheet-body {
-    max-width: min(calc(100vw - var(--tide-spacing-2)), 311px);
-  }
-
-  .tide-sheet-content {
-    grid-template-columns: var(--sheet-padding-x) var(--tide-safe-fr) var(--sheet-padding-x);
-  }
-
-  :where(.tide-sheet-content):deep(> :where(*)) {
-    grid-column: 2;
-  }
-
-  @starting-style {
-    .tide-sheet[open] {
-      display: grid;
-      transform: translateX(100%);
-    }
-
-    .tide-sheet[open]::backdrop {
-      background-color: transparent;
-      backdrop-filter: var(--tide-bg-blur);
-    }
-  }
-</style>

package/src/components/TideSwitch.vue

@@ -1,101 +0,0 @@
-<script lang="ts">
-  /**
-   * Renders a switch component intended to be used for toggling a boolean value.
-   *
-   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tideswitch--docs) for TideSwitch
-   */
-  export default {};
-</script>
-
-<script lang="ts" setup>
-  import TideIcon from '@/components/TideIcon.vue';
-  import { ICON } from '@/types/Icon';
-  import { SIZE } from '@/types/Size';
-  import { CSS } from '@/types/Styles';
-
-  type Props = {
-    /** Determines clickability */
-    disabled?: boolean;
-  };
-
-  const props = withDefaults(defineProps<Props>(), {
-    disabled: false,
-  });
-
-  const isActive = defineModel<boolean>({ required: true });
-
-  const handleClick = () => {
-    if (!props.disabled) {
-      isActive.value = !isActive.value;
-    }
-  };
-</script>
-
-<template>
-  <button
-    :class="[
-      'tide-switch',
-      CSS.DISPLAY.FLEX,
-      CSS.AXIS2.CENTER,
-      CSS.BORDER.FULL.ONE,
-      CSS.BORDER.RADIUS.FULL,
-      CSS.OVERFLOW.XY.HIDDEN,
-      CSS.FLEX.SHRINK.OFF,
-      CSS.FLEX.GROW.OFF,
-      isActive ? ['active', CSS.BG.SECONDARY] : [CSS.BG.SURFACE.DEFAULT, CSS.BORDER.COLOR.DEFAULT],
-      disabled && [CSS.OPACITY.DISABLED],
-    ]"
-    :disabled="props.disabled"
-    @click="handleClick"
-    aria-label="Switch"
-    type="button"
-  >
-    <div
-      :class="[
-        'tide-switch-indicator',
-        CSS.POSITION.RELATIVE,
-        CSS.DISPLAY.FLEX,
-        CSS.AXIS1.CENTER,
-        CSS.AXIS2.CENTER,
-        CSS.BORDER.RADIUS.FULL,
-        isActive ? ['active', CSS.BG.SURFACE.DEFAULT] : [CSS.BG.SECONDARY],
-      ]"
-    >
-      <TideIcon
-        :icon="ICON.CHECK"
-        :size="SIZE.LARGE"
-      />
-    </div>
-  </button>
-</template>
-
-<style scoped>
-  .tide-switch {
-    --switch-indicator-size: 24px;
-    --switch-indicator-margin: var(--tide-spacing-1\/4);
-    --switch-border-width: var(--tide-border-width-1);
-    --switch-width: calc(var(--switch-indicator-size) * 2 + var(--switch-indicator-margin) * 4);
-    --switch-height: calc(var(--switch-indicator-size) + var(--switch-indicator-margin) * 2);
-
-    width: var(--switch-width);
-    height: var(--switch-height);
-    transition: var(--tide-animate);
-    transition-property: background-color, border-color;
-  }
-
-  .tide-switch.active {
-    border-color: var(--tide-secondary);
-  }
-
-  .tide-switch-indicator {
-    left: var(--switch-indicator-margin);
-    transition: var(--tide-animate);
-    transition-property: left, border-color, background-color;
-  }
-
-  .tide-switch-indicator.active {
-    left: calc(
-      var(--switch-width) - var(--switch-indicator-size) - var(--switch-indicator-margin) - var(--switch-border-width)
-    );
-  }
-</style>

package/src/components/TideTabs.vue

@@ -1,63 +0,0 @@
-<script lang="ts">
-  /**
-   * Renders a tabs component intended to be used for navigation.
-   *
-   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidetabs--docs) for TideTabs
-   */
-  export default {};
-</script>
-
-<script setup lang="ts">
-  import TideCarousel from '@/components/TideCarousel.vue';
-  import TideLink from '@/components/TideLink.vue';
-  import { ELEMENT } from '@/types/Element';
-  import { CSS } from '@/types/Styles';
-
-  import type { Tab } from '@/types/Tab';
-
-  type Props = {
-    /** Sets labels and callback for each tab */
-    tabs: Tab[];
-  };
-
-  defineProps<Props>();
-
-  const currentTab = defineModel<number>({ required: true });
-
-  const handleClick = (index: number) => {
-    currentTab.value = index;
-  };
-</script>
-
-<template>
-  <div :class="['tide-tabs', CSS.DISPLAY.FLEX, CSS.BORDER.BOTTOM.TWO, CSS.BORDER.COLOR.LOW]">
-    <TideCarousel :is-floating="true">
-      <li
-        :class="[CSS.PADDING.X.HALF]"
-        :key="tab.label"
-        v-for="(tab, index) in tabs"
-      >
-        <TideLink
-          :class="[
-            index === currentTab ? [CSS.FONT.COLOR.SURFACE.BRAND] : [CSS.FONT.COLOR.SURFACE.VARIANT],
-            CSS.PADDING.BOTTOM.ONE,
-            CSS.FONT.ROLE.LABEL_1,
-            CSS.WHITESPACE_WRAP.OFF,
-          ]"
-          :element="ELEMENT.BUTTON"
-          :label="tab.label"
-          :subtle="true"
-          @click="handleClick(index)"
-        />
-        <div :class="['rounded-border', CSS.MARGIN.X.HALF, index === currentTab && [CSS.BG.PRIMARY]]" />
-      </li>
-    </TideCarousel>
-  </div>
-</template>
-
-<style scoped>
-  .rounded-border {
-    height: 4px;
-    border-radius: var(--tide-radius-full) var(--tide-radius-full) 0 0;
-  }
-</style>

package/src/components/TideToaster.vue

@@ -1,97 +0,0 @@
-<script lang="ts">
-  /**
-   * Renders a toaster component intended to be used for displaying notifications.
-   *
-   * @see the [Storybook interface](https://tide-design-system.netlify.app/?path=/docs/components-tidetoaster--docs) for TideToaster
-   */
-  export default {};
-</script>
-
-<script setup lang="ts">
-  import { onBeforeMount } from 'vue';
-
-  import TideAlert from '@/components/TideAlert.vue';
-  import { useTideToaster } from '@/composables/useTideToaster';
-  import { CSS } from '@/types/Styles';
-  import { TOP_LAYER_ID, initFauxTopLayer } from '@/utilities/viewport';
-
-  const { toasts, clearToasts, cancelAutoDismiss, startAutoDismiss } = useTideToaster();
-
-  onBeforeMount(() => {
-    initFauxTopLayer();
-  });
-</script>
-
-<template>
-  <Teleport :to="`#${TOP_LAYER_ID}`">
-    <div
-      :class="[
-        'tide-toaster',
-        CSS.HEIGHT.FULL,
-        CSS.POINTER_EVENTS.OFF,
-        CSS.POSITION.FIXED,
-        CSS.POSITIONING.LEFT,
-        CSS.POSITIONING.TOP,
-        CSS.WIDTH.FULL,
-      ]"
-    >
-      <TransitionGroup name="pop">
-        <div
-          :class="[
-            'tide-toast-wrap',
-            CSS.POINTER_EVENTS.ON,
-            CSS.POSITION.ABSOLUTE,
-            CSS.Z_INDEX.ONE,
-            CSS.POSITIONING.RIGHT,
-            CSS.POSITIONING.TOP,
-            CSS.MARGIN.FULL.ONE,
-            CSS.WIDTH.STRETCH,
-          ]"
-          :key="toast.id"
-          @mouseenter="cancelAutoDismiss"
-          @mouseleave="startAutoDismiss"
-          v-for="toast in toasts"
-        >
-          <TideAlert
-            :cta-label="toast.action?.label"
-            :heading="toast.heading"
-            :style="{ '--tide-max-width': 'none' }"
-            @close="clearToasts"
-            @cta-click="toast?.action?.callback"
-            is-dismissible
-            is-toast
-          >
-            {{ toast.description }}
-          </TideAlert>
-        </div>
-      </TransitionGroup>
-    </div>
-  </Teleport>
-</template>
-
-<style scoped>
-  .pop-enter-active,
-  .pop-leave-active {
-    transition: var(--tide-animate);
-    transition-property: opacity, transform, translate;
-  }
-
-  .pop-enter-from {
-    translate: 100% 0;
-  }
-
-  .pop-leave-to {
-    opacity: 0;
-    z-index: 0 !important;
-  }
-
-  .pop-leave-active {
-    position: absolute;
-  }
-
-  @media (min-width: 768px) {
-    .tide-toast-wrap {
-      width: 400px;
-    }
-  }
-</style>

package/src/composables/useTideConfig.ts

@@ -1,23 +0,0 @@
-import { inject, provide } from 'vue';
-
-import { ELEMENT } from '@/types/Element';
-
-import type { Component } from 'vue';
-
-type TideConfig = {
-  linkComponent: Component | typeof ELEMENT.LINK;
-};
-
-const tideConfigDefaults: TideConfig = { linkComponent: ELEMENT.LINK };
-
-const CONFIG_KEY = Symbol('tide-config');
-
-export const provideTideConfig = (config: Partial<TideConfig> = {}) => {
-  const configWithDefaults: TideConfig = { ...tideConfigDefaults, ...config };
-
-  provide<TideConfig>(CONFIG_KEY, configWithDefaults);
-};
-
-export const useTideConfig = () => {
-  return inject<TideConfig>(CONFIG_KEY, tideConfigDefaults);
-};

package/src/composables/useTideForm.ts

@@ -1,25 +0,0 @@
-import { inject, provide, ref } from 'vue';
-
-import type { Ref } from 'vue';
-
-type TideFormContext = {
-  forceShowErrors: Ref<boolean>;
-};
-
-const FORM_KEY = Symbol('tide-form');
-
-export const useTideForm = () => {
-  const forceShowErrors = ref<boolean>(false);
-
-  provide<TideFormContext>(FORM_KEY, { forceShowErrors });
-
-  const revealValidationErrors = () => {
-    forceShowErrors.value = true;
-  };
-
-  return { revealValidationErrors };
-};
-
-export const useFormContext = () => {
-  return inject<TideFormContext>(FORM_KEY);
-};

package/src/composables/useTideToaster.ts

@@ -1,63 +0,0 @@
-import { inject, provide, readonly, ref } from 'vue';
-
-import type { TideToast, TideToastOmitId, TideToaster } from '@/types/Toast';
-
-const TOASTER_KEY = Symbol('tide-toaster');
-
-const AUTO_DISMISS_DURATION_MS = {
-  ACTIONABLE: 10000,
-  INFORMATIONAL: 5000,
-} as const;
-
-export const useTideToaster = () => {
-  const injected = inject<TideToaster>(TOASTER_KEY);
-  if (injected) return injected;
-
-  const timeoutId = ref<ReturnType<typeof setTimeout> | null>(null);
-  const toasts = ref<TideToast[]>([]);
-  const id = ref<number>(0);
-
-  const addToast = (newToast: TideToastOmitId) => {
-    id.value++;
-    clearToasts();
-
-    toasts.value.push({
-      ...newToast,
-      id: `tide-toast-${id.value}`,
-    } as TideToast);
-
-    if (typeof window !== 'undefined') {
-      cancelAutoDismiss();
-      startAutoDismiss();
-    }
-  };
-
-  const clearToasts = () => {
-    toasts.value = [];
-  };
-
-  const cancelAutoDismiss = () => {
-    if (timeoutId.value) clearTimeout(timeoutId.value);
-  };
-
-  const startAutoDismiss = () => {
-    if (!toasts.value.length) return;
-
-    const autoDismissDuration = toasts.value[0].action
-      ? AUTO_DISMISS_DURATION_MS.ACTIONABLE
-      : AUTO_DISMISS_DURATION_MS.INFORMATIONAL;
-    timeoutId.value = setTimeout(clearToasts, autoDismissDuration);
-  };
-
-  const toaster: TideToaster = {
-    addToast,
-    cancelAutoDismiss,
-    clearToasts,
-    startAutoDismiss,
-    toasts: readonly(toasts),
-  };
-
-  provide(TOASTER_KEY, toaster);
-
-  return toaster;
-};

package/src/contexts/sandbox/AppSandbox.vue

@@ -1,7 +0,0 @@
-<script lang="ts" setup>
-  import {} from '../../../index';
-</script>
-
-<template>
-  <div />
-</template>

package/src/contexts/sandbox/app-sandbox.ts

@@ -1,10 +0,0 @@
-import { createApp } from 'vue';
-
-import AppSandbox from './AppSandbox.vue';
-
-import '@/assets/css/main.css';
-
-const app = createApp(AppSandbox);
-const appIdSelector = '#app-sandbox';
-
-app.mount(appIdSelector);