yuang-framework-ui-pc 1.1.45 → 1.1.47

package/lib/ele-data-table/types.d.ts

@@ -0,0 +1,253 @@
+import type { Sort } from 'element-plus/es/components/table';
+import type { ElTableProps, ElColumnProps, ElTableInstance, ElEmptyProps } from '../ele-app/el';
+import type { EleTooltipProps } from '../ele-app/plus';
+import type { UserComponent } from '../ele-app/types';
+
+/**
+ * 数据唯一键
+ */
+export type DataKey = string | number;
+
+/**
+ * 数据
+ */
+export interface DataItem extends Record<keyof any, any> {
+  /** 是否为模拟数据, 用于保留不存在的选中数据 */
+  _isMock?: boolean;
+}
+
+/**
+ * 原始列属性
+ */
+export type TableColumn = Partial<ElColumnProps>;
+
+/**
+ * 列属性
+ */
+export interface Column extends Omit<TableColumn, 'filterPlacement'> {
+  filterPlacement?: EleTooltipProps['placement'];
+  /** 唯一标识 */
+  uid?: string;
+  /** 插槽名称 */
+  slot?: string;
+  /** 表头插槽名称 */
+  headerSlot?: string;
+  /** 自定义筛选图标 */
+  filterIcon?: UserComponent;
+  /** 是否隐藏 */
+  hideInTable?: boolean;
+  /** 是否不显示在列配置中 */
+  hideInSetting?: boolean;
+  /** 是否不显示在导出列中 */
+  hideInExport?: boolean;
+  /** 是否不显示在打印列中 */
+  hideInPrint?: boolean;
+  /** 打印插槽名称 */
+  printSlot?: string;
+  /** 打印表头插槽名称 */
+  printHeaderSlot?: string;
+  /** 子级 */
+  children?: Columns;
+}
+
+/**
+ * 列属性
+ */
+export type Columns = Column[];
+
+/**
+ * 排序方式
+ */
+export interface Sorter extends Partial<Sort> {
+  /** 列配置 */
+  column?: Column;
+}
+
+/**
+ * 筛选条件
+ */
+export type Filter = Record<string, FilterValue>;
+
+/**
+ * 筛选值
+ */
+export type FilterValue = string[] | undefined;
+
+/**
+ * 排序方式值
+ */
+export type OrderValue = Exclude<Sorter['order'], undefined>;
+
+/**
+ * 表格状态
+ */
+export interface TableState {
+  /** 当前排序参数 */
+  sorter?: Sorter;
+  /** 当前筛选参数 */
+  filter?: Filter;
+  /** 单选选中值 */
+  key: DataKey | null;
+  /** 单选选中数据 */
+  row?: DataItem;
+  /** 单选上次选中数据 */
+  oldRow?: DataItem;
+  /** 多选选中值 */
+  checkedKeys: DataKey[];
+  /** 多选选中数据 */
+  checked: DataItem[];
+  /** 多选选中是否保留不存在的数据 */
+  reserveChecked: boolean;
+}
+
+/**
+ * 多选时行点击选中
+ */
+export type RowClickChecked = boolean | 'smart';
+
+/**
+ * 表格空组件属性
+ */
+export type TableEmptyProps = boolean | ElEmptyProps;
+
+/**
+ * 获取表格实例
+ */
+export type GetInstance = () => ElTableInstance | undefined | null;
+
+/**
+ * 表格实例方法
+ */
+export interface TableMethods {
+  clearSelection: () => void;
+  getSelectionRows: () => DataItem[] | undefined;
+  toggleRowSelection: (row: DataItem, selected?: boolean) => void;
+  toggleAllSelection: () => void;
+  toggleRowExpansion: (row: DataItem, expanded?: boolean) => void;
+  setCurrentRow: (row?: DataItem | null) => void;
+  clearSort: () => void;
+  clearFilter: (columnKeys?: string[]) => void;
+  doLayout: () => void;
+  sort: (prop: string, order: string) => void;
+  scrollTo: (options: number | ScrollToOptions, yCoord?: number) => void;
+  setScrollTop: (top?: number) => void;
+  setScrollLeft: (left?: number) => void;
+  /** 设置单选选中值 */
+  setCurrentRowKey: (key?: DataKey | null) => void;
+  /** 获取单选选中数据 */
+  getCurrentRow: () => DataItem | undefined;
+  /** 设置多选选中数据 */
+  setSelectedRows: (rows?: DataItem[]) => void;
+  /** 设置多选选中值 */
+  setSelectedRowKeys: (keys?: DataKey[], rows?: DataItem[]) => void;
+  /** 切换所有行展开状态 */
+  toggleRowExpansionAll: (expanded?: boolean) => void;
+  /** 更新单选和多选选中 */
+  updateSelectedAndChecked: () => void;
+
+  /** 更新父节点下面的children节点列表 */
+  updateKeyChildren: (key?: DataKey | null, rows?: DataItem[]) => void;
+}
+
+/**
+ * 表格尺寸
+ */
+export type TableSize = ElTableProps<DataItem>['size'];
+
+/**
+ * 树表格懒加载方法
+ */
+export type TableLoad = ElTableProps<DataItem>['load'];
+
+/**
+ * 树表格懒加载回调
+ */
+export type ResolveFunction = (data: DataItem[]) => void;
+
+/**
+ * 嵌套数据配置项
+ */
+export interface TreeProps {
+  hasChildren?: string;
+  children?: string;
+}
+
+/**
+ * 溢出提示组件属性
+ */
+export type ShowOverflowTooltip = Column['showOverflowTooltip'];
+
+/**
+ * 溢出提示组件主题
+ */
+export type TooltipEffect = ElTableProps<DataItem>['tooltipEffect'];
+
+/**
+ * 溢出提示组件全局配置
+ */
+export type TooltipOptions = ElTableProps<DataItem>['tooltipOptions'];
+
+/**
+ * 单元格类名自定义
+ */
+export type CellClass = ElTableProps<DataItem>['cellClassName'];
+
+/**
+ * 单元格样式自定义
+ */
+export type CellStyle = ElTableProps<DataItem>['cellStyle'];
+
+/**
+ * 行类名自定义
+ */
+export type RowClass = ElTableProps<DataItem>['rowClassName'];
+
+/**
+ * 行样式自定义
+ */
+export type RowStyle = ElTableProps<DataItem>['rowStyle'];
+
+/**
+ * 表头单元格类名自定义
+ */
+export type HeaderCellClass = ElTableProps<DataItem>['headerCellClassName'];
+
+/**
+ * 表头单元格样式自定义
+ */
+export type HeaderCellStyle = ElTableProps<DataItem>['headerCellStyle'];
+
+/**
+ * 表头行类名自定义
+ */
+export type HeaderRowClass = ElTableProps<DataItem>['headerRowClassName'];
+
+/**
+ * 表头行样式自定义
+ */
+export type HeaderRowStyle = ElTableProps<DataItem>['headerRowStyle'];
+
+/**
+ * 单元格合并方法
+ */
+export type SpanMethod = ElTableProps<DataItem>['spanMethod'];
+
+/**
+ * 行数据唯一值的字段名
+ */
+export type RowKey = ElTableProps<DataItem>['rowKey'];
+
+/**
+ * 表尾合计计算方法
+ */
+export type SummaryMethod = ElTableProps<DataItem>['summaryMethod'];
+
+/**
+ * 控制行是否可选中的方法
+ */
+export type RowSelectable = Column['selectable'];
+
+/**
+ * 序号列起始索引
+ */
+export type ColumnIndex = Column['index'];

