fix(Toast): prevent default on emits not working @zernonia (#1843)

zernonia · web-flow · commit 9b48c844d7f7 · 2025-04-22T19:24:00.000+08:00
* fix(Toast): prevent default on emits not working

* chore: add jsdoc
diff --git a/docs/content/meta/ToastRoot.md b/docs/content/meta/ToastRoot.md
@@ -66,7 +66,7 @@
   },
   {
     'name': 'swipeCancel',
-    'description': '',
+    'description': '<p>Event handler called when swipe interaction is cancelled. It can be prevented by calling <code>event.preventDefault</code>.</p>\n',
     'type': '[event: SwipeEvent]'
   },
   {
diff --git a/packages/core/src/Toast/ToastRoot.vue b/packages/core/src/Toast/ToastRoot.vue
@@ -68,35 +68,43 @@ const open = useVModel(props, 'open', emits, {
       @escape-key-down="emits('escapeKeyDown', $event)"
       @swipe-start="(event) => {
         emits('swipeStart', event);
-        (event.currentTarget as HTMLElement).setAttribute('data-swipe', 'start');
+        if (!event.defaultPrevented) {
+          (event.currentTarget as HTMLElement).setAttribute('data-swipe', 'start');
+        }
       }"
       @swipe-move="(event) => {
         emits('swipeMove', event);
-        const { x, y } = event.detail.delta;
-        const target = event.currentTarget as HTMLElement
-        target.setAttribute('data-swipe', 'move');
-        target.style.setProperty('--reka-toast-swipe-move-x', `${x}px`);
-        target.style.setProperty('--reka-toast-swipe-move-y', `${y}px`);
+        if (!event.defaultPrevented) {
+          const { x, y } = event.detail.delta;
+          const target = event.currentTarget as HTMLElement
+          target.setAttribute('data-swipe', 'move');
+          target.style.setProperty('--reka-toast-swipe-move-x', `${x}px`);
+          target.style.setProperty('--reka-toast-swipe-move-y', `${y}px`);
+        }
       }"
       @swipe-cancel="(event) => {
         emits('swipeCancel', event);
-        const target = event.currentTarget as HTMLElement
-        target.setAttribute('data-swipe', 'cancel');
-        target.style.removeProperty('--reka-toast-swipe-move-x');
-        target.style.removeProperty('--reka-toast-swipe-move-y');
-        target.style.removeProperty('--reka-toast-swipe-end-x');
-        target.style.removeProperty('--reka-toast-swipe-end-y');
+        if (!event.defaultPrevented) {
+          const target = event.currentTarget as HTMLElement
+          target.setAttribute('data-swipe', 'cancel');
+          target.style.removeProperty('--reka-toast-swipe-move-x');
+          target.style.removeProperty('--reka-toast-swipe-move-y');
+          target.style.removeProperty('--reka-toast-swipe-end-x');
+          target.style.removeProperty('--reka-toast-swipe-end-y');
+        }
       }"
       @swipe-end="(event) => {
         emits('swipeEnd', event);
-        const { x, y } = event.detail.delta;
-        const target = event.currentTarget as HTMLElement
-        target.setAttribute('data-swipe', 'end');
-        target.style.removeProperty('--reka-toast-swipe-move-x');
-        target.style.removeProperty('--reka-toast-swipe-move-y');
-        target.style.setProperty('--reka-toast-swipe-end-x', `${x}px`);
-        target.style.setProperty('--reka-toast-swipe-end-y', `${y}px`);
-        open = false;
+        if (!event.defaultPrevented) {
+          const { x, y } = event.detail.delta;
+          const target = event.currentTarget as HTMLElement
+          target.setAttribute('data-swipe', 'end');
+          target.style.removeProperty('--reka-toast-swipe-move-x');
+          target.style.removeProperty('--reka-toast-swipe-move-y');
+          target.style.setProperty('--reka-toast-swipe-end-x', `${x}px`);
+          target.style.setProperty('--reka-toast-swipe-end-y', `${y}px`);
+          open = false;
+        }
       }"
     >
       <slot
diff --git a/packages/core/src/Toast/ToastRootImpl.vue b/packages/core/src/Toast/ToastRootImpl.vue
@@ -17,6 +17,7 @@ export type ToastRootImplEmits = {
   swipeStart: [event: SwipeEvent]
   /** Event handler called during a swipe interaction. It can be prevented by calling `event.preventDefault`. */
   swipeMove: [event: SwipeEvent]
+  /** Event handler called when swipe interaction is cancelled. It can be prevented by calling `event.preventDefault`. */
   swipeCancel: [event: SwipeEvent]
   /** Event handler called at the end of a swipe interaction. It can be prevented by calling `event.preventDefault`. */
   swipeEnd: [event: SwipeEvent]

Original file line number	Diff line number	Diff line change
`@@ -66,7 +66,7 @@`
`66`	`66`	`},`
`67`	`67`	`{`
`68`	`68`	`'name': 'swipeCancel',`
`69`		`- 'description': '',`
	`69`	`+ 'description': '<p>Event handler called when swipe interaction is cancelled. It can be prevented by calling <code>event.preventDefault</code>.</p>\n',`
`70`	`70`	`'type': '[event: SwipeEvent]'`
`71`	`71`	`},`
`72`	`72`	`{`