import { defineComponent , h } from 'vue' ; import { Color , Shape , TextColor } from '../props' ; const CBadge = defineComponent ( { name : 'CBadge' , props : { values color : Color , /**
         * Component used for the root node. Either a string to use a HTML element or a component.
         */ component : { type : String , required : false , default : 'span' , } , values position : { type : String , default : undefined , required : false , validator : ( value ) => { return [ 'top-start' , 'top-end' , 'bottom-end' , 'bottom-start' ] . includes ( value ) ; } , } , values shape : Shape , values size : { type : String , default : undefined , required : false , validator : ( value ) => { return value === 'sm' ; } , } , values textColor : TextColor , } , setup ( props , { slots } ) { return ( ) => h ( props . component , { class : [ 'badge' , { [ `bg-${ props . color }` ] : props . color , 'position-absolute translate-middle' : props . position , 'top-0' : props . position && props . position . includes ( 'top' ) , 'top-100' : props . position && props . position . includes ( 'bottom' ) , 'start-100' : props . position && props . position . includes ( 'end' ) , 'start-0' : props . position && props . position . includes ( 'start' ) , [ `badge-${ props . size }` ] : props . size , [ `text-${ props . textColor }` ] : props . textColor , } , props . shape , ] , } , slots . default && slots . default ( ) ) ; } , } ) ; export { CBadge } ;