tide-design-system 2.4.5 → 2.5.0

package/src/components/TideMenuItem.vue

@@ -0,0 +1,83 @@
+<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_2,
+      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,24 +1,30 @@
 <script lang="ts" setup>
-  import { nextTick, onMounted, ref, watch } from 'vue';
+  import { nextTick, onBeforeMount, 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 { setScrollLock } from '@/utilities/viewport';
+  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>;
     isBackButton?: boolean;
     isDismissible?: boolean;
-    isOpen: boolean;
     title?: string;
     width?: string;
   };
 
   const props = withDefaults(defineProps<Props>(), {
+    beforeClose: undefined,
     isBackButton: false,
     isDismissible: true,
     title: undefined,
@@ -26,7 +32,6 @@
   });
 
   type Emits = {
-    (e: 'close'): void;
     (e: 'back'): void;
   };
 
@@ -35,6 +40,8 @@
   const modalContent: Ref<HTMLDivElement | undefined> = ref();
   const modalDialog: Ref<HTMLDialogElement | undefined> = ref();
 
+  const isOpen = defineModel<boolean>({ required: true });
+
   const triggerNativeDialogOpen = () => {
     modalDialog.value?.showModal();
   };
@@ -50,128 +57,140 @@
     });
   };
 
+  const close = async () => {
+    if (props.beforeClose) {
+      const result = await props.beforeClose();
+      if (result === false) return;
+    }
+
+    isOpen.value = false;
+  };
+
   const handleBackdropClick = () => {
-    if (props.isDismissible) emit('close');
+    if (props.isDismissible) close();
   };
 
   const handleEscapeKeydown = (e: Event) => {
     e.preventDefault();
-    if (props.isDismissible) emit('close');
+    if (props.isDismissible) close();
   };
 
-  watch(
-    () => props.isOpen,
-    (newValue) => {
-      if (!modalDialog.value) return;
-      if (newValue) {
-        triggerNativeDialogOpen();
-        scrollContentToTop();
-      } else {
-        triggerNativeDialogClose();
-      }
-      setScrollLock(newValue);
+  watch(isOpen, () => {
+    if (!modalDialog.value) return;
+    if (isOpen.value) {
+      triggerNativeDialogOpen();
+      scrollContentToTop();
+    } else {
+      triggerNativeDialogClose();
     }
-  );
+    setScrollLock(isOpen.value);
+  });
+
+  onBeforeMount(() => {
+    initFauxTopLayer();
+  });
 
   onMounted(() => {
-    if (props.isOpen) {
+    if (isOpen.value) {
       triggerNativeDialogOpen();
     }
   });
 </script>
 
 <template>
-  <dialog
-    :class="['tide-modal', CSS.BG.INITIAL, CSS.HEIGHT.FULL, CSS.WIDTH.FULL, CSS.OVERFLOW.XY.HIDDEN]"
-    ref="modalDialog"
-    :style="{ '--modal-width': props.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),
-      ]"
+  <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"
     >
-      <header
+      <div
         :class="[
-          'tide-modal-header',
-          CSS.AXIS2.CENTER,
-          CSS.BORDER.BOTTOM.ONE,
-          CSS.BORDER.COLOR.LOW,
+          'tide-modal-body',
+          CSS.BG.SURFACE.DEFAULT,
+          CSS.BORDER.RADIUS.ONE,
           CSS.DISPLAY.FLEX,
-          CSS.GAP.HALF,
-          CSS.ISOLATION.ISOLATE,
-          CSS.PADDING.Y.ONE,
-          CSS.POSITION.RELATIVE,
-          CSS.Z_INDEX.ONE,
+          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),
         ]"
       >
-        <TideButtonIcon
-          :icon="ICON.CHEVRON_LEFT"
-          :priority="PRIORITY.QUATERNARY"
-          @click="emit('back')"
-          title="Back"
-          v-if="isBackButton"
-        />
+        <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="[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="emit('close')"
-          v-if="isDismissible"
-        />
-      </header>
+          :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>
 
-      <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 />
+        <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>
-
-      <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>
+    </dialog>
+  </Teleport>
 </template>
 
 <style scoped>

