ele-admin-plus 1.2.2-beta.5 → 1.3.0-beta.3

package/lib/ele-tree-table/components/table-body.cjs

@@ -0,0 +1,99 @@
+"use strict";
+const vue = require("vue");
+const TableRow = require("./table-row");
+const _sfc_main = vue.defineComponent({
+  name: "TableBody",
+  components: { TableRow },
+  props: {
+    /** 数据 */
+    data: {
+      type: Array,
+      required: true
+    },
+    /** 列配置 */
+    columns: {
+      type: Array,
+      required: true
+    },
+    /** 序号列宽度 */
+    indexColWidth: {
+      type: Number,
+      required: true
+    },
+    /** 所处深度 */
+    level: {
+      type: Number,
+      required: true
+    },
+    /** 最大深度 */
+    depth: {
+      type: Number,
+      required: true
+    }
+  }
+});
+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_TableBody = vue.resolveComponent("TableBody", true);
+  const _component_TableRow = vue.resolveComponent("TableRow");
+  return vue.openBlock(), vue.createElementBlock("div", null, [
+    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.data, (row, rowIndex) => {
+      return vue.openBlock(), vue.createBlock(_component_TableRow, {
+        key: row.key ?? rowIndex,
+        rowIndex,
+        hasChildren: !!(row.children && row.children.length),
+        indexColWidth: _ctx.indexColWidth,
+        level: _ctx.level,
+        depth: _ctx.depth
+      }, {
+        cells: vue.withCtx(() => [
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.columns, (col) => {
+            return vue.openBlock(), vue.createElementBlock("div", {
+              key: col.key ?? col.prop,
+              style: vue.normalizeStyle(col.style),
+              class: vue.normalizeClass([col.class, "ele-tree-table-cell"])
+            }, [
+              vue.renderSlot(_ctx.$slots, "bodyCell", {
+                row,
+                rowIndex,
+                column: col,
+                treeLevel: _ctx.level
+              }, () => [
+                vue.createTextVNode(vue.toDisplayString(col.prop != null ? row[col.prop] : void 0), 1)
+              ])
+            ], 6);
+          }), 128))
+        ]),
+        default: vue.withCtx(() => [
+          row.children && row.children.length ? (vue.openBlock(), vue.createBlock(_component_TableBody, {
+            key: 0,
+            data: row.children,
+            columns: _ctx.columns,
+            level: _ctx.level + 1,
+            depth: _ctx.depth,
+            indexColWidth: _ctx.indexColWidth,
+            class: "ele-tree-table-children"
+          }, vue.createSlots({ _: 2 }, [
+            vue.renderList(Object.keys(_ctx.$slots), (name) => {
+              return {
+                name,
+                fn: vue.withCtx((slotProps) => [
+                  vue.renderSlot(_ctx.$slots, name, vue.mergeProps({ ref_for: true }, slotProps || {}))
+                ])
+              };
+            })
+          ]), 1032, ["data", "columns", "level", "depth", "indexColWidth"])) : vue.createCommentVNode("", true)
+        ]),
+        _: 2
+      }, 1032, ["rowIndex", "hasChildren", "indexColWidth", "level", "depth"]);
+    }), 128))
+  ]);
+}
+const tableBody = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+module.exports = tableBody;

package/lib/ele-tree-table/components/table-body.d.ts

@@ -0,0 +1,57 @@
+import { PropType } from 'vue';
+import { TreeTableDataItem, TreeTableColumn } from '../types';
+
+declare const _default: import('vue').DefineComponent<{
+    /** 数据 */
+    data: {
+        type: PropType<TreeTableDataItem[]>;
+        required: true;
+    };
+    /** 列配置 */
+    columns: {
+        type: PropType<TreeTableColumn[]>;
+        required: true;
+    };
+    /** 序号列宽度 */
+    indexColWidth: {
+        type: NumberConstructor;
+        required: true;
+    };
+    /** 所处深度 */
+    level: {
+        type: NumberConstructor;
+        required: true;
+    };
+    /** 最大深度 */
+    depth: {
+        type: NumberConstructor;
+        required: true;
+    };
+}, unknown, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    /** 数据 */
+    data: {
+        type: PropType<TreeTableDataItem[]>;
+        required: true;
+    };
+    /** 列配置 */
+    columns: {
+        type: PropType<TreeTableColumn[]>;
+        required: true;
+    };
+    /** 序号列宽度 */
+    indexColWidth: {
+        type: NumberConstructor;
+        required: true;
+    };
+    /** 所处深度 */
+    level: {
+        type: NumberConstructor;
+        required: true;
+    };
+    /** 最大深度 */
+    depth: {
+        type: NumberConstructor;
+        required: true;
+    };
+}>>, {}, {}>;
+export default _default;

