import { BoxProps } from "./box" ; import { h , defineComponent , PropType , computed , watchEffect , Component , ConcreteComponent , } from "vue" ; import { chakra , HTMLChakraProps , SystemProps , ResponsiveValue , DOMElements , ComponentWithProps , DeepPartial , } from "@chakra-ui/vue-system" ; import { filterUndefined , mapResponsive } from "@chakra-ui/utils" ; import { SNAO } from "@chakra-ui/vue-utils" ; export interface GridProps extends HTMLChakraProps < "div" > , GridOptions { } export interface GridOptions { type SystemProps [ "gridTemplateColumns" ] templateColumns ? : SystemProps [ "gridTemplateColumns" ] ; type SystemProps [ "gridGap" ] gap ? : SystemProps [ "gridGap" ] ; type SystemProps [ "gridRowGap" ] rowGap ? : SystemProps [ "gridRowGap" ] ; type SystemProps [ "gridColumnGap" ] columnGap ? : SystemProps [ "gridColumnGap" ] ; type SystemProps [ "gridAutoFlow" ] autoFlow ? : SystemProps [ "gridAutoFlow" ] ; type SystemProps [ "gridAutoRows" ] autoRows ? : SystemProps [ "gridAutoRows" ] ; type SystemProps [ "gridAutoColumns" ] autoColumns ? : SystemProps [ "gridAutoColumns" ] ; type SystemProps [ "gridTemplateRows" ] templateRows ? : SystemProps [ "gridTemplateRows" ] ; type SystemProps [ "gridTemplateAreas" ] templateAreas ? : SystemProps [ "gridTemplateAreas" ] ; type SystemProps [ "gridArea" ] area ? : SystemProps [ "gridArea" ] ; type SystemProps [ "gridColumn" ] column ? : SystemProps [ "gridColumn" ] ; type SystemProps [ "gridRow" ] row ? : SystemProps [ "gridRow" ] ; } export interface GridItemProps extends BoxProps { type ResponsiveValue < number | "auto" > colSpan ? : ResponsiveValue < number | "auto" > ; type ResponsiveValue < number | "auto" > colStart ? : ResponsiveValue < number | "auto" > ; type ResponsiveValue < number | "auto" > colEnd ? : ResponsiveValue < number | "auto" > ; type ResponsiveValue < number | "auto" > rowStart ? : ResponsiveValue < number | "auto" > ; type ResponsiveValue < number | "auto" > rowEnd ? : ResponsiveValue < number | "auto" > ; type ResponsiveValue < number | "auto" > rowSpan ? : ResponsiveValue < number | "auto" > ; } see Docs export const CGrid = defineComponent ( { name : "CGrid" , props : { as : { type : [ String , Object ] as PropType < DOMElements | Component | ConcreteComponent | string > , default : "div" , } , templateColumns : SNAO as PropType < GridProps [ "gridTemplateColumns" ] > , gap : SNAO as PropType < GridProps [ "gridGap" ] > , rowGap : SNAO as PropType < GridProps [ "gridRowGap" ] > , columnGap : SNAO as PropType < GridProps [ "gridColumnGap" ] > , autoFlow : SNAO as PropType < GridProps [ "gridAutoFlow" ] > , autoRows : SNAO as PropType < GridProps [ "gridAutoRows" ] > , autoColumns : SNAO as PropType < GridProps [ "gridAutoColumns" ] > , templateRows : SNAO as PropType < GridProps [ "gridTemplateRows" ] > , templateAreas : SNAO as PropType < GridProps [ "gridTemplateAreas" ] > , area : SNAO as PropType < GridProps [ "gridArea" ] > , column : SNAO as PropType < GridProps [ "gridColumn" ] > , row : SNAO as PropType < GridProps [ "gridRow" ] > , } , setup ( props , { slots , attrs } ) { const styles = computed ( ( ) => filterUndefined ( { display : "grid" , gridArea : props . area , gridTemplateAreas : props . templateAreas , gridGap : props . gap , gridRowGap : props . rowGap , gridColumnGap : props . columnGap , gridAutoColumns : props . autoColumns , gridColumn : props . column , gridRow : props . row , gridAutoFlow : props . autoFlow , gridAutoRows : props . autoRows , gridTemplateRows : props . templateRows , gridTemplateColumns : props . templateColumns , } ) ) ; return ( ) => { return ( < chakra . div as = { props . as } __label = "grid" __css = { styles . value } { ... attrs } > { slots } < /chakra.div>); } ; } , } ) ; function spanFn ( span ? ) { return mapResponsive ( span , ( value ) => value === "auto" ? "auto" : `span ${ value }/span ${ value }` ) ; } export const CGridItem = defineComponent ( { name : "CGridItem" , props : { as : { type : [ String , Object ] as PropType < DOMElements | Component | ConcreteComponent | string > , default : "div" , } , colSpan : SNAO as PropType < GridItemProps [ "colSpan" ] > , colStart : SNAO as PropType < GridItemProps [ "colStart" ] > , colEnd : SNAO as PropType < GridItemProps [ "colEnd" ] > , rowStart : SNAO as PropType < GridItemProps [ "rowStart" ] > , rowEnd : SNAO as PropType < GridItemProps [ "rowEnd" ] > , rowSpan : SNAO as PropType < GridItemProps [ "rowSpan" ] > , } , setup ( props , { slots , attrs } ) { const styles = computed ( ( ) => filterUndefined ( { gridColumn : spanFn ( props . colSpan ) , gridRow : spanFn ( props . rowSpan ) , gridColumnStart : props . colStart , gridColumnEnd : props . colEnd , gridRowStart : props . rowStart , gridRowEnd : props . rowEnd , } ) ) ; return ( ) => ( < chakra . div as = { props . as } __label = "grid__item" __css = { styles . value } { ... attrs } > { slots } < /chakra.div>); } , } ) ;