ele-admin-plus 1.3.0-beta.2 → 1.3.0-beta.4

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

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

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

@@ -0,0 +1,60 @@
+declare function __VLS_template(): {
+    cells?(_: {}): any;
+    default?(_: {}): any;
+};
+declare const __VLS_component: import('vue').DefineComponent<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;
+    };
+}>, {}, {}, {}, {}, 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;
+    };
+}>> & Readonly<{}>, {
+    hasChildren: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,140 @@
+"use strict";
+const vue = require("vue");
+const TableBody = require("./components/table-body");
+const props = require("./props");
+const _hoisted_1 = { class: "ele-tree-table-row" };
+const _hoisted_2 = {
+  key: 1,
+  class: "ele-tree-table-empty"
+};
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{ name: "EleTreeTable" },
+  __name: "index",
+  props: props.treeTableProps,
+  setup(__props) {
+    const props2 = __props;
+    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 (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        class: vue.normalizeClass([
+          "ele-tree-table-wrapper",
+          { "is-ping-left": isPingLeft.value },
+          { "is-ping-right": isPingRight.value }
+        ])
+      }, [
+        vue.createElementVNode("div", {
+          ref_key: "tableRef",
+          ref: tableRef,
+          class: "ele-tree-table",
+          style: vue.normalizeStyle({ height: _ctx.height }),
+          onScroll: handleTableScroll
+        }, [
+          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(depth.value, (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 === depth.value }
+                    ])
+                  }, 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(TableBody, {
+              key: 0,
+              data: _ctx.data,
+              columns: _ctx.columns || [],
+              level: 1,
+              depth: depth.value,
+              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);
+    };
+  }
+});
+module.exports = _sfc_main;

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

