vue2-filter-list

v1.0.9

Published

2 years ago

Prebuilt Vue.js filters

Downloads

0High
0Medium
0Low

18chetanpatel

filter filters vue lodash vuejs vue-filter-list vue2-filters

Vue2-filter-list

Prebuilt filters for Vue.js

Get Started

NPM

npm install vue2-filter-list

When used with a module system, you must explicitly install the filters via Vue.use():

import Vue from 'vue'
import VueFilterList from 'vue2-filter-list'

Vue.use(VueFilterList)

You don't need to do this when using global script tags.

To use one of the predefined methods (such as limitBy, filterBy, find, or orderBy) in your component, you also need to add Vue2Filters.mixin to mixin list:

import VueFilterList from 'vue2-filter-list'

export default {
  ...
  mixins: [VueFilterList.mixin],
  ...
}

Collection

after

get a collection(array or object) and specified count, and returns all of the items in the collection after the specified count.

collection : [
    { name: 'foo' },
    { name: 'bar' },
    { name: 'baz' },
    { name: 'zap' },
  ]

<tr v-for="col in after(collection,2)">
  {{ col.name }}
</tr>
<!--result:
  baz
  zap
-->

afterWhere

get a collection and properties object, and returns all of the items, in the collection after the first that found with the given properties, including it.

orders : [
  { id: 1, customer: { name: 'foo' }, date: 'Tue Jul 15 2014' },
  { id: 2, customer: { name: 'foo' }, date: 'Tue Jul 16 2014' },
  { id: 3, customer: { name: 'foo' }, date: 'Tue Jul 17 2014' },
  { id: 4, customer: { name: 'foo' }, date: 'Tue Jul 18 2014' },
  { id: 5, customer: { name: 'foo' }, date: 'Tue Jul 19 2014' }
]

<tr v-for="order in afterWhere(orders,{date: 'Tue Jul 17 2014'})">
  order: {{ order.id }}, {{ order.date }}
</tr>
<!--result:
  order: 3, Tue Jul 17 2014
  order: 4, Tue Jul 18 2014
  order: 5, Tue Jul 19 2014
-->

before

get a collection(array or object) and specified count, and returns all of the items in the collection before the specified count.

collection : [
    { name: 'foo' },
    { name: 'bar' },
    { name: 'baz' },
    { name: 'zap' },
  ]

<tr v-for="col in before(collection,3)">
  {{ col.name }}
</tr>
<!--result:
  foo
  bar
-->

beforeWhere

get a collection and properties object, and returns all of the items, in the collection before the first that found with the given properties, including it.

orders : [
  { id: 1, customer: { name: 'foo' }, date: 'Tue Jul 15 2014' },
  { id: 2, customer: { name: 'foo' }, date: 'Tue Jul 16 2014' },
  { id: 3, customer: { name: 'foo' }, date: 'Tue Jul 17 2014' },
  { id: 4, customer: { name: 'foo' }, date: 'Tue Jul 18 2014' },
  { id: 5, customer: { name: 'foo' }, date: 'Tue Jul 19 2014' }
]

<tr v-for="order in beforeWhere(orders,{date: 'Tue Jul 17 2014'})">
  order: {{ order.id }}, {{ order.date }}
</tr>
<!--result:
  order: 1, Tue Jul 15 2014
  order: 2, Tue Jul 16 2014
  order: 3, Tue Jul 17 2014
-->

concat

Concatenates an array/object into another one.

array : [ {a: 1}, {a: 2} ],
object : {
    0: {a: 3},
    1: {a: 4}
  }

<li v-for="elm in concat(array,object)">
  {{ elm.a }}
</li>

<!--
result:
1 2 3 4
-->

<li v-for="elm in concat(object,array)">
  {{ elm.a }}
</li>

<!--
result:
3 4 1 2
-->

filterBy

Arguments
- {Array} [items]
- {String} [query]
- {String} [searchKey]

