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

package/es/ele-tree-table/components/table-body.js

@@ -0,0 +1,100 @@
+import { defineComponent, resolveComponent, openBlock, createElementBlock, Fragment, renderList, createBlock, withCtx, normalizeStyle, normalizeClass, renderSlot, createTextVNode, toDisplayString, createSlots, mergeProps, createCommentVNode } from "vue";
+import TableRow from "./table-row";
+const _sfc_main = 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 = resolveComponent("TableBody", true);
+  const _component_TableRow = resolveComponent("TableRow");
+  return openBlock(), createElementBlock("div", null, [
+    (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.data, (row, rowIndex) => {
+      return openBlock(), createBlock(_component_TableRow, {
+        key: row.key ?? rowIndex,
+        rowIndex,
+        hasChildren: !!(row.children && row.children.length),
+        indexColWidth: _ctx.indexColWidth,
+        level: _ctx.level,
+        depth: _ctx.depth
+      }, {
+        cells: withCtx(() => [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.columns, (col) => {
+            return openBlock(), createElementBlock("div", {
+              key: col.key ?? col.prop,
+              style: normalizeStyle(col.style),
+              class: normalizeClass([col.class, "ele-tree-table-cell"])
+            }, [
+              renderSlot(_ctx.$slots, "bodyCell", {
+                row,
+                rowIndex,
+                column: col,
+                treeLevel: _ctx.level
+              }, () => [
+                createTextVNode(toDisplayString(col.prop != null ? row[col.prop] : void 0), 1)
+              ])
+            ], 6);
+          }), 128))
+        ]),
+        default: withCtx(() => [
+          row.children && row.children.length ? (openBlock(), 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"
+          }, createSlots({ _: 2 }, [
+            renderList(Object.keys(_ctx.$slots), (name) => {
+              return {
+                name,
+                fn: withCtx((slotProps) => [
+                  renderSlot(_ctx.$slots, name, mergeProps({ ref_for: true }, slotProps || {}))
+                ])
+              };
+            })
+          ]), 1032, ["data", "columns", "level", "depth", "indexColWidth"])) : createCommentVNode("", true)
+        ]),
+        _: 2
+      }, 1032, ["rowIndex", "hasChildren", "indexColWidth", "level", "depth"]);
+    }), 128))
+  ]);
+}
+const tableBody = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  tableBody as default
+};

package/es/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/es/ele-tree-table/components/table-row.js

@@ -0,0 +1,105 @@
+import { defineComponent, ref, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, toDisplayString, Fragment, renderList, createVNode, withCtx, createCommentVNode, renderSlot } from "vue";
+import { ElIcon } from "element-plus";
+import { ArrowDown } from "../../icons";
+const _sfc_main = defineComponent({
+  name: "TableRow",
+  components: { ElIcon, 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 = 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 = resolveComponent("ArrowDown");
+  const _component_ElIcon = resolveComponent("ElIcon");
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(["ele-tree-table-row", { "is-collapse": _ctx.isCollapse }])
+  }, [
+    createElementVNode("div", {
+      style: normalizeStyle({
+        width: `${_ctx.indexColWidth}px`,
+        left: `${(_ctx.level - 1) * _ctx.indexColWidth}px`
+      }),
+      class: normalizeClass([
+        "ele-tree-table-cell is-tree-index is-fixed-left",
+        { "is-fixed-left-last": _ctx.depth === _ctx.level }
+      ])
+    }, toDisplayString(_ctx.rowIndex + 1), 7),
+    createElementVNode("div", _hoisted_1, [
+      createElementVNode("div", _hoisted_2, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.depth - _ctx.level, (num) => {
+          return openBlock(), createElementBlock("div", {
+            key: num,
+            style: normalizeStyle({
+              width: `${_ctx.indexColWidth}px`,
+              left: `${(_ctx.level - 1 + num) * _ctx.indexColWidth}px`,
+              textAlign: _ctx.hasChildren && num === 1 ? "left" : void 0
+            }),
+            class: 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 ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              class: normalizeClass(["ele-tree-table-expand", { "is-collapse": _ctx.isCollapse }]),
+              onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleExpandClick && _ctx.handleExpandClick(...args))
+            }, [
+              createVNode(_component_ElIcon, null, {
+                default: withCtx(() => [
+                  createVNode(_component_ArrowDown)
+                ]),
+                _: 1
+              })
+            ], 2)) : createCommentVNode("", true)
+          ], 6);
+        }), 128)),
+        renderSlot(_ctx.$slots, "cells")
+      ]),
+      renderSlot(_ctx.$slots, "default")
+    ])
+  ], 2);
+}
+const tableRow = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  tableRow as default
+};

package/es/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/es/ele-tree-table/index.js

