From bdae082d6ca7cae2858e425a38e755779de2cac0 Mon Sep 17 00:00:00 2001
From: Eiinu <eiinu@qq.com>
Date: Thu, 20 Jul 2023 00:44:41 +0800
Subject: [PATCH] =?UTF-8?q?feat(swipe):=20=E6=96=B0=E5=A2=9E=20SwipeGroup?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/basic/pages/button/index.vue          | 19 +++--
 .../src/feedback/pages/swipe/index.vue        | 23 +++++++
 src/config.json                               | 10 +++
 src/packages/__VUE/swipe/demo.vue             | 29 +++++++-
 src/packages/__VUE/swipe/index.scss           |  1 +
 src/packages/__VUE/swipe/index.taro.vue       | 69 +++++++++++++------
 src/packages/__VUE/swipe/index.vue            | 64 +++++++++++------
 src/packages/__VUE/swipegroup/index.scss      |  0
 src/packages/__VUE/swipegroup/index.taro.vue  | 31 +++++++++
 src/packages/__VUE/swipegroup/index.vue       | 31 +++++++++
 10 files changed, 226 insertions(+), 51 deletions(-)
 create mode 100644 src/packages/__VUE/swipegroup/index.scss
 create mode 100644 src/packages/__VUE/swipegroup/index.taro.vue
 create mode 100644 src/packages/__VUE/swipegroup/index.vue

