tide-design-system 2.4.7 → 2.5.0

package/docs/upgrading.md

@@ -4,6 +4,85 @@ This document provides step-by-step instructions for upgrading from previous ver
 
 ---
 
+## Upgrading from 2.4 → 2.5
+
+### What changed?
+
+TIDE **2.5** updates several *stateful* components to use Vue’s `v-model` for two-way binding. This replaces each component’s old “value prop + change emit” pattern.
+
+Affected components:
+
+- `TideAccordionItem`
+- `TideButtonSegmented`
+- `TideChipFilter`
+- `TideModal`
+- `TideSheet`
+- `TideSwitch`
+
+### How to migrate
+
+#### 1. Replace old props with `v-model`
+
+| Component | v2.4 prop | v2.5+ |
+|---|---|---|
+| TideAccordionItem | `:is-expanded` | `v-model` |
+| TideButtonSegmented | `:active-tab` | `v-model` |
+| TideChipFilter | `:is-active` | `v-model` |
+| TideModal | `:is-open` | `v-model` |
+| TideSheet | `:is-open` | `v-model` |
+| TideSwitch | `:is-active` | `v-model` |
+
+##### 2.4 example
+
+```
+<TideButtonSegmented
+  :active-tab="active"
+  @change="active = $event"
+/>
+```
+
+##### 2.5+
+
+``` vue
+<TideButtonSegmented v-model="active" />
+```
+
+#### 2. Replace old emits with `@update:modelValue`
+
+| Component | Old emit | New emit |
+|---|---|---|
+| TideAccordionItem | `@toggle` | `@update:modelValue` |
+| TideButtonSegmented | `@change` | `@update:modelValue` |
+| TideChipFilter | `@click` | `@update:modelValue` |
+| TideModal | `@close` | `@update:modelValue` |
+| TideSheet | `@close` | `@update:modelValue` |
+| TideSwitch | `@change` | `@update:modelValue` |
+
+Use this only for **side effects**, not basic value updates.
+
+Or use Vue’s `watch()`:
+
+``` ts
+watch(active, doSomething);
+```
+
+### Handling cancellable modals (new API)
+
+**2.4** used `@close` + manual logic.
+
+**2.5+** introduces `:before-close`, which cancels dismissal if it returns `false`.
+
+```
+<TideModal
+  v-model="isOpen"
+  :before-close="() => {
+    if (!confirm('Close modal?')) return false;
+  }"
+>
+```
+
+✅ After these changes your project should be compatible with **TIDE 2.5**.
+
 ## Upgrading from 2.3 → 2.4
 
 ### Summary

package/package.json

@@ -63,7 +63,7 @@
   "main": "dist/tide-design-system.cjs",
   "module": "dist/tide-design-system.esm.js",
   "types": "dist/tide-design-system.esm.d.ts",
-  "version": "2.4.7",
+  "version": "2.5.0",
   "dependencies": {
     "@floating-ui/vue": "^1.1.6"
   }

package/src/components/TideAccordionItem.vue

@@ -5,12 +5,9 @@
   import { SIZE } from '@/types/Size';
   import { CSS } from '@/types/Styles';
 
-  const emit = defineEmits(['toggle']);
-
   type Props = {
     hasBottomDivider?: boolean;
     hasTopDivider?: boolean;
-    isExpanded?: boolean;
     isOptional?: boolean;
     label: string;
   };
@@ -18,22 +15,29 @@
   const props = withDefaults(defineProps<Props>(), {
     hasBottomDivider: false,
     hasTopDivider: false,
-    isExpanded: false,
     isOptional: false,
-    label: '',
   });
 
+  const isExpanded = defineModel<boolean>({ required: true });
+
   const handleToggleClick = () => {
-    emit('toggle');
+    isExpanded.value = !isExpanded.value;
   };
 </script>
 
 <template>
-  <div class="tide-accordion-item">
+  <div :class="['tide-accordion-item']">
     <TideDivider v-if="props.hasTopDivider" />
 