<!-- only items that contain the target string "hello" will be displayed -->
<div v-for="item in filterBy(items, 'hello')">
<!-- the filter will only search for "Jack" in the name field of each user object -->
<div v-for="user in filterBy(users, 'Jack', 'name')">
<!-- the filter will only search for "Bonnie" in the name or age fields of each user object -->
<div v-for="user in filterBy(users, 'Bonnie', 'name', 'age')">

find

Arguments
- {Array} [items]
- {String} [query]
- {String} [searchKey]

<!-- only the first item that contains the target string "hello" will be displayed -->
<div v-for="item in find(items, 'hello')">
<!-- the filter will only search for "Bonnie" in the name or age fields of each user object and return the first result -->
<div v-for="user in find(users, 'Bonnie', 'name', 'age')">

flatten

Flattens a nested array (the nesting can be to any depth). If you pass shallow, the array will only be flattened a single level

weirdArray : [[], 1, 2, 3, [4, 5, 6, [7, 8, 9, [10, 11, [12, [[[[[13], [[[[14, 15]]]]]]]]]]]]]

<th v-for="elm in flatten(wierdArray)">
 {{ elm }},
</th>
<!--result:
1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15

fuzzy

fuzzy string searching(approximate string matching). Read more note: use fuzzyBy to filter by one property to improve performance Usage: fuzzy(collection,search,caseSensitive[optional])

books : [
  { title: 'The DaVinci Code', author: 'F. Scott Fitzgerald' },
  { title: 'The Great Gatsby', author: 'Dan Browns' },
  { title: 'Angels & Demons',  author: 'Dan Louis' },
  { title: 'The Lost Symbol',  author: 'David Maine' },
  { title: 'Old Man\'s War',   author: 'Rob Grant' }
]

<input type="text" v-model="search" placeholder="search book" />
<li v-for="book in fuzzy(books,search)">
  {{ book.title }}
</li>
<!--case sensitive-->
<li v-for="book in fuzzy(books,search,true)">
  {{ book.title }}
</li>

isEmpty

get collection or string and return if it empty[Boolean]

<tr v-for="order in orders" v-hide="orders | isEmpty">
<!-- ..... -->
</tr>
<!--some replacer msg-->
<tr v-show="orders | isEmpty">
  no content to show
</tr>

join

Joins the contents of a collection into a string. By default, it will join elements with a single space, but you can provide your own delimiter.

Example:

names : ['John', 'Sebastian', 'Will', 'James']

<p>{{ names | join(', ') }}</p>
<!-- Will print "John, Sebastian, Will, James" -->

limitBy

Arguments
- {Number|Array} [items]
- {Number} [limit]
- {Number} [offset]

<!-- only display first 10 items -->
<div v-for="item in limitBy(items, 10)">{{ item }}</div>
<!-- display items 5 to 15 -->
<div v-for="item in limitBy(items, 10, 5)">{{ item }}</div>
<!-- with a Range -->
<div v-for="n in limitBy(10, 4, 2)">{{ n }}</div>

orderBy

Arguments
- {Array} [items]
- {String} [sortKey]
- {Number} [order] - default: 1

Sort users by name:

<ul>
  <li v-for="user in orderBy(users, 'name')">
    {{ user.name }}
  </li>
</ul>

In descending order:

<ul>
  <li v-for="user in orderBy(users, 'name')">
    {{ user.name }}
  </li>
</ul>

Sort primitive values:

<ul>
  <li v-for="name in orderBy(names, true)">
    {{ name }}
  </li>
</ul>

range

Return a new collection from a given length, start, increment, and callback By default start is 0, increment is 1, and callback is null. Usage: range(collection,length,start,increment,callback)

<span v-for="i in range([],3)">{{i}},</span>
<!--result:
0,1,2,
-->

<span v-for="i in range([],10,10)">{{i}},</span>
<!--result:
10,11,12,13,14,15,16,17,18,19,
-->

<span v-for="i in range([],10,5,2)">{{ i }},</span>
<!--result:
5, 7, 9, 11, 13, 15, 17, 19, 21, 23
-->

