@koi-design/uxd-ui 12.1.36-beta.0

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

@@ -0,0 +1,258 @@
+import { ref, computed, watch, createVNode, mergeProps } from 'vue';
+import SelectionBox from '../tableUnits/SelectionBox.mjs';
+import SelectionCheckAll from '../tableUnits/SelectionCheckAll.mjs';
+import { flatArray } from '../../../utils/tools.mjs';
+
+function useSelection(props, updatedDatas, currentDatas, prefixCls, locale) {
+  const selectedKeys = ref([]);
+  const selectionType = computed(() => {
+    var _a;
+    if (props.selection) {
+      return ((_a = props.selection) == null ? void 0 : _a.type) !== "radio" ? "checkbox" : "radio";
+    }
+    return "checkbox";
+  });
+  watch(computed(() => props.selection && props.selection.selectedKeys), (value) => {
+    if (Array.isArray(value)) {
+      selectedKeys.value = value;
+    }
+  }, {
+    immediate: true
+  });
+  const setSelectedKeys = (keys, selectionInfo) => {
+    const {
+      selectWay,
+      data,
+      checked,
+      changeKeys,
+      event
+    } = selectionInfo;
+    const {
+      selection
+    } = props;
+    if (selection && !("selectedKeys" in selection)) {
+      selectedKeys.value = keys;
+    }
+    if (selection && (selection.onChange || selection[selectWay])) {
+      const flatData = flatArray(updatedDatas.value);
+      const selectedRows = flatData.filter((row) => keys.includes(row._key)).map((x) => x.dataRef);
+      if (selection.onChange) {
+        selection.onChange(keys, selectedRows);
+      }
+      if (selectWay === "onSelect" && selection.onSelect) {
+        selection.onSelect(data, checked, selectedRows, event);
+      } else if (selectWay === "onSelectMultiple" && selection.onSelectMultiple) {
+        const changeRows = flatData.filter((row) => changeKeys.includes(row._key)).map((x) => x.dataRef);
+        selection.onSelectMultiple(checked, selectedRows, changeRows);
+      } else if (selectWay === "onSelectAll" && selection.onSelectAll) {
+        const changeRows = flatData.filter((row) => changeKeys.includes(row._key)).map((x) => x.dataRef);
+        selection.onSelectAll(checked, selectedRows, changeRows);
+      } else if (selectWay === "onSelectInvert" && selection.onSelectInvert) {
+        selection.onSelectInvert(keys);
+      }
+    }
+  };
+  const handleRadioSelect = ({
+    row,
+    rowKey
+  }, checked, e) => {
+    const keys = [rowKey];
+    setSelectedKeys(keys, {
+      checked,
+      selectWay: "onSelect",
+      data: row,
+      event: e
+    });
+  };
+  const setSelectionProps = (row, index) => {
+    if (typeof props.selection === "object" && props.selection.setSelectionProps) {
+      return props.selection.setSelectionProps(row, index);
+    }
+    return {};
+  };
+  let lastIndex = null;
+  const handleSelect = ({
+    row: data,
+    rowKey
+  }, checked, event) => {
+    let keys = selectedKeys.value;
+    const flatData = flatArray(currentDatas.value);
+    const index = flatData.findIndex((x) => x._key === rowKey);
+    if (event.shiftKey && lastIndex !== null && lastIndex !== index) {
+      const changeKeys = [];
+      const direction = Math.sign(lastIndex - index);
+      const dist = Math.abs(lastIndex - index);
+      let step = 0;
+      while (step < dist) {
+        const _index = index + step * direction;
+        const row = flatData[_index];
+        step += 1;
+        const checkboxProps = setSelectionProps(row, _index);
+        if (!checkboxProps.disabled) {
+          if (keys.includes(row._key)) {
+            if (!checked) {
+              keys = keys.filter((k) => k !== row._key);
+              changeKeys.push(row._key);
+            }
+          } else if (checked) {
+            keys.push(row._key);
+            changeKeys.push(row._key);
+          }
+        }
+      }
+      lastIndex = index;
+      setSelectedKeys(keys, {
+        selectWay: "onSelectMultiple",
+        checked,
+        data,
+        changeKeys,
+        event
+      });
+    } else {
+      if (checked) {
+        keys.push(rowKey);
+      } else {
+        keys = keys.filter((x) => x !== rowKey);
+      }
+      lastIndex = index;
+      setSelectedKeys(keys, {
+        selectWay: "onSelect",
+        checked,
+        data,
+        event
+      });
+    }
+  };
+  const handleCheckAllSelect = (operateKey, onSelect) => {
+    const data = flatArray(currentDatas.value);
+    const changeableData = data.filter((item, index) => !setSelectionProps(item.dataRef, index).disabled);
+    const changeableKeys = changeableData.map((x) => x._key);
+    const changeKeys = [];
+    const _selectedKeys = selectedKeys.value;
+    let selectWay = "onSelectAll";
+    let checked;
+    switch (operateKey) {
+      case "all":
+        changeableKeys.forEach((key) => {
+          if (!_selectedKeys.includes(key)) {
+            _selectedKeys.push(key);
+            changeKeys.push(key);
+          }
+        });
+        selectWay = "onSelectAll";
+        checked = true;
+        break;
+      case "removeAll":
+        changeableKeys.forEach((key) => {
+          if (_selectedKeys.includes(key)) {
+            _selectedKeys.splice(_selectedKeys.indexOf(key), 1);
+            changeKeys.push(key);
+          }
+        });
+        selectWay = "onSelectAll";
+        checked = false;
+        break;
+      case "invert":
+        changeableKeys.forEach((key) => {
+          if (_selectedKeys.includes(key)) {
+            _selectedKeys.splice(_selectedKeys.indexOf(key), 1);
+          } else {
+            _selectedKeys.push(key);
+          }
+          changeKeys.push(key);
+        });
+        selectWay = "onSelectInvert";
+        break;
+      default:
+        if (typeof onSelect === "function") {
+          onSelect(changeableData.map((x) => x.dataRef));
+          return;
+        }
+        break;
+    }
+    setSelectedKeys(_selectedKeys, {
+      selectWay,
+      checked,
+      changeKeys
+    });
+  };
+  const selectionColumn = computed(() => {
+    if (props.selection) {
+      const {
+        selection
+      } = props;
+      const type = selectionType.value;
+      const column = {
+        key: "selection-column",
+        type: "selection",
+        width: selection.columnWidth || 60,
+        align: "center",
+        className: `${prefixCls.value}-selection-column ${selection.selectionMenus ? `${prefixCls.value}-selection-column-custom` : ""}`,
+        render: ({
+          row,
+          index,
+          rowKey
+        }) => {
+          const handleSelectionChange = (checked, e) => {
+            if (type === "radio") {
+              handleRadioSelect({
+                row,
+                rowKey
+              }, checked, e);
+            } else if (type === "checkbox") {
+              handleSelect({
+                row,
+                rowKey
+              }, checked, e);
+            }
+          };
+          const checkboxProps = setSelectionProps(row, index);
+          return createVNode(SelectionBox, mergeProps({
+            "rowKey": rowKey,
+            "type": type,
+            "prefixCls": prefixCls.value,
+            "selectedKeys": selectedKeys.value,
+            "onChange": handleSelectionChange
+          }, checkboxProps), null);
+        }
+      };
+      if (type !== "radio") {
+        const data = flatArray(currentDatas.value);
+        const disabled = data.every((item, index) => {
+          if (selection.setSelectionProps) {
+            return setSelectionProps(item.dataRef, index).disabled;
+          }
+          return false;
+        });
+        column.titleRender = () => {
+          if (selection.showCheckAll === false) {
+            return null;
+          }
+          return createVNode(SelectionCheckAll, {
+            "selectedKeys": selectedKeys.value,
+            "data": data,
+            "disabled": disabled,
+            "prefixCls": prefixCls.value,
+            "locale": locale.value,
+            "menus": typeof selection === "object" ? selection.selectionMenus : void 0,
+            "hide-default-menus": typeof selection === "object" ? selection.hideDefaultMenus : false,
+            "onSelect": handleCheckAllSelect
+          }, null);
+        };
+      }
+      if ("fixed" in selection) {
+        column.fixed = selection.fixed;
+      } else if (props.columns.some((x) => x.fixed === "left" || x.fixed === true)) {
+        column.fixed = "left";
+      }
+      return column;
+    }
+    return null;
+  });
+  return {
+    selectionColumn
+  };
+}
+
+export { useSelection as default };
+//# sourceMappingURL=useSelection.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useSelection.mjs","sources":["../../../../../src/components/Table/hooks/useSelection.tsx"],"sourcesContent":["import { computed, ref, watch } from 'vue';\nimport type { ComputedRef, Ref } from 'vue';\nimport SelectionBox from '../tableUnits/SelectionBox.vue';\nimport SelectionCheckAll from '../tableUnits/SelectionCheckAll.vue';\nimport { flatArray } from '../../../utils/tools';\nimport type { ColumnSlotParams, InnerColumn, InnerDataItem, TableProps } from '../Table.type';\nimport type { TableLocal } from '../../locale/default';\n\ninterface SelectionInfo {\n  selectWay: 'onSelect' | 'onSelectMultiple' | 'onSelectAll' | 'onSelectInvert';\n  checked: boolean;\n  data: any;\n  changeKeys: (string | number)[];\n  event: any;\n}\n\nexport default function useSelection(\n  props: TableProps,\n  updatedDatas: Ref<InnerDataItem[]>,\n  currentDatas: Ref<InnerDataItem[]>,\n  prefixCls: ComputedRef<string>,\n  locale: ComputedRef<TableLocal>\n) {\n  const selectedKeys = ref<(string | number)[]>([]);\n\n  const selectionType = computed(() => {\n    if (props.selection) {\n      return props.selection?.type !== 'radio' ? 'checkbox' : 'radio';\n    }\n    return 'checkbox';\n  });\n\n  watch(\n    computed(() => props.selection && props.selection.selectedKeys),\n    (value) => {\n      if (Array.isArray(value)) {\n        selectedKeys.value = value;\n      }\n    },\n    { immediate: true }\n  );\n\n  const setSelectedKeys = (keys: (string | number)[], selectionInfo: SelectionInfo) => {\n    const { selectWay, data, checked, changeKeys, event } = selectionInfo;\n    const { selection } = props;\n    if (selection && !('selectedKeys' in selection)) {\n      selectedKeys.value = keys;\n    }\n    if (selection && (selection.onChange || selection[selectWay])) {\n      const flatData = flatArray(updatedDatas.value);\n      const selectedRows = flatData.filter((row) => keys.includes(row._key)).map((x) => x.dataRef);\n\n      if (selection.onChange) {\n        selection.onChange(keys, selectedRows);\n      }\n      if (selectWay === 'onSelect' && selection.onSelect) {\n        selection.onSelect(data, checked, selectedRows, event);\n      } else if (selectWay === 'onSelectMultiple' && selection.onSelectMultiple) {\n        const changeRows = flatData.filter((row) => changeKeys.includes(row._key)).map((x) => x.dataRef);\n        selection.onSelectMultiple(checked, selectedRows, changeRows);\n      } else if (selectWay === 'onSelectAll' && selection.onSelectAll) {\n        const changeRows = flatData.filter((row) => changeKeys.includes(row._key)).map((x) => x.dataRef);\n        selection.onSelectAll(checked, selectedRows, changeRows);\n      } else if (selectWay === 'onSelectInvert' && selection.onSelectInvert) {\n        selection.onSelectInvert(keys);\n      }\n    }\n  };\n\n  const handleRadioSelect = ({ row, rowKey }: { row: any; rowKey: string | number }, checked: boolean, e: any) => {\n    const keys = [rowKey];\n    setSelectedKeys(keys, {\n      checked,\n      selectWay: 'onSelect',\n      data: row,\n      event: e\n    } as SelectionInfo);\n  };\n\n  const setSelectionProps = (row: any, index: number) => {\n    if (typeof props.selection === 'object' && props.selection.setSelectionProps) {\n      return props.selection.setSelectionProps(row, index);\n    }\n    return {};\n  };\n\n  let lastIndex: number | null = null;\n  const handleSelect = ({ row: data, rowKey }: { row: any; rowKey: string | number }, checked: boolean, event: any) => {\n    let keys = selectedKeys.value;\n    const flatData = flatArray(currentDatas.value);\n    const index = flatData.findIndex((x) => x._key === rowKey);\n    if (event.shiftKey && lastIndex !== null && lastIndex !== index) {\n      const changeKeys = [];\n      const direction = Math.sign(lastIndex - index);\n      const dist = Math.abs(lastIndex - index);\n\n      let step = 0;\n      while (step < dist) {\n        const _index = index + step * direction;\n        const row = flatData[_index];\n        step += 1;\n        const checkboxProps = setSelectionProps(row, _index) as any;\n        if (!checkboxProps.disabled) {\n          if (keys.includes(row._key)) {\n            if (!checked) {\n              keys = keys.filter((k) => k !== row._key);\n              changeKeys.push(row._key);\n            }\n          } else if (checked) {\n            keys.push(row._key);\n            changeKeys.push(row._key);\n          }\n        }\n      }\n      lastIndex = index;\n      setSelectedKeys(keys, {\n        selectWay: 'onSelectMultiple',\n        checked,\n        data,\n        changeKeys,\n        event\n      });\n    } else {\n      if (checked) {\n        keys.push(rowKey);\n      } else {\n        keys = keys.filter((x) => x !== rowKey);\n      }\n      lastIndex = index;\n      setSelectedKeys(keys, {\n        selectWay: 'onSelect',\n        checked,\n        data,\n        event\n      } as SelectionInfo);\n    }\n  };\n\n  const handleCheckAllSelect = (operateKey: string, onSelect: (rows: any[]) => void) => {\n    const data = flatArray(currentDatas.value);\n    const changeableData = data.filter((item, index) => !(setSelectionProps(item.dataRef, index) as any).disabled);\n    const changeableKeys = changeableData.map((x) => x._key);\n    const changeKeys: (string | number)[] = [];\n    const _selectedKeys = selectedKeys.value;\n    let selectWay = 'onSelectAll';\n    let checked;\n    switch (operateKey) {\n      case 'all':\n        changeableKeys.forEach((key) => {\n          if (!_selectedKeys.includes(key)) {\n            _selectedKeys.push(key);\n            changeKeys.push(key);\n          }\n        });\n        selectWay = 'onSelectAll';\n        checked = true;\n        break;\n      case 'removeAll':\n        changeableKeys.forEach((key) => {\n          if (_selectedKeys.includes(key)) {\n            _selectedKeys.splice(_selectedKeys.indexOf(key), 1);\n            changeKeys.push(key);\n          }\n        });\n        selectWay = 'onSelectAll';\n        checked = false;\n        break;\n      case 'invert':\n        changeableKeys.forEach((key) => {\n          if (_selectedKeys.includes(key)) {\n            _selectedKeys.splice(_selectedKeys.indexOf(key), 1);\n          } else {\n            _selectedKeys.push(key);\n          }\n          changeKeys.push(key);\n        });\n        selectWay = 'onSelectInvert';\n        break;\n      default:\n        if (typeof onSelect === 'function') {\n          onSelect(changeableData.map((x) => x.dataRef));\n          return;\n        }\n        break;\n    }\n    setSelectedKeys(_selectedKeys, {\n      selectWay,\n      checked,\n      changeKeys\n    } as SelectionInfo);\n  };\n\n  const selectionColumn = computed(() => {\n    if (props.selection) {\n      const { selection } = props;\n      const type = selectionType.value;\n\n      const column: InnerColumn = {\n        key: 'selection-column',\n        type: 'selection',\n        width: selection.columnWidth || 60,\n        align: 'center',\n        className: `${prefixCls.value}-selection-column ${selection.selectionMenus ? `${prefixCls.value}-selection-column-custom` : ''}`,\n        render: ({ row, index, rowKey }: ColumnSlotParams) => {\n          const handleSelectionChange = (checked: boolean, e: any) => {\n            if (type === 'radio') {\n              handleRadioSelect({ row, rowKey }, checked, e);\n            } else if (type === 'checkbox') {\n              handleSelect({ row, rowKey }, checked, e);\n            }\n          };\n          const checkboxProps = setSelectionProps(row, index);\n          return (\n            <SelectionBox\n              rowKey={rowKey}\n              type={type}\n              prefixCls={prefixCls.value}\n              selectedKeys={selectedKeys.value}\n              onChange={handleSelectionChange}\n              {...checkboxProps}\n            ></SelectionBox>\n          );\n        }\n      };\n      if (type !== 'radio') {\n        const data = flatArray(currentDatas.value);\n        const disabled = data.every((item, index) => {\n          if (selection.setSelectionProps) {\n            return (setSelectionProps(item.dataRef, index) as any).disabled;\n          }\n          return false;\n        });\n        column.titleRender = () => {\n          if (selection.showCheckAll === false) {\n            return null;\n          }\n          return (\n            <SelectionCheckAll\n              selectedKeys={selectedKeys.value}\n              data={data}\n              disabled={disabled}\n              prefixCls={prefixCls.value}\n              locale={locale.value}\n              menus={typeof selection === 'object' ? selection.selectionMenus : undefined}\n              hide-default-menus={typeof selection === 'object' ? selection.hideDefaultMenus : false}\n              // get-checkbox-props={setSelectionProps}\n              onSelect={handleCheckAllSelect}\n            ></SelectionCheckAll>\n          );\n        };\n      }\n      if ('fixed' in selection) {\n        column.fixed = selection.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\n  return {\n    selectionColumn\n  };\n}\n"],"names":["useSelection","props","updatedDatas","currentDatas","prefixCls","locale","selectedKeys","ref","selectionType","computed","selection","type","watch","value","Array","isArray","immediate","setSelectedKeys","keys","selectionInfo","selectWay","data","checked","changeKeys","event","onChange","flatData","flatArray","selectedRows","filter","row","includes","_key","map","x","dataRef","onSelect","onSelectMultiple","changeRows","onSelectAll","onSelectInvert","handleRadioSelect","rowKey","e","setSelectionProps","index","lastIndex","handleSelect","findIndex","shiftKey","direction","Math","sign","dist","abs","step","_index","checkboxProps","disabled","k","push","handleCheckAllSelect","operateKey","changeableData","item","changeableKeys","_selectedKeys","forEach","key","splice","indexOf","selectionColumn","column","width","columnWidth","align","className","selectionMenus","render","handleSelectionChange","_createVNode","SelectionBox","_mergeProps","every","titleRender","showCheckAll","SelectionCheckAll","undefined","hideDefaultMenus","fixed","columns","some"],"mappings":"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"}

