yuang-framework-ui-pc/lib/ele-menus/index.cjs

yuang-framework-ui-pc Library

"use strict";
const vue = require("vue");
const elementPlus = require("element-plus");
const icons = require("../icons");
const core = require("../utils/core");
const EleTooltip = require("../ele-tooltip/index");
const MenuItems = require("./components/menu-items");
const util = require("./util");
const props = require("./props");
const vueRouter = require("vue-router");
const _sfc_main = vue.defineComponent({
  name: "EleMenus",
  components: { ElMenu: elementPlus.ElMenu, ElSubMenu: elementPlus.ElSubMenu, ElIcon: elementPlus.ElIcon, EleTooltip, MenuItems },
  props: props.menusProps,
  emits: props.menusEmits,
  setup(props$1, { emit }) {
    var _a, _b;
    const router = vueRouter.useRouter();
    const isWebkit = (_b = (_a = navigator == null ? void 0 : navigator.userAgent) == null ? void 0 : _a.includes) == null ? void 0 : _b.call(_a, "WebKit");
    const menuRef = vue.ref(null);
    const ellipsisRef = vue.ref(null);
    const sliceIndex = vue.ref(-1);
    const menuItems = vue.shallowRef([]);
    const moreMenuItems = vue.shallowRef([]);
    const tooltipVirtualRef = vue.ref();
    const tooltipContent = vue.ref("");
    const tooltipVisible = vue.ref(false);
    const isHorizontal = vue.computed(() => props$1.mode === "horizontal");
    const isCompact = vue.computed(() => props$1.mode === "compact");
    const collapseTooltipDisabled = vue.computed(
      () => isCompact.value ? !props$1.collapse : props$1.tooltipDisabled
    );
    const menuProps = vue.computed(
      () => core.pick(props$1, 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$1.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 && core.contentIsEllipsis(titleEl, "horizontal")) {
            tooltipVirtualRef.value = itemEl;
            tooltipContent.value = text;
            tooltipVisible.value = true;
            return;
          }
        }
      }
      hideTooltip();
    };
    const isPageFirstLoad = vue.ref(true);
    const isNavigating = vue.ref(false);
    vue.onMounted(() => {
      setTimeout(() => {
        isPageFirstLoad.value = false;
      }, 100);
    });
    const handleOpen = (index2, indexPath) => {
      var _a2;
      emit("open", index2, indexPath);
      const currentPath = window.location.pathname;
      if (isPageFirstLoad.value) return;
      if (isNavigating.value) return;
      function findFirstLeaf(menu) {
        if (!menu.children || !menu.children.length) return menu;
        return findFirstLeaf(menu.children[0]);
      }
      const currentItem = (_a2 = menuItems.value) == null ? void 0 : _a2.find((m) => m.index === index2);
      if (!(currentItem == null ? void 0 : currentItem.children)) return;
      const firstLeaf = findFirstLeaf(currentItem);
      if (!(firstLeaf == null ? void 0 : firstLeaf.path)) return;
      const isInThisMenu = checkPathInMenuTree(currentItem, currentPath);
      if (!isInThisMenu) {
        isNavigating.value = true;
        router.push(firstLeaf.path).finally(() => {
          setTimeout(() => {
            isNavigating.value = false;
          }, 100);
        });
      }
    };
    const checkPathInMenuTree = (menu, path) => {
      var _a2;
      if (menu.path === path) {
        return true;
      }
      if ((_a2 = menu.children) == null ? void 0 : _a2.length) {
        return menu.children.some((child) => checkPathInMenuTree(child, path));
      }
      return false;
    };
    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 } = util.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;
        }
      }
    });
    vue.onMounted(() => {
      var _a2;
      if (props$1.ellipsis && isHorizontal.value && ((_a2 = menuRef.value) == null ? void 0 : _a2.$el)) {
        computedEllipsis();
        observe();
      }
    });
    vue.watch(
      [
        () => props$1.ellipsis,
        isHorizontal,
        () => {
          var _a2;
          return (_a2 = menuRef.value) == null ? void 0 : _a2.$el;
        },
        () => props$1.items
      ],
      () => {
        var _a2;
        if (props$1.ellipsis && isHorizontal.value && ((_a2 = menuRef.value) == null ? void 0 : _a2.$el)) {
          observe();
          return;
        }
        unobserve();
        sliceIndex.value = -1;
      }
    );
    vue.watch(
      [() => props$1.items, sliceIndex, isHorizontal],
      () => {
        const { items, moreItems } = util.getMenuItems(
          props$1.items,
          sliceIndex.value,
          isHorizontal.value
        );
        menuItems.value = items;
        moreMenuItems.value = moreItems;
      },
      {
        immediate: true,
        deep: true
      }
    );
    return {
      EllipsisOutlined: icons.EllipsisOutlined,
      getPopperClass: util.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, props2) => {
  const target = sfc.__vccOpts || sfc;
  for (const [key, val] of props2) {
    target[key] = val;
  }
  return target;
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_MenuItems = vue.resolveComponent("MenuItems");
  const _component_ElIcon = vue.resolveComponent("ElIcon");
  const _component_ElSubMenu = vue.resolveComponent("ElSubMenu");
  const _component_EleTooltip = vue.resolveComponent("EleTooltip");
  const _component_ElMenu = vue.resolveComponent("ElMenu");
  return vue.openBlock(), vue.createBlock(_component_ElMenu, vue.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: vue.withCtx(() => {
      var _a;
      return [
        _ctx.menuItems && _ctx.menuItems.length ? (vue.openBlock(), vue.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
        }, vue.createSlots({ _: 2 }, [
          vue.renderList(Object.keys(_ctx.$slots), (name) => {
            return {
              name,
              fn: vue.withCtx((slotProps) => [
                vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
              ])
            };
          })
        ]), 1032, ["items", "tipDisabled", "theme", "popTheme", "colorful", "popupColorful", "firstPopClass", "webkit", "onItemClick", "onItemMouseenter", "onItemMouseleave", "onParentMouseenter", "onParentMouseleave"])) : vue.createCommentVNode("", true),
        _ctx.moreMenuItems && _ctx.moreMenuItems.length ? (vue.openBlock(), vue.createBlock(_component_ElSubMenu, vue.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: vue.withCtx(() => {
            var _a2;
            return [
              vue.createVNode(_component_ElIcon, vue.normalizeProps(vue.guardReactiveProps(((_a2 = _ctx.ellipsisProps) == null ? void 0 : _a2.iconProps) || {})), {
                default: vue.withCtx(() => {
                  var _a3, _b;
                  return [
                    (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(((_a3 = _ctx.ellipsisProps) == null ? void 0 : _a3.icon) ?? _ctx.EllipsisOutlined), {
                      style: vue.normalizeStyle((_b = _ctx.ellipsisProps) == null ? void 0 : _b.iconStyle)
                    }, null, 8, ["style"]))
                  ];
                }),
                _: 1
              }, 16)
            ];
          }),
          default: vue.withCtx(() => [
            vue.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
            }, vue.createSlots({ _: 2 }, [
              vue.renderList(Object.keys(_ctx.$slots), (name) => {
                return {
                  name,
                  fn: vue.withCtx((slotProps) => [
                    vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
                  ])
                };
              })
            ]), 1032, ["items", "tipDisabled", "theme", "popTheme", "colorful", "popupColorful", "firstPopClass", "webkit", "onItemClick", "onItemMouseenter", "onItemMouseleave", "onParentMouseenter", "onParentMouseleave"])
          ]),
          _: 3
        }, 16, ["popperClass"])) : vue.createCommentVNode("", true),
        _ctx.textEllipsisTooltip ? (vue.openBlock(), vue.createBlock(_component_EleTooltip, vue.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"])) : vue.createCommentVNode("", true)
      ];
    }),
    _: 3
  }, 16, ["mode", "collapse", "class", "onOpen", "onClose", "onSelect"]);
}
const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
module.exports = index;