updated final version

Author: Dipak Sarkar

.eslintrc.js

@@ -5,13 +5,24 @@ module.exports = {
   },
   extends: [
     'plugin:vue/essential',
-    'prettier',
+    'eslint:recommended',
+    'airbnb-base',
   ],
+  globals: {
+    Atomics: 'readonly',
+    SharedArrayBuffer: 'readonly',
+  },
   parserOptions: {
     ecmaVersion: 2020
   },
   rules: {
-    semi: 'off'
+    semi: 0,
+    'prefer-arrow-callback': 0,
+    'consistent-return': 0,
+    'prefer-destructuring': 0,
+    'no-param-reassign': 0,
+    'max-len': 0,
+    'no-var': 0
   },
   overrides: [
     {
@@ -25,7 +36,6 @@ module.exports = {
       extends: [
         'plugin:vue/essential',
         'eslint:recommended',
-        '@vue/prettier'
       ],
       plugins: [
         'vue'

.gitignore

@@ -9,4 +9,4 @@ coverage
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-pnpm-debug.log*
+pnpm-debug.log*

.prettierrc

@@ -8,5 +8,5 @@ module.exports = {
         },
       },
     ],
-  ]
+  ],
 }

babel.config.js

@@ -1,143 +1,8 @@
 # Introduction
 
