From a97205ffb2fa730645026b6d6f067987e747db04 Mon Sep 17 00:00:00 2001
From: Yoki <yujian0108@gmail.com>
Date: Thu, 21 Mar 2024 14:08:31 +0800
Subject: [PATCH] fix(swipe-cell): right slot event cannot be triggered (#1245)
 (#1266)

* fix(swipe-cell): right slot event cannot be triggered

fix #1245

* test: update snapshots

---------

Co-authored-by: anlyyao <anly_yaw@163.com>
---
 .../__test__/__snapshots__/demo.test.jsx.snap | 40 +++++++++----------
 src/swipe-cell/useSureConfirm.ts              |  6 +--
 2 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/src/swipe-cell/__test__/__snapshots__/demo.test.jsx.snap b/src/swipe-cell/__test__/__snapshots__/demo.test.jsx.snap
index a8581004a..1eb9c157c 100644
--- a/src/swipe-cell/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/swipe-cell/__test__/__snapshots__/demo.test.jsx.snap
@@ -89,7 +89,7 @@ exports[`SwipeCell > SwipeCell doubleVue demo works fine 1`] = `
             style="display: inline-block; position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0); transition: background-color .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0); pointer-events: none;"
           />
           <div
-            style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0, 0, 0);"
+            style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0);"
           >
             <!--v-if-->
           </div>
@@ -202,7 +202,7 @@ exports[`SwipeCell > SwipeCell eventVue demo works fine 1`] = `
             style="display: inline-block; position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0); transition: background-color .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0); pointer-events: none;"
           />
           <div
-            style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0, 0, 0);"
+            style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0);"
           >
             <!--v-if-->
           </div>
@@ -338,7 +338,7 @@ exports[`SwipeCell > SwipeCell iconVue demo works fine 1`] = `
               style="display: inline-block; position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0); transition: background-color .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0); pointer-events: none;"
             />
             <div
-              style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0, 0, 0);"
+              style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0);"
             >
               <!--v-if-->
             </div>
@@ -448,7 +448,7 @@ exports[`SwipeCell > SwipeCell iconVue demo works fine 1`] = `
               style="display: inline-block; position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0); transition: background-color .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0); pointer-events: none;"
             />
             <div
-              style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0, 0, 0);"
+              style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0);"
             >
               <!--v-if-->
             </div>
@@ -572,7 +572,7 @@ exports[`SwipeCell > SwipeCell iconVue demo works fine 1`] = `
               style="display: inline-block; position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0); transition: background-color .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0); pointer-events: none;"
             />
             <div
-              style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0, 0, 0);"
+              style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0);"
             >
               <!--v-if-->
             </div>
@@ -673,7 +673,7 @@ exports[`SwipeCell > SwipeCell leftVue demo works fine 1`] = `
               style="display: inline-block; position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0); transition: background-color .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0); pointer-events: none;"
             />
             <div
-              style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0, 0, 0);"
+              style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0);"
             >
               <!--v-if-->
             </div>
@@ -757,7 +757,7 @@ exports[`SwipeCell > SwipeCell leftVue demo works fine 1`] = `
               style="display: inline-block; position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0); transition: background-color .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0); pointer-events: none;"
             />
             <div
-              style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0, 0, 0);"
+              style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0);"
             >
               <!--v-if-->
             </div>
@@ -854,7 +854,7 @@ exports[`SwipeCell > SwipeCell leftVue demo works fine 1`] = `
               style="display: inline-block; position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0); transition: background-color .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0); pointer-events: none;"
             />
             <div
-              style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0, 0, 0);"
+              style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0);"
             >
               <!--v-if-->
             </div>
