Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mahmoudzakaria90/vue-currency-directive
Simple, quick custom directive for handling currency format inside text inputs.
https://github.com/mahmoudzakaria90/vue-currency-directive
currency javascript vue vue-currency-directive
Last synced: about 1 month ago
JSON representation
Simple, quick custom directive for handling currency format inside text inputs.
- Host: GitHub
- URL: https://github.com/mahmoudzakaria90/vue-currency-directive
- Owner: mahmoudZakaria90
- License: mit
- Created: 2020-08-19T14:47:28.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-11-04T21:59:28.000Z (about 2 years ago)
- Last Synced: 2024-11-27T15:17:34.520Z (about 1 month ago)
- Topics: currency, javascript, vue, vue-currency-directive
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/vue-currency-directive
- Size: 244 KB
- Stars: 6
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: contributing.md
- License: LICENSE
Awesome Lists containing this project
README
# Vue-currency-directive
Simple, quick custom directive for handling currency format inside text inputs.
[](https://travis-ci.com/mahmoudZakaria90/vue-currency-directive)
[](https://www.npmjs.com/package/vue-currency-directive)
[](https://npmcharts.com/compare/vue-currency-directive)
[](https://www.npmjs.com/package/vue-currency-directive)
Compatible with Vue 2.x
- Demo/Playground
- Installation
- Usage
- Global registration
- Local registration
- Dynamic arguments
- Examples
# Installation
`npm i vue-currency-directive || yarn add vue-currency-directive`
# Usage
- Register in your `data()` a main state object e.g. `amount` and inside it 2 main properties `value` and `formatted`.
- You mainly get 2 outputs: one for **the unformatted/original** value and the other for **the formatted value**.
- Valid values for currency `USD`, `EUR`, `GBP`, `EGP`, `SAR`, for more [Currency Codes (ISO 4217 Standard)](https://www.techonthenet.com/js/currency_codes.php).
- Valid values for locale `en-US`, `de-DE`, `fr-FR`, `ar-EG`, `ar-SA`, for more [List of locales](https://www.w3schools.com/JSREF/jsref_tolocalestring_number.asp).
## In DOM/Single-file-component
`|[, ,]="">`
```
v-currency="amount.value"
v-currency:EUR="amount.value"
v-currency:EUR|[1,2,(en-GB)]="amount.value"
```
For example:
```
...
export default {
data(){
return {
amount: { // naming is not strict 'amount, foo, bar, ...etc'
value: '',
formatted: '' // Better to be empty
},
foo: {
value: '',
formatted: '' // Better to be empty
},
bar: {
value: '',
formatted: '' // Better to be empty
}
}
}
}
...
```
## With a Component/controlled input
```
const CurrencyInput = {
template: '',
}
// In DOM/Single-file-component
```
**Note**: in case you are using a multiple or a group of different inputs with different types and you are not sure that the currency input is going to be indexed as the first item then you could pass a class name `.v-currency-input` other than that if it's going to be the only or the first input in the group then you don't have to.
## Global registration
```
import Vue from 'vue';
import vueCurrencyDirective from 'vue-currency-directive';
Vue.directive('currency', vueCurrencyDirective);
```
## Local registration
```
import vueCurrencyDirective from 'vue-currency-directive';
export default {
...
data(){
amount: {
value: '',
formatted: '' // Better to be empty
},
},
directives: {
currency: vueCurrencyDirective
},
...
}
```
# Dynamic arguments
In case you want to handle arguments in more dynamic way based on data changes and not sticking with a specific `currency` and `locale`, just add 2 more state inputs `currency` and `locale` inside the parent object e.g. `amount` in our case and remove any directive args e.g.`:EUR[de-DE]` from the component and vice-versa:
```
//Currency selector
USD
EUR
GBP
//Locale selector
US
DE
GB
...
export default {
data(){
return {
amount: { // naming is not strict 'amount, foo, bar, ...etc'
value: '',
currency: '',
locale: '',
formatted: '' // Better to be empty
}
}
}
}
...
```
## Examples
Passing no arguments will reflect to `USD` currency by default and for locale it will use the configured browser language.
```
// amount.value = 3244
//Output: $3,244.00
```
Passing currency argument only without locale.
```
// amount.value = 100234
//Output: €100,234.00
```
Passing with locale argument and different currency.
```
// amount.value = 554342
//Output: ٥٥٤٬٣٤٢٫٠٠ ج.م.
```