import { computed , CSSProperties , defineComponent , PropType , Comment , } from 'vue' ; import { isArray , isNumber } from '../_utils/is' ; import { getAllElements } from '../_utils/vue-utils' ; import { getPrefixCls } from '../_utils/global-config' ; type SpaceSize = number | 'mini' | 'small' | 'medium' | 'large' ; export default defineComponent ( { name : 'Space' , props : { zh en values align : { type : String as PropType < 'start' | 'end' | 'center' | 'baseline' > } , zh en direction : { type : String as PropType < 'vertical' | 'horizontal' > , default : 'horizontal' } , zh en size : { type : [ Number , String ] as PropType < number | 'mini' | 'small' | 'medium' | 'large' | [ SpaceSize , SpaceSize ] > , default : 'small' } , zh en wrap : { type : Boolean } , zh en version fill : { type : Boolean } } , setup ( props , { slots } ) { const prefixCls = getPrefixCls ( 'space' ) ; const mergedAlign = computed ( ( ) => props . align ?? ( props . direction === 'horizontal' ? 'center' : '' ) ) ; const cls = computed ( ( ) => [ prefixCls , { [ `${ prefixCls }-${ props . direction }` ] : props . direction , [ `${ prefixCls }-align-${ mergedAlign . value }` ] : mergedAlign . value , [ `${ prefixCls }-wrap` ] : props . wrap , [ `${ prefixCls }-fill` ] : props . fill } , ] ) ; function getMargin ( size ) { if ( isNumber ( size ) ) { return size ; } switch ( size ) { case 'mini' : return 4 ; case 'small' : return 8 ; case 'medium' : return 16 ; case 'large' : return 24 ; default : return 8 ; } } const getMarginStyle = ( index , isLast ) : CSSProperties => { const style = { } ; const marginRight = `${ getMargin ( isArray ( props . size ) ? props . size [ 0 ] : props . size ) }px` ; const marginBottom = `${ getMargin ( isArray ( props . size ) ? props . size [ 1 ] : props . size ) }px` ; if ( isLast ) { return props . wrap ? { marginBottom } : { } ; } if ( props . direction === 'horizontal' ) { style . marginRight = marginRight ; } if ( props . direction === 'vertical' || props . wrap ) { style . marginBottom = marginBottom ; } return style ; } ; return ( ) => { const children = getAllElements ( slots . default ?. ( ) ) . filter ( ( item ) => item . type !== Comment ) ; return ( < div class = { cls . value } > { children . map ( ( child , index ) => { return ( < div key = { index } class = { `${ prefixCls }-item` } style = { getMarginStyle ( index , index === children . length - 1 ) } > { child } < /div>); } ) } < /div>); } ; } } ) ;