yuang-framework-ui-pc/es/ele-menus/components/menu-items.js

yuang-framework-ui-pc Library

import { defineComponent, resolveComponent, createElementBlock, openBlock, Fragment, renderList, createBlock, mergeProps, createSlots, withCtx, createVNode, renderSlot, createCommentVNode, toDisplayString, normalizeStyle, normalizeClass } from "vue";
import { ElMenuItemGroup, ElSubMenu, ElMenuItem } from "element-plus";
import { ArrowRight, ArrowDown } from "../../icons";
import { pick } from "../../utils/core";
import ItemTitle from "./item-title";
import { getPopperClass } from "../util";
const _sfc_main = defineComponent({
  name: "MenuItems",
  components: { ElMenuItem, ElSubMenu, ElMenuItemGroup, ItemTitle },
  props: {
    /** 菜单数据 */
    items: Array,
    /** 是否是第一级菜单 */
    first: Boolean,
    /** 是否禁用折叠的 tooltip */
    tipDisabled: Boolean,
    /** 父级是否是分组菜单 */
    parentIsGroup: Boolean,
    /** 主题 */
    theme: String,
    /** 气泡菜单主题 */
    popTheme: String,
    /** 是否彩色图标 */
    colorful: Boolean,
    /** 气泡菜单是否彩色图标 */
    popupColorful: [Boolean, String],
    /** 第一级气泡菜单类名 */
    firstPopClass: String,
    /** 是否是 webkit 内核 */
    webkit: Boolean
  },
  emits: {
    itemClick: (_item, _e) => true,
    itemMouseenter: (_item, _e) => true,
    itemMouseleave: (_item, _e) => true,
    parentMouseenter: (_item, _e) => true,
    parentMouseleave: (_item, _e) => true
  },
  setup(_props, { emit }) {
    const handleMenuItemClick = () => {
    };
    const handleItemClick = (item, e) => {
      emit("itemClick", item, e);
    };
    const handleItemMouseenter = (item, e) => {
      emit("itemMouseenter", item, e);
    };
    const handleItemMouseleave = (item, e) => {
      emit("itemMouseleave", item, e);
    };
    const handleParentMouseenter = (item, e) => {
      emit("parentMouseenter", item, e);
    };
    const handleParentMouseleave = (item, e) => {
      emit("parentMouseleave", item, e);
    };
    return {
      pick,
      ArrowDown,
      ArrowRight,
      getPopperClass,
      handleMenuItemClick,
      handleItemClick,
      handleItemMouseenter,
      handleItemMouseleave,
      handleParentMouseenter,
      handleParentMouseleave
    };
  }
});
const _export_sfc = (sfc, props) => {
  const target = sfc.__vccOpts || sfc;
  for (const [key, val] of props) {
    target[key] = val;
  }
  return target;
};
const _hoisted_1 = {
  key: 0,
  class: "ele-menu-title"
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_ItemTitle = resolveComponent("ItemTitle");
  const _component_ElMenuItem = resolveComponent("ElMenuItem");
  const _component_MenuItems = resolveComponent("MenuItems", true);
  const _component_ElMenuItemGroup = resolveComponent("ElMenuItemGroup");
  const _component_ElSubMenu = resolveComponent("ElSubMenu");
  return openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.items, (item) => {
    return openBlock(), createElementBlock(Fragment, null, [
      !item.children || !item.children.length ? (openBlock(), createBlock(_component_ElMenuItem, mergeProps({
        key: 0,
        ref_for: true
      }, _ctx.pick(item, ["route", "disabled", "class", "style"]), {
        key: (item.key || item.index || item.path) + "-" + _ctx.tipDisabled,
        index: item.index || item.path,
        class: [{ "ele-menu-overflow": item.overflow }],
        onClick: _ctx.handleMenuItemClick
      }), createSlots({
        default: withCtx(() => [
          createVNode(_component_ItemTitle, {
            item,
            showTitle: !(_ctx.first && !_ctx.tipDisabled),
            showLink: true,
            onItemClick: _ctx.handleItemClick,
            onItemMouseenter: _ctx.handleItemMouseenter,
            onItemMouseleave: _ctx.handleItemMouseleave
          }, createSlots({ _: 2 }, [
            renderList(Object.keys(_ctx.$slots), (name) => {
              return {
                name,
                fn: withCtx((slotProps) => [
                  renderSlot(_ctx.$slots, name, mergeProps({ ref_for: true }, slotProps || {}))
                ])
              };
            })
          ]), 1032, ["item", "showTitle", "onItemClick", "onItemMouseenter", "onItemMouseleave"])
        ]),
        _: 2
      }, [
        _ctx.first && !_ctx.tipDisabled ? {
          name: "title",
          fn: withCtx(() => [
            renderSlot(_ctx.$slots, "title", {
              item,
              title: item.title
            }, () => [
              item.title ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(item.title), 1)) : createCommentVNode("", true)
            ])
          ]),
          key: "0"
        } : void 0
      ]), 1040, ["index", "class", "onClick"])) : item.group === true && !_ctx.parentIsGroup ? (openBlock(), createBlock(_component_ElMenuItemGroup, {
        key: (item.key || item.index || item.path) + "-group",
        class: normalizeClass(item.class),
        style: normalizeStyle(item.style)
      }, {
        title: withCtx(() => [
          createVNode(_component_ItemTitle, {
            item,
            onItemMouseenter: _ctx.handleParentMouseenter,
            onItemMouseleave: _ctx.handleParentMouseleave
          }, createSlots({ _: 2 }, [
            renderList(Object.keys(_ctx.$slots), (name) => {
              return {
                name,
                fn: withCtx((slotProps) => [
                  renderSlot(_ctx.$slots, name, mergeProps({ ref_for: true }, slotProps || {}))
                ])
              };
            })
          ]), 1032, ["item", "onItemMouseenter", "onItemMouseleave"])
        ]),
        default: withCtx(() => [
          createVNode(_component_MenuItems, {
            items: item.children,
            first: _ctx.first,
            tipDisabled: _ctx.tipDisabled,
            parentIsGroup: true,
            theme: _ctx.theme,
            popTheme: _ctx.popTheme,
            colorful: _ctx.colorful,
            popupColorful: _ctx.popupColorful,
            firstPopClass: _ctx.firstPopClass,
            webkit: _ctx.webkit,
            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, mergeProps({ ref_for: true }, slotProps || {}))
                ])
              };
            })
          ]), 1032, ["items", "first", "tipDisabled", "theme", "popTheme", "colorful", "popupColorful", "firstPopClass", "webkit", "onItemClick", "onItemMouseenter", "onItemMouseleave", "onParentMouseenter", "onParentMouseleave"])
        ]),
        _: 2
      }, 1032, ["class", "style"])) : (openBlock(), createBlock(_component_ElSubMenu, mergeProps(
        {
          key: 2,
          ref_for: true
        },
        _ctx.pick(item, [
          "showTimeout",
          "hideTimeout",
          "disabled",
          "popperOffset",
          "class",
          "style"
        ]),
        {
          key: (item.key || item.index || item.path) + "-sub",
          index: item.index || item.path || "",
          popperClass: _ctx.getPopperClass(
            item.popperClass,
            _ctx.theme,
            _ctx.popTheme,
            _ctx.colorful,
            _ctx.popupColorful,
            _ctx.firstPopClass,
            _ctx.first,
            _ctx.webkit
          ),
          teleported: item.teleported ?? !!_ctx.first,
          expandCloseIcon: item.expandCloseIcon ?? _ctx.ArrowDown,
          expandOpenIcon: item.expandOpenIcon ?? _ctx.ArrowDown,
          collapseCloseIcon: item.collapseCloseIcon ?? _ctx.ArrowRight,
          collapseOpenIcon: item.collapseOpenIcon ?? _ctx.ArrowRight,
          class: [{ "ele-menu-overflow": item.overflow }]
        }
      ), {
        title: withCtx(() => [
          createVNode(_component_ItemTitle, {
            item,
            onItemMouseenter: _ctx.handleParentMouseenter,
            onItemMouseleave: _ctx.handleParentMouseleave
          }, createSlots({ _: 2 }, [
            renderList(Object.keys(_ctx.$slots), (name) => {
              return {
                name,
                fn: withCtx((slotProps) => [
                  renderSlot(_ctx.$slots, name, mergeProps({ ref_for: true }, slotProps || {}))
                ])
              };
            })
          ]), 1032, ["item", "onItemMouseenter", "onItemMouseleave"])
        ]),
        default: withCtx(() => [
          !(item.children.length === 1 && item.children[0] == null) ? (openBlock(), createBlock(_component_MenuItems, {
            key: 0,
            items: item.children,
            first: false,
            tipDisabled: _ctx.tipDisabled,
            parentIsGroup: false,
            theme: _ctx.theme,
            popTheme: _ctx.popTheme,
            colorful: _ctx.colorful,
            popupColorful: _ctx.popupColorful,
            firstPopClass: _ctx.firstPopClass,
            webkit: _ctx.webkit,
            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, mergeProps({ ref_for: true }, slotProps || {}))
                ])
              };
            })
          ]), 1032, ["items", "tipDisabled", "theme", "popTheme", "colorful", "popupColorful", "firstPopClass", "webkit", "onItemClick", "onItemMouseenter", "onItemMouseleave", "onParentMouseenter", "onParentMouseleave"])) : createCommentVNode("", true)
        ]),
        _: 2
      }, 1040, ["index", "popperClass", "teleported", "expandCloseIcon", "expandOpenIcon", "collapseCloseIcon", "collapseOpenIcon", "class"]))
    ], 64);
  }), 256);
}
const menuItems = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
  menuItems as default
};