-    <div
-      :class="['tide-accordion-head', CSS.DISPLAY.FLEX, CSS.AXIS1.BETWEEN, CSS.PADDING.Y.HALF, CSS.CURSOR.POINTER]"
+    <button
+      :class="[
+        'tide-accordion-head',
+        CSS.ALIGN.X.LEFT,
+        CSS.AXIS1.BETWEEN,
+        CSS.DISPLAY.FLEX,
+        CSS.PADDING.Y.HALF,
+        CSS.WIDTH.FULL,
+      ]"
       @click="handleToggleClick"
     >
       <div :class="[CSS.DISPLAY.FLEX, CSS.AXIS2.CENTER, CSS.GAP.HALF, CSS.FONT.ROLE.LABEL_1_SEMIBOLD]">
@@ -51,9 +55,9 @@
         :icon="isExpanded ? ICON.EXPAND_LESS : ICON.EXPAND_MORE"
         :size="SIZE.LARGE"
       />
-    </div>
+    </button>
 
-    <div :class="['tide-accordion-body', props.isExpanded ? 'expanded' : 'collapsed', CSS.DISPLAY.GRID]">
+    <div :class="['tide-accordion-body', isExpanded ? 'expanded' : 'collapsed', CSS.DISPLAY.GRID]">
       <div :class="[CSS.OVERFLOW.Y.HIDDEN, CSS.MARGIN.Y.ONE, CSS.FONT.ROLE.BODY_1, CSS.FONT.COLOR.SURFACE.DEFAULT]">
         <slot />
       </div>
@@ -64,15 +68,19 @@
 </template>
 
 <style scoped>
+  .tide-accordion-item {
+    align-self: stretch;
+  }
+
   .tide-accordion-body {
     transition: grid-template-rows var(--tide-animate);
   }
 
   .tide-accordion-body.expanded {
-    grid-template-rows: 1fr;
+    grid-template-rows: minmax(0px, 1fr);
   }
 
   .tide-accordion-body.collapsed {
-    grid-template-rows: 0fr;
+    grid-template-rows: minmax(0px, 0fr);
   }
 </style>

package/src/components/TideButtonSegmented.vue

@@ -4,18 +4,15 @@
   import type { Tab } from '@/types/Tab';
 
   type Props = {
-    activeTab: number;
-    tabs: Tab[];
+    tabs: Tab[] | readonly Tab[];
   };
 
-  const props = withDefaults(defineProps<Props>(), {
-    activeTab: 0,
-  });
+  defineProps<Props>();
 
-  const emit = defineEmits(['change']);
+  const currentIndex = defineModel<number>({ required: true });
 
   const handleClick = (index: number) => {
-    emit('change', index);
+    currentIndex.value = index;
   };
 </script>
 
@@ -24,33 +21,34 @@
     :class="[
       'tide-button-segmented',
       CSS.BG.SURFACE.VARIANT,
+      CSS.BORDER.RADIUS.FULL,
       CSS.DISPLAY.FLEX,
+      CSS.FLEX.SHRINK.OFF,
       CSS.GAP.QUARTER,
-      CSS.BORDER.RADIUS.FULL,
+      CSS.OVERFLOW.XY.AUTO,
       CSS.PADDING.FULL.QUARTER,
-      CSS.OVERFLOW.XY.HIDDEN,
-      CSS.WIDTH.FULL,
     ]"
   >
     <button
       :class="[
         'tide-button-segmented-tab',
-        index === activeTab
+        index === currentIndex
           ? [CSS.BG.SURFACE.DEFAULT, CSS.FONT.COLOR.SURFACE.DEFAULT, CSS.SHADOW.BOTTOM]
           : ['inactive', CSS.FONT.COLOR.SURFACE.VARIANT],
-        CSS.FLEX.GROW.ON,
         CSS.BORDER.FULL.TWO,
         CSS.BORDER.RADIUS.FULL,
-        CSS.PADDING.Y.QUARTER,
-        CSS.WIDTH.FULL,
+        CSS.FLEX.GROW.ON,
         CSS.FONT.ROLE.BUTTON_1,
