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

package/lib/components/Table/hooks/useExpander.d.ts

@@ -0,0 +1,12 @@
+import type { ComputedRef, Slots } from 'vue';
+import type { ExpandParams, InnerColumn, InnerDataItem, TableEmit, TableProps } from '../Table.type';
+export default function useExpander(props: TableProps, slots: Slots, currentData: ComputedRef<InnerDataItem[]>, emit: TableEmit): {
+    expandedRowKeys: import("vue").Ref<(string | number)[], (string | number)[]>;
+    showChildrenRowKeys: import("vue").Ref<(string | number)[], (string | number)[]>;
+    handleExpandChange: ({ row, rowKey, async, done, tree }: ExpandParams, e: any) => void;
+    isRowExpanded: (rowKey: string | number, tree?: boolean) => boolean;
+    isTreeTable: ComputedRef<boolean>;
+    expandedRowRender: ComputedRef<import("vue").Slot<any>>;
+    expandColumn: ComputedRef<InnerColumn>;
+    expandIconColumnIndex: ComputedRef<number>;
+};

package/lib/components/Table/hooks/useExpander.js

@@ -0,0 +1,166 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var uxdIcon = require('@koi-design/uxd-icon');
+var tools = require('../../../utils/tools.js');
+var ExpandIcon = require('../tableUnits/ExpandIcon.js');
+
+function useExpander(props, slots, currentData, emit) {
+  const expandedRowKeys = vue.ref([]);
+  const showChildrenRowKeys = vue.ref([]);
+  const expandedRowRender = vue.computed(() => {
+    return slots.expandedRow ? slots.expandedRow : void 0;
+  });
+  const isTreeTable = vue.computed(() => {
+    return props.data.some((x) => !!x.children);
+  });
+  const setExpandedRowKeys = (rowKey, tree = false) => {
+    const valueRef = tree ? showChildrenRowKeys : expandedRowKeys;
+    const _expandedKeys = valueRef.value;
+    const expanded = !_expandedKeys.includes(rowKey);
+    if (!expanded) {
+      valueRef.value = _expandedKeys.filter((k) => k !== rowKey);
+    } else {
+      valueRef.value = [..._expandedKeys, rowKey];
+    }
+    return expanded;
+  };
+  const setOpenAll = () => {
+    const rows = [...currentData.value];
+    tools.treeMap(rows, (row) => {
+      if (row.dataRef.children && row.dataRef.children === true) {
+        return;
+      }
+      if (props.defaultShowAllChildren && isTreeTable.value) {
+        setExpandedRowKeys(row._key, true);
+      }
+      if (props.defaultExpandAllRows && expandedRowRender.value) {
+        setExpandedRowKeys(row._key, false);
+      }
+    });
+  };
+  vue.watch(currentData, () => {
+    expandedRowKeys.value = [];
+    showChildrenRowKeys.value = [];
+    if (props.defaultShowAllChildren || props.defaultExpandAllRows) {
+      setOpenAll();
+    } else {
+      if (expandedRowRender.value) {
+        expandedRowKeys.value = props.expandedRowKeys || [];
+      }
+      if (isTreeTable.value) {
+        showChildrenRowKeys.value = props.showChildrenRowKeys || [];
+      }
+    }
+  }, {
+    immediate: true
+  });
+  vue.watch(() => props.expandedRowKeys, () => {
+    if (props.expandedRowKeys) {
+      vue.nextTick(() => {
+        expandedRowKeys.value = props.expandedRowKeys || [];
+      });
+    }
+  }, {
+    immediate: true
+  });
+  vue.watch(() => props.showChildrenRowKeys, () => {
+    if (props.showChildrenRowKeys) {
+      vue.nextTick(() => {
+        showChildrenRowKeys.value = props.showChildrenRowKeys || [];
+      });
+    }
+  }, {
+    immediate: true
+  });
+  const isRowExpanded = (rowKey, tree = false) => {
+    if (tree) {
+      return showChildrenRowKeys.value.some((x) => x === rowKey);
+    }
+    return expandedRowKeys.value.some((x) => x === rowKey);
+  };
+  const handleExpandChange = ({
+    row,
+    rowKey,
+    async,
+    done,
+    tree
+  }, e) => {
+    if (e) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+    if (!async) {
+      const expanded = setExpandedRowKeys(rowKey, !!tree);
+      emit("expand", expanded, row, tree ? "children" : "expandRow");
+    } else {
+      emit("async-expand", row, done, showChildrenRowKeys.value);
+    }
+  };
+  const expandColumn = vue.computed(() => {
+    if (expandedRowRender.value) {
+      return {
+        key: "expand-icon-cell",
+        type: "expand",
+        title: "e",
+        width: 50,
+        align: "center",
+        fixed: props.columns.some((x) => x.fixed === "left" || x.fixed === true) || props.expandFix ? "left" : void 0,
+        render: ({
+          row,
+          rowKey
+        }) => {
+          const handleExpand = (e) => {
+            handleExpandChange({
+              row,
+              rowKey
+            }, e);
+          };
+          return vue.createVNode(ExpandIcon["default"], {
+            "expanded": isRowExpanded(rowKey),
+            "expandable": true,
+            "expand-icon": uxdIcon.ULineRight,
+            "onExpand": handleExpand
+          }, null);
+        },
+        titleRender: () => {
+          return vue.createVNode(ExpandIcon["default"], {
+            "expanded": false,
+            "expandable": false,
+            "needIndentSpaced": true,
+            "expand-icon": uxdIcon.ULineRight
+          }, null);
+        }
+      };
+    }
+    return null;
+  });
+  const expandIconColumnIndex = vue.computed(() => {
+    if (props.treeIconColumnIndex) {
+      return props.treeIconColumnIndex;
+    }
+    let index = 0;
+    if (props.selection) {
+      index += 1;
+    }
+    if (expandedRowRender.value) {
+      index += 1;
+    }
+    return index;
+  });
+  return {
+    expandedRowKeys,
+    showChildrenRowKeys,
+    handleExpandChange,
+    isRowExpanded,
+    isTreeTable,
+    expandedRowRender,
+    expandColumn,
+    expandIconColumnIndex
+  };
+}
+
+exports["default"] = useExpander;
+//# sourceMappingURL=useExpander.js.map

