update

Author: dipaksarkar

package.json

@@ -30,6 +30,7 @@
   "devDependencies": {
     "@rollup/plugin-commonjs": "^24.0.1",
     "@rollup/plugin-node-resolve": "^15.0.1",
+    "@vue/compiler-sfc": "^3.2.47",
     "@vue/eslint-config-typescript": "^11.0.2",
     "@vue/test-utils": "^2.2.10",
     "eslint": "^8.34.0",
@@ -42,6 +43,7 @@
     "rollup-plugin-filesize": "^9.1.2",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-typescript2": "^0.34.1",
+    "rollup-plugin-vue": "^6.0.0",
     "typescript": "^4.9.5",
     "vue": "2.6.0"
   },

rollup.config.js

@@ -1,3 +1,4 @@
+import vue from 'rollup-plugin-vue'
 import typescript from 'rollup-plugin-typescript2'
 import commonjs from 'rollup-plugin-commonjs'
 import resolve from 'rollup-plugin-node-resolve'
@@ -40,6 +41,7 @@ export default [
       }),
       resolve(),
       commonjs(),
+      vue(),
       filesize()
     ],
     external: ['vue']

src/component.ts

@@ -0,0 +1,127 @@
+<template>
+  <input
+    v-number="config"
+    type="text"
+    autocomplete="off"
+    :value="maskedValue"
+    class="v-number"
+    @change="change"
+    @input="input"
+    @blur="(evt) => $emit('blur', evt)"
+    @focus="(evt) => $emit('focus', evt)"
+  >
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import directive from './directive'
+import { cloneDeep, CustomInputEvent, Input } from './core'
+import defaultOptions from './options'
+
+Vue.directive('number', directive)
+
+const options = cloneDeep(defaultOptions)
+
+export default Vue.extend({
+  name: 'VueNumber',
+  props: {
+    value: {
+      required: true,
+      type: [Number, String]
+    },
+    nullValue: {
+      type: [Number, String],
+      default: () => options.nullValue
+    },
+    masked: {
+      type: Boolean,
+      default: false
+    },
+    reverseFill: {
+      type: Boolean,
+      default: options.reverseFill
+    },
+    prefill: {
+      type: Boolean,
+      default: options.prefill
+    },
+    precision: {
+      type: Number,
+      default: () => options.precision
+    },
+    minimumFractionDigits: {
+      type: Number,
+      default: () => options.minimumFractionDigits
+    },
+    decimal: {
+      type: String,
+      default: () => options.decimal
+    },
+    min: {
+      type: Number,
+      default: () => options.min
+    },
+    max: {
+      type: Number,
+      default: () => options.max
+    },
+    separator: {
+      type: String,
+      default: () => options.separator
+    },
+    prefix: {
+      type: String,
+      default: () => options.prefix
+    },
+    suffix: {
+      type: String,
+      default: () => options.suffix
+    }
+  },
+  data() {
+    return {
+      maskedValue: this.value,
+      unmaskedValue: '' as Input | undefined
+    }
+  },
+  computed: {
+    emittedValue() {
+      return this.masked ? this.maskedValue : this.unmaskedValue
+    },
+    config() {
+      return {
+        nullValue: this.nullValue,
+        masked: this.masked,
+        reverseFill: this.reverseFill,
+        prefill: this.prefill,
+        precision: this.precision,
+        minimumFractionDigits: this.minimumFractionDigits,
+        decimal: this.decimal,
+        min: this.min,
+        max: this.max,
+        separator: this.separator,
+        prefix: this.prefix,
+        suffix: this.suffix
+      }
+    }
+  },
+  watch: {
+    value(val) {
+      if (this.unmaskedValue !== val) {
+        this.maskedValue = val
+      }
+    }
+  },
+  methods: {
+    input(event: CustomInputEvent) {
+      const { target } = event
+      this.maskedValue = target.value
+      this.unmaskedValue = target.unmaskedValue
+      this.$emit('input', this.emittedValue)
+    },
+    change() {
+      this.$emit('change', this.emittedValue)
+    }
+  }
+});
+</script>