import { defineComponent , PropType , computed , reactive , provide , VNode , } from 'vue' ; import { getPrefixCls } from '../_utils/global-config' ; import Spin from '../spin' ; import { CardContext , cardInjectionKey } from './context' ; import { getAllElements } from '../_utils/vue-utils' ; export const SIZES = [ 'medium' , 'small' ] as const ; export type SizeType = typeof SIZES [ number ] ; export default defineComponent ( { name : 'Card' , components : { Spin } , props : { zh en bordered : { type : Boolean , default : true } , zh en loading : { type : Boolean , default : false } , zh en hoverable : { type : Boolean , default : false } , zh en values size : { type : String as PropType < SizeType > , default : 'medium' , validator : ( value ) => { return SIZES . includes ( value ) ; } } , zh en headerStyle : { type : Object , default : ( ) => ( { } ) } , zh en bodyStyle : { type : Object , default : ( ) => ( { } ) } , zh en title : { type : String } , zh en extra : { type : String } } , zh en slot zh en slot zh en slot zh en slot setup ( props , { slots } ) { const prefixCls = getPrefixCls ( 'card' ) ; const renderActions = ( vns ) => { const actions = getAllElements ( vns ) ; return ( < div class = { `${ prefixCls }-actions` } > < div class = { `${ prefixCls }-actions-right` } > { actions . map ( ( action , index ) => ( < span key = { `action-${ index }` } class = { `${ prefixCls }-actions-item` } > { action } < /span>))} < /div> < /div>); } ; const cardContext = reactive ( { hasMeta : false , hasGrid : false , slots , renderActions } ) ; provide ( cardInjectionKey , cardContext ) ; const cls = computed ( ( ) => [ prefixCls , `${ prefixCls }-size-${ props . size }` , { [ `${ prefixCls }-loading` ] : props . loading , [ `${ prefixCls }-bordered` ] : props . bordered , [ `${ prefixCls }-hoverable` ] : props . hoverable , [ `${ prefixCls }-contain-grid` ] : cardContext . hasGrid } , ] ) ; return ( ) => { const hasTitle = Boolean ( slots . title ?? props . title ) ; const hasExtra = Boolean ( slots . extra ?? props . extra ) ; return ( < div class = { cls . value } > { ( hasTitle || hasExtra ) && ( < div class = { [ `${ prefixCls }-header` , { [ `${ prefixCls }-header-no-title` ] : ! hasTitle } , ] } style = { props . headerStyle } > { hasTitle && ( < div class = { `${ prefixCls }-header-title` } > { slots . title ?. ( ) ?? props . title } < /div>)} { hasExtra && ( < div class = { `${ prefixCls }-header-extra` } > { slots . extra ?. ( ) ?? props . extra } < /div>)} < /div>)} { slots . cover && ( < div class = { `${ prefixCls }-cover` } > { slots . cover ( ) } < /div>)} < div class = { `${ prefixCls }-body` } style = { props . bodyStyle } > { props . loading ? < Spin /> : slots.default?.()} { slots . actions && ! cardContext . hasMeta && renderActions ( slots . actions ( ) ) } < /div> < /div>); } ; } } ) ;