package/lib/components/Table/hooks/useExpander.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useExpander.js","sources":["../../../../../src/components/Table/hooks/useExpander.tsx"],"sourcesContent":["import { computed, nextTick, ref, watch } from 'vue';\nimport type { ComputedRef, Slots } from 'vue';\nimport { ULineRight } from '@koi-design/uxd-icon';\nimport { treeMap } from '../../../utils/tools';\nimport type { ExpandParams, InnerColumn, InnerDataItem, TableEmit, TableProps } from '../Table.type';\nimport ExpandIcon from '../tableUnits/ExpandIcon.vue';\n\nexport default function useExpander(props: TableProps, slots: Slots, currentData: ComputedRef<InnerDataItem[]>, emit: TableEmit) {\n  const expandedRowKeys = ref<(string | number)[]>([]);\n  const showChildrenRowKeys = ref<(string | number)[]>([]);\n\n  const expandedRowRender = computed(() => {\n    return slots.expandedRow ? slots.expandedRow : undefined;\n  });\n\n  const isTreeTable = computed(() => {\n    return props.data.some((x) => !!x.children);\n  });\n\n  const setExpandedRowKeys = (rowKey: string | number, tree = false) => {\n    const valueRef = tree ? showChildrenRowKeys : expandedRowKeys;\n    const _expandedKeys = valueRef.value;\n    const expanded = !_expandedKeys.includes(rowKey);\n    if (!expanded) {\n      valueRef.value = _expandedKeys.filter((k) => k !== rowKey);\n    } else {\n      valueRef.value = [..._expandedKeys, rowKey];\n    }\n    return expanded;\n  };\n\n  const setOpenAll = () => {\n    const rows = [...currentData.value];\n    treeMap(rows, (row) => {\n      if (row.dataRef.children && row.dataRef.children === true) {\n        return;\n      }\n      if (props.defaultShowAllChildren && isTreeTable.value) {\n        setExpandedRowKeys(row._key, true);\n      }\n      if (props.defaultExpandAllRows && expandedRowRender.value) {\n        setExpandedRowKeys(row._key, false);\n      }\n    });\n  };\n\n  watch(\n    currentData,\n    () => {\n      expandedRowKeys.value = [];\n      showChildrenRowKeys.value = [];\n      if (props.defaultShowAllChildren || props.defaultExpandAllRows) {\n        setOpenAll();\n      } else {\n        if (expandedRowRender.value) {\n          expandedRowKeys.value = props.expandedRowKeys || [];\n        }\n        if (isTreeTable.value) {\n          showChildrenRowKeys.value = props.showChildrenRowKeys || [];\n        }\n      }\n    },\n    { immediate: true }\n  );\n\n  watch(\n    () => props.expandedRowKeys,\n    () => {\n      if (props.expandedRowKeys) {\n        nextTick(() => {\n          expandedRowKeys.value = props.expandedRowKeys || [];\n        });\n      }\n    },\n    { immediate: true }\n  );\n\n  watch(\n    () => props.showChildrenRowKeys,\n    () => {\n      if (props.showChildrenRowKeys) {\n        nextTick(() => {\n          showChildrenRowKeys.value = props.showChildrenRowKeys || [];\n        });\n      }\n    },\n    { immediate: true }\n  );\n\n  const isRowExpanded = (rowKey: string | number, tree = false) => {\n    if (tree) {\n      return showChildrenRowKeys.value.some((x) => x === rowKey);\n    }\n    return expandedRowKeys.value.some((x) => x === rowKey);\n  };\n\n  const handleExpandChange = ({ row, rowKey, async, done, tree }: ExpandParams, e: any) => {\n    if (e) {\n      e.preventDefault();\n      e.stopPropagation();\n    }\n    if (!async) {\n      const expanded = setExpandedRowKeys(rowKey, !!tree);\n      emit('expand', expanded, row, tree ? 'children' : 'expandRow');\n    } else {\n      emit('async-expand', row, done, showChildrenRowKeys.value);\n    }\n  };\n\n  const expandColumn = computed(() => {\n    if (expandedRowRender.value) {\n      return {\n        key: 'expand-icon-cell',\n        type: 'expand',\n        title: 'e',\n        width: 50,\n        align: 'center',\n        fixed: props.columns.some((x) => x.fixed === 'left' || x.fixed === true) || props.expandFix ? 'left' : undefined,\n        render: ({ row, rowKey }: { row: any; rowKey: string | number }) => {\n          const handleExpand = (e: any) => {\n            handleExpandChange({ row, rowKey }, e);\n          };\n          return <ExpandIcon expanded={isRowExpanded(rowKey)} expandable expand-icon={ULineRight} onExpand={handleExpand}></ExpandIcon>;\n        },\n        titleRender: () => {\n          return <ExpandIcon expanded={false} expandable={false} needIndentSpaced expand-icon={ULineRight}></ExpandIcon>;\n        }\n      } as InnerColumn;\n    }\n    return null;\n  });\n\n  const expandIconColumnIndex = computed(() => {\n    if (props.treeIconColumnIndex) {\n      return props.treeIconColumnIndex;\n    }\n    let index = 0;\n    if (props.selection) {\n      index += 1;\n    }\n    if (expandedRowRender.value) {\n      index += 1;\n    }\n    return index;\n  });\n\n  return {\n    expandedRowKeys,\n    showChildrenRowKeys,\n    handleExpandChange,\n    isRowExpanded,\n    isTreeTable,\n    expandedRowRender,\n    expandColumn,\n    expandIconColumnIndex\n  };\n}\n"],"names":["useExpander","props","slots","currentData","emit","expandedRowKeys","ref","showChildrenRowKeys","expandedRowRender","computed","expandedRow","undefined","isTreeTable","data","some","x","children","setExpandedRowKeys","rowKey","tree","valueRef","_expandedKeys","value","expanded","includes","filter","k","setOpenAll","rows","treeMap","row","dataRef","defaultShowAllChildren","_key","defaultExpandAllRows","watch","immediate","nextTick","isRowExpanded","handleExpandChange","async","done","e","preventDefault","stopPropagation","expandColumn","key","type","title","width","align","fixed","columns","expandFix","render","handleExpand","_createVNode","ExpandIcon","ULineRight","titleRender","expandIconColumnIndex","treeIconColumnIndex","index","selection"],"mappings":"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"}

