fix negative input issue

Author: dipaksarkar

docs/docs/.vuepress/components/BaseInput.vue

@@ -1,7 +1,7 @@
 <template>
   <input
     :value="modelValue"
-    type="text"
+    :type="type"
     class="shadow-sm rounded-md text-base transition-all disabled:cursor-not-allowed disabled:border-gray-300 disabled:text-gray-300 focus:border-primary focus:ring focus:ring-offset-0 focus:ring-primary focus:ring-opacity-50"
     @change="$emit('update:modelValue', $event.target.value)"
   />
@@ -12,14 +12,18 @@ export default {
   name: 'BaseInput',
   props: {
     modelValue: {
-      default: undefined,
+      default: undefined
     },
-    label: {
+    type: {
       type: String,
-      required: false,
+      default: 'input'
     },
+    label: {
+      type: String,
+      required: false
+    }
   },
-  emits: ['update:modelValue'],
+  emits: ['update:modelValue']
 }
 </script>
 

docs/docs/.vuepress/components/Number.vue

@@ -24,8 +24,8 @@ export default {
     precision: Number,
     minimumFractionDigits: Number,
     decimal: String,
-    min: Number,
-    max: Number,
+    min: [Number, String],
+    max: [Number, String],
     separator: String,
     prefix: String,
     suffix: String

docs/docs/.vuepress/components/PlayGround.vue

@@ -98,21 +98,21 @@
       <div class="mb-5 min-w-0 grid">
         <div class="mb-2 font-medium">Minimum fraction digits</div>
         <BaseInput
-          type="text"
-          v-model="config.minimumFractionDigits"
+          type="number"
+          v-model.number="config.minimumFractionDigits"
         />
       </div>
       <div class="mb-5 min-w-0 grid">
         <div class="mb-2 font-medium">Minimum value</div>
         <BaseInput
-          type="text"
+          type="number"
           v-model.number="config.min"
         />
       </div>
       <div class="mb-5 min-w-0 grid">
         <div class="mb-2 font-medium">Maximum value</div>
         <BaseInput
-          type="text"
+          type="number"
           v-model.number="config.max"
         />
       </div>

src/component.vue

@@ -49,19 +49,19 @@ export default defineComponent({
       default: () => options.precision
     },
     minimumFractionDigits: {
-      type: [Number, Boolean],
+      type: Number,
       default: () => options.minimumFractionDigits
     },
     decimal: {
       type: String,
       default: () => options.decimal
     },
     min: {
-      type: [Number, Boolean],
+      type: Number,
       default: () => options.min
     },
     max: {
-      type: [Number, Boolean],
+      type: Number,
       default: () => options.max
     },
     separator: {

src/core.ts

@@ -1,6 +1,8 @@
 import { VNode } from 'vue'
 import NumberFormat from './number-format'
 
+export const MINUS = '-'
+
 export type Input = number | string
 
 export interface Options {
@@ -12,8 +14,8 @@ export interface Options {
   minimumFractionDigits: number
   prefill: boolean
   reverseFill: boolean
-  min: number
-  max: number
+  min?: number
+  max?: number
   nullValue: string
 }
 
@@ -42,32 +44,12 @@ export function cloneDeep(data: object) {
   return JSON.parse(JSON.stringify(data))
 }
 
-export function getConfig(el: HTMLInputElement) {
-  return JSON.parse(el.dataset.config as string) as Config
-}
-
-export function setConfig(el: HTMLInputElement, config: any) {
-  el.dataset.config = JSON.stringify(config)
-}
-
-/**
- * Creates a CustomEvent('input') with detail = { facade: true }
- * used as a way to identify our own input event
- */
-export function FacadeInputEvent() {
-  return new CustomEvent('input', {
-    bubbles: true,
-    cancelable: true,
-    detail: { facade: true }
-  })
-}
-
 /**
- * Creates a CustomEvent('change') with detail = { facade: true }
- * used as a way to identify our own change event
+ * Creates a CustomEvent with detail = { facade: true }
+ * used as a way to identify our own event
  */
-export function FacadeChangeEvent() {
-  return new CustomEvent('change', {
+export function FacadeEvent(event: string) {
+  return new CustomEvent(event, {
     bubbles: true,
     cancelable: true,
     detail: { facade: true }
@@ -139,7 +121,7 @@ export function updateValue(el: CustomInputElement, vnode: VNode | null, { emit
 
     // this part needs to be outside the above IF statement for vuetify in firefox
     // drawback is that we endup with two's input events in firefox
-    return emit && el.dispatchEvent(FacadeInputEvent())
+    return emit && el.dispatchEvent(FacadeEvent('input'))
   }
 }
 
@@ -148,7 +130,7 @@ export function updateValue(el: CustomInputElement, vnode: VNode | null, { emit
  *
  * @param {CustomInputEvent} event The event object
  */
-export function inputHandler(event: CustomInputEvent, el?: CustomInputElement) {
+export function inputHandler(event: CustomInputEvent) {
   const { target, detail } = event
 
   // We dont need to run this method on the event we emit (prevent event loop)
@@ -180,14 +162,14 @@ export function inputHandler(event: CustomInputEvent, el?: CustomInputElement) {
 
   if (oldValue !== target.value) {
     target.oldValue = masked
-    target.dispatchEvent(FacadeInputEvent())
+    target.dispatchEvent(FacadeEvent('input'))
   }
 }
 
 /**
  * Blur event handler
  */
-export function blurHandler(event: Event, el?: CustomInputElement) {
+export function blurHandler(event: Event) {
   const { target, detail } = event as CustomInputEvent
 
   // We dont need to run this method on the event we emit (prevent event loop)
@@ -201,7 +183,7 @@ export function blurHandler(event: Event, el?: CustomInputElement) {
 
   if (oldValue !== target.value) {
     target.oldValue = masked
-    target.dispatchEvent(FacadeChangeEvent())
+    target.dispatchEvent(FacadeEvent('change'))
   }
 }
 
@@ -210,38 +192,34 @@ export function blurHandler(event: Event, el?: CustomInputElement) {
  */
 export function keydownHandler(event: KeyboardEvent, el: CustomInputElement) {
   const { options } = el
-  const regExp = new RegExp(`${options.prefix}|${options.suffix}`, 'g')
+  const { prefix, suffix, decimal, min, separator } = options as Options
+  const { key } = event
+  const regExp = new RegExp(`${prefix}|${suffix}`, 'g')
   const newValue = el.value.replace(regExp, '')
-  const canNegativeInput = options.min < 0
-  if (([110, 190].includes(event.keyCode) || event.key === options.decimal) && newValue.includes(options.decimal)) {
+  const canNegativeInput = min === undefined || Number(min) < 0 || Number(min) !== min
+  if (key === decimal && newValue.includes(decimal)) {
     event.preventDefault()
-  } else if ([109].includes(event.keyCode) && !canNegativeInput) {
+  } else if (key === MINUS && !canNegativeInput) {
     event.preventDefault()
-  } else if ([8].includes(event.keyCode)) {
+  } else if (key === 'Backspace') {
     // check current cursor position is after separator when backspace key down
     const selectionEnd = el.selectionEnd || 0
     const character = el.value.slice(selectionEnd - 1, selectionEnd)
     const replace = el.value.slice(selectionEnd - 2, selectionEnd)
-    if (character === options.separator) {
+    let positionFromEnd = el.value.length - selectionEnd
+    if ([prefix, MINUS, separator].includes(character)) {
       event.preventDefault()
-      let positionFromEnd = el.value.length - selectionEnd
-      // remove separator and before character
-      el.value = el.value.replace(replace, '')
-      // updated cursor position
-      if (options.suffix) {
-        positionFromEnd = Math.max(positionFromEnd, options.suffix.length)
+      if (character === separator) {
+        el.value = el.value.replace(replace, '')
+      } else {
+        el.value = el.value.replace(RegExp(`${prefix}|${MINUS}`, 'g'), '')
       }
+      positionFromEnd = Math.max(positionFromEnd, suffix.length)
       positionFromEnd = el.value.length - positionFromEnd
-      if (options.prefix) {
-        positionFromEnd = Math.max(positionFromEnd, options.prefix.length)
-      }
+      positionFromEnd = Math.max(positionFromEnd, prefix.length)
       updateCursor(el, positionFromEnd)
       // trigger input event
       el.dispatchEvent(new Event('input'))
-    } else if ([options.prefix, '-'].includes(character)) {
-      event.preventDefault()
-      el.value = ''
-      el.dispatchEvent(new Event('input'))
     }
   }
 }

src/options.ts

@@ -18,10 +18,10 @@ export default {
   separator: ',',
   decimal: '.',
   precision: 2,
-  minimumFractionDigits: null,
+  minimumFractionDigits: undefined,
   prefill: true,
   reverseFill: false,
-  min: null,
-  max: null,
+  min: undefined,
+  max: undefined,
   nullValue: ''
 }