From aec40f8d79a832362c31413b33bbce69747f1434 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: Tue, 8 Aug 2023 08:47:40 +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=E7=BB=86?=
 =?UTF-8?q?=E8=8A=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/mixte/src/move/demo/move.vue | 30 ++++++++++++++++++---------
 packages/unocss.config.ts             |  2 +-
 2 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/packages/mixte/src/move/demo/move.vue b/packages/mixte/src/move/demo/move.vue
index ee6c1ab5..6bacaa3d 100644
--- a/packages/mixte/src/move/demo/move.vue
+++ b/packages/mixte/src/move/demo/move.vue
@@ -1,10 +1,10 @@
 <template>
-  <TransitionGroup tag="div" move-class="move-item" text-sm flex="~ gap-2" mt-5>
+  <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 }" :data-index="index"
-        size-8 flex="~ items-center justify-center" transition="all duration-300" bg-teal-3 el-2
+        :class="{ 'jump': index === to, 'will-move': [from, to].includes(index) }" :data-index="index"
+        size-8 flex="~ items-center justify-center" transition="all duration-30000" bg-teal-3 el-2
       >
         {{ num }}
       </div>
@@ -27,29 +27,39 @@
   import { move } from 'mixte';
   import { offset, useFloating } from '@floating-ui/vue';
 
+  const containerRef = ref<HTMLElement>();
   const itemsRef = ref<HTMLElement[]>([]);
   const fromFloatingRef = ref<HTMLElement>();
   const toFloatingRef = ref<HTMLElement>();
 
-  const array = reactive([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
+  const array = reactive([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]);
   const from = ref(0);
   const to = ref(5);
 
   const fromRef = computed(() => itemsRef.value.find(item => item.dataset.index === `${from.value}`));
   const toRef = computed(() => itemsRef.value.find(item => item.dataset.index === `${to.value}`));
 
-  const { floatingStyles: fromFloatingStyles } = useFloating(fromRef, fromFloatingRef, {
+  const { floatingStyles: fromFloatingStyles, update: fromFloatingUpdate } = useFloating(fromRef, fromFloatingRef, {
     placement: 'top',
     middleware: [offset(6)],
   });
-  const { floatingStyles: toFloatingStyles } = useFloating(toRef, toFloatingRef, {
+  const { floatingStyles: toFloatingStyles, update: toFloatingUpdate } = useFloating(toRef, toFloatingRef, {
     placement: 'bottom',
     middleware: [offset(6)],
   });
+
+  watch(useElementSize(containerRef).width, () => {
+    fromFloatingUpdate();
+    toFloatingUpdate();
+  });
 </script>
 
-<style scoped>
-  .move-item.jump{
-    @apply -translate-y-8
-  }
+<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
 </style>
diff --git a/packages/unocss.config.ts b/packages/unocss.config.ts
index 423f85c5..36f470f4 100644
--- a/packages/unocss.config.ts
+++ b/packages/unocss.config.ts
@@ -15,7 +15,7 @@ export default defineConfig({
     'm-input-sm': 'p-(1 x-1.5)',
 
     // 弹出框
-    'm-popover': 'text-sm bg-black c-white rounded transition-transform  p-(.5 x2)',
+    'm-popover': 'text-sm bg-black c-white rounded transition-transform p-(.5 x2)',
   },
 
   presets: [