group support

#5 (comment)
mfuu · Apr 27, 2023 · 50c1531 · 50c1531
1 parent fafd3e8
commit 50c1531
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 37 deletions.
diff --git a/src/Plugins/Children.tsx b/src/Plugins/Children.tsx
@@ -20,7 +20,7 @@ export const Items = defineComponent({
           key: dataKey,
           'data-key': dataKey,
         },
-        {default: () => slots.default?.()}
+        { default: () => slots.default?.() }
       );
     };
   },
@@ -45,7 +45,7 @@ export const Slots = defineComponent({
           key: dataKey,
           'data-key': dataKey,
         },
-        {default: () => slots.default?.()}
+        { default: () => slots.default?.() }
       );
     };
   },

diff --git a/src/Plugins/Sortable.ts b/src/Plugins/Sortable.ts
@@ -79,7 +79,7 @@ class Sortable {
     const fromList = [...this.initialList];
     const fromState = this._getFromTo({ node }, fromList);
 
-    await Store.setValue({ from: { ...fromState } });
+    await Store.setValue({ from: { list: fromList, ...fromState } });
 
     if (callback) {
       this.rangeChanged = false;
@@ -136,7 +136,7 @@ class Sortable {
     const key = getDataKey(item, this.context.dataKey);
 
     await Store.setValue({
-      to: { index, item, key },
+      to: { list: [...this.initialList], index, item, key },
     });
 
     const store = await Store.getValue();

diff --git a/src/Plugins/Storage.ts b/src/Plugins/Storage.ts
@@ -1,6 +1,7 @@
 const storeKey = 'virtualSortableState';
 
 type Item = {
+  list: any[];
   item: any;
   key: string;
   index: number;

diff --git a/src/index.tsx b/src/index.tsx
@@ -329,7 +329,7 @@ const VirtualDragList = defineComponent({
                     event: 'resize',
                     onResize: onHeaderResized,
                   },
-                  {default: () => slots.header()}
+                  { default: () => slots.header() }
                 )
               : null,
 
@@ -343,31 +343,35 @@ const VirtualDragList = defineComponent({
                 style: wrapStyle,
               },
               {
-                default: () => viewlist.value.slice(start, end + 1).map((item) => {
-                  const index = getItemIndex(item);
-                  const dataKey = getDataKey(item, props.dataKey);
-                  const itemStyle = {
-                    ...props.itemStyle,
-                    ...getItemStyle(dataKey),
-                  };
-
-                  return slots.item
-                    ? h(
-                        Items,
-                        {
-                          key: dataKey,
-                          tag: ItemTag,
-                          class: props.itemClass,
-                          style: itemStyle,
-                          event: 'resize',
-                          dataKey: dataKey,
-                          isHorizontal: isHorizontal,
-                          onResize: onItemResized,
-                        },
-                        {default: () => slots.item({ record: item, index, dataKey })}
-                      )
-                    : null
-                })
+                default: () =>
+                  viewlist.value.slice(start, end + 1).map((item) => {
+                    const index = getItemIndex(item);
+                    const dataKey = getDataKey(item, props.dataKey);
+                    const itemStyle = {
+                      ...props.itemStyle,
+                      ...getItemStyle(dataKey),
+                    };
+
+                    return slots.item
+                      ? h(
+                          Items,
+                          {
+                            key: dataKey,
+                            tag: ItemTag,
+                            class: props.itemClass,
+                            style: itemStyle,
+                            event: 'resize',
+                            dataKey: dataKey,
+                            isHorizontal: isHorizontal,
+                            onResize: onItemResized,
+                          },
+                          {
+                            default: () =>
+                              slots.item({ record: item, index, dataKey }),
+                          }
+                        )
+                      : null;
+                  }),
               }
             ),
 
@@ -382,7 +386,7 @@ const VirtualDragList = defineComponent({
                     event: 'resize',
                     onResize: onFooterResized,
                   },
-                  {default: () => slots.footer()}
+                  { default: () => slots.footer() }
                 )
               : null,
 
@@ -394,7 +398,7 @@ const VirtualDragList = defineComponent({
                 height: isHorizontal ? '100%' : '0px',
               },
             }),
-          ]
+          ],
         }
       );
     };

diff --git a/src/props.ts b/src/props.ts
@@ -5,7 +5,7 @@ type Direction = 'vertical' | 'horizontal';
 export const VirtualProps = {
   dataSource: {
     type: Array,
-    default: () => ([])
+    default: () => [],
   },
   dataKey: {
     type: String,
@@ -15,10 +15,10 @@ export const VirtualProps = {
     type: [Function, String],
   },
   handle: {
-    type: [Function, String]
+    type: [Function, String],
   },
   group: {
-    type: [Object, String]
+    type: [Object, String],
   },
   direction: {
     type: String as PropType<Direction>,
@@ -33,7 +33,7 @@ export const VirtualProps = {
   },
   delay: {
     type: Number,
-    default: 10,
+    default: 0,
   },
   animation: {
     type: Number,
@@ -45,7 +45,7 @@ export const VirtualProps = {
   },
   scrollThreshold: {
     type: Number,
-    default: 15,
+    default: 25,
   },
   keepOffset: {
     type: Boolean,