From cc45ec0b525761b64699309adb3dc7b9bb951aed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=80=9A=E7=AA=97=E5=90=AC=E9=9B=A8=E4=B8=BF=E9=86=89?=
 =?UTF-8?q?=E6=97=A0=E5=BF=83?= <994039348@qq.com>
Date: Wed, 9 Aug 2023 10:47:37 +0800
Subject: [PATCH] =?UTF-8?q?[docs]=20=E4=BC=98=E5=8C=96=20`move`=20?=
 =?UTF-8?q?=E5=B7=A5=E5=85=B7=E6=96=B9=E6=B3=95=E6=96=87=E6=A1=A3=E6=BC=94?=
 =?UTF-8?q?=E7=A4=BA=E5=8A=A8=E7=94=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                          |  1 +
 packages/mixte/src/move/demo/move.vue | 97 ++++++++++++++++++++-------
 packages/unocss.config.ts             |  2 +-
 pnpm-lock.yaml                        |  7 ++
 4 files changed, 81 insertions(+), 26 deletions(-)

diff --git a/package.json b/package.json
index 0ab6c795..811bd9d0 100644
--- a/package.json
+++ b/package.json
@@ -46,6 +46,7 @@
     "eslint": "^8.46.0",
     "fast-glob": "^3.3.1",
     "fs-extra": "^11.1.1",
+    "gsap": "^3.12.2",
     "jsdom": "^22.1.0",
     "lint-staged": "^13.2.3",
     "magic-string": "^0.30.2",
diff --git a/packages/mixte/src/move/demo/move.vue b/packages/mixte/src/move/demo/move.vue
index 971df1be..b1e9bc1a 100644
--- a/packages/mixte/src/move/demo/move.vue
+++ b/packages/mixte/src/move/demo/move.vue
@@ -1,22 +1,21 @@
 <template>
-  <TransitionGroup ref="containerRef" tag="div" move-class="move-item" text-sm flex="~ gap-2 wrap" mt-5>
-    <template v-for="(num, index) in array" :key="num">
-      <div
-        ref="itemsRef"
-        :class="{ 'jump': index === to, 'will-move': [from, to].includes(index) }" :data-index="index"
-        size-8 flex="~ items-center justify-center" transition="all duration-360" bg-teal-3 el-2
-      >
-        {{ num }}
-      </div>
-    </template>
-  </TransitionGroup>
+  <div ref="containerRef" text-sm flex="~ gap-2 wrap" mt-5>
+    <div
+      v-for="(num, index) in array" :key="index"
+      ref="itemsRef"
+      :class="{ 'will-move': [from, to].includes(index) }" :data-index="index"
+      size-8 flex="~ items-center justify-center" bg-teal-3 el-2
+    >
+      {{ num }}
+    </div>
+  </div>
 
   <div flex="~ items-center gap-3" mt-10>
     <div text-sm grid="~ cols-[auto_1fr] items-center gap-(x2 y1)">
-      from: <el-input-number v-model="from" class="w-32!" controls-position="right" :min="0" :max="array.length - 1" />
-      to: <el-input-number v-model="to" class="w-32!" controls-position="right" :min="0" :max="array.length - 1" />
+      from: <el-input-number v-model="from" class="w-32!" :disabled="isMove" controls-position="right" :min="0" :max="array.length - 1" />
+      to: <el-input-number v-model="to" class="w-32!" :disabled="isMove" controls-position="right" :min="0" :max="array.length - 1" />
     </div>
-    <button m-btn @click="move(array, from, to)">移动</button>
+    <el-button class="c-white!" color="#14b8a6" :disabled="isMove" @click="toMove">移动</el-button>
   </div>
 
   <div ref="fromFloatingRef" m-popover :style="fromFloatingStyles">from</div>
@@ -24,17 +23,19 @@
 </template>
 
 <script lang="ts" setup>
-  import { move } from 'mixte';
+  import { delay, move } from 'mixte';
+  import { gsap } from 'gsap';
   import { offset, useFloating } from '@floating-ui/vue';
 
   const containerRef = ref<HTMLElement>();
-  const itemsRef = ref<HTMLElement[]>([]);
   const fromFloatingRef = ref<HTMLElement>();
   const toFloatingRef = ref<HTMLElement>();
+  const itemsRef = ref<HTMLElement[]>([]);
+  const itemsSortRef = computed(() => itemsRef.value.sort((a, b) => Number(a.dataset.index) - Number(b.dataset.index)));
 
   const array = reactive([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]);
