feat(swipe): add RTL mode

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) && !props.vertical
+          ? 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,14 +156,21 @@ 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) && !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, minOffset.value, 0);
+        targetOffset =
+          isRtl(root) && !props.vertical
+            ? clamp(targetOffset, 0, minOffset.value)
+            : clamp(targetOffset, minOffset.value, 0);
       }
-
       return targetOffset;
     };
 
@@ -180,22 +190,34 @@ 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) && !props.vertical) {
+          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 ? -trackSize.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,
+            );
+          }
         }
       }
-
       state.active = targetActive;
       state.offset = targetOffset;
 
@@ -327,9 +349,13 @@ 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)) &&
+                !props.vertical));
           if (!isEdgeTouch) {
             preventDefault(event, props.stopPropagation);
             move({ offset: delta.value });
@@ -357,16 +383,19 @@ export default defineComponent({
         const offset = props.vertical
           ? touch.offsetY.value
           : touch.offsetX.value;
-
         let pace = 0;
-
         if (props.loop) {
-          pace = offset > 0 ? (delta.value > 0 ? -1 : 1) : 0;
+          if (offset > 0) {
+            pace = delta.value > 0 ? -1 : 1;
+          } else {
+            pace = 0;
+          }
         } else {
           pace = -Math[delta.value > 0 ? 'ceil' : 'floor'](
             delta.value / size.value,
           );
         }
+        pace = isRtl(root) && !props.vertical ? -pace : pace;
 
         move({
           pace,
@@ -430,7 +459,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>
         );

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

packages/vant/src/swipe/index.less

@@ -45,6 +45,20 @@
         margin-bottom: var(--van-swipe-indicator-size);
       }
     }
+
+    &--rtl {
+      .van-swipe__indicator:not(:last-child) {
+        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);
+        }
+      }
+    }
   }
 
   &__indicator {

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>
 `;

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>
 `;

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>
+`;

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();
+});

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';
+}