package/src/components/TidePagination.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-  import { computed, ref } from 'vue';
+  import { computed } from 'vue';
 
   import TideButtonIcon from '@/components/TideButtonIcon.vue';
   import TideButtonPagination from '@/components/TideButtonPagination.vue';
@@ -8,25 +8,25 @@
   import { CSS } from '@/types/Styles';
 
   type Props = {
-    pageCurrent?: number;
-    pageTotal?: number;
+    pageTotal: number;
   };
 
-  const props = withDefaults(defineProps<Props>(), {
-    pageCurrent: 1,
-    pageTotal: 1,
-  });
+  const props = defineProps<Props>();
 
-  const emit = defineEmits(['change']);
-
-  const pageCurrent = ref(props.pageCurrent);
+  const currentIndex = defineModel<number>({ required: true });
 
   const paginationButtons = computed(() => new Array(props.pageTotal).fill('').map((empty, index) => index + 1));
 
   const handleClick = (index: number) => {
-    pageCurrent.value = index;
+    currentIndex.value = index;
+  };
 
-    emit('change', event, index);
+  const handlePreviousClick = () => {
+    currentIndex.value--;
+  };
+
+  const handleNextClick = () => {
+    currentIndex.value++;
   };
 </script>
 
@@ -35,10 +35,10 @@
     :class="['tide-pagination', CSS.DISPLAY.FLEX, CSS.AXIS1.CENTER, CSS.AXIS2.CENTER, CSS.GAP.QUARTER, CSS.WIDTH.FULL]"
   >
     <TideButtonIcon
-      :disabled="pageCurrent === 1"
+      :disabled="currentIndex <= 1"
       :icon="ICON.CHEVRON_LEFT"
       :priority="PRIORITY.QUATERNARY"
-      @click="handleClick(pageCurrent - 1)"
+      @click="handlePreviousClick"
     />
 
     <ul :class="[CSS.DISPLAY.FLEX, CSS.AXIS2.CENTER, CSS.GAP.QUARTER, CSS.LIST_BULLETS.OFF]">
@@ -47,7 +47,7 @@
         v-for="paginationButton in paginationButtons"
       >
         <TideButtonPagination
-          :disabled="pageCurrent === paginationButton"
+          :disabled="currentIndex === paginationButton"
           :label="paginationButton"
           :priority="PRIORITY.QUATERNARY"
           @click="handleClick(paginationButton)"
@@ -56,12 +56,10 @@
     </ul>
 
     <TideButtonIcon
-      :disabled="pageCurrent === paginationButtons[paginationButtons.length - 1]"
+      :disabled="currentIndex >= paginationButtons[paginationButtons.length - 1]"
       :icon="ICON.CHEVRON_RIGHT"
       :priority="PRIORITY.QUATERNARY"
-      @click="handleClick(pageCurrent + 1)"
+      @click="handleNextClick"
     />
   </section>
 </template>
-
-<style scoped></style>

package/src/components/TideSeoLinks.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+  import InternalBaseLink from '@/components/InternalBaseLink.vue';
   import { CSS } from '@/types/Styles';
   import { TARGET } from '@/types/Target';
 
@@ -26,13 +27,13 @@
         :key="link.label"
         v-for="link in props.links"
       >
-        <a
+        <InternalBaseLink
           :class="[CSS.UNDERLINE.REST.OFF]"
           :href="link.url"
           :target="link.isNewTab ? TARGET.BLANK : TARGET.SELF"
         >
           {{ link.label }}
-        </a>
+        </InternalBaseLink>
       </li>
     </ul>
   </section>

package/src/components/TideSheet.vue

@@ -2,30 +2,32 @@
   import { onBeforeMount, 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 TideDivider from './TideDivider.vue';
-
   import type { Ref } from 'vue';
 
   type Props = {
-    isOpen: boolean;
     isBackButton?: boolean;
   };
-  const props = defineProps<Props>();
+
+  withDefaults(defineProps<Props>(), {
+    isBackButton: false,
+  });
 
   type Emits = {
     (e: 'back'): void;
-    (e: 'close'): void;
   };
 
   const emit = defineEmits<Emits>();
 
   const dialogElement: Ref<HTMLDialogElement | null> = ref(null);
 
+  const isOpen = defineModel<boolean>({ required: true });
+
   const triggerNativeDialogOpen = () => {
     dialogElement.value?.showModal();
   };
@@ -34,34 +36,35 @@
     dialogElement.value?.close();
   };
 
