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

yuang-framework-ui-pc Library

import { defineComponent, resolveComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, Fragment, renderList, createBlock, createSlots, withCtx, renderSlot, mergeProps, createVNode } from "vue";
import DropdownMenuItem from "./dropdown-menu-item";
const _sfc_main = defineComponent({
  name: "DropdownMenus",
  components: { DropdownMenuItem },
  props: {
    /** 下拉菜单数据 */
    items: {
      type: Array,
      required: true
    },
    /** 选中的菜单 */
    selected: [String, Number, Object],
    /** 自定义下拉菜单样式 */
    menuStyle: Object,
    /** 自定义图标属性 */
    iconProps: Object,
    /** 尺寸 */
    size: String
  },
  emits: {
    itemClick: (_item) => true,
    wrapperContext: (_e) => true
  },
  setup(_props, { emit }) {
    const handleItemClick = (item) => {
      if (item.disabled) {
        return;
      }
      emit("itemClick", item);
    };
    const handleWrapperContext = (e) => {
      emit("wrapperContext", e);
    };
    return {
      handleItemClick,
      handleWrapperContext
    };
  }
});
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_DropdownMenus = resolveComponent("DropdownMenus", true);
  const _component_DropdownMenuItem = resolveComponent("DropdownMenuItem");
  return openBlock(), createElementBlock("div", {
    class: normalizeClass([
      "ele-dropdown-menu",
      { "is-small": _ctx.size === "small" },
      { "is-large": _ctx.size === "large" }
    ]),
    style: normalizeStyle(_ctx.menuStyle)
  }, [
    (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.items, (item) => {
      return openBlock(), createBlock(_component_DropdownMenuItem, {
        key: item.key == null ? JSON.stringify(item.command) : item.key,
        item,
        selected: _ctx.selected,
        iconProps: _ctx.iconProps,
        onItemClick: _ctx.handleItemClick,
        onWrapperContext: _ctx.handleWrapperContext
      }, createSlots({ _: 2 }, [
        renderList(Object.keys(_ctx.$slots).filter(
          (k) => "default" !== k && "subMenus" !== k
        ), (name) => {
          return {
            name,
            fn: withCtx((slotProps) => [
              renderSlot(_ctx.$slots, name, mergeProps({ ref_for: true }, slotProps || {}))
            ])
          };
        }),
        item.children && item.children.length ? {
          name: "subMenus",
          fn: withCtx(() => [
            createVNode(_component_DropdownMenus, {
              items: item.children,
              selected: _ctx.selected,
              menuStyle: _ctx.menuStyle,
              iconProps: _ctx.iconProps,
              size: _ctx.size,
              onItemClick: _ctx.handleItemClick,
              onWrapperContext: _ctx.handleWrapperContext
            }, createSlots({ _: 2 }, [
              renderList(Object.keys(_ctx.$slots).filter(
                (k) => "default" !== k && "subMenus" !== k
              ), (name) => {
                return {
                  name,
                  fn: withCtx((slotProps) => [
                    renderSlot(_ctx.$slots, name, mergeProps({ ref_for: true }, slotProps || {}))
                  ])
                };
              })
            ]), 1032, ["items", "selected", "menuStyle", "iconProps", "size", "onItemClick", "onWrapperContext"])
          ]),
          key: "0"
        } : void 0
      ]), 1032, ["item", "selected", "iconProps", "onItemClick", "onWrapperContext"]);
    }), 128))
  ], 6);
}
const dropdownMenus = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
  dropdownMenus as default
};