yuang-framework-ui-pc 1.1.44 → 1.1.46

package/es/ele-menus/index.js

@@ -0,0 +1,346 @@
+import { defineComponent, ref, shallowRef, computed, onMounted, watch, resolveComponent, createBlock, openBlock, mergeProps, withCtx, createCommentVNode, createSlots, renderList, renderSlot, normalizeProps, guardReactiveProps, createVNode, resolveDynamicComponent, normalizeStyle } from "vue";
+import { ElIcon, ElSubMenu, ElMenu } from "element-plus";
+import { EllipsisOutlined } from "../icons";
+import { pick, contentIsEllipsis } from "../utils/core";
+import EleTooltip from "../ele-tooltip/index";
+import MenuItems from "./components/menu-items";
+import { useMenuEllipsis, getMenuItems, getPopperClass } from "./util";
+import { menusEmits, menusProps, menuPropKeys } from "./props";
+const _sfc_main = defineComponent({
+  name: "EleMenus",
+  components: { ElMenu, ElSubMenu, ElIcon, EleTooltip, MenuItems },
+  props: menusProps,
+  emits: menusEmits,
+  setup(props, { emit }) {
+    var _a, _b;
+    const isWebkit = (_b = (_a = navigator == null ? void 0 : navigator.userAgent) == null ? void 0 : _a.includes) == null ? void 0 : _b.call(_a, "WebKit");
+    const menuRef = ref(null);
+    const ellipsisRef = ref(null);
+    const sliceIndex = ref(-1);
+    const menuItems = shallowRef([]);
+    const moreMenuItems = shallowRef([]);
+    const tooltipVirtualRef = ref();
+    const tooltipContent = ref("");
+    const tooltipVisible = ref(false);
+    const isHorizontal = computed(() => props.mode === "horizontal");
+    const isCompact = computed(() => props.mode === "compact");
+    const collapseTooltipDisabled = computed(
+      () => isCompact.value ? !props.collapse : props.tooltipDisabled
+    );
+    const menuProps = computed(
+      () => pick(props, menuPropKeys)
+    );
+    const open = (index2) => {
+      if (menuRef.value) {
+        menuRef.value.open(index2);
+      }
+    };
+    const close = (index2) => {
+      if (menuRef.value) {
+        menuRef.value.open(index2);
+      }
+    };
+    const hideTooltip = () => {
+      tooltipVisible.value = false;
+    };
+    const triggerTooltip = (e) => {
+      var _a2;
+      if (props.textEllipsisTooltip) {
+        const itemEl = (_a2 = e.currentTarget) == null ? void 0 : _a2.parentNode;
+        if (itemEl) {
+          const titleEl = itemEl.querySelector(".ele-menu-title");
+          const text = titleEl == null ? void 0 : titleEl.innerText;
+          if (text && contentIsEllipsis(titleEl, "horizontal")) {
+            tooltipVirtualRef.value = itemEl;
+            tooltipContent.value = text;
+            tooltipVisible.value = true;
+            return;
+          }
+        }
+      }
+      hideTooltip();
+    };
+    const handleOpen = (index2, indexPath) => {
+      emit("open", index2, indexPath);
+    };
+    const handleClose = (index2, indexPath) => {
+      emit("close", index2, indexPath);
+    };
+    const handleSelect = (index2, indexPath, item, routerResult) => {
+      emit("select", index2, indexPath, item, routerResult);
+    };
+    const handleItemClick = (item, e) => {
+      emit("itemClick", item, e);
+    };
+    const handleItemMouseenter = (item, e) => {
+      triggerTooltip(e);
+      emit("itemMouseenter", item, e);
+    };
+    const handleItemMouseleave = (item, e) => {
+      hideTooltip();
+      emit("itemMouseleave", item, e);
+    };
+    const handleParentMouseenter = (item, e) => {
+      triggerTooltip(e);
+      emit("parentMouseenter", item, e);
+    };
+    const handleParentMouseleave = (item, e) => {
+      hideTooltip();
+      emit("parentMouseleave", item, e);
+    };
+    const scrollToActive = () => {
+      var _a2;
+      const menuEl = (_a2 = menuRef.value) == null ? void 0 : _a2.$el;
+      if (menuEl) {
+        const el = menuEl.querySelector(".el-menu-item.is-active") || menuEl.querySelector(".el-sub-menu.is-active");
+        if (el) {
+          if (typeof el["scrollIntoViewIfNeeded"] === "function") {
+            el.scrollIntoViewIfNeeded(true);
+          } else {
+            el.scrollIntoView({ behavior: "smooth", block: "center" });
+          }
+        }
+      }
+    };
+    const { observe, unobserve, computedEllipsis } = useMenuEllipsis({
+      getMenuEl: () => {
+        var _a2;
+        return (_a2 = menuRef.value) == null ? void 0 : _a2.$el;
+      },
+      getMoreEl: () => {
+        var _a2;
+        return (_a2 = ellipsisRef.value) == null ? void 0 : _a2.$el;
+      },
+      onEllipsis: (index2) => {
+        if (sliceIndex.value !== index2) {
+          sliceIndex.value = index2;
+        }
+      }
+    });
+    onMounted(() => {
+      var _a2;
+      if (props.ellipsis && isHorizontal.value && ((_a2 = menuRef.value) == null ? void 0 : _a2.$el)) {
+        computedEllipsis();
+        observe();
+      }
+    });
+    watch(
+      [
+        () => props.ellipsis,
+        isHorizontal,
+        () => {
+          var _a2;
+          return (_a2 = menuRef.value) == null ? void 0 : _a2.$el;
+        },
+        () => props.items
+      ],
+      () => {
+        var _a2;
+        if (props.ellipsis && isHorizontal.value && ((_a2 = menuRef.value) == null ? void 0 : _a2.$el)) {
+          observe();
+          return;
+        }
+        unobserve();
+        sliceIndex.value = -1;
+      }
+    );
+    watch(
+      [() => props.items, sliceIndex, isHorizontal],
+      () => {
+        const { items, moreItems } = getMenuItems(
+          props.items,
+          sliceIndex.value,
+          isHorizontal.value
+        );
+        menuItems.value = items;
+        moreMenuItems.value = moreItems;
+      },
+      {
+        immediate: true,
+        deep: true
+      }
+    );
+    return {
+      EllipsisOutlined,
+      getPopperClass,
+      isWebkit,
+      menuRef,
+      ellipsisRef,
+      menuItems,
+      moreMenuItems,
+      tooltipVirtualRef,
+      tooltipContent,
+      tooltipVisible,
+      isCompact,
+      collapseTooltipDisabled,
+      menuProps,
+      open,
+      close,
+      handleOpen,
+      handleClose,
+      handleSelect,
+      handleItemClick,
+      handleItemMouseenter,
+      handleItemMouseleave,
+      handleParentMouseenter,
+      handleParentMouseleave,
+      scrollToActive
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_MenuItems = resolveComponent("MenuItems");
+  const _component_ElIcon = resolveComponent("ElIcon");
+  const _component_ElSubMenu = resolveComponent("ElSubMenu");
+  const _component_EleTooltip = resolveComponent("EleTooltip");
+  const _component_ElMenu = resolveComponent("ElMenu");
+  return openBlock(), createBlock(_component_ElMenu, mergeProps(_ctx.menuProps, {
+    ref: "menuRef",
+    ellipsis: false,
+    mode: _ctx.isCompact ? "vertical" : _ctx.mode,
+    collapse: _ctx.isCompact ? true : _ctx.collapse,
+    class: [
+      "ele-menu",
+      { "ele-menu-dark": _ctx.theme === "dark" },
+      { "is-night": _ctx.theme === "dark" },
+      { "ele-menu-colorful": _ctx.colorful },
+      { "is-colorful": _ctx.colorful },
+      { "is-compact": _ctx.isCompact },
+      { "is-compact-collapse": _ctx.isCompact && _ctx.collapse }
+    ],
+    onOpen: _ctx.handleOpen,
+    onClose: _ctx.handleClose,
+    onSelect: _ctx.handleSelect
+  }), {
+    default: withCtx(() => {
+      var _a;
+      return [
+        _ctx.menuItems && _ctx.menuItems.length ? (openBlock(), createBlock(_component_MenuItems, {
+          key: 0,
+          items: _ctx.menuItems,
+          first: true,
+          tipDisabled: _ctx.collapseTooltipDisabled,
+          parentIsGroup: false,
+          theme: _ctx.theme,
+          popTheme: _ctx.popupTheme,
+          colorful: _ctx.colorful,
+          popupColorful: _ctx.popupColorful,
+          firstPopClass: _ctx.firstPopperClass,
+          webkit: _ctx.isWebkit,
+          onItemClick: _ctx.handleItemClick,
+          onItemMouseenter: _ctx.handleItemMouseenter,
+          onItemMouseleave: _ctx.handleItemMouseleave,
+          onParentMouseenter: _ctx.handleParentMouseenter,
+          onParentMouseleave: _ctx.handleParentMouseleave
+        }, createSlots({ _: 2 }, [
+          renderList(Object.keys(_ctx.$slots), (name) => {
+            return {
+              name,
+              fn: withCtx((slotProps) => [
+                renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(slotProps || {})))
+              ])
+            };
+          })
+        ]), 1032, ["items", "tipDisabled", "theme", "popTheme", "colorful", "popupColorful", "firstPopClass", "webkit", "onItemClick", "onItemMouseenter", "onItemMouseleave", "onParentMouseenter", "onParentMouseleave"])) : createCommentVNode("", true),
+        _ctx.moreMenuItems && _ctx.moreMenuItems.length ? (openBlock(), createBlock(_component_ElSubMenu, mergeProps({
+          key: "sub-menu-more",
+          teleported: true
+        }, _ctx.ellipsisProps || {}, {
+          ref: "ellipsisRef",
+          index: "sub-menu-more",
+          popperClass: _ctx.getPopperClass(
+            (_a = _ctx.ellipsisProps) == null ? void 0 : _a.popperClass,
+            _ctx.theme,
+            _ctx.popupTheme,
+            _ctx.colorful,
+            _ctx.popupColorful,
+            _ctx.firstPopperClass,
+            true,
+            _ctx.isWebkit
+          ),
+          class: "ele-sub-menu-ellipsis"
+        }), {
+          title: withCtx(() => {
+            var _a2;
+            return [
+              createVNode(_component_ElIcon, normalizeProps(guardReactiveProps(((_a2 = _ctx.ellipsisProps) == null ? void 0 : _a2.iconProps) || {})), {
+                default: withCtx(() => {
+                  var _a3, _b;
+                  return [
+                    (openBlock(), createBlock(resolveDynamicComponent(((_a3 = _ctx.ellipsisProps) == null ? void 0 : _a3.icon) ?? _ctx.EllipsisOutlined), {
+                      style: normalizeStyle((_b = _ctx.ellipsisProps) == null ? void 0 : _b.iconStyle)
+                    }, null, 8, ["style"]))
+                  ];
+                }),
+                _: 1
+              }, 16)
+            ];
+          }),
+          default: withCtx(() => [
+            createVNode(_component_MenuItems, {
+              items: _ctx.moreMenuItems,
+              first: false,
+              tipDisabled: _ctx.collapseTooltipDisabled,
+              parentIsGroup: false,
+              theme: _ctx.theme,
+              popTheme: _ctx.popupTheme,
+              colorful: _ctx.colorful,
+              popupColorful: _ctx.popupColorful,
+              firstPopClass: _ctx.firstPopperClass,
+              webkit: _ctx.isWebkit,
+              onItemClick: _ctx.handleItemClick,
+              onItemMouseenter: _ctx.handleItemMouseenter,
+              onItemMouseleave: _ctx.handleItemMouseleave,
+              onParentMouseenter: _ctx.handleParentMouseenter,
+              onParentMouseleave: _ctx.handleParentMouseleave
+            }, createSlots({ _: 2 }, [
+              renderList(Object.keys(_ctx.$slots), (name) => {
+                return {
+                  name,
+                  fn: withCtx((slotProps) => [
+                    renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(slotProps || {})))
+                  ])
+                };
+              })
+            ]), 1032, ["items", "tipDisabled", "theme", "popTheme", "colorful", "popupColorful", "firstPopClass", "webkit", "onItemClick", "onItemMouseenter", "onItemMouseleave", "onParentMouseenter", "onParentMouseleave"])
+          ]),
+          _: 3
+        }, 16, ["popperClass"])) : createCommentVNode("", true),
+        _ctx.textEllipsisTooltip ? (openBlock(), createBlock(_component_EleTooltip, mergeProps({
+          key: 2,
+          trigger: "click",
+          placement: "right",
+          fallbackPlacements: [
+            "top-end",
+            "top",
+            "top-start",
+            "bottom-end",
+            "bottom",
+            "bottom-start",
+            "left"
+          ],
+          persistent: false,
+          enterable: false,
+          triggerKeys: []
+        }, _ctx.textEllipsisTooltip === true ? {} : _ctx.textEllipsisTooltip, {
+          virtualTriggering: true,
+          virtualRef: _ctx.tooltipVirtualRef,
+          content: _ctx.tooltipContent,
+          visible: _ctx.tooltipVisible
+        }), null, 16, ["virtualRef", "content", "visible"])) : createCommentVNode("", true)
+      ];
+    }),
+    _: 3
+  }, 16, ["mode", "collapse", "class", "onOpen", "onClose", "onSelect"]);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  index as default
+};

