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

<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>

"use strict";
const vue = require("vue");
const types = require("./types.js");
const icons = require("../_utils/icons.js");
const provide = require("./provide.js");
const is = require("../_utils/is.js");
const dom = require("../_utils/dom.js");
const index = require("../popover/index.js");
const _hoisted_1 = ["data-level"];
const _hoisted_2 = {
  key: 0,
  class: "o-sub-menu-arrow"
};
const _hoisted_3 = {
  key: 1,
  class: "o-sub-menu-title-icon"
};
const _hoisted_4 = {
  key: 2,
  class: "o-sub-menu-arrow"
};
const _hoisted_5 = { class: "o-sub-menu-children-wrap" };
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  __name: "OSubMenu",
  props: types.subMenuProps,
  setup(__props) {
    const props = __props;
    const menuInjection = vue.inject(provide.menuInjectKey, null);
    const subMenuInjection = vue.inject(provide.subMenuInjectKey, null);
    const { arrowPosition } = menuInjection || {};
    const isExpanded = vue.computed(() => {
      if (is.isUndefined(props.value)) {
        return false;
      }
      if (menuInjection) {
        return menuInjection.realExpanded.value.includes(props.value);
      }
      return false;
    });
    const isAssociatedSelected = vue.computed(() => {
      if (menuInjection) {
        return menuInjection.activeNodes.value.includes(props.value);
      }
      return false;
    });
    const isSelected = vue.computed(() => {
      if (menuInjection) {
        return menuInjection.realValue.value === props.value;
      }
      return false;
    });
    const onSubItemClick = (ev) => {
      ev.stopPropagation();
      if (is.isUndefined(props.value)) {
        return;
      }
      let set = menuInjection ? /* @__PURE__ */ new Set([...menuInjection.realExpanded.value]) : /* @__PURE__ */ new Set([]);
      if (isExpanded.value && set.has(props.value)) {
        set.delete(props.value);
      }
      if (!isExpanded.value && !set.has(props.value)) {
        if (menuInjection == null ? void 0 : menuInjection.accordion.value) {
          const siblings = (menuInjection == null ? void 0 : menuInjection.menuTree.getSiblings(props.value)) || [];
          siblings.forEach((val) => {
            set.delete(val);
          });
        }
        set.add(props.value);
      }
      const expandedVal = Array.from(set);
      menuInjection == null ? void 0 : menuInjection.updateExpanded(expandedVal);
      if (props.selectable) {
        menuInjection == null ? void 0 : menuInjection.updateModelValue(props.value);
      }
    };
    const currentDepth = subMenuInjection ? subMenuInjection.parentDepth + 1 : 0;
    vue.provide(provide.subMenuInjectKey, {
      value: props.value,
      parentDepth: currentDepth
    });
    menuInjection == null ? void 0 : menuInjection.menuTree.addChild({
      value: props.value,
      parentVal: subMenuInjection == null ? void 0 : subMenuInjection.value
    });
    const subMenuTitleRef = vue.ref();
    const itemContentRef = vue.ref();
    const isContentOverflow = vue.ref(false);
    const content = vue.ref("");
    vue.onMounted(() => {
      var _a;
      if (!itemContentRef.value) {
        return;
      }
      isContentOverflow.value = dom.isOverflown(itemContentRef.value);
      content.value = ((_a = itemContentRef.value) == null ? void 0 : _a.innerText) || "";
    });
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createElementBlock("li", {
        class: vue.normalizeClass({
          "o-sub-menu": true,
          "o-sub-menu-selected": isSelected.value,
          "o-sub-menu-associated-selected": isAssociatedSelected.value,
          "o-sub-menu-expanded": isExpanded.value
        }),
        style: vue.normalizeStyle({ "--menu-level": vue.unref(currentDepth) }),
        "data-level": vue.unref(currentDepth),
        onClick: onSubItemClick
      }, [
        vue.createElementVNode(
          "div",
          {
            class: "o-sub-menu-title",
            ref_key: "subMenuTitleRef",
            ref: subMenuTitleRef
          },
          [
            vue.unref(arrowPosition) === "left" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
              vue.createVNode(vue.unref(icons.IconChevronDownBold))
            ])) : vue.createCommentVNode("v-if", true),
            _ctx.$slots.icon || props.icon ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
              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-sub-menu-title-content"
              },
              [
                vue.renderSlot(_ctx.$slots, "title")
              ],
              512
              /* NEED_PATCH */
            ),
            !vue.unref(arrowPosition) || vue.unref(arrowPosition) === "right" ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
              vue.createVNode(vue.unref(icons.IconChevronDownBold))
            ])) : vue.createCommentVNode("v-if", true)
          ],
          512
          /* NEED_PATCH */
        ),
        vue.createElementVNode(
          "ul",
          {
            class: vue.normalizeClass(["o-sub-menu-children", { "expanded": isExpanded.value }])
          },
          [
            vue.createElementVNode("div", _hoisted_5, [
              vue.renderSlot(_ctx.$slots, "default")
            ])
          ],
          2
          /* CLASS */
        ),
        isContentOverflow.value ? (vue.openBlock(), vue.createBlock(vue.unref(index.OPopover), {
          key: 0,
          offset: 12,
          target: subMenuTitleRef.value,
          position: "bottom",
          wrapClass: "o-menu-popover"
        }, {
          default: vue.withCtx(() => [
            vue.createTextVNode(
              vue.toDisplayString(content.value),
              1
              /* TEXT */
            )
          ]),
          _: 1
          /* STABLE */
        }, 8, ["target"])) : vue.createCommentVNode("v-if", true)
      ], 14, _hoisted_1);
    };
  }
});
module.exports = _sfc_main;