filters

Installation

npm i @ui-toolkit/filters

import Vue from 'vue';
import { date, simpleDate, currency, phone } from '@ui-toolkit/filters';

const filters = { date, simpleDate, currency, phone };

Object.keys(filters).forEach(key => {
  Vue.filter(key, filters[key]);
});

All filters have input and output. They are strictly transformative and have no side effects. They should never change the data passed into them.

Date Filters

All date filters have a parameter of type boolean that indicates that date should be formatted based on UTC. For example, 2019-07-31T08:00:00 would be 8:00 AM formatted normally, however if formatted for UTC it would be 3:00 AM. Most of our server timestamps are saved in UTC, so this is helpful when the user needs to see relative to them-self what time something occurred.

date

Input type: string

{{ '2019-07-31T08:00:00' | date }}

// Wed, Jul 31, 2019

dateTime

Input type: string

{{ '2019-07-31T08:00:00' | date }}

// 07/31/2019 at 8:00 AM

simpleDate

Input type: string

{{ '2019-07-31T08:00:00' | simpleDate }}

// 07/31/2019

easyDate

Input type: string

{{ '2019-07-31T08:00:00' | easyDate }}

// Jul 31st

easyDateWithYear

Input type: string

{{ '2019-07-31T08:00:00' | easyDateWithYear }}

// Jul 31st, 2019

readableDate

Input type: string

{{ '2019-07-31T08:00:00' | readableDate }}

// Jul 31st, 8:00

readableDateWithYear

Input type: string

{{ '2019-07-31T08:00:00' | readableDateWithYear }}

// Jul 31st, 8:00, 2019

fullReadableDate

Input type: string

{{ '2019-07-31T08:00:00' | fullReadableDate }}

// Wed, Jul 7th, 2019 at 8:00 AM

With the UTC option

{{ '2019-07-31T08:00:00' | date(true) }}

// 07/31/2019 at 3:00 AM

Currency Filter

currency

Input type: number

Currency has one parameter, an optional configuration object with two fields. One parameter is locale, a BCP 47 language tag that defaults to "en-US", and the second is currency which is the ISO 4217 currency code and must be provided.

{{ 14 | currency({ currency: 'USD' }) }}

// $14.00

{{ 36.25 | currency({ currency: 'EUR' }) }}

// €36.25

Phone Filter

phone

Input type: number or string

The phone filter currently only supports ten digit phone numbers. Anything else will simply return unformatted.

{{ 1234567890 | phone }}

// 123-456-7890

{{ '1234567890' | phone }}

// 123-456-7890

Too many digits

{{ '12345678901' | phone }}

// 12345678901

Not enough digits

{{ '123456789' | phone }}

// 123456789