changed packages and component

Author: dipaksarkar

package.json

@@ -20,7 +20,8 @@
   },
   "sideeffects": false,
   "scripts": {
-    "build": "tsc --emitDeclarationOnly --skipLibCheck --declaration --outDir .temp/types && rollup --c rollup.config.js",
+    "prebuild": "rimraf dist",
+    "build": "rollup --c rollup.config.js && rimraf dist/src",
     "docs:build": "vuepress build docs",
     "docs:dev": "vuepress dev docs",
     "test": "vitest",
@@ -44,17 +45,19 @@
     "jsdom": "latest",
     "lint-staged": "^13.1.2",
     "prettier": "^2.7.1",
-    "rimraf": "^3.0.2",
+    "rimraf": "^4.1.2",
     "rollup": "^2.6.1",
     "rollup-plugin-dts": "^4.2.2",
     "rollup-plugin-filesize": "^9.1.2",
     "rollup-plugin-typescript2": "^0.34.1",
+    "rollup-plugin-vue": "^5.1.6",
+    "vue-jest": "^3.0.5",
     "typescript": "^4.9.5",
     "vite": "^4.1.1",
     "vite-plugin-vue2": "^1.9.3",
     "vitest": "^0.28.5",
-    "vue": "^2.6.0",
-    "vue-template-compiler": "^2.6.0"
+    "vue": "^2.6.11",
+    "vue-template-compiler": "^2.6.11"
   },
   "bugs": {
     "url": "https://github.com/coders-tm/vue-number-format/issues"

rollup.config.js

@@ -1,4 +1,5 @@
 import typescript from 'rollup-plugin-typescript2'
+import vue from 'rollup-plugin-vue'
 import filesize from 'rollup-plugin-filesize'
 import resolve from '@rollup/plugin-node-resolve'
 import dts from 'rollup-plugin-dts'
@@ -31,18 +32,19 @@ export default [
       typescript({
         tsconfigOverride: {
           compilerOptions: {
-            declaration: false
+            declaration: true
           }
         }
       }),
+      vue(),
       resolve(),
       filesize()
     ],
     external: ['vue']
   },
   {
-    input: './.temp/types/src/index.d.ts',
-    output: [{ file: 'dist/index.d.ts', format: 'es' }],
+    input: 'dist/src/index.d.ts',
+    output: [{ file: pkg.types, format: 'es' }],
     plugins: [dts()]
   }
 ]

src/component.ts renamed to src/component.vue

@@ -1,3 +1,18 @@
+<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'
@@ -16,7 +31,7 @@ export default Vue.extend({
     },
     nullValue: {
       type: [Number, String],
-      default: () => options.nullValue
+      default: options.nullValue
     },
     masked: {
       type: Boolean,
@@ -32,35 +47,35 @@ export default Vue.extend({
     },
     precision: {
       type: Number,
-      default: () => options.precision
+      default: options.precision
     },
     minimumFractionDigits: {
       type: Number,
-      default: () => options.minimumFractionDigits
+      default: options.minimumFractionDigits
     },
     decimal: {
       type: String,
-      default: () => options.decimal
+      default: options.decimal
     },
     min: {
       type: Number,
-      default: () => options.min
+      default: options.min
     },
     max: {
       type: Number,
-      default: () => options.max
+      default: options.max
     },
     separator: {
       type: String,
-      default: () => options.separator
+      default: options.separator
     },
     prefix: {
       type: String,
-      default: () => options.prefix
+      default: options.prefix
     },
     suffix: {
       type: String,
-      default: () => options.suffix
+      default: options.suffix
     }
   },
   data() {
@@ -98,25 +113,15 @@ export default Vue.extend({
     }
   },
   methods: {
-    input(event: CustomInputEvent) {
-      const { target } = event
+    input(event: Event) {
+      const { target } = event as CustomInputEvent
       this.maskedValue = target.value
       this.unmaskedValue = target.unmaskedValue
       this.$emit('input', this.emittedValue)
     },
     change() {
       this.$emit('change', this.emittedValue)
     }
-  },
-  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)"
-  >`
+  }
 })
+</script>

src/index.ts

@@ -1,4 +1,4 @@
-import component from './component'
+import component from './component.vue'
 import directive from './directive'
 import options, { Options as Config } from './options'
 import NumberFormat from './number-format'

src/shims-vue.d.ts

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

tsconfig.json

@@ -12,6 +12,18 @@
     "rootDir": ".",
     "skipLibCheck": true,
     "noUnusedLocals": true,
-    "baseUrl": "."
-  }
+    "declaration": true,
+    "declarationDir": "dist/types",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue"
+  ]
 }