@koi-design/uxd-ui 13.2.9 → 13.2.11

package/es/components/Table/hooks/useDraggable.mjs

@@ -1,6 +1,12 @@
-import { ref, watch, computed, createVNode } from 'vue';
+import { ref, watch, onBeforeUnmount, computed, createVNode } from 'vue';
 import DraggableIcon from '../tableUnits/DraggableIcon.mjs';
 
+const getClientY = (event) => {
+  if ("touches" in event && event.touches.length > 0) {
+    return event.touches[0].clientY;
+  }
+  return event.clientY;
+};
 function useDraggable(props, tableRefs) {
   let sourceRowKey = "";
   let targetIndex = 0;
@@ -41,28 +47,54 @@ function useDraggable(props, tableRefs) {
   }, {
     flush: "post"
   });
+  const getBodyWrapRef = () => {
+    var _a;
+    const body = tableRefs.bodyTable;
+    return (_a = body == null ? void 0 : body.wrapRef) != null ? _a : null;
+  };
   const setRowRefsTranslate = (event) => {
+    var _a;
+    if (!sourceRowKey) {
+      return;
+    }
+    const wrapRef = getBodyWrapRef();
+    if (!wrapRef) {
+      return;
+    }
+    const clientY = getClientY(event);
     const currentRowData = rowDataMap.value[sourceRowKey];
+    const firstRowEl = (_a = currentRowData == null ? void 0 : currentRowData.rowRef[0]) == null ? void 0 : _a.value;
+    if (!currentRowData || !firstRowEl) {
+      return;
+    }
     const {
       height: currentHeight
-    } = currentRowData.rowRef[0].value.getBoundingClientRect();
-    const realClientY = event.clientY + tableRefs.bodyTable.wrapRef.scrollTop;
+    } = firstRowEl.getBoundingClientRect();
+    const realClientY = clientY + wrapRef.scrollTop;
     const safeTranslateY = Math.max(relativeMinY, Math.min(realClientY - dragStartPosition, relativeMaxY));
     currentRowData.rowRef.forEach((currentItem) => {
+      if (!currentItem.value) {
+        return;
+      }
       currentItem.value.style.transform = `translateY(${safeTranslateY}px)`;
       currentItem.value.style.position = "relative";
       currentItem.value.style.zIndex = "999";
     });
     targetIndex = currentRowData.index;
     Object.keys(rowDataMap.value).forEach((rowKey) => {
+      var _a2;
       if (rowKey !== sourceRowKey) {
         const rowData = rowDataMap.value[rowKey];
+        const otherFirst = (_a2 = rowData.rowRef[0]) == null ? void 0 : _a2.value;
+        if (!otherFirst) {
+          return;
+        }
         const sort = rowData.index < currentRowData.index ? 1 : -1;
         const {
           height,
           top
-        } = rowData.rowRef[0].value.getBoundingClientRect();
-        const position = top + Number((height / 2).toFixed(2)) < event.clientY ? 1 : -1;
+        } = otherFirst.getBoundingClientRect();
+        const position = top + Number((height / 2).toFixed(2)) < clientY ? 1 : -1;
         if (!(sort + position)) {
           let translateY = currentHeight;
           let index = Math.min(targetIndex, rowData.index);
@@ -72,13 +104,17 @@ function useDraggable(props, tableRefs) {
           }
           targetIndex = index;
           rowData.rowRef.forEach((rowRefItem) => {
-            rowRefItem.value.style.transform = `translateY(${translateY}px)`;
-            rowRefItem.value.style.transition = "transform 0.3s";
+            if (rowRefItem.value) {
+              rowRefItem.value.style.transform = `translateY(${translateY}px)`;
+              rowRefItem.value.style.transition = "transform 0.3s";
+            }
           });
         } else {
           rowData.rowRef.forEach((rowRefItem) => {
-            rowRefItem.value.style.transform = "none";
-            rowRefItem.value.style.transition = "transform 0.3s";
+            if (rowRefItem.value) {
+              rowRefItem.value.style.transform = "none";
+              rowRefItem.value.style.transition = "transform 0.3s";
+            }
           });
         }
       }
@@ -95,53 +131,90 @@ function useDraggable(props, tableRefs) {
     }
   };
   const handleBodyScrollY = (event) => {
-    if (bodyTop + bodyHeight > event.clientY && event.clientY > bodyTop) {
+    const clientY = getClientY(event);
+    if (bodyTop + bodyHeight > clientY && clientY > bodyTop) {
       clearBodyScrollY();
     } else if (!scrollTimer) {
-      const px = event.clientY < bodyTop ? -3 : 3;
+      const bodyInst = tableRefs.bodyTable;
+      if (!(bodyInst == null ? void 0 : bodyInst.setScrollTop) || !bodyInst.wrapRef) {
+        return;
+      }
+      const px = clientY < bodyTop ? -3 : 3;
       scrollTimer = setInterval(() => {
-        tableRefs.bodyTable.setScrollTop(Math.max(0, Math.min(tableRefs.bodyTable.wrapRef.scrollTop + px, tableHeight - bodyHeight)));
+        const inst = tableRefs.bodyTable;
+        const wrap = inst == null ? void 0 : inst.wrapRef;
+        if (!(inst == null ? void 0 : inst.setScrollTop) || !wrap) {
+          clearBodyScrollY();
+          return;
+        }
+        inst.setScrollTop(Math.max(0, Math.min(wrap.scrollTop + px, tableHeight - bodyHeight)));
         setRowRefsTranslate(event);
       }, 10);
     }
   };
   const handleMousemove = (event) => {
+    if (!sourceRowKey) {
+      return;
+    }
     handleBodyScrollY(event);
     if (!scrollTimer) {
       setRowRefsTranslate(event);
     }
   };
+  const handleTouchmove = (event) => {
+    handleMousemove(event);
+  };
   const disableWheel = (e) => {
     e.preventDefault();
   };
-  const clearDrag = () => {
+  let clearDrag;
+  const removeDragWindowListeners = () => {
+    clearBodyScrollY();
+    window.removeEventListener("mousemove", handleMousemove);
+    window.removeEventListener("mouseup", clearDrag);
+    window.removeEventListener("mousewheel", disableWheel);
+    window.removeEventListener("touchmove", handleTouchmove);
+    window.removeEventListener("touchend", clearDrag);
+    window.removeEventListener("touchcancel", clearDrag);
+  };
+  clearDrag = () => {
     let targetRowKey = sourceRowKey;
     Object.values(rowDataMap.value).forEach((rowData) => {
       if (rowData.index === targetIndex) {
         targetRowKey = rowData.rowKey.toString();
       }
       rowData.rowRef.forEach((rowRefItem) => {
-        rowRefItem.value.style.transform = "none";
-        rowRefItem.value.style.transition = "none";
-        rowRefItem.value.style.position = "unset";
-        rowRefItem.value.style.zIndex = "auto";
+        if (rowRefItem.value) {
+          rowRefItem.value.style.transform = "none";
+          rowRefItem.value.style.transition = "none";
+          rowRefItem.value.style.position = "unset";
+          rowRefItem.value.style.zIndex = "auto";
+        }
       });
     });
     if (targetRowKey !== sourceRowKey) {
       if (props.draggable.onDragDrop) {
-        props.draggable.onDragDrop(sourceRowKey, targetRowKey);
+        props.draggable.onDragDrop(rowDataMap.value[sourceRowKey].rowKey, rowDataMap.value[targetRowKey].rowKey);
       }
     }
     sourceRowKey = "";
-    clearBodyScrollY();
-    window.removeEventListener("mousemove", handleMousemove);
-    window.removeEventListener("mouseup", clearDrag);
-    window.removeEventListener("mousewheel", disableWheel);
+    removeDragWindowListeners();
   };
+  onBeforeUnmount(() => {
+    if (!sourceRowKey) {
+      return;
+    }
+    sourceRowKey = "";
+    removeDragWindowListeners();
+  });
   const handleDragStart = (event, param) => {
-    const bodyTable = tableRefs.bodyTable.wrapRef;
+    const bodyWrap = getBodyWrapRef();
+    if (!bodyWrap) {
+      return;
+    }
+    const clientY = getClientY(event);
     sourceRowKey = param.rowKey.toString();
-    dragStartPosition = event.clientY + bodyTable.scrollTop;
+    dragStartPosition = clientY + bodyWrap.scrollTop;
     const sortRowData = Object.values(rowDataMap.value).sort((a, b) => a.index - b.index);
     const {
       top
@@ -151,19 +224,27 @@ function useDraggable(props, tableRefs) {
     const {
       top: bodyTopInner,
       height: bodyHeightInner
-    } = bodyTable.getBoundingClientRect();
+    } = bodyWrap.getBoundingClientRect();
     const {
       height: tableHeightInner
-    } = bodyTable.children[0].getBoundingClientRect();
+    } = bodyWrap.children[0].getBoundingClientRect();
     bodyTop = bodyTopInner;
     bodyHeight = bodyHeightInner;
     tableHeight = tableHeightInner;
     handleMousemove(event);
-    window.addEventListener("mousemove", handleMousemove);
-    window.addEventListener("mouseup", clearDrag);
-    window.addEventListener("mousewheel", disableWheel, {
-      passive: false
-    });
+    if ("touches" in event) {
+      window.addEventListener("touchmove", handleTouchmove, {
+        passive: false
+      });
+      window.addEventListener("touchend", clearDrag);
+      window.addEventListener("touchcancel", clearDrag);
+    } else {
+      window.addEventListener("mousemove", handleMousemove);
+      window.addEventListener("mouseup", clearDrag);
+      window.addEventListener("mousewheel", disableWheel, {
+        passive: false
+      });
+    }
     event.preventDefault();
   };
   const draggableColumn = computed(() => {

package/es/components/Table/hooks/useDraggable.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useDraggable.mjs","sources":["../../../../../src/components/Table/hooks/useDraggable.tsx"],"sourcesContent":["import { computed, ref, watch } from 'vue';\nimport type { Ref } from 'vue';\nimport type { ColumnSlotParams, InnerColumn, TableProps, TableRefs } from '../Table.type';\nimport DraggableIcon from '../tableUnits/DraggableIcon.vue';\n\nexport interface RowData {\n  rowKey: string | number;\n  index: number;\n  data: Record<string, any>;\n  rowRef: Ref<HTMLElement>[];\n}\n\nexport interface BodyScrollMethod {\n  handle: null | ((e: any) => void);\n}\n\nexport default function useDraggable(props: TableProps, tableRefs: TableRefs) {\n  let sourceRowKey: string | number = '';\n  let targetIndex = 0;\n  let dragStartPosition = 0;\n  let relativeMinY = 0;\n  let relativeMaxY = 0;\n  const rowDataMap = ref<Record<string, RowData>>({});\n\n  const setRowRefs = (val: RowData) => {\n    if (props.draggable) {\n      const historyRowData = rowDataMap.value[val.rowKey.toString()];\n      if (historyRowData) {\n        const { rowRef } = historyRowData;\n        historyRowData.index = val.index;\n\n        if (rowRef[rowRef.length - 1].value) {\n          rowRef.push(...val.rowRef);\n        } else {\n          rowRef.splice(rowRef.length - 2, 1, val.rowRef[0]);\n        }\n      } else {\n        rowDataMap.value[val.rowKey.toString()] = val;\n      }\n    }\n  };\n  const clearRowRefs = () => {\n    if (props.draggable) {\n      Object.keys(rowDataMap.value).forEach((key) => {\n        const rowData = rowDataMap.value[key];\n        if (rowData.rowRef.every((item) => !item.value)) {\n          delete rowDataMap.value[key];\n        }\n      });\n    }\n  };\n  watch(\n    () => props.data,\n    () => {\n      clearRowRefs();\n    },\n    { flush: 'post' }\n  );\n\n  const setRowRefsTranslate = (event: MouseEvent) => {\n    const currentRowData = rowDataMap.value[sourceRowKey];\n    const { height: currentHeight } = currentRowData.rowRef[0].value.getBoundingClientRect();\n    const realClientY = event.clientY + (tableRefs.bodyTable as any).wrapRef.scrollTop;\n    const safeTranslateY = Math.max(relativeMinY, Math.min(realClientY - dragStartPosition, relativeMaxY));\n    currentRowData.rowRef.forEach((currentItem) => {\n      currentItem.value.style.transform = `translateY(${safeTranslateY}px)`;\n      currentItem.value.style.position = 'relative';\n      currentItem.value.style.zIndex = '999';\n    });\n    targetIndex = currentRowData.index;\n    Object.keys(rowDataMap.value).forEach((rowKey) => {\n      if (rowKey !== sourceRowKey) {\n        const rowData = rowDataMap.value[rowKey];\n        const sort = rowData.index < currentRowData.index ? 1 : -1;\n\n        const { height, top } = rowData.rowRef[0].value.getBoundingClientRect();\n        const position = top + Number((height / 2).toFixed(2)) < event.clientY ? 1 : -1;\n\n        if (!(sort + position)) {\n          let translateY = currentHeight;\n          let index = Math.min(targetIndex, rowData.index);\n          if (sort === -1) {\n            translateY = -currentHeight;\n            index = Math.max(targetIndex, rowData.index);\n          }\n          targetIndex = index;\n          rowData.rowRef.forEach((rowRefItem) => {\n            rowRefItem.value.style.transform = `translateY(${translateY}px)`;\n            rowRefItem.value.style.transition = 'transform 0.3s';\n          });\n        } else {\n          rowData.rowRef.forEach((rowRefItem) => {\n            rowRefItem.value.style.transform = 'none';\n            rowRefItem.value.style.transition = 'transform 0.3s';\n          });\n        }\n      }\n    });\n  };\n\n  let bodyTop = 0;\n  let bodyHeight = 0;\n  let tableHeight = 0;\n  let scrollTimer: any | null = null;\n  const clearBodyScrollY = () => {\n    if (scrollTimer) {\n      clearInterval(scrollTimer);\n      scrollTimer = null;\n    }\n  };\n  const handleBodyScrollY = (event: MouseEvent) => {\n    if (bodyTop + bodyHeight > event.clientY && event.clientY > bodyTop) {\n      clearBodyScrollY();\n    } else if (!scrollTimer) {\n      const px = event.clientY < bodyTop ? -3 : 3;\n      scrollTimer = setInterval(() => {\n        (tableRefs.bodyTable as any).setScrollTop(\n          Math.max(0, Math.min((tableRefs.bodyTable as any).wrapRef.scrollTop + px, tableHeight - bodyHeight))\n        );\n        setRowRefsTranslate(event);\n      }, 10);\n    }\n  };\n  const handleMousemove = (event: MouseEvent) => {\n    handleBodyScrollY(event);\n\n    if (!scrollTimer) {\n      setRowRefsTranslate(event);\n    }\n  };\n\n  const disableWheel = (e: Event) => {\n    e.preventDefault();\n  };\n\n  const clearDrag = () => {\n    let targetRowKey = sourceRowKey;\n    Object.values(rowDataMap.value).forEach((rowData) => {\n      if (rowData.index === targetIndex) {\n        targetRowKey = rowData.rowKey.toString();\n      }\n      rowData.rowRef.forEach((rowRefItem) => {\n        rowRefItem.value.style.transform = 'none';\n        rowRefItem.value.style.transition = 'none';\n        rowRefItem.value.style.position = 'unset';\n        rowRefItem.value.style.zIndex = 'auto';\n      });\n    });\n    if (targetRowKey !== sourceRowKey) {\n      if (props.draggable.onDragDrop) {\n        props.draggable.onDragDrop(sourceRowKey, targetRowKey);\n      }\n    }\n    sourceRowKey = '';\n    clearBodyScrollY();\n    window.removeEventListener('mousemove', handleMousemove);\n    window.removeEventListener('mouseup', clearDrag);\n    window.removeEventListener('mousewheel', disableWheel);\n  };\n  const handleDragStart = (event: MouseEvent, param: ColumnSlotParams) => {\n    const bodyTable = (tableRefs.bodyTable as any).wrapRef;\n\n    sourceRowKey = param.rowKey.toString();\n\n    dragStartPosition = event.clientY + bodyTable.scrollTop;\n\n    const sortRowData = Object.values(rowDataMap.value).sort((a, b) => a.index - b.index);\n    const { top } = rowDataMap.value[sourceRowKey].rowRef[0].value.getBoundingClientRect();\n    relativeMinY = sortRowData[0].rowRef[0].value.getBoundingClientRect().top - top;\n    relativeMaxY = sortRowData[sortRowData.length - 1].rowRef[0].value.getBoundingClientRect().top - top;\n    const { top: bodyTopInner, height: bodyHeightInner } = bodyTable.getBoundingClientRect();\n    const { height: tableHeightInner } = bodyTable.children[0].getBoundingClientRect();\n    bodyTop = bodyTopInner;\n    bodyHeight = bodyHeightInner;\n    tableHeight = tableHeightInner;\n\n    handleMousemove(event);\n\n    window.addEventListener('mousemove', handleMousemove);\n    window.addEventListener('mouseup', clearDrag);\n    window.addEventListener('mousewheel', disableWheel, { passive: false });\n\n    event.preventDefault();\n  };\n\n  const draggableColumn = computed(() => {\n    if (props.draggable) {\n      const column: InnerColumn = {\n        key: 'draggable-column',\n        type: 'draggable',\n        width: 50,\n        align: 'center',\n        render: (param) => {\n          return <DraggableIcon onDragStart={(event: MouseEvent) => handleDragStart(event, param)} />;\n        }\n        // handleDragStart\n      };\n      if ('fixed' in props.draggable) {\n        column.fixed = props.draggable.fixed;\n      } else if (props.columns.some((x) => x.fixed === 'left' || x.fixed === true)) {\n        column.fixed = 'left';\n      }\n      return column;\n    }\n    return null;\n  });\n  return {\n    setRowRefs,\n    draggableColumn\n  };\n}\n"],"names":["useDraggable","props","tableRefs","sourceRowKey","targetIndex","dragStartPosition","relativeMinY","relativeMaxY","rowDataMap","ref","setRowRefs","val","draggable","historyRowData","value","rowKey","toString","rowRef","index","length","push","splice","clearRowRefs","Object","keys","forEach","key","rowData","every","item","watch","data","flush","setRowRefsTranslate","event","currentRowData","height","currentHeight","getBoundingClientRect","realClientY","clientY","bodyTable","wrapRef","scrollTop","safeTranslateY","Math","max","min","currentItem","style","transform","position","zIndex","sort","top","Number","toFixed","translateY","rowRefItem","transition","bodyTop","bodyHeight","tableHeight","scrollTimer","clearBodyScrollY","clearInterval","handleBodyScrollY","px","setInterval","setScrollTop","handleMousemove","disableWheel","e","preventDefault","clearDrag","targetRowKey","values","onDragDrop","window","removeEventListener","handleDragStart","param","sortRowData","a","b","bodyTopInner","bodyHeightInner","tableHeightInner","children","addEventListener","passive","draggableColumn","computed","column","type","width","align","render","_createVNode","DraggableIcon","fixed","columns","some","x"],"mappings":"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"}
+{"version":3,"file":"useDraggable.mjs","sources":["../../../../../src/components/Table/hooks/useDraggable.tsx"],"sourcesContent":["import { computed, onBeforeUnmount, ref, watch } from 'vue';\nimport type { Ref } from 'vue';\nimport type { ColumnSlotParams, InnerColumn, TableProps, TableRefs } from '../Table.type';\nimport DraggableIcon from '../tableUnits/DraggableIcon.vue';\n\nexport interface RowData {\n  rowKey: string | number;\n  index: number;\n  data: Record<string, any>;\n  rowRef: Ref<HTMLElement>[];\n}\n\nexport interface BodyScrollMethod {\n  handle: null | ((e: any) => void);\n}\n\n// Helper function to get clientY from mouse or touch event\n// This function unifies mouse and touch events by extracting the Y coordinate\nconst getClientY = (event: MouseEvent | TouchEvent): number => {\n  // Check if it's a touch event and has touches\n  if ('touches' in event && event.touches.length > 0) {\n    return event.touches[0].clientY;\n  }\n  // Otherwise, it's a mouse event\n  return (event as MouseEvent).clientY;\n};\n\nexport default function useDraggable(props: TableProps, tableRefs: TableRefs) {\n  let sourceRowKey: string | number = '';\n  let targetIndex = 0;\n  let dragStartPosition = 0;\n  let relativeMinY = 0;\n  let relativeMaxY = 0;\n  const rowDataMap = ref<Record<string, RowData>>({});\n\n  const setRowRefs = (val: RowData) => {\n    if (props.draggable) {\n      const historyRowData = rowDataMap.value[val.rowKey.toString()];\n      if (historyRowData) {\n        const { rowRef } = historyRowData;\n        historyRowData.index = val.index;\n\n        if (rowRef[rowRef.length - 1].value) {\n          rowRef.push(...val.rowRef);\n        } else {\n          rowRef.splice(rowRef.length - 2, 1, val.rowRef[0]);\n        }\n      } else {\n        rowDataMap.value[val.rowKey.toString()] = val;\n      }\n    }\n  };\n  const clearRowRefs = () => {\n    if (props.draggable) {\n      Object.keys(rowDataMap.value).forEach((key) => {\n        const rowData = rowDataMap.value[key];\n        if (rowData.rowRef.every((item) => !item.value)) {\n          delete rowDataMap.value[key];\n        }\n      });\n    }\n  };\n  watch(\n    () => props.data,\n    () => {\n      clearRowRefs();\n    },\n    { flush: 'post' }\n  );\n\n  const getBodyWrapRef = () => {\n    const body = tableRefs.bodyTable as any;\n    return body?.wrapRef ?? null;\n  };\n\n  const setRowRefsTranslate = (event: MouseEvent | TouchEvent) => {\n    if (!sourceRowKey) {\n      return;\n    }\n    const wrapRef = getBodyWrapRef();\n    if (!wrapRef) {\n      return;\n    }\n    const clientY = getClientY(event);\n    const currentRowData = rowDataMap.value[sourceRowKey];\n    const firstRowEl = currentRowData?.rowRef[0]?.value;\n    if (!currentRowData || !firstRowEl) {\n      return;\n    }\n    const { height: currentHeight } = firstRowEl.getBoundingClientRect();\n    const realClientY = clientY + wrapRef.scrollTop;\n    const safeTranslateY = Math.max(relativeMinY, Math.min(realClientY - dragStartPosition, relativeMaxY));\n    currentRowData.rowRef.forEach((currentItem) => {\n      if (!currentItem.value) {\n        return;\n      }\n      currentItem.value.style.transform = `translateY(${safeTranslateY}px)`;\n      currentItem.value.style.position = 'relative';\n      currentItem.value.style.zIndex = '999';\n    });\n    targetIndex = currentRowData.index;\n    Object.keys(rowDataMap.value).forEach((rowKey) => {\n      if (rowKey !== sourceRowKey) {\n        const rowData = rowDataMap.value[rowKey];\n        const otherFirst = rowData.rowRef[0]?.value;\n        if (!otherFirst) {\n          return;\n        }\n        const sort = rowData.index < currentRowData.index ? 1 : -1;\n\n        const { height, top } = otherFirst.getBoundingClientRect();\n        const position = top + Number((height / 2).toFixed(2)) < clientY ? 1 : -1;\n\n        if (!(sort + position)) {\n          let translateY = currentHeight;\n          let index = Math.min(targetIndex, rowData.index);\n          if (sort === -1) {\n            translateY = -currentHeight;\n            index = Math.max(targetIndex, rowData.index);\n          }\n          targetIndex = index;\n          rowData.rowRef.forEach((rowRefItem) => {\n            if (rowRefItem.value) {\n              rowRefItem.value.style.transform = `translateY(${translateY}px)`;\n              rowRefItem.value.style.transition = 'transform 0.3s';\n            }\n          });\n        } else {\n          rowData.rowRef.forEach((rowRefItem) => {\n            if (rowRefItem.value) {\n              rowRefItem.value.style.transform = 'none';\n              rowRefItem.value.style.transition = 'transform 0.3s';\n            }\n          });\n        }\n      }\n    });\n  };\n\n  let bodyTop = 0;\n  let bodyHeight = 0;\n  let tableHeight = 0;\n  let scrollTimer: any | null = null;\n  const clearBodyScrollY = () => {\n    if (scrollTimer) {\n      clearInterval(scrollTimer);\n      scrollTimer = null;\n    }\n  };\n  const handleBodyScrollY = (event: MouseEvent | TouchEvent) => {\n    const clientY = getClientY(event);\n    if (bodyTop + bodyHeight > clientY && clientY > bodyTop) {\n      clearBodyScrollY();\n    } else if (!scrollTimer) {\n      const bodyInst = tableRefs.bodyTable as any;\n      if (!bodyInst?.setScrollTop || !bodyInst.wrapRef) {\n        return;\n      }\n      const px = clientY < bodyTop ? -3 : 3;\n      scrollTimer = setInterval(() => {\n        const inst = tableRefs.bodyTable as any;\n        const wrap = inst?.wrapRef;\n        if (!inst?.setScrollTop || !wrap) {\n          clearBodyScrollY();\n          return;\n        }\n        inst.setScrollTop(Math.max(0, Math.min(wrap.scrollTop + px, tableHeight - bodyHeight)));\n        setRowRefsTranslate(event);\n      }, 10);\n    }\n  };\n  const handleMousemove = (event: MouseEvent | TouchEvent) => {\n    if (!sourceRowKey) {\n      return;\n    }\n    handleBodyScrollY(event);\n\n    if (!scrollTimer) {\n      setRowRefsTranslate(event);\n    }\n  };\n  const handleTouchmove = (event: TouchEvent) => {\n    handleMousemove(event);\n  };\n\n  const disableWheel = (e: Event) => {\n    e.preventDefault();\n  };\n\n  let clearDrag: () => void;\n\n  const removeDragWindowListeners = () => {\n    clearBodyScrollY();\n    window.removeEventListener('mousemove', handleMousemove);\n    window.removeEventListener('mouseup', clearDrag);\n    window.removeEventListener('mousewheel', disableWheel);\n    window.removeEventListener('touchmove', handleTouchmove);\n    window.removeEventListener('touchend', clearDrag);\n    window.removeEventListener('touchcancel', clearDrag);\n  };\n\n  clearDrag = () => {\n    let targetRowKey = sourceRowKey;\n    Object.values(rowDataMap.value).forEach((rowData) => {\n      if (rowData.index === targetIndex) {\n        targetRowKey = rowData.rowKey.toString();\n      }\n      rowData.rowRef.forEach((rowRefItem) => {\n        if (rowRefItem.value) {\n          rowRefItem.value.style.transform = 'none';\n          rowRefItem.value.style.transition = 'none';\n          rowRefItem.value.style.position = 'unset';\n          rowRefItem.value.style.zIndex = 'auto';\n        }\n      });\n    });\n    if (targetRowKey !== sourceRowKey) {\n      if (props.draggable.onDragDrop) {\n        props.draggable.onDragDrop(rowDataMap.value[sourceRowKey].rowKey, rowDataMap.value[targetRowKey].rowKey);\n      }\n    }\n    sourceRowKey = '';\n    removeDragWindowListeners();\n  };\n\n  onBeforeUnmount(() => {\n    if (!sourceRowKey) {\n      return;\n    }\n    sourceRowKey = '';\n    removeDragWindowListeners();\n  });\n\n  const handleDragStart = (event: MouseEvent | TouchEvent, param: ColumnSlotParams) => {\n    const bodyWrap = getBodyWrapRef();\n    if (!bodyWrap) {\n      return;\n    }\n    const clientY = getClientY(event);\n\n    sourceRowKey = param.rowKey.toString();\n\n    dragStartPosition = clientY + bodyWrap.scrollTop;\n\n    const sortRowData = Object.values(rowDataMap.value).sort((a, b) => a.index - b.index);\n    const { top } = rowDataMap.value[sourceRowKey].rowRef[0].value.getBoundingClientRect();\n    relativeMinY = sortRowData[0].rowRef[0].value.getBoundingClientRect().top - top;\n    relativeMaxY = sortRowData[sortRowData.length - 1].rowRef[0].value.getBoundingClientRect().top - top;\n    const { top: bodyTopInner, height: bodyHeightInner } = bodyWrap.getBoundingClientRect();\n    const { height: tableHeightInner } = bodyWrap.children[0].getBoundingClientRect();\n    bodyTop = bodyTopInner;\n    bodyHeight = bodyHeightInner;\n    tableHeight = tableHeightInner;\n\n    handleMousemove(event);\n\n    // Check if it's a touch event or mouse event\n    if ('touches' in event) {\n      // Touch event - add touch listeners\n      window.addEventListener('touchmove', handleTouchmove, { passive: false });\n      window.addEventListener('touchend', clearDrag);\n      window.addEventListener('touchcancel', clearDrag);\n    } else {\n      // Mouse event - add mouse listeners\n      window.addEventListener('mousemove', handleMousemove);\n      window.addEventListener('mouseup', clearDrag);\n      window.addEventListener('mousewheel', disableWheel, { passive: false });\n    }\n\n    event.preventDefault();\n  };\n\n  const draggableColumn = computed(() => {\n    if (props.draggable) {\n      const column: InnerColumn = {\n        key: 'draggable-column',\n        type: 'draggable',\n        width: 50,\n        align: 'center',\n        render: (param) => {\n          return <DraggableIcon onDragStart={(event: MouseEvent | TouchEvent) => handleDragStart(event, param)} />;\n        }\n        // handleDragStart\n      };\n      if ('fixed' in props.draggable) {\n        column.fixed = props.draggable.fixed;\n      } else if (props.columns.some((x) => x.fixed === 'left' || x.fixed === true)) {\n        column.fixed = 'left';\n      }\n      return column;\n    }\n    return null;\n  });\n  return {\n    setRowRefs,\n    draggableColumn\n  };\n}\n"],"names":["getClientY","event","touches","length","clientY","useDraggable","props","tableRefs","sourceRowKey","targetIndex","dragStartPosition","relativeMinY","relativeMaxY","rowDataMap","ref","setRowRefs","val","draggable","historyRowData","value","rowKey","toString","rowRef","index","push","splice","clearRowRefs","Object","keys","forEach","key","rowData","every","item","watch","data","flush","getBodyWrapRef","body","bodyTable","wrapRef","setRowRefsTranslate","currentRowData","firstRowEl","height","currentHeight","getBoundingClientRect","realClientY","scrollTop","safeTranslateY","Math","max","min","currentItem","style","transform","position","zIndex","_a","otherFirst","sort","top","Number","toFixed","translateY","rowRefItem","transition","bodyTop","bodyHeight","tableHeight","scrollTimer","clearBodyScrollY","clearInterval","handleBodyScrollY","bodyInst","setScrollTop","px","setInterval","inst","wrap","handleMousemove","handleTouchmove","disableWheel","e","preventDefault","clearDrag","removeDragWindowListeners","window","removeEventListener","targetRowKey","values","onDragDrop","onBeforeUnmount","handleDragStart","param","bodyWrap","sortRowData","a","b","bodyTopInner","bodyHeightInner","tableHeightInner","children","addEventListener","passive","draggableColumn","computed","column","type","width","align","render","_createVNode","DraggableIcon","fixed","columns","some","x"],"mappings":"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"}

package/es/components/Table/hooks/useTableResize.mjs

@@ -94,9 +94,13 @@ function useTableResize(updatedColumns, tableRefs, prefixCls, isColumnFixed, pro
     tableWidth.value = Object.keys(sizesMap).reduce((sum, key) => sum + sizesMap[key], 0);
   };
   let syncHeightTimer = null;
+  let updateBodyTableTimer = null;
   const scrollPosition = ref("left");
   const setScrollPositionClass = () => {
     const { bodyTable } = tableRefs;
+    if (!bodyTable) {
+      return;
+    }
     const bodyDom = bodyTable.wrapRef;
     if (!bodyDom) {
       return;
@@ -116,12 +120,23 @@ function useTableResize(updatedColumns, tableRefs, prefixCls, isColumnFixed, pro
   const handleResize = () => {
     syncColumnsWidth();
     if (isColumnFixed.value) {
+      if (syncHeightTimer) {
+        clearTimeout(syncHeightTimer);
+      }
       syncHeightTimer = setTimeout(() => {
+        syncHeightTimer = null;
         setScrollPositionClass();
       }, 0);
     }
-    setTimeout(() => {
-      tableRefs.bodyTable.update();
+    if (updateBodyTableTimer) {
+      clearTimeout(updateBodyTableTimer);
+    }
+    updateBodyTableTimer = setTimeout(() => {
+      updateBodyTableTimer = null;
+      const bt = tableRefs.bodyTable;
+      if (bt == null ? void 0 : bt.update) {
+        bt.update();
+      }
     }, 0);
   };
   const setResizeWidth = (column, width) => {
@@ -154,6 +169,10 @@ function useTableResize(updatedColumns, tableRefs, prefixCls, isColumnFixed, pro
       clearTimeout(syncHeightTimer);
       syncHeightTimer = null;
     }
+    if (updateBodyTableTimer) {
+      clearTimeout(updateBodyTableTimer);
+      updateBodyTableTimer = null;
+    }
   };
   return {
     sizesMap,

package/es/components/Table/hooks/useTableResize.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useTableResize.mjs","sources":["../../../../../src/components/Table/hooks/useTableResize.ts"],"sourcesContent":["import { computed, reactive, ref } from 'vue';\nimport type { ComputedRef, Ref } from 'vue';\nimport { getLeafColumns, getColumnKey, getMinWidth } from '../utils';\n// import { shallowequal } from '../../../utils/tools';\nimport type { InnerColumn, TableProps, TableRefs } from '../Table.type';\n\nexport function getWidth(width: string | number, tableWidth: number) {\n  let _width = 0;\n  if (typeof width === 'number') {\n    _width = width;\n  } else if (/^\\d*px$/.test(width)) {\n    _width = Number(width.replace('px', ''));\n  } else if (/^[\\d.]*%$/.test(width)) {\n    const percent = Number(width.replace('%', ''));\n    if (!Number.isNaN(percent)) {\n      _width = Math.floor((percent / 100) * tableWidth);\n    }\n  }\n  return _width;\n}\nexport default function useTableResize(\n  updatedColumns: Ref<InnerColumn[]>,\n  tableRefs: TableRefs,\n  prefixCls: Ref<string>,\n  isColumnFixed: ComputedRef<boolean>,\n  props: TableProps\n) {\n  const sizesMap = reactive({} as Record<string, number>);\n  const tableWidth = ref<number | undefined>(undefined);\n\n  const syncColumnsWidth = () => {\n    const { bodyTable } = tableRefs;\n    if (!bodyTable || (bodyTable as any).getWidth() === undefined) {\n      return;\n    }\n    // const wrapWidth = props.border ? bodyTable.clientWidth - 1 : bodyTable.clientWidth;\n    const wrapWidth = (bodyTable as any).getWidth();\n\n    const columns = getLeafColumns(updatedColumns.value);\n    let usedWidth = 0;\n    // clear the sizesMap.\n    Object.keys(sizesMap).forEach((key) => {\n      delete sizesMap[key];\n    });\n    const minWidthColumns: InnerColumn[] = [];\n    const maxWidthColumns: InnerColumn[] = [];\n    const nothingColumns: InnerColumn[] = [];\n    columns.forEach((c) => {\n      const colKey = getColumnKey(c);\n      if (c.width) {\n        const _width = getWidth(c.width, wrapWidth);\n        usedWidth += _width;\n        sizesMap[colKey] = _width;\n      } else if (c.minWidth) {\n        const _width = getWidth(c.minWidth, wrapWidth);\n        usedWidth += _width;\n        sizesMap[colKey] = _width;\n        minWidthColumns.push(c);\n      } else {\n        const minWidth = getMinWidth(c);\n        sizesMap[colKey] = minWidth;\n        usedWidth += minWidth;\n        if (c.maxWidth) {\n          maxWidthColumns.push(c);\n        } else {\n          nothingColumns.push(c);\n        }\n      }\n    });\n    let unUsedWidth = wrapWidth - usedWidth;\n    let length = minWidthColumns.length + maxWidthColumns.length + nothingColumns.length;\n    if (unUsedWidth > 0 && length > 0) {\n      let avgWidth: number;\n      maxWidthColumns.forEach((mc) => {\n        avgWidth = Math.floor(unUsedWidth / length);\n        if (getWidth(mc.maxWidth as number, wrapWidth) < avgWidth) {\n          sizesMap[mc.key] = getWidth(mc.maxWidth as number, wrapWidth);\n          unUsedWidth -= getWidth(mc.maxWidth as number, wrapWidth) - getMinWidth(mc);\n        } else {\n          sizesMap[mc.key] += avgWidth;\n          unUsedWidth -= avgWidth;\n        }\n        length -= 1;\n      });\n      avgWidth = Math.floor(unUsedWidth / length);\n      if (avgWidth > 50 || nothingColumns.length === 0) {\n        [...minWidthColumns, ...nothingColumns].forEach((c, i) => {\n          if (i < length - 1) {\n            sizesMap[c.key] += avgWidth;\n            unUsedWidth -= avgWidth;\n          } else {\n            sizesMap[c.key] += unUsedWidth;\n          }\n        });\n      } else {\n        avgWidth = Math.floor(unUsedWidth / nothingColumns.length);\n        nothingColumns.forEach((c, i) => {\n          if (i < nothingColumns.length - 1) {\n            sizesMap[c.key] += avgWidth;\n            unUsedWidth -= avgWidth;\n          } else {\n            sizesMap[c.key] += unUsedWidth;\n          }\n        });\n      }\n    }\n    tableWidth.value = Object.keys(sizesMap).reduce((sum, key) => sum + sizesMap[key], 0);\n  };\n\n  let syncHeightTimer: any = null;\n  const scrollPosition = ref('left');\n\n  const setScrollPositionClass = () => {\n    const { bodyTable } = tableRefs;\n    const bodyDom = (bodyTable as any).wrapRef;\n    if (!bodyDom) {\n      return;\n    }\n\n    const scrollToLeft = bodyDom.scrollLeft === 0;\n    const scrollToRight = bodyDom.scrollLeft + 1 >= bodyDom.children[0].getBoundingClientRect().width - bodyDom.getBoundingClientRect().width;\n    if (scrollToLeft && scrollToRight) {\n      scrollPosition.value = 'both';\n    } else if (scrollToLeft) {\n      scrollPosition.value = 'left';\n    } else if (scrollToRight) {\n      scrollPosition.value = 'right';\n    } else {\n      scrollPosition.value = 'middle';\n    }\n  };\n  const handleResize = () => {\n    syncColumnsWidth();\n\n    if (isColumnFixed.value) {\n      syncHeightTimer = setTimeout(() => {\n        // syncFixedTableRowHeight();\n        setScrollPositionClass();\n      }, 0);\n    }\n    setTimeout(() => {\n      (tableRefs.bodyTable as any).update();\n    }, 0);\n  };\n\n  const setResizeWidth = (column: InnerColumn, width: number) => {\n    const columns = getLeafColumns(updatedColumns.value);\n    const _column = columns.find((c) => c === column || getColumnKey(c) === getColumnKey(column));\n    if (_column) {\n      _column.width = width;\n      handleResize();\n    }\n  };\n  const isScrollX = computed(() => {\n    const { table } = tableRefs;\n    if (table) {\n      const wrapWidth = props.border ? table.offsetWidth - 1 : table.offsetWidth;\n      return tableWidth.value && tableWidth.value > wrapWidth;\n    }\n    return false;\n  });\n\n  const resetScrollX = () => {\n    const { bodyTable, headTable } = tableRefs;\n    if (bodyTable) {\n      (bodyTable as any).setScrollLeft(0);\n    }\n    if (headTable) {\n      (headTable as any).setScrollLeft(0);\n    }\n  };\n  const clearResizeTimer = () => {\n    if (syncHeightTimer) {\n      clearTimeout(syncHeightTimer);\n      syncHeightTimer = null;\n    }\n  };\n  return {\n    sizesMap,\n    tableWidth,\n    isScrollX,\n    scrollPosition,\n    handleResize,\n    setScrollPositionClass,\n    resetScrollX,\n    clearResizeTimer,\n    setResizeWidth\n  };\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useTableResize.mjs","sources":["../../../../../src/components/Table/hooks/useTableResize.ts"],"sourcesContent":["import { computed, reactive, ref } from 'vue';\nimport type { ComputedRef, Ref } from 'vue';\nimport { getLeafColumns, getColumnKey, getMinWidth } from '../utils';\n// import { shallowequal } from '../../../utils/tools';\nimport type { InnerColumn, TableProps, TableRefs } from '../Table.type';\n\nexport function getWidth(width: string | number, tableWidth: number) {\n  let _width = 0;\n  if (typeof width === 'number') {\n    _width = width;\n  } else if (/^\\d*px$/.test(width)) {\n    _width = Number(width.replace('px', ''));\n  } else if (/^[\\d.]*%$/.test(width)) {\n    const percent = Number(width.replace('%', ''));\n    if (!Number.isNaN(percent)) {\n      _width = Math.floor((percent / 100) * tableWidth);\n    }\n  }\n  return _width;\n}\nexport default function useTableResize(\n  updatedColumns: Ref<InnerColumn[]>,\n  tableRefs: TableRefs,\n  prefixCls: Ref<string>,\n  isColumnFixed: ComputedRef<boolean>,\n  props: TableProps\n) {\n  const sizesMap = reactive({} as Record<string, number>);\n  const tableWidth = ref<number | undefined>(undefined);\n\n  const syncColumnsWidth = () => {\n    const { bodyTable } = tableRefs;\n    if (!bodyTable || (bodyTable as any).getWidth() === undefined) {\n      return;\n    }\n    // const wrapWidth = props.border ? bodyTable.clientWidth - 1 : bodyTable.clientWidth;\n    const wrapWidth = (bodyTable as any).getWidth();\n\n    const columns = getLeafColumns(updatedColumns.value);\n    let usedWidth = 0;\n    // clear the sizesMap.\n    Object.keys(sizesMap).forEach((key) => {\n      delete sizesMap[key];\n    });\n    const minWidthColumns: InnerColumn[] = [];\n    const maxWidthColumns: InnerColumn[] = [];\n    const nothingColumns: InnerColumn[] = [];\n    columns.forEach((c) => {\n      const colKey = getColumnKey(c);\n      if (c.width) {\n        const _width = getWidth(c.width, wrapWidth);\n        usedWidth += _width;\n        sizesMap[colKey] = _width;\n      } else if (c.minWidth) {\n        const _width = getWidth(c.minWidth, wrapWidth);\n        usedWidth += _width;\n        sizesMap[colKey] = _width;\n        minWidthColumns.push(c);\n      } else {\n        const minWidth = getMinWidth(c);\n        sizesMap[colKey] = minWidth;\n        usedWidth += minWidth;\n        if (c.maxWidth) {\n          maxWidthColumns.push(c);\n        } else {\n          nothingColumns.push(c);\n        }\n      }\n    });\n    let unUsedWidth = wrapWidth - usedWidth;\n    let length = minWidthColumns.length + maxWidthColumns.length + nothingColumns.length;\n    if (unUsedWidth > 0 && length > 0) {\n      let avgWidth: number;\n      maxWidthColumns.forEach((mc) => {\n        avgWidth = Math.floor(unUsedWidth / length);\n        if (getWidth(mc.maxWidth as number, wrapWidth) < avgWidth) {\n          sizesMap[mc.key] = getWidth(mc.maxWidth as number, wrapWidth);\n          unUsedWidth -= getWidth(mc.maxWidth as number, wrapWidth) - getMinWidth(mc);\n        } else {\n          sizesMap[mc.key] += avgWidth;\n          unUsedWidth -= avgWidth;\n        }\n        length -= 1;\n      });\n      avgWidth = Math.floor(unUsedWidth / length);\n      if (avgWidth > 50 || nothingColumns.length === 0) {\n        [...minWidthColumns, ...nothingColumns].forEach((c, i) => {\n          if (i < length - 1) {\n            sizesMap[c.key] += avgWidth;\n            unUsedWidth -= avgWidth;\n          } else {\n            sizesMap[c.key] += unUsedWidth;\n          }\n        });\n      } else {\n        avgWidth = Math.floor(unUsedWidth / nothingColumns.length);\n        nothingColumns.forEach((c, i) => {\n          if (i < nothingColumns.length - 1) {\n            sizesMap[c.key] += avgWidth;\n            unUsedWidth -= avgWidth;\n          } else {\n            sizesMap[c.key] += unUsedWidth;\n          }\n        });\n      }\n    }\n    tableWidth.value = Object.keys(sizesMap).reduce((sum, key) => sum + sizesMap[key], 0);\n  };\n\n  let syncHeightTimer: ReturnType<typeof setTimeout> | null = null;\n  let updateBodyTableTimer: ReturnType<typeof setTimeout> | null = null;\n  const scrollPosition = ref('left');\n\n  const setScrollPositionClass = () => {\n    const { bodyTable } = tableRefs;\n    if (!bodyTable) {\n      return;\n    }\n    const bodyDom = (bodyTable as any).wrapRef;\n    if (!bodyDom) {\n      return;\n    }\n\n    const scrollToLeft = bodyDom.scrollLeft === 0;\n    const scrollToRight = bodyDom.scrollLeft + 1 >= bodyDom.children[0].getBoundingClientRect().width - bodyDom.getBoundingClientRect().width;\n    if (scrollToLeft && scrollToRight) {\n      scrollPosition.value = 'both';\n    } else if (scrollToLeft) {\n      scrollPosition.value = 'left';\n    } else if (scrollToRight) {\n      scrollPosition.value = 'right';\n    } else {\n      scrollPosition.value = 'middle';\n    }\n  };\n  const handleResize = () => {\n    syncColumnsWidth();\n\n    if (isColumnFixed.value) {\n      if (syncHeightTimer) {\n        clearTimeout(syncHeightTimer);\n      }\n      syncHeightTimer = setTimeout(() => {\n        syncHeightTimer = null;\n        setScrollPositionClass();\n      }, 0);\n    }\n    if (updateBodyTableTimer) {\n      clearTimeout(updateBodyTableTimer);\n    }\n    updateBodyTableTimer = setTimeout(() => {\n      updateBodyTableTimer = null;\n      const bt = tableRefs.bodyTable as any;\n      if (bt?.update) {\n        bt.update();\n      }\n    }, 0);\n  };\n\n  const setResizeWidth = (column: InnerColumn, width: number) => {\n    const columns = getLeafColumns(updatedColumns.value);\n    const _column = columns.find((c) => c === column || getColumnKey(c) === getColumnKey(column));\n    if (_column) {\n      _column.width = width;\n      handleResize();\n    }\n  };\n  const isScrollX = computed(() => {\n    const { table } = tableRefs;\n    if (table) {\n      const wrapWidth = props.border ? table.offsetWidth - 1 : table.offsetWidth;\n      return tableWidth.value && tableWidth.value > wrapWidth;\n    }\n    return false;\n  });\n\n  const resetScrollX = () => {\n    const { bodyTable, headTable } = tableRefs;\n    if (bodyTable) {\n      (bodyTable as any).setScrollLeft(0);\n    }\n    if (headTable) {\n      (headTable as any).setScrollLeft(0);\n    }\n  };\n  const clearResizeTimer = () => {\n    if (syncHeightTimer) {\n      clearTimeout(syncHeightTimer);\n      syncHeightTimer = null;\n    }\n    if (updateBodyTableTimer) {\n      clearTimeout(updateBodyTableTimer);\n      updateBodyTableTimer = null;\n    }\n  };\n  return {\n    sizesMap,\n    tableWidth,\n    isScrollX,\n    scrollPosition,\n    handleResize,\n    setScrollPositionClass,\n    resetScrollX,\n    clearResizeTimer,\n    setResizeWidth\n  };\n}\n"],"names":[],"mappings":";;;SAMgB,SAAS,OAAwB,YAAoB;AACnE,MAAI,SAAS;AACb,MAAI,OAAO,UAAU,UAAU;AAC7B,aAAS;AAAA,aACA,UAAU,KAAK,KAAK,GAAG;AAChC,aAAS,OAAO,MAAM,QAAQ,MAAM,EAAE,CAAC;AAAA,aAC9B,YAAY,KAAK,KAAK,GAAG;AAClC,UAAM,UAAU,OAAO,MAAM,QAAQ,KAAK,EAAE,CAAC;AAC7C,QAAI,CAAC,OAAO,MAAM,OAAO,GAAG;AAC1B,eAAS,KAAK,MAAO,UAAU,MAAO,UAAU;AAAA;AAClD;AAEF,SAAO;AACT;SACwB,eACtB,gBACA,WACA,WACA,eACA,OACA;AACA,QAAM,WAAW,SAAS,EAA4B;AACtD,QAAM,aAAa,IAAwB,MAAS;AAEpD,QAAM,mBAAmB,MAAM;AAC7B,UAAM,EAAE,cAAc;AACtB,QAAI,CAAC,aAAc,UAAkB,eAAe,QAAW;AAC7D;AAAA;AAGF,UAAM,YAAa,UAAkB;AAErC,UAAM,UAAU,eAAe,eAAe,KAAK;AACnD,QAAI,YAAY;AAEhB,WAAO,KAAK,QAAQ,EAAE,QAAQ,CAAC,QAAQ;AACrC,aAAO,SAAS;AAAA,KACjB;AACD,UAAM,kBAAiC;AACvC,UAAM,kBAAiC;AACvC,UAAM,iBAAgC;AACtC,YAAQ,QAAQ,CAAC,MAAM;AACrB,YAAM,SAAS,aAAa,CAAC;AAC7B,UAAI,EAAE,OAAO;AACX,cAAM,SAAS,SAAS,EAAE,OAAO,SAAS;AAC1C,qBAAa;AACb,iBAAS,UAAU;AAAA,iBACV,EAAE,UAAU;AACrB,cAAM,SAAS,SAAS,EAAE,UAAU,SAAS;AAC7C,qBAAa;AACb,iBAAS,UAAU;AACnB,wBAAgB,KAAK,CAAC;AAAA,aACjB;AACL,cAAM,WAAW,YAAY,CAAC;AAC9B,iBAAS,UAAU;AACnB,qBAAa;AACb,YAAI,EAAE,UAAU;AACd,0BAAgB,KAAK,CAAC;AAAA,eACjB;AACL,yBAAe,KAAK,CAAC;AAAA;AACvB;AACF,KACD;AACD,QAAI,cAAc,YAAY;AAC9B,QAAI,SAAS,gBAAgB,SAAS,gBAAgB,SAAS,eAAe;AAC9E,QAAI,cAAc,KAAK,SAAS,GAAG;AACjC,UAAI;AACJ,sBAAgB,QAAQ,CAAC,OAAO;AAC9B,mBAAW,KAAK,MAAM,cAAc,MAAM;AAC1C,YAAI,SAAS,GAAG,UAAoB,SAAS,IAAI,UAAU;AACzD,mBAAS,GAAG,OAAO,SAAS,GAAG,UAAoB,SAAS;AAC5D,yBAAe,SAAS,GAAG,UAAoB,SAAS,IAAI,YAAY,EAAE;AAAA,eACrE;AACL,mBAAS,GAAG,QAAQ;AACpB,yBAAe;AAAA;AAEjB,kBAAU;AAAA,OACX;AACD,iBAAW,KAAK,MAAM,cAAc,MAAM;AAC1C,UAAI,WAAW,MAAM,eAAe,WAAW,GAAG;AAChD,SAAC,GAAG,iBAAiB,GAAG,cAAc,EAAE,QAAQ,CAAC,GAAG,MAAM;AACxD,cAAI,IAAI,SAAS,GAAG;AAClB,qBAAS,EAAE,QAAQ;AACnB,2BAAe;AAAA,iBACV;AACL,qBAAS,EAAE,QAAQ;AAAA;AACrB,SACD;AAAA,aACI;AACL,mBAAW,KAAK,MAAM,cAAc,eAAe,MAAM;AACzD,uBAAe,QAAQ,CAAC,GAAG,MAAM;AAC/B,cAAI,IAAI,eAAe,SAAS,GAAG;AACjC,qBAAS,EAAE,QAAQ;AACnB,2BAAe;AAAA,iBACV;AACL,qBAAS,EAAE,QAAQ;AAAA;AACrB,SACD;AAAA;AACH;AAEF,eAAW,QAAQ,OAAO,KAAK,QAAQ,EAAE,OAAO,CAAC,KAAK,QAAQ,MAAM,SAAS,MAAM,CAAC;AAAA;AAGtF,MAAI,kBAAwD;AAC5D,MAAI,uBAA6D;AACjE,QAAM,iBAAiB,IAAI,MAAM;AAEjC,QAAM,yBAAyB,MAAM;AACnC,UAAM,EAAE,cAAc;AACtB,QAAI,CAAC,WAAW;AACd;AAAA;AAEF,UAAM,UAAW,UAAkB;AACnC,QAAI,CAAC,SAAS;AACZ;AAAA;AAGF,UAAM,eAAe,QAAQ,eAAe;AAC5C,UAAM,gBAAgB,QAAQ,aAAa,KAAK,QAAQ,SAAS,GAAG,wBAAwB,QAAQ,QAAQ,wBAAwB;AACpI,QAAI,gBAAgB,eAAe;AACjC,qBAAe,QAAQ;AAAA,eACd,cAAc;AACvB,qBAAe,QAAQ;AAAA,eACd,eAAe;AACxB,qBAAe,QAAQ;AAAA,WAClB;AACL,qBAAe,QAAQ;AAAA;AACzB;AAEF,QAAM,eAAe,MAAM;AACzB;AAEA,QAAI,cAAc,OAAO;AACvB,UAAI,iBAAiB;AACnB,qBAAa,eAAe;AAAA;AAE9B,wBAAkB,WAAW,MAAM;AACjC,0BAAkB;AAClB;AAAuB,SACtB,CAAC;AAAA;AAEN,QAAI,sBAAsB;AACxB,mBAAa,oBAAoB;AAAA;AAEnC,2BAAuB,WAAW,MAAM;AACtC,6BAAuB;AACvB,YAAM,KAAK,UAAU;AACrB,UAAI,yBAAI,QAAQ;AACd,WAAG;AAAO;AACZ,OACC,CAAC;AAAA;AAGN,QAAM,iBAAiB,CAAC,QAAqB,UAAkB;AAC7D,UAAM,UAAU,eAAe,eAAe,KAAK;AACnD,UAAM,UAAU,QAAQ,KAAK,CAAC,MAAM,MAAM,UAAU,aAAa,CAAC,MAAM,aAAa,MAAM,CAAC;AAC5F,QAAI,SAAS;AACX,cAAQ,QAAQ;AAChB;AAAa;AACf;AAEF,QAAM,YAAY,SAAS,MAAM;AAC/B,UAAM,EAAE,UAAU;AAClB,QAAI,OAAO;AACT,YAAM,YAAY,MAAM,SAAS,MAAM,cAAc,IAAI,MAAM;AAC/D,aAAO,WAAW,SAAS,WAAW,QAAQ;AAAA;AAEhD,WAAO;AAAA,GACR;AAED,QAAM,eAAe,MAAM;AACzB,UAAM,EAAE,WAAW,cAAc;AACjC,QAAI,WAAW;AACb,MAAC,UAAkB,cAAc,CAAC;AAAA;AAEpC,QAAI,WAAW;AACb,MAAC,UAAkB,cAAc,CAAC;AAAA;AACpC;AAEF,QAAM,mBAAmB,MAAM;AAC7B,QAAI,iBAAiB;AACnB,mBAAa,eAAe;AAC5B,wBAAkB;AAAA;AAEpB,QAAI,sBAAsB;AACxB,mBAAa,oBAAoB;AACjC,6BAAuB;AAAA;AACzB;AAEF,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAEJ;;;;"}

package/es/components/Table/tableUnits/ColGroup.mjs

@@ -45,7 +45,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     }), 128))
   ]);
 }
-var ColGroup = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/Users/admin/Documents/uxd/uxd-ui/src/components/Table/tableUnits/ColGroup.vue"]]);
+var ColGroup = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/Users/admin/gitbr/uxd-ui/src/components/Table/tableUnits/ColGroup.vue"]]);
 
 export { ColGroup as default };
 //# sourceMappingURL=ColGroup.mjs.map

package/es/components/Table/tableUnits/DraggableIcon.mjs

@@ -26,15 +26,16 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_UIcon = resolveComponent("UIcon");
   return openBlock(), createBlock(_component_UIcon, {
     class: normalizeClass([`${_ctx.prefixCls}-draggable-icon`]),
-    onMousedown: _ctx.handleDragStart
+    onMousedown: _ctx.handleDragStart,
+    onTouchstart: _ctx.handleDragStart
   }, {
     default: withCtx(() => [
       createVNode(_component_ULineCanDrag)
     ]),
     _: 1
-  }, 8, ["class", "onMousedown"]);
+  }, 8, ["class", "onMousedown", "onTouchstart"]);
 }
-var DraggableIcon = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/Users/admin/Documents/uxd/uxd-ui/src/components/Table/tableUnits/DraggableIcon.vue"]]);
+var DraggableIcon = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/Users/admin/gitbr/uxd-ui/src/components/Table/tableUnits/DraggableIcon.vue"]]);
 
 export { DraggableIcon as default };
 //# sourceMappingURL=DraggableIcon.mjs.map

package/es/components/Table/tableUnits/DraggableIcon.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DraggableIcon.mjs","sources":["../../../../../src/components/Table/tableUnits/DraggableIcon.vue"],"sourcesContent":["<template>\n  <UIcon :class=\"[`${prefixCls}-draggable-icon`]\" @mousedown=\"handleDragStart\">\n    <ULineCanDrag />\n  </UIcon>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, inject } from 'vue';\nimport UIcon from '@uxd-ui/components/Icon';\nimport { ULineCanDrag } from '@koi-design/uxd-icon';\nimport type { TableContext } from '../Table.type';\n\nexport default defineComponent({\n  name: 'ExpandIcon',\n  components: {\n    UIcon,\n    ULineCanDrag\n  },\n  emits: ['dragStart'],\n  setup(props, { emit }) {\n    const { prefixCls } = inject<TableContext>('tableContext', {} as TableContext);\n\n    const handleDragStart = (e: DragEvent) => {\n      emit('dragStart', e);\n    };\n\n    return {\n      prefixCls,\n      handleDragStart\n    };\n  }\n});\n</script>\n"],"names":["_createBlock","_normalizeClass","_createVNode"],"mappings":";;;;;AAYA,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV;AAAA,IACA;AAAA;AACF,EACA,OAAO,CAAC,WAAW;AAAA,EACnB,MAAM,OAAO,EAAE,QAAQ;UACf,EAAE,cAAc,OAAqB,gBAAgB,EAAkB;UAEvE,kBAAkB,CAAC,MAAiB;WACnC,aAAa,CAAC;AAAA;WAGd;AAAA,MACL;AAAA,MACA;AAAA;AACF;AAEJ,CAAC;;;;sBA9BCA,YAEQ;IAFA,OAAKC,mBAAM,+BAAS;IAAqB,aAAW;;qBAC1D,MAAgB;AAAA,MAAhBC,YAAgB;;;;;;;;;"}
+{"version":3,"file":"DraggableIcon.mjs","sources":["../../../../../src/components/Table/tableUnits/DraggableIcon.vue"],"sourcesContent":["<template>\n  <UIcon :class=\"[`${prefixCls}-draggable-icon`]\" @mousedown=\"handleDragStart\" @touchstart=\"handleDragStart\">\n    <ULineCanDrag />\n  </UIcon>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, inject } from 'vue';\nimport UIcon from '@uxd-ui/components/Icon';\nimport { ULineCanDrag } from '@koi-design/uxd-icon';\nimport type { TableContext } from '../Table.type';\n\nexport default defineComponent({\n  name: 'ExpandIcon',\n  components: {\n    UIcon,\n    ULineCanDrag\n  },\n  emits: ['dragStart'],\n  setup(props, { emit }) {\n    const { prefixCls } = inject<TableContext>('tableContext', {} as TableContext);\n\n    const handleDragStart = (e: MouseEvent | TouchEvent) => {\n      emit('dragStart', e);\n    };\n\n    return {\n      prefixCls,\n      handleDragStart\n    };\n  }\n});\n</script>\n"],"names":["_createBlock","_normalizeClass","_createVNode"],"mappings":";;;;;AAYA,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV;AAAA,IACA;AAAA;AACF,EACA,OAAO,CAAC,WAAW;AAAA,EACnB,MAAM,OAAO,EAAE,QAAQ;UACf,EAAE,cAAc,OAAqB,gBAAgB,EAAkB;UAEvE,kBAAkB,CAAC,MAA+B;WACjD,aAAa,CAAC;AAAA;WAGd;AAAA,MACL;AAAA,MACA;AAAA;AACF;AAEJ,CAAC;;;;sBA9BCA,YAEQ;IAFA,OAAKC,mBAAM,+BAAS;IAAqB,aAAW;IAAkB,cAAY;;qBACxF,MAAgB;AAAA,MAAhBC,YAAgB;;;;;;;;;"}

package/es/components/Table/tableUnits/DraggableIcon.vue.d.ts

@@ -1,6 +1,6 @@
 declare const _default: import("vue").DefineComponent<{}, {
     prefixCls: import("vue").ComputedRef<string>;
-    handleDragStart: (e: DragEvent) => void;
+    handleDragStart: (e: MouseEvent | TouchEvent) => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "dragStart"[], "dragStart", import("vue").PublicProps, Readonly<{}> & Readonly<{
     onDragStart?: (...args: any[]) => any;
 }>, {}, {}, {
@@ -42,7 +42,24 @@ declare const _default: import("vue").DefineComponent<{}, {
             handleClick: (e: any) => void;
         }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
             click: (ev: Event) => boolean;
-        }, import("vue").PublicProps, {
+        }, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<import("vue").ExtractPropTypes<{
+            rotate: {
+                type: NumberConstructor;
+            };
+            spin: BooleanConstructor;
+            size: {
+                type: NumberConstructor;
+            };
+            color: {
+                type: StringConstructor;
+                default: string;
+            };
+            icon: {
+                type: import("vue").PropType<import("@koi-design/uxd-ui/es/utils").IconPropType>;
+            };
+        }>> & Readonly<{
+            onClick?: (ev: Event) => any;
+        }>, {
             color: string;
             spin: boolean;
         }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {

package/es/components/Table/tableUnits/ExpandIcon.mjs

@@ -90,7 +90,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     })) : createCommentVNode("v-if", true)
   ], 2);
 }