package/es/components/Table/hooks/useTableResize.d.ts

@@ -0,0 +1,14 @@
+import type { ComputedRef, Ref } from 'vue';
+import type { InnerColumn, TableProps, TableRefs } from '../Table.type';
+export declare function getWidth(width: string | number, tableWidth: number): number;
+export default function useTableResize(updatedColumns: Ref<InnerColumn[]>, tableRefs: TableRefs, prefixCls: Ref<string>, isColumnFixed: ComputedRef<boolean>, props: TableProps): {
+    sizesMap: Record<string, number>;
+    tableWidth: Ref<number, number>;
+    isScrollX: ComputedRef<boolean>;
+    scrollPosition: Ref<string, string>;
+    handleResize: () => void;
+    setScrollPositionClass: () => void;
+    resetScrollX: () => void;
+    clearResizeTimer: () => void;
+    setResizeWidth: (column: InnerColumn, width: number) => void;
+};

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

@@ -0,0 +1,172 @@
+import { reactive, ref, computed } from 'vue';
+import { getLeafColumns, getColumnKey, getMinWidth } from '../utils.mjs';
+
+function getWidth(width, tableWidth) {
+  let _width = 0;
+  if (typeof width === "number") {
+    _width = width;
+  } else if (/^\d*px$/.test(width)) {
+    _width = Number(width.replace("px", ""));
+  } else if (/^[\d.]*%$/.test(width)) {
+    const percent = Number(width.replace("%", ""));
+    if (!Number.isNaN(percent)) {
+      _width = Math.floor(percent / 100 * tableWidth);
+    }
+  }
+  return _width;
+}
+function useTableResize(updatedColumns, tableRefs, prefixCls, isColumnFixed, props) {
+  const sizesMap = reactive({});
+  const tableWidth = ref(void 0);
+  const syncColumnsWidth = () => {
+    const { bodyTable } = tableRefs;
+    if (!bodyTable || bodyTable.getWidth() === void 0) {
+      return;
+    }
+    const wrapWidth = bodyTable.getWidth();
+    const columns = getLeafColumns(updatedColumns.value);
+    let usedWidth = 0;
+    Object.keys(sizesMap).forEach((key) => {
+      delete sizesMap[key];
+    });
+    const minWidthColumns = [];
+    const maxWidthColumns = [];
+    const nothingColumns = [];
+    columns.forEach((c) => {
+      const colKey = getColumnKey(c);
+      if (c.width) {
+        const _width = getWidth(c.width, wrapWidth);
+        usedWidth += _width;
+        sizesMap[colKey] = _width;
+      } else if (c.minWidth) {
+        const _width = getWidth(c.minWidth, wrapWidth);
+        usedWidth += _width;
+        sizesMap[colKey] = _width;
+        minWidthColumns.push(c);
+      } else {
+        const minWidth = getMinWidth(c);
+        sizesMap[colKey] = minWidth;
+        usedWidth += minWidth;
+        if (c.maxWidth) {
+          maxWidthColumns.push(c);
+        } else {
+          nothingColumns.push(c);
+        }
+      }
+    });
+    let unUsedWidth = wrapWidth - usedWidth;
+    let length = minWidthColumns.length + maxWidthColumns.length + nothingColumns.length;
+    if (unUsedWidth > 0 && length > 0) {
+      let avgWidth;
+      maxWidthColumns.forEach((mc) => {
+        avgWidth = Math.floor(unUsedWidth / length);
+        if (getWidth(mc.maxWidth, wrapWidth) < avgWidth) {
+          sizesMap[mc.key] = getWidth(mc.maxWidth, wrapWidth);
+          unUsedWidth -= getWidth(mc.maxWidth, wrapWidth) - getMinWidth(mc);
+        } else {
+          sizesMap[mc.key] += avgWidth;
+          unUsedWidth -= avgWidth;
+        }
+        length -= 1;
+      });
+      avgWidth = Math.floor(unUsedWidth / length);
+      if (avgWidth > 50 || nothingColumns.length === 0) {
+        [...minWidthColumns, ...nothingColumns].forEach((c, i) => {
+          if (i < length - 1) {
+            sizesMap[c.key] += avgWidth;
+            unUsedWidth -= avgWidth;
+          } else {
+            sizesMap[c.key] += unUsedWidth;
+          }
+        });
+      } else {
+        avgWidth = Math.floor(unUsedWidth / nothingColumns.length);
+        nothingColumns.forEach((c, i) => {
+          if (i < nothingColumns.length - 1) {
+            sizesMap[c.key] += avgWidth;
+            unUsedWidth -= avgWidth;
+          } else {
+            sizesMap[c.key] += unUsedWidth;
+          }
+        });
+      }
+    }
+    tableWidth.value = Object.keys(sizesMap).reduce((sum, key) => sum + sizesMap[key], 0);
+  };
+  let syncHeightTimer = null;
+  const scrollPosition = ref("left");
+  const setScrollPositionClass = () => {
+    const { bodyTable } = tableRefs;
+    const bodyDom = bodyTable.wrapRef;
+    if (!bodyDom) {
+      return;
+    }
+    const scrollToLeft = bodyDom.scrollLeft === 0;
+    const scrollToRight = bodyDom.scrollLeft + 1 >= bodyDom.children[0].getBoundingClientRect().width - bodyDom.getBoundingClientRect().width;
+    if (scrollToLeft && scrollToRight) {
+      scrollPosition.value = "both";
+    } else if (scrollToLeft) {
+      scrollPosition.value = "left";
+    } else if (scrollToRight) {
+      scrollPosition.value = "right";
+    } else {
+      scrollPosition.value = "middle";
+    }
+  };
+  const handleResize = () => {
+    syncColumnsWidth();
+    if (isColumnFixed.value) {
+      syncHeightTimer = setTimeout(() => {
+        setScrollPositionClass();
+      }, 0);
+    }
+    setTimeout(() => {
+      tableRefs.bodyTable.update();
+    }, 0);
+  };
+  const setResizeWidth = (column, width) => {
+    const columns = getLeafColumns(updatedColumns.value);
+    const _column = columns.find((c) => c === column || getColumnKey(c) === getColumnKey(column));
+    if (_column) {
+      _column.width = width;
+      handleResize();
+    }
+  };
+  const isScrollX = computed(() => {
+    const { table } = tableRefs;
+    if (table) {
+      const wrapWidth = props.border ? table.offsetWidth - 1 : table.offsetWidth;
+      return tableWidth.value && tableWidth.value > wrapWidth;
+    }
+    return false;
+  });
+  const resetScrollX = () => {
+    const { bodyTable, headTable } = tableRefs;
+    if (bodyTable) {
+      bodyTable.setScrollLeft(0);
+    }
+    if (headTable) {
+      headTable.setScrollLeft(0);
+    }
+  };
+  const clearResizeTimer = () => {
+    if (syncHeightTimer) {
+      clearTimeout(syncHeightTimer);
+      syncHeightTimer = null;
+    }
+  };
+  return {
+    sizesMap,
+    tableWidth,
+    isScrollX,
+    scrollPosition,
+    handleResize,
+    setScrollPositionClass,
+    resetScrollX,
+    clearResizeTimer,
+    setResizeWidth
+  };
+}
+
+export { useTableResize as default, getWidth };
+//# sourceMappingURL=useTableResize.mjs.map

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