<span v-for="i in range([],11,4,2)">{{ i }},</span>
<!--result:
4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24
-->

double(i) {
  return i * 2;
}

<span v-for="i in range(11,4,2,double)">{{ i }},</span>
<!--result:
8, 12, 16, 20, 24, 28, 32, 36, 40, 44, 48
-->

removeWith

comparison for each element in a collection to the given properties object, returning an array without all elements that have equivalent property values.

  collection : [
    { id: 1, name: 'foo' },
    { id: 1, name: 'bar' },
    { id: 2, name: 'baz' }
  ]

<tr v-for="obj in removeWith(collection,{ id: 1 })">
  {{ obj.name }}
</tr>
<!-- result:
  baz
-->

<tr v-for="obj in removeWith(collection,{ id: 1, name: 'foo' })">
  {{ obj.name }}
</tr>
<!-- result:
  bar
  baz

reverse

Reverse the order of the elements in a collection

users : [
  { id: 1, name: 'bazzy' },
  { id: 2, name: 'dazzy' },
  { id: 3, name: 'lazzy' }
]

<tr v-for="user in reverse(users)">
  user: {{ user.id }}, {{ user.name }}
</tr>
<!--result:
  user: 3, lazzy
  user: 2, dazzy,
  user: 1, bazzy
-->

where

comparison for each element in a collection to the given properties object, returning an array of all elements that have equivalent property values.

  collection : [
    { id: 1, name: 'foo' },
    { id: 1, name: 'bar' },
    { id: 2, name: 'baz' }
  ]

<tr v-for="obj in where(collection,{id: 1})">
  {{ obj.name }}
</tr>
<!-- result:
  foo
  bar
-->

<tr v-for="obj in where(collection,{id: 1, name: 'foo'})">
  {{ obj.name }}
</tr>
<!-- result:
  foo
  -->

String

ucfirst

ucfirstFilter get string as parameter and return it capitalized

<p> {{ 'foo bar baz' | ucfirst }}</p>

<!--
result:
Foo Bar Baz
-->

uppercase

uppercase get string as parameter and return it uppercase

<p> {{ 'foo bar baz' | uppercase }}</p>

<!--
result:
FOO BAR BAZ
-->

lowercase

lowercase get string as parameter and return it lowercase

<p> {{ 'Foo Bar Baz' | lowercase }}</p>

<!--
result:
foo bar baz
-->

uriEncode

get string as parameter and return encoded uri

{{ data.name | uriEncode }}

uriComponentEncode

get string as parameter and return encoded uri component

{{ 'Some&strange=chars' | uriComponentEncode }}

slugify

Transform text into a URL slug. Replaces whitespaces, with dash("-"), or given argument

{{ 'Some string with spaces' | slugify }}
<!--replace with given argument-->
{{ 'Some string with spaces' | slugify('=') }}
<!--
result:
some-string-with-spaces

some=string=with=spaces
-->

latinize

Remove accents/diacritics from a string

 {{ 'Sòme strÏng with Âccénts' | latinize }}
<!--
result:
  Some strIng with Accents
-->

startsWith

return whether string starts with the starts parameter. usage: string | startsWith('start',case-sensitive[optional])

 {{ 'Lorem ipsum' | startsWith('lorem') }}
 {{ 'Lorem Ipsum' | startsWith('lorem',true) }}
 <!--result:
  true
  false

endsWith

return whether string ends with the ends parameter. usage: string | endsWith('ends',case-sensitive[optional])

 {{ 'image.JPG' | endsWith('.jpg') }}
 {{ 'image.JPG' | endsWith('.jpg', true) }}
 <!--result:
  true
  false

stripTags

strip out html tags from string

text : '<p class="paragraph">Lorem Ipsum is simply dummy text of the printing...</p>'

<p>{{ text | stripTags }}</p>
<!--result:
Lorem Ipsum is simply dummy text of the printing...
-->

stringular

