ele-admin-plus 1.1.4 → 1.1.5-beta.2

package/lib/ele-virtual-table/components/header-cell.js

@@ -0,0 +1,260 @@
+"use strict";
+const vue = require("vue");
+const util = require("../util");
+const CellCheckbox = require("./cell-checkbox");
+const CellFilter = require("./cell-filter");
+const _sfc_main = vue.defineComponent({
+  name: "HeaderCell",
+  components: { CellCheckbox, CellFilter, CellRender: util.CellRender },
+  props: {
+    /** 当前列配置 */
+    column: Object,
+    /** 当前列索引 */
+    columnIndex: Number,
+    /** 当前行索引 */
+    headerIndex: Number,
+    /** 当前列宽 */
+    colSize: Object,
+    /** 表格排序状态 */
+    sortBy: Object,
+    /** 表格当前筛选值 */
+    filterValue: Object,
+    /** 表格是否是全选状态 */
+    isCheckAll: Boolean,
+    /** 表格是否是半选状态 */
+    isIndeterminate: Boolean,
+    /** 是否禁用表头选择框 */
+    disabledCheckbox: Boolean,
+    /** 表格尺寸 */
+    tableSize: String,
+    /** 单元格类名自定义 */
+    headerCellClass: [String, Function],
+    /** 单元格样式自定义 */
+    headerCellStyle: [Object, Function],
+    /** 表头单元格是否溢出省略 */
+    headerEllipsis: Boolean,
+    /** 表格行高 */
+    rowHeight: Number
+  },
+  emits: {
+    /** 多选框选中改变事件 */
+    checkedChange: (_checked) => true,
+    /** 列筛选改变事件 */
+    filterChange: (_params) => true,
+    /** 点击事件 */
+    click: (_col, _e) => true,
+    /** 右键事件 */
+    contextmenu: (_col, _e) => true,
+    /** 鼠标移入事件 */
+    mouseenter: (_col, _e) => true
+  },
+  setup(props, { emit, slots }) {
+    const originalCol = vue.computed(() => {
+      return props.column ? props.column.originalCol : void 0;
+    });
+    const cellParam = vue.computed(() => {
+      return {
+        column: originalCol.value,
+        columnIndex: props.columnIndex,
+        rowIndex: props.headerIndex
+      };
+    });
+    const cellClass = vue.computed(() => {
+      const classes = ["el-table-v2__header-cell", "ele-table-td"];
+      if (props.column) {
+        if (!props.column.colspan) {
+          classes.push("is-none");
+        } else if (props.column.colspan > 1) {
+          classes.push("is-multi-cell");
+        }
+        if (!props.column.rowspan) {
+          classes.push("is-placeholder");
+        } else if (props.column.rowspan > 1) {
+          classes.push("is-multi-row");
+        }
+      }
+      const col = originalCol.value;
+      if (col) {
+        const align = col.headerAlign || col.align;
+        if (align) {
+          classes.push("is-align-" + align);
+        }
+        if (col.sortable === true || col.sortable === "custom") {
+          classes.push("is-sortable");
+        }
+        if (props.sortBy != null && util.getColKey(col) === props.sortBy.key) {
+          const sortClass = util.getOrderValue(props.sortBy.order);
+          if (sortClass) {
+            classes.push("is-" + sortClass);
+          }
+        }
+        if (col.filters && col.filters.length && props.filterValue && props.filterValue.length) {
+          classes.push("is-filtered");
+        }
+        if (col.type === "selection") {
+          classes.push("is-selection");
+        }
+        if (col.type === "expand") {
+          classes.push("is-expand");
+        }
+        if (props.headerEllipsis) {
+          classes.push("is-ellipsis");
+        }
+        if (col.fixed === "right") {
+          classes.push("is-fixed-right");
+        } else if (col.fixed === "left" || col.fixed === true) {
+          classes.push("is-fixed-left");
+        }
+        if (props.column) {
+          if (props.column.isFixedLeftLast) {
+            classes.push("is-fixed-left-last");
+          }
+          if (props.column.isFixedRightFirst) {
+            classes.push("is-fixed-right-first");
+          }
+        }
+        if (typeof props.headerCellClass === "function") {
+          const temp = props.headerCellClass(cellParam.value);
+          if (temp) {
+            classes.push(temp);
+          }
+        } else if (props.headerCellClass) {
+          classes.push(props.headerCellClass);
+        }
+        if (col.labelClassName) {
+          classes.push(col.labelClassName);
+        }
+      }
+      return classes.join(" ");
+    });
+    const cellHeight = vue.computed(() => {
+      if (props.rowHeight == null || props.column == null || !props.column.rowspan || props.column.rowspan <= 1) {
+        return;
+      }
+      return props.column.rowspan * props.rowHeight + "px";
+    });
+    const cellStyle = vue.computed(() => {
+      if (!props.colSize) {
+        return;
+      }
+      const { width, fixedLeft, fixedRight } = props.colSize;
+      const userStyle = props.headerCellStyle;
+      const param = cellParam.value;
+      return [
+        {
+          width: width + "px",
+          height: cellHeight.value,
+          left: fixedLeft,
+          right: fixedRight
+        },
+        (typeof userStyle === "function" ? userStyle(param) : userStyle) || {}
+      ];
+    });
+    const cellTitle = vue.computed(() => {
+      return originalCol.value ? originalCol.value.label : void 0;
+    });
+    const renderOpt = vue.computed(() => {
+      const col = originalCol.value;
+      if (col) {
+        const param = { column: col, $index: props.columnIndex };
+        if (col.headerSlot) {
+          const headerSlot = slots[col.headerSlot];
+          if (typeof headerSlot === "function") {
+            return { render: headerSlot, params: [param] };
+          }
+        }
+        if (typeof col.renderHeader === "function") {
+          return { render: col.renderHeader, params: [param] };
+        }
+      }
+      return {};
+    });
+    const onCheckedChange = (checked) => {
+      emit("checkedChange", checked);
+    };
+    const onFilterChange = (value) => {
+      emit("filterChange", { column: originalCol.value, value });
+    };
+    const onClick = (e) => {
+      emit("click", originalCol.value, e);
+    };
+    const onContextmenu = (e) => {
+      emit("contextmenu", originalCol.value, e);
+    };
+    const onMouseenter = (e) => {
+      emit("mouseenter", originalCol.value, e);
+    };
+    return {
+      originalCol,
+      cellClass,
+      cellStyle,
+      cellTitle,
+      renderOpt,
+      onCheckedChange,
+      onFilterChange,
+      onClick,
+      onContextmenu,
+      onMouseenter
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = {
+  key: 0,
+  class: "ele-table-cell"
+};
+const _hoisted_2 = ["title"];
+const _hoisted_3 = {
+  key: 0,
+  class: "ele-table-sorter"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_CellCheckbox = vue.resolveComponent("CellCheckbox");
+  const _component_CellRender = vue.resolveComponent("CellRender");
+  const _component_CellFilter = vue.resolveComponent("CellFilter");
+  return vue.openBlock(), vue.createElementBlock("div", {
+    class: vue.normalizeClass(_ctx.cellClass),
+    style: vue.normalizeStyle(_ctx.cellStyle),
+    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onClick && _ctx.onClick(...args)),
+    onContextmenu: _cache[1] || (_cache[1] = (...args) => _ctx.onContextmenu && _ctx.onContextmenu(...args)),
+    onMouseenter: _cache[2] || (_cache[2] = (...args) => _ctx.onMouseenter && _ctx.onMouseenter(...args))
+  }, [
+    _ctx.originalCol ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+      vue.createElementVNode("div", {
+        class: "ele-cell-title",
+        title: _ctx.headerEllipsis ? _ctx.cellTitle : void 0
+      }, [
+        _ctx.originalCol.type === "selection" ? (vue.openBlock(), vue.createBlock(_component_CellCheckbox, {
+          key: 0,
+          checked: _ctx.isCheckAll,
+          indeterminate: _ctx.isIndeterminate,
+          disabled: _ctx.disabledCheckbox,
+          size: _ctx.tableSize,
+          onChange: _ctx.onCheckedChange
+        }, null, 8, ["checked", "indeterminate", "disabled", "size", "onChange"])) : (vue.openBlock(), vue.createBlock(_component_CellRender, vue.normalizeProps(vue.mergeProps({ key: 1 }, _ctx.renderOpt)), {
+          default: vue.withCtx(() => [
+            vue.createTextVNode(vue.toDisplayString(_ctx.cellTitle), 1)
+          ]),
+          _: 1
+        }, 16))
+      ], 8, _hoisted_2),
+      _ctx.originalCol.sortable ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3)) : vue.createCommentVNode("", true),
+      _ctx.originalCol.filters && _ctx.originalCol.filters.length ? (vue.openBlock(), vue.createBlock(_component_CellFilter, {
+        key: 1,
+        filtered: _ctx.filterValue,
+        filterMultiple: _ctx.originalCol.filterMultiple,
+        filters: _ctx.originalCol.filters,
+        filterPlacement: _ctx.originalCol.filterPlacement,
+        onChange: _ctx.onFilterChange
+      }, null, 8, ["filtered", "filterMultiple", "filters", "filterPlacement", "onChange"])) : vue.createCommentVNode("", true)
+    ])) : vue.createCommentVNode("", true)
+  ], 38);
+}
+const headerCell = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+module.exports = headerCell;

