import { CIcon } from "@chakra-ui/c-icon" ; import { HTMLChakraProps , SystemProps , ThemingProps , useMultiStyleConfig , useStyles , StylesProvider , ComponentWithProps , DeepPartial , } from "@chakra-ui/vue-system" ; import { h , defineComponent , PropType , computed } from "vue" ; import { chakra , DOMElements } from "@chakra-ui/vue-system" ; import { getValidChildren , SNAO , SAO } from "@chakra-ui/vue-utils" ; interface ListOptions { type SystemProps [ "listStyleType" ] styleType ? : SystemProps [ "listStyleType" ] ; type SystemProps [ "listStylePosition" ] stylePosition ? : SystemProps [ "listStylePosition" ] ; type SystemProps [ "margin" ] spacing ? : SystemProps [ "margin" ] ; } export interface ListProps extends HTMLChakraProps < "ul" > , ThemingProps < "List" > , ListOptions { } see Docs export const CList = defineComponent ( { name : "CList" , props : { as : { type : [ Object , String ] as PropType < DOMElements > , default : "ul" , } , styleType : { type : SAO as PropType < ListProps [ "listStyleType" ] > , default : "none" , } , stylePosition : SAO as PropType < ListProps [ "listStylePosition" ] > , spacing : SNAO as PropType < ListProps [ "margin" ] > , } , setup ( props , { slots , attrs } ) { const styles = useMultiStyleConfig ( "List" , props ) ; StylesProvider ( styles ) ; const selector = "& > *:not(style) ~ *:not(style)" ; const spacingStyle = computed ( ( ) => props . spacing ? { [ selector ] : { mt : props . spacing } } : { } ) ; return ( ) => { const validChildren = ( ) => getValidChildren ( slots ) ; return ( < chakra . ul __label = "list" as = { props . as } listStyleType = { props . styleType } listStylePosition = { props . stylePosition } role = "list" __css = { { ... styles . value . container , ... spacingStyle . value , } } { ... attrs } > { validChildren } < /chakra.ul>); } ; } , } ) ; export const COrderedList = defineComponent ( { name : "COrderedList" , setup ( props , { slots , attrs } ) { return ( ) => ( < CList styleType = "decimal" marginStart = "1em" { ... attrs } > { slots } < /CList>); } , } ) ; export const CUnorderedList = defineComponent ( { name : "CUnorderedList" , setup ( props , { slots , attrs } ) { return ( ) => ( < CList styleType = "initial" marginStart = "1em" { ... attrs } > { slots } < /CList>); } , } ) ; export const CListItem = defineComponent ( { name : "CListItem" , setup ( _ , { slots , attrs } ) { const styles = useStyles ( ) ; return ( ) => { return ( < chakra . li __label = "list__item" __css = { styles . value . item } { ... attrs } > { slots } < /chakra.li>); } ; } , } ) ; export const CListIcon = defineComponent ( { name : "CListIcon" , setup ( _ , { slots , attrs } ) { const styles = useStyles ( ) ; return ( ) => { return ( < CIcon role = "presentation" { ... attrs } __css = { styles . value . icon } > { slots } < /CIcon>); } ; } , } ) ;