import { computed , defineComponent , PropType , toRef , toRefs } from 'vue' ; import { SubMenuProps } from './interface' ; import SubMenuInline from './sub-menu-inline.vue' ; import SubMenuPop from './sub-menu-pop.vue' ; import useMenu from './hooks/use-menu' ; import useLevel from './hooks/use-level' ; import IconDown from '../icon/icon-down' ; import IconRight from '../icon/icon-right' ; import useMenuContext from './hooks/use-menu-context' ; import useMenuDataCollector from './hooks/use-menu-data-collector' ; export default defineComponent ( { name : 'SubMenu' , props : { zh en key : { type : String } , zh en title : { type : String } , zh en selectable : { type : Boolean } , zh en popup : { type : Boolean as PropType < SubMenuProps [ 'popup' ] > , default : false } } , zh en slot version zh en slot zh en slot zh en slot setup ( props , { attrs } ) { const { key } = useMenu ( ) ; const { level } = useLevel ( ) ; const { popup } = toRefs ( props ) ; const menuContext = useMenuContext ( ) ; const computedPopup = computed ( ( ) => { const { mode , collapsed , inTrigger } = menuContext ; const forcePopup = ! ! ( typeof popup . value === 'function' ? popup . value ( level . value ) : popup . value ) ; return forcePopup || collapsed || inTrigger || mode !== 'vertical' ; } ) ; const { subMenuKeys , menuItemKeys } = useMenuDataCollector ( { key : key . value } ) ; const isChildrenSelected = computed ( ( ) => { const selectedKeys = menuContext . selectedKeys || [ ] ; const checkSelected = ( menuKeys ) => { for ( let i = 0 ; i < selectedKeys . length ; i ++ ) { const selectedKey = selectedKeys [ i ] ; if ( menuKeys . includes ( selectedKey ) ) { return true ; } } return false ; } ; return ( checkSelected ( subMenuKeys . value ) || checkSelected ( menuItemKeys . value ) ) ; } ) ; return { subMenuKeys , menuItemKeys , isChildrenSelected , props , attrs , computedKey : key , computedPopup , expandIconDown : toRef ( menuContext , 'expandIconDown' ) , expandIconRight : toRef ( menuContext , 'expandIconRight' ) } ; } , render ( ) { const { props , attrs , computedKey , computedPopup , expandIconDown , expandIconRight , isChildrenSelected , } = this ; const _props = { ... props , ... attrs , key : computedKey , isChildrenSelected } ; const _slots = { ... this . $slots , 'expand-icon-down' : this . $slots [ 'expand-icon-down' ] || expandIconDown || ( ( ) => < IconDown />), 'expand-icon-right' : this . $slots [ 'expand-icon-right' ] || expandIconRight || ( ( ) => < IconRight />) } ; return computedPopup ? ( < SubMenuPop { ... _props } v - slots = { _slots } />) : (<SubMenuInline {..._props} v-slots={_slots}/ > ) ; } } ) ;