ele-admin-plus 1.0.2 → 1.1.0

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

@@ -0,0 +1,143 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+import type { StyleValue } from '../ele-app/types';
+/**
+ * 属性
+ */
+export declare const popoverProps: {
+    bodyClass: StringConstructor;
+    bodyStyle: PropType<StyleValue>;
+    titleStyle: PropType<StyleValue>;
+    contentStyle: PropType<StyleValue>;
+    offset: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, undefined, boolean>;
+    trigger: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => "hover" | "focus" | "click" | "contextmenu" | import("element-plus").TooltipTriggerType[]) | (() => import("element-plus/es/utils").Arrayable<import("element-plus").TooltipTriggerType>) | ((new (...args: any[]) => "hover" | "focus" | "click" | "contextmenu" | import("element-plus").TooltipTriggerType[]) | (() => import("element-plus/es/utils").Arrayable<import("element-plus").TooltipTriggerType>))[], unknown, unknown, "hover", boolean>;
+    effect: {
+        readonly default: "light";
+        readonly type: PropType<string>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        readonly __epPropKey: true;
+    };
+    placement: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => "top" | "bottom" | "auto" | "auto-start" | "auto-end" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => import("element-plus").Placement) | ((new (...args: any[]) => "top" | "bottom" | "auto" | "auto-start" | "auto-end" | "right" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end") | (() => import("element-plus").Placement))[], unknown, unknown, "bottom", boolean>;
+    popperOptions: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => Partial<import("element-plus").Options>) | (() => Partial<import("element-plus").Options>) | ((new (...args: any[]) => Partial<import("element-plus").Options>) | (() => Partial<import("element-plus").Options>))[], unknown, unknown, () => {}, boolean>;
+    tabindex: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => string | number) | (() => string | number) | ((new (...args: any[]) => string | number) | (() => string | number))[], unknown, unknown, 0, boolean>;
+    popperClass: {
+        readonly type: PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | {
+            [x: string]: boolean;
+        } | (string | {
+            [x: string]: boolean;
+        } | (string | {
+            [x: string]: boolean;
+        } | (string | {
+            [x: string]: boolean;
+        } | (string | {
+            [x: string]: boolean;
+        } | (string | {
+            [x: string]: boolean;
+        } | (string | {
+            [x: string]: boolean;
+        } | (string | {
+            [x: string]: boolean;
+        } | (string | {
+            [x: string]: boolean;
+        } | (string | {
+            [x: string]: boolean;
+        } | (string | any[] | {
+            [x: string]: boolean;
+        })[])[])[])[])[])[])[])[])[])[]) | (() => string | {
+            [x: string]: boolean;
+        } | (string | {
+            [x: string]: boolean;
+        } | (string | {
+            [x: string]: boolean;
+        } | (string | {
+            [x: string]: boolean;
+        } | (string | {
+            [x: string]: boolean;
+        } | (string | {
+            [x: string]: boolean;
+        } | (string | {
+            [x: string]: boolean;
+        } | (string | {
+            [x: string]: boolean;
+        } | (string | {
+            [x: string]: boolean;
+        } | (string | {
+            [x: string]: boolean;
+        } | (string | any[] | {
+            [x: string]: boolean;
+        })[])[])[])[])[])[])[])[])[])[]) | ((new (...args: any[]) => string | {
+            [x: string]: boolean;
+        } | (string | {
+            [x: string]: boolean;
+        } | (string | {
+            [x: string]: boolean;
+        } | (string | {
+            [x: string]: boolean;
+        } | (string | {
+            [x: string]: boolean;
+        } | (string | {
+            [x: string]: boolean;
+        } | (string | {
+            [x: string]: boolean;
+        } | (string | {
+            [x: string]: boolean;
+        } | (string | {
+            [x: string]: boolean;
+        } | (string | {
+            [x: string]: boolean;
+        } | (string | any[] | {
+            [x: string]: boolean;
+        })[])[])[])[])[])[])[])[])[])[]) | (() => string | {
+            [x: string]: boolean;
+        } | (string | {
+            [x: string]: boolean;
+        } | (string | {
+            [x: string]: boolean;
+        } | (string | {
+            [x: string]: boolean;
+        } | (string | {
+            [x: string]: boolean;
+        } | (string | {
+            [x: string]: boolean;
+        } | (string | {
+            [x: string]: boolean;
+        } | (string | {
+            [x: string]: boolean;
+        } | (string | {
+            [x: string]: boolean;
+        } | (string | {
+            [x: string]: boolean;
+        } | (string | any[] | {
+            [x: string]: boolean;
+        })[])[])[])[])[])[])[])[])[])[]))[], unknown, unknown>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    disabled: BooleanConstructor;
+    teleported: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+    visible: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => boolean) | (() => boolean | null) | ((new (...args: any[]) => boolean) | (() => boolean | null))[], unknown, unknown, null, boolean>;
+    transition: StringConstructor;
+    content: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
+    popperStyle: {
+        readonly type: PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => string | import("vue").CSSProperties | import("vue").StyleValue[]) | (() => import("vue").StyleValue) | ((new (...args: any[]) => string | import("vue").CSSProperties | import("vue").StyleValue[]) | (() => import("vue").StyleValue))[], unknown, unknown>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    enterable: {
+        readonly default: true;
+        readonly type: PropType<import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        readonly __epPropKey: true;
+    };
+    title: StringConstructor;
+    width: import("element-plus/es/utils").EpPropFinalized<readonly [StringConstructor, NumberConstructor], unknown, unknown, 150, boolean>;
+    showAfter: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
+    hideAfter: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 200, boolean>;
+    autoClose: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
+    showArrow: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+    persistent: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+};
+export type PopoverProps = ExtractPropTypes<typeof popoverProps>;

