import { Ref , computed , SetupContext } from '@vue/composition-api' ; import keycode from 'keycode' ; const VERTICAL_ARROW_KEYS = new Set ( [ 'up' , 'down' ] ) ; export default function useNumber ( value , tweaking , context ) { const displayValue = computed ( ( ) => { const v = value . value ; return tweaking . value ? v . toFixed ( 1 ) : v . toFixed ( 2 ) . replace ( /\.?[0]+$/ , '' ) ; } ) ; const step = computed ( ( ) => { const float = value . value . toString ( ) . split ( '.' ) [ 1 ] ; return float !== undefined ? Math . max ( Math . pow ( 10 , - float . length ) , 0.1 ) : 1 ; } ) ; function onConfirm ( e ) { const str = ( e . target as HTMLInputElement ) . value ; const num = parseFloat ( str ) ; const val = isNaN ( num ) ? str : num ; update ( val ) ; } function onBlur ( e ) { onConfirm ( e ) ; } function onKeydown ( e ) { const key = keycode ( e ) ; if ( key === 'enter' ) { onConfirm ( e ) ; } else if ( VERTICAL_ARROW_KEYS . has ( key ) ) { e . preventDefault ( ) ; let inc = 1 ; if ( e . altKey ) { inc = 0.1 ; } else if ( e . shiftKey ) { inc = 10 ; } switch ( key ) { case 'up' : update ( value . value + inc ) ; break ; case 'down' : update ( value . value - inc ) ; break ; } } } function update ( val ) { context . emit ( 'input' , val ) ; } return { step , displayValue , onBlur , onKeydown , update , } ; }