From 8d5f2a3c2077567771a65e21291de0cb0a8277ae Mon Sep 17 00:00:00 2001
From: ys152452 <362565210@qq.com>
Date: Sat, 14 Sep 2024 19:19:09 +0800
Subject: [PATCH 1/4] feat(swipe): add rtl mode

swipe add rtl mode
---
 packages/vant/src/swipe/Swipe.tsx      | 87 ++++++++++++++++++--------
 packages/vant/src/swipe/demo/index.vue | 11 ++++
 packages/vant/src/swipe/index.less     |  7 +++
 packages/vant/src/utils/dom.ts         |  8 +++
 4 files changed, 87 insertions(+), 26 deletions(-)

diff --git a/packages/vant/src/swipe/Swipe.tsx b/packages/vant/src/swipe/Swipe.tsx
index 370c87af2d9..3503d10ded6 100644
--- a/packages/vant/src/swipe/Swipe.tsx
+++ b/packages/vant/src/swipe/Swipe.tsx
@@ -25,6 +25,7 @@ import {
   preventDefault,
   createNamespace,
   makeNumericProp,
+  isRtl,
 } from '../utils';
 
 // Composables
@@ -98,7 +99,9 @@ export default defineComponent({
     const minOffset = computed(() => {
       if (state.rect) {
         const base = props.vertical ? state.rect.height : state.rect.width;
-        return base - size.value * count.value;
+        return isRtl(root)
+          ? size.value * count.value - base
+          : base - size.value * count.value;
       }
       return 0;
     });
@@ -111,9 +114,9 @@ export default defineComponent({
 
     const trackSize = computed(() => count.value * size.value);
 
-    const activeIndicator = computed(
-      () => (state.active + count.value) % count.value,
-    );
+    const activeIndicator = computed(() => {
+      return (state.active + count.value) % count.value;
+    });
 
     const isCorrectDirection = computed(() => {
       const expect = props.vertical ? 'vertical' : 'horizontal';
@@ -153,12 +156,14 @@ export default defineComponent({
     const getTargetOffset = (targetActive: number, offset = 0) => {
       let currentPosition = targetActive * size.value;
       if (!props.loop) {
-        currentPosition = Math.min(currentPosition, -minOffset.value);
+        currentPosition = isRtl(root)
+          ? Math.min(currentPosition, minOffset.value)
+          : Math.min(currentPosition, -minOffset.value);
       }
 
       let targetOffset = offset - currentPosition;
       if (!props.loop) {
-        targetOffset = clamp(targetOffset, minOffset.value, 0);
+        targetOffset = clamp(targetOffset, 0, minOffset.value);
       }
 
       return targetOffset;
@@ -180,19 +185,32 @@ export default defineComponent({
       const { active } = state;
       const targetActive = getTargetActive(pace);
       const targetOffset = getTargetOffset(targetActive, offset);
-
       // auto move first and last swipe in loop mode
       if (props.loop) {
-        if (children[0] && targetOffset !== minOffset.value) {
-          const outRightBound = targetOffset < minOffset.value;
-          children[0].setOffset(outRightBound ? trackSize.value : 0);
-        }
+        if (isRtl(root)) {
+          if (children[count.value - 1]) {
+            const outRightBound = targetOffset < size.value;
+            children[count.value - 1].setOffset(
+              outRightBound ? trackSize.value : 0,
+            );
+          }
 
-        if (children[count.value - 1] && targetOffset !== 0) {
-          const outLeftBound = targetOffset > 0;
-          children[count.value - 1].setOffset(
-            outLeftBound ? -trackSize.value : 0,
-          );
+          if (children[0]) {
+            const outLeftBound = targetOffset >= minOffset.value;
+            children[0].setOffset(outLeftBound ? minOffset.value : 0);
+          }
+        } else {
+          if (children[0] && targetOffset !== minOffset.value) {
+            const outRightBound = targetOffset < minOffset.value;
+            children[0].setOffset(outRightBound ? trackSize.value : 0);
+          }
+
+          if (children[count.value - 1] && targetOffset !== 0) {
+            const outLeftBound = targetOffset > 0;
+            children[count.value - 1].setOffset(
+              outLeftBound ? -trackSize.value : 0,
+            );
+          }
         }
       }
 
@@ -327,9 +345,12 @@ export default defineComponent({
         if (isCorrectDirection.value) {
           const isEdgeTouch =
             !props.loop &&
-            ((state.active === 0 && delta.value > 0) ||
-              (state.active === count.value - 1 && delta.value < 0));
-
+            ((!isRtl(root) &&
+              ((state.active === 0 && delta.value > 0) ||
+                (state.active === count.value - 1 && delta.value < 0))) ||
+              (isRtl(root) &&
+                ((state.active === count.value - 1 && delta.value > 0) ||
+                  (state.active === 0 && delta.value < 0))));
           if (!isEdgeTouch) {
             preventDefault(event, props.stopPropagation);
             move({ offset: delta.value });
@@ -359,13 +380,22 @@ export default defineComponent({
           : touch.offsetX.value;
 
         let pace = 0;
-
-        if (props.loop) {
-          pace = offset > 0 ? (delta.value > 0 ? -1 : 1) : 0;
+        if (isRtl(root)) {
+          if (props.loop) {
+            pace = offset > 0 ? (delta.value > 0 ? 1 : -1) : 0;
+          } else {
+            pace = Math[delta.value > 0 ? 'ceil' : 'floor'](
+              delta.value / size.value,
+            );
+          }
         } else {
-          pace = -Math[delta.value > 0 ? 'ceil' : 'floor'](
-            delta.value / size.value,
-          );
+          if (props.loop) {
+            pace = offset > 0 ? (delta.value > 0 ? -1 : 1) : 0;
+          } else {
+            pace = -Math[delta.value > 0 ? 'ceil' : 'floor'](
+              delta.value / size.value,
+            );
+          }
         }
 
         move({
@@ -430,7 +460,12 @@ export default defineComponent({
       }
       if (props.showIndicators && count.value > 1) {
         return (
-          <div class={bem('indicators', { vertical: props.vertical })}>
+          <div
+            class={bem('indicators', {
+              vertical: props.vertical,
+              rtl: isRtl(root),
+            })}
+          >
             {Array(count.value).fill('').map(renderDot)}
           </div>
         );
diff --git a/packages/vant/src/swipe/demo/index.vue b/packages/vant/src/swipe/demo/index.vue
index 5b33fbd8e8d..932504ccdd0 100644
--- a/packages/vant/src/swipe/demo/index.vue
+++ b/packages/vant/src/swipe/demo/index.vue
@@ -11,6 +11,7 @@ const t = useTranslate({
     title4: '纵向滚动',
     title5: '自定义滑块大小',
     title6: '自定义指示器',
+    title7: 'RTL 布局',
     message: '当前 Swipe 索引：',
   },
   'en-US': {
@@ -19,6 +20,7 @@ const t = useTranslate({
     title4: 'Vertical Scrolling',
     title5: 'Set SwipeItem Size',
     title6: 'Custom indicator',
+    title7: ' RTL Layout',
     message: 'Current Swipe index:',
   },
 });
@@ -95,6 +97,15 @@ const onChange = (index: number) => showToast(t('message') + index);
       </template>
     </van-swipe>
   </demo-block>
+
+  <demo-block :title="t('title7')">
+    <van-swipe :loop="false" indicator-color="white" style="direction: rtl">
+      <van-swipe-item>1</van-swipe-item>
+      <van-swipe-item>2</van-swipe-item>
+      <van-swipe-item>3</van-swipe-item>
+      <van-swipe-item>4</van-swipe-item>
+    </van-swipe>
+  </demo-block>
 </template>
 
 <style lang="less">
diff --git a/packages/vant/src/swipe/index.less b/packages/vant/src/swipe/index.less
index c5c525c79c5..c1cf3193767 100644
--- a/packages/vant/src/swipe/index.less
+++ b/packages/vant/src/swipe/index.less
@@ -45,6 +45,13 @@
         margin-bottom: var(--van-swipe-indicator-size);
       }
     }
+
+    &--rtl {
+      .van-swipe__indicator:not(:last-child) {
+        margin-left: var(--van-swipe-indicator-size);
+        margin-right: 0;
+      }
+    }
   }
 
   &__indicator {
diff --git a/packages/vant/src/utils/dom.ts b/packages/vant/src/utils/dom.ts
index ad37f624e93..db213bb5193 100644
--- a/packages/vant/src/utils/dom.ts
+++ b/packages/vant/src/utils/dom.ts
@@ -117,3 +117,11 @@ export function getContainingBlock(el: Element) {
 
   return null;
 }
+
+export function isRtl(elementRef: Element | Ref<Element | undefined>) {
+  const el = unref(elementRef);
+  if (!el) {
+    return false;
+  }
+  return window.getComputedStyle(el).direction === 'rtl';
+}

From 15887f90b583f87797a2d4f87ab8c417b15fe447 Mon Sep 17 00:00:00 2001
From: ys152452 <362565210@qq.com>
Date: Thu, 19 Sep 2024 11:52:09 +0800
Subject: [PATCH 2/4] feat(swipr): complete rtl mode

---
 packages/vant/src/swipe/Swipe.tsx      | 51 +++++++++++++-------------
 packages/vant/src/swipe/demo/index.vue |  2 +-
 packages/vant/src/swipe/index.less     |  7 ++++
 3 files changed, 33 insertions(+), 27 deletions(-)

diff --git a/packages/vant/src/swipe/Swipe.tsx b/packages/vant/src/swipe/Swipe.tsx
index 3503d10ded6..5f339cad9a7 100644
--- a/packages/vant/src/swipe/Swipe.tsx
+++ b/packages/vant/src/swipe/Swipe.tsx
@@ -99,7 +99,7 @@ export default defineComponent({
     const minOffset = computed(() => {
       if (state.rect) {
         const base = props.vertical ? state.rect.height : state.rect.width;
-        return isRtl(root)
+        return isRtl(root) && !props.vertical
           ? size.value * count.value - base
           : base - size.value * count.value;
       }
@@ -156,16 +156,21 @@ export default defineComponent({
     const getTargetOffset = (targetActive: number, offset = 0) => {
       let currentPosition = targetActive * size.value;
       if (!props.loop) {
-        currentPosition = isRtl(root)
-          ? Math.min(currentPosition, minOffset.value)
-          : Math.min(currentPosition, -minOffset.value);
+        currentPosition =
+          isRtl(root) && !props.vertical
+            ? Math.min(currentPosition, minOffset.value)
+            : Math.min(currentPosition, -minOffset.value);
       }
-
-      let targetOffset = offset - currentPosition;
+      let targetOffset =
+        isRtl(root) && !props.vertical
+          ? offset + currentPosition
+          : offset - currentPosition;
       if (!props.loop) {
-        targetOffset = clamp(targetOffset, 0, minOffset.value);
+        targetOffset =
+          isRtl(root) && !props.vertical
+            ? clamp(targetOffset, 0, minOffset.value)
+            : clamp(targetOffset, minOffset.value, 0);
       }
-
       return targetOffset;
     };
 
@@ -187,7 +192,7 @@ export default defineComponent({
       const targetOffset = getTargetOffset(targetActive, offset);
       // auto move first and last swipe in loop mode
       if (props.loop) {
-        if (isRtl(root)) {
+        if (isRtl(root) && !props.vertical) {
           if (children[count.value - 1]) {
             const outRightBound = targetOffset < size.value;
             children[count.value - 1].setOffset(
@@ -197,7 +202,7 @@ export default defineComponent({
 
           if (children[0]) {
             const outLeftBound = targetOffset >= minOffset.value;
-            children[0].setOffset(outLeftBound ? minOffset.value : 0);
+            children[0].setOffset(outLeftBound ? -trackSize.value : 0);
           }
         } else {
           if (children[0] && targetOffset !== minOffset.value) {
@@ -213,7 +218,6 @@ export default defineComponent({
           }
         }
       }
-
       state.active = targetActive;
       state.offset = targetOffset;
 
@@ -350,7 +354,8 @@ export default defineComponent({
                 (state.active === count.value - 1 && delta.value < 0))) ||
               (isRtl(root) &&
                 ((state.active === count.value - 1 && delta.value > 0) ||
-                  (state.active === 0 && delta.value < 0))));
+                  (state.active === 0 && delta.value < 0)) &&
+                !props.vertical));
           if (!isEdgeTouch) {
             preventDefault(event, props.stopPropagation);
             move({ offset: delta.value });
@@ -378,25 +383,19 @@ export default defineComponent({
         const offset = props.vertical
           ? touch.offsetY.value
           : touch.offsetX.value;
-
         let pace = 0;
-        if (isRtl(root)) {
-          if (props.loop) {
-            pace = offset > 0 ? (delta.value > 0 ? 1 : -1) : 0;
+        if (props.loop) {
+          if (offset > 0) {
+            pace = delta.value > 0 ? -1 : 1;
           } else {
-            pace = Math[delta.value > 0 ? 'ceil' : 'floor'](
-              delta.value / size.value,
-            );
+            pace = 0;
           }
         } else {
-          if (props.loop) {
-            pace = offset > 0 ? (delta.value > 0 ? -1 : 1) : 0;
-          } else {
-            pace = -Math[delta.value > 0 ? 'ceil' : 'floor'](
-              delta.value / size.value,
-            );
-          }
+          pace = -Math[delta.value > 0 ? 'ceil' : 'floor'](
+            delta.value / size.value,
+          );
         }
+        pace = isRtl(root) && !props.vertical ? -pace : pace;
 
         move({
           pace,
diff --git a/packages/vant/src/swipe/demo/index.vue b/packages/vant/src/swipe/demo/index.vue
index 932504ccdd0..d049dfef054 100644
--- a/packages/vant/src/swipe/demo/index.vue
+++ b/packages/vant/src/swipe/demo/index.vue
@@ -99,7 +99,7 @@ const onChange = (index: number) => showToast(t('message') + index);
   </demo-block>
 
   <demo-block :title="t('title7')">
-    <van-swipe :loop="false" indicator-color="white" style="direction: rtl">
+    <van-swipe indicator-color="white" style="direction: rtl">
       <van-swipe-item>1</van-swipe-item>
       <van-swipe-item>2</van-swipe-item>
       <van-swipe-item>3</van-swipe-item>
diff --git a/packages/vant/src/swipe/index.less b/packages/vant/src/swipe/index.less
index c1cf3193767..30916eca940 100644
--- a/packages/vant/src/swipe/index.less
+++ b/packages/vant/src/swipe/index.less
@@ -51,6 +51,13 @@
         margin-left: var(--van-swipe-indicator-size);
         margin-right: 0;
       }
+      &.van-swipe__indicators--vertical {
+        left: auto;
+        right: var(--van-swipe-indicator-margin);
+        .van-swipe__indicator {
+          margin-right: var(--van-swipe-indicator-size);
+        }
+      }
     }
   }
 

From 1cfa4dbfdc01e5a3b54f21ab6c5d31e6e6a1d398 Mon Sep 17 00:00:00 2001
From: ys152452 <362565210@qq.com>
Date: Thu, 19 Sep 2024 13:45:16 +0800
Subject: [PATCH 3/4] fix: run test:update

---
 .../test/__snapshots__/demo-ssr.spec.ts.snap  | 42 ++++++++++++++++
 .../test/__snapshots__/demo.spec.ts.snap      | 49 +++++++++++++++++++
 2 files changed, 91 insertions(+)

diff --git a/packages/vant/src/swipe/test/__snapshots__/demo-ssr.spec.ts.snap b/packages/vant/src/swipe/test/__snapshots__/demo-ssr.spec.ts.snap
index f2691f53d95..a36a35ade1a 100644
--- a/packages/vant/src/swipe/test/__snapshots__/demo-ssr.spec.ts.snap
+++ b/packages/vant/src/swipe/test/__snapshots__/demo-ssr.spec.ts.snap
@@ -236,4 +236,46 @@ exports[`should render demo and match snapshot 1`] = `
     </div>
   </div>
 </div>
+<div>
+  <!--[-->
+  <div
+    class="van-swipe"
+    style="direction:rtl;"
+  >
+    <div
+      style="transition-duration:500ms;transform:translateX(0px);"
+      class="van-swipe__track"
+    >
+      <!--[-->
+      <div
+        class="van-swipe-item"
+        style
+      >
+        <!--[-->
+        1
+      </div>
+      <div
+        class="van-swipe-item"
+        style
+      >
+        <!--[-->
+        2
+      </div>
+      <div
+        class="van-swipe-item"
+        style
+      >
+        <!--[-->
+        3
+      </div>
+      <div
+        class="van-swipe-item"
+        style
+      >
+        <!--[-->
+        4
+      </div>
+    </div>
+  </div>
+</div>
 `;
diff --git a/packages/vant/src/swipe/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/swipe/test/__snapshots__/demo.spec.ts.snap
index 1eb9b92e7a8..1b20a6ab24b 100644
--- a/packages/vant/src/swipe/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/vant/src/swipe/test/__snapshots__/demo.spec.ts.snap
@@ -266,4 +266,53 @@ exports[`should render demo and match snapshot 1`] = `
     </div>
   </div>
 </div>
+<div>
+  <div
+    class="van-swipe"
+    style="direction: rtl;"
+  >
+    <div
+      style="transition-duration: 0ms; transform: translateX(0px); width: 400px;"
+      class="van-swipe__track"
+    >
+      <div
+        class="van-swipe-item"
+        style="width: 100px;"
+      >
+        1
+      </div>
+      <div
+        class="van-swipe-item"
+        style="width: 100px;"
+      >
+        2
+      </div>
+      <div
+        class="van-swipe-item"
+        style="width: 100px;"
+      >
+        3
+      </div>
+      <div
+        class="van-swipe-item"
+        style="width: 100px;"
+      >
+        4
+      </div>
+    </div>
+    <div class="van-swipe__indicators van-swipe__indicators--rtl">
+      <i
+        style="background-color: white;"
+        class="van-swipe__indicator van-swipe__indicator--active"
+      >
+      </i>
+      <i class="van-swipe__indicator">
+      </i>
+      <i class="van-swipe__indicator">
+      </i>
+      <i class="van-swipe__indicator">
+      </i>
+    </div>
+  </div>
+</div>
 `;

From d81c4cd40813732ac8fab5dff96df59ef10f479c Mon Sep 17 00:00:00 2001
From: ys152452 <362565210@qq.com>
Date: Thu, 19 Sep 2024 18:05:30 +0800
Subject: [PATCH 4/4] fix: add test spec

---
 .../test/__snapshots__/index.spec.jsx.snap    | 33 +++++++++++++++++++
 packages/vant/src/swipe/test/index.spec.jsx   | 19 +++++++++++
 2 files changed, 52 insertions(+)

diff --git a/packages/vant/src/swipe/test/__snapshots__/index.spec.jsx.snap b/packages/vant/src/swipe/test/__snapshots__/index.spec.jsx.snap
index 812ac521db2..de18f7fdcbc 100644
--- a/packages/vant/src/swipe/test/__snapshots__/index.spec.jsx.snap
+++ b/packages/vant/src/swipe/test/__snapshots__/index.spec.jsx.snap
@@ -229,3 +229,36 @@ exports[`should render vertical swipe when using vertical prop 1`] = `
   </div>
 </div>
 `;
+
+exports[`should reverse swipe direction when container direction is rtl 1`] = `
+<div style="direction: rtl;">
+  <div
+    class="van-swipe"
+    style="width: 100px; height: 100px;"
+  >
+    <div
+      style="transition-duration: 500ms; transform: translateX(-100px); width: 200px;"
+      class="van-swipe__track"
+    >
+      <div
+        class="van-swipe-item"
+        style="width: 100px;"
+      >
+        1
+      </div>
+      <div
+        class="van-swipe-item"
+        style="width: 100px;"
+      >
+        2
+      </div>
+    </div>
+    <div class="van-swipe__indicators">
+      <i class="van-swipe__indicator">
+      </i>
+      <i class="van-swipe__indicator van-swipe__indicator--active">
+      </i>
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/vant/src/swipe/test/index.spec.jsx b/packages/vant/src/swipe/test/index.spec.jsx
index 3b43d540034..d526a611206 100644
--- a/packages/vant/src/swipe/test/index.spec.jsx
+++ b/packages/vant/src/swipe/test/index.spec.jsx
@@ -360,3 +360,22 @@ test('should emit drag-start and drag-end events correctly', async () => {
   expect(dragEnd).toHaveBeenCalledTimes(2);
   expect(dragEnd).toHaveBeenCalledWith({ index: 0 });
 });
+
+test('should reverse swipe direction when container direction is rtl', async () => {
+  const wrapper = mount({
+    render() {
+      return (
+        <div style="direction: rtl">
+          <Swipe style={swipeStyle}>
+            <SwipeItem>1</SwipeItem>
+            <SwipeItem>2</SwipeItem>
+          </Swipe>
+        </div>
+      );
+    },
+  });
+
+  const track = wrapper.find('.van-swipe__track');
+  await triggerDrag(track, -100, 0);
+  expect(wrapper.html()).toMatchSnapshot();
+});