-  const from = ref(0);
-  const to = ref(5);
+  const from = ref(10);
+  const to = ref(2);
 
   const fromRef = computed(() => itemsRef.value.find(item => item.dataset.index === `${from.value}`));
   const toRef = computed(() => itemsRef.value.find(item => item.dataset.index === `${to.value}`));
@@ -48,6 +49,57 @@
     middleware: [offset(6)],
   });
 
+  const isMove = ref(false);
+
+  function toMove() {
+    isMove.value = true;
+
+    const fromEl = fromRef.value!;
+    const [fromV, toV] = [from.value, to.value];
+    const [max, min] = [fromV, toV].sort((a, b) => b - a);
+    const itemsBounding = itemsSortRef.value.map(item => item.getBoundingClientRect());
+
+    const range = itemsSortRef.value
+      .map((el, index) => [el, itemsBounding[index]!, itemsBounding[index + (index > fromV ? -1 : 1)]!])
+      .filter(([el], index) => el !== fromEl && index >= min && index <= max) as [HTMLElement, DOMRect, DOMRect][];
+    const rangeTl = gsap.timeline();
+    let rangeIndex = 0;
+
+    if (fromV > toV) range.reverse();
+
+    // 移动到目标位置上方
+    gsap.to(fromEl, {
+      x: itemsBounding[toV]!.x - itemsBounding[fromV]!.x,
+      y: itemsBounding[toV]!.y - itemsBounding[fromV]!.y - 50,
+      zIndex: 6,
+      duration: Math.max(range.length / 10, 0.5),
+      ease: 'circ.out',
+    });
+    // 移动范围内的元素
+    range.forEach(([el, fromBounding, toBounding]) => {
+      rangeTl.to(el, {
+        x: toBounding.x - fromBounding.x,
+        y: toBounding.y - fromBounding.y,
+        duration: 0.07,
+        delay: (rangeIndex++) ? 0 : 0.3,
+      });
+    });
+    // 移动到目标位置
+    rangeTl.to(fromEl, {
+      y: itemsBounding[toV]!.y - itemsBounding[fromV]!.y,
+      ease: 'circ.in',
+      duration: 0.3,
+      delay: 0.1,
+      onComplete() {
+        delay(300).then(() => {
+          itemsSortRef.value.filter((_, i) => i >= min && i <= max).forEach(el => gsap.set(el, { x: 0, y: 0, zIndex: 'auto' }));
+          move(array, fromV, toV);
+          isMove.value = false;
+        });
+      },
+    });
+  }
+
   watch(useElementSize(containerRef).width, () => {
     fromFloatingUpdate();
     toFloatingUpdate();
@@ -55,11 +107,6 @@
 </script>
 
 <style lang="sass" scoped>
-  .move-item.jump
-    @apply -translate-y-8 z-1
-
-  .will-move
-    @apply relative
-    &::before
-      @apply content-[''] size-10 absolute b-(1 dashed gray rounded) z-666
+  .will-move::before
+    @apply content-[''] size-10 absolute b-(1 dashed gray rounded) z-1
 </style>
diff --git a/packages/unocss.config.ts b/packages/unocss.config.ts
index 36f470f4..125c913a 100644
--- a/packages/unocss.config.ts
+++ b/packages/unocss.config.ts
@@ -8,7 +8,7 @@ export default defineConfig({
     'm-box-b': 'flex-(~ items-center justify-center) rounded b-(1 solid neutral-3)',
 
     // 按钮
-    'm-btn': 'm-box flex-none bg-teal-5 c-white rounded-1 p-(1.5 x-3) active:bg-teal-6/90 disabled:cursor-not-allowed',
+    'm-btn': 'm-box flex-none bg-teal-5 c-white rounded-1 p-(1.5 x-3) hover:bg-teal-5/80 active:bg-teal-6/90 disabled:cursor-not-allowed',
 
     // 输入框
     'm-input': 'lh-none b-(1 solid neutral-3 rounded-1) p-(2 x-3)',
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 29305a3f..f62682c3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -53,6 +53,9 @@ importers:
       fs-extra:
         specifier: ^11.1.1
         version: 11.1.1
+      gsap:
+        specifier: ^3.12.2
+        version: 3.12.2
       jsdom:
         specifier: ^22.1.0
         version: 22.1.0
@@ -3316,6 +3319,10 @@ packages:
     resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
     dev: true
 
+  /gsap@3.12.2:
+    resolution: {integrity: sha512-EkYnpG8qHgYBFAwsgsGEqvT1WUidX0tt/ijepx7z8EUJHElykg91RvW1XbkT59T0gZzzszOpjQv7SE41XuIXyQ==}
+    dev: true
+
   /gzip-size@6.0.0:
     resolution: {integrity: sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==}
     engines: {node: '>=10'}