vue-common-filters

Collection of most used filter in projects.

Contribution

If you found a bug, want to request a feature or want to contribute, create issue or submit pull request

Installation

Install via npm npm install vue-common-filters

Download repo git clone https://github.com/epicbg/vue-common-filters.git

import Vue from 'vue'
import VueCommonFilters from 'vue-common-filters'
 
// THESE ARE ALL OPTIONS YOU CAN CUSTOMIZE
// YOU ARE NOT REQUIRED TO COPY ALL THESE OPTIONS
// YOU CAN PASS EMPTY OR NO OPTIONS AT ALL
 
let config = {
    "currency": {
        "symbol": "$",
        "decimalDigits": 2,
        "symbolOnLeft": true,
        "spaceBetweenAmountAndSymbol": false
    },
 
    "text": {
        "truncateClamp": "..."
    },
 
    "numbers": {
        "decimalDigits": 2
    },
 
    "array": {
        "implodeDelimiter": ", "
    },
 
    "dates": {
        "defaultFormat": "YYYY-MM-DD HH:mm:ss",
        "filterConvertFormat": "DD MMMM YYYY"
    }
}
 
Vue.use(VueCommonFilters, config)

Usage

Text filters

truncate

Arguments:

{Number} [length] {string} [clamp] - default: '...'

Example:

{{ string | truncate(3) }} // 'hello world' => 'hel...'

trim

Example:

{{ string | trim }} // removes spaces from string

capitalize

Example:

{{ string | capitalize }} // 'george' => 'George'

uppercase / lowercase

Example:

{{ string | uppercase }} // 'hey' => 'HEY'

{{ string | lowercase }} // 'HEY' => 'hey'

placeholder

Example:

{{ string | placeholder('no data yet') }} // null || false => 'no data yet'

Array / object filters

implode

Arguments:

{string} [delimiter] - default: ', '

Example:

{{ array | implode }} // ['Danny', 'Bobby', 'Mima'] => Danny, Boby, Mima
{{ array | implode('and') }} // ['Danny', 'Bobby', 'Mima'] => Danny and Boby and Mima

implodeObjects

Arguments:

{string} [key] {string} [delimiter] - default: ', '

Example:

{{ users | implodeObjects('name') }} // [{id: 1, name:'Danny'}, {id: 2, name:'Bobby'}] => Danny, Bobby
{{ users | implodeObjects('name', ' and ') }} // [{id: 1, name:'Danny'}, {id: 2, name:'Bobby'}] => Danny and Bobby

search

Searches all fields (inside array of objects) for a match with passed [key]

Arguments:

{string} [key]

Example:

{{ users | search('Danny') | implodeObjects('name') }} 
// [{name:'Danny Miller'}, {name:'Danny Grande'}, {name:'Bobby Miller'}]
//  => Danny Miller, Bobby Miller 

Date filters

Examples are shown in default YYYY-MM-DD HH:mm:ss. If you have different format you can change it from the config as shown in installation section

This packages uses moment and if you want to change the locale you can do it like so:

moment.locale('en')

formatDate

Arguments:

{string} [format] - default: DD MMMM YYYY

Example:

{{ date | formatDate('DD MMMM') }} // '2018-02-01' => '1 February'
{{ date | formatDate }} // '2018-02-01' => '1 February 2019'

fromNow

{{ date | fromNow }} // '2019-02-01' => '8 months ago'

from

Arguments:

{string} [from]

Example:

{{ date | from('2019-07-02') }} // '2019-07-01' => '1 year ago'

to

Arguments:

{string} [to]

Example:

{{ date | to('2019-07-01') }} // '2019-06-01' => 'in 1 month'

add / subtract

Arguments:

{number} [number] {string} [type]

Example:

{{ date | add(2, 'days') }} // '2019-06-01' => '2019-06-03'
{{ date | subtract(2, 'days') }} // '2019-06-03' => '2019-06-01'

Number filters

decimal

Arguments:

{Number} [length] - default: 2

Example:

// '1' => '1.00'
// '1.2' => '1.20'
{{ coefficient | decimal }} 

currency

Arguments:

{string} [symbol] - default: $ {Number} [decimalDigits] - default: 2 {Boolean} [symbolOnLeft] - default: true {Number} [spaceBetweenAmountAndSymbol] - default: true

Example:

{{ amount | currency }} // 12 => '$ 12.00'
{{ amount | currency('EUR', 2, false) }} // 12 => 12.00 EUR

You can change the defaults from settings, as shown in installation section

Programatic Usage

using functions

this.$options.filters.filterName(value)

this.$options.filters.currency(10) => '$ 10.00'
this.$options.filters.search([{}, {}..])

changing settings

import vueCommonFilters from 'vue-common-filters'
 
// Pass options which u want to customize, no need to pass the whole settings object
vueCommonFilters.config = {
    currency: {
        symbol: 'EUR'
    }
}

License

MIT License

Copyright (c) 2019 EpicWeb