package/lib/ele-data-table/util.cjs

@@ -0,0 +1,395 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("vue");
+const core = require("../utils/core");
+const util = require("../ele-pro-layout/util");
+function getRowClass(rowClass, param) {
+  if (rowClass != null) {
+    if (typeof rowClass === "function") {
+      return rowClass(param);
+    } else if (typeof rowClass === "string" && rowClass) {
+      return rowClass;
+    }
+  }
+}
+function getBodyRowClass(rowClass, param) {
+  const classes = ["ele-table-tr", "ele-table-tr-" + param.row.id];
+  const custom = getRowClass(rowClass, param);
+  if (custom != null) {
+    classes.push(custom);
+  }
+  return classes.join(" ");
+}
+function getHeadRowClass(rowClass, param, ellipsis) {
+  const classes = ["ele-table-head-tr"];
+  if (ellipsis) {
+    classes.push("is-ellipsis");
+  }
+  const custom = getRowClass(rowClass, param);
+  if (custom != null) {
+    classes.push(custom);
+  }
+  return classes.join(" ");
+}
+function getGlobalTooltipProps(showOverflowTooltip, tooltipEffect, tooltipOptions) {
+  if (!showOverflowTooltip) {
+    return false;
+  }
+  return {
+    effect: tooltipEffect,
+    ...tooltipOptions || {},
+    ...showOverflowTooltip === true ? {} : showOverflowTooltip
+  };
+}
+function mergeTooltipProps(props, globalProps) {
+  if (props === false || props == null && !globalProps) {
+    return false;
+  }
+  return {
+    ...!globalProps || globalProps === true ? {} : globalProps,
+    ...!props || props === true ? {} : props
+  };
+}
+function getTooltipProps(props, globalProps) {
+  const opt = mergeTooltipProps(props, globalProps);
+  if (!opt) {
+    return false;
+  }
+  const classes = ["ele-popper", "ele-tooltip", "ele-table-tooltip"];
+  if (opt.popperClass) {
+    classes.push(opt.popperClass);
+  }
+  opt.popperClass = classes.join(" ");
+  return opt;
+}
+function toggleRowSelectionPro(tableRef, row, selected) {
+  var _a, _b;
+  if (tableRef == null) {
+    return;
+  }
+  const store = (_a = vue.unref(tableRef)) == null ? void 0 : _a.store;
+  const selection = vue.unref((_b = store == null ? void 0 : store.states) == null ? void 0 : _b.selection);
+  const index = selection.indexOf(row);
+  const included = index !== -1;
+  if (selected && !included) {
+    selection.push(row);
+  } else if (!selected && included) {
+    selection.splice(index, 1);
+  }
+  store.updateAllSelected();
+}
+function getTableFilter(tableRef) {
+  var _a, _b;
+  const states = (_b = (_a = vue.unref(tableRef)) == null ? void 0 : _a.store) == null ? void 0 : _b.states;
+  const columns = vue.unref(states == null ? void 0 : states.columns);
+  const filters = vue.unref(states == null ? void 0 : states.filters);
+  if (!filters || !columns) {
+    return;
+  }
+  const keys = Object.keys(filters);
+  const filter = {};
+  columns.forEach((col) => {
+    if (keys.includes(col.id)) {
+      filter[col.columnKey || col.id] = filters[col.id];
+    }
+  });
+  return filter;
+}
+function getStateCols(cols, sorter, filter) {
+  if (!sorter && !filter) {
+    return { cols };
+  }
+  const filterKeys = filter == null ? [] : Object.keys(filter);
+  const hasSorter = sorter != null && sorter.prop != null && sorter.prop != "";
+  let hasSortCol = false;
+  const result = core.mapTree(cols, (col) => {
+    if (hasSorter && col.prop === sorter.prop) {
+      hasSortCol = true;
+    }
+    const filterProp = col.columnKey ?? col.prop;
+    const flag = filterProp ? filterKeys.includes(filterProp) : false;
+    const filtered = flag && filter ? filter[filterProp] : void 0;
+    return { ...col, filteredValue: filtered ?? col.filteredValue };
+  });
+  return { cols: result, sorter: hasSorter && hasSortCol ? sorter : void 0 };
+}
+function getSelectableFunction(columns) {
+  const col = core.findTree(columns, (c) => c.type === "selection");
+  if (col != null) {
+    return typeof col.selectable === "function" ? col.selectable : null;
+  }
+}
+function isDisableRow(row, index, columns) {
+  const selectable = getSelectableFunction(columns);
+  if (typeof selectable === "undefined") {
+    return true;
+  }
+  return !(selectable == null || selectable(row, index) === true);
+}
+function isReserveChecked(columns) {
+  let isReserve = false;
+  core.eachTree(columns, (col) => {
+    if (col.type === "selection") {
+      isReserve = !!col.reserveSelection;
+      return false;
+    }
+  });
+  return isReserve;
+}
+function getColFixedNumber(fixed) {
+  if (fixed === true || fixed === "left") {
+    return 0;
+  }
+  if (fixed === "right") {
+    return 2;
+  }
+  return 1;
+}
+function getCellClass(col) {
+  const classes = [];
+  if (col.type === "index") {
+    classes.push("is-index");
+  }
+  if (col.className) {
+    classes.push(col.className);
+  }
+  return classes.length ? classes.join(" ") : void 0;
+}
+function getFilterPopperClass(filterClassName) {
+  const classes = ["ele-table-filter-popper"];
+  if (filterClassName) {
+    classes.push(filterClassName);
+  }
+  return classes.join(" ");
+}
+function getRowKeys(rows, rowKey) {
+  const keys = [];
+  if (rows) {
+    rows.forEach((row) => {
+      const key = core.getValue(row, rowKey);
+      if (key != null) {
+        keys.push(key);
+      }
+    });
+  }
+  return keys;
+}
+function getRowByKey(key, data, rowKey, childrenField) {
+  return core.findTree(data, (d) => core.getValue(d, rowKey) === key, childrenField);
+}
+function getKeysAndList(data, rowKey, childrenField) {
+  const keys = [];
+  const list = [];
+  core.eachTree(
+    data,
+    (d) => {
+      keys.push(core.getValue(d, rowKey));
+      list.push(d);
+    },
+    childrenField
+  );
+  return [keys, list];
+}
+function valueIsChanged(value1, value2) {
+  return !(value1 == null && value2 == null || value1 === value2);
+}
+function arrayIsChanged(list1, list2) {
+  const isEmpty1 = list1 == null || !list1.length;
+  const isEmpty2 = list2 == null || !list2.length;
+  if (isEmpty1 && isEmpty2) {
+    return false;
+  }
+  if (isEmpty1 !== isEmpty2) {
+    return true;
+  }
+  if (list1.length !== list2.length) {
+    return true;
+  }
+  return list1.some((k) => !list2.includes(k));
+}
+function useStickyHeader() {
+  const layoutState = util.useLayoutState();
+  const isLayoutFixedHead = vue.computed(() => layoutState.fixedHeader);
+  const isLayoutMaximized = vue.computed(
+    () => layoutState.maximized && layoutState.maximized !== "expanded"
+  );
+  return { isLayoutFixedHead, isLayoutMaximized };
+}
+function useMethods(getInstance) {
+  const methods = {
+    clearSelection: () => {
+      const ins = getInstance();
+      ins && ins.clearSelection();
+    },
+    getSelectionRows: () => {
+      const ins = getInstance();
+      if (ins) {
+        return ins.getSelectionRows();
+      }
+    },
+    toggleRowSelection: (row, selected) => {
+      const ins = getInstance();
+      ins && ins.toggleRowSelection(row, selected);
+    },
+    toggleAllSelection: () => {
+      const ins = getInstance();
+      ins && ins.toggleAllSelection();
+    },
+    toggleRowExpansion: (row, expanded) => {
+      const ins = getInstance();
+      ins && ins.toggleRowExpansion(row, expanded);
+    },
+    setCurrentRow: (row) => {
+      const ins = getInstance();
+      ins && ins.setCurrentRow(row);
+    },
+    clearSort: () => {
+      const ins = getInstance();
+      ins && ins.clearSort();
+    },
+    clearFilter: (columnKeys) => {
+      const ins = getInstance();
+      ins && ins.clearFilter(columnKeys);
+    },
+    doLayout: () => {
+      const ins = getInstance();
+      ins && ins.doLayout();
+    },
+    sort: (prop, order) => {
+      const ins = getInstance();
+      ins && ins.sort(prop, order);
+    },
+    scrollTo: (options, yCoord) => {
+      const ins = getInstance();
+      ins && ins.scrollTo(options, yCoord);
+    },
+    setScrollTop: (top) => {
+      const ins = getInstance();
+      ins && ins.setScrollTop(top);
+    },
+    setScrollLeft: (left) => {
+      const ins = getInstance();
+      ins && ins.setScrollLeft(left);
+    },
+    /** 新增的实例方法 */
+    setCurrentRowKey: (key) => {
+      const ins = getInstance();
+      ins && ins.setCurrentRowKey(key);
+    },
+    getCurrentRow: () => {
+      const ins = getInstance();
+      if (ins) {
+        return ins.getCurrentRow();
+      }
+    },
+    setSelectedRows: (rows) => {
+      const ins = getInstance();
+      ins && ins.setSelectedRows(rows);
+    },
+    setSelectedRowKeys: (keys, rows) => {
+      const ins = getInstance();
+      ins && ins.setSelectedRowKeys(keys, rows);
+    },
+    toggleRowExpansionAll: (expanded) => {
+      const ins = getInstance();
+      ins && ins.toggleRowExpansionAll(expanded);
+    },
+    updateSelectedAndChecked: () => {
+      const ins = getInstance();
+      ins && ins.updateSelectedAndChecked();
+    },
+    updateKeyChildren: (key, rows) => {
+      const ins = getInstance();
+      ins && ins.updateKeyChildren(key, rows);
+    }
+  };
+  return methods;
+}
+function useEmits(emit) {
+  return {
+    onSelect: (selection, row) => {
+      emit("select", selection, row);
+    },
+    onSelectAll: (selection) => {
+      emit("selectAll", selection);
+    },
+    onCellMouseEnter: (row, column, cell, event) => {
+      emit("cellMouseEnter", row, column, cell, event);
+    },
+    onCellMouseLeave: (row, column, cell, event) => {
+      emit("cellMouseLeave", row, column, cell, event);
+    },
+    onCellClick: (row, column, cell, event) => {
+      emit("cellClick", row, column, cell, event);
+    },
+    onCellDblclick: (row, column, cell, event) => {
+      emit("cellDblclick", row, column, cell, event);
+    },
+    onCellContextmenu: (row, column, cell, event) => {
+      emit("cellContextmenu", row, column, cell, event);
+    },
+    onRowClick: (row, column, event) => {
+      emit("rowClick", row, column, event);
+    },
+    onRowContextmenu: (row, column, event) => {
+      emit("rowContextmenu", row, column, event);
+    },
+    onRowDblclick: (row, column, event) => {
+      emit("rowDblclick", row, column, event);
+    },
+    onHeaderClick: (column, event) => {
+      emit("headerClick", column, event);
+    },
+    onHeaderContextmenu: (column, event) => {
+      emit("headerContextmenu", column, event);
+    },
+    onHeaderDragend: (newWidth, oldWidth, column, event) => {
+      emit("headerDragend", newWidth, oldWidth, column, event);
+    },
+    onExpandChange: (row, expanded) => {
+      emit("expandChange", row, expanded);
+    },
+    onSelectionChange: (selection) => {
+      emit("selectionChange", selection);
+    },
+    onSortChange: (sorter) => {
+      emit("sortChange", sorter);
+    },
+    onFilterChange: (filter) => {
+      emit("filterChange", filter);
+    },
+    onCurrentChange: (currentRow, oldCurrentRow) => {
+      emit("currentChange", currentRow, oldCurrentRow);
+    },
+    /** 新增的事件 */
+    "onUpdate:currentRowKey": (currentRowKey) => {
+      emit("update:currentRowKey", currentRowKey);
+    },
+    "onUpdate:selectedRowKeys": (selectedRowKeys) => {
+      emit("update:selectedRowKeys", selectedRowKeys);
+    }
+  };
+}
+exports.arrayIsChanged = arrayIsChanged;
+exports.getBodyRowClass = getBodyRowClass;
+exports.getCellClass = getCellClass;
+exports.getColFixedNumber = getColFixedNumber;
+exports.getFilterPopperClass = getFilterPopperClass;
+exports.getGlobalTooltipProps = getGlobalTooltipProps;
+exports.getHeadRowClass = getHeadRowClass;
+exports.getKeysAndList = getKeysAndList;
+exports.getRowByKey = getRowByKey;
+exports.getRowClass = getRowClass;
+exports.getRowKeys = getRowKeys;
+exports.getSelectableFunction = getSelectableFunction;
+exports.getStateCols = getStateCols;
+exports.getTableFilter = getTableFilter;
+exports.getTooltipProps = getTooltipProps;
+exports.isDisableRow = isDisableRow;
+exports.isReserveChecked = isReserveChecked;
+exports.mergeTooltipProps = mergeTooltipProps;
+exports.toggleRowSelectionPro = toggleRowSelectionPro;
+exports.useEmits = useEmits;
+exports.useMethods = useMethods;
+exports.useStickyHeader = useStickyHeader;
+exports.valueIsChanged = valueIsChanged;