import { defineComponent , h } from 'vue' ; export type BPObject = { cols ? : 'auto' | number | string | null ; gutter ? : number | string | null ; gutterX ? : number | string | null ; gutterY ? : number | string | null ; } ; const BREAKPOINTS = [ 'xxl' as const , 'xl' as const , 'lg' as const , 'md' as const , 'sm' as const , 'xs' as const , ] ; const CRow = defineComponent ( { name : 'CRow' , props : { values xs : { type : Object as ( ) => BPObject , default : undefined , required : false , } , values sm : { type : Object as ( ) => BPObject , default : undefined , required : false , } , md : { type : Object as ( ) => BPObject , default : undefined , required : false , } , values lg : { type : Object as ( ) => BPObject , default : undefined , required : false , } , values xl : { type : Object as ( ) => BPObject , default : undefined , required : false , } , values xxl : { type : Object as ( ) => BPObject , default : undefined , required : false , } , } , setup ( props , { slots } ) { const repsonsiveClassNames = [ ] ; BREAKPOINTS . forEach ( ( bp ) => { const breakpoint = props [ bp ] ; const infix = bp === 'xs' ? '' : `-${ bp }` ; if ( typeof breakpoint === 'object' ) { if ( breakpoint . cols ) { repsonsiveClassNames . push ( `row-cols${ infix }-${ breakpoint . cols }` ) ; } if ( typeof breakpoint . gutter === 'number' ) { repsonsiveClassNames . push ( `g${ infix }-${ breakpoint . gutter }` ) ; } if ( typeof breakpoint . gutterX === 'number' ) { repsonsiveClassNames . push ( `gx${ infix }-${ breakpoint . gutterX }` ) ; } if ( typeof breakpoint . gutterY === 'number' ) { repsonsiveClassNames . push ( `gy${ infix }-${ breakpoint . gutterY }` ) ; } } } ) ; return ( ) => h ( 'div' , { class : [ 'row' , repsonsiveClassNames ] , } , slots . default && slots . default ( ) ) ; } , } ) ; export { CRow } ;