ele-admin-plus 1.0.2 → 1.1.0

package/es/ele-pro-layout/util.js

@@ -201,11 +201,11 @@ function useWindowListener(option, props) {
     }, 600);
   });
 }
-function useMenuScroll(func) {
+function useMenuScroll(getEl) {
   const state = { timer: null };
   const scrollIntoView = () => {
     state.timer && clearTimeout(state.timer);
-    const menuEl = func();
+    const menuEl = getEl();
     if (menuEl) {
       const el = menuEl.querySelector(".el-menu-item.is-active");
       if (el) {
@@ -215,21 +215,32 @@ function useMenuScroll(func) {
           } else {
             el.scrollIntoView({ behavior: "smooth", block: "center" });
           }
-        }, 380);
+        }, 420);
       }
     }
   };
+  onMounted(() => {
+    scrollIntoView();
+  });
   onBeforeUnmount(() => {
     state.timer && clearTimeout(state.timer);
   });
   return { scrollIntoView };
 }
-function disableTransition() {
+function useDisableTransition() {
+  const state = { timer: null };
   const classes = "ele-transition-disabled";
-  document.body.classList.add(classes);
-  return setTimeout(() => {
-    document.body.classList.remove(classes);
-  }, 100);
+  const disableTransition = () => {
+    state.timer && clearTimeout(state.timer);
+    document.body.classList.add(classes);
+    state.timer = setTimeout(() => {
+      document.body.classList.remove(classes);
+    }, 100);
+  };
+  onBeforeUnmount(() => {
+    state.timer && clearTimeout(state.timer);
+  });
+  return { disableTransition };
 }
 function getMenuItems(menus) {
   return mapTree(menus, (m) => {
@@ -250,7 +261,6 @@ function getMenuItems(menus) {
   });
 }
 export {
-  disableTransition,
   findMenuByPath,
   findTabByPath,
   getActiveChilds,
@@ -263,6 +273,7 @@ export {
   getRouteMatched,
   getRouteTab,
   isHomeRoute,
+  useDisableTransition,
   useMenuScroll,
   useWindowListener
 };

package/es/ele-pro-table/components/table-tools.d.ts

@@ -1,6 +1,6 @@
 import type { PropType } from 'vue';
 import type { Columns, TableTool, TableSize, TableLocale } from '../types';
-declare const _sfc_main: import("vue").DefineComponent<{
+declare const _default: import("vue").DefineComponent<{
     size: StringConstructor;
     columns: PropType<Columns>;
     tools: PropType<TableTool[] | null>;
@@ -31,13 +31,13 @@ declare const _sfc_main: import("vue").DefineComponent<{
     cacheKey: StringConstructor;
     locale: PropType<TableLocale>;
 }>> & {
+    "onUpdate:columns"?: ((_columns: Columns) => any) | undefined;
     onReload?: (() => any) | undefined;
     "onUpdate:size"?: ((_size: "" | "default" | "small" | "large" | undefined) => any) | undefined;
-    "onUpdate:columns"?: ((_columns: Columns) => any) | undefined;
     "onUpdate:maximized"?: ((_maximized: boolean) => any) | undefined;
 }, {
     maximized: boolean;
     columnSortable: boolean;
     columnFixed: boolean;
 }, {}>;
-export default _sfc_main;
+export default _default;

package/es/ele-pro-table/components/table-tools.js

@@ -1,22 +1,21 @@
-import { defineComponent, computed, resolveComponent, openBlock, createElementBlock, Fragment, renderList, createBlock, withCtx, createVNode, createCommentVNode, normalizeClass, createTextVNode, toDisplayString } from "vue";
-import { ElDropdown, ElDropdownMenu, ElDropdownItem, ElIcon } from "element-plus";
+import { defineComponent, computed, resolveComponent, openBlock, createElementBlock, Fragment, renderList, createBlock, withCtx, createVNode, createCommentVNode } from "vue";
+import { ElIcon } from "element-plus";
 import { RefreshRight } from "@element-plus/icons-vue";
 import { ColumnHeightOutlined, FullscreenOutlined, FullscreenExitOutlined } from "../../icons";
 import { useLocale } from "../../ele-config-provider/receiver";
+import EleDropdown from "../../ele-dropdown/index";
 import EleTool from "../../ele-tool/index";
 import ToolColumn from "./tool-column";
 import { getSizeCacheKey } from "../util";
 const _sfc_main = defineComponent({
   name: "TableTools",
   components: {
-    ElDropdown,
-    ElDropdownMenu,
-    ElDropdownItem,
     ElIcon,
     RefreshRight,
     ColumnHeightOutlined,
     FullscreenOutlined,
     FullscreenExitOutlined,
+    EleDropdown,
     EleTool,
     ToolColumn
   },
@@ -86,9 +85,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_ElIcon = resolveComponent("ElIcon");
   const _component_EleTool = resolveComponent("EleTool");
   const _component_ColumnHeightOutlined = resolveComponent("ColumnHeightOutlined");
-  const _component_ElDropdownItem = resolveComponent("ElDropdownItem");
-  const _component_ElDropdownMenu = resolveComponent("ElDropdownMenu");
-  const _component_ElDropdown = resolveComponent("ElDropdown");
+  const _component_EleDropdown = resolveComponent("EleDropdown");
   const _component_ToolColumn = resolveComponent("ToolColumn");
   const _component_FullscreenExitOutlined = resolveComponent("FullscreenExitOutlined");
   const _component_FullscreenOutlined = resolveComponent("FullscreenOutlined");
@@ -116,46 +113,21 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         title: _ctx.lang.sizes
       }, {
         default: withCtx(() => [
-          createVNode(_component_ElDropdown, {
+          createVNode(_component_EleDropdown, {
             trigger: "click",
-            placement: "bottom-end",
+            placement: "bottom",
             popperClass: "ele-tool-size-popper",
+            modelValue: _ctx.size,
+            items: [
+              { title: _ctx.lang.sizeLarge, command: "large" },
+              { title: _ctx.lang.sizeDefault, command: "default" },
+              { title: _ctx.lang.sizeSmall, command: "small" }
+            ],
+            popperOptions: {
+              modifiers: [{ name: "offset", options: { offset: [0, 10] } }]
+            },
             onCommand: _ctx.updateSize
           }, {
-            dropdown: withCtx(() => [
-              createVNode(_component_ElDropdownMenu, null, {
-                default: withCtx(() => [
-                  createVNode(_component_ElDropdownItem, {
-                    command: "large",
-                    class: normalizeClass({ "is-active": _ctx.size === "large" })
-                  }, {
-                    default: withCtx(() => [
-                      createTextVNode(toDisplayString(_ctx.lang.sizeLarge), 1)
-                    ]),
-                    _: 1
-                  }, 8, ["class"]),
-                  createVNode(_component_ElDropdownItem, {
-                    command: "default",
-                    class: normalizeClass({ "is-active": _ctx.size === "default" })
-                  }, {
-                    default: withCtx(() => [
-                      createTextVNode(toDisplayString(_ctx.lang.sizeDefault), 1)
-                    ]),
-                    _: 1
-                  }, 8, ["class"]),
-                  createVNode(_component_ElDropdownItem, {
-                    command: "small",
-                    class: normalizeClass({ "is-active": _ctx.size === "small" })
-                  }, {
-                    default: withCtx(() => [
-                      createTextVNode(toDisplayString(_ctx.lang.sizeSmall), 1)
-                    ]),
-                    _: 1
-                  }, 8, ["class"])
-                ]),
-                _: 1
-              })
-            ]),
             default: withCtx(() => [
               createVNode(_component_ElIcon, null, {
                 default: withCtx(() => [
@@ -165,7 +137,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               })
             ]),
             _: 1
-          }, 8, ["onCommand"])
+          }, 8, ["modelValue", "items", "onCommand"])
         ]),
         _: 2
       }, 1032, ["placement", "title"])) : createCommentVNode("", true),

package/es/ele-pro-table/components/table-view.d.ts

@@ -7,9 +7,9 @@ declare const _default: import("vue").DefineComponent<{
     };
     loading: BooleanConstructor;
     pageIndex: NumberConstructor;
-    data: {
-        type: import("vue").PropType<any[]>;
-        default: () => never[];
+    headerEllipsis: {
+        type: BooleanConstructor;
+        default: boolean;
     };
     size: {
         readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
@@ -17,13 +17,23 @@ declare const _default: import("vue").DefineComponent<{
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
     };
-    width: (StringConstructor | NumberConstructor)[];
-    height: (StringConstructor | NumberConstructor)[];
     maxHeight: (StringConstructor | NumberConstructor)[];
+    width: (StringConstructor | NumberConstructor)[];
     fit: {
         type: BooleanConstructor;
         default: boolean;
     };
+    className: {
+        type: StringConstructor;
+        default: string;
+    };
+    lazy: BooleanConstructor;
+    showOverflowTooltip: import("vue").PropType<boolean | Partial<Pick<import("element-plus").ElTooltipProps, "offset" | "effect" | "placement" | "popperOptions" | "popperClass" | "enterable" | "showAfter" | "hideAfter" | "showArrow">> | undefined>;
+    data: {
+        type: import("vue").PropType<any[]>;
+        default: () => never[];
+    };
+    height: (StringConstructor | NumberConstructor)[];
     stripe: BooleanConstructor;
     border: BooleanConstructor;
     rowKey: import("vue").PropType<string | ((row: any) => string) | undefined>;
@@ -49,7 +59,7 @@ declare const _default: import("vue").DefineComponent<{
     defaultExpandAll: BooleanConstructor;
     defaultSort: import("vue").PropType<import("element-plus/es/components/table/src/table/defaults").Sort | undefined>;
     tooltipEffect: StringConstructor;
-    tooltipOptions: import("vue").PropType<Partial<Pick<import("element-plus").ElTooltipProps, "showArrow" | "effect" | "enterable" | "popperClass" | "offset" | "placement" | "popperOptions" | "showAfter" | "hideAfter">> | undefined>;
+    tooltipOptions: import("vue").PropType<Partial<Pick<import("element-plus").ElTooltipProps, "offset" | "effect" | "placement" | "popperOptions" | "popperClass" | "enterable" | "showAfter" | "hideAfter" | "showArrow">> | undefined>;
     spanMethod: import("vue").PropType<((data: {
         row: any;
         rowIndex: number;
@@ -77,14 +87,9 @@ declare const _default: import("vue").DefineComponent<{
             children: string;
         };
     };
-    lazy: BooleanConstructor;
     load: import("vue").PropType<((row: any, treeNode: import("element-plus/es/components/table/src/table/defaults").TreeNode, resolve: (data: any[]) => void) => void) | undefined>;
-    className: {
-        type: StringConstructor;
-        default: string;
-    };
     tableLayout: {
-        type: import("vue").PropType<"fixed" | "auto">;
+        type: import("vue").PropType<"auto" | "fixed">;
         default: string;
     };
     scrollbarAlwaysOn: {
@@ -133,9 +138,9 @@ declare const _default: import("vue").DefineComponent<{
     };
     loading: BooleanConstructor;
     pageIndex: NumberConstructor;
-    data: {
-        type: import("vue").PropType<any[]>;
-        default: () => never[];
+    headerEllipsis: {
+        type: BooleanConstructor;
+        default: boolean;
     };
     size: {
         readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "default" | "small" | "large", never>>;
@@ -143,13 +148,23 @@ declare const _default: import("vue").DefineComponent<{
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
     };
-    width: (StringConstructor | NumberConstructor)[];
-    height: (StringConstructor | NumberConstructor)[];
     maxHeight: (StringConstructor | NumberConstructor)[];
+    width: (StringConstructor | NumberConstructor)[];
     fit: {
         type: BooleanConstructor;
         default: boolean;
     };
+    className: {
+        type: StringConstructor;
+        default: string;
+    };
+    lazy: BooleanConstructor;
+    showOverflowTooltip: import("vue").PropType<boolean | Partial<Pick<import("element-plus").ElTooltipProps, "offset" | "effect" | "placement" | "popperOptions" | "popperClass" | "enterable" | "showAfter" | "hideAfter" | "showArrow">> | undefined>;
+    data: {
+        type: import("vue").PropType<any[]>;
+        default: () => never[];
+    };
+    height: (StringConstructor | NumberConstructor)[];
     stripe: BooleanConstructor;
     border: BooleanConstructor;
     rowKey: import("vue").PropType<string | ((row: any) => string) | undefined>;
@@ -175,7 +190,7 @@ declare const _default: import("vue").DefineComponent<{
     defaultExpandAll: BooleanConstructor;
     defaultSort: import("vue").PropType<import("element-plus/es/components/table/src/table/defaults").Sort | undefined>;
     tooltipEffect: StringConstructor;
-    tooltipOptions: import("vue").PropType<Partial<Pick<import("element-plus").ElTooltipProps, "showArrow" | "effect" | "enterable" | "popperClass" | "offset" | "placement" | "popperOptions" | "showAfter" | "hideAfter">> | undefined>;
+    tooltipOptions: import("vue").PropType<Partial<Pick<import("element-plus").ElTooltipProps, "offset" | "effect" | "placement" | "popperOptions" | "popperClass" | "enterable" | "showAfter" | "hideAfter" | "showArrow">> | undefined>;
     spanMethod: import("vue").PropType<((data: {
         row: any;
         rowIndex: number;
@@ -203,14 +218,9 @@ declare const _default: import("vue").DefineComponent<{
             children: string;
         };
     };
-    lazy: BooleanConstructor;
     load: import("vue").PropType<((row: any, treeNode: import("element-plus/es/components/table/src/table/defaults").TreeNode, resolve: (data: any[]) => void) => void) | undefined>;
-    className: {
-        type: StringConstructor;
-        default: string;
-    };
     tableLayout: {
-        type: import("vue").PropType<"fixed" | "auto">;
+        type: import("vue").PropType<"auto" | "fixed">;
         default: string;
     };
     scrollbarAlwaysOn: {
@@ -238,8 +248,11 @@ declare const _default: import("vue").DefineComponent<{
     onHeaderDragend?: ((_width: number, _old: number, _column: import("../types").Column, _e: MouseEvent) => any) | undefined;
     onExpandChange?: ((_row: import("../types").DataItem, _expanded: boolean) => any) | undefined;
 }, {
-    data: any[];
+    loading: boolean;
     fit: boolean;
+    className: string;
+    lazy: boolean;
+    data: any[];
     stripe: boolean;
     border: boolean;
     showHeader: boolean;
@@ -252,11 +265,9 @@ declare const _default: import("vue").DefineComponent<{
         hasChildren?: string | undefined;
         children?: string | undefined;
     } | undefined;
-    lazy: boolean;
-    className: string;
-    tableLayout: "fixed" | "auto";
+    tableLayout: "auto" | "fixed";
     scrollbarAlwaysOn: boolean;
     flexible: boolean;
-    loading: boolean;
+    headerEllipsis: boolean;
 }, {}>;
 export default _default;

package/es/ele-pro-table/components/table-view.js

@@ -11,6 +11,53 @@ const tableView = defineComponent({
     const tableIns = useTableMethods(() => tableRef.value);
     const tableEvents = useTableEvents(emit);
     const tableRef = ref(null);
+    const tableRowClassName = (option) => {
+      const classes = ["ele-table-tr"];
+      if (props.rowClassName != null) {
+        if (typeof props.rowClassName === "function") {
+          classes.push(props.rowClassName(option));
+        } else if (typeof props.rowClassName === "string" && props.rowClassName) {
+          classes.push(props.rowClassName);
+        }
+      }
+      return classes.join(" ");
+    };
+    const tableHeaderRowClassName = (option) => {
+      const classes = ["ele-table-head-tr"];
+      if (props.headerEllipsis) {
+        classes.push("is-ellipsis");
+      }
+      if (props.headerRowClassName != null) {
+        if (typeof props.headerRowClassName === "function") {
+          classes.push(props.headerRowClassName(option));
+        } else if (typeof props.headerRowClassName === "string" && props.headerRowClassName) {
+          classes.push(props.headerRowClassName);
+        }
+      }
+      return classes.join(" ");
+    };
+    const getTooltipProps = (opt, globalOpt) => {
+      if (!opt) {
+        return false;
+      }
+      const classes = [
+        "ele-popper",
+        "ele-tooltip",
+        "ele-table-tooltip"
+      ];
+      if (opt !== true && typeof opt === "object") {
+        if (opt.popperClass) {
+          classes.push(opt.popperClass);
+        } else if (globalOpt && typeof globalOpt === "object" && globalOpt.popperClass) {
+          classes.push(globalOpt.popperClass);
+        }
+        return { ...opt, popperClass: classes.join(" ") };
+      }
+      if (globalOpt && typeof globalOpt === "object" && globalOpt.popperClass) {
+        classes.push(globalOpt.popperClass);
+      }
+      return { popperClass: classes.join(" ") };
+    };
     const getCols = (cols, index, getSlot) => {
       const nodes = [];
       if (cols) {
@@ -21,6 +68,7 @@ const tableView = defineComponent({
               ElTableColumn,
               {
                 ...omit(col, [
+                  "showOverflowTooltip",
                   "id",
                   "slot",
                   "headerSlot",
@@ -28,12 +76,28 @@ const tableView = defineComponent({
                   "hideInSetting",
                   "children"
                 ]),
+                showOverflowTooltip: getTooltipProps(
+                  col.showOverflowTooltip,
+                  props.showOverflowTooltip
+                ),
                 key: col.id,
                 index: col.index ?? index
               },
               {
                 default: ts ? ts : () => getCols(col.children, index, getSlot),
-                header: col.headerSlot ? slots[col.headerSlot] : void 0
+                header: (slotProps) => {
+                  var _a;
+                  const title = (_a = slotProps == null ? void 0 : slotProps.column) == null ? void 0 : _a.label;
+                  let t = null;
+                  if (col.headerSlot && slots[col.headerSlot] != null && typeof slots[col.headerSlot] === "function") {
+                    t = slots[col.headerSlot](slotProps || {});
+                  }
+                  return h(
+                    "div",
+                    { class: "ele-cell-title", title },
+                    t ?? title
+                  );
+                }
               }
             )
           );
@@ -51,7 +115,9 @@ const tableView = defineComponent({
           {
             ...pick(props, tablePropKeys),
             ...tableEvents,
-            ref: tableRef
+            ref: tableRef,
+            rowClassName: tableRowClassName,
+            headerRowClassName: tableHeaderRowClassName
           },
           {
             default: () => getCols(props.columns, props.pageIndex, getSlot),

package/es/ele-pro-table/components/tool-column.d.ts

@@ -1,8 +1,8 @@
 import type { PropType } from 'vue';
 import type { Columns, ColItem } from '../types';
-declare const _sfc_main: import("vue").DefineComponent<{
+declare const _default: import("vue").DefineComponent<{
     title: StringConstructor;
-    placement: PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, import("element-plus").Placement, unknown>>;
+    placement: PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, import("element-plus").Placement, unknown> | undefined>;
     checkAllText: StringConstructor;
     resetText: StringConstructor;
     untitledText: StringConstructor;
@@ -38,7 +38,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
     'update:columns': (_columns: Columns) => true;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     title: StringConstructor;
-    placement: PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, import("element-plus").Placement, unknown>>;
+    placement: PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, import("element-plus").Placement, unknown> | undefined>;
     checkAllText: StringConstructor;
     resetText: StringConstructor;
     untitledText: StringConstructor;
@@ -54,4 +54,4 @@ declare const _sfc_main: import("vue").DefineComponent<{
     sortable: boolean;
     allowFixed: boolean;
 }, {}>;
-export default _sfc_main;
+export default _default;

package/es/ele-pro-table/components/tool-column.js

@@ -1,7 +1,9 @@
 import { defineComponent, ref, computed, watch, resolveComponent, openBlock, createBlock, withCtx, createVNode, createElementVNode, withModifiers, createTextVNode, toDisplayString, createElementBlock, createCommentVNode, normalizeClass } from "vue";
 import VueDraggable from "vuedraggable";
-import { ElPopover, ElCheckbox, ElCheckboxGroup, ElTooltip, ElIcon, ElLink } from "element-plus";
 import { Setting } from "@element-plus/icons-vue";
+import { ElCheckbox, ElCheckboxGroup, ElIcon, ElLink } from "element-plus";
+import EleTooltip from "../../ele-tooltip/index";
+import ElePopover from "../../ele-popover/index";
 import { HolderOutlined, VerticalRightOutlined, VerticalLeftOutlined } from "../../icons";
 import EleTool from "../../ele-tool/index";
 import { getSettingCols, getCheckedColumns, getColsCacheKey } from "../util";
@@ -9,12 +11,12 @@ const _sfc_main = defineComponent({
   name: "ToolColumn",
   components: {
     VueDraggable,
-    ElPopover,
     ElCheckbox,
     ElCheckboxGroup,
-    ElTooltip,
     ElIcon,
     ElLink,
+    EleTooltip,
+    ElePopover,
     Setting,
     HolderOutlined,
     VerticalRightOutlined,
@@ -214,19 +216,25 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_VerticalLeftOutlined = resolveComponent("VerticalLeftOutlined");
   const _component_VueDraggable = resolveComponent("VueDraggable");
   const _component_ElCheckboxGroup = resolveComponent("ElCheckboxGroup");
-  const _component_ElPopover = resolveComponent("ElPopover");
-  const _component_ElTooltip = resolveComponent("ElTooltip");
+  const _component_ElePopover = resolveComponent("ElePopover");
+  const _component_EleTooltip = resolveComponent("EleTooltip");
   const _component_EleTool = resolveComponent("EleTool");
   return openBlock(), createBlock(_component_EleTool, {
     title: _ctx.title,
     placement: _ctx.placement
   }, {
     default: withCtx(() => [
-      createVNode(_component_ElPopover, {
+      createVNode(_component_ElePopover, {
         trigger: "click",
         placement: "bottom-end",
         transition: "el-zoom-in-top",
-        popperClass: _ctx.popperClass
+        popperClass: _ctx.popperClass,
+        popperOptions: {
+          modifiers: [
+            { name: "arrow", options: { padding: 20 } },
+            { name: "offset", options: { offset: [20, 10] } }
+          ]
+        }
       }, {
         reference: withCtx(() => [
           createVNode(_component_ElIcon, null, {
@@ -348,7 +356,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         ]),
         _: 1
       }, 8, ["popperClass"]),
-      createVNode(_component_ElTooltip, {
+      createVNode(_component_EleTooltip, {
         placement: "top",
         virtualRef: _ctx.virtualRef,
         content: _ctx.tooltipContent,