get string with {n} and replace match with enumeration values

<p>{{ 'lorem {0} dolor {1} amet' | stringular('ipsum','sit') }}</p>
<p>{{ '{3} {0} dolor {1} amet' | stringular('ipsum','sit',null,'lorem') }}</p>

<!-- result:
<p>lorem ipsum dolor sit amet</p>
<p>lorem ipsum dolor sit amet</p>
-->

<p>{{ 'lorem {0} dolor sit amet' | stringular }}<p>
<!--result:
<p>lorem {0} dolor sit amet</p>

phoneUS

Format a string or a number into a us-style phone number

<p>{{ 1234567890 | phoneUS }}</p>

<!--result:
<p>(123) 456-7890</p>

truncate

truncates a string given a specified length, providing a custom string to denote an omission. usage: string | truncate([length],[suffix-optional], [preserve-optinal])

text : 'lorem ipsum dolor sit amet'

<!--should not cut words in the middle if preserve is true-->
<p>{{ text | truncate(7, '...', true) }}</p>

<p>{{ text | truncate( 13, '...') }}</p>

<!--should not touch string that shorter than the provided length -->
<p>{{ text | truncate( 50, '...') }}</p>

<!--result:
lorem ipsum...
lorem ipsum d...
lorem ipsum dolor sit amet

split

truncates a string given a specified length, providing a custom string to denote an omission. usage: string | split([delimiter], [skip-optional])

text : 'lorem ipsum dolor sit amet'


<p>{{ text | split(' ') }}</p>

<p>{{ text | split(' ', 2)}}</p>

<!--result:
['lorem', 'ipsum', 'dolor', 'sit', 'amet']
['lorem ipsum dolor', 'sit', 'amet']

reverse

Reverses a string

text : 'lorem ipsum dolor sit amet'

<p>{{ text | reverse }}</p>
<!--result:
tema tis rolod muspi merol

wrap

Wrap a string with another string usage: string | wrap(string, string[optional])

<p>{{ 'foo' | wrap('/') }}</p>
<p>{{ 'foo' | wrap('{{', '}}') }}</p>
<!--result:
/foo/
{{foo}}

trim

Strip whitespace (or other characters) from the beginning and end of a string

<p>{{ '    foo   ' | trim }}</p>
<p>{{ 'foobarfoo' | trim('foo') }}
<!--result:
foo
bar

ltrim

Strip whitespace (or other characters) from the beginning of a string

<p>{{ 'barfoobar' | ltrim('bar') }}
<!--result:
foobar

rtrim

Strip whitespace (or other characters) from the end of a string

<p>{{ 'barfoobar' | rtrim('bar') }}
<!--result:
barfoo

repeat

Repeats a string n times Usage: string | repeat(n, separator[optional])

<p>{{ 'foo' | repeat(3, '-') }}</p>
<!--repeat:
foo-foo-foo

test

Test if a string match a pattern Usage: string | test(pattern, flag[optional])

<p>{{ '15/12/2003' | test('^[0-9]{2}[/]{1}[0-9]{2}[/]{1}[0-9]{4}$', 'i') }}</p>
<p>{{ '0123456' | test('\\D', 'i') }}</p>
<!--result:
true
true

match

Return an array of matched element in a string Usage: string | match(pattern, flag[optional])

<p>{{ '15/12/2003' | match('\\d+', 'g') }}</p>
<!--result:
['15', '12', '2003']

Math

max

max find and return the largest number in a given array. if an expression is provided, will return max value by expression. Usage: array | max(expression[optional])

users : [
  { user: { score: 988790 } },
  { user: { score: 123414 } },
  { user: { rank : 988999 } },
  { user: { score: 987621 } }
]

<p> {{ [1,2,3,4,7,8,9] | max }}</p>
<p> {{ users | max('user.score || user.rank') }}</p>
<!--
result:
* 9
* { user: { rank : 988999 } }

min

min find and return the lowest number in a given array. if an expression is provided, will return min value by expression. Usage: array | min(expression[optional])

