'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
require('../../../utils/index.cjs');
require('../../../vue-components/vc-overflow/index.cjs');
var useMenuContext = require('./hooks/useMenuContext.cjs');
var useKeyPath = require('./hooks/useKeyPath.cjs');
var useDirectionStyle = require('./hooks/useDirectionStyle.cjs');
var PopupTrigger = require('./PopupTrigger.cjs');
var SubMenuList = require('./SubMenuList.cjs');
var InlineSubMenuList = require('./InlineSubMenuList.cjs');
var props = require('./props.cjs');
var log = require('../../../utils/log.cjs');
var is = require('../../../utils/is.cjs');
var _class = require('../../../utils/dom/class.cjs');
var vnode = require('../../../utils/vue/vnode.cjs');
var props$1 = require('../../../utils/vue/props.cjs');
var Overflow = require('../../../vue-components/vc-overflow/src/Overflow.cjs');

let indexGuid = 0;
var ASubMenu = /* @__PURE__ */ vue.defineComponent({
  compatConfig: {
    MODE: 3
  },
  name: "ASubMenu",
  inheritAttrs: false,
  props: props.subMenuProps(),
  slots: Object,
  setup(props, {
    slots,
    attrs,
    emit
  }) {
    var _a, _b;
    useMenuContext.useProvideFirstLevel(false);
    const isMeasure = useKeyPath.useMeasure();
    const instance = vue.getCurrentInstance();
    const vnodeKey = typeof instance.vnode.key === "symbol" ? String(instance.vnode.key) : instance.vnode.key;
    log.devWarning(typeof instance.vnode.key !== "symbol", "SubMenu", `SubMenu \`:key="${String(vnodeKey)}"\` not support Symbol type`);
    const key = is.isValid(vnodeKey) ? vnodeKey : `sub_menu_${++indexGuid}_$$_not_set_key`;
    const eventKey = (_a = props.eventKey) != null ? _a : is.isValid(vnodeKey) ? `sub_menu_${++indexGuid}_$$_${vnodeKey}` : key;
    const {
      parentEventKeys,
      parentInfo,
      parentKeys
    } = useKeyPath.useInjectKeyPath();
    const keysPath = vue.computed(() => [...parentKeys.value, key]);
    const childrenEventKeys = vue.shallowRef([]);
    const menuInfo = {
      eventKey,
      key,
      parentEventKeys,
      childrenEventKeys,
      parentKeys
    };
    (_b = parentInfo.childrenEventKeys) == null ? void 0 : _b.value.push(eventKey);
    vue.onBeforeUnmount(() => {
      var _a2;
      if (parentInfo.childrenEventKeys) {
        parentInfo.childrenEventKeys.value = (_a2 = parentInfo.childrenEventKeys) == null ? void 0 : _a2.value.filter((k) => k !== eventKey);
      }
    });
    useKeyPath.useProvideKeyPath(eventKey, key, menuInfo);
    const {
      prefixCls,
      activeKeys,
      disabled: contextDisabled,
      changeActiveKeys,
      mode,
      inlineCollapsed,
      openKeys,
      overflowDisabled,
      onOpenChange,
      registerMenuInfo,
      unRegisterMenuInfo,
      selectedSubMenuKeys,
      expandIcon: menuExpandIcon,
      theme
    } = useMenuContext.useInjectMenu();
    const hasKey = vnodeKey !== void 0 && vnodeKey !== null;
    const forceRender = !isMeasure && (useMenuContext.useInjectForceRender() || !hasKey);
    useMenuContext.useProvideForceRender(forceRender);
    if (isMeasure && hasKey || !isMeasure && !hasKey || forceRender) {
      registerMenuInfo(eventKey, menuInfo);
      vue.onBeforeUnmount(() => {
        unRegisterMenuInfo(eventKey);
      });
    }
    const subMenuPrefixCls = vue.computed(() => `${prefixCls.value}-submenu`);
    const mergedDisabled = vue.computed(() => contextDisabled.value || props.disabled);
    const elementRef = vue.shallowRef();
    const popupRef = vue.shallowRef();
    const originOpen = vue.computed(() => openKeys.value.includes(key));
    const open = vue.computed(() => !overflowDisabled.value && originOpen.value);
    const childrenSelected = vue.computed(() => {
      return selectedSubMenuKeys.value.includes(key);
    });
    const isActive = vue.shallowRef(false);
    vue.watch(activeKeys, () => {
      isActive.value = !!activeKeys.value.find((val) => val === key);
    }, {
      immediate: true
    });
    const onInternalTitleClick = (e) => {
      if (mergedDisabled.value)
        return;
      emit("titleClick", e, key);
      if (mode.value === "inline")
        onOpenChange(key, !originOpen.value);
    };
    const onMouseEnter = (event) => {
      if (!mergedDisabled.value) {
        changeActiveKeys(keysPath.value);
        emit("mouseenter", event);
      }
    };
    const onMouseLeave = (event) => {
      if (!mergedDisabled.value) {
        changeActiveKeys([]);
        emit("mouseleave", event);
      }
    };
    const directionStyle = useDirectionStyle.default(vue.computed(() => keysPath.value.length));
    const onPopupVisibleChange = (newVisible) => {
      if (mode.value !== "inline")
        onOpenChange(key, newVisible);
    };
    const onInternalFocus = () => {
      changeActiveKeys(keysPath.value);
    };
    const popupId = eventKey && `${eventKey}-popup`;
    const popupClassName = vue.computed(() => _class.classNames(prefixCls.value, `${prefixCls.value}-${props.theme || theme.value}`, props.popupClassName));
    const renderTitle = (title, icon) => {
      if (!icon) {
        return inlineCollapsed.value && !parentKeys.value.length && title && typeof title === "string" ? vue.createVNode("div", {
          "class": `${prefixCls.value}-inline-collapsed-noicon`
        }, [title.charAt(0)]) : vue.createVNode("span", {
          "class": `${prefixCls.value}-title-content`
        }, [title]);
      }
      const titleIsSpan = is.isValidElement(title) && title.type === "span";
      return vue.createVNode(vue.Fragment, null, [vnode.cloneElement(typeof icon === "function" ? icon(props.originItemValue) : icon, {
        class: `${prefixCls.value}-item-icon`
      }, false), titleIsSpan ? title : vue.createVNode("span", {
        "class": `${prefixCls.value}-title-content`
      }, [title])]);
    };
    const triggerModeRef = vue.computed(() => {
      return mode.value !== "inline" && keysPath.value.length > 1 ? "vertical" : mode.value;
    });
    const renderMode = vue.computed(() => mode.value === "horizontal" ? "vertical" : mode.value);
    const subMenuTriggerModeRef = vue.computed(() => triggerModeRef.value === "horizontal" ? "vertical" : triggerModeRef.value);
    const baseTitleNode = () => {
      var _a2, _b2;
      const subMenuPrefixClsValue = subMenuPrefixCls.value;
      const icon = (_b2 = props.icon) != null ? _b2 : (_a2 = slots.icon) == null ? void 0 : _a2.call(slots, props);
      const expandIcon = props.expandIcon || slots.expandIcon || menuExpandIcon.value;
      const title = renderTitle(props$1.getPropsSlot(slots, props, "title"), icon);
      return vue.createVNode("div", {
        "style": directionStyle.value,
        "class": `${subMenuPrefixClsValue}-title`,
        "tabindex": mergedDisabled.value ? null : -1,
        "ref": elementRef,
        "title": typeof title === "string" ? title : null,
        "data-menu-id": key,
        "aria-expanded": open.value,
        "aria-haspopup": true,
        "aria-controls": popupId,
        "aria-disabled": mergedDisabled.value,
        "onClick": onInternalTitleClick,
        "onFocus": onInternalFocus
      }, [title, mode.value !== "horizontal" && expandIcon ? expandIcon({
        ...props,
        isOpen: open.value
      }) : vue.createVNode("i", {
        "class": `${subMenuPrefixClsValue}-arrow`
      }, null)]);
    };
    return () => {
      var _a2;
      if (isMeasure) {
        if (!hasKey)
          return null;
        return (_a2 = slots.default) == null ? void 0 : _a2.call(slots);
      }
      const subMenuPrefixClsValue = subMenuPrefixCls.value;
      let titleNode = () => null;
      if (!overflowDisabled.value && mode.value !== "inline") {
        const popupOffset = mode.value === "horizontal" ? [0, 8] : [10, 0];
        titleNode = () => vue.createVNode(PopupTrigger.default, {
          "mode": triggerModeRef.value,
          "prefixCls": subMenuPrefixClsValue,
          "visible": !props.internalPopupClose && open.value,
          "popupClassName": popupClassName.value,
          "popupOffset": props.popupOffset || popupOffset,
          "disabled": mergedDisabled.value,
          "onVisibleChange": onPopupVisibleChange
        }, {
          default: () => [baseTitleNode()],
          popup: () => vue.createVNode(useMenuContext.MenuContextProvider, {
            "mode": subMenuTriggerModeRef.value
          }, {
            default: () => [vue.createVNode(SubMenuList.default, {
              "id": popupId,
              "ref": popupRef
            }, {
              default: slots.default
            })]
          })
        });
      } else {
        titleNode = () => vue.createVNode(PopupTrigger.default, null, {
          default: baseTitleNode
        });
      }
      return vue.createVNode(useMenuContext.MenuContextProvider, {
        "mode": renderMode.value
      }, {
        default: () => [vue.createVNode(Overflow.default.Item, {
          "component": "li",
          ...attrs,
          "role": "none",
          "class": _class.classNames(subMenuPrefixClsValue, `${subMenuPrefixClsValue}-${mode.value}`, attrs.class, {
            [`${subMenuPrefixClsValue}-open`]: open.value,
            [`${subMenuPrefixClsValue}-active`]: isActive.value,
            [`${subMenuPrefixClsValue}-selected`]: childrenSelected.value,
            [`${subMenuPrefixClsValue}-disabled`]: mergedDisabled.value
          }),
          "onMouseenter": onMouseEnter,
          "onMouseleave": onMouseLeave,
          "data-submenu-id": key
        }, {
          default: () => {
            return vue.createVNode(vue.Fragment, null, [titleNode(), !overflowDisabled.value && vue.createVNode(InlineSubMenuList.default, {
              "id": popupId,
              "open": open.value,
              "keyPath": keysPath.value
            }, {
              default: slots.default
            })]);
          }
        })]
      });
    };
  }
});

exports.default = ASubMenu;
//# sourceMappingURL=SubMenu.cjs.map