@@ -0,0 +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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"}

package/es/components/Table/hooks/useUpdateColumns.d.ts

@@ -0,0 +1,14 @@
+import type { ComputedRef, Slots } from 'vue';
+import type { InnerColumn, TableProps } from '../Table.type';
+export default function useUpdateColumns(props: TableProps, slots: Slots, { draggableColumn, expandColumn, selectionColumn }: {
+    draggableColumn: ComputedRef<InnerColumn | null>;
+    expandColumn: ComputedRef<InnerColumn | null>;
+    selectionColumn: ComputedRef<InnerColumn | null>;
+}): {
+    updatedColumns: ComputedRef<InnerColumn[]>;
+    isLeftFixed: ComputedRef<boolean>;
+    isRightFixed: ComputedRef<boolean>;
+    isColumnFixed: ComputedRef<boolean>;
+    leftColumns: ComputedRef<InnerColumn[]>;
+    rightColumns: ComputedRef<InnerColumn[]>;
+};

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

@@ -0,0 +1,112 @@
+import { computed } from 'vue';
+
+function useUpdateColumns(props, slots, {
+  draggableColumn,
+  expandColumn,
+  selectionColumn
+}) {
+  let index = 0;
+  const updateColumns = (cols = [], currentRow = 0, parentCol = {}, rows = []) => {
+    const columns = [];
+    rows[currentRow] = rows[currentRow] || [];
+    cols.forEach((col, i) => {
+      const { slot, titleSlot, filterSlot, summarySlot, ...restProps } = col;
+      const column = {
+        ...restProps
+      };
+      if (col.type !== "selection" && col.type !== "expand") {
+        column._index = index;
+        index += 1;
+      }
+      if (slot !== void 0 && slots[slot]) {
+        column.render = slots[slot];
+      }
+      if (titleSlot !== void 0 && slots[titleSlot]) {
+        column.titleRender = slots[titleSlot];
+      }
+      if (filterSlot !== void 0 && slots[filterSlot]) {
+        column.filterRender = slots[filterSlot];
+      }
+      if (props.showSummary) {
+        if (summarySlot !== void 0 && slots[summarySlot]) {
+          column.summaryRender = slots[summarySlot];
+        }
+      }
+      if (i === cols.length - 1 && (!parentCol.children || parentCol._isRightEdge)) {
+        column._isRightEdge = true;
+      }
+      parentCol.colSpan = parentCol.colSpan || 0;
+      if (column.children && column.children.length > 0) {
+        column.children = updateColumns(column.children, currentRow + 1, column, rows);
+        parentCol.colSpan += column.colSpan || 1;
+      } else {
+        parentCol.colSpan += 1;
+      }
+      rows[currentRow].push(column);
+      columns.push(column);
+    });
+    return columns;
+  };
+  const updatedColumns = computed(() => {
+    const rows = [];
+    const _columns = [];
+    if (draggableColumn.value) {
+      _columns.push(draggableColumn.value);
+    }
+    if (expandColumn.value) {
+      _columns.push(expandColumn.value);
+    }
+    if (selectionColumn.value) {
+      _columns.push(selectionColumn.value);
+    }
+    _columns.push(...props.columns);
+    const rst = updateColumns(_columns, 0, {}, rows);
+    rows.forEach((row, rowIndex) => {
+      row.forEach((column) => {
+        const rowSpan = rows.length - rowIndex;
+        if (column && !column.children && rowSpan > 1) {
+          column.rowSpan = rowSpan;
+        }
+      });
+    });
+    return rst;
+  });
+  const isLeftFixed = computed(() => {
+    return updatedColumns.value.some((col) => col.fixed === "left" || col.fixed === true);
+  });
+  const isRightFixed = computed(() => {
+    return updatedColumns.value.some((col) => col.fixed === "right");
+  });
+  const isColumnFixed = computed(() => {
+    return isLeftFixed.value || isRightFixed.value;
+  });
+  const leftColumns = computed(() => {
+    const rst = updatedColumns.value.filter((col) => col.fixed === "left" || col.fixed === true);
+    if (rst.length > 0) {
+      rst[rst.length - 1].lastLeft = true;
+    }
+    return rst;
+  });
+  const rightColumns = computed(() => {
+    const rst = updatedColumns.value.filter((col) => col.fixed === "right");
+    if (rst.length > 0) {
+      rst[0].firstRight = true;
+    }
+    return rst;
+  });
+  const allColumns = computed(() => {
+    const notFixedColumns = updatedColumns.value.filter((col) => !col.fixed);
+    return [...leftColumns.value, ...notFixedColumns, ...rightColumns.value];
+  });
+  return {
+    updatedColumns: allColumns,
+    isLeftFixed,
+    isRightFixed,
+    isColumnFixed,
+    leftColumns,
+    rightColumns
+  };
+}
+
+export { useUpdateColumns as default };
+//# sourceMappingURL=useUpdateColumns.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useUpdateColumns.mjs","sources":["../../../../../src/components/Table/hooks/useUpdateColumns.ts"],"sourcesContent":["import { computed } from 'vue';\nimport type { ComputedRef, Slots } from 'vue';\nimport type { InnerColumn, TableColumn, TableProps } from '../Table.type';\n\nexport default function useUpdateColumns(\n  props: TableProps,\n  slots: Slots,\n  {\n    draggableColumn,\n    expandColumn,\n    selectionColumn\n  }: {\n    draggableColumn: ComputedRef<InnerColumn | null>;\n    expandColumn: ComputedRef<InnerColumn | null>;\n    selectionColumn: ComputedRef<InnerColumn | null>;\n  }\n) {\n  let index = 0;\n  const updateColumns = (cols: InnerColumn[] = [], currentRow = 0, parentCol = {} as InnerColumn, rows: TableColumn[][] = []) => {\n    const columns: InnerColumn[] = [];\n    rows[currentRow] = rows[currentRow] || [];\n    cols.forEach((col, i) => {\n      const { slot, titleSlot, filterSlot, summarySlot, ...restProps } = col;\n\n      const column = {\n        ...restProps\n      };\n      if (col.type !== 'selection' && col.type !== 'expand') {\n        column._index = index;\n        index += 1;\n      }\n\n      // ====== slot to render ========\n      if (slot !== undefined && slots[slot]) {\n        column.render = slots[slot];\n      }\n      if (titleSlot !== undefined && slots[titleSlot]) {\n        column.titleRender = slots[titleSlot];\n      }\n      if (filterSlot !== undefined && slots[filterSlot]) {\n        column.filterRender = slots[filterSlot];\n      }\n      if (props.showSummary) {\n        if (summarySlot !== undefined && slots[summarySlot]) {\n          column.summaryRender = slots[summarySlot];\n        }\n      }\n      if (i === cols.length - 1 && (!parentCol.children || parentCol._isRightEdge)) {\n        column._isRightEdge = true;\n      }\n      // ====== grouped ======\n      parentCol.colSpan = parentCol.colSpan || 0;\n      if (column.children && column.children.length > 0) {\n        column.children = updateColumns(column.children, currentRow + 1, column, rows);\n        parentCol.colSpan += column.colSpan || 1;\n      } else {\n        parentCol.colSpan += 1;\n      }\n      rows[currentRow].push(column);\n      columns.push(column);\n    });\n    return columns;\n  };\n\n  const updatedColumns = computed(() => {\n    const rows: InnerColumn[][] = [];\n    const _columns: InnerColumn[] = [];\n    if (draggableColumn.value) {\n      // const customDraggable = props.columns.find((item) => item.draggable === true);\n      // if (customDraggable) {\n      //\n      //   // customDraggable.handleDragStart = draggableColumn.value.handleDragStart;\n      //   if (customDraggable.render) {\n      //     (customDraggable as any).sourceRender = customDraggable.render;\n      //     customDraggable.render = (param) => (customDraggable as any).sourceRender(param, draggableColumn.value.handleDragStart);\n      //   }\n      // } else {\n      _columns.push(draggableColumn.value);\n      // }\n    }\n    if (expandColumn.value) {\n      _columns.push(expandColumn.value);\n    }\n    if (selectionColumn.value) {\n      _columns.push(selectionColumn.value);\n    }\n    _columns.push(...(props.columns as InnerColumn[]));\n\n    const rst = updateColumns(_columns, 0, {} as InnerColumn, rows);\n\n    rows.forEach((row, rowIndex) => {\n      row.forEach((column) => {\n        const rowSpan = rows.length - rowIndex;\n        if (column && !column.children && rowSpan > 1) {\n          column.rowSpan = rowSpan;\n        }\n      });\n    });\n    return rst;\n  });\n\n  const isLeftFixed = computed(() => {\n    return updatedColumns.value.some((col) => col.fixed === 'left' || col.fixed === true);\n  });\n\n  const isRightFixed = computed(() => {\n    return updatedColumns.value.some((col) => col.fixed === 'right');\n  });\n\n  const isColumnFixed = computed(() => {\n    return isLeftFixed.value || isRightFixed.value;\n  });\n\n  const leftColumns = computed(() => {\n    const rst = updatedColumns.value.filter((col) => col.fixed === 'left' || col.fixed === true);\n    if (rst.length > 0) {\n      rst[rst.length - 1].lastLeft = true;\n    }\n\n    return rst;\n  });\n\n  const rightColumns = computed(() => {\n    const rst = updatedColumns.value.filter((col) => col.fixed === 'right');\n    if (rst.length > 0) {\n      rst[0].firstRight = true;\n    }\n\n    return rst;\n  });\n\n  const allColumns = computed(() => {\n    const notFixedColumns = updatedColumns.value.filter((col) => !col.fixed);\n    return [...leftColumns.value, ...notFixedColumns, ...rightColumns.value];\n  });\n\n  return {\n    updatedColumns: allColumns,\n    isLeftFixed,\n    isRightFixed,\n    isColumnFixed,\n    leftColumns,\n    rightColumns\n  };\n}\n"],"names":[],"mappings":"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"}

package/es/components/Table/hooks/useUpdateDatas.d.ts

@@ -0,0 +1,9 @@
+import type { InnerDataItem, TableProps } from '../Table.type';
+export default function useUpdateDatas(props: TableProps): {
+    updatedDatas: import("vue").ComputedRef<InnerDataItem[] | {
+        _index: number;
+        _key: string;
+        _isSkeleton: boolean;
+        dataRef: {};
+    }[]>;
+};