@@ -962,7 +962,7 @@ exports[`SwipeCell > SwipeCell leftVue demo works fine 1`] = `
               style="display: inline-block; position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0); transition: background-color .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0); pointer-events: none;"
             />
             <div
-              style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0, 0, 0);"
+              style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0);"
             >
               <!--v-if-->
             </div>
@@ -1073,7 +1073,7 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
               style="display: inline-block; position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0); transition: background-color .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0); pointer-events: none;"
             />
             <div
-              style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0, 0, 0);"
+              style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0);"
             >
               <!--v-if-->
             </div>
@@ -1157,7 +1157,7 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
               style="display: inline-block; position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0); transition: background-color .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0); pointer-events: none;"
             />
             <div
-              style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0, 0, 0);"
+              style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0);"
             >
               <!--v-if-->
             </div>
@@ -1254,7 +1254,7 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
               style="display: inline-block; position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0); transition: background-color .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0); pointer-events: none;"
             />
             <div
-              style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0, 0, 0);"
+              style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0);"
             >
               <!--v-if-->
             </div>
@@ -1362,7 +1362,7 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
               style="display: inline-block; position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0); transition: background-color .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0); pointer-events: none;"
             />
             <div
-              style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0, 0, 0);"
+              style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0);"
             >
               <!--v-if-->
             </div>
@@ -1451,7 +1451,7 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
               style="display: inline-block; position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0); transition: background-color .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0); pointer-events: none;"
             />
             <div
-              style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0, 0, 0);"
+              style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0);"
             >
               <!--v-if-->
             </div>
@@ -1549,7 +1549,7 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
               style="display: inline-block; position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0); transition: background-color .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0); pointer-events: none;"
             />
             <div
-              style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0, 0, 0);"
+              style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0);"
             >
               <!--v-if-->
             </div>
@@ -1679,7 +1679,7 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
               style="display: inline-block; position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0); transition: background-color .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0); pointer-events: none;"
             />
             <div
-              style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0, 0, 0);"
+              style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0);"
             >
               <!--v-if-->
             </div>
@@ -1789,7 +1789,7 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
               style="display: inline-block; position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0); transition: background-color .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0); pointer-events: none;"
             />
             <div
-              style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0, 0, 0);"
+              style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0);"
             >
               <!--v-if-->
             </div>
@@ -1913,7 +1913,7 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
               style="display: inline-block; position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0); transition: background-color .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0); pointer-events: none;"
             />
             <div
-              style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0, 0, 0);"
+              style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0);"
             >
               <!--v-if-->
             </div>
@@ -2024,7 +2024,7 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
               style="display: inline-block; position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0); transition: background-color .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0); pointer-events: none;"
             />
             <div
-              style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0, 0, 0);"
+              style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0);"
             >
               <!--v-if-->
             </div>
@@ -2116,7 +2116,7 @@ exports[`SwipeCell > SwipeCell rightVue demo works fine 1`] = `
             style="display: inline-block; position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0); transition: background-color .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0); pointer-events: none;"
           />
           <div
-            style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0, 0, 0);"
+            style="display: inline-block; position: absolute; height: 100%; top: 0px; min-width: 100%; transition: transform .6s cubic-bezier(0.18, 0.89, 0.32, 1); transform: translate3d(0px, 0, 0);"
           >
             <!--v-if-->
           </div>
diff --git a/src/swipe-cell/useSureConfirm.ts b/src/swipe-cell/useSureConfirm.ts
index 28343a8a0..db859afe1 100644
--- a/src/swipe-cell/useSureConfirm.ts
+++ b/src/swipe-cell/useSureConfirm.ts
@@ -41,7 +41,7 @@ export function useSureConfirm(instance: ComponentInternalInstance | null, initD
       height: '100%',
       backgroundColor: 'rgba(0,0,0,0)',
       transition: closedSure.value ? 'none' : 'background-color .6s cubic-bezier(0.18, 0.89, 0.32, 1)',
-      transform: `translate3d(${-initData.rightWidth}px, 0, 0)`,
+      transform: `translate3d(${initData.rightWidth}px, 0, 0)`,
       pointerEvents: 'none',
     } as CSSProperties;
 
@@ -85,9 +85,9 @@ export function useSureConfirm(instance: ComponentInternalInstance | null, initD
     } as CSSProperties;
 
     if (showSureRight.value) {
-      style.transform = `translate3d(${-initData.rightWidth}px, 0, 0)`;
-    } else {
       style.transform = `translate3d(0, 0, 0)`;
+    } else {
+      style.transform = `translate3d(${initData.rightWidth}px, 0, 0)`;
     }
     return style;
   });