package/lib/ele-popover/props.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const elementPlus = require("element-plus");
+const core = require("../utils/core");
+const normalizeProps = core.omit(elementPlus.popoverProps, ["onUpdate:visible"]);
+const popoverProps = {
+  ...normalizeProps,
+  // 自定义主体类名
+  bodyClass: String,
+  // 自定义主体样式
+  bodyStyle: Object,
+  // 自定义标题样式
+  titleStyle: Object,
+  // 自定义内容样式
+  contentStyle: Object
+};
+exports.popoverProps = popoverProps;

package/lib/ele-popover/style/css-var.scss

@@ -0,0 +1,78 @@
+@use '../../style/util.scss' as *;
+
+@mixin set-popover-var($var) {
+  .ele-popover {
+    @include set-ele-var('popover', $var);
+  }
+
+  .el-popper {
+    @include set-ele-var('popper', $var);
+  }
+
+  .el-popper.is-dark,
+  .ele-tooltip {
+    @include set-ele-var('tooltip', $var);
+  }
+}
+
+// 气泡通用样式
+@mixin popper-style($class) {
+  #{$class} {
+    border-radius: eleVar('popper', 'radius');
+
+    &.is-light {
+      background: eleVar('popper', 'bg');
+      border: eleVar('popper', 'border');
+      box-shadow: eleVar('popper', 'shadow');
+
+      & > .el-popper__arrow::before {
+        background: eleVar('popper', 'arrow-bg');
+        border: eleVar('popper', 'border');
+        box-shadow: eleVar('popper', 'arrow-shadow');
+      }
+    }
+
+    .el-popper__arrow {
+      width: eleVar('popper', 'arrow-size');
+      height: eleVar('popper', 'arrow-size');
+
+      &::before {
+        width: eleVar('popper', 'arrow-size');
+        height: eleVar('popper', 'arrow-size');
+      }
+    }
+
+    &[data-popper-placement^='top'] > .el-popper__arrow {
+      bottom: eleVar('popper', 'arrow-offset');
+    }
+
+    &[data-popper-placement^='bottom'] > .el-popper__arrow {
+      top: eleVar('popper', 'arrow-offset');
+    }
+
+    &[data-popper-placement^='left'] > .el-popper__arrow {
+      right: eleVar('popper', 'arrow-offset');
+    }
+
+    &[data-popper-placement^='right'] > .el-popper__arrow {
+      left: eleVar('popper', 'arrow-offset');
+    }
+
+    &.is-dark {
+      color: eleVar('tooltip', 'color');
+      font-size: eleVar('tooltip', 'font-size');
+      line-height: eleVar('tooltip', 'line-height');
+      padding: eleVar('tooltip', 'padding');
+      background: eleVar('tooltip', 'bg');
+      border: eleVar('tooltip', 'border');
+      box-shadow: eleVar('tooltip', 'shadow');
+      border-radius: eleVar('tooltip', 'radius');
+
+      & > .el-popper__arrow::before {
+        background: eleVar('tooltip', 'arrow-bg');
+        border: eleVar('tooltip', 'border');
+        box-shadow: eleVar('tooltip', 'arrow-shadow');
+      }
+    }
+  }
+}