@@ -0,0 +1,35 @@
+declare function __VLS_template(): Partial<Record<string, (_: any) => any>> & {
+    headerCell?(_: {
+        column: import('./types').TreeTableColumn;
+    }): any;
+};
+declare const __VLS_component: import('vue').DefineComponent<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;
+    };
+}>, {}, {}, {}, {}, 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;
+    };
+}>> & Readonly<{}>, {
+    indexColWidth: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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 @@
+

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

@@ -0,0 +1,224 @@
+@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-tree-table-var($ele);
+
+.ele-tree-table-wrapper {
+  border-top: 1px solid eleVar('table', 'border-color');
+  border-right: 1px solid eleVar('table', 'border-color');
+  border-radius: eleVar('table', 'radius');
+  box-sizing: border-box;
+  position: relative;
+  overflow: hidden;
+
+  &::after,
+  &::before {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    box-sizing: border-box;
+    pointer-events: none;
+    z-index: 5;
+  }
+
+  &::after {
+    height: calc(1px + #{eleVar('table', 'radius')});
+    left: 0;
+    right: 0;
+    border-bottom: 1px solid eleVar('table', 'border-color');
+    border-bottom-right-radius: eleVar('table', 'radius');
+    border-bottom-left-radius: eleVar('table', 'radius');
+  }
+
+  &::before {
+    width: calc(1px + #{eleVar('table', 'radius')});
+    top: 0;
+    left: 0;
+    border-left: 1px solid eleVar('table', 'border-color');
+    border-bottom-left-radius: eleVar('table', 'radius');
+    border-top-left-radius: eleVar('table', 'radius');
+  }
+}
+
+/* 表格 */
+.ele-tree-table {
+  color: eleVar('table', 'color');
+  font-size: eleVar('table', 'font-size');
+  line-height: eleVar('table', 'line-height');
+  box-sizing: border-box;
+  overflow: auto;
+}
+
+.ele-tree-table-main {
+  min-width: max-content;
+  box-sizing: border-box;
+}
+
+.ele-tree-table-row,
+.ele-tree-table-cells {
+  display: flex;
+  box-sizing: border-box;
+}
+
+/* 单元格 */
+.ele-tree-table-cell {
+  padding: eleVar('table', 'padding');
+  background: eleVar('table', 'tr-bg');
+  border-left: 1px solid eleVar('table', 'border-color');
+  border-bottom: 1px solid eleVar('table', 'border-color');
+  transition: background-color $transition-base;
+  box-sizing: border-box;
+  overflow: hidden;
+
+  &:not(.is-tree-index) {
+    flex: 1;
+    text-overflow: ellipsis;
+  }
+
+  &.is-tree-index {
+    flex-shrink: 0;
+    padding-left: 0;
+    padding-right: 0;
+    white-space: nowrap;
+    word-break: break-all;
+    text-align: center;
+
+    &.is-placeholder {
+      border-left: none;
+    }
+  }
+}
+
+/* 表头 */
+.ele-tree-table-header {
+  color: eleVar('table', 'th-color');
+  font-weight: eleVar('table', 'th-font-weight');
+  box-sizing: border-box;
+  position: sticky;
+  top: 0;
+  z-index: 4;
+
+  .ele-tree-table-cell {
+    background: eleVar('table', 'th-bg');
+  }
+}
+
+/* 主体 */
+.ele-tree-table-row-body {
+  flex: 1;
+  box-sizing: border-box;
+}
+
+/* 行鼠标移入状态 */
+.ele-tree-table-cells:hover .ele-tree-table-cell,
+.ele-tree-table-body .ele-tree-table-row > .ele-tree-table-cell:hover {
+  background: eleVar('table', 'tr-hover-bg');
+}
+
+.ele-tree-table-cell:hover + .ele-tree-table-row-body > .ele-tree-table-cells {
+  .ele-tree-table-cell {
+    background: eleVar('table', 'tr-hover-bg');
+  }
+}
+
+.ele-tree-table-cell {
+  &:has(+ .ele-tree-table-row-body > .ele-tree-table-cells:hover) {
+    background: eleVar('table', 'tr-hover-bg');
+  }
+}
+
+/* 空状态 */
+.ele-tree-table-empty {
+  padding: eleVar('table', 'padding');
+  box-sizing: border-box;
+  text-align: center;
+}
+
+/* 固定列 */
+.ele-tree-table-cell.is-fixed-left,
+.ele-tree-table-cell.is-fixed-right {
+  position: sticky;
+  z-index: 3;
+}
+
+.ele-tree-table-cell.is-fixed-left {
+  left: 0;
+}
+
+.ele-tree-table-cell.is-fixed-right {
+  right: 0;
+}
+
+.ele-tree-table-cell.is-fixed-left-last,
+.ele-tree-table-cell.is-fixed-right-first {
+  overflow: visible;
+
+  &::before {
+    content: '';
+    width: 10px;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    transition: box-shadow $transition-base;
+    pointer-events: none;
+  }
+}
+
+.ele-tree-table-cell.is-fixed-left-last::before {
+  right: -10px;
+}
+
+.ele-tree-table-cell.is-fixed-right-first::before {
+  left: -10px;
+}
+
+.ele-tree-table-wrapper {
+  &.is-ping-left .ele-tree-table-cell.is-fixed-left-last {
+    border-right-color: transparent;
+
+    &::before {
+      box-shadow: eleVar('table', 'fixed-left-shadow');
+    }
+  }
+
+  &.is-ping-right .ele-tree-table-cell.is-fixed-right-first {
+    border-left-color: transparent;
+
+    &::before {
+      box-shadow: eleVar('table', 'fixed-right-shadow');
+    }
+  }
+}
+
+/* 展开图标 */
+.ele-tree-table-expand {
+  width: 16px;
+  height: 16px;
+  font-size: 12px;
+  vertical-align: -1px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: eleVar('table', 'icon-radius');
+  transition: (color $transition-base, background-color $transition-base);
+  cursor: pointer;
+
+  & > .el-icon {
+    transition: all $transition-base;
+  }
+
+  &.is-collapse > .el-icon {
+    transform: rotate(-90deg);
+  }
+
+  &:hover {
+    background: eleVar('table', 'icon-hover-bg');
+  }
+}
+
+.ele-tree-table-row.is-collapse {
+  & > .ele-tree-table-row-body > .ele-tree-table-children {
+    display: none;
+  }
+}

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

@@ -0,0 +1,27 @@
+import type { StyleValue } from '../ele-app/types';
+
+/**
+ * 树表格数据
+ */
+export interface TreeTableDataItem extends Record<string, any> {
+  /** key */
+  key: any;
+  /** 子级 */
+  children?: TreeTableDataItem[];
+}
+
+/**
+ * 树表格列配置
+ */
+export interface TreeTableColumn extends Record<string, any> {
+  /** key */
+  key?: string;
+  /** 标题 */
+  label?: string;
+  /** 属性名 */
+  prop?: string;
+  /** 样式 */
+  style?: StyleValue;
+  /** 类名 */
+  class?: string;
+}