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

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";

package/es/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/es/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/es/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;

package/es/style/themes/default.scss

@@ -620,6 +620,24 @@ $ele: map.deep-merge(
       'finish-line-color': elVar('color-primary'),
       'vertical-margin': 16px
     ),
+    'tab-bar': (
+      // 标签栏
+      'padding': 0,
+      'line-color': elVar('border-color', 'light'),
+      'height': 40px,
+      'space': 16px,
+      'font-size': elVar('font-size', 'base'),
+      'color': elVar('text-color', 'regular'),
+      'hover-color': elVar('color-primary'),
+      'hover-bg': transparent,
+      'active-color': elVar('color-primary'),
+      'active-bg': transparent,
+      'active-font-weight': normal,
+      'active-line-size': 2px,
+      'active-line-color': elVar('color-primary'),
+      'item-padding': 0 2px,
+      'item-radius': 0
+    ),
     'tab': (
       // 标签页
       'bg': elVar('bg-color'),

package/es/style/themes/theme-util.scss

@@ -24,6 +24,7 @@
 @use '../../ele-pro-table/style/css-var.scss' as *;
 @use '../../ele-segmented/style/css-var.scss' as *;
 @use '../../ele-steps/style/css-var.scss' as *;
+@use '../../ele-tab-bar/style/css-var.scss' as *;
 @use '../../ele-table/style/css-var.scss' as *;
 @use '../../ele-table-select/style/css-var.scss' as *;
 @use '../../ele-tabs/style/css-var.scss' as *;
@@ -33,6 +34,7 @@
 @use '../../ele-toolbar/style/css-var.scss' as *;
 @use '../../ele-tooltip/style/css-var.scss' as *;
 @use '../../ele-tree-select/style/css-var.scss' as *;
+@use '../../ele-tree-table/style/css-var.scss' as *;
 @use '../../ele-upload-list/style/css-var.scss' as *;
 @use '../../ele-virtual-table/style/css-var.scss' as *;
 
@@ -65,6 +67,7 @@
     @include set-pro-table-var($var);
     @include set-segmented-var($var);
     @include set-step-var($var);
+    @include set-tab-bar-var($var);
     @include set-table-var($var);
     @include set-table-select-var($var);
     @include set-tab-var($var);
@@ -74,6 +77,7 @@
     @include set-toolbar-var($var);
     @include set-tooltip-var($var);
     @include set-tree-select-var($var);
+    @include set-tree-table-var($var);
     @include set-upload-list-var($var);
     @include set-virtual-table-var($var);
   }