diff --git a/packages/nutui-taro-demo/src/basic/pages/button/index.vue b/packages/nutui-taro-demo/src/basic/pages/button/index.vue
index 717d01d258..44ec05a7aa 100644
--- a/packages/nutui-taro-demo/src/basic/pages/button/index.vue
+++ b/packages/nutui-taro-demo/src/basic/pages/button/index.vue
@@ -103,18 +103,25 @@ export default {
 <style lang="scss">
 .demo-button-row {
   margin-bottom: 20px;
+  .nut-button {
+    margin-right: 15px;
+    &:last-child {
+      margin-bottom: 0;
+      margin-right: 0;
+    }
+  }
 }
 .demo-button-row2 {
   margin-bottom: 10px;
   display: flex;
   align-items: center;
   flex-wrap: wrap;
-}
-.nut-button {
-  margin-right: 15px;
-  &:last-child {
-    margin-bottom: 0;
-    margin-right: 0;
+  .nut-button {
+    margin-right: 15px;
+    &:last-child {
+      margin-bottom: 0;
+      margin-right: 0;
+    }
   }
 }
 </style>
diff --git a/packages/nutui-taro-demo/src/feedback/pages/swipe/index.vue b/packages/nutui-taro-demo/src/feedback/pages/swipe/index.vue
index 91649e0d33..4829910230 100644
--- a/packages/nutui-taro-demo/src/feedback/pages/swipe/index.vue
+++ b/packages/nutui-taro-demo/src/feedback/pages/swipe/index.vue
@@ -52,6 +52,29 @@
         <nut-button shape="square" style="height: 100%" type="info">收藏</nut-button>
       </template>
     </nut-swipe>
+    <h2>使用 SwipeGroup 控制 Swipe 之间互斥</h2>
+    <nut-swipe-group lock>
+      <nut-swipe name="11">
+        <nut-cell round-radius="0" title="左滑删除" />
+        <template #right>
+          <nut-button shape="square" style="height: 100%" type="danger">删除</nut-button>
+        </template>
+      </nut-swipe>
+      <nut-swipe name="22">
+        <nut-cell round-radius="0" title="左滑删除" />
+        <template #right>
+          <nut-button shape="square" style="height: 100%" type="danger">删除</nut-button>
+        </template>
+      </nut-swipe>
+      <div>
+        <nut-swipe name="33">
+          <nut-cell round-radius="0" title="左滑删除" />
+          <template #right>
+            <nut-button shape="square" style="height: 100%" type="danger">删除</nut-button>
+          </template>
+        </nut-swipe>
+      </div>
+    </nut-swipe-group>
   </div>
 </template>
 
diff --git a/src/config.json b/src/config.json
index be404b6214..66787dbd91 100644
--- a/src/config.json
+++ b/src/config.json
@@ -663,6 +663,16 @@
           "show": true,
           "author": "richard1015"
         },
+        {
+          "name": "SwipeGroup",
+          "taro": true,
+          "cName": "滑动手势",
+          "type": "component",
+          "show": false,
+          "exportEmpty": true,
+          "desc": "Swipe 的集合，用于控制互斥",
+          "author": "eiinu"
+        },
         {
           "version": "3.0.0",
           "name": "ActionSheet",
diff --git a/src/packages/__VUE/swipe/demo.vue b/src/packages/__VUE/swipe/demo.vue
index 5341cffb32..5c0a028376 100644
--- a/src/packages/__VUE/swipe/demo.vue
+++ b/src/packages/__VUE/swipe/demo.vue
@@ -56,6 +56,29 @@
         <nut-button shape="square" style="height: 100%" type="info">{{ translate('collect') }}</nut-button>
       </template>
     </nut-swipe>
+    <h2>使用 SwipeGroup 控制 Swipe 之间互斥</h2>
+    <nut-swipe-group lock>
+      <nut-swipe name="11" @click="onClick">
+        <nut-cell round-radius="0" :title="translate('leftDel')" />
+        <template #right>
+          <nut-button shape="square" style="height: 100%" type="danger">{{ translate('delete') }}</nut-button>
+        </template>
+      </nut-swipe>
+      <nut-swipe name="22">
+        <nut-cell round-radius="0" :title="translate('leftDel')" />
+        <template #right>
+          <nut-button shape="square" style="height: 100%" type="danger">{{ translate('delete') }}</nut-button>
+        </template>
+      </nut-swipe>
+      <div>
+        <nut-swipe name="33">
+          <nut-cell round-radius="0" :title="translate('leftDel')" />
+          <template #right>
+            <nut-button shape="square" style="height: 100%" type="danger">{{ translate('delete') }}</nut-button>
+          </template>
+        </nut-swipe>
+      </div>
+    </nut-swipe-group>
   </div>
 </template>
 
@@ -80,7 +103,8 @@ const initTranslate = () =>
       desc: '商品描述',
       delete: '删除',
       select: '选择',
-      collect: '收藏'
+      collect: '收藏',
+      group: '使用 SwipeGroup 控制 Swipe 之间互斥'
     },
     'en-US': {
       basic: 'Basic Usage',
@@ -96,7 +120,8 @@ const initTranslate = () =>
       desc: 'product description',
       delete: 'Delelte',
       select: 'Select',
-      collect: 'Collect'
+      collect: 'Collect',
+      group: 'Use SwipeGroup to make swipe exclusive'
     }
   });
 export default defineComponent({
diff --git a/src/packages/__VUE/swipe/index.scss b/src/packages/__VUE/swipe/index.scss
index 81239a1cba..248f0416f0 100644
--- a/src/packages/__VUE/swipe/index.scss
+++ b/src/packages/__VUE/swipe/index.scss
@@ -1,6 +1,7 @@
 .nut-swipe {
   position: relative;
   display: block;
+  cursor: grab;
   transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
   &__left,
   &__right {
diff --git a/src/packages/__VUE/swipe/index.taro.vue b/src/packages/__VUE/swipe/index.taro.vue
index 895d97951d..19d3a998a8 100644
--- a/src/packages/__VUE/swipe/index.taro.vue
+++ b/src/packages/__VUE/swipe/index.taro.vue
@@ -1,31 +1,36 @@
 <template>
   <view
-    :class="classes"
+    class="nut-swipe"
     :style="touchStyle"
     @touchstart="onTouchStart"
     @touchmove="onTouchMove"
     @touchend="onTouchEnd"
     @touchcancel="onTouchEnd"
   >
-    <view class="nut-swipe__left" ref="leftRef" :id="'leftRef-' + refRandomId">
+    <view class="nut-swipe__left" ref="leftRef" :id="'leftRef-' + refRandomId" @click="onClick($event, 'left', true)">
       <slot name="left"></slot>
     </view>
 
-    <view class="nut-swipe__content">
+    <view class="nut-swipe__content" @click="onClick($event, 'content', lockClick)">
       <slot name="default"></slot>
     </view>
 
-    <view class="nut-swipe__right" ref="rightRef" :id="'rightRef-' + refRandomId">
+    <view
+      class="nut-swipe__right"
+      ref="rightRef"
+      :id="'rightRef-' + refRandomId"
+      @click="onClick($event, 'right', true)"
+    >
       <slot name="right"></slot>
     </view>
   </view>
 </template>
 <script lang="ts">
 import { useTouch } from '@/packages/utils/useTouch';
-import { computed, onMounted, reactive, ref } from 'vue';
+import { computed, onMounted, inject, watch, reactive, ref } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { useTaroRect } from '@/packages/utils/useTaroRect';
-const { componentName, create } = createComponent('swipe');
+const { create } = createComponent('swipe');
 export type SwipePosition = 'left' | 'right' | '';
 export default create({
   props: {
@@ -46,22 +51,18 @@ export default create({
       default: false
     }
   },
-  emits: ['open', 'close'],
+  emits: ['open', 'close', 'click'],
 
   setup(props, { emit }) {
     const refRandomId = Math.random().toString(36).slice(-8);
-    const classes = computed(() => {
-      const prefixCls = componentName;
-      return {
-        [prefixCls]: true
-      };
-    });
 
     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) => {
@@ -77,13 +78,24 @@ export default create({
       );
     };
 
+    const parent = inject('swipeGroup', null) as any;
+
+    watch(
+      () => parent?.name?.value,
+      (name) => {
+        if (props.name !== name && parent && parent.lock) {
+          close();
+        }
+      }
+    );
+
     onMounted(() => {
       setTimeout(() => {
         initWidth();
       }, 100);
     });
 
-    let opened: boolean = false;
+    const opened = ref(false);
     let position: SwipePosition = '';
     let oldPosition: SwipePosition = '';
 
@@ -93,7 +105,8 @@ export default create({
     });
 
     const open = (p: SwipePosition = '') => {
-      opened = true;
+      parent && parent.update(props.name);
+      opened.value = true;
       if (p) {
         state.offset = p === 'left' ? -rightRefWidth.value : leftRefWidth.value;
       }
@@ -105,13 +118,22 @@ export default create({
 
     const close = () => {
       state.offset = 0;
-      opened = false;
+      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)`
@@ -123,14 +145,14 @@ export default create({
       let offset = deltaX;
       switch (position) {
         case 'left':
-          if (opened && oldPosition === position) {
+          if (opened.value && oldPosition === position) {
             offset = -rightRefWidth.value;
           } else {
             offset = Math.abs(deltaX) > rightRefWidth.value ? -rightRefWidth.value : deltaX;
           }
           break;
         case 'right':
-          if (opened && oldPosition === position) {
+          if (opened.value && oldPosition === position) {
             offset = leftRefWidth.value;
           } else {
             offset = Math.abs(deltaX) > leftRefWidth.value ? leftRefWidth.value : deltaX;
@@ -146,10 +168,11 @@ export default create({
         if (props.disabled) return;
         touch.start(event);
       },
-      async onTouchMove(event: TouchEvent) {
+      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) {
@@ -182,19 +205,23 @@ export default create({
               }
               break;
           }
+          setTimeout(() => {
+            lockClick.value = false;
+          }, 0);
         }
       }
     };
 
     return {
-      classes,
       touchStyle,
       ...touchMethods,
       leftRef,
       rightRef,
       refRandomId,
       open,
-      close
+      close,
+      onClick,
+      lockClick
     };
   }
 });
diff --git a/src/packages/__VUE/swipe/index.vue b/src/packages/__VUE/swipe/index.vue
index 39e532aabc..0abe04ae72 100644
--- a/src/packages/__VUE/swipe/index.vue
+++ b/src/packages/__VUE/swipe/index.vue
@@ -1,31 +1,30 @@
 <template>
   <view
-    :class="classes"
+    class="nut-swipe"
     :style="touchStyle"
     @touchstart="onTouchStart"
     @touchmove="onTouchMove"
     @touchend="onTouchEnd"
     @touchcancel="onTouchEnd"
   >
-    <view class="nut-swipe__left" ref="leftRef">
+    <view class="nut-swipe__left" ref="leftRef" @click="onClick($event, 'left', true)">
       <slot name="left"></slot>
     </view>
 
-    <view class="nut-swipe__content">
+    <view class="nut-swipe__content" @click="onClick($event, 'content', lockClick)">
       <slot name="default"></slot>
     </view>
 
-    <view class="nut-swipe__right" ref="rightRef">
+    <view class="nut-swipe__right" ref="rightRef" @click="onClick($event, 'right', true)">
       <slot name="right"></slot>
     </view>
   </view>
 </template>
 <script lang="ts">
 import { useTouch } from '@/packages/utils/useTouch';
-import { computed, reactive, Ref, ref } from 'vue';
+import { computed, inject, reactive, watch, Ref, ref } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { componentName, create } = createComponent('swipe');
-
+const { create } = createComponent('swipe');
 export type SwipePosition = 'left' | 'right' | '';
 export default create({
   props: {
@@ -46,20 +45,15 @@ export default create({
       default: false
     }
   },
-  emits: ['open', 'close'],
+  emits: ['open', 'close', 'click'],
 
   setup(props, { emit }) {
-    const classes = computed(() => {
-      const prefixCls = componentName;
-      return {
-        [prefixCls]: true
-      };
-    });
-
     const getRefWidth = (ref: Ref<HTMLElement | undefined>): number => {
       return ref.value?.clientWidth || 0;
     };
 
+    const lockClick = ref(false);
+
     const leftRef = ref<HTMLElement>(),
       leftRefWidth = computed(() => {
         return getRefWidth(leftRef);
@@ -69,7 +63,18 @@ export default create({
         return getRefWidth(rightRef);
       });
 
-    let opened: boolean = false;
+    const parent = inject('swipeGroup', 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 = '';
 
@@ -79,7 +84,8 @@ export default create({
     });
 
     const open = (p: SwipePosition = '') => {
-      opened = true;
+      parent && parent.update(props.name);
+      opened.value = true;
       if (p) {
         state.offset = p === 'left' ? -rightRefWidth.value : leftRefWidth.value;
       }
@@ -91,13 +97,22 @@ export default create({
 
     const close = () => {
       state.offset = 0;
-      opened = false;
+      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)`
@@ -109,14 +124,14 @@ export default create({
       let offset = deltaX;
       switch (position) {
         case 'left':
-          if (opened && oldPosition === position) {
+          if (opened.value && oldPosition === position) {
             offset = -rightRefWidth.value;
           } else {
             offset = Math.abs(deltaX) > rightRefWidth.value ? -rightRefWidth.value : deltaX;
           }
           break;
         case 'right':
-          if (opened && oldPosition === position) {
+          if (opened.value && oldPosition === position) {
             offset = leftRefWidth.value;
           } else {
             offset = Math.abs(deltaX) > leftRefWidth.value ? leftRefWidth.value : deltaX;
@@ -136,6 +151,7 @@ export default create({
         if (props.disabled) return;
         touch.move(event);
         if (touch.isHorizontal()) {
+          lockClick.value = true;
           state.moving = true;
           setoffset(touch.deltaX.value);
           if (props.touchMovePreventDefault) {
@@ -168,18 +184,22 @@ export default create({
               }
               break;
           }
+          setTimeout(() => {
+            lockClick.value = false;
+          }, 0);
         }
       }
     };
 
     return {
-      classes,
       touchStyle,
       ...touchMethods,
       leftRef,
       rightRef,
       open,
-      close
+      close,
+      onClick,
+      lockClick
     };
   }
 });
diff --git a/src/packages/__VUE/swipegroup/index.scss b/src/packages/__VUE/swipegroup/index.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/packages/__VUE/swipegroup/index.taro.vue b/src/packages/__VUE/swipegroup/index.taro.vue
new file mode 100644
index 0000000000..50160c89ae
--- /dev/null
+++ b/src/packages/__VUE/swipegroup/index.taro.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="nut-swipe-group" ref="swipeGroupRef">
+    <slot></slot>
+  </div>
+</template>
+<script lang="ts">
+import { provide, ref } from 'vue';
+import { createComponent } from '@/packages/utils/create';
+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('swipeGroup', {
+      update,
+      lock: props.lock,
+      name
+    });
+    return { swipeGroupRef };
+  }
+});
+</script>
diff --git a/src/packages/__VUE/swipegroup/index.vue b/src/packages/__VUE/swipegroup/index.vue
new file mode 100644
index 0000000000..50160c89ae
--- /dev/null
+++ b/src/packages/__VUE/swipegroup/index.vue
@@ -0,0 +1,31 @@
+<template>
+  <div class="nut-swipe-group" ref="swipeGroupRef">
+    <slot></slot>
+  </div>
+</template>
+<script lang="ts">
+import { provide, ref } from 'vue';
+import { createComponent } from '@/packages/utils/create';
+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('swipeGroup', {
+      update,
+      lock: props.lock,
+      name
+    });
+    return { swipeGroupRef };
+  }
+});
+</script>