+  const close = () => {
+    isOpen.value = false;
+  };
+
   const handleBackdropClick = () => {
-    emit('close');
+    close();
   };
 
   const handleEscapeKeydown = (e: Event) => {
     e.preventDefault();
-    emit('close');
+    close();
   };
 
-  watch(
-    () => props.isOpen,
-    (newValue) => {
-      if (!dialogElement.value) return;
-      if (newValue) {
-        triggerNativeDialogOpen();
-      } else {
-        triggerNativeDialogClose();
-      }
-      setScrollLock(newValue);
+  watch(isOpen, () => {
+    if (!dialogElement.value) return;
+    if (isOpen.value) {
+      triggerNativeDialogOpen();
+    } else {
+      triggerNativeDialogClose();
     }
-  );
+    setScrollLock(isOpen.value);
+  });
 
   onBeforeMount(() => {
     initFauxTopLayer();
   });
 
   onMounted(() => {
-    if (props.isOpen) {
+    if (isOpen.value) {
       triggerNativeDialogOpen();
     }
   });
@@ -109,7 +112,7 @@
             :class="[CSS.FLEX.GROW.OFF, CSS.FLEX.SHRINK.OFF, CSS.MARGIN.LEFT.AUTO]"
             :icon="ICON.CLOSE"
             :priority="PRIORITY.QUATERNARY"
-            @click="emit('close')"
+            @click="close"
           />
         </header>
 
@@ -119,11 +122,13 @@
           :class="[
             'tide-sheet-content',
             CSS.DISPLAY.GRID,
-            CSS.OVERFLOW.Y.AUTO,
+            CSS.HEIGHT.FULL,
+            CSS.ISOLATION.ISOLATE,
             CSS.OVERFLOW.X.HIDDEN,
-            CSS.WIDTH.FULL,
+            CSS.OVERFLOW.Y.AUTO,
             CSS.PADDING.BOTTOM.ONE,
-            CSS.ISOLATION.ISOLATE,
+            CSS.POSITION.RELATIVE,
+            CSS.WIDTH.FULL,
           ]"
         >
           <slot />

package/src/components/TideSwitch.vue

@@ -6,19 +6,17 @@
 
   type Props = {
     disabled?: boolean;
-    isActive?: boolean;
   };
 
   const props = withDefaults(defineProps<Props>(), {
     disabled: false,
-    isActive: false,
   });
 
-  const emit = defineEmits(['change']);
+  const isActive = defineModel<boolean>({ required: true });
 
   const handleClick = () => {
     if (!props.disabled) {
-      emit('change');
+      isActive.value = !isActive.value;
     }
   };
 </script>
@@ -27,18 +25,20 @@
   <button
     :class="[
       'tide-switch',
-      props.isActive ? 'active' : '',
       CSS.DISPLAY.FLEX,
       CSS.AXIS2.CENTER,
       CSS.BORDER.FULL.ONE,
       CSS.BORDER.RADIUS.FULL,
-      props.isActive ? '' : CSS.BORDER.COLOR.DEFAULT,
       CSS.OVERFLOW.XY.HIDDEN,
-      props.isActive ? CSS.BG.SECONDARY : CSS.BG.SURFACE.DEFAULT,
+      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="[
@@ -48,7 +48,7 @@
         CSS.AXIS1.CENTER,
         CSS.AXIS2.CENTER,
         CSS.BORDER.RADIUS.FULL,
-        props.isActive ? CSS.BG.SURFACE.DEFAULT : CSS.BG.SECONDARY,
+        isActive ? ['active', CSS.BG.SURFACE.DEFAULT] : [CSS.BG.SECONDARY],
       ]"
     >
       <TideIcon
@@ -61,27 +61,31 @@
 
 <style scoped>
   .tide-switch {
-    width: 64px;
-    height: 32px;
-    transition: var(--tide-animate);
-    transition-property: background-color;
-  }
+    --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);
 
-  .tide-switch:disabled {
-    opacity: var(--tide-opacity);
+    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.active .tide-switch-indicator {
-    left: 36px;
-  }
-
   .tide-switch-indicator {
-    left: 4px;
+    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>