import HtmlInput from './HtmlInput' ; const TextInput = HtmlInput . extend ( { props : { value : { type : [ String , Number ] , default : undefined , } , autocomplete : { type : String , default : undefined , } , maxlength : { type : [ String , Number ] , default : undefined , } , minlength : { type : [ String , Number ] , default : undefined , } , multiple : { type : Boolean , default : undefined , } , pattern : { type : String , default : undefined , } , placeholder : { type : String , default : undefined , } , classes : { type : [ String , Array , Object ] , default : undefined , } , } , data ( ) { return { localValue : this . value as string | number | null , valueWhenFocus : null as string | number | null , } ; } , watch : { localValue ( localValue ) { this . $emit ( 'input' , localValue ) ; } , value ( value ) { this . localValue = value ; } , } , methods : { blurHandler ( e ) { this . $emit ( 'blur' , e ) ; if ( this . localValue !== this . valueWhenFocus ) { this . $emit ( 'change' , this . localValue ) ; } } , focusHandler ( e ) { this . $emit ( 'focus' , e ) ; this . valueWhenFocus = this . localValue ; } , keyupHandler ( e ) { this . $emit ( 'keyup' , e ) ; } , keydownHandler ( e ) { this . $emit ( 'keydown' , e ) ; } , blur ( ) { ( this . $el as HTMLInputElement ) . blur ( ) ; } , click ( ) { ( this . $el as HTMLInputElement ) . click ( ) ; } , focus ( options ? ) { ( this . $el as HTMLInputElement ) . focus ( options ) ; } , select ( ) { ( this . $el as HTMLInputElement ) . select ( ) ; } , setSelectionRange ( start , end , direction ? ) { ( this . $el as HTMLInputElement ) . setSelectionRange ( start , end , direction ) ; } , setRangeText ( replacement ) { ( this . $el as HTMLInputElement ) . setRangeText ( replacement ) ; } , } , } ) ; export default TextInput ;