@opensig/opendesign/es/menu/OMenuItem.vue.mjs

<p align="center"><img src="../docs/public/opendesign-logo-light.png"/></p> <h1 align="center">opendesign</h1> <p align="center">一个 Vue 3 组件库</p> <p align="center"><b>皮肤可定制，使用 TypeScript</b></p>

import { defineComponent, inject, computed, ref, onMounted, createElementBlock, openBlock, unref, normalizeStyle, normalizeClass, createCommentVNode, createElementVNode, createBlock, renderSlot, resolveDynamicComponent, withCtx, createTextVNode, toDisplayString } from "vue";
import { menuItemProps } from "./types.mjs";
import { menuInjectKey, subMenuInjectKey } from "./provide.mjs";
import { isUndefined } from "../_utils/is.mjs";
import { isOverflown } from "../_utils/dom.mjs";
import { OPopover } from "../popover/index.mjs";
const _hoisted_1 = ["data-level"];
const _hoisted_2 = {
  key: 0,
  class: "o-menu-item-icon"
};
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "OMenuItem",
  props: menuItemProps,
  emits: ["click"],
  setup(__props, { emit: __emit }) {
    const props = __props;
    const emits = __emit;
    const menuInjection = inject(menuInjectKey, null);
    const subMenuInjection = inject(subMenuInjectKey, null);
    const isSelected = computed(() => {
      if (menuInjection) {
        return menuInjection.realValue.value === props.value;
      }
      return false;
    });
    const onItemClick = (ev) => {
      ev.stopPropagation();
      if (props.disabled) {
        return;
      }
      if (isUndefined(props.value)) {
        return;
      }
      emits("click", ev);
      menuInjection == null ? void 0 : menuInjection.updateModelValue(props.value);
    };
    const currentDepth = subMenuInjection ? subMenuInjection.parentDepth + 1 : 0;
    menuInjection == null ? void 0 : menuInjection.menuTree.addChild({
      value: props.value,
      parentVal: subMenuInjection == null ? void 0 : subMenuInjection.value
    });
    const menuItemRef = ref();
    const itemContentRef = ref();
    const isContentOverflow = ref(false);
    const content = ref("");
    onMounted(() => {
      var _a;
      if (!itemContentRef.value) {
        return;
      }
      isContentOverflow.value = isOverflown(itemContentRef.value);
      content.value = ((_a = itemContentRef.value) == null ? void 0 : _a.innerText) || "";
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("li", {
        class: normalizeClass({
          "o-menu-item": true,
          "o-menu-item-selected": isSelected.value,
          "o-menu-item-disabled": _ctx.$props.disabled
        }),
        style: normalizeStyle({
          "--menu-level": unref(currentDepth)
        }),
        "data-level": unref(currentDepth),
        onClick: onItemClick,
        ref_key: "menuItemRef",
        ref: menuItemRef
      }, [
        props.icon || _ctx.$slots.icon ? (openBlock(), createElementBlock("div", _hoisted_2, [
          renderSlot(_ctx.$slots, "icon", {}, () => [
            (openBlock(), createBlock(resolveDynamicComponent(props.icon)))
          ])
        ])) : createCommentVNode("v-if", true),
        createElementVNode(
          "div",
          {
            class: "o-menu-item-content",
            ref_key: "itemContentRef",
            ref: itemContentRef
          },
          [
            renderSlot(_ctx.$slots, "default")
          ],
          512
          /* NEED_PATCH */
        ),
        isContentOverflow.value ? (openBlock(), createBlock(unref(OPopover), {
          key: 1,
          offset: 12,
          target: menuItemRef.value,
          position: "bottom",
          wrapClass: "o-menu-popover"
        }, {
          default: withCtx(() => [
            createTextVNode(
              toDisplayString(content.value),
              1
              /* TEXT */
            )
          ]),
          _: 1
          /* STABLE */
        }, 8, ["target"])) : createCommentVNode("v-if", true)
      ], 14, _hoisted_1);
    };
  }
});
export {
  _sfc_main as default
};