package/lib/ele-virtual-table/components/header-row.d.ts

@@ -0,0 +1,89 @@
+import type { PropType } from 'vue';
+import type { Column, Filter } from '../../ele-data-table/types';
+import type { VirtualColumn, HeaderColumns, SortBy, CellFilterChangeParams, ColSize } from '../types';
+declare const _default: import("vue").DefineComponent<{
+    /** 表头行配置 */
+    headerCols: PropType<HeaderColumns>;
+    /** 表头所有行列宽 */
+    headerColSizes: PropType<ColSize[]>;
+    /** 当前行索引 */
+    headerIndex: NumberConstructor;
+    /** 表格排序状态 */
+    sortBy: PropType<SortBy>;
+    /** 表格筛选值 */
+    filtered: PropType<Filter>;
+    /** 表格是否是全选状态 */
+    isCheckAll: BooleanConstructor;
+    /** 表格是否是半选状态 */
+    isIndeterminate: BooleanConstructor;
+    /** 是否禁用表头选择框 */
+    disabledCheckbox: BooleanConstructor;
+    /** 表格尺寸 */
+    tableSize: PropType<"" | "default" | "small" | "large" | undefined>;
+    /** 表头单元格类名自定义 */
+    headerCellClass: PropType<import("element-plus/es/components/table/src/table/defaults").CellCls<import("../../ele-data-table/types").DataItem> | undefined>;
+    /** 表头单元样式自定义 */
+    headerCellStyle: PropType<import("element-plus/es/components/table/src/table/defaults").CellStyle<import("../../ele-data-table/types").DataItem> | undefined>;
+    /** 表头单元格是否溢出省略 */
+    headerEllipsis: BooleanConstructor;
+    /** 表格行高 */
+    rowHeight: NumberConstructor;
+}, {
+    getKey: (column: VirtualColumn, columnIndex: number) => string;
+    getFiltered: (column: VirtualColumn) => import("../../ele-data-table/types").FilterValue;
+    onCellCheckedChange: (checked: boolean) => void;
+    onCellFilterChange: (params: CellFilterChangeParams) => void;
+    onCellClick: (col: Column, e: MouseEvent) => void;
+    onCellContextmenu: (col: Column, e: MouseEvent) => void;
+    onCellMouseenter: (col: Column, e: MouseEvent) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    /** 多选框选中改变事件 */
+    checkedChange: (_checked: boolean) => true;
+    /** 列筛选改变事件 */
+    filterChange: (_params: CellFilterChangeParams) => true;
+    /** 单元格点击事件 */
+    cellClick: (_col: Column, _e: MouseEvent) => true;
+    /** 单元格右键事件 */
+    cellContextmenu: (_col: Column, _e: MouseEvent) => true;
+    /** 单元格鼠标移入事件 */
+    cellMouseenter: (_col: Column, _e: MouseEvent) => true;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    /** 表头行配置 */
+    headerCols: PropType<HeaderColumns>;
+    /** 表头所有行列宽 */
+    headerColSizes: PropType<ColSize[]>;
+    /** 当前行索引 */
+    headerIndex: NumberConstructor;
+    /** 表格排序状态 */
+    sortBy: PropType<SortBy>;
+    /** 表格筛选值 */
+    filtered: PropType<Filter>;
+    /** 表格是否是全选状态 */
+    isCheckAll: BooleanConstructor;
+    /** 表格是否是半选状态 */
+    isIndeterminate: BooleanConstructor;
+    /** 是否禁用表头选择框 */
+    disabledCheckbox: BooleanConstructor;
+    /** 表格尺寸 */
+    tableSize: PropType<"" | "default" | "small" | "large" | undefined>;
+    /** 表头单元格类名自定义 */
+    headerCellClass: PropType<import("element-plus/es/components/table/src/table/defaults").CellCls<import("../../ele-data-table/types").DataItem> | undefined>;
+    /** 表头单元样式自定义 */
+    headerCellStyle: PropType<import("element-plus/es/components/table/src/table/defaults").CellStyle<import("../../ele-data-table/types").DataItem> | undefined>;
+    /** 表头单元格是否溢出省略 */
+    headerEllipsis: BooleanConstructor;
+    /** 表格行高 */
+    rowHeight: NumberConstructor;
+}>> & {
+    onCellClick?: ((_col: Column, _e: MouseEvent) => any) | undefined;
+    onCellContextmenu?: ((_col: Column, _e: MouseEvent) => any) | undefined;
+    onFilterChange?: ((_params: CellFilterChangeParams) => any) | undefined;
+    onCheckedChange?: ((_checked: boolean) => any) | undefined;
+    onCellMouseenter?: ((_col: Column, _e: MouseEvent) => any) | undefined;
+}, {
+    headerEllipsis: boolean;
+    isCheckAll: boolean;
+    isIndeterminate: boolean;
+    disabledCheckbox: boolean;
+}, {}>;
+export default _default;

