ele-admin-plus 1.2.0-beta.1 → 1.2.0-beta.3

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

@@ -1,9 +1,6 @@
 @use '../../style/themes/default.scss' as *;
 @use '../../style/util.scss' as *;
 @use './css-var.scss' as *;
-$ele-expand-path: 'M362 811 662 512 362 213' !default;
-$ele-loading-path: 'M512 128V299M789 235 672 352M896 512H725M789 789 672 672M512 896V725M235 789 352 672M128 512H299M235 235 352 352' !default;
-$ele-filter-path: 'M349 838c0 17 14 32 31 32h262c17 0 31-14 31-32V642H349v196ZM880 154H143c-24 0-39 26-27 48l221 376h348l221-376c12-21-3-48-27-48' !default;
 
 @include set-data-table-var($ele);
 @include table-var-style('body .ele-data-table.el-table');
@@ -54,11 +51,21 @@ $ele-filter-path: 'M349 838c0 17 14 32 31 32h262c17 0 31-14 31-32V642H349v196ZM8
     }
 
     & > .el-table__header-wrapper .ele-table-head-tr > th.el-table__cell,
-    & > .el-table__footer-wrapper > .el-table__footer .el-table__cell {
+    & > .el-table__body-wrapper .ele-table-head-tr > th.el-table__cell,
+    & > .el-table__footer-wrapper > .el-table__footer .el-table__cell,
+    &
+      > .el-table__body-wrapper
+      > .el-scrollbar
+      > .el-scrollbar__wrap
+      > .el-scrollbar__view
+      > .el-table__body
+      > .el-table__body-footer
+      .el-table__cell {
       background: eleVar('table', 'th-bg');
     }
 
-    & > .el-table__header-wrapper .ele-table-head-tr {
+    & > .el-table__header-wrapper .ele-table-head-tr,
+    & > .el-table__body-wrapper .ele-table-head-tr {
       & > .el-table__cell.is-sortable:hover {
         background: eleVar('table', 'sort-hover-bg');
       }
@@ -76,7 +83,7 @@ $ele-filter-path: 'M349 838c0 17 14 32 31 32h262c17 0 31-14 31-32V642H349v196ZM8
   }
 
   .ele-table-head-tr > .el-table__cell {
-    transition: background-color $ele-transition;
+    transition: background-color $transition-base;
 
     & > .cell {
       display: flex;
@@ -130,7 +137,7 @@ $ele-filter-path: 'M349 838c0 17 14 32 31 32h262c17 0 31-14 31-32V642H349v196ZM8
     .sort-caret {
       position: static;
       border: eleVar('table', 'sort-size') solid transparent;
-      transition: border-color $ele-transition;
+      transition: border-color $transition-base;
       box-sizing: border-box;
       pointer-events: none;
     }
@@ -174,17 +181,17 @@ $ele-filter-path: 'M349 838c0 17 14 32 31 32h262c17 0 31-14 31-32V642H349v196ZM8
     margin: eleVar('table', 'filter-margin');
     padding: eleVar('table', 'filter-padding');
     border-radius: eleVar('table', 'icon-radius');
-    transition: (color $ele-transition, background-color $ele-transition);
+    transition: (color $transition-base, background-color $transition-base);
     box-sizing: border-box;
     position: relative;
 
     & > .el-icon {
       color: eleVar('table', 'icon-color');
       font-size: eleVar('table', 'filter-size');
-      transition: (color $ele-transition, font-size $ele-transition);
+      transition: (color $transition-base, font-size $transition-base);
 
       & > svg > path {
-        #{'d'}: path($ele-filter-path);
+        #{'d'}: path($icon-filter-path);
       }
     }
 
@@ -214,7 +221,7 @@ $ele-filter-path: 'M349 838c0 17 14 32 31 32h262c17 0 31-14 31-32V642H349v196ZM8
       align-items: center;
       justify-content: center;
       border-radius: eleVar('table', 'icon-radius');
-      transition: (color $ele-transition, background-color $ele-transition);
+      transition: (color $transition-base, background-color $transition-base);
       transform: none;
 
       &:hover {
@@ -222,7 +229,7 @@ $ele-filter-path: 'M349 838c0 17 14 32 31 32h262c17 0 31-14 31-32V642H349v196ZM8
       }
 
       & > .el-icon {
-        transition: all $ele-transition;
+        transition: all $transition-base;
         font-size: inherit;
 
         & > svg > path {
@@ -231,13 +238,13 @@ $ele-filter-path: 'M349 838c0 17 14 32 31 32h262c17 0 31-14 31-32V642H349v196ZM8
           stroke-linecap: round;
           stroke-linejoin: round;
           stroke-width: 98;
-          #{'d'}: path($ele-expand-path);
+          #{'d'}: path($icon-expand-path);
         }
       }
 
       & > .is-loading > svg > path {
         stroke-width: 85;
-        #{'d'}: path($ele-loading-path);
+        #{'d'}: path($icon-loading-path);
       }
 
       & > .el-icon:not(.is-loading) > svg {
@@ -289,7 +296,15 @@ $ele-filter-path: 'M349 838c0 17 14 32 31 32h262c17 0 31-14 31-32V642H349v196ZM8
   }
 
   /* 表尾 */
-  & > .el-table__inner-wrapper > .el-table__footer-wrapper {
+  & > .el-table__inner-wrapper > .el-table__footer-wrapper,
+  &
+    > .el-table__inner-wrapper
+    > .el-table__body-wrapper
+    > .el-scrollbar
+    > .el-scrollbar__wrap
+    > .el-scrollbar__view
+    > .el-table__body
+    > .el-table__body-footer {
     border-top: 1px solid eleVar('table', 'border-color');
     margin-top: -1px;
     z-index: 3;
@@ -418,18 +433,15 @@ $ele-filter-path: 'M349 838c0 17 14 32 31 32h262c17 0 31-14 31-32V642H349v196ZM8
       top: eleVar('table', 'sticky-top');
     }
   }
-}
 
-/* 粘性头部适配布局风格 */
-.ele-admin-fixed-header:not(.ele-admin-maximized) .ele-data-table.is-sticky {
-  &.el-table > .el-table__inner-wrapper > .el-table__header-wrapper {
-    top: eleVar('table', 'fixed-header-sticky-top');
+  &.is-sticky.is-layout-fixed-head {
+    & > .el-table__inner-wrapper > .el-table__header-wrapper {
+      top: eleVar('table', 'fixed-header-sticky-top');
+    }
   }
-}
 
-.ele-admin-fixed-header.ele-admin-maximized:not(.ele-admin-expanded) {
-  &:not(.ele-admin-fixed-body) .ele-data-table.is-sticky {
-    &.el-table > .el-table__inner-wrapper > .el-table__header-wrapper {
+  &.is-sticky.is-layout-maximized {
+    & > .el-table__inner-wrapper > .el-table__header-wrapper {
       top: eleVar('table', 'maximized-sticky-top');
     }
   }
@@ -464,3 +476,99 @@ body .ele-popper.el-popper.ele-tooltip.ele-table-tooltip {
 .ele-table-tr > .is-index > .cell.el-tooltip > div {
   display: inline;
 }
+
+/* Filter */
+.ele-table-filter-popper {
+  &.el-table-filter {
+    position: fixed !important;
+  }
+
+  .el-table-filter__list {
+    padding: eleVar('table-filter', 'padding');
+    max-height: eleVar('table-filter', 'max-height');
+    box-sizing: border-box;
+    overflow: auto;
+  }
+
+  .el-table-filter__list-item {
+    color: eleVar('table-filter', 'item-color');
+    height: eleVar('table-filter', 'item-height');
+    line-height: eleVar('table-filter', 'item-height');
+    padding: eleVar('table-filter', 'item-padding');
+    border-radius: eleVar('table-filter', 'item-radius');
+    transition: (color $transition-base, background-color $transition-base);
+    box-sizing: border-box;
+
+    & + .el-table-filter__list-item {
+      margin-top: eleVar('table-filter', 'item-margin');
+    }
+
+    &:hover {
+      color: eleVar('table-filter', 'item-hover-color');
+      background: eleVar('table-filter', 'item-hover-bg');
+    }
+
+    &.is-active {
+      color: eleVar('table-filter', 'item-active-color');
+      background: eleVar('table-filter', 'item-active-bg');
+      font-weight: eleVar('table-filter', 'item-active-font-weight');
+
+      &:hover {
+        background: eleVar('table-filter', 'item-active-hover-bg');
+      }
+    }
+  }
+
+  .el-table-filter__wrap {
+    max-height: eleVar('table-filter', 'max-height');
+  }
+
+  @include filter-checkbox-style($transition-base);
+
+  .el-table-filter__bottom {
+    padding: eleVar('table-filter', 'footer-padding');
+    border-top: eleVar('table-filter', 'footer-border');
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+
+    & > button {
+      height: 24px;
+      line-height: 24px;
+      padding: 0 11px;
+      font-size: 12px;
+      color: elVar('text-color', 'regular');
+      border-radius: calc(#{elVar('border-radius', 'base')} - 1px);
+      transition: (color $transition-base, background-color $transition-base);
+      box-sizing: border-box;
+
+      &:hover {
+        background: elVar('fill-color', 'light');
+      }
+
+      &:active {
+        background: elVar('fill-color');
+      }
+
+      &:first-child {
+        order: 2;
+        color: #fff;
+        background: elVar('color-primary');
+        margin-left: 4px;
+
+        &:hover {
+          background: elVar('color-primary', 'light-3');
+        }
+
+        &:active {
+          background: elVar('color-primary', 'dark-2');
+        }
+
+        &.is-disabled {
+          background: elVar('color-primary', 'light-5');
+        }
+      }
+    }
+  }
+}

package/lib/ele-data-table/util.cjs

@@ -3,22 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const vue = require("vue");
 const elementPlus = require("element-plus");
 const core = require("../utils/core");
-function getValue(data, field) {
-  if (data == null) {
-    return;
-  }
-  if (typeof field === "function") {
-    return field(data);
-  }
-  if (field == null || field === "") {
-    return;
-  }
-  let value = data;
-  field.split(".").forEach((f) => {
-    value = value ? value[f] : null;
-  });
-  return value;
-}
+const util = require("../ele-pro-layout/util");
 function getCols(cols, pageIndex, slots, slotNormalize, globalTooltip) {
   const nodes = [];
   if (cols) {
@@ -29,6 +14,7 @@ function getCols(cols, pageIndex, slots, slotNormalize, globalTooltip) {
           {
             ...core.omit(col, [
               "showOverflowTooltip",
+              "filterClassName",
               "columnKey",
               "className",
               "uid",
@@ -42,6 +28,7 @@ function getCols(cols, pageIndex, slots, slotNormalize, globalTooltip) {
               col.showOverflowTooltip,
               globalTooltip
             ),
+            filterClassName: getFilterPopperClass(col.filterClassName),
             columnKey: col.columnKey ?? col.prop,
             className: getCellClass(col),
             index: col.index ?? pageIndex,
@@ -226,14 +213,10 @@ function getStateCols(cols, sorter, filter) {
   return { cols: result, sorter: hasSorter && hasSortCol ? sorter : void 0 };
 }
 function getSelectableFunction(columns) {
-  let selectable;
-  core.eachTree(columns, (col) => {
-    if (col.type === "selection") {
-      selectable = typeof col.selectable === "function" ? col.selectable : null;
-      return false;
-    }
-  });
-  return selectable;
+  const col = core.findTree(columns, (c) => c.type === "selection");
+  if (col != null) {
+    return typeof col.selectable === "function" ? col.selectable : null;
+  }
 }
 function isDisableRow(row, index, columns) {
   const selectable = getSelectableFunction(columns);
@@ -271,11 +254,18 @@ function getCellClass(col) {
   }
   return classes.length ? classes.join(" ") : void 0;
 }
+function getFilterPopperClass(filterClassName) {
+  const classes = ["ele-table-filter-popper"];
+  if (filterClassName) {
+    classes.push(filterClassName);
+  }
+  return classes.join(" ");
+}
 function getRowKeys(rows, rowKey) {
   const keys = [];
   if (rows) {
     rows.forEach((row) => {
-      const key = getValue(row, rowKey);
+      const key = core.getValue(row, rowKey);
       if (key != null) {
         keys.push(key);
       }
@@ -284,7 +274,7 @@ function getRowKeys(rows, rowKey) {
   return keys;
 }
 function getRowByKey(key, data, rowKey, childrenField) {
-  return core.findTree(data, (d) => getValue(d, rowKey) === key, childrenField);
+  return core.findTree(data, (d) => core.getValue(d, rowKey) === key, childrenField);
 }
 function getKeysAndList(data, rowKey, childrenField) {
   const keys = [];
@@ -292,7 +282,7 @@ function getKeysAndList(data, rowKey, childrenField) {
   core.eachTree(
     data,
     (d) => {
-      keys.push(getValue(d, rowKey));
+      keys.push(core.getValue(d, rowKey));
       list.push(d);
     },
     childrenField
@@ -316,6 +306,41 @@ function arrayIsChanged(list1, list2) {
   }
   return list1.some((k) => !list2.includes(k));
 }
+function useStickyHeader() {
+  const layoutState = util.useLayoutState();
+  const isLayoutFixedHead = vue.computed(() => layoutState.fixedHeader);
+  const isLayoutMaximized = vue.computed(
+    () => layoutState.maximized && layoutState.maximized !== "expanded"
+  );
+  return { isLayoutFixedHead, isLayoutMaximized };
+}
+function useScrollAlive(getInstance) {
+  let scrollTop;
+  let scrollLeft;
+  const getWrapEl = () => {
+    var _a;
+    const ins = getInstance();
+    return (_a = ins == null ? void 0 : ins.scrollBarRef) == null ? void 0 : _a.wrapRef;
+  };
+  vue.onDeactivated(() => {
+    const wrapEl = getWrapEl();
+    if (!wrapEl) {
+      scrollTop = void 0;
+      scrollLeft = void 0;
+      return;
+    }
+    scrollTop = wrapEl.scrollTop;
+    scrollLeft = wrapEl.scrollLeft;
+  });
+  vue.onActivated(() => {
+    const ins = getInstance();
+    if (ins && (scrollTop || scrollLeft)) {
+      ins.scrollTo(scrollLeft || 0, scrollTop || 0);
+      scrollTop = void 0;
+      scrollLeft = void 0;
+    }
+  });
+}
 function useMethods(getInstance) {
   const methods = {
     clearSelection: () => {
@@ -474,6 +499,7 @@ exports.getColFixedNumber = getColFixedNumber;
 exports.getCols = getCols;
 exports.getEmptyProps = getEmptyProps;
 exports.getEmptySlot = getEmptySlot;
+exports.getFilterPopperClass = getFilterPopperClass;
 exports.getGlobalTooltipProps = getGlobalTooltipProps;
 exports.getHeadRowClass = getHeadRowClass;
 exports.getKeysAndList = getKeysAndList;
@@ -485,7 +511,6 @@ exports.getSlot = getSlot;
 exports.getStateCols = getStateCols;
 exports.getTableFilter = getTableFilter;
 exports.getTooltipProps = getTooltipProps;
-exports.getValue = getValue;
 exports.isDisableRow = isDisableRow;
 exports.isReserveChecked = isReserveChecked;
 exports.mergeTooltipProps = mergeTooltipProps;
@@ -493,4 +518,6 @@ exports.renderSlot = renderSlot;
 exports.toggleRowSelectionPro = toggleRowSelectionPro;
 exports.useEmits = useEmits;
 exports.useMethods = useMethods;
+exports.useScrollAlive = useScrollAlive;
+exports.useStickyHeader = useStickyHeader;
 exports.valueIsChanged = valueIsChanged;

package/lib/ele-data-table/util.d.ts

@@ -1,15 +1,9 @@
-import { DataKey, DataItem, Column, Columns, Sorter, Filter, GetInstance, TableMethods, ShowOverflowTooltip, TooltipEffect, TooltipOptions, RowClass, RowKey } from './types';
-import { dataTableEmits } from './props';
-import { ElEmptyProps, ElTableInstance } from '../ele-app/el';
-import { Emitter } from '../ele-app/types';
 import { Slots, VNode } from 'vue';
+import { Emitter } from '../ele-app/types';
+import { ElEmptyProps, ElTableInstance } from '../ele-app/el';
+import { dataTableEmits } from './props';
+import { DataKey, DataItem, Column, Columns, Sorter, Filter, GetInstance, TableMethods, ShowOverflowTooltip, TooltipEffect, TooltipOptions, RowClass, RowKey } from './types';
 
-/**
- * 获取数据某字段值
- * @param data 数据
- * @param field 字段, 可嵌套 a.b.c
- */
-export declare function getValue<T, K>(data?: K, field?: string | ((d: K) => T)): T | undefined | null;
 /**
  * 递归获取表格列节点
  * @param cols 列配置
@@ -143,6 +137,11 @@ export declare function getColFixedNumber(fixed?: boolean | string): 0 | 1 | 2;
  * @param col 列属性
  */
 export declare function getCellClass(col: Column): string | undefined;
+/**
+ * 获取列筛选下拉框类名
+ * @param filterClassName 自定义类名
+ */
+export declare function getFilterPopperClass(filterClassName?: string): string;
 /**
  * 获取数据值
  * @param rows 数据
@@ -176,6 +175,18 @@ export declare function valueIsChanged<T>(value1?: T | null, value2?: T | null):
  * @param list2 新数组
  */
 export declare function arrayIsChanged<T>(list1?: T[] | null, list2?: T[] | null): boolean;
+/**
+ * 使用粘性表头
+ */
+export declare function useStickyHeader(): {
+    isLayoutFixedHead: import('vue').ComputedRef<boolean | undefined>;
+    isLayoutMaximized: import('vue').ComputedRef<boolean | undefined>;
+};
+/**
+ * 表格滚动条适配 KeepAlive
+ * @param getInstance 获取表格实例方法
+ */
+export declare function useScrollAlive(getInstance: GetInstance): void;
 /**
  * 表格实例方法统一处理
  * @param getInstance 获取表格实例方法

package/lib/ele-dot/props.d.ts

@@ -1,5 +1,5 @@
-import { DotType } from './types';
 import { PropType, ExtractPropTypes } from 'vue';
+import { DotType } from './types';
 
 /**
  * 属性

package/lib/ele-dot/style/index.d.ts

@@ -0,0 +1 @@
+

package/lib/ele-drawer/index.cjs

@@ -2,9 +2,9 @@
 const vue = require("vue");
 const elementPlus = require("element-plus");
 const icons = require("../icons");
-const receiver = require("../ele-config-provider/receiver");
 const ReceiverView = require("../ele-config-provider/components/receiver-view");
-const util = require("../ele-modal/util");
+const util = require("../ele-pro-layout/util");
+const util$1 = require("../ele-modal/util");
 const props = require("./props");
 const _sfc_main = vue.defineComponent({
   name: "EleDrawer",
@@ -12,7 +12,7 @@ const _sfc_main = vue.defineComponent({
   props: props.drawerProps,
   emits: elementPlus.drawerEmits,
   setup(props2, { emit }) {
-    const layoutProvide = receiver.useLayoutState();
+    const layoutState = util.useLayoutState();
     const drawerRef = vue.ref(null);
     const isActivated = vue.ref(true);
     const drawerClass = vue.computed(() => {
@@ -32,11 +32,11 @@ const _sfc_main = vue.defineComponent({
       return classes.join(" ");
     });
     const teleportTo = vue.computed(() => {
-      return util.getModalContainer(
+      return util$1.getModalContainer(
         props2.inner,
         false,
         void 0,
-        layoutProvide.modalsEl
+        layoutState.modalsEl
       );
     });
     const handleClose = () => {

package/lib/ele-drawer/index.d.ts

@@ -145,21 +145,20 @@ declare const _default: import('vue').DefineComponent<{
     title: import('element-plus/es/utils/index').EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
     ariaLevel: import('element-plus/es/utils/index').EpPropFinalized<StringConstructor, unknown, unknown, "2", boolean>;
 }>> & {
-    onClose?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
-    onOpen?: (() => any) | undefined;
     onOpenAutoFocus?: (() => any) | undefined;
     onCloseAutoFocus?: (() => any) | undefined;
+    onClose?: (() => any) | undefined;
+    onOpen?: (() => any) | undefined;
     onOpened?: (() => any) | undefined;
     onClosed?: (() => any) | undefined;
 }, {
     size: import('element-plus/es/utils/index').EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>;
     title: string;
     center: boolean;
-    showClose: import('element-plus/es/utils/index').EpPropMergeType<BooleanConstructor, unknown, unknown>;
     modelValue: boolean;
-    appendTo: string;
     appendToBody: boolean;
+    appendTo: string;
     destroyOnClose: boolean;
     closeOnClickModal: import('element-plus/es/utils/index').EpPropMergeType<BooleanConstructor, unknown, unknown>;
     closeOnPressEscape: import('element-plus/es/utils/index').EpPropMergeType<BooleanConstructor, unknown, unknown>;
@@ -173,6 +172,7 @@ declare const _default: import('vue').DefineComponent<{
     draggable: boolean;
     overflow: boolean;
     fullscreen: boolean;
+    showClose: import('element-plus/es/utils/index').EpPropMergeType<BooleanConstructor, unknown, unknown>;
     ariaLevel: string;
     direction: import('element-plus/es/utils/index').EpPropMergeType<StringConstructor, "ltr" | "rtl" | "ttb" | "btt", unknown>;
     withHeader: import('element-plus/es/utils/index').EpPropMergeType<BooleanConstructor, unknown, unknown>;

package/lib/ele-drawer/style/index.cjs

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

package/lib/ele-drawer/style/index.d.ts

@@ -0,0 +1 @@
+

package/lib/ele-drawer/style/index.scss

@@ -58,7 +58,7 @@
   color: eleVar('drawer', 'icon-color');
   font-size: eleVar('drawer', 'icon-font-size');
   border-radius: eleVar('drawer', 'icon-radius');
-  transition: (color $ele-transition, background-color $ele-transition);
+  transition: (color $transition-base, background-color $transition-base);
   box-sizing: border-box;
   cursor: pointer;
 
@@ -91,6 +91,6 @@
   position: absolute !important;
 
   &:not(.el-drawer-fade-leave-active):not(.el-drawer-fade-enter-active) {
-    transition: (width $ele-transition, left $ele-transition);
+    transition: (width $transition-base, left $transition-base);
   }
 }

package/lib/ele-dropdown/index.cjs

@@ -105,7 +105,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                 class: [
                   { "is-active": _ctx.modelValue === item.command },
                   { "is-danger": !!item.danger }
-                ]
+                ],
+                ref_for: true
               },
               _ctx.omit(item, [
                 "icon",
@@ -121,7 +122,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                   key: 0,
                   item
                 }) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
-                  item.icon ? (vue.openBlock(), vue.createBlock(_component_ElIcon, vue.normalizeProps(vue.mergeProps({ key: 0 }, { ..._ctx.iconProps || {}, ...item.iconProps || {} })), {
+                  item.icon ? (vue.openBlock(), vue.createBlock(_component_ElIcon, vue.mergeProps({
+                    key: 0,
+                    ref_for: true
+                  }, { ..._ctx.iconProps || {}, ...item.iconProps || {} }), {
                     default: vue.withCtx(() => [
                       (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(item.icon), {
                         style: vue.normalizeStyle(item.iconStyle)