package/es/ele-menus/props.d.ts

@@ -0,0 +1,157 @@
+import { PropType, ExtractPropTypes } from 'vue';
+import { menuProps } from 'element-plus';
+import { MenuItem, MenuMode, MenuTheme, PopupMenuTheme, PopupColorful, EllipsisProps, TextEllipsisTooltip } from './types';
+
+/**
+ * 属性
+ */
+export declare const menusProps: {
+    mode: PropType<MenuMode>;
+    /** 菜单数据 */
+    items: {
+        type: PropType<MenuItem[]>;
+        required: boolean;
+    };
+    /** 主题 */
+    theme: PropType<MenuTheme>;
+    /** 弹出菜单主题 */
+    popupTheme: {
+        type: PropType<PopupMenuTheme>;
+        default: string;
+    };
+    /** 彩色菜单图标 */
+    colorful: BooleanConstructor;
+    /** 弹出菜单是否彩色图标 */
+    popupColorful: {
+        type: PropType<PopupColorful>;
+        default: string;
+    };
+    /** 一级子菜单类名 */
+    firstPopperClass: StringConstructor;
+    /** 禁用 tooltip */
+    tooltipDisabled: BooleanConstructor;
+    /** 省略菜单的属性 */
+    ellipsisProps: PropType<EllipsisProps>;
+    /** 是否开启菜单文本溢出提示 */
+    textEllipsisTooltip: PropType<TextEllipsisTooltip>;
+    defaultActive: {
+        readonly type: PropType<string>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: "";
+    };
+    defaultOpeneds: {
+        readonly type: PropType<string[]>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: () => [];
+    };
+    uniqueOpened: BooleanConstructor;
+    router: BooleanConstructor;
+    menuTrigger: {
+        readonly type: PropType<"hover" | "click">;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: "hover";
+    };
+    collapse: BooleanConstructor;
+    backgroundColor: StringConstructor;
+    textColor: StringConstructor;
+    activeTextColor: StringConstructor;
+    closeOnClickOutside: BooleanConstructor;
+    collapseTransition: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: true;
+    };
+    ellipsis: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: true;
+    };
+    popperOffset: {
+        readonly type: PropType<number>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: 6;
+    };
+    ellipsisIcon: {
+        readonly type: PropType<string | import('vue').Component>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: () => any;
+    };
+    popperEffect: {
+        readonly type: PropType<import('element-plus').PopperEffect>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: "dark";
+    };
+    popperClass: StringConstructor;
+    showTimeout: {
+        readonly type: PropType<number>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: 300;
+    };
+    hideTimeout: {
+        readonly type: PropType<number>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: 300;
+    };
+    persistent: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: true;
+    };
+};
+export type MenusProps = ExtractPropTypes<typeof menusProps>;
+export type MenuPropKeys = Array<keyof typeof menuProps>;
+/**
+ * 菜单组件属性名
+ */
+export declare const menuPropKeys: MenuPropKeys;
+/**
+ * 事件
+ */
+export declare const menusEmits: {
+    /** 子菜单项点击事件 */
+    itemClick: (_item: MenuItem, _e: MouseEvent) => boolean;
+    /** 子菜单项鼠标进入事件 */
+    itemMouseenter: (_item: MenuItem, _e: MouseEvent) => boolean;
+    /** 子菜单项鼠标离开事件 */
+    itemMouseleave: (_item: MenuItem, _e: MouseEvent) => boolean;
+    /** 父级菜单项鼠标进入事件 */
+    parentMouseenter: (_item: MenuItem, _e: MouseEvent) => boolean;
+    /** 父级菜单项鼠标离开事件 */
+    parentMouseleave: (_item: MenuItem, _e: MouseEvent) => boolean;
+    close: (index: string, indexPath: string[]) => boolean;
+    open: (index: string, indexPath: string[]) => boolean;
+    select: (index: string, indexPath: string[], item: import('element-plus').MenuItemClicked, routerResult?: Promise<void | import('vue-router').NavigationFailure>) => boolean;
+};

