ele-admin-plus 1.2.1-beta.3 → 1.2.1-beta.5

package/lib/ele-data-table/components/table-columns.cjs

@@ -0,0 +1,123 @@
+"use strict";
+const vue = require("vue");
+const elementPlus = require("element-plus");
+const icons = require("../../icons");
+const core = require("../../utils/core");
+const util = require("../util");
+const _sfc_main = vue.defineComponent({
+  name: "TableColumns",
+  components: { ElTableColumn: elementPlus.ElTableColumn, FilterFilled: icons.FilterFilled },
+  props: {
+    /** 列配置 */
+    columns: Array,
+    /** 序号列起始值 */
+    pageIndex: Number,
+    /** 是否过滤非正常的插槽渲染 */
+    slotNormalize: Boolean,
+    /** 表格提示组件属性 */
+    globalTooltip: [Object, Boolean]
+  },
+  setup() {
+    return {
+      omit: core.omit,
+      getCellClass: util.getCellClass,
+      getFilterPopperClass: util.getFilterPopperClass,
+      getTooltipProps: util.getTooltipProps
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = ["title"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_TableColumns = vue.resolveComponent("TableColumns", true);
+  const _component_FilterFilled = vue.resolveComponent("FilterFilled");
+  const _component_ElTableColumn = vue.resolveComponent("ElTableColumn");
+  return vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.columns, (col) => {
+    return vue.openBlock(), vue.createBlock(_component_ElTableColumn, vue.mergeProps(
+      { ref_for: true },
+      _ctx.omit(col, [
+        "showOverflowTooltip",
+        "filterClassName",
+        "columnKey",
+        "className",
+        "uid",
+        "slot",
+        "headerSlot",
+        "hideInTable",
+        "hideInSetting",
+        "hideInExport",
+        "hideInPrint",
+        "printSlot",
+        "children"
+      ]),
+      {
+        key: col.uid ?? col.columnKey ?? col.prop,
+        index: col.index ?? _ctx.pageIndex,
+        className: _ctx.getCellClass(col),
+        columnKey: col.columnKey ?? col.prop,
+        filterClassName: _ctx.getFilterPopperClass(col.filterClassName),
+        showOverflowTooltip: _ctx.getTooltipProps(col.showOverflowTooltip, _ctx.globalTooltip)
+      }
+    ), {
+      header: vue.withCtx((slotProps) => {
+        var _a, _b;
+        return [
+          vue.createElementVNode("div", {
+            class: "ele-cell-title",
+            title: (_a = slotProps == null ? void 0 : slotProps.column) == null ? void 0 : _a.label
+          }, [
+            col.headerSlot ? vue.renderSlot(_ctx.$slots, col.headerSlot, vue.mergeProps({
+              key: 0,
+              ref_for: true
+            }, slotProps || {}), () => {
+              var _a2;
+              return [
+                vue.createTextVNode(vue.toDisplayString((_a2 = slotProps == null ? void 0 : slotProps.column) == null ? void 0 : _a2.label), 1)
+              ];
+            }) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+              vue.createTextVNode(vue.toDisplayString((_b = slotProps == null ? void 0 : slotProps.column) == null ? void 0 : _b.label), 1)
+            ], 64))
+          ], 8, _hoisted_1)
+        ];
+      }),
+      default: vue.withCtx((slotProps) => [
+        col.slot && _ctx.$slots[col.slot] && (!_ctx.slotNormalize || (slotProps == null ? void 0 : slotProps.$index) != -1) ? vue.renderSlot(_ctx.$slots, col.slot, vue.mergeProps({
+          key: 0,
+          ref_for: true
+        }, slotProps || {})) : col.children && col.children.length ? (vue.openBlock(), vue.createBlock(_component_TableColumns, {
+          key: 1,
+          columns: col.children,
+          pageIndex: _ctx.pageIndex,
+          slotNormalize: _ctx.slotNormalize,
+          globalTooltip: _ctx.globalTooltip
+        }, vue.createSlots({ _: 2 }, [
+          vue.renderList(Object.keys(_ctx.$slots), (name) => {
+            return {
+              name,
+              fn: vue.withCtx((tempProps) => [
+                vue.renderSlot(_ctx.$slots, name, vue.mergeProps({ ref_for: true }, tempProps || {}))
+              ])
+            };
+          })
+        ]), 1032, ["columns", "pageIndex", "slotNormalize", "globalTooltip"])) : vue.createCommentVNode("", true)
+      ]),
+      "filter-icon": vue.withCtx((slotProps) => [
+        !col.filterIcon ? (vue.openBlock(), vue.createBlock(_component_FilterFilled, { key: 0 })) : typeof col.filterIcon === "string" ? vue.renderSlot(_ctx.$slots, col.filterIcon, vue.mergeProps({
+          key: 1,
+          ref_for: true
+        }, slotProps || {}), () => [
+          vue.createVNode(_component_FilterFilled)
+        ]) : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(col.filterIcon), { key: 2 }))
+      ]),
+      _: 2
+    }, 1040, ["index", "className", "columnKey", "filterClassName", "showOverflowTooltip"]);
+  }), 128);
+}
+const tableColumns = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+module.exports = tableColumns;

