Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mazipan/vue-currency-filter
🍒 Lightweight vue currency filter based on accounting.js
https://github.com/mazipan/vue-currency-filter
vue vue-currency vue-currency-filter vue-filter-currency vue-filters vue2
Last synced: 29 days ago
JSON representation
🍒 Lightweight vue currency filter based on accounting.js
- Host: GitHub
- URL: https://github.com/mazipan/vue-currency-filter
- Owner: mazipan
- License: mit
- Archived: true
- Created: 2017-07-31T11:41:50.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2021-08-20T22:27:04.000Z (over 3 years ago)
- Last Synced: 2024-08-08T23:15:01.872Z (4 months ago)
- Topics: vue, vue-currency, vue-currency-filter, vue-filter-currency, vue-filters, vue2
- Language: TypeScript
- Homepage: https://mazipan.github.io/vue-currency-filter/
- Size: 12.4 MB
- Stars: 247
- Watchers: 7
- Forks: 29
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- oss - Vue Currency Filter - Lightweight vue currency filter based on accounting.js - Vue, Currency, Accounting (Open Source Project / Utility)
README
# 🍒 Vue Currency Filter
Lightweight vue currency filter based on accounting.js
## Demo
[https://mazipan.github.io/vue-currency-filter/](https://mazipan.github.io/vue-currency-filter/)
## Download
```bash
# NPM
npm install vue-currency-filter# Yarn
yarn add vue-currency-filter
```## Sample Usage
Step by step to using `vue-currency-filter`:
### Import in `main.js`
```javascript
import VueCurrencyFilter from 'vue-currency-filter'
```### Use Plugins
```javascript
Vue.use(VueCurrencyFilter)
```### Add Global Configuration
```javascript
Vue.use(VueCurrencyFilter,
{
symbol : '$',
thousandsSeparator: '.',
fractionCount: 2,
fractionSeparator: ',',
symbolPosition: 'front',
symbolSpacing: true,
avoidEmptyDecimals: undefined,
})
```### Add Multiple Instance
```javascript
Vue.use(VueCurrencyFilter, [
{ // default name 'currency'
symbol: '$',
thousandsSeparator: ',',
fractionCount: 2,
fractionSeparator: '.',
symbolPosition: 'front',
symbolSpacing: true,
avoidEmptyDecimals: '',
},
{ // default name 'currency_2'
name: 'currency_2',
symbol: 'usd',
thousandsSeparator: ' ',
fractionCount: 2,
fractionSeparator: '.',
symbolPosition: 'front',
symbolSpacing: false,
avoidEmptyDecimals: '--',
}
])
```### Use in View
```html
{{ 20000 | currency}}
```### Usage in Nuxt.js
Add `vue-currency-filter/nuxt` to modules section of `nuxt.config.js`
```js
{
modules: [
'vue-currency-filter/nuxt',// Or if you have custom options...
['vue-currency-filter/nuxt', {
symbol: '$',
thousandsSeparator: ',',
fractionCount: 2,
fractionSeparator: '.',
symbolPosition: 'front',
symbolSpacing: true,
avoidEmptyDecimals: undefined,
}],// for multiple instance
['vue-currency-filter/nuxt', [
{ // default name 'currency'
symbol: '$',
thousandsSeparator: ',',
fractionCount: 2,
fractionSeparator: '.',
symbolPosition: 'front',
symbolSpacing: true,
avoidEmptyDecimals: '##',
},
{ // default name 'currency_2'
name: 'currency_2',
symbol: 'usd',
thousandsSeparator: ' ',
fractionCount: 2,
fractionSeparator: '.',
symbolPosition: 'front',
symbolSpacing: false,
avoidEmptyDecimals: '',
}
]],
]
}
```
or using external options
```js
{
modules: [
'vue-currency-filter/nuxt'
]
currencyFilter: [
{ // default name 'currency'
symbol: '$',
thousandsSeparator: ',',
fractionCount: 2,
fractionSeparator: '.',
symbolPosition: 'front',
symbolSpacing: true,
avoidEmptyDecimals: '',
},
{ // default name 'currency_2'
name: 'currency_2',
symbol: 'usd',
thousandsSeparator: ' ',
fractionCount: 2,
fractionSeparator: '.',
symbolPosition: 'front',
symbolSpacing: false,
avoidEmptyDecimals: '##',
}
]
// or for one filter
currencyFilter: { // default name 'currency'
symbol: '$',
thousandsSeparator: ',',
fractionCount: 2,
fractionSeparator: '.',
symbolPosition: 'front',
symbolSpacing: true,
avoidEmptyDecimals: undefined,
}
}
```### Usage in Nuxt-typescript
you must add declaration for vue and nuxt context if you want autocomplete in methods
create file `vue-currency-filters.ts` in directory with your types
```ts
import { CurrencyFilterMethodInstance } from "vue-currency-filter/src/types";declare module 'vue/types/vue' {
interface Vue {
$currency: CurrencyFilterMethodInstance,
$currency_2: CurrencyFilterMethodInstance
}
}declare module '@nuxt/types' {
interface NuxtAppOptions {
$currency: CurrencyFilterMethodInstance,
$currency_2: CurrencyFilterMethodInstance
}
}
```### Usage without NPM
Add script dependencies
```html
```
Use filters in global
```js
if (VueCurrencyFilter) {
Vue.use(VueCurrencyFilter, {
symbol: "£",
thousandsSeparator: ",",
fractionCount: 0,
fractionSeparator: ".",
symbolPosition: "front",
symbolSpacing: false,
avoidEmptyDecimals: '',
})
}var app = new Vue({
el: '#app',
data: {
curr: 1000
}
});```
See [https://codepen.io/mazipan/pen/YdmNMy](https://codepen.io/mazipan/pen/YdmNMy) for code sample.
### Add Configuration In Specific Place
```html
{{ textInput | currency(configSymbol, configSeparator, configFractionCount,
configFractionSeparator, configSymbolPosition, configSymbolSpacing)}}
```**Now configurations is also available as Object**, thanks to [sunhengzhe](https://github.com/sunhengzhe) in [PR #25](https://github.com/mazipan/vue-currency-filter/pull/25/commits/052a741644556f4d1140e7b7e1ba96a8e2c0d015):
```html
{{ textInput | currency({
symbol: '',
thousandsSeparator: '',
fractionCount: '',
fractionSeparator: '',
symbolPosition: '',
symbolSpacing: '',
avoidEmptyDecimals: undefined,
})}}
```## Available Options
```javascript
{
name: 'string (default: currency)', // using for multiple instance filters
symbol: 'string (default : empty string)',
thousandsSeparator: 'string (default : .)',
fractionCount: 'number (default : 0)',
fractionSeparator: 'string (default: ",")',
symbolPosition: 'string (default: front)',
symbolSpacing: 'boolean (default: true)',
avoidEmptyDecimals: 'string (default: undefined)',
}
```## How to test in Unit Test
Using `@vue/test-utils` we can create test for any Vue Plugins, like:
```js
/* eslint-env jest */
import { shallowMount, createLocalVue } from "@vue/test-utils";
import VueCurrencyFilter from "vue-currency-filter";import Component from "../pages/myComponent.vue";
describe("test myComponent", () => {
it("vue-currency-filter should working correctly", () => {
const localVue = createLocalVue();
localVue.use(VueCurrencyFilter, {
symbol: "$",
thousandsSeparator: ",",
fractionCount: 2,
fractionSeparator: ".",
symbolPosition: "front",
symbolSpacing: true,
avoidEmptyDecimals: undefined,
});let wrapper = shallowMount(Component, {
localVue
});const result = wrapper.find(".curr");
expect(result.text()).toEqual("$ 1,000.00");
localVue.use(VueCurrencyFilter, {
symbol: "$",
thousandsSeparator: ",",
fractionCount: 2,
fractionSeparator: ".",
symbolPosition: "front",
symbolSpacing: true,
avoidEmptyDecimals: '',
});wrapper = shallowMount(Component, {
localVue
});const result = wrapper.find(".curr");
expect(result.text()).toEqual("$ 1,000");
localVue.use(VueCurrencyFilter, {
symbol: "$",
thousandsSeparator: ",",
fractionCount: 2,
fractionSeparator: ".",
symbolPosition: "front",
symbolSpacing: true,
avoidEmptyDecimals: '##',
});wrapper = shallowMount(Component, {
localVue
});const result = wrapper.find(".curr");
expect(result.text()).toEqual("$ 1,000.##");
});
});
```See sample test here: [https://codesandbox.io/s/6xk1mv694n](https://codesandbox.io/s/6xk1mv694n)
## Contributing
If you'd like to contribute, head to the [contributing guidelines](/CONTRIBUTING.md). Inside you'll find directions for opening issues, coding standards, and notes on development.
## Credits
- [Vue](https://vuejs.org) for amazing framework
- [Jetbrain](https://www.jetbrains.com/?from=vue-currency-filter) for amazing support with free license for WebStorm IDE
- [@iqbalhood](https://github.com/iqbalhood) as logo creator (see [#19](https://github.com/mazipan/vue-currency-filter/issues/19))[](https://www.jetbrains.com/?from=vue-currency-filter)
## Support me
- 👉 🇮🇩 [Trakteer](https://trakteer.id/mazipan?utm_source=github)
- 👉 🌍 [BuyMeACoffe](https://www.buymeacoffee.com/mazipan?utm_source=github)
- 👉 🌍 [Paypal](https://www.paypal.me/mazipan?utm_source=github)
- 👉 🌍 [Ko-Fi](https://ko-fi.com/mazipan)## Hope this will be useful for you all
Copyright © 2017 Built with ❤️ by Irfan Maulana
## Contributors
Thanks goes to these wonderful people ([emoji key](https://github.com/all-contributors/all-contributors#emoji-key)):
Irfan Maulana
💻
iqbalhood
🎨
孙恒哲
💻
Ricardo Gobbo de Souza
💻
Yashodhan Singh Rathore
💻
Gijs Rogé
💻
Ivan Sysa
💻
Nicola Cordioli
💻
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!