package/lib/components/Table/hooks/useFilterSortPage.d.ts

@@ -0,0 +1,47 @@
+import type { ComputedRef } from 'vue';
+import type { InnerColumn, InnerDataItem, TableEmit, TableProps } from '../Table.type';
+export default function useFilterAndSort(props: TableProps, updatedDatas: ComputedRef<InnerDataItem[]>, emit: TableEmit): {
+    hasAction: (column: InnerColumn) => boolean;
+    hasSorters: (column: InnerColumn) => boolean;
+    hasFilters: (column: InnerColumn) => boolean;
+    isSortColumn: (column: InnerColumn) => boolean;
+    isAscend: (column: InnerColumn) => boolean;
+    isDescend: (column: InnerColumn) => boolean;
+    hasAscend: (column: InnerColumn) => boolean;
+    hasDescend: (column: InnerColumn) => boolean;
+    toggleSortOrder: (column: InnerColumn) => void;
+    setColumnFilter: (column: InnerColumn, selectedKeys: (string | number)[]) => void;
+    currentDatas: ComputedRef<InnerDataItem[]>;
+    paginationOptions: {
+        size: "small" | "default";
+        disabled: boolean;
+        variant: "surface" | "soft" | "simple";
+        simple: boolean;
+        align: "right" | "left" | "center";
+        current: number;
+        showSizer: boolean;
+        pageSizeOptions: number[];
+        pageSize: number;
+        showElevator: boolean;
+        total: number;
+        showTotal: boolean;
+        pageBufferSize: number;
+        showFirstPager: boolean;
+        showLastPager: boolean;
+        selectDropdownWidth: number;
+        locale?: {
+            jumpTo: string;
+            page: string;
+            total: string;
+            item: string;
+            prevPage: string;
+            nextPage: string;
+            prev5: string;
+            next5: string;
+        };
+        beforeChange?: (page: number) => boolean;
+    };
+    computedPageTotal: ComputedRef<number>;
+    handlePageChange: (page: number) => void;
+    handlePageSizeChange: (size: number, current: number) => void;
+};

