vue-currency-filter

WebJar for vue-currency-filter

License

License

MIT
Categories

Categories

Github Development Tools Version Controls
GroupId

GroupId

org.webjars.npm
ArtifactId

ArtifactId

github-com-mazipan-vue-currency-filter
Last Version

Last Version

3.4.2
Release Date

Release Date

Type

Type

jar
Description

Description

vue-currency-filter
WebJar for vue-currency-filter
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

https://github.com/mazipan/vue-currency-filter

Download github-com-mazipan-vue-currency-filter

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.npm/github-com-mazipan-vue-currency-filter/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>github-com-mazipan-vue-currency-filter</artifactId>
    <version>3.4.2</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.npm/github-com-mazipan-vue-currency-filter/
implementation 'org.webjars.npm:github-com-mazipan-vue-currency-filter:3.4.2'
// https://jarcasting.com/artifacts/org.webjars.npm/github-com-mazipan-vue-currency-filter/
implementation ("org.webjars.npm:github-com-mazipan-vue-currency-filter:3.4.2")
'org.webjars.npm:github-com-mazipan-vue-currency-filter:jar:3.4.2'
<dependency org="org.webjars.npm" name="github-com-mazipan-vue-currency-filter" rev="3.4.2">
  <artifact name="github-com-mazipan-vue-currency-filter" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.npm', module='github-com-mazipan-vue-currency-filter', version='3.4.2')
)
libraryDependencies += "org.webjars.npm" % "github-com-mazipan-vue-currency-filter" % "3.4.2"
[org.webjars.npm/github-com-mazipan-vue-currency-filter "3.4.2"]

Dependencies

compile (1)

Group / Artifact Type Version
org.webjars.npm » accounting jar [0.4.1]

Project Modules

There are no modules declared in this project.

๐Ÿ’ Vue Currency Filter

Vue Currency Logo

Lightweight vue currency filter based on accounting.js

NPM Version Bundlephobia Size Download All Time Travis Build All Contributors

Bundle Size

Demo

https://mazipan.github.io/vue-currency-filter/

Download

# 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

import VueCurrencyFilter from 'vue-currency-filter'

Use Plugins

Vue.use(VueCurrencyFilter)

Add Global Configuration

Vue.use(VueCurrencyFilter,
{
  symbol : '$',
  thousandsSeparator: '.',
  fractionCount: 2,
  fractionSeparator: ',',
  symbolPosition: 'front',
  symbolSpacing: true,
  avoidEmptyDecimals: undefined,
})

Add Multiple Instance

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

<span>{{ 20000 | currency}}</span>

Usage in Nuxt.js

Add vue-currency-filter/nuxt to modules section of nuxt.config.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

{
  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

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

<!-- Vue Dependency -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/vue-currency-filter"></script>

Use filters in global

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 for code sample.

Add Configuration In Specific Place

<span>
{{ textInput | currency(configSymbol, configSeparator, configFractionCount,
configFractionSeparator, configSymbolPosition, configSymbolSpacing)}}
</span>

Now configurations is also available as Object, thanks to sunhengzhe in PR #25:

<span>
{{ textInput | currency({
  symbol: '',
  thousandsSeparator: '',
  fractionCount: '',
  fractionSeparator: '',
  symbolPosition: '',
  symbolSpacing: '',
  avoidEmptyDecimals: undefined,
})}}
</span>

Available Options

{
  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:

/* 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

Contributing

If you'd like to contribute, head to the contributing guidelines. Inside you'll find directions for opening issues, coding standards, and notes on development.

Credits

  • Vue for amazing framework
  • Jetbrain for amazing support with free license for WebStorm IDE
  • @iqbalhood as logo creator (see #19)

Support me

Hope this will be useful for you all

Copyright ยฉ 2017 Built with โค๏ธ by Irfan Maulana

Contributors

Thanks goes to these wonderful people (emoji key):


Irfan Maulana

๐Ÿ’ป

iqbalhood

๐ŸŽจ

ๅญ™ๆ’ๅ“ฒ

๐Ÿ’ป

Ricardo Gobbo de Souza

๐Ÿ’ป

Yashodhan Singh Rathore

๐Ÿ’ป

Gijs Rogรฉ

๐Ÿ’ป

Ivan Sysa

๐Ÿ’ป

Nicola Cordioli

๐Ÿ’ป

This project follows the all-contributors specification. Contributions of any kind welcome!

Versions

Version
3.4.2