used composition api to build the component

Author: dipaksarkar

src/component.vue

@@ -9,9 +9,8 @@
     @input="input"
   />
 </template>
-
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, ref, computed } from 'vue'
 import { cloneDeep, CustomInputEvent, Input } from './core'
 import directive from './directive'
 import defaultOptions from './options'
@@ -30,7 +29,8 @@ export default defineComponent({
     },
     nullValue: {
       type: [Number, String],
-      default: () => options.nullValue
+      required: false,
+      default: options.nullValue
     },
     masked: {
       type: Boolean,
@@ -78,42 +78,31 @@ export default defineComponent({
     }
   },
   emits: ['update:model-value', 'input:model-value'],
-  data() {
-    return {
-      maskedValue: this.modelValue,
-      unmaskedValue: '' as Input | undefined
+  setup(props, { emit }) {
+    const maskedValue = ref(props.modelValue)
+    const unmaskedValue = ref('' as Input | undefined)
+    const config = computed(() => ({ ...props }))
+
+    const emittedValue = computed(() => {
+      return props.masked ? maskedValue.value : unmaskedValue.value
+    })
+
+    const input = (event: Event) => {
+      const { target } = event as CustomInputEvent
+      maskedValue.value = target.value
+      unmaskedValue.value = target.unmaskedValue
+      emit('input:model-value', emittedValue)
     }
-  },
-  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
-      }
+
+    const change = () => {
+      emit('update:model-value', emittedValue)
     }
-  },
-  methods: {
-    input(event: Event) {
-      const { target } = event as CustomInputEvent
-      this.maskedValue = target.value
-      this.unmaskedValue = target.unmaskedValue
-      this.$emit('input:model-value', this.emittedValue)
-    },
-    change() {
-      this.$emit('update:model-value', this.emittedValue)
+
+    return {
+      config,
+      maskedValue,
+      input,
+      change
     }
   }
 })

src/shims-vue.d.ts

@@ -0,0 +1,4 @@
+declare module '*.vue' {
+  import Vue from 'vue'
+  export default Vue
+}

tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "ES2018",
+    "target": "ESNext",
     "module": "ESNext",
     "lib": ["ESNext", "DOM"],
     "moduleResolution": "Node",
@@ -12,6 +12,8 @@
     "rootDir": ".",
     "skipLibCheck": true,
     "noUnusedLocals": true,
+    "declaration": true,
+    "declarationDir": "dist/types",
     "baseUrl": ".",
     "paths": {
       "@/*": [
@@ -23,5 +25,5 @@
     "src/**/*.ts",
     "src/**/*.tsx",
     "src/**/*.vue"
-  ],
+  ]
 }