updated component and example

Author: Dipak Sarkar

docs/.vuepress/components/Example.vue

@@ -8,12 +8,16 @@
             :dark="false"
             dense
             outlined
+            v-model="price"
           >
-            <template v-slot:control>
+            <template v-slot:control="{ id, floatingLabel, value, emitValue }">
               <number
+                :id="id"
                 class="q-field__input"
-                v-model="price"
+                :value="value"
+                @input="emitValue"
                 v-bind="config"
+                v-show="floatingLabel"
               />
             </template>
           </q-field>
@@ -89,8 +93,8 @@ export default {
       priceDirective: null,
       priceUnmasked: 6789.10,
       config: {
-        decimal: ',',
-        separator: '.',
+        decimal: '.',
+        separator: ',',
         prefix: '$',
         suffix: ' %',
         precision: 2,

src/component.vue

@@ -62,11 +62,6 @@ export default {
       unmaskedValue: null
     }
   },
-  watch: {
-    masked() {
-      this.$emit('input', this.emittedValue)
-    }
-  },
   methods: {
     input({ target }) {
       this.maskedValue = target.value

src/core.js

@@ -77,7 +77,7 @@ export function updateValue(el, vnode, { emit = true, force = false, clean = fal
 
   const number = new NumberFormat(config).clean(clean)
   let masked = number.format(currentValue)
-  let unmasked = number.unformat(currentValue)
+  let unmasked = number.clean(true).unformat(currentValue)
 
   // check value with in range max and min value
   if (clean) {
@@ -128,13 +128,6 @@ export function inputHandler(event) {
   positionFromEnd = Math.max(positionFromEnd, config.suffix.length)
   positionFromEnd = target.value.length - positionFromEnd
   positionFromEnd = Math.max(positionFromEnd, config.prefix.length + 1)
-  const decimalPosition = target.value.indexOf(config.decimal)
-  const diff = positionFromEnd - decimalPosition
-  const maxLength = target.value.length - config.suffix.length
-  const positionAfterDecimal = positionFromEnd + 1
-  if (decimalPosition > 0 && diff > 0 && positionAfterDecimal <= maxLength) {
-    positionFromEnd = positionAfterDecimal
-  }
   updateCursor(target, positionFromEnd)
 
   if (oldValue !== target.value) {

src/directive.js

@@ -1,3 +1,4 @@
+/* eslint-disable prefer-object-spread */
 import * as core from './core'
 import defaults from './options'
 
@@ -6,10 +7,10 @@ const CONFIG_KEY = core.CONFIG_KEY
 export default {
   bind: (el, { value, modifiers }, vnode) => {
     el = core.getInputElement(el)
-    const config = core.normalizeConfig(defaults, Object.assign(value, modifiers))
+    const config = Object.assign({}, defaults, value, modifiers)
     el[CONFIG_KEY] = { config }
     // set initial value
-    core.updateValue(el, vnode, { force: config.prefill })
+    core.updateValue(el, vnode, { force: config.prefill, clean: true })
   },
 
   inserted: (el) => {
@@ -30,11 +31,13 @@ export default {
     // check decimal key and insert to current element
     // updated cursor position after format the value
     el.onkeydown = (e) => {
-      if ([110, 190].includes(e.keyCode) || e.key === config.decimal) {
+      if (([110, 190].includes(e.keyCode) || e.key === config.decimal) && !el.value.includes(config.decimal)) {
         e.preventDefault()
         el.setRangeText(config.decimal)
         el.dispatchEvent(new Event('input'))
         core.updateCursor(el, el.value.indexOf(config.decimal) + 1)
+      } else if (([110, 190].includes(e.keyCode) || e.key === config.decimal) && el.value.includes(config.decimal)) {
+        e.preventDefault()
       }
     }
 
@@ -45,8 +48,8 @@ export default {
     el = core.getInputElement(el)
     if (value !== oldValue) {
       const { config } = el[CONFIG_KEY]
-      el[CONFIG_KEY].config = core.normalizeConfig(config, Object.assign(value, modifiers))
-      core.updateValue(el, vnode, { force: true })
+      el[CONFIG_KEY].config = Object.assign({}, config, value, modifiers)
+      core.updateValue(el, vnode, { force: true, clean: true })
     } else {
       core.updateValue(el, vnode)
     }