import { defineComponent , inject , PropType , ref } from 'vue' ; import { getPrefixCls } from '../_utils/global-config' ; import IconHover from '../_components/icon-hover.vue' ; import IconSearch from '../icon/icon-search' ; import IconLoading from '../icon/icon-loading' ; import Button from '../button' ; import Input from './input' ; import { EmitType } from '../_utils/types' ; import { Size } from '../_utils/constant' ; import { configProviderInjectionKey } from '../config-provider/context' ; export default defineComponent ( { name : 'InputSearch' , props : { zh en searchButton : { type : Boolean , default : false } , zh en loading : { type : Boolean , default : false } , zh en disabled : { type : Boolean , default : false } , zh en values defaultValue size : { type : String as PropType < Size > , default : ( ) => inject ( configProviderInjectionKey , undefined ) ?. size ?? 'medium' } , zh en buttonProps : { type : Object } , onSearch : { type : [ Function , Array ] as PropType < EmitType < ( value : string , ev : MouseEvent ) => void > > } } , emits : [ 'search' , ] , setup ( props , { emit , slots } ) { const prefixCls = getPrefixCls ( 'input-search' ) ; const inputRef = ref ( ) ; const handleClick = ( e ) => { if ( inputRef . value . inputRef ) { emit ( 'search' , ( inputRef . value . inputRef as HTMLInputElement ) . value , e ) ; } } ; const renderSuffix = ( ) => { return ( < > { props . loading ? ( < IconLoading />) : (<IconHover onClick={handleClick}> < IconSearch / > < /IconHover>)} { slots . suffix ?. ( ) } < />); } ; const renderButton = ( ) => { return ( < Button v - slots = { { icon : ( ) => < IconSearch /> } } type = "primary" class = { `${ prefixCls }-btn` } disabled = { props . disabled } size = { props . size } loading = { props . loading } { ... props . buttonProps } onClick = { handleClick } / > ) ; } ; const render = ( ) => ( < Input ref = { inputRef } class = { prefixCls } v - slots = { { prepend : slots . prepend , prefix : slots . prefix , suffix : props . searchButton ? slots . suffix : renderSuffix , append : props . searchButton ? renderButton : slots . append } } size = { props . size } disabled = { props . disabled } / > ) ; return { inputRef , render } ; } , methods : { focus ( ) { ( this . inputRef as HTMLInputElement ) ?. focus ( ) ; } , blur ( ) { ( this . inputRef as HTMLInputElement ) ?. blur ( ) ; } } , render ( ) { return this . render ( ) ; } } ) ;