package/lib/ele-popover/style/index.js

@@ -0,0 +1,3 @@
+"use strict";
+require("element-plus/es/components/popover/style/index");
+require("./index.scss");

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

@@ -0,0 +1,34 @@
+@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-popover-var($ele);
+
+@include popper-style('.ele-popper.el-popper');
+
+.ele-popper.el-popper.ele-popover {
+  color: eleVar('popover', 'color');
+  font-size: eleVar('popover', 'font-size');
+  line-height: inherit;
+  text-align: left;
+  padding: 0;
+}
+
+.ele-popover-body {
+  background: inherit;
+  border-radius: inherit;
+  box-sizing: border-box;
+}
+
+.ele-popover-content {
+  padding: eleVar('popover', 'padding');
+  box-sizing: border-box;
+}
+
+.ele-popover-title {
+  color: eleVar('popover', 'title-color');
+  font-size: eleVar('popover', 'title-font-size');
+  font-weight: eleVar('popover', 'title-font-weight');
+  padding: eleVar('popover', 'title-padding');
+  border-bottom: eleVar('popover', 'title-border');
+}

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

@@ -1,8 +1,8 @@
-declare const _sfc_main: import("vue").DefineComponent<{
+declare const _default: import("vue").DefineComponent<{
     modelValue: BooleanConstructor;
-    headerStyle: import("vue").PropType<import("vue").CSSProperties>;
-    bodyStyle: import("vue").PropType<import("vue").CSSProperties>;
-    footerStyle: import("vue").PropType<import("vue").CSSProperties>;
+    headerStyle: import("vue").PropType<import("../ele-app/types").StyleValue>;
+    bodyStyle: import("vue").PropType<import("../ele-app/types").StyleValue>;
+    footerStyle: import("vue").PropType<import("../ele-app/types").StyleValue>;
     title: StringConstructor;
     margin: (StringConstructor | NumberConstructor)[];
     direction: import("vue").PropType<import("./types").PrintDirection | null>;
@@ -18,9 +18,9 @@ declare const _sfc_main: import("vue").DefineComponent<{
     done: () => boolean;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     modelValue: BooleanConstructor;
-    headerStyle: import("vue").PropType<import("vue").CSSProperties>;
-    bodyStyle: import("vue").PropType<import("vue").CSSProperties>;
-    footerStyle: import("vue").PropType<import("vue").CSSProperties>;
+    headerStyle: import("vue").PropType<import("../ele-app/types").StyleValue>;
+    bodyStyle: import("vue").PropType<import("../ele-app/types").StyleValue>;
+    footerStyle: import("vue").PropType<import("../ele-app/types").StyleValue>;
     title: StringConstructor;
     margin: (StringConstructor | NumberConstructor)[];
     direction: import("vue").PropType<import("./types").PrintDirection | null>;
@@ -28,10 +28,10 @@ declare const _sfc_main: import("vue").DefineComponent<{
     target: import("vue").PropType<import("./types").PrintTarget | null>;
     static: BooleanConstructor;
 }>> & {
-    onDone?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((_value: boolean) => any) | undefined;
+    onDone?: (() => any) | undefined;
 }, {
     modelValue: boolean;
     static: boolean;
 }, {}>;
-export default _sfc_main;
+export default _default;

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

@@ -1,13 +1,14 @@
-import type { PropType, CSSProperties, ExtractPropTypes } from 'vue';
+import type { PropType, ExtractPropTypes } from 'vue';
+import type { StyleValue } from '../ele-app/types';
 import type { PrintDirection, PrintOrientation, PrintTarget } from './types';
 /**
  * 属性
  */
 export declare const printerProps: {
     modelValue: BooleanConstructor;
-    headerStyle: PropType<CSSProperties>;
-    bodyStyle: PropType<CSSProperties>;
-    footerStyle: PropType<CSSProperties>;
+    headerStyle: PropType<StyleValue>;
+    bodyStyle: PropType<StyleValue>;
+    footerStyle: PropType<StyleValue>;
     title: StringConstructor;
     margin: (StringConstructor | NumberConstructor)[];
     direction: PropType<PrintDirection | null>;

package/lib/ele-pro-layout/components/header-tool.d.ts

@@ -1,2 +1,2 @@
-declare const _sfc_main: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
-export default _sfc_main;
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+export default _default;

package/lib/ele-pro-layout/components/pro-header.d.ts

@@ -1,7 +1,7 @@
 import type { PropType } from 'vue';
 import { BreadcrumbItem } from '../../ele-breadcrumb/types';
 import type { MenuItem, LevelItem, HeaderStyle } from '../types';
-declare const _sfc_main: import("vue").DefineComponent<{
+declare const _default: import("vue").DefineComponent<{
     menus: {
         type: PropType<MenuItem[]>;
         required: true;
@@ -9,7 +9,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
     headerStyle: PropType<HeaderStyle>;
     active: StringConstructor;
     ellipsis: BooleanConstructor;
-    menuTrigger: PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "hover" | "click", unknown>>;
+    menuTrigger: PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "hover" | "click", unknown> | undefined>;
     collapse: BooleanConstructor;
     sidebar: BooleanConstructor;
     titleSlot: StringConstructor;
@@ -43,7 +43,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
     headerStyle: PropType<HeaderStyle>;
     active: StringConstructor;
     ellipsis: BooleanConstructor;
-    menuTrigger: PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "hover" | "click", unknown>>;
+    menuTrigger: PropType<import("element-plus/es/utils").EpPropMergeType<StringConstructor, "hover" | "click", unknown> | undefined>;
     collapse: BooleanConstructor;
     sidebar: BooleanConstructor;
     titleSlot: StringConstructor;
@@ -57,8 +57,8 @@ declare const _sfc_main: import("vue").DefineComponent<{
     homePath: StringConstructor;
     isHome: BooleanConstructor;
 }>> & {
-    onClose?: ((_index: string, _indexPath: string[]) => any) | undefined;
     onOpen?: ((_index: string, _indexPath: string[]) => any) | undefined;
+    onClose?: ((_index: string, _indexPath: string[]) => any) | undefined;
     onLogoClick?: (() => any) | undefined;
 }, {
     collapse: boolean;
@@ -67,4 +67,4 @@ declare const _sfc_main: import("vue").DefineComponent<{
     sidebar: boolean;
     isHome: boolean;
 }, {}>;
-export default _sfc_main;
+export default _default;

package/lib/ele-pro-layout/components/pro-header.js

@@ -105,13 +105,19 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const _hoisted_1 = { class: "ele-admin-tools" };
+const _hoisted_1 = {
+  key: 1,
+  class: "ele-admin-tools"
+};
 const _hoisted_2 = {
-  key: 0,
+  key: 2,
   class: "ele-admin-breadcrumb"
 };
 const _hoisted_3 = { class: "ele-admin-menus" };
-const _hoisted_4 = { class: "ele-admin-tools" };
+const _hoisted_4 = {
+  key: 3,
+  class: "ele-admin-tools"
+};
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_EleBreadcrumb = vue.resolveComponent("EleBreadcrumb");
   const _component_EleMenus = vue.resolveComponent("EleMenus");
@@ -122,7 +128,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       { "is-primary": _ctx.isPrimary }
     ])
   }, [
-    vue.createElementVNode("div", {
+    _ctx.$slots.logo ? (vue.openBlock(), vue.createElementBlock("div", {
+      key: 0,
       class: "ele-admin-logo",
       onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onLogoClick && _ctx.onLogoClick(...args))
     }, [
@@ -130,10 +137,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         collapse: _ctx.collapse,
         sidebar: _ctx.sidebar
       })
-    ]),
-    vue.createElementVNode("div", _hoisted_1, [
+    ])) : vue.createCommentVNode("", true),
+    _ctx.$slots.left ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
       vue.renderSlot(_ctx.$slots, "left", { sidebar: _ctx.sidebar })
-    ]),
+    ])) : vue.createCommentVNode("", true),
     _ctx.breadcrumb ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
       vue.renderSlot(_ctx.$slots, "breadcrumb", {
         levels: _ctx.levels,
@@ -178,9 +185,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         } : void 0
       ]), 1032, ["items", "theme", "popupTheme", "ellipsis", "defaultActive", "menuTrigger", "onOpen", "onClose"])) : vue.createCommentVNode("", true)
     ]),
