{"version":3,"file":"SubMenu.cjs","sources":["../../../../../../packages/components/menu/src/SubMenu.tsx"],"sourcesContent":["import type { CustomSlotsType } from '@antdv/types';\n\nimport {\n classNames,\n cloneElement,\n devWarning,\n getPropsSlot,\n isValid,\n isValidElement,\n} from '@antdv/utils';\nimport { VcOverflow } from '@antdv/vue-components/vc-overflow';\nimport {\n computed,\n defineComponent,\n getCurrentInstance,\n onBeforeUnmount,\n shallowRef,\n watch,\n} from 'vue';\n\nimport useDirectionStyle from './hooks/useDirectionStyle';\nimport useProvideKeyPath, { useInjectKeyPath, useMeasure } from './hooks/useKeyPath';\nimport {\n MenuContextProvider,\n useInjectForceRender,\n useInjectMenu,\n useProvideFirstLevel,\n useProvideForceRender,\n} from './hooks/useMenuContext';\nimport InlineSubMenuList from './InlineSubMenuList';\nimport PopupTrigger from './PopupTrigger';\nimport { subMenuProps } from './props';\nimport SubMenuList from './SubMenuList';\n\nlet indexGuid = 0;\n\nexport default defineComponent({\n compatConfig: { MODE: 3 },\n name: 'ASubMenu',\n inheritAttrs: false,\n props: subMenuProps(),\n slots: Object as CustomSlotsType<{\n icon?: any\n title?: any\n expandIcon?: { isOpen: boolean, [key: string]: any }\n default?: any\n }>,\n setup(props, { slots, attrs, emit }) {\n useProvideFirstLevel(false);\n const isMeasure = useMeasure();\n const instance = getCurrentInstance();\n const vnodeKey\n = typeof instance.vnode.key === 'symbol' ? String(instance.vnode.key) : instance.vnode.key;\n devWarning(\n typeof instance.vnode.key !== 'symbol',\n 'SubMenu',\n `SubMenu \\`:key=\"${String(vnodeKey)}\"\\` not support Symbol type`,\n );\n const key = isValid(vnodeKey) ? vnodeKey : `sub_menu_${++indexGuid}_$$_not_set_key`;\n const eventKey\n = props.eventKey\n ?? (isValid(vnodeKey) ? `sub_menu_${++indexGuid}_$$_${vnodeKey}` : (key as string));\n const { parentEventKeys, parentInfo, parentKeys } = useInjectKeyPath();\n const keysPath = computed(() => [...parentKeys.value, key]);\n const childrenEventKeys = shallowRef([]);\n const menuInfo = {\n eventKey,\n key,\n parentEventKeys,\n childrenEventKeys,\n parentKeys,\n };\n parentInfo.childrenEventKeys?.value.push(eventKey);\n onBeforeUnmount(() => {\n if (parentInfo.childrenEventKeys) {\n parentInfo.childrenEventKeys.value = parentInfo.childrenEventKeys?.value.filter(\n k => k !== eventKey,\n );\n }\n });\n\n useProvideKeyPath(eventKey, key, menuInfo);\n\n const {\n prefixCls,\n activeKeys,\n disabled: contextDisabled,\n changeActiveKeys,\n mode,\n inlineCollapsed,\n openKeys,\n overflowDisabled,\n onOpenChange,\n registerMenuInfo,\n unRegisterMenuInfo,\n selectedSubMenuKeys,\n expandIcon: menuExpandIcon,\n theme,\n } = useInjectMenu();\n\n const hasKey = vnodeKey !== undefined && vnodeKey !== null;\n // If not set key, use forceRender = true for children\n // 如果没有 key，强制 render 子元素\n const forceRender = !isMeasure && (useInjectForceRender() || !hasKey);\n useProvideForceRender(forceRender);\n\n if ((isMeasure && hasKey) || (!isMeasure && !hasKey) || forceRender) {\n registerMenuInfo(eventKey, menuInfo);\n\n onBeforeUnmount(() => {\n unRegisterMenuInfo(eventKey);\n });\n }\n\n const subMenuPrefixCls = computed(() => `${prefixCls.value}-submenu`);\n const mergedDisabled = computed(() => contextDisabled.value || props.disabled);\n const elementRef = shallowRef();\n const popupRef = shallowRef();\n\n // // ================================ Icon ================================\n // const mergedItemIcon = itemIcon || contextItemIcon;\n // const mergedExpandIcon = expandIcon || contextExpandIcon;\n\n // ================================ Open ================================\n const originOpen = computed(() => openKeys.value.includes(key));\n const open = computed(() => !overflowDisabled.value && originOpen.value);\n\n // =============================== Select ===============================\n const childrenSelected = computed(() => {\n return selectedSubMenuKeys.value.includes(key);\n });\n\n const isActive = shallowRef(false);\n watch(\n activeKeys,\n () => {\n isActive.value = !!activeKeys.value.find(val => val === key);\n },\n { immediate: true },\n );\n\n // =============================== Events ===============================\n // >>>> Title click\n const onInternalTitleClick = (e: Event) => {\n // Skip if disabled\n if (mergedDisabled.value)\n return;\n\n emit('titleClick', e, key);\n\n // Trigger open by click when mode is `inline`\n if (mode.value === 'inline')\n onOpenChange(key, !originOpen.value);\n };\n\n const onMouseEnter = (event: MouseEvent) => {\n if (!mergedDisabled.value) {\n changeActiveKeys(keysPath.value);\n emit('mouseenter', event);\n }\n };\n const onMouseLeave = (event: MouseEvent) => {\n if (!mergedDisabled.value) {\n changeActiveKeys([]);\n emit('mouseleave', event);\n }\n };\n\n // ========================== DirectionStyle ==========================\n const directionStyle = useDirectionStyle(computed(() => keysPath.value.length));\n\n // >>>>> Visible change\n const onPopupVisibleChange = (newVisible: boolean) => {\n if (mode.value !== 'inline')\n onOpenChange(key, newVisible);\n };\n\n /**\n * Used for accessibility. Helper will focus element without key board.\n * We should manually trigger an active\n */\n const onInternalFocus = () => {\n changeActiveKeys(keysPath.value);\n };\n\n // =============================== Render ===============================\n const popupId = eventKey && `${eventKey}-popup`;\n\n const popupClassName = computed(() =>\n classNames(\n prefixCls.value,\n `${prefixCls.value}-${props.theme || theme.value}`,\n props.popupClassName,\n ),\n );\n const renderTitle = (title: any, icon: any) => {\n if (!icon) {\n return inlineCollapsed.value\n && !parentKeys.value.length\n && title\n && typeof title === 'string'\n ? (\n {title.charAt(0)}
\n )\n : (\n {title}\n );\n }\n // inline-collapsed.md demo 依赖 span 来隐藏文字,有 icon 属性，则内部包裹一个 span\n // ref: https://github.com/ant-design/ant-design/pull/23456\n const titleIsSpan = isValidElement(title) && title.type === 'span';\n return (\n <>\n {cloneElement(\n typeof icon === 'function' ? icon(props.originItemValue) : icon,\n {\n class: `${prefixCls.value}-item-icon`,\n },\n false,\n )}\n {titleIsSpan ? title : {title}}\n \n );\n };\n\n // Cache mode if it change to `inline` which do not have popup motion\n const triggerModeRef = computed(() => {\n return mode.value !== 'inline' && keysPath.value.length > 1 ? 'vertical' : mode.value;\n });\n\n const renderMode = computed(() => (mode.value === 'horizontal' ? 'vertical' : mode.value));\n\n const subMenuTriggerModeRef = computed(() =>\n triggerModeRef.value === 'horizontal' ? 'vertical' : triggerModeRef.value,\n );\n const baseTitleNode = () => {\n const subMenuPrefixClsValue = subMenuPrefixCls.value;\n const icon = props.icon ?? slots.icon?.(props);\n const expandIcon = props.expandIcon || slots.expandIcon || menuExpandIcon.value;\n const title = renderTitle(getPropsSlot(slots, props, 'title'), icon);\n return (\n