users : [
  { user: { score: 988790 } },
  { user: { score: 123414 } },
  { user: { score: 987621 } }
]

<p> {{ [1,2,3,4,7,8,9] | min }}</p>
<p> {{ users | min('user.score') }}</p>
<!--
result:
* 1
* { user: { score: 123414 } }

abs

Returns the absolute value of a number

<div v-for="val in [-2.2, 1.3, '-3.4', '4.5']">The absolute value of {{val}} is {{val | abs}}</div>
<!--
result:
* The absolute value of -1.2 is 1.2
* The absolute value of 2.3 is 2.3
* The absolute value of -3.4 is 3.4
* The absolute value of '4.5' is 4.5

percent

Percentage between two numbers Usage: number | percent(total, round[optional]), round by default false.

<p>{{ 23 | percent(500) }}</p>
<p>{{ 23 | percent(500, true) }}</p>
<!--result:
4.6
4

radix

Converting decimal numbers to different bases(radix) Usage: number | radix(base)

<p>{{ 8 | radix(2)}}</p>
<p>{{ 32586 | radix(16) }}</p>
<!--result:
1000
7F4A

sum

Sum up all values within an array Usage: array | sum(initial-value[optional])

{{ [2,3,5] | sum }}
{{ [2,3,5] | sum(10) }}
<!--result
10
20

degrees

Converts radians into degrees Usage: radians | degrees(round-to-decimal),

<p>{{ 0.785398 | degrees(0) }}</p>
<p>{{ -1.57 | degrees(3) }}</p>
<!--result
45
-89.954

radians

Converts degrees into radians Usage: degrees | radians(round-to-decimal),

<p>{{ 45 | radians(2) }}</p>
<p>{{ 180 | radians(5) }}</p>
<!--result
0.79
3.14159

shortFmt

Converts numbers into formatted display Usage: number | shortFmt(round-to-decimal),

<p>{{ 45000 | shortFmt(0) }}</p>
<p>{{ 18234822 | shortFmt(1) }}</p>
<!--result
45 k
18.2 m

byteFmt

Converts bytes into formatted display Usage: number | byteFmt(round-to-decimal),

<p>{{ 1998 | byteFmt(2) }}</p>
<p>{{ 1339234901 | byteFmt(5) }}</p>
<!--result
1.95 KB
1.24726 GB

kbFmt

Converts kilobytes into formatted display Usage: number | kbFmt(round-to-decimal),

<p>{{ 1024 | kbFmt(0) }}</p>
<p>{{ 1049901 | kbFmt(5) }}</p>
<!--result
1 MB
1.00126 GB

Other

###bytes

Arguments:
- {Number} [decimalDigits] - default: 2

Examples:

{{ 20 | bytes }}             // => 20 byte
{{ 2000 | bytes }}           // => 1.95 kb
{{ 2000000 | bytes }}        // => 1.91 MB
{{ 2000000000 | bytes }}     // => 1.86 GB
{{ 2000000000000 | bytes }}  // => 1.82 TB

Change the number of digits after the decimal point:

{{ 2000000000 | bytes(4) }}  // => 1.8626 GB

currency

Arguments:
- {String} [symbol] - default: '$'
- {Number} [decimalDigits] - default: 2
- {Object} [options] - default: {}
Options:
- {String} [thousandsSeparator] - default: ','
- {String} [decimalSeparator] - default: '.'
- {Boolean} [symbolOnLeft] - default: true
- {Boolean} [spaceBetweenAmountAndSymbol] - default: false
- {Boolean} [showPlusSign] - default: false

Example:

{{ amount | currency }} // 12345 => $12,345.00

Use a different symbol:

{{ amount | currency('£') }} // 12345 => £12,345.00

Use a different number decimal places:

{{ amount | currency('₽', 0) }} // 12345 => ₽12,345

Use a different thousands separator:

{{ amount | currency('$', 0, { thousandsSeparator: '.' }) }} // 12345 => $12.345