package/lib/ele-virtual-table/components/header-row.js

@@ -0,0 +1,125 @@
+"use strict";
+const vue = require("vue");
+const util = require("../util");
+const HeaderCell = require("./header-cell");
+const _sfc_main = vue.defineComponent({
+  name: "HeaderRow",
+  components: { HeaderCell },
+  props: {
+    /** 表头行配置 */
+    headerCols: Array,
+    /** 表头所有行列宽 */
+    headerColSizes: Array,
+    /** 当前行索引 */
+    headerIndex: Number,
+    /** 表格排序状态 */
+    sortBy: Object,
+    /** 表格筛选值 */
+    filtered: Object,
+    /** 表格是否是全选状态 */
+    isCheckAll: Boolean,
+    /** 表格是否是半选状态 */
+    isIndeterminate: Boolean,
+    /** 是否禁用表头选择框 */
+    disabledCheckbox: Boolean,
+    /** 表格尺寸 */
+    tableSize: String,
+    /** 表头单元格类名自定义 */
+    headerCellClass: [String, Function],
+    /** 表头单元样式自定义 */
+    headerCellStyle: [Object, Function],
+    /** 表头单元格是否溢出省略 */
+    headerEllipsis: Boolean,
+    /** 表格行高 */
+    rowHeight: Number
+  },
+  emits: {
+    /** 多选框选中改变事件 */
+    checkedChange: (_checked) => true,
+    /** 列筛选改变事件 */
+    filterChange: (_params) => true,
+    /** 单元格点击事件 */
+    cellClick: (_col, _e) => true,
+    /** 单元格右键事件 */
+    cellContextmenu: (_col, _e) => true,
+    /** 单元格鼠标移入事件 */
+    cellMouseenter: (_col, _e) => true
+  },
+  setup(props, { emit }) {
+    const getKey = (column, columnIndex) => {
+      return props.headerIndex + "-" + (column.key ?? columnIndex);
+    };
+    const getFiltered = (column) => {
+      return util.getColFiltered(column.originalCol, props.filtered);
+    };
+    const onCellCheckedChange = (checked) => {
+      emit("checkedChange", checked);
+    };
+    const onCellFilterChange = (params) => {
+      emit("filterChange", params);
+    };
+    const onCellClick = (col, e) => {
+      emit("cellClick", col, e);
+    };
+    const onCellContextmenu = (col, e) => {
+      emit("cellContextmenu", col, e);
+    };
+    const onCellMouseenter = (col, e) => {
+      emit("cellMouseenter", col, e);
+    };
+    return {
+      getKey,
+      getFiltered,
+      onCellCheckedChange,
+      onCellFilterChange,
+      onCellClick,
+      onCellContextmenu,
+      onCellMouseenter
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_HeaderCell = vue.resolveComponent("HeaderCell");
+  return vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.headerCols, (column, index) => {
+    return vue.openBlock(), vue.createBlock(_component_HeaderCell, {
+      key: _ctx.getKey(column, index),
+      column,
+      columnIndex: index,
+      headerIndex: _ctx.headerIndex,
+      colSize: _ctx.headerColSizes ? _ctx.headerColSizes[index] : void 0,
+      sortBy: _ctx.sortBy,
+      filterValue: _ctx.getFiltered(column),
+      isCheckAll: _ctx.isCheckAll,
+      isIndeterminate: _ctx.isIndeterminate,
+      disabledCheckbox: _ctx.disabledCheckbox,
+      tableSize: _ctx.tableSize,
+      headerCellClass: _ctx.headerCellClass,
+      headerCellStyle: _ctx.headerCellStyle,
+      headerEllipsis: _ctx.headerEllipsis,
+      rowHeight: _ctx.rowHeight,
+      onCheckedChange: _ctx.onCellCheckedChange,
+      onFilterChange: _ctx.onCellFilterChange,
+      onClick: _ctx.onCellClick,
+      onContextmenu: _ctx.onCellContextmenu,
+      onMouseenter: _ctx.onCellMouseenter
+    }, vue.createSlots({ _: 2 }, [
+      vue.renderList(Object.keys(_ctx.$slots), (name) => {
+        return {
+          name,
+          fn: vue.withCtx((slotProps) => [
+            vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
+          ])
+        };
+      })
+    ]), 1032, ["column", "columnIndex", "headerIndex", "colSize", "sortBy", "filterValue", "isCheckAll", "isIndeterminate", "disabledCheckbox", "tableSize", "headerCellClass", "headerCellStyle", "headerEllipsis", "rowHeight", "onCheckedChange", "onFilterChange", "onClick", "onContextmenu", "onMouseenter"]);
+  }), 128);
+}
+const headerRow = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+module.exports = headerRow;