package/lib/ele-tree-table/components/table-row.cjs

@@ -0,0 +1,104 @@
+"use strict";
+const vue = require("vue");
+const elementPlus = require("element-plus");
+const icons = require("../../icons");
+const _sfc_main = vue.defineComponent({
+  name: "TableRow",
+  components: { ElIcon: elementPlus.ElIcon, ArrowDown: icons.ArrowDown },
+  props: {
+    /** 行索引 */
+    rowIndex: {
+      type: Number,
+      required: true
+    },
+    /** 是否有子级 */
+    hasChildren: Boolean,
+    /** 序号列宽度 */
+    indexColWidth: {
+      type: Number,
+      required: true
+    },
+    /** 所处深度 */
+    level: {
+      type: Number,
+      required: true
+    },
+    /** 最大深度 */
+    depth: {
+      type: Number,
+      required: true
+    }
+  },
+  setup() {
+    const isCollapse = vue.ref(false);
+    const handleExpandClick = () => {
+      isCollapse.value = !isCollapse.value;
+    };
+    return {
+      isCollapse,
+      handleExpandClick
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = { class: "ele-tree-table-row-body" };
+const _hoisted_2 = { class: "ele-tree-table-cells" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ArrowDown = vue.resolveComponent("ArrowDown");
+  const _component_ElIcon = vue.resolveComponent("ElIcon");
+  return vue.openBlock(), vue.createElementBlock("div", {
+    class: vue.normalizeClass(["ele-tree-table-row", { "is-collapse": _ctx.isCollapse }])
+  }, [
+    vue.createElementVNode("div", {
+      style: vue.normalizeStyle({
+        width: `${_ctx.indexColWidth}px`,
+        left: `${(_ctx.level - 1) * _ctx.indexColWidth}px`
+      }),
+      class: vue.normalizeClass([
+        "ele-tree-table-cell is-tree-index is-fixed-left",
+        { "is-fixed-left-last": _ctx.depth === _ctx.level }
+      ])
+    }, vue.toDisplayString(_ctx.rowIndex + 1), 7),
+    vue.createElementVNode("div", _hoisted_1, [
+      vue.createElementVNode("div", _hoisted_2, [
+        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.depth - _ctx.level, (num) => {
+          return vue.openBlock(), vue.createElementBlock("div", {
+            key: num,
+            style: vue.normalizeStyle({
+              width: `${_ctx.indexColWidth}px`,
+              left: `${(_ctx.level - 1 + num) * _ctx.indexColWidth}px`,
+              textAlign: _ctx.hasChildren && num === 1 ? "left" : void 0
+            }),
+            class: vue.normalizeClass([
+              "ele-tree-table-cell is-tree-index is-placeholder is-fixed-left",
+              { "is-fixed-left-last": num === _ctx.depth - _ctx.level }
+            ])
+          }, [
+            _ctx.hasChildren && num === 1 ? (vue.openBlock(), vue.createElementBlock("div", {
+              key: 0,
+              class: vue.normalizeClass(["ele-tree-table-expand", { "is-collapse": _ctx.isCollapse }]),
+              onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleExpandClick && _ctx.handleExpandClick(...args))
+            }, [
+              vue.createVNode(_component_ElIcon, null, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(_component_ArrowDown)
+                ]),
+                _: 1
+              })
+            ], 2)) : vue.createCommentVNode("", true)
+          ], 6);
+        }), 128)),
+        vue.renderSlot(_ctx.$slots, "cells")
+      ]),
+      vue.renderSlot(_ctx.$slots, "default")
+    ])
+  ], 2);
+}
+const tableRow = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+module.exports = tableRow;

package/lib/ele-tree-table/components/table-row.d.ts

