updated component with blur, focus event

Author: dipaksarkar

docs/.vuepress/components/Example.vue

@@ -15,7 +15,10 @@
                 :id="id"
                 class="q-field__input"
                 :value="value"
-                @input="emitValue"
+                @change="emitValue"
+                @blur="onBlur"
+                @input="onInput"
+                @focus="onFocus"
                 v-bind="config"
                 v-show="floatingLabel"
               />
@@ -94,9 +97,9 @@
 export default {
   data () {
     return {
-      price: 154.52,
+      price: 1234.56,
       priceDirective: null,
-      priceUnmasked: 6789.10,
+      priceUnmasked: 1234.56,
       config: {
         decimal: '.',
         separator: ',',
@@ -107,13 +110,24 @@ export default {
         masked: false,
         reverseFill: false
       },
-      reverseFill: 6789.10,
+      reverseFill: 1234.56,
       configReverseFill: {
         reverseFill: true,
         suffix: '',
       }
     }
-  }
+  },
+  methods: {
+    onInput (val){
+      console.log('onInput', arguments, val);
+    },
+    onBlur ({target}){
+      console.log('onBlur', arguments, target.unmaskedValue);
+    },
+    onFocus ({target}){
+      console.log('onFocus', arguments, target.unmaskedValue);
+    },
+  },
 }
 </script>
 

src/component.vue

@@ -5,6 +5,8 @@
     :value="maskedValue"
     @change="change"
     @input="input"
+    @blur="(evt) => $emit('blur', evt)"
+    @focus="(evt) => $emit('focus', evt)"
     v-number="config"
     class="v-number"
   />
@@ -32,14 +34,30 @@ export default {
       type: Boolean,
       default: options.reverseFill
     },
+    prefill: {
+      type: Boolean,
+      default: options.prefill
+    },
     precision: {
       type: Number,
       default: () => options.precision
     },
+    minimumFractionDigits: {
+      type: [Number, Boolean],
+      default: () => options.minimumFractionDigits
+    },
     decimal: {
       type: String,
       default: () => options.decimal
     },
+    min: {
+      type: [Number, Boolean],
+      default: () => options.min
+    },
+    max: {
+      type: [Number, Boolean],
+      default: () => options.max
+    },
     separator: {
       type: String,
       default: () => options.separator
@@ -77,7 +95,20 @@ export default {
       return this.masked ? this.maskedValue : this.unmaskedValue
     },
     config() {
-      return this.$props
+      const config = {}
+      Object.keys(this.$props)
+        .filter((item) => item !== 'value')
+        .forEach((item) => {
+          config[item] = this.$props[item]
+        })
+      return config
+    }
+  },
+  watch: {
+    value(val) {
+      if (this.unmaskedValue !== val) {
+        this.maskedValue = val
+      }
     }
   }
 }

src/core.js

@@ -14,6 +14,19 @@ export function FacadeInputEvent() {
     detail: { facade: true }
   })
 }
+
+/**
+ * Creates a CustomEvent('blur') with detail = { facade: true }
+ * used as a way to identify our own blur event
+ */
+export function FacadeBlurEvent() {
+  return new CustomEvent('blur', {
+    bubbles: true,
+    cancelable: true,
+    detail: { facade: true }
+  })
+}
+
 /**
  * Transform an array or string config into an object
  *
@@ -81,10 +94,10 @@ export function updateValue(el, vnode, { emit = true, force = false, clean = fal
 
   // check value with in range max and min value
   if (clean) {
-    if (config.max && unmasked > config.max) {
+    if (Number(config.max) && unmasked > Number(config.max)) {
       masked = number.format(config.max)
       unmasked = number.unformat(config.max)
-    } else if (config.min && unmasked < config.min) {
+    } else if (Number(config.min) && unmasked < Number(config.min)) {
       masked = number.format(config.min)
       unmasked = number.unformat(config.min)
     }
@@ -152,6 +165,6 @@ export function blurHandler(event) {
   updateValue(target, null, { force: true, clean: true }, event)
 
   if (oldValue !== target.value) {
-    target.dispatchEvent(FacadeInputEvent())
+    target.dispatchEvent(FacadeBlurEvent())
   }
 }