import { Dict , mapResponsive } from "@chakra-ui/utils" ; import { chakra , HTMLChakraProps , SystemProps , DOMElements , tokenToCSSVar , } from "@chakra-ui/vue-system" ; import { getValidChildren , SNAO } from "@chakra-ui/vue-utils" ; import { computed , defineComponent , h , PropType } from "vue" ; export interface WrapProps extends HTMLChakraProps < "div" > { type SystemProps [ "margin" ] spacing ? : SystemProps [ "margin" ] ; type SystemProps [ "justifyContent" ] justify ? : SystemProps [ "justifyContent" ] ; type SystemProps [ "alignItems" ] align ? : SystemProps [ "alignItems" ] ; type SystemProps [ "flexDirection" ] direction ? : SystemProps [ "flexDirection" ] ; /**
     * If `true`, the children will be wrapped in a `WrapItem`
     */ shouldWrapChildren ? : boolean ; } see Docs export const CWrap = defineComponent ( { props : { as : { type : [ Object , String ] as PropType < DOMElements > , default : "div" , } , spacing : SNAO as PropType < WrapProps [ "spacing" ] > , justify : SNAO as PropType < WrapProps [ "justify" ] > , align : SNAO as PropType < WrapProps [ "align" ] > , direction : SNAO as PropType < WrapProps [ "direction" ] > , shouldWrapChildren : SNAO as PropType < WrapProps [ "shouldWrapChildren" ] > , } , setup ( props , { slots , attrs } ) { const styles = computed ( ( ) => ( { "--chakra-wrap-spacing" : ( theme ) => mapResponsive ( props . spacing , ( value ) => tokenToCSSVar ( "space" , value ) ( theme ) ) , "--wrap-spacing" : "calc(var(--chakra-wrap-spacing) / 2)" , display : "flex" , flexWrap : "wrap" , justifyContent : props . justify , alignItems : props . align , flexDirection : props . direction , listStyleType : "none" , padding : "0" , margin : "calc(var(--wrap-spacing) * -1)" , "& > *:not(style)" : { margin : "var(--wrap-spacing)" , } , } ) ) ; const childrenToRender = props . shouldWrapChildren ? getValidChildren ( slots ) . map ( ( child , index ) => h ( CWrapItem , { key : index } , child ) ) : slots ; return ( ) => { return h ( chakra ( props . as , { label : "wrap" , ... attrs , } ) , { } , ( ) => h ( chakra ( "ul" , { label : "wrap__list" , __css : styles . value } ) , { } , childrenToRender ) ) ; } ; } , } ) ; export interface WrapItemProps extends HTMLChakraProps < "li" > { } export const CWrapItem = defineComponent ( { setup ( _ , { attrs , slots } ) { return ( ) => { return h ( chakra ( "li" , { label : "wrap__listItem" , __css : { display : "flex" , alignItems : "flex-start" , } , ... attrs , } ) , { } , slots ) ; } ; } , } ) ;