merged base brnach

Author: dipaksarkar

.eslintignore

@@ -1,3 +1,2 @@
 !docs/.vitepress
 dist
-examples

.eslintrc.js

@@ -6,5 +6,8 @@ module.exports = {
   env: {
     node: true
   },
-  extends: ['plugin:vue/vue3-recommended', 'eslint:recommended', '@vue/eslint-config-typescript/recommended', '@vue/eslint-config-prettier']
+  extends: ['plugin:vue/recommended', 'eslint:recommended', '@vue/eslint-config-typescript/recommended', '@vue/eslint-config-prettier'],
+  rules: {
+    // Customize your rules here
+  }
 }

.gitignore

@@ -10,7 +10,7 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
-node_modules
 .temp
 .cache
+*.bak
 example*

.vscode/settings.json

@@ -1,4 +1,4 @@
 {
-  "editor.formatOnPaste": false,
-  "editor.formatOnSave": true
+    "editor.formatOnSave": true,
+    "editor.formatOnSaveMode": "modificationsIfAvailable"
 }

README.md

@@ -17,7 +17,12 @@ npm install @coders-tm/vue-number-format
 or
 yarn add @coders-tm/vue-number-format
 ```
-
+## Vue 2.0
+```bash
+npm install @coders-tm/vue-number-format@2.0.7
+or
+yarn add @coders-tm/vue-number-format@2.0.7
+```
 ## Features
 
 - Lightweight

docs/guide/README.md

@@ -1,4 +1,7 @@
 # Introduction
+Vue Number Format is used to format a number using fixed-point notation. It can be used to format a number with a specific number of digits to the right of the decimal.
+## Installation
+Install the npm package: @coders-tm/vue-number-format@2.0.7 for Vue 2.0
 
 [![npm Version](https://badgen.net/npm/v/@coders-tm/vue-number-format?color=green)](https://www.npmjs.com/package/@coders-tm/vue-number-format)
 [![npm Downloads](https://badgen.net/npm/dt/@coders-tm/vue-number-format?color=green)](https://www.npmjs.com/package/@coders-tm/vue-number-format)

docs/guide/config.md

@@ -50,6 +50,7 @@ The precision property returns the number of bits of precision that can be repre
 - Type: `string`
 - Default: `2`
 - Required: `false`
+## nullValue
 
 ## minimumFractionDigits
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coders-tm/vue-number-format",
-  "version": "3.2.0",
+  "version": "2.2.1",
   "private": false,
   "description": "Easy formatted numbers, currency and percentage with input/directive mask for Vue.js",
   "author": "Dipak Sarkar <hello@dipaksarkar.in> (https://dipaksarkar.in/)",
@@ -20,15 +20,41 @@
   },
   "sideeffects": false,
   "scripts": {
-    "coverage": "vitest run --coverage",
-    "lint": "eslint --no-fix --max-warnings 0 {**/*,*}.{js,ts,vue}",
-    "prebuild": "rimraf dist .temp",
-    "build": "tsc --emitDeclarationOnly --declaration --outDir .temp/types && rollup -c rollup.config.js",
-    "docs:dev": "vuepress dev docs",
+    "build": "tsc --emitDeclarationOnly --skipLibCheck --declaration --outDir .temp/types && rollup --c rollup.config.js",
     "docs:build": "vuepress build docs",
+    "docs:dev": "vuepress dev docs",
     "test": "vitest",
+    "coverage": "vitest run --coverage",
+    "lint": "eslint 'src/**/*.{js,vue}'",
     "push": "clear && git config core.ignorecase false && branch=\"$(git symbolic-ref -q HEAD)\" || \"dev\" && branch=${branch##refs/heads/} && branch=${branch:-HEAD} && echo Pushing to Branch \"$branch\" && echo Please type your commit message && read msg && clear && git add . && git commit -m \"$msg\" && git push origin \"$branch\""
   },
+  "devDependencies": {
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@rushstack/eslint-patch": "^1.2.0",
+    "@types/jest": "^29.4.0",
+    "@typescript-eslint/eslint-plugin": "^5.38.1",
+    "@typescript-eslint/parser": "^5.38.1",
+    "@vue/eslint-config-prettier": "^7.0.0",
+    "@vue/eslint-config-typescript": "^11.0.2",
+    "@vue/test-utils": "^1.3.0",
+    "eslint": "^8.34.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-vue": "^9.9.0",
+    "jsdom": "latest",
+    "lint-staged": "^13.1.2",
+    "prettier": "^2.7.1",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.6.1",
+    "rollup-plugin-dts": "^4.2.2",
+    "rollup-plugin-filesize": "^9.1.2",
+    "rollup-plugin-typescript2": "^0.34.1",
+    "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"
+  },
   "bugs": {
     "url": "https://github.com/coders-tm/vue-number-format/issues"
   },
@@ -53,47 +79,6 @@
   "publishConfig": {
     "@coders-tm:registry": "https://npm.pkg.github.com"
   },
-  "peerDependencies": {
-    "vue": "^2.7 || ^3.0.0"
-  },
-  "devDependencies": {
-    "@rushstack/eslint-patch": "^1.2.0",
-    "@testing-library/dom": "^8.18.1",
-    "@testing-library/user-event": "^13.5.0",
-    "@types/jest": "^29.4.0",
-    "@typescript-eslint/eslint-plugin": "^5.38.1",
-    "@typescript-eslint/parser": "^5.38.1",
-    "@vitejs/plugin-vue": "latest",
-    "@vitest/coverage-c8": "^0.23.4",
-    "@vue/eslint-config-prettier": "^7.0.0",
-    "@vue/eslint-config-typescript": "^11.0.2",
-    "@vue/test-utils": "^2.0.0",
-    "@vuepress/plugin-google-analytics": "^2.0.0-beta.27",
-    "@vuepress/plugin-medium-zoom": "^2.0.0-beta.27",
-    "@vuepress/plugin-register-components": "2.0.0-beta.27",
-    "@vuepress/plugin-search": "^2.0.0-beta.27",
-    "eslint": "^8.24.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-vue": "^9.5.1",
-    "jsdom": "latest",
-    "lint-staged": "^13.0.3",
-    "prettier": "^2.7.1",
-    "rimraf": "^3.0.2",
-    "rollup": "^2.79.1",
-    "rollup-plugin-cleanup": "^3.2.1",
-    "rollup-plugin-dts": "^4.2.2",
-    "rollup-plugin-filesize": "^9.1.2",
-    "rollup-plugin-typescript2": "^0.34.0",
-    "simple-git-hooks": "^2.8.0",
-    "typescript": "^4.8.4",
-    "unplugin-vue-components": "^0.22.7",
-    "vite": "^3.2.3",
-    "vite-plugin-windicss": "^1.8.1",
-    "vitest": "latest",
-    "vue": "^3.0.0",
-    "vuepress-vite": "^2.0.0-beta.27",
-    "windicss": "^3.5.0"
-  },
   "simple-git-hooks": {
     "pre-commit": "npx lint-staged"
   },

rollup.config.js

@@ -1,7 +1,7 @@
 import typescript from 'rollup-plugin-typescript2'
-import dts from 'rollup-plugin-dts'
-import cleanup from 'rollup-plugin-cleanup'
 import filesize from 'rollup-plugin-filesize'
+import resolve from '@rollup/plugin-node-resolve'
+import dts from 'rollup-plugin-dts'
 import pkg from './package.json'
 
 const banner = `/**
@@ -12,7 +12,7 @@ const banner = `/**
 
 export default [
   {
-    input: `src/index.ts`,
+    input: 'src/index.ts',
     output: [
       {
         file: pkg.main,
@@ -35,7 +35,7 @@ export default [
           }
         }
       }),
-      cleanup({ extensions: ['js', 'ts'] }),
+      resolve(),
       filesize()
     ],
     external: ['vue']

src/component.ts

@@ -1,19 +1,18 @@
-import { defineComponent } from 'vue'
-import { cloneDeep, CustomInputEvent, Input } from './core'
+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 defineComponent({
+export default Vue.extend({
   name: 'VueNumber',
-  directives: {
-    number: directive
-  },
   props: {
-    modelValue: {
-      type: [String, Number],
-      required: true
+    value: {
+      required: true,
+      type: [Number, String]
     },
     nullValue: {
       type: [Number, String],
@@ -36,19 +35,19 @@ export default defineComponent({
       default: () => options.precision
     },
     minimumFractionDigits: {
-      type: [Number, Boolean],
+      type: Number,
       default: () => options.minimumFractionDigits
     },
     decimal: {
       type: String,
       default: () => options.decimal
     },
     min: {
-      type: [Number, Boolean],
+      type: Number,
       default: () => options.min
     },
     max: {
-      type: [Number, Boolean],
+      type: Number,
       default: () => options.max
     },
     separator: {
@@ -64,10 +63,9 @@ export default defineComponent({
       default: () => options.suffix
     }
   },
-  emits: ['update:model-value', 'input:model-value'],
   data() {
     return {
-      maskedValue: this.modelValue,
+      maskedValue: this.value,
       unmaskedValue: '' as Input | undefined
     }
   },
@@ -92,24 +90,33 @@ export default defineComponent({
       }
     }
   },
+  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:model-value', this.emittedValue)
+      this.$emit('input', this.emittedValue)
     },
     change() {
-      this.$emit('update:model-value', this.emittedValue)
+      this.$emit('change', this.emittedValue)
     }
   },
   template: `<input
     v-number="config"
     type="text"
     autocomplete="off"
     :value="maskedValue"
-    class="v-number vue-number-format"
+    class="v-number"
     @change="change"
     @input="input"
-  />`
+    @blur="(evt) => $emit('blur', evt)"
+    @focus="(evt) => $emit('focus', evt)"
+  >`
 })