Skip to content

Commit f8a0764

Browse files
author
Dipak Sarkar
committed
updated final version
1 parent c8b3b4c commit f8a0764

15 files changed

+2509
-2697
lines changed

‎.eslintrc.js

+13-3
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,24 @@ module.exports = {
55
},
66
extends: [
77
'plugin:vue/essential',
8-
'prettier',
8+
'eslint:recommended',
9+
'airbnb-base',
910
],
11+
globals: {
12+
Atomics: 'readonly',
13+
SharedArrayBuffer: 'readonly',
14+
},
1015
parserOptions: {
1116
ecmaVersion: 2020
1217
},
1318
rules: {
14-
semi: 'off'
19+
semi: 0,
20+
'prefer-arrow-callback': 0,
21+
'consistent-return': 0,
22+
'prefer-destructuring': 0,
23+
'no-param-reassign': 0,
24+
'max-len': 0,
25+
'no-var': 0
1526
},
1627
overrides: [
1728
{
@@ -25,7 +36,6 @@ module.exports = {
2536
extends: [
2637
'plugin:vue/essential',
2738
'eslint:recommended',
28-
'@vue/prettier'
2939
],
3040
plugins: [
3141
'vue'

‎.gitignore

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,4 @@ coverage
99
npm-debug.log*
1010
yarn-debug.log*
1111
yarn-error.log*
12-
pnpm-debug.log*
12+
pnpm-debug.log*

‎.prettierrc

-7
This file was deleted.

‎babel.config.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,5 +8,5 @@ module.exports = {
88
},
99
},
1010
],
11-
]
11+
],
1212
}

‎docs/guide/README.md

+1-136
Original file line numberDiff line numberDiff line change
@@ -1,143 +1,8 @@
11
# Introduction
22

3-
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).
4-
5-
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.
6-
73
## Installation
84
Install the npm package:
95

106
```bash
11-
npm install vue-currency-input
12-
```
13-
14-
For usage with Vue 2 you have to install also the [Vue Composition API plugin](https://github.com/vuejs/composition-api):
15-
16-
```bash
17-
npm install @vue/composition-api
18-
```
19-
20-
## Usage
21-
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)).
22-
23-
::: warning Code examples
24-
The following code examples are for Vue 3. Deviations for Vue 2 are noted as inline code comments.
25-
:::
26-
27-
### Creating a custom component
28-
The following example component `<currency-input>` uses a simple HTML input element.
29-
30-
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).
31-
32-
```vue
33-
<template>
34-
<input
35-
ref="inputRef"
36-
type="text"
37-
:value="formattedValue"
38-
>
39-
</template>
40-
41-
<script>
42-
import { useCurrencyInput } from 'vue-currency-input'
43-
44-
export default {
45-
name: 'CurrencyInput',
46-
props: {
47-
modelValue: Number, // Vue 2: value
48-
options: Object
49-
},
50-
setup (props) {
51-
const { formattedValue, inputRef } = useCurrencyInput(props.options)
52-
53-
return { inputRef, formattedValue }
54-
}
55-
}
56-
</script>
57-
```
58-
59-
### Use the custom component
60-
Now you can use the created `<currency-input>` component in your app:
61-
```vue
62-
<template>
63-
<currency-input
64-
v-model="value"
65-
:options="{ currency: 'EUR' }"
66-
/>
67-
</template>
68-
69-
<script>
70-
import CurrencyInput from './CurrencyInput'
71-
72-
export default {
73-
name: 'App',
74-
components: { CurrencyInput },
75-
data: () => ({ value: 1234 })
76-
}
77-
</script>
78-
```
79-
80-
See the final result in the [examples](examples#simple-html-input-element).
81-
82-
## Lazy value binding
83-
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:
84-
85-
```vue
86-
<currency-input
87-
v-model.lazy="value"
88-
:options="{ currency: 'EUR' }"
89-
/>
90-
```
91-
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:
92-
```vue
93-
<currency-input
94-
:value="value"
95-
:options="{ currency: 'EUR' }"
96-
@change="value = $event"
97-
/>
98-
```
99-
100-
## External props changes
101-
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.
102-
103-
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)).
104-
105-
```vue
106-
<template>
107-
<input
108-
ref="inputRef"
109-
:value="formattedValue"
110-
>
111-
</template>
112-
113-
<script>
114-
import { watch } from 'vue' // Vue 2: import { watch } from '@vue/composition-api'
115-
import { useCurrencyInput } from 'vue-currency-input'
116-
117-
export default {
118-
name: 'CurrencyInput',
119-
props: {
120-
modelValue: Number, // Vue 2: value
121-
options: Object
122-
},
123-
setup (props) {
124-
const {
125-
inputRef,
126-
formattedValue,
127-
setOptions,
128-
setValue
129-
} = useCurrencyInput(props.options)
130-
131-
watch(() => props.modelValue, (value) => { // Vue 2: props.value
132-
setValue(value)
133-
})
134-
135-
watch(() => props.options, (options) => {
136-
setOptions(options)
137-
})
138-
139-
return { inputRef, formattedValue }
140-
}
141-
}
142-
</script>
7+
npm install @coders-tm/vue-number-format
1438
```

