import { h , defineComponent , PropType , reactive } from "vue" ; import type CSS from "csstype" ; import { chakra , DOMElements , ThemingProps , SystemStyleObject , ComponentWithProps , DeepPartial , } from "@chakra-ui/vue-system" ; export interface FlexProps { type SystemStyleObject [ "alignItems" ] align ? : SystemStyleObject [ "alignItems" ] ; type SystemStyleObject [ "justifyContent" ] justify ? : SystemStyleObject [ "justifyContent" ] ; type SystemStyleObject [ "flexWrap" ] wrap ? : SystemStyleObject [ "flexWrap" ] ; type SystemStyleObject [ "flexDirection" ] direction ? : SystemStyleObject [ "flexDirection" ] ; type SystemStyleObject [ "flexBasis" ] basis ? : SystemStyleObject [ "flexBasis" ] ; type SystemStyleObject [ "flexGrow" ] grow ? : SystemStyleObject [ "flexGrow" ] ; type SystemStyleObject [ "flexShrink" ] shrink ? : SystemStyleObject [ "flexShrink" ] ; } const CFlex = defineComponent ( { props : { as : { type : [ Object , String ] as PropType < DOMElements > , default : "div" , } , align : [ Object , String , Array ] as PropType < FlexProps [ "align" ] > , justify : [ Object , String , Array ] as PropType < FlexProps [ "justify" ] > , wrap : [ Object , String , Array ] as PropType < FlexProps [ "wrap" ] > , direction : { type : [ Object , String , Array ] as PropType < FlexProps [ "direction" ] > , default : "row" , } , basis : [ Object , String , Array ] as PropType < FlexProps [ "basis" ] > , grow : [ Object , String , Array ] as PropType < FlexProps [ "grow" ] > , shrink : [ Object , String , Array ] as PropType < FlexProps [ "shrink" ] > , size : String as PropType < ThemingProps [ "size" ] > , } , setup ( props , { slots , attrs } ) { const styles = reactive ( { display : "flex" , flexDirection : props . direction , alignItems : props . align , justifyContent : props . justify , flexWrap : props . wrap , flexBasis : props . basis , flexGrow : props . grow , flexShrink : props . shrink , h : props . size , w : props . size , } ) ; return ( ) => ( < chakra . div as = { props . as } __label = "flex" __css = { styles } { ... attrs } > { slots } < /chakra.div>); } , } ) ; export default CFlex ;