package/lib/components/Table/hooks/useFilterSortPage.js

@@ -0,0 +1,230 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var tools = require('../../../utils/tools.js');
+var utils = require('../utils.js');
+
+const isSameColumn = (a, b) => {
+  if (a && b && a.key && a.key === b.key) {
+    return true;
+  }
+  return a === b || tools.shallowequal(a, b);
+};
+function useFilterAndSort(props, updatedDatas, emit) {
+  const currentSortColumn = vue.ref(null);
+  const currentSortOrder = vue.ref(null);
+  const currentFilters = vue.ref(null);
+  const paginationOptions = vue.reactive({});
+  const sortDirections = ["ascend", "descend"];
+  const getDefaultSort = () => {
+    const rst = tools.flatFilter(props.columns, (column) => {
+      return !!column.sortOrder && !column.children;
+    });
+    if (rst.length > 0) {
+      currentSortColumn.value = rst[0];
+      currentSortOrder.value = rst[0].sortOrder || null;
+    }
+  };
+  const getDefaultFilters = () => {
+    const rst = {};
+    let index = 0;
+    tools.treeMap(props.columns, (column) => {
+      const colKey = utils.getColumnKey(column, index);
+      index += 1;
+      if (column.filteredValue !== void 0 && !column.children) {
+        rst[colKey] = column.filteredValue;
+      }
+    });
+    currentFilters.value = rst;
+  };
+  const restSortColumn = () => {
+    currentSortColumn.value = null;
+    currentSortOrder.value = null;
+    currentFilters.value = null;
+  };
+  vue.watch(
+    vue.computed(() => props.columns),
+    () => {
+      restSortColumn();
+      getDefaultSort();
+      getDefaultFilters();
+    },
+    { immediate: true }
+  );
+  const hasSorters = (column) => {
+    return column.sortable && !column.children;
+  };
+  const isSortColumn = (column) => {
+    if (!column || !currentSortColumn.value) {
+      return false;
+    }
+    return isSameColumn(column, currentSortColumn.value);
+  };
+  const isAscend = (column) => {
+    return isSortColumn(column) && currentSortOrder.value === "ascend";
+  };
+  const isDescend = (column) => {
+    return isSortColumn(column) && currentSortOrder.value === "descend";
+  };
+  const getSortDirections = (column) => {
+    return column.sortDirections || sortDirections;
+  };
+  const hasAscend = (column) => {
+    return getSortDirections(column).indexOf("ascend") !== -1;
+  };
+  const hasDescend = (column) => {
+    return getSortDirections(column).indexOf("descend") !== -1;
+  };
+  const toggleSortOrder = (column) => {
+    const directions = column.sortDirections || sortDirections;
+    let newSortOrder;
+    if (isSortColumn(column) && currentSortOrder.value !== null) {
+      const index = directions.indexOf(currentSortOrder.value) + 1;
+      newSortOrder = index === directions.length ? null : directions[index];
+    } else {
+      newSortOrder = directions[0];
+    }
+    currentSortOrder.value = newSortOrder;
+    currentSortColumn.value = column;
+    emit("change", paginationOptions, { column: currentSortColumn.value, order: currentSortOrder.value }, currentFilters.value);
+  };
+  const getSorterFn = () => {
+    const sortOrder = currentSortOrder.value;
+    const sortColumn = currentSortColumn.value;
+    if (!sortOrder || !sortColumn || sortColumn.sortable === "custom") {
+      return;
+    }
+    return (a, b) => {
+      if (sortColumn.sortFn) {
+        const rst = sortColumn.sortFn(a.dataRef, b.dataRef);
+        return sortOrder === "descend" ? -rst : rst;
+      }
+      const key = sortColumn.dataIndex || sortColumn.key;
+      if (sortOrder === "ascend") {
+        return a.dataRef[key] > b.dataRef[key] ? 1 : -1;
+      }
+      return a.dataRef[key] < b.dataRef[key] ? 1 : -1;
+    };
+  };
+  const hasFilters = (column) => {
+    return column.filterable && !column.children;
+  };
+  const setColumnFilter = (column, selectedKeys) => {
+    const colKey = utils.getColumnKey(column);
+    currentFilters.value = {
+      ...currentFilters.value,
+      [colKey]: selectedKeys
+    };
+    emit("change", paginationOptions, { column: currentSortColumn.value, order: currentSortOrder.value }, currentFilters.value);
+  };
+  const hasAction = (column) => {
+    return hasSorters(column) || hasFilters(column);
+  };
+  const findColumn = (key) => {
+    let column;
+    let index = 0;
+    let find = false;
+    tools.treeMap(props.columns, (node) => {
+      if (find) {
+        return;
+      }
+      const colKey = utils.getColumnKey(node, index);
+      index += 1;
+      if (colKey === key) {
+        column = node;
+        find = true;
+      }
+    });
+    return column;
+  };
+  const filteredDatas = vue.computed(() => {
+    let data = updatedDatas.value || [];
+    const sorterFn = getSorterFn();
+    if (sorterFn) {
+      data = tools.treeSort([...data], sorterFn);
+    }
+    const filters = currentFilters.value;
+    if (filters) {
+      Object.keys(filters).forEach((colKey) => {
+        const column = findColumn(colKey);
+        if (!column) {
+          return;
+        }
+        const values = filters[colKey] || [];
+        if (values.length === 0) {
+          return;
+        }
+        const { filterFn } = column;
+        if (filterFn) {
+          data = data.filter((row) => {
+            return values.some((v) => filterFn(v, row.dataRef));
+          });
+        }
+      });
+    }
+    return data;
+  });
+  vue.watch(
+    () => props.pagination,
+    () => {
+      const { position, align, pageSize, current, ...restProps } = props.pagination || {};
+      paginationOptions.pageSize = pageSize || 10;
+      paginationOptions.current = current || 1;
+      Object.keys(restProps).forEach((key) => {
+        paginationOptions[key] = restProps[key];
+      });
+    },
+    { immediate: true, deep: true }
+  );
+  const getPageTotal = (total) => {
+    const { current, pageSize } = paginationOptions;
+    if ((current - 1) * pageSize >= total) {
+      return Math.floor((total - 1) / pageSize) + 1;
+    }
+    return current;
+  };
+  const computedPageTotal = vue.computed(() => {
+    return paginationOptions.total || filteredDatas.value.length;
+  });
+  const currentDatas = vue.computed(() => {
+    if (props.showPagination) {
+      const { pageSize } = paginationOptions;
+      const current = getPageTotal(computedPageTotal.value);
+      if (filteredDatas.value.length > pageSize) {
+        return filteredDatas.value.slice((current - 1) * pageSize, current * pageSize);
+      }
+    }
+    return filteredDatas.value;
+  });
+  const handlePageChange = (page) => {
+    paginationOptions.current = page;
+    emit("change", paginationOptions, { column: currentSortColumn.value, order: currentSortOrder.value }, currentFilters.value);
+  };
+  const handlePageSizeChange = (size, current) => {
+    paginationOptions.pageSize = size;
+    paginationOptions.current = current;
+    emit("change", paginationOptions, { column: currentSortColumn.value, order: currentSortOrder.value }, currentFilters.value);
+  };
+  return {
+    hasAction,
+    hasSorters,
+    hasFilters,
+    isSortColumn,
+    isAscend,
+    isDescend,
+    hasAscend,
+    hasDescend,
+    toggleSortOrder,
+    setColumnFilter,
+    currentDatas,
+    paginationOptions,
+    computedPageTotal,
+    handlePageChange,
+    handlePageSizeChange
+  };
+}
+
+exports["default"] = useFilterAndSort;
+//# sourceMappingURL=useFilterSortPage.js.map

