import { h , defineComponent , PropType , computed } from "vue" ; import { chakra , ThemingProps , useStyleConfig , HTMLChakraProps , ComponentWithProps , DeepPartial , } from "@chakra-ui/vue-system" ; import { filterUndefined } from "@chakra-ui/utils" ; import { vueThemingProps } from "@chakra-ui/vue-utils" ; export interface DividerProps extends HTMLChakraProps < "div" > , ThemingProps < "Container" > { orientation ? : "horizontal" | "vertical" ; } see Docs export const CDivider = defineComponent ( { name : "CDivider" , props : { orientation : { type : [ String ] as PropType < DividerProps [ "orientation" ] > , default : "horizontal" , } , ... vueThemingProps , } , setup ( props , { slots , attrs } ) { const themingProps = computed < ThemingProps > ( ( ) => filterUndefined ( { colorScheme : props . colorScheme , variant : props . variant , size : props . size , styleConfig : props . styleConfig , orientation : props . orientation , } ) ) ; const styles = useStyleConfig ( "Divider" , themingProps . value ) ; const { borderLeftWidth , borderBottomWidth , borderTopWidth , borderRightWidth , borderWidth , borderStyle , borderColor , ... stylesRest } = styles . value ; const dividerStyle = computed ( ( ) => { const dividerStyles = { vertical : { borderLeftWidth : borderLeftWidth || borderRightWidth || borderWidth || "1px" , height : "100%" , } , horizontal : { borderBottomWidth : borderBottomWidth || borderTopWidth || borderWidth || "1px" , width : "100%" , } , } ; return dividerStyles [ props . orientation ! ] ; } ) ; return ( ) => ( < chakra . hr aria - orientation = { props . orientation } __css = { { ... stylesRest , border : 0 , borderColor , borderStyle , ... dividerStyle . value , } } __label = "divider" > { slots . default ?. ( ) } < /chakra.hr>); } , } ) ;