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

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

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;
+}

package/lib/style/plus.scss

@@ -34,6 +34,7 @@
 @use '../ele-segmented/style/index.scss' as segmented;
 @use '../ele-split-panel/style/index.scss' as splitPanel;
 @use '../ele-steps/style/index.scss' as steps;
+@use '../ele-tab-bar/style/index.scss' as tabBar;
 @use '../ele-tabs/style/index.scss' as tabs;
 @use '../ele-table/style/index.scss' as table;
 @use '../ele-table-select/style/index.scss' as tableSelect;
@@ -44,5 +45,6 @@
 @use '../ele-tooltip/style/index.scss' as tooltip;
 @use '../ele-tour/style/index.scss' as tour;
 @use '../ele-tree-select/style/index.scss' as treeSelect;
+@use '../ele-tree-table/style/index.scss' as treeTable;
 @use '../ele-upload-list/style/index.scss' as uploadList;
 @use '../ele-virtual-table/style/index.scss' as virtualTable;