import { filterUndefined } from "@chakra-ui/utils" ; import { chakra , HTMLChakraProps , ThemingProps , SystemProps , useStyleConfig , DOMElements , ComponentWithProps , DeepPartial , } from "@chakra-ui/vue-system" ; import { SNAO , vueThemingProps } from "@chakra-ui/vue-utils" ; import { computed , defineComponent , h , PropType } from "vue" ; export interface TextProps extends HTMLChakraProps < "p" > , ThemingProps < "Text" > { type SystemProps [ "textAlign" ] align ? : SystemProps [ "textAlign" ] ; type SystemProps [ "textDecoration" ] decoration ? : SystemProps [ "textDecoration" ] ; type SystemProps [ "textTransform" ] casing ? : SystemProps [ "textTransform" ] ; } see Docs export const CText = defineComponent ( { name : "CText" , props : { as : { type : [ Object , String ] as PropType < DOMElements > , default : "p" , } , align : SNAO as PropType < TextProps [ "textAlign" ] > , decoration : SNAO as PropType < TextProps [ "textDecoration" ] > , casing : SNAO as PropType < TextProps [ "textTransform" ] > , ... vueThemingProps , } , setup ( props , { slots , attrs } ) { const themingProps = computed < ThemingProps > ( ( ) => filterUndefined ( { colorScheme : props . colorScheme , variant : props . variant , size : props . size , styleConfig : props . styleConfig , } ) ) ; const styles = useStyleConfig ( "Text" , themingProps . value ) ; const aliasedProps = computed ( ( ) => filterUndefined ( { textAlign : props . align , textDecoration : props . decoration , textTransform : props . casing , } ) ) ; return ( ) => { return ( < chakra . p __label = "text" { ... aliasedProps . value } __css = { styles . value } { ... attrs } > { slots } < /chakra.p>); } ; } , } ) ;