import { vueThemingProps } from "@chakra-ui/vue-utils" ; import { ComponentWithProps , HTMLChakraProps } from "@chakra-ui/vue-system" ; import { h , defineComponent , PropType , computed } from "vue" ; import { chakra , DOMElements , ThemingProps , useStyleConfig , DeepPartial , } from "@chakra-ui/vue-system" ; import { filterUndefined } from "@chakra-ui/utils" ; export interface LinkProps extends HTMLChakraProps < "a" > , ThemingProps < "Link" > { /**
     *  If `true`, the link will open in new tab
     */ isExternal ? : boolean ; } example see Docs export const CLink = defineComponent ( { name : "CLink" , props : { as : { type : [ Object , String ] as PropType < DOMElements > , default : "a" , } , isExternal : Boolean as PropType < LinkProps [ "isExternal" ] > , ... 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 ( "Link" , themingProps . value ) ; return ( ) => ( < chakra . a as = { props . as } __label = "link" target = { props . isExternal ? "_blank" : undefined } rel = { props . isExternal ? "noopener noreferrer" : undefined } __css = { styles . value } { ... attrs } > { slots } < /chakra.a>); } , } ) ;