From ac60b0d7491f444bad4adb447abac8b5e07f2114 Mon Sep 17 00:00:00 2001
From: Eiinu <eiinu@qq.com>
Date: Mon, 18 Mar 2024 09:49:23 +0800
Subject: [PATCH] refactor(swipe): move to script setup (#2975)

---
 src/config.json                               |   2 +
 .../components/GeneralShell.taro.vue          |   2 +-
 .../addresslist/components/GeneralShell.vue   |   2 +-
 .../__VUE/swipe/__tests__/swipe.spec.tsx      |   5 +-
 src/packages/__VUE/swipe/doc.en-US.md         |  10 +-
 src/packages/__VUE/swipe/doc.md               |  10 +-
 src/packages/__VUE/swipe/doc.taro.md          |  10 +-
 src/packages/__VUE/swipe/index.taro.ts        |  13 +
 src/packages/__VUE/swipe/index.taro.vue       | 231 ------------------
 src/packages/__VUE/swipe/index.ts             |  13 +
 src/packages/__VUE/swipe/index.vue            | 209 ----------------
 src/packages/__VUE/swipe/swipe.taro.vue       | 216 ++++++++++++++++
 src/packages/__VUE/swipe/swipe.vue            | 195 +++++++++++++++
 src/packages/__VUE/swipe/types.ts             |   1 +
 src/packages/__VUE/swipegroup/index.taro.ts   |  11 +
 src/packages/__VUE/swipegroup/index.taro.vue  |  32 ---
 src/packages/__VUE/swipegroup/index.ts        |  11 +
 src/packages/__VUE/swipegroup/index.vue       |  32 ---
 .../__VUE/swipegroup/swipe-group.taro.vue     |  32 +++
 src/packages/__VUE/swipegroup/swipe-group.vue |  32 +++
 20 files changed, 556 insertions(+), 513 deletions(-)
 create mode 100644 src/packages/__VUE/swipe/index.taro.ts
 delete mode 100644 src/packages/__VUE/swipe/index.taro.vue
 create mode 100644 src/packages/__VUE/swipe/index.ts
 delete mode 100644 src/packages/__VUE/swipe/index.vue
 create mode 100644 src/packages/__VUE/swipe/swipe.taro.vue
 create mode 100644 src/packages/__VUE/swipe/swipe.vue
 create mode 100644 src/packages/__VUE/swipegroup/index.taro.ts
 delete mode 100644 src/packages/__VUE/swipegroup/index.taro.vue
 create mode 100644 src/packages/__VUE/swipegroup/index.ts
 delete mode 100644 src/packages/__VUE/swipegroup/index.vue
 create mode 100644 src/packages/__VUE/swipegroup/swipe-group.taro.vue
 create mode 100644 src/packages/__VUE/swipegroup/swipe-group.vue

diff --git a/src/config.json b/src/config.json
index 1eaa82cfb1..c1c32bab9d 100644
--- a/src/config.json
+++ b/src/config.json
@@ -472,6 +472,7 @@
           "name": "Swipe",
           "cName": "滑动手势",
           "desc": "列表项左滑删除场景使用",
+          "setup": true,
           "author": "richard1015"
         },
         {
@@ -479,6 +480,7 @@
           "cName": "滑动手势",
           "show": false,
           "desc": "Swipe 的集合，用于控制互斥",
+          "setup": true,
           "author": "eiinu"
         },
         {
diff --git a/src/packages/__VUE/addresslist/components/GeneralShell.taro.vue b/src/packages/__VUE/addresslist/components/GeneralShell.taro.vue
index 1d845e7d64..79a4ed2122 100644
--- a/src/packages/__VUE/addresslist/components/GeneralShell.taro.vue
+++ b/src/packages/__VUE/addresslist/components/GeneralShell.taro.vue
@@ -47,7 +47,7 @@ import { createComponent } from '@/packages/utils/create';
 const { create } = createComponent('address-list-general');
 import ItemContents from './ItemContents.taro.vue';
 import NutButton from '../../button/index.taro';
-import NutSwipe from '../../swipe/index.taro.vue';
+import NutSwipe from '../../swipe/index.taro';
 
 export default create({
   props: {
diff --git a/src/packages/__VUE/addresslist/components/GeneralShell.vue b/src/packages/__VUE/addresslist/components/GeneralShell.vue
index 7ffaa183e3..50dfee0518 100644
--- a/src/packages/__VUE/addresslist/components/GeneralShell.vue
+++ b/src/packages/__VUE/addresslist/components/GeneralShell.vue
@@ -47,7 +47,7 @@ import { createComponent } from '@/packages/utils/create';
 const { create } = createComponent('address-list-general');
 import ItemContents from './ItemContents.vue';
 import NutButton from '../../button';
-import NutSwipe from '../../swipe/index.vue';
+import NutSwipe from '../../swipe';
 
 export default create({
   props: {
diff --git a/src/packages/__VUE/swipe/__tests__/swipe.spec.tsx b/src/packages/__VUE/swipe/__tests__/swipe.spec.tsx
index c10b5959bf..909c5338cc 100644
--- a/src/packages/__VUE/swipe/__tests__/swipe.spec.tsx
+++ b/src/packages/__VUE/swipe/__tests__/swipe.spec.tsx
@@ -1,9 +1,6 @@
 import { DOMWrapper, mount } from '@vue/test-utils';
-import Swipe from '../index.vue';
-import SwipeGroup from '../../swipegroup/index.vue';
+import { Button, Cell, Swipe, SwipeGroup } from '@nutui/nutui';
 import { nextTick } from 'vue';
-import Button from '../../button';
-import Cell from '../../cell/index.vue';
 import { triggerDrag, mockGetBoundingClientRect } from '@/packages/utils/unit';
 
 test('Swipe: base swipe', () => {
diff --git a/src/packages/__VUE/swipe/doc.en-US.md b/src/packages/__VUE/swipe/doc.en-US.md
index d88a95f583..3196344385 100644
--- a/src/packages/__VUE/swipe/doc.en-US.md
+++ b/src/packages/__VUE/swipe/doc.en-US.md
@@ -57,6 +57,7 @@ The prop `name` of Swipe is required.
 
 | Event | Description | Arguments |
 | --- | --- | --- |
+| click | click event | `name, position: 'left' \| 'content' \| 'right'` |
 | open | Emitted when Swipe is opened, swipe left/swipe right | `name, position: 'left' \| 'right' ` |
 | close | Emitted when Swipe is closed, swipe left/swipe right | `name, position: 'left' \| 'right' ` |
 
@@ -74,7 +75,6 @@ Use [ref](https://vuejs.org/guide/essentials/template-refs.html) to get Swipe in
 
 | Name | Description | Arguments |
 | --- | --- | --- |
-| click | click event | `name, position: 'left' \| 'content' \| 'right'` |
 | open | open swipe, swipe left/swipe right | `name, position: 'left' \| 'right' ` |
 | close | close swipe, swipe left/swipe right | `name, position: 'left' \| 'right' ` |
 
@@ -85,3 +85,11 @@ Use [ref](https://vuejs.org/guide/essentials/template-refs.html) to get Swipe in
 | Attribute | Description | Type | Default |
 | --- | --- | --- | --- |
 | lock`v4.1.1` | When a child Swipe opens, others will close. | boolean | `false` |
+
+### Types version
+
+The component exports the following type definitions:
+
+```ts
+import type { SwipePosition, SwipeProps, SwipeInstance, SwipeGroupProps, SwipeGroupInstance } from '@nutui/nutui';
+```
diff --git a/src/packages/__VUE/swipe/doc.md b/src/packages/__VUE/swipe/doc.md
index c1663f89f4..af33b321c4 100644
--- a/src/packages/__VUE/swipe/doc.md
+++ b/src/packages/__VUE/swipe/doc.md
@@ -57,6 +57,7 @@ app.use(Swipe);
 
 | 事件名 | 说明 | 回调参数 |
 | --- | --- | --- |
+| click | 点击事件 | `name, position: 'left' \| 'content' \| 'right'` |
 | open | 滑动时触发，left 指向左滑，right 指向右滑 | `name, position: 'left' \| 'right'` |
 | close | 关闭时触发，同上 | `name, position: 'left' \| 'right'` |
 
@@ -74,7 +75,6 @@ app.use(Swipe);
 
 | 方法名 | 说明 | 参数 |
 | --- | --- | --- |
-| click | 点击事件 | `name, position: 'left' \| 'content' \| 'right'` |
 | open | 滑动单元格侧边栏，left 指向左滑，right 指向右滑 | `name, position: 'left' \| 'right'` |
 | close | 收起单元格侧边栏，同上 | `name, position: 'left' \| 'right'` |
 
@@ -85,3 +85,11 @@ app.use(Swipe);
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | lock`v4.1.1` | 控制内部 Swipe 互斥，即滑动打开某一个 Swipe 时，触发其余 Swipe 的 close 方法 | boolean | `false` |
+
+### 类型定义 version
+
+组件导出以下类型定义：
+
+```ts
+import type { SwipePosition, SwipeProps, SwipeInstance, SwipeGroupProps, SwipeGroupInstance } from '@nutui/nutui';
+```
diff --git a/src/packages/__VUE/swipe/doc.taro.md b/src/packages/__VUE/swipe/doc.taro.md
index 2f0822e9ee..43b57810ec 100644
--- a/src/packages/__VUE/swipe/doc.taro.md
+++ b/src/packages/__VUE/swipe/doc.taro.md
@@ -57,6 +57,7 @@ app.use(Swipe);
 
 | 事件名 | 说明 | 回调参数 |
 | --- | --- | --- |
+| click | 点击事件 | `name, position: 'left' \| 'content' \| 'right'` |
 | open | 滑动时触发，left 指向左滑，right 指向右滑 | `name, position: 'left' \| 'right'` |
 | close | 关闭时触发，同上 | `name, position: 'left' \| 'right'` |
 
@@ -74,7 +75,6 @@ app.use(Swipe);
 
 | 方法名 | 说明 | 参数 |
 | --- | --- | --- |
-| click | 点击事件 | `name, position: 'left' \| 'content' \| 'right'` |
 | open | 滑动单元格侧边栏，left 指向左滑，right 指向右滑 | `name, position: 'left' \| 'right'` |
 | close | 收起单元格侧边栏，同上 | `name, position: 'left' \| 'right'` |
 
@@ -85,3 +85,11 @@ app.use(Swipe);
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | lock`v4.1.1` | 控制内部 Swipe 互斥，即滑动打开某一个 Swipe 时，触发其余 Swipe 的 close 方法 | boolean | `false` |
+
+### 类型定义 version
+
+组件导出以下类型定义：
+
+```ts
+import type { SwipePosition, SwipeProps, SwipeInstance, SwipeGroupProps, SwipeGroupInstance } from '@nutui/nutui-taro';
+```
diff --git a/src/packages/__VUE/swipe/index.taro.ts b/src/packages/__VUE/swipe/index.taro.ts
new file mode 100644
index 0000000000..ed01b4ddc9
--- /dev/null
+++ b/src/packages/__VUE/swipe/index.taro.ts
@@ -0,0 +1,13 @@
+import Swipe from './swipe.taro.vue';
+import type { ComponentPublicInstance } from 'vue';
+import { withInstall } from '@/packages/utils';
+
+withInstall(Swipe);
+
+export type { SwipeProps } from './swipe.taro.vue';
+
+export type { SwipePosition } from './types';
+
+export type SwipeInstance = ComponentPublicInstance & InstanceType<typeof Swipe>;
+
+export { Swipe, Swipe as default };
diff --git a/src/packages/__VUE/swipe/index.taro.vue b/src/packages/__VUE/swipe/index.taro.vue
deleted file mode 100644
index 03b7463440..0000000000
--- a/src/packages/__VUE/swipe/index.taro.vue
+++ /dev/null
@@ -1,231 +0,0 @@
-<template>
-  <view
-    class="nut-swipe"
-    :style="touchStyle"
-    @touchstart="onTouchStart"
-    @touchmove="onTouchMove"
-    @touchend="onTouchEnd"
-    @touchcancel="onTouchEnd"
-  >
-    <view :id="'leftRef-' + refRandomId" ref="leftRef" class="nut-swipe__left" @click="onClick($event, 'left', true)">
-      <slot name="left"></slot>
-    </view>
-
-    <view class="nut-swipe__content" @click="onClick($event, 'content', lockClick)">
-      <slot name="default"></slot>
-    </view>
-
-    <view
-      :id="'rightRef-' + refRandomId"
-      ref="rightRef"
-      class="nut-swipe__right"
-      @click="onClick($event, 'right', true)"
-    >
-      <slot name="right"></slot>
-    </view>
-  </view>
-</template>
-<script lang="ts">
-import { useTouch } from '@/packages/utils/useTouch';
-import { computed, onMounted, inject, watch, reactive, ref } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-import { useTaroRect } from '@/packages/utils/useTaroRect';
-import { SWIPE_KEY } from './types';
-const { create } = createComponent('swipe');
-export type SwipePosition = 'left' | 'right' | '';
-export default create({
-  props: {
-    name: {
-      type: String,
-      default: ''
-    },
-    touchMoveStopPropagation: {
-      type: Boolean,
-      default: false
-    },
-    touchMovePreventDefault: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ['open', 'close', 'click'],
-
-  setup(props, { emit }) {
-    const refRandomId = Math.random().toString(36).slice(-8);
-
-    const leftRef = ref<HTMLElement>();
-    const leftRefWidth = ref(0);
-    const rightRef = ref<HTMLElement>();
-    const rightRefWidth = ref(0);
-
-    const lockClick = ref(false);
-
-    const initWidth = () => {
-      useTaroRect(leftRef).then(
-        (rect: any) => {
-          leftRefWidth.value = rect?.width || 0;
-        },
-        () => {}
-      );
-      useTaroRect(rightRef).then(
-        (rect: any) => {
-          rightRefWidth.value = rect?.width || 0;
-        },
-        () => {}
-      );
-    };
-
-    const parent = inject(SWIPE_KEY, null) as any;
-
-    watch(
-      () => parent?.name?.value,
-      (name) => {
-        if (props.name !== name && parent && parent.lock) {
-          close();
-        }
-      }
-    );
-
-    onMounted(() => {
-      setTimeout(() => {
-        initWidth();
-      }, 100);
-    });
-
-    const opened = ref(false);
-    let position: SwipePosition = '';
-    let oldPosition: SwipePosition = '';
-
-    const state = reactive({
-      offset: 0,
-      moving: false
-    });
-
-    const open = (p: SwipePosition = '') => {
-      parent && parent.update(props.name);
-      opened.value = true;
-      if (p) {
-        state.offset = p === 'left' ? -rightRefWidth.value : leftRefWidth.value;
-      }
-      emit('open', {
-        name: props.name,
-        position: position || p
-      });
-    };
-
-    const close = () => {
-      state.offset = 0;
-      if (opened.value) {
-        opened.value = false;
-        emit('close', {
-          name: props.name,
-          position
-        });
-      }
-    };
-
-    const onClick = (e: Event, position: string, lock: boolean) => {
-      if (lock) {
-        e.stopPropagation();
-      } else {
-        close();
-      }
-      emit('click', position);
-    };
-
-    const touchStyle = computed(() => {
-      return {
-        transform: `translate3d(${state.offset}px, 0, 0)`
-      };
-    });
-
-    const setoffset = (deltaX: number) => {
-      position = deltaX > 0 ? 'right' : 'left';
-      let offset = deltaX;
-      switch (position) {
-        case 'left':
-          if (opened.value && oldPosition === position) {
-            offset = -rightRefWidth.value;
-          } else {
-            offset = Math.abs(deltaX) > rightRefWidth.value ? -rightRefWidth.value : deltaX;
-          }
-          break;
-        case 'right':
-          if (opened.value && oldPosition === position) {
-            offset = leftRefWidth.value;
-          } else {
-            offset = Math.abs(deltaX) > leftRefWidth.value ? leftRefWidth.value : deltaX;
-          }
-          break;
-      }
-      state.offset = offset;
-    };
-
-    const touch = useTouch();
-    const touchMethods = {
-      onTouchStart(event: TouchEvent) {
-        if (props.disabled) return;
-        touch.start(event);
-      },
-      onTouchMove(event: TouchEvent) {
-        if (props.disabled) return;
-        touch.move(event);
-        if (touch.isHorizontal()) {
-          lockClick.value = true;
-          state.moving = true;
-          setoffset(touch.deltaX.value);
-          if (props.touchMovePreventDefault) {
-            event.preventDefault();
-          }
-          if (props.touchMoveStopPropagation) {
-            event.stopPropagation();
-          }
-        }
-      },
-      onTouchEnd() {
-        if (state.moving) {
-          state.moving = false;
-          oldPosition = position;
-          switch (position) {
-            case 'left':
-              if (Math.abs(state.offset) <= rightRefWidth.value / 2) {
-                close();
-              } else {
-                state.offset = -rightRefWidth.value;
-                open();
-              }
-              break;
-            case 'right':
-              if (Math.abs(state.offset) <= leftRefWidth.value / 2) {
-                close();
-              } else {
-                state.offset = leftRefWidth.value;
-                open();
-              }
-              break;
-          }
-          setTimeout(() => {
-            lockClick.value = false;
-          }, 0);
-        }
-      }
-    };
-
-    return {
-      touchStyle,
-      ...touchMethods,
-      leftRef,
-      rightRef,
-      refRandomId,
-      open,
-      close,
-      onClick,
-      lockClick
-    };
-  }
-});
-</script>
diff --git a/src/packages/__VUE/swipe/index.ts b/src/packages/__VUE/swipe/index.ts
new file mode 100644
index 0000000000..937107d805
--- /dev/null
+++ b/src/packages/__VUE/swipe/index.ts
@@ -0,0 +1,13 @@
+import Swipe from './swipe.vue';
+import type { ComponentPublicInstance } from 'vue';
+import { withInstall } from '@/packages/utils';
+
+withInstall(Swipe);
+
+export type { SwipeProps } from './swipe.vue';
+
+export type { SwipePosition } from './types';
+
+export type SwipeInstance = ComponentPublicInstance & InstanceType<typeof Swipe>;
+
+export { Swipe, Swipe as default };
diff --git a/src/packages/__VUE/swipe/index.vue b/src/packages/__VUE/swipe/index.vue
deleted file mode 100644
index 379235f9b4..0000000000
--- a/src/packages/__VUE/swipe/index.vue
+++ /dev/null
@@ -1,209 +0,0 @@
-<template>
-  <view
-    class="nut-swipe"
-    :style="touchStyle"
-    @touchstart="onTouchStart"
-    @touchmove="onTouchMove"
-    @touchend="onTouchEnd"
-    @touchcancel="onTouchEnd"
-  >
-    <view ref="leftRef" class="nut-swipe__left" @click="onClick($event, 'left', true)">
-      <slot name="left"></slot>
-    </view>
-
-    <view class="nut-swipe__content" @click="onClick($event, 'content', lockClick)">
-      <slot name="default"></slot>
-    </view>
-
-    <view ref="rightRef" class="nut-swipe__right" @click="onClick($event, 'right', true)">
-      <slot name="right"></slot>
-    </view>
-  </view>
-</template>
-<script lang="ts">
-import { useTouch } from '@/packages/utils/useTouch';
-import { computed, inject, reactive, watch, Ref, ref } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-import { SWIPE_KEY } from './types';
-const { create } = createComponent('swipe');
-export type SwipePosition = 'left' | 'right' | '';
-export default create({
-  props: {
-    name: {
-      type: String,
-      default: ''
-    },
-    touchMoveStopPropagation: {
-      type: Boolean,
-      default: false
-    },
-    touchMovePreventDefault: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ['open', 'close', 'click'],
-
-  setup(props, { emit }) {
-    const getRefWidth = (ref: Ref<HTMLElement | undefined>): number => {
-      return ref.value?.getBoundingClientRect().width || 0;
-    };
-
-    const lockClick = ref(false);
-
-    const leftRef = ref<HTMLElement>(),
-      leftRefWidth = computed(() => {
-        return getRefWidth(leftRef);
-      });
-    const rightRef = ref<HTMLElement>(),
-      rightRefWidth = computed(() => {
-        return getRefWidth(rightRef);
-      });
-
-    const parent = inject(SWIPE_KEY, null) as any;
-
-    watch(
-      () => parent?.name?.value,
-      (name) => {
-        if (props.name !== name && parent && parent.lock) {
-          close();
-        }
-      }
-    );
-
-    const opened = ref(false);
-    let position: SwipePosition = '';
-    let oldPosition: SwipePosition = '';
-
-    const state = reactive({
-      offset: 0,
-      moving: false
-    });
-
-    const open = (p: SwipePosition = '') => {
-      parent && parent.update(props.name);
-      opened.value = true;
-      if (p) {
-        state.offset = p === 'left' ? -rightRefWidth.value : leftRefWidth.value;
-      }
-      emit('open', {
-        name: props.name,
-        position: position || p
-      });
-    };
-
-    const close = () => {
-      state.offset = 0;
-      if (opened.value) {
-        opened.value = false;
-        emit('close', {
-          name: props.name,
-          position
-        });
-      }
-    };
-
-    const onClick = (e: Event, position: string, lock: boolean) => {
-      if (lock) {
-        e.stopPropagation();
-      } else {
-        close();
-      }
-      emit('click', position);
-    };
-
-    const touchStyle = computed(() => {
-      return {
-        transform: `translate3d(${state.offset}px, 0, 0)`
-      };
-    });
-
-    const setoffset = (deltaX: number) => {
-      position = deltaX > 0 ? 'right' : 'left';
-      let offset = deltaX;
-      switch (position) {
-        case 'left':
-          if (opened.value && oldPosition === position) {
-            offset = -rightRefWidth.value;
-          } else {
-            offset = Math.abs(deltaX) > rightRefWidth.value ? -rightRefWidth.value : deltaX;
-          }
-          break;
-        case 'right':
-          if (opened.value && oldPosition === position) {
-            offset = leftRefWidth.value;
-          } else {
-            offset = Math.abs(deltaX) > leftRefWidth.value ? leftRefWidth.value : deltaX;
-          }
-          break;
-      }
-      state.offset = offset;
-    };
-
-    const touch = useTouch();
-    const touchMethods = {
-      onTouchStart(event: TouchEvent) {
-        if (props.disabled) return;
-        touch.start(event);
-      },
-      onTouchMove(event: TouchEvent) {
-        if (props.disabled) return;
-        touch.move(event);
-        if (touch.isHorizontal()) {
-          lockClick.value = true;
-          state.moving = true;
-          setoffset(touch.deltaX.value);
-          if (props.touchMovePreventDefault) {
-            event.preventDefault();
-          }
-          if (props.touchMoveStopPropagation) {
-            event.stopPropagation();
-          }
-        }
-      },
-      onTouchEnd() {
-        if (state.moving) {
-          state.moving = false;
-          oldPosition = position;
-          switch (position) {
-            case 'left':
-              if (Math.abs(state.offset) <= rightRefWidth.value / 2) {
-                close();
-              } else {
-                state.offset = -rightRefWidth.value;
-                open();
-              }
-              break;
-            case 'right':
-              if (Math.abs(state.offset) <= leftRefWidth.value / 2) {
-                close();
-              } else {
-                state.offset = leftRefWidth.value;
-                open();
-              }
-              break;
-          }
-          setTimeout(() => {
-            lockClick.value = false;
-          }, 0);
-        }
-      }
-    };
-
-    return {
-      touchStyle,
-      ...touchMethods,
-      leftRef,
-      rightRef,
-      open,
-      close,
-      onClick,
-      lockClick
-    };
-  }
-});
-</script>
diff --git a/src/packages/__VUE/swipe/swipe.taro.vue b/src/packages/__VUE/swipe/swipe.taro.vue
new file mode 100644
index 0000000000..c92e64f9a3
--- /dev/null
+++ b/src/packages/__VUE/swipe/swipe.taro.vue
@@ -0,0 +1,216 @@
+<template>
+  <view
+    class="nut-swipe"
+    :style="touchStyle"
+    @touchstart="onTouchStart"
+    @touchmove="onTouchMove"
+    @touchend="onTouchEnd"
+    @touchcancel="onTouchEnd"
+  >
+    <view :id="'leftRef-' + refRandomId" ref="leftRef" class="nut-swipe__left" @click="onClick($event, 'left', true)">
+      <slot name="left"></slot>
+    </view>
+
+    <view class="nut-swipe__content" @click="onClick($event, 'content', lockClick)">
+      <slot name="default"></slot>
+    </view>
+
+    <view
+      :id="'rightRef-' + refRandomId"
+      ref="rightRef"
+      class="nut-swipe__right"
+      @click="onClick($event, 'right', true)"
+    >
+      <slot name="right"></slot>
+    </view>
+  </view>
+</template>
+<script setup lang="ts">
+import { useTouch } from '@/packages/utils/useTouch';
+import { computed, onMounted, inject, watch, reactive, ref } from 'vue';
+import { useTaroRect } from '@/packages/utils/useTaroRect';
+import { SWIPE_KEY, type SwipePosition } from './types';
+
+defineOptions({
+  name: 'NutSwipe'
+});
+
+export type SwipeProps = Partial<{
+  name: string;
+  touchMoveStopPropagation: boolean;
+  touchMovePreventDefault: boolean;
+  disabled: boolean;
+}>;
+
+const props = withDefaults(defineProps<SwipeProps>(), {
+  name: '',
+  touchMoveStopPropagation: false,
+  touchMovePreventDefault: false,
+  disabled: false
+});
+
+const emit = defineEmits(['open', 'close', 'click']);
+
+const refRandomId = Math.random().toString(36).slice(-8);
+
+const leftRef = ref<HTMLElement>();
+const leftRefWidth = ref(0);
+const rightRef = ref<HTMLElement>();
+const rightRefWidth = ref(0);
+
+const lockClick = ref(false);
+
+const initWidth = () => {
+  useTaroRect(leftRef).then(
+    (rect: any) => {
+      leftRefWidth.value = rect?.width || 0;
+    },
+    () => {}
+  );
+  useTaroRect(rightRef).then(
+    (rect: any) => {
+      rightRefWidth.value = rect?.width || 0;
+    },
+    () => {}
+  );
+};
+
+const parent = inject(SWIPE_KEY, null) as any;
+
+watch(
+  () => parent?.name?.value,
+  (name) => {
+    if (props.name !== name && parent && parent.lock) {
+      close();
+    }
+  }
+);
+
+onMounted(() => {
+  setTimeout(() => {
+    initWidth();
+  }, 100);
+});
+
+const opened = ref(false);
+let position: SwipePosition = '';
+let oldPosition: SwipePosition = '';
+
+const state = reactive({
+  offset: 0,
+  moving: false
+});
+
+const open = (p: SwipePosition = '') => {
+  parent && parent.update(props.name);
+  opened.value = true;
+  if (p) {
+    state.offset = p === 'left' ? -rightRefWidth.value : leftRefWidth.value;
+  }
+  emit('open', {
+    name: props.name,
+    position: position || p
+  });
+};
+
+const close = () => {
+  state.offset = 0;
+  if (opened.value) {
+    opened.value = false;
+    emit('close', {
+      name: props.name,
+      position
+    });
+  }
+};
+
+const onClick = (e: Event, position: string, lock: boolean) => {
+  if (lock) {
+    e.stopPropagation();
+  } else {
+    close();
+  }
+  emit('click', position);
+};
+
+const touchStyle = computed(() => {
+  return {
+    transform: `translate3d(${state.offset}px, 0, 0)`
+  };
+});
+
+const setoffset = (deltaX: number) => {
+  position = deltaX > 0 ? 'right' : 'left';
+  let offset = deltaX;
+  switch (position) {
+    case 'left':
+      if (opened.value && oldPosition === position) {
+        offset = -rightRefWidth.value;
+      } else {
+        offset = Math.abs(deltaX) > rightRefWidth.value ? -rightRefWidth.value : deltaX;
+      }
+      break;
+    case 'right':
+      if (opened.value && oldPosition === position) {
+        offset = leftRefWidth.value;
+      } else {
+        offset = Math.abs(deltaX) > leftRefWidth.value ? leftRefWidth.value : deltaX;
+      }
+      break;
+  }
+  state.offset = offset;
+};
+
+const touch = useTouch();
+const onTouchStart = (event: TouchEvent) => {
+  if (props.disabled) return;
+  touch.start(event);
+};
+const onTouchMove = (event: TouchEvent) => {
+  if (props.disabled) return;
+  touch.move(event);
+  if (touch.isHorizontal()) {
+    lockClick.value = true;
+    state.moving = true;
+    setoffset(touch.deltaX.value);
+    if (props.touchMovePreventDefault) {
+      event.preventDefault();
+    }
+    if (props.touchMoveStopPropagation) {
+      event.stopPropagation();
+    }
+  }
+};
+const onTouchEnd = () => {
+  if (state.moving) {
+    state.moving = false;
+    oldPosition = position;
+    switch (position) {
+      case 'left':
+        if (Math.abs(state.offset) <= rightRefWidth.value / 2) {
+          close();
+        } else {
+          state.offset = -rightRefWidth.value;
+          open();
+        }
+        break;
+      case 'right':
+        if (Math.abs(state.offset) <= leftRefWidth.value / 2) {
+          close();
+        } else {
+          state.offset = leftRefWidth.value;
+          open();
+        }
+        break;
+    }
+    setTimeout(() => {
+      lockClick.value = false;
+    }, 0);
+  }
+};
+
+defineExpose({
+  open,
+  close
+});
+</script>
diff --git a/src/packages/__VUE/swipe/swipe.vue b/src/packages/__VUE/swipe/swipe.vue
new file mode 100644
index 0000000000..f52f5167c4
--- /dev/null
+++ b/src/packages/__VUE/swipe/swipe.vue
@@ -0,0 +1,195 @@
+<template>
+  <view
+    class="nut-swipe"
+    :style="touchStyle"
+    @touchstart="onTouchStart"
+    @touchmove="onTouchMove"
+    @touchend="onTouchEnd"
+    @touchcancel="onTouchEnd"
+  >
+    <view ref="leftRef" class="nut-swipe__left" @click="onClick($event, 'left', true)">
+      <slot name="left"></slot>
+    </view>
+
+    <view class="nut-swipe__content" @click="onClick($event, 'content', lockClick)">
+      <slot name="default"></slot>
+    </view>
+
+    <view ref="rightRef" class="nut-swipe__right" @click="onClick($event, 'right', true)">
+      <slot name="right"></slot>
+    </view>
+  </view>
+</template>
+<script setup lang="ts">
+import { useTouch } from '@/packages/utils/useTouch';
+import { computed, inject, reactive, watch, Ref, ref } from 'vue';
+import { SWIPE_KEY, type SwipePosition } from './types';
+
+defineOptions({
+  name: 'NutSwipe'
+});
+
+export type SwipeProps = Partial<{
+  name: string;
+  touchMoveStopPropagation: boolean;
+  touchMovePreventDefault: boolean;
+  disabled: boolean;
+}>;
+
+const props = withDefaults(defineProps<SwipeProps>(), {
+  name: '',
+  touchMoveStopPropagation: false,
+  touchMovePreventDefault: false,
+  disabled: false
+});
+
+const emit = defineEmits(['open', 'close', 'click']);
+
+const getRefWidth = (ref: Ref<HTMLElement | undefined>): number => {
+  return ref.value?.getBoundingClientRect().width || 0;
+};
+
+const lockClick = ref(false);
+
+const leftRef = ref<HTMLElement>(),
+  leftRefWidth = computed(() => {
+    return getRefWidth(leftRef);
+  });
+const rightRef = ref<HTMLElement>(),
+  rightRefWidth = computed(() => {
+    return getRefWidth(rightRef);
+  });
+
+const parent = inject(SWIPE_KEY, null) as any;
+
+watch(
+  () => parent?.name?.value,
+  (name) => {
+    if (props.name !== name && parent && parent.lock) {
+      close();
+    }
+  }
+);
+
+const opened = ref(false);
+let position: SwipePosition = '';
+let oldPosition: SwipePosition = '';
+
+const state = reactive({
+  offset: 0,
+  moving: false
+});
+
+const open = (p: SwipePosition = '') => {
+  parent && parent.update(props.name);
+  opened.value = true;
+  if (p) {
+    state.offset = p === 'left' ? -rightRefWidth.value : leftRefWidth.value;
+  }
+  emit('open', {
+    name: props.name,
+    position: position || p
+  });
+};
+
+const close = () => {
+  state.offset = 0;
+  if (opened.value) {
+    opened.value = false;
+    emit('close', {
+      name: props.name,
+      position
+    });
+  }
+};
+
+const onClick = (e: Event, position: string, lock: boolean) => {
+  if (lock) {
+    e.stopPropagation();
+  } else {
+    close();
+  }
+  emit('click', position);
+};
+
+const touchStyle = computed(() => {
+  return {
+    transform: `translate3d(${state.offset}px, 0, 0)`
+  };
+});
+
+const setoffset = (deltaX: number) => {
+  position = deltaX > 0 ? 'right' : 'left';
+  let offset = deltaX;
+  switch (position) {
+    case 'left':
+      if (opened.value && oldPosition === position) {
+        offset = -rightRefWidth.value;
+      } else {
+        offset = Math.abs(deltaX) > rightRefWidth.value ? -rightRefWidth.value : deltaX;
+      }
+      break;
+    case 'right':
+      if (opened.value && oldPosition === position) {
+        offset = leftRefWidth.value;
+      } else {
+        offset = Math.abs(deltaX) > leftRefWidth.value ? leftRefWidth.value : deltaX;
+      }
+      break;
+  }
+  state.offset = offset;
+};
+
+const touch = useTouch();
+const onTouchStart = (event: TouchEvent) => {
+  if (props.disabled) return;
+  touch.start(event);
+};
+const onTouchMove = (event: TouchEvent) => {
+  if (props.disabled) return;
+  touch.move(event);
+  if (touch.isHorizontal()) {
+    lockClick.value = true;
+    state.moving = true;
+    setoffset(touch.deltaX.value);
+    if (props.touchMovePreventDefault) {
+      event.preventDefault();
+    }
+    if (props.touchMoveStopPropagation) {
+      event.stopPropagation();
+    }
+  }
+};
+const onTouchEnd = () => {
+  if (state.moving) {
+    state.moving = false;
+    oldPosition = position;
+    switch (position) {
+      case 'left':
+        if (Math.abs(state.offset) <= rightRefWidth.value / 2) {
+          close();
+        } else {
+          state.offset = -rightRefWidth.value;
+          open();
+        }
+        break;
+      case 'right':
+        if (Math.abs(state.offset) <= leftRefWidth.value / 2) {
+          close();
+        } else {
+          state.offset = leftRefWidth.value;
+          open();
+        }
+        break;
+    }
+    setTimeout(() => {
+      lockClick.value = false;
+    }, 0);
+  }
+};
+
+defineExpose({
+  open,
+  close
+});
+</script>
diff --git a/src/packages/__VUE/swipe/types.ts b/src/packages/__VUE/swipe/types.ts
index 8c48cab6b0..4cded0f093 100644
--- a/src/packages/__VUE/swipe/types.ts
+++ b/src/packages/__VUE/swipe/types.ts
@@ -1 +1,2 @@
 export const SWIPE_KEY = Symbol('nut-swipe');
+export type SwipePosition = 'left' | 'right' | '';
diff --git a/src/packages/__VUE/swipegroup/index.taro.ts b/src/packages/__VUE/swipegroup/index.taro.ts
new file mode 100644
index 0000000000..21af1bf79f
--- /dev/null
+++ b/src/packages/__VUE/swipegroup/index.taro.ts
@@ -0,0 +1,11 @@
+import SwipeGroup from './swipe-group.taro.vue';
+import type { ComponentPublicInstance } from 'vue';
+import { withInstall } from '@/packages/utils';
+
+withInstall(SwipeGroup);
+
+export type { SwipeGroupProps } from './swipe-group.taro.vue';
+
+export type SwipeGroupInstance = ComponentPublicInstance & InstanceType<typeof SwipeGroup>;
+
+export { SwipeGroup, SwipeGroup as default };
diff --git a/src/packages/__VUE/swipegroup/index.taro.vue b/src/packages/__VUE/swipegroup/index.taro.vue
deleted file mode 100644
index c50fef04d6..0000000000
--- a/src/packages/__VUE/swipegroup/index.taro.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<template>
-  <view ref="swipeGroupRef" class="nut-swipe-group">
-    <slot></slot>
-  </view>
-</template>
-<script lang="ts">
-import { provide, ref } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-import { SWIPE_KEY } from '../swipe/types';
-const { create } = createComponent('swipe-group');
-export default create({
-  props: {
-    lock: {
-      type: Boolean,
-      default: false
-    }
-  },
-  setup(props) {
-    const swipeGroupRef = ref(null);
-    const name = ref('');
-    const update = (n: string) => {
-      name.value = n;
-    };
-    provide(SWIPE_KEY, {
-      update,
-      lock: props.lock,
-      name
-    });
-    return { swipeGroupRef };
-  }
-});
-</script>
diff --git a/src/packages/__VUE/swipegroup/index.ts b/src/packages/__VUE/swipegroup/index.ts
new file mode 100644
index 0000000000..2f0ba39e93
--- /dev/null
+++ b/src/packages/__VUE/swipegroup/index.ts
@@ -0,0 +1,11 @@
+import SwipeGroup from './swipe-group.vue';
+import type { ComponentPublicInstance } from 'vue';
+import { withInstall } from '@/packages/utils';
+
+withInstall(SwipeGroup);
+
+export type { SwipeGroupProps } from './swipe-group.vue';
+
+export type SwipeGroupInstance = ComponentPublicInstance & InstanceType<typeof SwipeGroup>;
+
+export { SwipeGroup, SwipeGroup as default };
diff --git a/src/packages/__VUE/swipegroup/index.vue b/src/packages/__VUE/swipegroup/index.vue
deleted file mode 100644
index 1ab1f2d99e..0000000000
--- a/src/packages/__VUE/swipegroup/index.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<template>
-  <div ref="swipeGroupRef" class="nut-swipe-group">
-    <slot></slot>
-  </div>
-</template>
-<script lang="ts">
-import { provide, ref } from 'vue';
-import { createComponent } from '@/packages/utils/create';
-import { SWIPE_KEY } from '../swipe/types';
-const { create } = createComponent('swipe-group');
-export default create({
-  props: {
-    lock: {
-      type: Boolean,
-      default: false
-    }
-  },
-  setup(props) {
-    const swipeGroupRef = ref(null);
-    const name = ref('');
-    const update = (n: string) => {
-      name.value = n;
-    };
-    provide(SWIPE_KEY, {
-      update,
-      lock: props.lock,
-      name
-    });
-    return { swipeGroupRef };
-  }
-});
-</script>
diff --git a/src/packages/__VUE/swipegroup/swipe-group.taro.vue b/src/packages/__VUE/swipegroup/swipe-group.taro.vue
new file mode 100644
index 0000000000..7eb35c4d02
--- /dev/null
+++ b/src/packages/__VUE/swipegroup/swipe-group.taro.vue
@@ -0,0 +1,32 @@
+<template>
+  <view ref="swipeGroupRef" class="nut-swipe-group">
+    <slot></slot>
+  </view>
+</template>
+<script setup lang="ts">
+import { provide, ref } from 'vue';
+import { SWIPE_KEY } from '../swipe/types';
+
+defineOptions({
+  name: 'NutSwipeGroup'
+});
+
+export type SwipeGroupProps = Partial<{
+  lock: boolean;
+}>;
+
+const props = withDefaults(defineProps<SwipeGroupProps>(), {
+  lock: false
+});
+
+const swipeGroupRef = ref(null);
+const name = ref('');
+const update = (n: string) => {
+  name.value = n;
+};
+provide(SWIPE_KEY, {
+  update,
+  lock: props.lock,
+  name
+});
+</script>
diff --git a/src/packages/__VUE/swipegroup/swipe-group.vue b/src/packages/__VUE/swipegroup/swipe-group.vue
new file mode 100644
index 0000000000..85c158e72e
--- /dev/null
+++ b/src/packages/__VUE/swipegroup/swipe-group.vue
@@ -0,0 +1,32 @@
+<template>
+  <div ref="swipeGroupRef" class="nut-swipe-group">
+    <slot></slot>
+  </div>
+</template>
+<script setup lang="ts">
+import { provide, ref } from 'vue';
+import { SWIPE_KEY } from '../swipe/types';
+
+defineOptions({
+  name: 'NutSwipeGroup'
+});
+
+export type SwipeGroupProps = Partial<{
+  lock: boolean;
+}>;
+
+const props = withDefaults(defineProps<SwipeGroupProps>(), {
+  lock: false
+});
+
+const swipeGroupRef = ref(null);
+const name = ref('');
+const update = (n: string) => {
+  name.value = n;
+};
+provide(SWIPE_KEY, {
+  update,
+  lock: props.lock,
+  name
+});
+</script>