Use a different decimal separator:

{{ amount | currency('$', 2, { decimalSeparator: ',' }) }} // 12345 => $12,345,00

Use symbol on right:

{{ amount | currency('$', 0, { symbolOnLeft: false }) }} // 12345 => 12,345$

Add space between amount and symbol:

{{ amount | currency('$', 0, { spaceBetweenAmountAndSymbol: true }) }} // 12345 => $ 12,345

Show the plus sign if the value is greater than zero:

{{ amount | currency('$', 0, { showPlusSign: true }) }} // 12345 => +$12,345

Use multiple options:

{{ amount | currency('kr', 2, { symbolOnLeft: false, spaceBetweenAmountAndSymbol: true }) }} // 12345 => 12,345.00 kr

pluralize

Arguments:
- {String|Array} single or Array(single, double, triple, ...)
- {Object} [options] - default: {}
Options:
- {Boolean} [includeNumber] - default: false

Example:

{{ count }} {{ count | pluralize('item') }} 

// 1 => '1 item'
// 2 => '2 items'

Use an array of words:

{{ count }} {{ count | pluralize(['fry', 'fries']) }} 

// 1 => '1 fry'
// 2 => '2 fries'
// 3 => '3 fries'

Include number to output:

{{ count | pluralize('test', { includeNumber: true }) }} 

// 1 => '1 test'
// 2 => '2 tests'

ordinal

Arguments:
- {Object} [options] - default: {}
Options:
- {Boolean} [includeNumber] - default: false

Example:

{{ date | ordinal }} 

// 1 => 'st'
// 2 => 'nd'
// 3 => 'rd'
// 4 => 'th'
// 5 => 'th'

Include number to output:

{{ date | ordinal({ includeNumber: true }) }} 

// 1 => '1st'
// 2 => '2nd'

number

Arguments:
- {String} [format] - default: ''
- {Object} [options] - default: {}
Options:
- {String} [thousandsSeparator] - default: ','
- {String} [decimalSeparator] - default: '.'

Examples:

{{ 123456 | number('0,0') }} // => 123,456

Change the number of digits after the decimal point:

{{ 12345.67 | number('0.0000') }} // => 12345.6700

Add a plus or minus sign to the beginning:

{{ 123456 | number('+0') }} // => +123456
{{ 123456 | number('-0') }} // => -123456

Show number in thousand (K) or in millions (M):

{{ 123456 | number('0a') }} // => 123K
{{ 123456 | number('0 a') }} // => 123 K
{{ 123456789 | number('0a') }} // => 123M

Use a different thousands separator:

{{ 1234567 | number('0,0', { thousandsSeparator: ' ' }) }} // => 1 234 567

Use a different decimal separator:

{{ 12345.67 | number('0.00', { decimalSeparator: '|' }) }} // => 12,345|67

dateFormat

-Converts date to given format

date:new Date()

{{ date | dateFormat('YYYY-MM-DD')}}

json

-Converts javascript object to json string

users : [
  { user: { score: 988790 } },
  { user: { score: 123414 } },
  { user: { rank : 988999 } },
  { user: { score: 987621 } }
]

{{ users | json}}

Contributing

If you find a bug or want to contribute to the code or documentation, you can help by submitting an issue or a pull request.

License

MIT

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Vue2-filter-list

Table of contents:

Get Started

NPM

Collection

after

afterWhere

before

beforeWhere

concat

filterBy

find

flatten

fuzzy

isEmpty

join

limitBy

orderBy

range

removeWith

reverse

where

String

ucfirst

uppercase

lowercase

uriEncode

uriComponentEncode

slugify

latinize

startsWith

endsWith

stripTags

stringular

phoneUS

truncate

split

reverse

wrap

trim

ltrim

rtrim

repeat

test

match

Math

max

min

abs

percent

radix

sum

degrees

radians

shortFmt

byteFmt

kbFmt

Other

currency

pluralize

ordinal

number

dateFormat

json

Contributing

License