yuang-framework-ui-pc/es/ele-menus/index.js

yuang-framework-ui-pc Library

import { defineComponent, ref, shallowRef, computed, onMounted, watch, resolveComponent, openBlock, createBlock, mergeProps, withCtx, createSlots, renderList, renderSlot, normalizeProps, guardReactiveProps, createCommentVNode, createVNode, resolveDynamicComponent, normalizeStyle } from "vue";
import { ElMenu, ElSubMenu, ElIcon } 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 { menusProps, menusEmits, 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
};