package/es/ele-menus/props.js

@@ -0,0 +1,51 @@
+import { menuProps, menuEmits } from "element-plus";
+const menusProps = {
+  ...menuProps,
+  mode: String,
+  /** 菜单数据 */
+  items: {
+    type: Array,
+    required: true
+  },
+  /** 主题 */
+  theme: String,
+  /** 弹出菜单主题 */
+  popupTheme: {
+    type: String,
+    default: "auto"
+  },
+  /** 彩色菜单图标 */
+  colorful: Boolean,
+  /** 弹出菜单是否彩色图标 */
+  popupColorful: {
+    type: [Boolean, String],
+    default: "auto"
+  },
+  /** 一级子菜单类名 */
+  firstPopperClass: String,
+  /** 禁用 tooltip */
+  tooltipDisabled: Boolean,
+  /** 省略菜单的属性 */
+  ellipsisProps: Object,
+  /** 是否开启菜单文本溢出提示 */
+  textEllipsisTooltip: [Boolean, Object]
+};
+const menuPropKeys = Object.keys(menuProps);
+const menusEmits = {
+  ...menuEmits,
+  /** 子菜单项点击事件 */
+  itemClick: (_item, _e) => true,
+  /** 子菜单项鼠标进入事件 */
+  itemMouseenter: (_item, _e) => true,
+  /** 子菜单项鼠标离开事件 */
+  itemMouseleave: (_item, _e) => true,
+  /** 父级菜单项鼠标进入事件 */
+  parentMouseenter: (_item, _e) => true,
+  /** 父级菜单项鼠标离开事件 */
+  parentMouseleave: (_item, _e) => true
+};
+export {
+  menuPropKeys,
+  menusEmits,
+  menusProps
+};

package/es/ele-menus/style/index.d.ts

@@ -0,0 +1 @@
+

package/es/ele-menus/style/index.js

@@ -0,0 +1,8 @@
+import "element-plus/es/components/menu/style/index";
+import "element-plus/es/components/menu-item/style/index";
+import "element-plus/es/components/menu-item-group/style/index";
+import "element-plus/es/components/sub-menu/style/index";
+import "element-plus/es/components/icon/style/index";
+import "element-plus/es/components/badge/style/index";
+import "../../ele-tooltip/style/index";
+import "./index.scss";