package/lib/components/Table/hooks/useFilterSortPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFilterSortPage.js","sources":["../../../../../src/components/Table/hooks/useFilterSortPage.ts"],"sourcesContent":["import { computed, ref, watch, reactive } from 'vue';\nimport type { ComputedRef } from 'vue';\nimport { flatFilter, shallowequal, treeMap, treeSort } from '../../../utils/tools';\nimport type { PaginationProps } from '../../Pagination/Pagination.type';\nimport type { ColumnSortOrder, InnerColumn, InnerDataItem, TableColumn, TableEmit, TableProps } from '../Table.type';\nimport { getColumnKey } from '../utils';\n\nconst isSameColumn = (a: any, b: any) => {\n  if (a && b && a.key && a.key === b.key) {\n    return true;\n  }\n  return a === b || shallowequal(a, b);\n};\n\nexport default function useFilterAndSort(props: TableProps, updatedDatas: ComputedRef<InnerDataItem[]>, emit: TableEmit) {\n  const currentSortColumn = ref<TableColumn | null>(null);\n  const currentSortOrder = ref<ColumnSortOrder | null>(null);\n  const currentFilters = ref<Record<string, (string | number)[]> | null>(null);\n  const paginationOptions = reactive({} as PaginationProps);\n  const sortDirections = ['ascend', 'descend'] as ColumnSortOrder[];\n  const getDefaultSort = () => {\n    const rst = flatFilter(props.columns, (column) => {\n      return !!column.sortOrder && !column.children;\n    });\n    if (rst.length > 0) {\n      currentSortColumn.value = rst[0];\n      currentSortOrder.value = rst[0].sortOrder || null;\n    }\n  };\n\n  const getDefaultFilters = () => {\n    const rst = {} as Record<string, any>;\n    let index = 0;\n    treeMap(props.columns, (column) => {\n      const colKey = getColumnKey(column, index);\n      index += 1;\n      if (column.filteredValue !== undefined && !column.children) {\n        rst[colKey] = column.filteredValue;\n      }\n    });\n    currentFilters.value = rst;\n  };\n\n  const restSortColumn = () => {\n    currentSortColumn.value = null;\n    currentSortOrder.value = null;\n    currentFilters.value = null;\n  };\n\n  watch(\n    computed(() => props.columns),\n    () => {\n      restSortColumn();\n      getDefaultSort();\n      getDefaultFilters();\n    },\n    { immediate: true }\n  );\n\n  // =========== sort ============\n  // #region\n  const hasSorters = (column: InnerColumn) => {\n    return column.sortable && !column.children;\n  };\n\n  const isSortColumn = (column: InnerColumn) => {\n    if (!column || !currentSortColumn.value) {\n      return false;\n    }\n    return isSameColumn(column, currentSortColumn.value);\n  };\n\n  const isAscend = (column: InnerColumn) => {\n    return isSortColumn(column) && currentSortOrder.value === 'ascend';\n  };\n\n  const isDescend = (column: InnerColumn) => {\n    return isSortColumn(column) && currentSortOrder.value === 'descend';\n  };\n\n  const getSortDirections = (column: InnerColumn) => {\n    return column.sortDirections || sortDirections;\n  };\n\n  const hasAscend = (column: InnerColumn) => {\n    return getSortDirections(column).indexOf('ascend') !== -1;\n  };\n\n  const hasDescend = (column: InnerColumn) => {\n    return getSortDirections(column).indexOf('descend') !== -1;\n  };\n\n  const toggleSortOrder = (column: InnerColumn) => {\n    const directions = column.sortDirections || sortDirections;\n    let newSortOrder;\n    if (isSortColumn(column) && currentSortOrder.value !== null) {\n      const index = directions.indexOf(currentSortOrder.value) + 1;\n      newSortOrder = index === directions.length ? null : directions[index];\n    } else {\n      newSortOrder = directions[0];\n    }\n    currentSortOrder.value = newSortOrder;\n    currentSortColumn.value = column;\n\n    emit('change', paginationOptions, { column: currentSortColumn.value, order: currentSortOrder.value }, currentFilters.value);\n  };\n\n  const getSorterFn = () => {\n    const sortOrder = currentSortOrder.value;\n    const sortColumn = currentSortColumn.value;\n    if (!sortOrder || !sortColumn || sortColumn.sortable === 'custom') {\n      return;\n    }\n    return (a: any, b: any) => {\n      if (sortColumn.sortFn) {\n        const rst = sortColumn.sortFn(a.dataRef, b.dataRef);\n        return sortOrder === 'descend' ? -rst : rst;\n      }\n      const key = sortColumn.dataIndex || sortColumn.key;\n      if (sortOrder === 'ascend') {\n        return a.dataRef[key] > b.dataRef[key] ? 1 : -1;\n      }\n      return a.dataRef[key] < b.dataRef[key] ? 1 : -1;\n    };\n  };\n\n  // #endregion\n\n  // ================= filter ======================\n  // #region\n\n  const hasFilters = (column: InnerColumn) => {\n    return column.filterable && !column.children;\n  };\n\n  const setColumnFilter = (column: InnerColumn, selectedKeys: (string | number)[]) => {\n    const colKey = getColumnKey(column);\n    currentFilters.value = {\n      ...currentFilters.value,\n      [colKey]: selectedKeys\n    };\n    emit('change', paginationOptions, { column: currentSortColumn.value, order: currentSortOrder.value }, currentFilters.value);\n  };\n\n  // #endregion\n\n  const hasAction = (column: InnerColumn) => {\n    return hasSorters(column) || hasFilters(column);\n  };\n\n  const findColumn = (key: string) => {\n    let column: TableColumn | undefined;\n    let index = 0;\n    let find = false;\n    treeMap<TableColumn, void>(props.columns, (node: TableColumn) => {\n      if (find) {\n        return;\n      }\n      const colKey = getColumnKey(node, index);\n      index += 1;\n      if (colKey === key) {\n        column = node;\n        find = true;\n      }\n    });\n    return column;\n  };\n\n  const filteredDatas = computed(() => {\n    let data = updatedDatas.value || [];\n    const sorterFn = getSorterFn();\n\n    if (sorterFn) {\n      data = treeSort([...data], sorterFn);\n    }\n\n    const filters = currentFilters.value;\n    if (filters) {\n      Object.keys(filters).forEach((colKey) => {\n        const column = findColumn(colKey);\n        if (!column) {\n          return;\n        }\n        const values = filters[colKey] || [];\n\n        if (values.length === 0) {\n          return;\n        }\n        const { filterFn } = column;\n        if (filterFn) {\n          data = data.filter((row) => {\n            return values.some((v) => filterFn(v, row.dataRef));\n          });\n        }\n      });\n    }\n    return data;\n  });\n\n  // ================= pagination ==================\n\n  watch(\n    () => props.pagination,\n    () => {\n      // eslint-disable-next-line @typescript-eslint/no-unused-vars\n      const { position, align, pageSize, current, ...restProps } = props.pagination || {};\n      paginationOptions.pageSize = pageSize || 10;\n      paginationOptions.current = current || 1;\n\n      Object.keys(restProps).forEach((key) => {\n        (paginationOptions as any)[key] = (restProps as any)[key];\n      });\n    },\n    { immediate: true, deep: true }\n  );\n\n  const getPageTotal = (total: number) => {\n    const { current, pageSize } = paginationOptions;\n    if ((current - 1) * pageSize >= total) {\n      return Math.floor((total - 1) / pageSize) + 1;\n    }\n    return current;\n  };\n\n  const computedPageTotal = computed(() => {\n    return paginationOptions.total || filteredDatas.value.length;\n  });\n\n  const currentDatas = computed(() => {\n    if (props.showPagination) {\n      const { pageSize } = paginationOptions;\n      const current = getPageTotal(computedPageTotal.value);\n\n      if (filteredDatas.value.length > pageSize) {\n        return filteredDatas.value.slice((current - 1) * pageSize, current * pageSize);\n      }\n    }\n    return filteredDatas.value;\n  });\n\n  const handlePageChange = (page: number) => {\n    paginationOptions.current = page;\n    emit('change', paginationOptions, { column: currentSortColumn.value, order: currentSortOrder.value }, currentFilters.value);\n  };\n\n  const handlePageSizeChange = (size: number, current: number) => {\n    paginationOptions.pageSize = size;\n    paginationOptions.current = current;\n    emit('change', paginationOptions, { column: currentSortColumn.value, order: currentSortOrder.value }, currentFilters.value);\n  };\n\n  return {\n    hasAction,\n    hasSorters,\n    hasFilters,\n    isSortColumn,\n    isAscend,\n    isDescend,\n    hasAscend,\n    hasDescend,\n    toggleSortOrder,\n    setColumnFilter,\n    currentDatas,\n    paginationOptions,\n    computedPageTotal,\n    handlePageChange,\n    handlePageSizeChange\n  };\n}\n"],"names":["shallowequal","ref","reactive","flatFilter","getColumnKey","computed","treeSort"],"mappings":"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"}

package/lib/components/Table/hooks/useSelection.d.ts

@@ -0,0 +1,6 @@
+import type { ComputedRef, Ref } from 'vue';
+import type { InnerColumn, InnerDataItem, TableProps } from '../Table.type';
+import type { TableLocal } from '../../locale/default';
+export default function useSelection(props: TableProps, updatedDatas: Ref<InnerDataItem[]>, currentDatas: Ref<InnerDataItem[]>, prefixCls: ComputedRef<string>, locale: ComputedRef<TableLocal>): {
+    selectionColumn: ComputedRef<InnerColumn>;
+};