-Vue Currency Input allows an easy input of currency formatted numbers based on the [ECMAScript Internationalization API (ECMA-402)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat).
-
-Built on top of the [Vue Composition API](https://v3.vuejs.org/guide/composition-api-introduction.html), it provides the function `useCurrencyInput` (a so called *Vue composable*) for decorating input components with currency format capabilities. Thanks to [Vue Demi](https://github.com/vueuse/vue-demi), it supports both Vue 2 and Vue 3.
-
 ## Installation
 Install the npm package:
 
 ```bash
-npm install vue-currency-input
-```
-
-For usage with Vue 2 you have to install also the [Vue Composition API plugin](https://github.com/vuejs/composition-api):
-
-```bash
-npm install @vue/composition-api
-```
-
-## Usage
-Vue Currency Input does not provide a ready-to-use component, instead it enables you to create your own based on your favorite input component (for example [Quasar](examples#usage-with-quasar-veevalidate) or [Element Plus](examples#usage-with-element-plus)).
-
-::: warning Code examples
-The following code examples are for Vue 3. Deviations for Vue 2 are noted as inline code comments.
-:::
-
-### Creating a custom component
-The following example component `<currency-input>` uses a simple HTML input element. 
-
-The component must provide props for the `v-model` value binding and the options (see [Config Reference](config)). Make also sure, that the input element has type `text` (or omit the type since it's the default).
-
-```vue
-<template>
-  <input 
-    ref="inputRef"
-    type="text"
-    :value="formattedValue"
-  >
-</template>
-
-<script>
-import { useCurrencyInput } from 'vue-currency-input'
-
-export default {
-  name: 'CurrencyInput',
-  props: {
-    modelValue: Number, // Vue 2: value
-    options: Object
-  },
-  setup (props) {
-    const { formattedValue, inputRef } = useCurrencyInput(props.options)
-
-    return { inputRef, formattedValue }
-  }
-}
-</script>
-```
-
-### Use the custom component
-Now you can use the created `<currency-input>` component in your app:
-```vue
-<template>
-  <currency-input 
-    v-model="value" 
-    :options="{ currency: 'EUR' }"
-  />
-</template>
-
-<script>
-import CurrencyInput from './CurrencyInput'
-
-export default {
-  name: 'App',
-  components: { CurrencyInput },
-  data: () => ({ value: 1234 })
-}
-</script> 
-```
-
-See the final result in the [examples](examples#simple-html-input-element).
-
-## Lazy value binding
-Sometimes you might want to update the bound value only when the input loses its focus. In this case, use `v-model.lazy` for Vue 3:
-
-```vue
-<currency-input
-  v-model.lazy="value"
-  :options="{ currency: 'EUR' }"
-/>
-```
-For Vue 2 listen to the `change` event instead of using `v-model`, since the `lazy` modifier is not supported when using `v-model` on custom components:
-```vue
-<currency-input
-  :value="value"
-  :options="{ currency: 'EUR' }"
-  @change="value = $event"
-/>
-```
-
-## External props changes
-If the value of the input is changed externally (and not only by user input) you need to use the `setValue` function returned by `useCurrencyInput` within a watcher.
-
-The same applies for the options of your currency input component. Use the `setOptions` function in a watcher in order to make the options reactive for changes after the component has been mounted (like in the [Playground](playground)).
-
-```vue
-<template>
-  <input 
-    ref="inputRef" 
-    :value="formattedValue"
-  >
-</template>
-
-<script>
-import { watch } from 'vue' // Vue 2: import { watch } from '@vue/composition-api' 
-import { useCurrencyInput } from 'vue-currency-input'
-
-export default {
-  name: 'CurrencyInput',
-  props: {
-    modelValue: Number, // Vue 2: value
-    options: Object
-  },
-  setup (props) {
-    const {
-      inputRef,
-      formattedValue,
-      setOptions,
-      setValue
-    } = useCurrencyInput(props.options)
-
-    watch(() => props.modelValue, (value) => { // Vue 2: props.value
-      setValue(value)
-    })
-
-    watch(() => props.options, (options) => {
-      setOptions(options)
-    })
-
-    return { inputRef, formattedValue }
-  }
-}
-</script>
+npm install @coders-tm/vue-number-format
 ```

docs/guide/README.md

@@ -6,13 +6,13 @@ module.exports = {
   moduleFileExtensions: [
     'js',
     'json',
-    'vue'
+    'vue',
   ],
   transform: {
     '.*\\.(vue)$': 'vue-jest',
-    '.*\\.(js)$': 'babel-jest'
+    '.*\\.(js)$': 'babel-jest',
   },
   moduleNameMapper: {
-    '^@/(.*)$': '<rootDir>/src/$1'
-  }
+    '^@/(.*)$': '<rootDir>/src/$1',
+  },
 }

jest.config.js

@@ -4,55 +4,59 @@
   "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/)",
-  "scripts": {
-    "build": "rollup --c rollup.config.js",
-    "lint": "eslint",
-    "docs:build": "vuepress build docs",
-    "docs:dev": "vuepress dev docs",
-    "test": "jest",
-    "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\""
-  },
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
   "unpkg": "dist/index.min.js",
+  "style": "dist/styles.css",
+  "licence": "MIT",
   "files": [
-    "dist/*"
+    "dist/*",
+    "src/**/*.vue"
   ],
-  "dependencies": {
-    "vue": "^2.6.11"
+  "scripts": {
+    "build": "rollup --c rollup.config.js",
+    "docs:build": "vuepress build docs",
+    "docs:dev": "vuepress dev docs",
+    "test": "jest tests/*",
+    "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": {
-    "@babel/core": "^7.15.5",
-    "@babel/preset-env": "^7.15.6",
-    "@vue/babel-preset-app": "^4.5.13",
-    "@vue/cli-plugin-unit-jest": "~4.5.0",
-    "@vue/cli-service": "^4.5.13",
-    "@vue/compiler-sfc": "^3.2.11",
-    "@vue/eslint-config-prettier": "^6.0.0",
-    "@vue/test-utils": "^1.0.3",
+    "@babel/core": "^7.9.0",
+    "@babel/preset-env": "^7.9.5",
+    "@shopify/jest-dom-mocks": "^2.8.11",
+    "@vue/cli-plugin-unit-jest": "^4.5.13",
+    "@vue/test-utils": "^1.0.0-beta.33",
+    "@vuedoc/md": "^1.6.0",
     "@vuepress/plugin-back-to-top": "^1.8.2",
     "@vuepress/plugin-medium-zoom": "^1.8.2",
-    "@vuepress/plugin-register-components": "^1.8.2",
+    "@vuepress/plugin-register-components": "^1.4.1",
     "babel-core": "^7.0.0-bridge.0",
-    "babel-jest": "^27.1.1",
-    "babel-preset-vue-app": "^2.0.0",
-    "eslint": "^7.32.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-vue": "^7.17.0",
-    "jest": "^26.6.3",
-    "jest-environment-jsdom-fifteen": "^1.0.2",
-    "prettier": "^2.4.0",
+    "babel-jest": "^25.3.0",
+    "babel-preset-env": "^1.7.0",
+    "babel-preset-vue": "^2.0.2",
+    "eslint": "^6.8.0",
+    "eslint-config-airbnb-base": "^14.1.0",
+    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-vue": "^6.2.2",
+    "jest": "^25.3.0",
+    "node-fetch": "^2.6.0",
+    "npm-run-all": "^4.1.5",
     "quasar": "^1.11.3",
-    "rollup": "^2.56.3",
+    "rollup": "^2.6.1",
     "rollup-plugin-buble": "^0.19.8",
-    "rollup-plugin-cleanup": "^3.2.1",
+    "rollup-plugin-commonjs": "^10.1.0",
+    "rollup-plugin-css-only": "^2.0.0",
     "rollup-plugin-filesize": "^9.1.1",
     "rollup-plugin-node-resolve": "^5.2.0",
-    "rollup-plugin-vue": "^6.0.0",
-    "vue-demi": "^0.11.4",
-    "vue-jest": "^3.0.7",
-    "vuepress": "^1.8.2"
+    "rollup-plugin-replace": "^2.2.0",
+    "rollup-plugin-terser": "^5.3.0",
+    "rollup-plugin-vue": "^5.1.6",
+    "vue": "^2.6.11",
+    "vue-jest": "^3.0.5",
+    "vue-template-compiler": "^2.6.11",
+    "vuepress": "^1.4.1",
+    "vuepress-plugin-demo-code": "^0.5.0"
   },
   "bugs": {
     "url": "https://github.com/coders-tm/vue-number-format/issues"