+        CSS.PADDING.X.HALF,
+        CSS.PADDING.Y.QUARTER,
         CSS.WHITESPACE_WRAP.OFF,
+        CSS.WIDTH.FULL,
       ]"
       :data-track="tab.dataTrack || undefined"
       :key="tab.label"
       @click="handleClick(index)"
       type="button"
-      v-for="(tab, index) in props.tabs"
+      v-for="(tab, index) in tabs"
     >
       <span :class="[CSS.FONT.ROLE.LABEL_2_SEMIBOLD]">
         {{ tab.label }}
@@ -69,6 +67,7 @@
 <style scoped>
   .tide-button-segmented {
     max-width: 23.3rem;
+    align-self: stretch;
   }
 
   .tide-button-segmented-tab {

package/src/components/TideChipFilter.vue

@@ -2,19 +2,24 @@
   import { CSS } from '@/types/Styles';
 
   type Props = {
-    isActive: boolean;
     label: string;
   };
 
-  const props = defineProps<Props>();
+  defineProps<Props>();
+
+  const isActive = defineModel<boolean>({ required: true });
+
+  const handleClick = () => {
+    isActive.value = !isActive.value;
+  };
 </script>
 
 <template>
   <button
     :class="[
       'tide-chip-filter',
-      props.isActive
-        ? [CSS.BG.SECONDARY, CSS.FONT.COLOR.SECONDARY]
+      isActive
+        ? ['active', CSS.BG.SECONDARY, CSS.FONT.COLOR.SECONDARY]
         : [CSS.BG.SURFACE.VARIANT, CSS.FONT.COLOR.SURFACE.DEFAULT],
       CSS.DISPLAY.FLEX,
       CSS.AXIS2.CENTER,
@@ -24,14 +29,15 @@
       CSS.PADDING.X.ONE,
       CSS.PADDING.Y.HALF,
       CSS.FONT.ROLE.LABEL_2,
-      props.isActive ? 'active' : '',
     ]"
+    @click="handleClick"
     type="button"
   >
     <slot />
+
     <div :class="[CSS.DISPLAY.FLEX, CSS.AXIS1.CENTER, CSS.AXIS2.CENTER, CSS.GAP.HALF]">
-      <span :class="[props.isActive ? '' : 'icon-spacing', CSS.FONT.ROLE.LABEL_1, CSS.WHITESPACE_WRAP.OFF]">
-        {{ props.label }}
+      <span :class="[CSS.FONT.ROLE.LABEL_1, CSS.WHITESPACE_WRAP.OFF]">
+        {{ label }}
       </span>
     </div>
   </button>

package/src/components/TideInputCheckbox.vue

@@ -107,7 +107,6 @@
         showError ? CSS.FONT.COLOR.GLOBAL.ERROR : CSS.FONT.COLOR.SURFACE.DEFAULT,
         disabled ? [CSS.OPACITY.DISABLED, CSS.CURSOR.NOT_ALLOWED] : [CSS.CURSOR.POINTER],
       ]"
-      :for="inputId"
     >
       <input
         :checked="isChecked"

package/src/components/TideModal.vue

@@ -11,14 +11,20 @@
   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,35 +57,41 @@
     });
   };
 
+  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();
     }
   });
@@ -89,7 +102,7 @@
     <dialog
       :class="['tide-modal', CSS.BG.INITIAL, CSS.HEIGHT.FULL, CSS.WIDTH.FULL, CSS.OVERFLOW.XY.HIDDEN]"
       ref="modalDialog"
-      :style="{ '--modal-width': props.width }"
+      :style="{ '--modal-width': width }"
       @click.self="handleBackdropClick"
       @close.prevent
       @keydown.escape="handleEscapeKeydown"
@@ -141,7 +154,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"
             v-if="isDismissible"
           />
         </header>

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/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>
 

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,14 +25,15 @@
   <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"
@@ -49,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
@@ -62,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>