v3.26.0

Author: dipaksarkar

docs/.vuepress/components/PlayGround.vue

@@ -19,13 +19,11 @@
       </div>
       <div class="grid">
         <div class="font-medium mb-2">Directive</div>
-        <input
+        <BaseInput
           v-if="updated"
-          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"
-          :value="priceDirective"
+          v-model="priceDirective"
           v-number="config"
-          type="text"
-          @change="({ target }) => (priceDirective = target.value)"
+          @change="onChange"
           @input="onInput"
           @focus="onFocus"
           @blur="onBlur"
@@ -169,10 +167,6 @@ export default {
   methods: {
     onChange() {
       console.log('onChange', arguments)
-      // setTimeout(() => {
-      //   this.price = 1500.629
-      //   this.priceDirective = 1500.629
-      // }, 3000)
     },
     onInput() {
       console.log('onInput', arguments)

docs/guide/README.md

@@ -20,7 +20,7 @@ Get all the essentials features Starting at £0.99/mo<br>
 ## Installation
 
 ::: warning
-Install the npm package @coders-tm/vue-number-format@^2.17.0 for Vue 2.0
+Install the npm package @coders-tm/vue-number-format@^2.18.0 for Vue 2.0
 :::
 
 <CodeGroup>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coders-tm/vue-number-format",
-  "version": "3.25.0",
+  "version": "3.26.0",
   "private": false,
   "description": "Easy formatted numbers, currency and percentage with input/directive mask for Vue.js",
   "author": "Dipak Sarkar <[email protected]> (https://dipaksarkar.in/)",

src/core.ts

@@ -113,7 +113,6 @@ export function updateValue(el: CustomInputElement, vnode: VNode | null, { emit
     }
 
     el.oldValue = masked
-    el.masked = masked
     el.unmasked = unmasked
 
     // safari makes the cursor jump to the end if el.value gets assign even if to the same value
@@ -144,8 +143,8 @@ export function inputHandler(event: CustomInputEvent) {
   // we can stop propagation of this native event
   event.stopPropagation()
 
-  const { oldValue, options, masked } = target
   let positionFromEnd = target.value.length
+  const { oldValue, options } = target
   if (target.selectionEnd) {
     positionFromEnd = target.value.length - target.selectionEnd
   }
@@ -163,7 +162,6 @@ export function inputHandler(event: CustomInputEvent) {
   updateCursor(target, positionFromEnd)
 
   if (oldValue !== target.value) {
-    target.oldValue = masked
     target.dispatchEvent(InputEvent('input'))
   }
 }
@@ -179,12 +177,11 @@ export function blurHandler(event: Event) {
     return false
   }
 
-  const { oldValue, masked } = target
+  const { oldValue } = target
 
   updateValue(target, null, { force: true, emit: false, clean: true })
 
   if (oldValue !== target.value) {
-    target.oldValue = masked
     target.dispatchEvent(InputEvent('change'))
   }
 }
@@ -196,8 +193,6 @@ export function keydownHandler(event: KeyboardEvent, el: CustomInputElement) {
   const { options } = el
   const { prefix, suffix, decimal, min, separator } = options as Options
   const { key } = event
-
-  console.log(key)
   const regExp = new RegExp(`${prefix}|${suffix}`, 'g')
   const newValue = el.value.replace(regExp, '')
   const canNegativeInput = min === undefined || Number(min) < 0 || Number(min) !== min