package/lib/ele-data-table/components/table-columns.d.ts

@@ -0,0 +1,32 @@
+import { PropType } from 'vue';
+import { omit } from '../../utils/core';
+import { Columns, ShowOverflowTooltip } from '../types';
+import { getCellClass, getFilterPopperClass, getTooltipProps } from '../util';
+
+declare const _default: import('vue').DefineComponent<{
+    /** 列配置 */
+    columns: PropType<Columns>;
+    /** 序号列起始值 */
+    pageIndex: NumberConstructor;
+    /** 是否过滤非正常的插槽渲染 */
+    slotNormalize: BooleanConstructor;
+    /** 表格提示组件属性 */
+    globalTooltip: PropType<ShowOverflowTooltip>;
+}, {
+    omit: typeof omit;
+    getCellClass: typeof getCellClass;
+    getFilterPopperClass: typeof getFilterPopperClass;
+    getTooltipProps: typeof getTooltipProps;
+}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    /** 列配置 */
+    columns: PropType<Columns>;
+    /** 序号列起始值 */
+    pageIndex: NumberConstructor;
+    /** 是否过滤非正常的插槽渲染 */
+    slotNormalize: BooleanConstructor;
+    /** 表格提示组件属性 */
+    globalTooltip: PropType<ShowOverflowTooltip>;
+}>>, {
+    slotNormalize: boolean;
+}, {}>;
+export default _default;

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

@@ -2,13 +2,16 @@
 const vue = require("vue");
 const elementPlus = require("element-plus");
 const core = require("../utils/core");
+const TableColumns = require("./components/table-columns");
 const util = require("./util");
 const props = require("./props");