@@ -0,0 +1,53 @@
+declare const _default: import('vue').DefineComponent<{
+    /** 行索引 */
+    rowIndex: {
+        type: NumberConstructor;
+        required: true;
+    };
+    /** 是否有子级 */
+    hasChildren: BooleanConstructor;
+    /** 序号列宽度 */
+    indexColWidth: {
+        type: NumberConstructor;
+        required: true;
+    };
+    /** 所处深度 */
+    level: {
+        type: NumberConstructor;
+        required: true;
+    };
+    /** 最大深度 */
+    depth: {
+        type: NumberConstructor;
+        required: true;
+    };
+}, {
+    isCollapse: import('vue').Ref<boolean>;
+    handleExpandClick: () => void;
+}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    /** 行索引 */
+    rowIndex: {
+        type: NumberConstructor;
+        required: true;
+    };
+    /** 是否有子级 */
+    hasChildren: BooleanConstructor;
+    /** 序号列宽度 */
+    indexColWidth: {
+        type: NumberConstructor;
+        required: true;
+    };
+    /** 所处深度 */
+    level: {
+        type: NumberConstructor;
+        required: true;
+    };
+    /** 最大深度 */
+    depth: {
+        type: NumberConstructor;
+        required: true;
+    };
+}>>, {
+    hasChildren: boolean;
+}, {}>;
+export default _default;

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

@@ -0,0 +1,154 @@
+"use strict";
+const vue = require("vue");
+const TableBody = require("./components/table-body");
+const props = require("./props");
+const _sfc_main = vue.defineComponent({
+  name: "EleTreeTable",
+  components: { TableBody },
+  props: props.treeTableProps,
+  setup(props2) {
+    const tableRef = vue.ref(null);
+    const depth = vue.ref(1);
+    const isPingLeft = vue.ref(false);
+    const isPingRight = vue.ref(false);
+    const checkTableScrollPing = (el) => {
+      if (el) {
+        const scrollLeft = el.scrollLeft;
+        isPingLeft.value = scrollLeft > 1;
+        const scrollWidth = el.scrollWidth - el.offsetWidth - 1;
+        isPingRight.value = scrollWidth > 1 && scrollLeft < scrollWidth;
+      }
+    };
+    const handleTableScroll = (e) => {
+      checkTableScrollPing(e.currentTarget);
+    };
+    const getTreeDepth = (data, level = 0) => {
+      let maxDepth = 0;
+      if (data) {
+        data.forEach((row) => {
+          if (row.children && row.children.length) {
+            const depth2 = getTreeDepth(row.children, level + 1);
+            maxDepth = Math.max(maxDepth, depth2);
+          }
+        });
+      }
+      return maxDepth + 1;
+    };
+    vue.watch(
+      () => props2.data,
+      (data) => {
+        depth.value = getTreeDepth(data);
+      },
+      {
+        immediate: true,
+        deep: true
+      }
+    );
+    vue.watch(
+      () => props2.columns,
+      () => {
+        vue.nextTick(() => {
+          checkTableScrollPing(tableRef.value);
+        });
+      },
+      { deep: true }
+    );
+    vue.onMounted(() => {
+      checkTableScrollPing(tableRef.value);
+    });
+    return {
+      tableRef,
+      depth,
+      isPingLeft,
+      isPingRight,
+      handleTableScroll
+    };
+  }
+});
+const _export_sfc = (sfc, props2) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props2) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = { class: "ele-tree-table-row" };
+const _hoisted_2 = {
+  key: 1,
+  class: "ele-tree-table-empty"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_TableBody = vue.resolveComponent("TableBody");
+  return vue.openBlock(), vue.createElementBlock("div", {
+    class: vue.normalizeClass([
+      "ele-tree-table-wrapper",
+      { "is-ping-left": _ctx.isPingLeft },
+      { "is-ping-right": _ctx.isPingRight }
+    ])
+  }, [
+    vue.createElementVNode("div", {
+      ref: "tableRef",
+      class: "ele-tree-table",
+      style: vue.normalizeStyle({ height: _ctx.height }),
+      onScroll: _cache[0] || (_cache[0] = (...args) => _ctx.handleTableScroll && _ctx.handleTableScroll(...args))
+    }, [
+      vue.createElementVNode("div", {
+        class: "ele-tree-table-main",
+        style: vue.normalizeStyle(_ctx.tableStyle)
+      }, [
+        vue.createElementVNode("div", {
+          class: "ele-tree-table-header",
+          style: vue.normalizeStyle(_ctx.headerStyle)
+        }, [
+          vue.createElementVNode("div", _hoisted_1, [
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.depth, (num) => {
+              return vue.openBlock(), vue.createElementBlock("div", {
+                key: num,
+                style: vue.normalizeStyle({
+                  width: `${_ctx.indexColWidth}px`,
+                  left: `${(num - 1) * _ctx.indexColWidth}px`
+                }),
+                class: vue.normalizeClass([
+                  "ele-tree-table-cell is-tree-index is-fixed-left",
+                  { "is-placeholder": num !== 1 },
+                  { "is-fixed-left-last": num === _ctx.depth }
+                ])
+              }, null, 6);
+            }), 128)),
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.columns || [], (col) => {
+              return vue.openBlock(), vue.createElementBlock("div", {
+                key: col.key ?? col.prop,
+                style: vue.normalizeStyle(col.style),
+                class: vue.normalizeClass([col.class, "ele-tree-table-cell"])
+              }, [
+                vue.renderSlot(_ctx.$slots, "headerCell", { column: col }, () => [
+                  vue.createTextVNode(vue.toDisplayString(col.label), 1)
+                ])
+              ], 6);
+            }), 128))
+          ])
+        ], 4),
+        _ctx.data && _ctx.data.length ? (vue.openBlock(), vue.createBlock(_component_TableBody, {
+          key: 0,
+          data: _ctx.data,
+          columns: _ctx.columns || [],
+          level: 1,
+          depth: _ctx.depth,
+          indexColWidth: _ctx.indexColWidth,
+          class: "ele-tree-table-body"
+        }, 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, ["data", "columns", "depth", "indexColWidth"])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, "无数据"))
+      ], 4)
+    ], 36)
+  ], 2);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+module.exports = index;