-var ExpandIcon = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/Users/admin/Documents/uxd/uxd-ui/src/components/Table/tableUnits/ExpandIcon.vue"]]);
+var ExpandIcon = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/Users/admin/gitbr/uxd-ui/src/components/Table/tableUnits/ExpandIcon.vue"]]);
 
 export { ExpandIcon as default };
 //# sourceMappingURL=ExpandIcon.mjs.map

package/es/components/Table/tableUnits/ExpandIcon.vue.d.ts

@@ -92,7 +92,24 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
             handleClick: (e: any) => void;
         }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
             click: (ev: Event) => boolean;
-        }, import("vue").PublicProps, {
+        }, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<import("vue").ExtractPropTypes<{
+            rotate: {
+                type: NumberConstructor;
+            };
+            spin: BooleanConstructor;
+            size: {
+                type: NumberConstructor;
+            };
+            color: {
+                type: StringConstructor;
+                default: string;
+            };
+            icon: {
+                type: PropType<IconPropType>;
+            };
+        }>> & Readonly<{
+            onClick?: (ev: Event) => any;
+        }>, {
             color: string;
             spin: boolean;
         }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {

package/es/components/Table/tableUnits/ExpandRows.mjs

@@ -123,7 +123,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     }), 128)) : createCommentVNode("v-if", true)
   ], 64);
 }
-var ExpandRows = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/Users/admin/Documents/uxd/uxd-ui/src/components/Table/tableUnits/ExpandRows.vue"]]);
+var ExpandRows = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/Users/admin/gitbr/uxd-ui/src/components/Table/tableUnits/ExpandRows.vue"]]);
 
 export { ExpandRows as default };
 //# sourceMappingURL=ExpandRows.mjs.map