-const index = vue.defineComponent({
+const ownSlots = ["default", "append", "empty"];
+const _sfc_main = vue.defineComponent({
   name: "EleDataTable",
+  components: { ElTable: elementPlus.ElTable, ElEmpty: elementPlus.ElEmpty, TableColumns },
   props: props.dataTableProps,
   emits: props.dataTableEmits,
-  setup(props$1, { emit, slots, expose }) {
+  setup(props$1, { emit }) {
     const events = util.useEmits(emit);
     const methods = util.useMethods(() => tableRef.value);
     const { isLayoutFixedHead, isLayoutMaximized } = util.useStickyHeader();
@@ -33,6 +36,78 @@ const index = vue.defineComponent({
       var _a;
       return ((_a = props$1.treeProps) == null ? void 0 : _a.children) || "children";
     });
+    const tableProps = vue.computed(() => {
+      const propKeys = props.tablePropKeys.filter(
+        (k) => ![
+          "currentRowKey",
+          "showOverflowTooltip",
+          "tooltipOptions",
+          "tooltipEffect"
+        ].includes(k)
+      );
+      return {
+        ...core.pick(props$1, propKeys),
+        ...core.omit(events, [
+          "onUpdate:currentRowKey",
+          "onUpdate:selectedRowKeys",
+          "onRowClick",
+          "onHeaderClick",
+          "onSortChange",
+          "onFilterChange",
+          "onCurrentChange",
+          "onSelect",
+          "onSelectAll",
+          "onSelectionChange"
+        ])
+      };
+    });
+    const handleRowClick = (row, column, event) => {
+      if (props$1.rowClickChecked && !util.isDisableRow(row, props$1.data.indexOf(row), props$1.columns)) {
+        const selections = methods.getSelectionRows();
+        if (props$1.rowClickChecked === "smart" && (!selections || !selections.length || selections.length === 1)) {
+          const key = core.getValue(row, props$1.rowKey);
+          updateCheckedState(key == null ? [] : [key]);
+        } else {
+          toggleRowSelection(row);
+        }
+      }
+      events.onRowClick(row, column, event);
+    };
+    const handleHeaderClick = (column, e) => {
+      if (column.sortable && column.filters) {
+        const el = e.currentTarget;
+        if (el) {
+          const caretEl = el.querySelector(".caret-wrapper");
+          caretEl && caretEl.dispatchEvent(new MouseEvent("click"));
+        }
+      }
+      events.onHeaderClick(column, e);
+    };
+    const handleSortChange = (sorter) => {
+      const currentSorter = tableState.sorter;
+      if (currentSorter && sorter.prop === currentSorter.prop && sorter.order === currentSorter.order) {
+        return;
+      }
+      tableState.sorter = sorter;
+      events.onSortChange(sorter);
+    };
+    const handleFilterChange = (filter) => {
+      tableState.filter = util.getTableFilter(tableRef.value) ?? filter;
+      events.onFilterChange(tableState.filter);
+    };
+    const handleCurrentChange = (row, old) => {
+      if (row != null && row !== old) {
+        updateSelectedState(core.getValue(row, props$1.rowKey), row);
+      }
+    };
+    const handleSelect = (selection, row) => {
+      events.onSelect(selection, row);
+      updateCheckedState(util.getRowKeys(selection, props$1.rowKey), selection);
+    };
+    const handleSelectAll = (selection) => {
+      updateCheckedState(util.getRowKeys(selection, props$1.rowKey), selection);
+      events.onSelectAll(selection);
+    };
     const updateScrollBar = () => {
       var _a;
       const scrollBarRef = (_a = tableRef.value) == null ? void 0 : _a.scrollBarRef;
@@ -63,7 +138,11 @@ const index = vue.defineComponent({
     };
     const setSelectedRows = (rows) => {
       if (rows) {
-        updateCheckedState(util.getRowKeys(rows, props$1.rowKey), rows, !!rows.length);
+        updateCheckedState(
+          util.getRowKeys(rows, props$1.rowKey),
+          rows,
+          !!rows.length
+        );
       }
     };
     const setSelectedRowKeys = (keys) => {
@@ -95,7 +174,12 @@ const index = vue.defineComponent({
         return;
       }
       if (key != null) {
-        const row = util.getRowByKey(key, props$1.data, props$1.rowKey, childKey.value);
+        const row = util.getRowByKey(
+          key,
+          props$1.data,
+          props$1.rowKey,
+          childKey.value
+        );
         if (row != null || props$1.reserveCurrent) {
           tableState.oldRow = tableState.row;
           tableState.row = row || item || void 0;
@@ -138,7 +222,9 @@ const index = vue.defineComponent({
         childKey.value
       );
       const itemKeys = items ? items.map((d) => core.getValue(d, props$1.rowKey)) : [];
-      const oldKeys = tableState.checked.map((d) => core.getValue(d, props$1.rowKey));
+      const oldKeys = tableState.checked.map(
+        (d) => core.getValue(d, props$1.rowKey)
+      );
       const checkedKeys = [];
       const checked = [];
       keys.forEach((key) => {
@@ -189,7 +275,12 @@ const index = vue.defineComponent({
     const updateSelectedAndChecked = () => {
       const key = tableState.key;
       if (key != null) {
-        const row = util.getRowByKey(key, props$1.data, props$1.rowKey, childKey.value);
+        const row = util.getRowByKey(
+          key,
+          props$1.data,
+          props$1.rowKey,
+          childKey.value
+        );
         if (row != null) {
           updateSelectedState(key, row);
         } else if (!props$1.reserveCurrent) {
@@ -238,7 +329,10 @@ const index = vue.defineComponent({
             methods.doLayout();
             updateScrollBar();
             if (sorter) {
-              methods.sort(sorter.prop, sorter.order || "ascending");
+              methods.sort(
+                sorter.prop,
+                sorter.order || "ascending"
+              );
             }
           });
         }
@@ -271,8 +365,24 @@ const index = vue.defineComponent({
         updateCheckedState(props$1.selectedRowKeys);
       }
     });
-    const exposeValue = {
+    return {
+      ownSlots,
+      getBodyRowClass: util.getBodyRowClass,
+      getHeadRowClass: util.getHeadRowClass,
       ...methods,
+      isLayoutFixedHead,
+      isLayoutMaximized,
+      tableRef,
+      tableCols,
+      tableOverflowTooltip,
+      tableProps,
+      handleRowClick,
+      handleHeaderClick,
+      handleSortChange,
+      handleFilterChange,
+      handleCurrentChange,
+      handleSelect,
+      handleSelectAll,
       clearSort,
       clearSelection,
       toggleRowSelection,
@@ -282,116 +392,88 @@ const index = vue.defineComponent({
       setSelectedRows,
       setSelectedRowKeys,
       toggleRowExpansionAll,
-      updateSelectedAndChecked,
-      tableRef
-    };
-    expose(exposeValue);
-    return () => {
-      return vue.h(
-        elementPlus.ElTable,
-        {
-          ...core.pick(props$1, props.tablePropKeys),
-          ...core.omit(events, [
-            "onUpdate:currentRowKey",
-            "onUpdate:selectedRowKeys"
-          ]),
-          ref: tableRef,
-          class: [
-            "ele-data-table",
-            { "is-sticky": props$1.sticky },
-            { "is-layout-fixed-head": props$1.sticky && isLayoutFixedHead.value },
-            { "is-layout-maximized": props$1.sticky && isLayoutMaximized.value },
-            { "is-sticky": props$1.sticky },
-            { "hide-header": !props$1.showHeader },
-            { "hide-bottom-line": !props$1.bottomLine }
-          ],
-          currentRowKey: void 0,
-          emptyText: props$1.errorText || props$1.emptyText,
-          rowClassName: (param) => {
-            return util.getBodyRowClass(props$1.rowClassName, param);
-          },
-          headerRowClassName: (param) => {
-            return util.getHeadRowClass(
-              props$1.headerRowClassName,
-              param,
-              props$1.headerEllipsis
-            );
-          },
-          onRowClick: (row, column, event) => {
-            if (props$1.rowClickChecked && !util.isDisableRow(row, props$1.data.indexOf(row), props$1.columns)) {
-              const selections = methods.getSelectionRows();
-              if (props$1.rowClickChecked === "smart" && (!selections || !selections.length || selections.length === 1)) {
-                const key = core.getValue(row, props$1.rowKey);
-                updateCheckedState(key == null ? [] : [key]);
-              } else {
-                toggleRowSelection(row);
-              }
-            }
-            events.onRowClick(row, column, event);
-          },
-          onHeaderClick: (column, e) => {
-            if (column.sortable && column.filters) {
-              const el = e.currentTarget;
-              if (el) {
-                const caretEl = el.querySelector(".caret-wrapper");
-                caretEl && caretEl.dispatchEvent(new MouseEvent("click"));
-              }
-            }
-            events.onHeaderClick(column, e);
-          },
-          onSortChange: (sorter) => {
-            const currentSorter = tableState.sorter;
-            if (currentSorter && sorter.prop === currentSorter.prop && sorter.order === currentSorter.order) {
-              return;
-            }
-            tableState.sorter = sorter;
-            events.onSortChange(sorter);
-          },
-          onFilterChange: (filter) => {
-            tableState.filter = util.getTableFilter(tableRef.value) ?? filter;
-            events.onFilterChange(tableState.filter);
-          },
-          // 重写选中逻辑
-          onCurrentChange: (row, old) => {
-            if (row != null && row !== old) {
-              updateSelectedState(core.getValue(row, props$1.rowKey), row);
-            }
-          },
-          onSelect: (selection, row) => {
-            events.onSelect(selection, row);
-            updateCheckedState(util.getRowKeys(selection, props$1.rowKey), selection);
-          },
-          onSelectAll: (selection) => {
-            updateCheckedState(util.getRowKeys(selection, props$1.rowKey), selection);
-            events.onSelectAll(selection);
-          },
-          onSelectionChange: () => {
-          },
-          // 移除提示组件相关属性
-          showOverflowTooltip: void 0,
-          tooltipOptions: void 0,
-          tooltipEffect: void 0
-        },
-        {
-          default: () => {
-            return util.getCols(
-              tableCols.value,
-              props$1.pageIndex,
-              slots,
-              props$1.slotNormalize,
-              tableOverflowTooltip.value
-            );
-          },
-          append: slots.append,
-          empty: util.getEmptySlot(
-            slots,
-            props$1.emptyProps,
-            props$1.emptyText,
-            props$1.errorText
-          )
-        }
-      );
+      updateSelectedAndChecked
     };
   }
 });
+const _export_sfc = (sfc, props2) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props2) {
+    target[key] = val;
+  }
+  return target;
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_TableColumns = vue.resolveComponent("TableColumns");
+  const _component_ElEmpty = vue.resolveComponent("ElEmpty");
+  const _component_ElTable = vue.resolveComponent("ElTable");
+  return vue.openBlock(), vue.createBlock(_component_ElTable, vue.mergeProps(_ctx.tableProps, {
+    ref: "tableRef",
+    emptyText: _ctx.errorText || _ctx.emptyText,
+    rowClassName: (param) => _ctx.getBodyRowClass(_ctx.rowClassName, param),
+    headerRowClassName: (param) => _ctx.getHeadRowClass(_ctx.headerRowClassName, param, _ctx.headerEllipsis),
+    class: [
+      "ele-data-table",
+      { "is-sticky": _ctx.sticky },
+      { "is-layout-fixed-head": _ctx.sticky && _ctx.isLayoutFixedHead },
+      { "is-layout-maximized": _ctx.sticky && _ctx.isLayoutMaximized },
+      { "is-sticky": _ctx.sticky },
+      { "hide-header": !_ctx.showHeader },
+      { "hide-bottom-line": !_ctx.bottomLine }
+    ],
+    onRowClick: _ctx.handleRowClick,
+    onHeaderClick: _ctx.handleHeaderClick,
+    onSortChange: _ctx.handleSortChange,
+    onFilterChange: _ctx.handleFilterChange,
+    onCurrentChange: _ctx.handleCurrentChange,
+    onSelect: _ctx.handleSelect,
+    onSelectAll: _ctx.handleSelectAll
+  }), vue.createSlots({
+    default: vue.withCtx(() => [
+      _ctx.tableCols && _ctx.tableCols.length ? (vue.openBlock(), vue.createBlock(_component_TableColumns, {
+        key: 0,
+        columns: _ctx.tableCols,
+        pageIndex: _ctx.pageIndex,
+        slotNormalize: _ctx.slotNormalize,
+        globalTooltip: _ctx.tableOverflowTooltip
+      }, vue.createSlots({ _: 2 }, [
+        vue.renderList(Object.keys(_ctx.$slots).filter((k) => !_ctx.ownSlots.includes(k)), (name) => {
+          return {
+            name,
+            fn: vue.withCtx((slotProps) => [
+              vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
+            ])
+          };
+        })
+      ]), 1032, ["columns", "pageIndex", "slotNormalize", "globalTooltip"])) : vue.createCommentVNode("", true)
+    ]),
+    _: 2
+  }, [
+    _ctx.$slots.append ? {
+      name: "append",
+      fn: vue.withCtx((slotProps) => [
+        vue.renderSlot(_ctx.$slots, "append", vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
+      ]),
+      key: "0"
+    } : void 0,
+    _ctx.$slots.empty || _ctx.emptyProps ? {
+      name: "empty",
+      fn: vue.withCtx(() => [
+        _ctx.$slots.empty ? vue.renderSlot(_ctx.$slots, "empty", {
+          key: 0,
+          text: _ctx.emptyText,
+          error: _ctx.errorText
+        }) : _ctx.emptyProps ? (vue.openBlock(), vue.createBlock(_component_ElEmpty, vue.mergeProps({
+          key: 1,
+          imageSize: 68
+        }, !_ctx.emptyProps || _ctx.emptyProps === true ? {} : _ctx.emptyProps, {
+          description: _ctx.errorText || _ctx.emptyText,
+          class: "ele-table-empty"
+        }), null, 16, ["description"])) : vue.createCommentVNode("", true)
+      ]),
+      key: "1"
+    } : void 0
+  ]), 1040, ["emptyText", "rowClassName", "headerRowClassName", "class", "onRowClick", "onHeaderClick", "onSortChange", "onFilterChange", "onCurrentChange", "onSelect", "onSelectAll"]);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 module.exports = index;