@opensig/opendesign/lib/menu/OMenuItem.vue.js

"use strict";
const vue = require("vue");
const types = require("./types.js");
const provide = require("./provide.js");
const is = require("../_utils/is.js");
const useElementOverflown = require("../hooks/use-element-overflown.js");
require("../hooks/use-theme.js");
require("../_utils/global.js");
require("@vueuse/core");
const index = require("../popover/index.js");
const _hoisted_1 = ["data-level"];
const _hoisted_2 = {
  key: 0,
  class: "o-menu-item-icon"
};
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  __name: "OMenuItem",
  props: types.menuItemProps,
  emits: ["click"],
  setup(__props, { emit: __emit }) {
    const props = __props;
    const emits = __emit;
    const menuInjection = vue.inject(provide.menuInjectKey, null);
    const subMenuInjection = vue.inject(provide.subMenuInjectKey, null);
    const isSelected = vue.computed(() => {
      if (menuInjection) {
        return menuInjection.realValue.value === props.value;
      }
      return false;
    });
    const onItemClick = (ev) => {
      ev.stopPropagation();
      if (props.disabled) {
        return;
      }
      if (is.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
    });
    menuInjection == null ? void 0 : menuInjection.notifyTreeChange();
    const menuItemRef = vue.useTemplateRef("menuItemRef");
    const itemContentRef = vue.useTemplateRef("itemContentRef");
    const isContentOverflow = useElementOverflown.useElementOverflown(itemContentRef);
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createElementBlock("li", {
        ref_key: "menuItemRef",
        ref: menuItemRef,
        class: vue.normalizeClass({
          "o-menu-item": true,
          "o-menu-item-selected": isSelected.value,
          "o-menu-item-disabled": _ctx.$props.disabled
        }),
        style: vue.normalizeStyle({
          "--menu-level": vue.unref(currentDepth)
        }),
        "data-level": vue.unref(currentDepth),
        onClick: onItemClick
      }, [
        props.icon || _ctx.$slots.icon ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
          vue.renderSlot(_ctx.$slots, "icon", {}, () => [
            (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(props.icon)))
          ])
        ])) : vue.createCommentVNode("v-if", true),
        vue.createElementVNode(
          "div",
          {
            ref_key: "itemContentRef",
            ref: itemContentRef,
            class: "o-menu-item-content"
          },
          [
            vue.renderSlot(_ctx.$slots, "default")
          ],
          512
          /* NEED_PATCH */
        ),
        vue.unref(isContentOverflow) ? (vue.openBlock(), vue.createBlock(vue.unref(index.OPopover), {
          key: 1,
          offset: 12,
          target: menuItemRef.value,
          position: "bottom",
          "wrap-class": "o-menu-popover"
        }, {
          default: vue.withCtx(() => [
            vue.renderSlot(_ctx.$slots, "default")
          ]),
          _: 3
          /* FORWARDED */
        }, 8, ["target"])) : vue.createCommentVNode("v-if", true)
      ], 14, _hoisted_1);
    };
  }
});
module.exports = _sfc_main;