All Projects → mazipan → Vue Currency Filter

mazipan / Vue Currency Filter

Licence: mit
🍒 Lightweight vue currency filter based on accounting.js

Programming Languages

typescript
32286 projects

Labels

Projects that are alternatives of or similar to Vue Currency Filter

X Blog
个人博客
Stars: ✭ 197 (-12.83%)
Mutual labels:  vue2
V Selectpage
SelectPage for Vue2, list or table view of pagination, use tags for multiple selection, i18n and server side resources supports
Stars: ✭ 211 (-6.64%)
Mutual labels:  vue2
V Bar
The virtual responsive crossbrowser scrollbar component for VueJS 2x
Stars: ✭ 216 (-4.42%)
Mutual labels:  vue2
At Ui
A fresh and flat UI-Kit specially for desktop application, made with ♥ by Vue.js 2.0 (DEPRECATED)
Stars: ✭ 2,336 (+933.63%)
Mutual labels:  vue2
Easy Dnd
A drag and drop implementation for Vue.js 2 https://codesandbox.io/s/easy-dnd-demo-9mbij https://codesandbox.io/s/easy-dnd-demo-2-xnqbz
Stars: ✭ 202 (-10.62%)
Mutual labels:  vue2
Bilibili Vue
前端vue+后端koa,全栈式开发bilibili首页
Stars: ✭ 2,590 (+1046.02%)
Mutual labels:  vue2
Parrot Mocker Web
Simple web server to forward received requests to real servers or just mock
Stars: ✭ 194 (-14.16%)
Mutual labels:  vue2
Vuetheme
WordPress theme using Rest API and Vue.js
Stars: ✭ 219 (-3.1%)
Mutual labels:  vue2
Vue2.0 Multi Page
基于vue-cli(vue2.X,webpack1.X,es6,sass环境)多页面开发
Stars: ✭ 206 (-8.85%)
Mutual labels:  vue2
Vue Tinymce Editor
This a component provides use of tinymce for vue developers
Stars: ✭ 216 (-4.42%)
Mutual labels:  vue2
Heyui
🎉UI Toolkit for Web, Vue2.0 http://www.heyui.top
Stars: ✭ 2,373 (+950%)
Mutual labels:  vue2
Vue Impression
A Vue.js 2.0 UI elements for mobile.
Stars: ✭ 205 (-9.29%)
Mutual labels:  vue2
Imitate One
用vue+webpack + node仿制的One[一个 ]app
Stars: ✭ 216 (-4.42%)
Mutual labels:  vue2
Vue Node Pastime
😄 基于vue全家桶、nodejs和mongodb的前后端整合项目
Stars: ✭ 200 (-11.5%)
Mutual labels:  vue2
Vue Emoji Picker
Very simple, yet powerful, vue emoji picker 🎉🔥🚀
Stars: ✭ 218 (-3.54%)
Mutual labels:  vue2
Vx Ui
vue components 移动端UI组件库
Stars: ✭ 194 (-14.16%)
Mutual labels:  vue2
Amaze Vue
一只基于amazeui样式封装的vue组件库。万水千山总是情,点个star再走行不行~~~
Stars: ✭ 211 (-6.64%)
Mutual labels:  vue2
Vuemmerce
👉 Responsive ecommerce template 🛒 built with Vue.js and Nuxt.js
Stars: ✭ 223 (-1.33%)
Mutual labels:  vue2
Vuex Feature Scoped Structure
📈 Feature scoped Vuex modules to have a better organization of business logic code inside Vuex modules based on Large-scale Vuex application structures @3yourmind
Stars: ✭ 218 (-3.54%)
Mutual labels:  vue2
Vue Axios
封装axios
Stars: ✭ 215 (-4.87%)
Mutual labels:  vue2

🍒 Vue Currency Filter

Vue Currency Logo

Lightweight vue currency filter based on accounting.js

NPM Version Bundlephobia Size 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!

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].