import { CurrencyInput } from './currencyInput' ; import { ComponentPublicInstance , computed , ComputedRef , getCurrentInstance , isVue3 , onUnmounted , Ref , ref , watch } from 'vue-demi' ; import { CurrencyInputOptions , CurrencyInputValue , UseCurrencyInput } from './api' ; const findInput = ( el ) => ( el ?. matches ( 'input' ) ? el : el ?. querySelector ( 'input' ) ) as HTMLInputElement ; export default ( options ) : UseCurrencyInput => { let numberInput ; let input ; const inputRef = ref ( null ) ; const formattedValue = ref < string | null > ( null ) ; const instance = getCurrentInstance ( ) ; const emit = ( event , value ) => instance ?. emit ( event , value ) ; const lazyModel = isVue3 && ( instance ?. attrs . modelModifiers as Record < string , boolean > ) ?. lazy ; const numberValue = computed ( ( ) => instance ?. props [ isVue3 ? 'modelValue' : 'value' ] as number ) ; const inputEvent = isVue3 ? 'update:modelValue' : 'input' ; const changeEvent = lazyModel ? 'update:modelValue' : 'change' ; const hasInputEventListener = ! isVue3 || ! lazyModel ; const hasChangeEventListener = ! isVue3 || lazyModel || ! instance ?. attrs . onChange ; const onInput = ( e ) => { if ( e . detail ) { if ( numberValue . value !== e . detail . number ) { emit ( inputEvent , e . detail . number ) ; } formattedValue . value = e . detail . formatted ; } } ; const onChange = ( e ) => { if ( e . detail ) { emit ( changeEvent , e . detail . number ) ; formattedValue . value = e . detail . formatted ; } } ; watch ( inputRef , ( value ) => { if ( value ) { input = findInput ( ( value as ComponentPublicInstance ) ?. $el ?? value ) ; if ( input ) { numberInput = new CurrencyInput ( input , options ) ; if ( hasInputEventListener ) { input . addEventListener ( 'input' , onInput as EventListener ) ; } if ( hasChangeEventListener ) { input . addEventListener ( 'change' , onChange as EventListener ) ; } numberInput . setValue ( numberValue . value ) ; } else { console . error ( 'No input element found. Please make sure that the "inputRef" template ref is properly assigned.' ) ; } } else { numberInput = null ; } } ) ; onUnmounted ( ( ) => { if ( hasInputEventListener ) { input ?. removeEventListener ( 'input' , onInput as EventListener ) ; } if ( hasChangeEventListener ) { input ?. removeEventListener ( 'change' , onChange as EventListener ) ; } } ) ; return { inputRef , formattedValue , setValue : ( value ) => numberInput ?. setValue ( value ) , setOptions : ( options ) => numberInput ?. setOptions ( options ) } ; } ;