import { defineComponent , PropType , mergeProps , createVNode , CSSProperties , } from 'vue' ; import { getPrefixCls } from '../_utils/global-config' ; import { SHAPES , ShapeType } from './constants' ; import Avatar from './avatar.vue' ; import Popover from '../popover' ; import { TriggerProps } from '../trigger' ; export default defineComponent ( { name : 'AvatarGroup' , components : { Avatar , Popover } , props : { zh en values shape : { type : String as PropType < ShapeType > , default : 'circle' , validator : ( value ) => { return SHAPES . includes ( value ) ; } } , zh en size : Number , zh en autoFixFontSize : { type : Boolean , default : true } , zh en maxCount : { type : Number } , zh en zIndexAscend : { type : Boolean , default : false } , zh en version maxStyle : { type : Object as PropType < CSSProperties > } , zh en version maxPopoverTriggerProps : { type : Object as PropType < TriggerProps > } } , setup ( props , { slots } ) { const prefixCls = getPrefixCls ( 'avatar-group' ) ; return ( ) => { const children = slots . default ?. ( ) ?? [ ] ; const count = children . length ; let avatarsToRender = children ; if ( props . maxCount != null && count > props . maxCount ) { const avatarsInPopover = children . slice ( props . maxCount ) ; avatarsToRender = children . slice ( 0 , props . maxCount ) ; avatarsToRender . push ( createVNode ( Popover , { ... props . maxPopoverTriggerProps } , { content : ( ) => < div > { avatarsInPopover } < /div>, default : ( ) => createVNode ( Avatar , { key : '_arco_avatar_group_popup' , class : `${ prefixCls }-max-count-avatar` , style : props . maxStyle , size : props . size } , ( ) => < div > + { avatarsInPopover . length } < /div>) } ) ) ; } return ( < div class = { prefixCls } > { avatarsToRender . map ( ( item , index ) => { const stackedStyle = { zIndex : props . zIndexAscend ? index + 1 : count - index , marginLeft : props . size ? index !== 0 ? `-${ props . size / 4 }px` : '0px' : '' } ; item . props = mergeProps ( { size : props . size , shape : props . shape , autoFixFontSize : props . autoFixFontSize , style : stackedStyle } , item . props || { } ) ; return item ; } ) } < /div>); } ; } } ) ;