‎jest.config.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,13 @@ module.exports = {
66
moduleFileExtensions: [
77
'js',
88
'json',
9-
'vue'
9+
'vue',
1010
],
1111
transform: {
1212
'.*\\.(vue)$': 'vue-jest',
13-
'.*\\.(js)$': 'babel-jest'
13+
'.*\\.(js)$': 'babel-jest',
1414
},
1515
moduleNameMapper: {
16-
'^@/(.*)$': '<rootDir>/src/$1'
17-
}
16+
'^@/(.*)$': '<rootDir>/src/$1',
17+
},
1818
}

‎package.json

+39-35
Original file line numberDiff line numberDiff line change
@@ -4,55 +4,59 @@
44
"private": false,
55
"description": "Easy formatted numbers, currency and percentage with input/directive mask for Vue.js",
66
"author": "Dipak Sarkar <[email protected]> (https://dipaksarkar.in/)",
7-
"scripts": {
8-
"build": "rollup --c rollup.config.js",
9-
"lint": "eslint",
10-
"docs:build": "vuepress build docs",
11-
"docs:dev": "vuepress dev docs",
12-
"test": "jest",
13-
"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\""
14-
},
157
"main": "dist/index.cjs.js",
168
"module": "dist/index.esm.js",
179
"unpkg": "dist/index.min.js",
10+
"style": "dist/styles.css",
11+
"licence": "MIT",
1812
"files": [
19-
"dist/*"
13+
"dist/*",
14+
"src/**/*.vue"
2015
],
21-
"dependencies": {
22-
"vue": "^2.6.11"
16+
"scripts": {
17+
"build": "rollup --c rollup.config.js",
18+
"docs:build": "vuepress build docs",
19+
"docs:dev": "vuepress dev docs",
20+
"test": "jest tests/*",
21+
"lint": "eslint 'src/**/*.{js,vue}'",
22+
"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\""
2323
},
2424
"devDependencies": {
25-
"@babel/core": "^7.15.5",
26-
"@babel/preset-env": "^7.15.6",
27-
"@vue/babel-preset-app": "^4.5.13",
28-
"@vue/cli-plugin-unit-jest": "~4.5.0",
29-
"@vue/cli-service": "^4.5.13",
30-
"@vue/compiler-sfc": "^3.2.11",
31-
"@vue/eslint-config-prettier": "^6.0.0",
32-
"@vue/test-utils": "^1.0.3",
25+
"@babel/core": "^7.9.0",
26+
"@babel/preset-env": "^7.9.5",
27+
"@shopify/jest-dom-mocks": "^2.8.11",
28+
"@vue/cli-plugin-unit-jest": "^4.5.13",
29+
"@vue/test-utils": "^1.0.0-beta.33",
30+
"@vuedoc/md": "^1.6.0",
3331
"@vuepress/plugin-back-to-top": "^1.8.2",
3432
"@vuepress/plugin-medium-zoom": "^1.8.2",
35-
"@vuepress/plugin-register-components": "^1.8.2",
33+
"@vuepress/plugin-register-components": "^1.4.1",
3634
"babel-core": "^7.0.0-bridge.0",
37-
"babel-jest": "^27.1.1",
38-
"babel-preset-vue-app": "^2.0.0",
39-
"eslint": "^7.32.0",
40-
"eslint-config-prettier": "^8.3.0",
41-
"eslint-plugin-prettier": "^4.0.0",
42-
"eslint-plugin-vue": "^7.17.0",
43-
"jest": "^26.6.3",
44-
"jest-environment-jsdom-fifteen": "^1.0.2",
45-
"prettier": "^2.4.0",
35+
"babel-jest": "^25.3.0",
36+
"babel-preset-env": "^1.7.0",
37+
"babel-preset-vue": "^2.0.2",
38+
"eslint": "^6.8.0",
39+
"eslint-config-airbnb-base": "^14.1.0",
40+
"eslint-plugin-import": "^2.20.2",
41+
"eslint-plugin-vue": "^6.2.2",
42+
"jest": "^25.3.0",
43+
"node-fetch": "^2.6.0",
44+
"npm-run-all": "^4.1.5",
4645
"quasar": "^1.11.3",
47-
"rollup": "^2.56.3",
46+
"rollup": "^2.6.1",
4847
"rollup-plugin-buble": "^0.19.8",
49-
"rollup-plugin-cleanup": "^3.2.1",
48+
"rollup-plugin-commonjs": "^10.1.0",
49+
"rollup-plugin-css-only": "^2.0.0",
5050
"rollup-plugin-filesize": "^9.1.1",
5151
"rollup-plugin-node-resolve": "^5.2.0",
52-
"rollup-plugin-vue": "^6.0.0",
53-
"vue-demi": "^0.11.4",
54-
"vue-jest": "^3.0.7",
55-
"vuepress": "^1.8.2"
52+
"rollup-plugin-replace": "^2.2.0",
53+
"rollup-plugin-terser": "^5.3.0",
54+
"rollup-plugin-vue": "^5.1.6",
55+
"vue": "^2.6.11",
56+
"vue-jest": "^3.0.5",
57+
"vue-template-compiler": "^2.6.11",
58+
"vuepress": "^1.4.1",
59+
"vuepress-plugin-demo-code": "^0.5.0"
5660
},
5761
"bugs": {
5862
"url": "https://github.com/coders-tm/vue-number-format/issues"

0 commit comments

Comments
 (0)