package/lib/ele-tree-table/index.d.ts

@@ -0,0 +1,30 @@
+declare const _default: import('vue').DefineComponent<{
+    data: import('vue').PropType<import('./types').TreeTableDataItem[]>;
+    columns: import('vue').PropType<import('./types').TreeTableColumn[]>;
+    height: StringConstructor;
+    tableStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    headerStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    indexColWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
+}, {
+    tableRef: import('vue').Ref<HTMLElement | null>;
+    depth: import('vue').Ref<number>;
+    isPingLeft: import('vue').Ref<boolean>;
+    isPingRight: import('vue').Ref<boolean>;
+    handleTableScroll: (e: MouseEvent) => void;
+}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    data: import('vue').PropType<import('./types').TreeTableDataItem[]>;
+    columns: import('vue').PropType<import('./types').TreeTableColumn[]>;
+    height: StringConstructor;
+    tableStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    headerStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    indexColWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>>, {
+    indexColWidth: number;
+}, {}>;
+export default _default;

package/lib/ele-tree-table/props.cjs

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const treeTableProps = {
+  /** 数据 */
+  data: Array,
+  /** 列配置 */
+  columns: Array,
+  /** 表格高度 */
+  height: String,
+  /** 表格样式 */
+  tableStyle: [Object, Array, String],
+  /** 表头样式 */
+  headerStyle: [Object, Array, String],
+  /** 序号列宽度 */
+  indexColWidth: {
+    type: Number,
+    default: 24
+  }
+};
+exports.treeTableProps = treeTableProps;

package/lib/ele-tree-table/props.d.ts

@@ -0,0 +1,25 @@
+import { PropType, ExtractPropTypes } from 'vue';
+import { StyleValue } from '../ele-app/types';
+import { TreeTableDataItem, TreeTableColumn } from './types';
+
+/**
+ * 属性
+ */
+export declare const treeTableProps: {
+    /** 数据 */
+    data: PropType<TreeTableDataItem[]>;
+    /** 列配置 */
+    columns: PropType<TreeTableColumn[]>;
+    /** 表格高度 */
+    height: StringConstructor;
+    /** 表格样式 */
+    tableStyle: PropType<StyleValue>;
+    /** 表头样式 */
+    headerStyle: PropType<StyleValue>;
+    /** 序号列宽度 */
+    indexColWidth: {
+        type: NumberConstructor;
+        default: number;
+    };
+};
+export type TreeTableProps = ExtractPropTypes<typeof treeTableProps>;

package/lib/ele-tree-table/style/css-var.scss

@@ -0,0 +1,8 @@
+@use '../../style/util.scss' as *;
+
+/* 树表格主题变量 */
+@mixin set-tree-table-var($var) {
+  .ele-tree-table-wrapper {
+    @include set-ele-var('table', $var);
+  }
+}

package/lib/ele-tree-table/style/index.cjs

@@ -0,0 +1,3 @@
+"use strict";
+require("element-plus/es/components/icon/style/index");
+require("./index.scss");

package/lib/ele-tree-table/style/index.d.ts

@@ -0,0 +1 @@
+