import { defineComponent , h } from 'vue' ; import { Color , Shape } from '../props' ; export const CButton = defineComponent ( { name : 'CButton' , props : { /**
         * Toggle the active state for the component.
         */ active : { type : Boolean , default : false , required : false , } , values color : Color , /**
         * Component used for the root node. Either a string to use a HTML element or a component.
         */ component : { type : String , default : 'button' , required : false , } , /**
         * Toggle the disabled state for the component.
         */ disabled : { type : Boolean , required : false , } , /**
         * The href attribute specifies the URL of the page the link goes to.
         */ href : { type : String , default : undefined , required : false , } , values shape : Shape , values size : { type : String , default : undefined , required : false , validator : ( value ) => { return [ 'sm' , 'lg' ] . includes ( value ) ; } , } , values variant : { type : String , default : undefined , required : false , validator : ( value ) => { return [ 'ghost' , 'outline' ] . includes ( value ) ; } , } , } , setup ( props , { slots } ) { return ( ) => h ( props . component , { class : [ 'btn' , props . variant ? `btn-${ props . variant }-${ props . color }` : `btn-${ props . color }` , { [ `btn-${ props . size }` ] : props . size , active : props . active , disabled : props . disabled , } , props . shape , ] , disabled : props . disabled && props . component !== 'a' , ... ( props . component === 'a' && props . disabled && { 'aria-disabled' : true , tabIndex : - 1 } ) , ... ( props . component === 'a' && props . href && { href : props . href } ) , } , slots . default && slots . default ( ) ) ; } , } ) ;