linked from tracking branch

Author: dipaksarkar

.eslintignore

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

.eslintrc.js

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

.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.formatOnSave": true,
-    "editor.formatOnSaveMode": "modificationsIfAvailable"
+  "editor.formatOnPaste": false,
+  "editor.formatOnSave": true
 }

README.md

@@ -17,12 +17,7 @@ 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,7 +1,4 @@
 # 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,7 +50,6 @@ 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": "2.2.1",
+  "version": "3.2.0",
   "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,41 +20,15 @@
   },
   "sideeffects": false,
   "scripts": {
-    "build": "tsc --emitDeclarationOnly --skipLibCheck --declaration --outDir .temp/types && rollup --c rollup.config.js",
-    "docs:build": "vuepress build docs",
+    "prebuild": "rimraf dist .temp/types",
+    "build": "tsc --emitDeclarationOnly --declaration --outDir .temp/types && rollup -c rollup.config.js",
     "docs:dev": "vuepress dev docs",
+    "docs:build": "vuepress build docs",
     "test": "vitest",
     "coverage": "vitest run --coverage",
-    "lint": "eslint 'src/**/*.{js,vue}'",
+    "lint": "eslint --no-fix --max-warnings 0 {**/*,*}.{js,ts,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"
   },
@@ -79,6 +53,47 @@
   "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 filesize from 'rollup-plugin-filesize'
-import resolve from '@rollup/plugin-node-resolve'
 import dts from 'rollup-plugin-dts'
+import cleanup from 'rollup-plugin-cleanup'
+import filesize from 'rollup-plugin-filesize'
 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 [
           }
         }
       }),
-      resolve(),
+      cleanup({ extensions: ['js', 'ts'] }),
       filesize()
     ],
     external: ['vue']

src/component.ts

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

src/core.ts

@@ -111,7 +111,7 @@ export function updateCursor(el: HTMLInputElement, position: number) {
  */
 export function updateValue(el: CustomInputElement, vnode: VNode | null, { emit = true, force = false, clean = false } = {}) {
   const { options, oldValue } = el
-  const currentValue = vnode && vnode.data && vnode.data.domProps ? vnode.data.domProps.value : el.value
+  const currentValue = vnode?.props?.value || el.value
 
   if (force || oldValue !== currentValue) {
     const number = new NumberFormat(options).clean(clean && !options.reverseFill)
@@ -152,7 +152,7 @@ export function inputHandler(event: CustomInputEvent, el?: CustomInputElement) {
   const { target, detail } = event
 
   // We dont need to run this method on the event we emit (prevent event loop)
-  if (detail && detail.facade) {
+  if (detail?.facade) {
     return false
   }
 
@@ -191,7 +191,7 @@ export function blurHandler(event: Event, el?: CustomInputElement) {
   const { target, detail } = event as CustomInputEvent
 
   // We dont need to run this method on the event we emit (prevent event loop)
-  if (detail && detail.facade) {
+  if (detail?.facade) {
     return false
   }
 

src/directive.ts

@@ -1,18 +1,17 @@
-import { VNode } from 'vue'
-import { DirectiveBinding } from 'vue/types/options'
+import { DirectiveBinding, VNode } from 'vue'
 import * as core from './core'
 import defaultOptions from './options'
 
 export default {
-  bind: (el: core.CustomInputElement, { value, modifiers }: DirectiveBinding, vnode: VNode) => {
+  beforeMount: (el: core.CustomInputElement, { value, modifiers }: DirectiveBinding, vnode: VNode) => {
     el = core.getInputElement(el)
     const options = Object.assign(core.cloneDeep(defaultOptions), value, modifiers)
     el.options = options
     // set initial value
     core.updateValue(el, vnode, { force: options.prefill, clean: true })
   },
 
-  inserted: (el: core.CustomInputElement) => {
+  mounted: (el: core.CustomInputElement) => {
     el = core.getInputElement(el)
 
     // prefer adding event listener to parent element to avoid Firefox bug which does not
@@ -38,7 +37,7 @@ export default {
     el.cleanup = () => handlerOwner.removeEventListener('input', oninput, true)
   },
 
-  update: (el: core.CustomInputElement, { value, oldValue, modifiers }: DirectiveBinding, vnode: VNode) => {
+  updated: (el: core.CustomInputElement, { value, oldValue, modifiers }: DirectiveBinding, vnode: VNode) => {
     el = core.getInputElement(el)
     const options = el.options
     el.options = Object.assign(options, value, modifiers)
@@ -49,7 +48,7 @@ export default {
     }
   },
 
-  unbind: (el: core.CustomInputElement) => {
+  unmounted: (el: core.CustomInputElement) => {
     core.getInputElement(el).cleanup()
   }
 }

src/index.ts

@@ -5,12 +5,14 @@ import NumberFormat from './number-format'
 
 export { component, directive, options, NumberFormat }
 
-export default {
-  install(Vue: any, config?: Config) {
+const VueNumberFormat = {
+  install(app: any, config?: Config) {
     if (config) {
       Object.assign(options, config)
     }
-    Vue.directive('number', directive)
-    Vue.component('VueNumber', component)
+    app.directive('number', directive)
+    app.component('VueNumber', component)
   }
 }
+
+export default VueNumberFormat