-    vue.createElementVNode("div", _hoisted_4, [
+    _ctx.$slots.right ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
       vue.renderSlot(_ctx.$slots, "right", { sidebar: _ctx.sidebar })
-    ])
+    ])) : vue.createCommentVNode("", true)
   ], 2);
 }
 const proHeader = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);

package/lib/ele-pro-layout/components/pro-iframe.d.ts

@@ -1,6 +1,6 @@
 import type { PropType } from 'vue';
 import type { TabItem, IframeItem } from '../types';
-declare const _sfc_main: import("vue").DefineComponent<{
+declare const _default: import("vue").DefineComponent<{
     keepAlive: BooleanConstructor;
     transitionName: StringConstructor;
     transitionDelay: NumberConstructor;
@@ -26,4 +26,4 @@ declare const _sfc_main: import("vue").DefineComponent<{
 }>>, {
     keepAlive: boolean;
 }, {}>;
-export default _sfc_main;
+export default _default;

package/lib/ele-pro-layout/components/pro-sidebar.d.ts

@@ -1,6 +1,7 @@
 import type { PropType } from 'vue';
+import type { ElScrollbarInstance } from '../../ele-app/types';
 import type { MenuItem, SidebarStyle } from '../types';
-declare const _sfc_main: import("vue").DefineComponent<{
+declare const _default: import("vue").DefineComponent<{
     menus: {
         type: PropType<MenuItem[]>;
         required: true;
@@ -15,7 +16,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
     titleSlot: StringConstructor;
     iconSlot: StringConstructor;
 }, {
-    menusRef: import("vue").Ref<HTMLDivElement | null>;
+    menusRef: import("vue").Ref<ElScrollbarInstance>;
     menuItems: import("vue").ComputedRef<import("../../ele-menus/types").MenuItem[]>;
     onOpen: (index: string, indexPath: string[]) => void;
     onClose: (index: string, indexPath: string[]) => void;
@@ -37,11 +38,11 @@ declare const _sfc_main: import("vue").DefineComponent<{
     titleSlot: StringConstructor;
     iconSlot: StringConstructor;
 }>> & {
-    onClose?: ((_index: string, _indexPath: string[]) => any) | undefined;
     onOpen?: ((_index: string, _indexPath: string[]) => any) | undefined;
+    onClose?: ((_index: string, _indexPath: string[]) => any) | undefined;
 }, {
     uniqueOpened: boolean;
     collapse: boolean;
     colorfulIcon: boolean;
 }, {}>;
-export default _sfc_main;
+export default _default;

package/lib/ele-pro-layout/components/pro-sidebar.js

@@ -1,10 +1,11 @@
 "use strict";
 const vue = require("vue");
+const elementPlus = require("element-plus");
 const EleMenus = require("../../ele-menus/index");
 const util = require("../util");
 const _sfc_main = vue.defineComponent({
   name: "ProSidebar",
-  components: { EleMenus },
+  components: { ElScrollbar: elementPlus.ElScrollbar, EleMenus },
   props: {
     // 菜单数据
     menus: {
@@ -35,7 +36,10 @@ const _sfc_main = vue.defineComponent({
     close: (_index, _indexPath) => true
   },
   setup(props, { emit }) {
-    const { scrollIntoView } = util.useMenuScroll(() => menusRef.value);
+    const { scrollIntoView } = util.useMenuScroll(() => {
+      var _a;
+      return (_a = menusRef.value) == null ? void 0 : _a.$el;
+    });
     const menusRef = vue.ref(null);
     const menuItems = vue.computed(() => util.getMenuItems(props.menus));
     const onOpen = (index, indexPath) => {
@@ -63,43 +67,47 @@ const _export_sfc = (sfc, props) => {
   return target;
 };
 const _hoisted_1 = { class: "ele-admin-sidebar" };
-const _hoisted_2 = {
-  ref: "menusRef",
-  class: "ele-admin-menus"
-};
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_EleMenus = vue.resolveComponent("EleMenus");
+  const _component_ElScrollbar = vue.resolveComponent("ElScrollbar");
   return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
     vue.renderSlot(_ctx.$slots, "top"),
-    vue.createElementVNode("div", _hoisted_2, [
-      vue.createVNode(_component_EleMenus, {
-        items: _ctx.menuItems,
-        theme: _ctx.sidebarStyle,
-        colorful: _ctx.colorfulIcon,
-        collapse: _ctx.collapse,
-        defaultActive: _ctx.active,
-        defaultOpeneds: _ctx.defaultOpeneds,
-        uniqueOpened: _ctx.uniqueOpened,
-        popperEffect: _ctx.popperEffect,
-        onOpen: _ctx.onOpen,
-        onClose: _ctx.onClose
-      }, vue.createSlots({ _: 2 }, [
-        _ctx.iconSlot && _ctx.$slots[_ctx.iconSlot] ? {
-          name: "icon",
-          fn: vue.withCtx((slotProps) => [
-            vue.renderSlot(_ctx.$slots, _ctx.iconSlot, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
-          ]),
-          key: "0"
-        } : void 0,
-        _ctx.titleSlot && _ctx.$slots[_ctx.titleSlot] ? {
-          name: "title",
-          fn: vue.withCtx((slotProps) => [
-            vue.renderSlot(_ctx.$slots, _ctx.titleSlot, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
-          ]),
-          key: "1"
-        } : void 0
-      ]), 1032, ["items", "theme", "colorful", "collapse", "defaultActive", "defaultOpeneds", "uniqueOpened", "popperEffect", "onOpen", "onClose"])
-    ], 512),
+    vue.createVNode(_component_ElScrollbar, {
+      ref: "menusRef",
+      class: "ele-admin-menus"
+    }, {
+      default: vue.withCtx(() => [
+        vue.createVNode(_component_EleMenus, {
+          items: _ctx.menuItems,
+          theme: _ctx.sidebarStyle,
+          colorful: _ctx.colorfulIcon,
+          collapse: _ctx.collapse,
+          defaultActive: _ctx.active,
+          defaultOpeneds: _ctx.defaultOpeneds,
+          uniqueOpened: _ctx.uniqueOpened,
+          popperEffect: _ctx.popperEffect,
+          collapseTransition: false,
+          onOpen: _ctx.onOpen,
+          onClose: _ctx.onClose
+        }, vue.createSlots({ _: 2 }, [
+          _ctx.iconSlot && _ctx.$slots[_ctx.iconSlot] ? {
+            name: "icon",
+            fn: vue.withCtx((slotProps) => [
+              vue.renderSlot(_ctx.$slots, _ctx.iconSlot, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
+            ]),
+            key: "0"
+          } : void 0,
+          _ctx.titleSlot && _ctx.$slots[_ctx.titleSlot] ? {
+            name: "title",
+            fn: vue.withCtx((slotProps) => [
+              vue.renderSlot(_ctx.$slots, _ctx.titleSlot, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
+            ]),
+            key: "1"
+          } : void 0
+        ]), 1032, ["items", "theme", "colorful", "collapse", "defaultActive", "defaultOpeneds", "uniqueOpened", "popperEffect", "onOpen", "onClose"])
+      ]),
+      _: 3
+    }, 512),
     vue.renderSlot(_ctx.$slots, "bottom")
   ]);
 }

package/lib/ele-pro-layout/components/pro-sidebox.d.ts

@@ -1,6 +1,7 @@
 import type { PropType } from 'vue';
+import type { ElScrollbarInstance } from '../../ele-app/types';
 import type { MenuItem, SidebarStyle } from '../types';
-declare const _sfc_main: import("vue").DefineComponent<{
+declare const _default: import("vue").DefineComponent<{
     menus: {
         type: PropType<MenuItem[]>;
         required: true;
@@ -14,7 +15,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
     titleSlot: StringConstructor;
     iconSlot: StringConstructor;
 }, {
-    menusRef: import("vue").Ref<HTMLDivElement | null>;
+    menusRef: import("vue").Ref<ElScrollbarInstance>;
     menuItems: import("vue").ComputedRef<import("../../ele-menus/types").MenuItem[]>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     menus: {
@@ -34,4 +35,4 @@ declare const _sfc_main: import("vue").DefineComponent<{
     compact: boolean;
     colorfulIcon: boolean;
 }, {}>;
-export default _sfc_main;
+export default _default;