feat(Toast): support disabling swipe-to-close with the disableSwipe prop (#2189)

kricsleo · web-flow · commit 176cfeced7c9 · 2025-09-30T12:54:23.000+08:00
diff --git a/docs/content/meta/ToastProvider.md b/docs/content/meta/ToastProvider.md
@@ -1,6 +1,12 @@
 <!-- This file was automatic generated. Do not edit it manually -->
 
 <PropsTable :data="[
+  {
+    'name': 'disableSwipe',
+    'description': '<p>Whether to disable the ability to swipe to close the toast.</p>\n',
+    'type': 'boolean',
+    'required': false
+  },
   {
     'name': 'duration',
     'description': '<p>Time in milliseconds that each toast should remain visible for.</p>\n',
diff --git a/packages/core/src/Toast/ToastProvider.vue b/packages/core/src/Toast/ToastProvider.vue
@@ -7,6 +7,7 @@ import { createContext } from '@/shared'
 type ToastProviderContext = {
   label: Ref<string>
   duration: Ref<number>
+  disableSwipe: Ref<boolean>
   swipeDirection: Ref<SwipeDirection>
   swipeThreshold: Ref<number>
   toastCount: Ref<number>
@@ -30,6 +31,11 @@ export interface ToastProviderProps {
    * @defaultValue 5000
    */
   duration?: number
+  /**
+   * Whether to disable the ability to swipe to close the toast.
+   * @defaultValue false
+   */
+  disableSwipe?: boolean
   /**
    * Direction of pointer swipe that should close the toast.
    * @defaultValue 'right'
@@ -59,7 +65,7 @@ const props = withDefaults(defineProps<ToastProviderProps>(), {
   swipeDirection: 'right',
   swipeThreshold: 50,
 })
-const { label, duration, swipeDirection, swipeThreshold } = toRefs(props)
+const { label, duration, disableSwipe, swipeDirection, swipeThreshold } = toRefs(props)
 useCollection({ isProvider: true })
 
 const viewport = ref<HTMLElement>()
@@ -75,6 +81,7 @@ if (props.label && typeof props.label === 'string' && !props.label.trim()) {
 provideToastProviderContext({
   label,
   duration,
+  disableSwipe,
   swipeDirection,
   swipeThreshold,
   toastCount,
diff --git a/packages/core/src/Toast/ToastRootImpl.vue b/packages/core/src/Toast/ToastRootImpl.vue
@@ -203,12 +203,17 @@ provideToastRootContext({ onClose: handleClose })
         :as-child="asChild"
         :data-state="open ? 'open' : 'closed'"
         :data-swipe-direction="providerContext.swipeDirection.value"
-        :style="{ userSelect: 'none', touchAction: 'none' }"
+        :style="providerContext.disableSwipe.value
+          ? undefined
+          : { userSelect: 'none', touchAction: 'none' }"
         @pointerdown.left="(event: PointerEvent) => {
+          if (providerContext.disableSwipe.value) return;
+
           pointerStartRef = { x: event.clientX, y: event.clientY };
         }"
         @pointermove="(event: PointerEvent) => {
-          if (!pointerStartRef) return;
+          if (providerContext.disableSwipe.value || !pointerStartRef) return;
+
           const x = event.clientX - pointerStartRef.x;
           const y = event.clientY - pointerStartRef.y;
           const hasSwipeMoveStarted = Boolean(swipeDeltaRef);
@@ -237,6 +242,8 @@ provideToastRootContext({ onClose: handleClose })
           }
         }"
         @pointerup="(event: PointerEvent) => {
+          if (providerContext.disableSwipe.value) return;
+
           const delta = swipeDeltaRef;
           const target = event.target as HTMLElement;
           if (target.hasPointerCapture(event.pointerId)) {
