https://github.com/panteng/vue-filters-kit

A collection of useful custom filters for Vue.js(v2.x.x) apps.
https://github.com/panteng/vue-filters-kit

filter formatter vuejs

Last synced: 3 days ago
JSON representation

A collection of useful custom filters for Vue.js(v2.x.x) apps.

• Host: GitHub
• URL: https://github.com/panteng/vue-filters-kit
• Owner: panteng
• Created: 2016-03-02T09:28:26.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2018-10-14T13:33:58.000Z (about 6 years ago)
• Last Synced: 2024-05-16T01:02:19.977Z (6 months ago)
• Topics: filter, formatter, vuejs
• Language: HTML
• Homepage:
• Size: 150 KB
• Stars: 122
• Watchers: 10
• Forks: 21
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Vue-Filters-Kit

A collection of useful custom filters for Vue.js(v2.x.x) apps.

## Demo

[Click Here](https://panteng.github.io/vue-filters-kit/)

This demo uses Bootstrap.css for styling. But you should know that no stylesheets are needed for using these filters in your webapps.

## Filters

For now, vue-filters-kit contains 4 custom filters.

1. [Boolean Formatter](#boolean-formatter) - converts boolean values into human-readable texts, eg: true-->YES, 0-->Disabled.

2. [Byte Formatter](#byte-formatter) - converts bytes to kilobytes or megabytes or gigabytes or terabytes, eg: 1000000-->976.56K.

3. [Percentage Formatter](#percentage-formatter) - converts numbers into percentage, eg: 0.1567-->15.67%.

4. [Timestamp Formatter](#timestamp-formatter) - converts timestamps into human-readable time, eg: 1456989887000-->Thursday, March 3rd, 2016

## Getting Started

1. Install via npm:

        npm install vue-filters-kit --save

2. Register these filters in your Vue.js app:

        const App = new Vue({

            el: '#app',

            // register filters

            filters: {

                booleanFormat: require('vue-filters-kit/filters/booleanFormatter'),

                percentageFormat: require('vue-filters-kit/filters/percentageFormatter'),

                byteFormat: require('vue-filters-kit/filters/byteFormatter'),

                timestampFormat: require('vue-filters-kit/filters/timestampFormatter')

            }

        });

## Usage

#### Boolean Formatter

`{{ rawValue | booleanFormat([trueText], [falseText]) }}`

`[trueText]` is the text that will show if rawValue equals to true.

`[falseText]` is the text that will show if rawValue equals to false.

For example:

    {{ isActive | booleanFormat('Yes', 'No') }}

If `isActive` equals to true, the rendered html will be:

    Yes

Else if `isActive` equals to false, the result will will be:

    No

By default, `[trueText]` is 'Yes' and `[falseText]` is 'No'.

#### Byte Formatter

`{{ rawValue | byteFormat }}`

`rawValue` is a number whose unit is byte.

For example:

    {{ size | byteFormat }}

If `size` equals to 1000000, the rendered html will be:

    976.56 K

#### Percentage Formatter

`{{ rawValue | percentageFormat([digit]) }}`

`[digit]` is the number of digits to keep after decimal.

For example:

    {{ ratio | percentageFormat(4) }}

    {{ ratio | percentageFormat(2) }}

If `ratio` equals to 0.15666666, the rendered html will be:

    15.6667%

    15.67%

By default, `[digit]` is 2.

#### Timestamp Formatter

Timestamp Formatter depends on [Moment.js](http://momentjs.com/). Make sure you have installed Moment.js via NPM.

`{{ rawValue | timestampFormat([format]) }}`

`rawValue` is a timestamp in milliseconds.

`[format]` is the format of the output time string.

For example:

    {{ startTime | timestampFormat('YYYY/MM/DD') }}

If `startTime` equals to 1456989887000, the rendered html will be:

    2016/03/03

By default, `[format]` is 'YYYY-MM-DD HH:mm:ss'. You can see more about `[format]` in [Moment.js Documentation](http://momentjs.com/docs/#/parsing/string-format/).

## License

MIT