@@ -0,0 +1,155 @@
+import { defineComponent, ref, watch, nextTick, onMounted, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, Fragment, renderList, renderSlot, createTextVNode, toDisplayString, createBlock, createSlots, withCtx, normalizeProps, guardReactiveProps } from "vue";
+import TableBody from "./components/table-body";
+import { treeTableProps } from "./props";
+const _sfc_main = defineComponent({
+  name: "EleTreeTable",
+  components: { TableBody },
+  props: treeTableProps,
+  setup(props) {
+    const tableRef = ref(null);
+    const depth = ref(1);
+    const isPingLeft = ref(false);
+    const isPingRight = 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;
+    };
+    watch(
+      () => props.data,
+      (data) => {
+        depth.value = getTreeDepth(data);
+      },
+      {
+        immediate: true,
+        deep: true
+      }
+    );
+    watch(
+      () => props.columns,
+      () => {
+        nextTick(() => {
+          checkTableScrollPing(tableRef.value);
+        });
+      },
+      { deep: true }
+    );
+    onMounted(() => {
+      checkTableScrollPing(tableRef.value);
+    });
+    return {
+      tableRef,
+      depth,
+      isPingLeft,
+      isPingRight,
+      handleTableScroll
+    };
+  }
+});
+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" };
+const _hoisted_2 = {
+  key: 1,
+  class: "ele-tree-table-empty"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_TableBody = resolveComponent("TableBody");
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass([
+      "ele-tree-table-wrapper",
+      { "is-ping-left": _ctx.isPingLeft },
+      { "is-ping-right": _ctx.isPingRight }
+    ])
+  }, [
+    createElementVNode("div", {
+      ref: "tableRef",
+      class: "ele-tree-table",
+      style: normalizeStyle({ height: _ctx.height }),
+      onScroll: _cache[0] || (_cache[0] = (...args) => _ctx.handleTableScroll && _ctx.handleTableScroll(...args))
+    }, [
+      createElementVNode("div", {
+        class: "ele-tree-table-main",
+        style: normalizeStyle(_ctx.tableStyle)
+      }, [
+        createElementVNode("div", {
+          class: "ele-tree-table-header",
+          style: normalizeStyle(_ctx.headerStyle)
+        }, [
+          createElementVNode("div", _hoisted_1, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.depth, (num) => {
+              return openBlock(), createElementBlock("div", {
+                key: num,
+                style: normalizeStyle({
+                  width: `${_ctx.indexColWidth}px`,
+                  left: `${(num - 1) * _ctx.indexColWidth}px`
+                }),
+                class: 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)),
+            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.columns || [], (col) => {
+              return openBlock(), createElementBlock("div", {
+                key: col.key ?? col.prop,
+                style: normalizeStyle(col.style),
+                class: normalizeClass([col.class, "ele-tree-table-cell"])
+              }, [
+                renderSlot(_ctx.$slots, "headerCell", { column: col }, () => [
+                  createTextVNode(toDisplayString(col.label), 1)
+                ])
+              ], 6);
+            }), 128))
+          ])
+        ], 4),
+        _ctx.data && _ctx.data.length ? (openBlock(), createBlock(_component_TableBody, {
+          key: 0,
+          data: _ctx.data,
+          columns: _ctx.columns || [],
+          level: 1,
+          depth: _ctx.depth,
+          indexColWidth: _ctx.indexColWidth,
+          class: "ele-tree-table-body"
+        }, createSlots({ _: 2 }, [
+          renderList(Object.keys(_ctx.$slots), (name) => {
+            return {
+              name,
+              fn: withCtx((slotProps) => [
+                renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(slotProps || {})))
+              ])
+            };
+          })
+        ]), 1032, ["data", "columns", "depth", "indexColWidth"])) : (openBlock(), createElementBlock("div", _hoisted_2, "无数据"))
+      ], 4)
+    ], 36)
+  ], 2);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  index as default
+};

package/es/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/es/ele-tree-table/props.js

@@ -0,0 +1,20 @@
+const treeTableProps = {
+  /** 数据 */
+  data: Array,
+  /** 列配置 */
+  columns: Array,
+  /** 表格高度 */
+  height: String,
+  /** 表格样式 */
+  tableStyle: [Object, Array, String],
+  /** 表头样式 */
+  headerStyle: [Object, Array, String],
+  /** 序号列宽度 */
+  indexColWidth: {
+    type: Number,
+    default: 24
+  }
+};
+export {
+  treeTableProps
+};

package/es/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/es/ele-tree-table/style/index.d.ts

@@ -0,0 +1 @@
+

package/es/ele-tree-table/style/index.js

@@ -0,0 +1,2 @@
+import "element-plus/es/components/icon/style/index";
+import "./index.scss";