vue2-filter-list

<html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <meta name="description" content="Prebuilt filters for Vue.js. Wide range of filters, separated by Category. "/> </head> <body> <section class="container" style="margin-top: 20px;"> <div class="row"> <div class="col-lg-3"></div> <div class="col-lg-9"> <h1 id="vue2-filter-list-nbsp-">Vue2-filter-list  </h1> Prebuilt filters for Vue.js. Wide range of filters, separated by Category. </div> </div> <div class="row"> <div class="col-lg-3"> <ul class="list-group" style=""> <li class="list-group-item"><a href="#get-started">Get Started</a></li> <li class="list-group-item"><a href="#contributing">Contributing</a></li> <li class="list-group-item"><a href="#collection">Collection</a> <ul> <li><a href="#after">after</a></li> <li><a href="#afterwhere">afterWhere</a></li> <li><a href="#before">before</a></li> <li><a href="#beforewhere">beforeWhere</a></li> <li><a href="#concat">concat</a></li> <li><a href="#filterby">filterBy</a></li> <li><a href="#find">find</a></li> <li><a href="#flatten">flatten</a></li> <li><a href="#fuzzy">fuzzy</a></li> <li><a href="#isempty">isEmpty</a></li> <li><a href="#join">join</a></li> <li><a href="#limitBy">limitBy</a></li> <li><a href="#orderBy">orderBy</a></li> <li><a href="#range">range</a></li> <li><a href="#removewith">removeWith</a></li> <li><a href="#reverse">reverse</a></li> <li><a href="#where">where</a></li> </ul> </li> <li class="list-group-item"><a href="#string">String</a> <ul> <li><a href="#endswith">endsWith</a></li> <li><a href="#latinize">latinize</a></li> <li><a href="#uppercase">uppercase</a></li> <li><a href="#lowercase">lowercase</a></li> <li><a href="#test">test</a></li> <li><a href="#trim">trim</a></li> <li><a href="#ltrim">ltrim</a></li> <li><a href="#rtrim">rtrim</a></li> <li><a href="#match">match</a></li> <li><a href="#phoneus">phoneUS</a></li> <li><a href="#placeholder">placeholder</a></li> <li><a href="#repeat">repeat</a></li> <li><a href="#reverse-1">reverse</a></li> <li><a href="#slugify">slugify</a></li> <li><a href="#split">split</a></li> <li><a href="#startswith">startsWith</a></li> <li><a href="#striptags">stripTags</a></li> <li><a href="#stringular">stringular</a></li> <li><a href="#truncate">truncate</a></li> <li><a href="#ucfirst">ucfirst</a></li> <li><a href="#uriencode">uriEncode</a></li> <li><a href="#uricomponentencode">uriComponentEncode</a></li> <li><a href="#wrap">wrap</a></li> </ul> </li> <li class="list-group-item"><a href="#math">Math</a> <ul> <li><a href="#min">min</a></li> <li><a href="#max">max</a></li> <li><a href="#abs">abs</a></li> <li><a href="#percent">percent</a></li> <li><a href="#radix">radix</a></li> <li><a href="#sum">sum</a></li> <li><a href="#degrees">degrees</a></li> <li><a href="#radians">radians</a></li> <li><a href="#shortfmt">shortFmt</a></li> <li><a href="#bytefmt">byteFmt</a></li> <li><a href="#kbfmt">kbFmt</a></li> </ul> </li> <li class="list-group-item"><a href="#other">Other</a> <ul> <li><a href="#bytes">bytes</a></li> <li><a href="#currency">currency</a></li> <li><a href="#dateFormat">dateFormat</a></li> <li><a href="#json">json</a></li> <li><a href="#number">number</a></li> <li><a href="#ordinal">ordinal</a></li> <li><a href="#pluralize">pluralize</a></li> </ul> </li> </ul> </div> <div class="col-lg-9"> <h2 id="get-started">Get Started</h2> <h3 id="npm">NPM</h3> <pre><code>npm install vue2-filter-list </code></pre>When used with a module system, you must explicitly install the filters via <code>Vue.use()</code>: <pre><code class="lang-js">import Vue from 'vue' import VueFilterList from 'vue2-filter-list' Vue.use(VueFilterList) </code></pre> You don't need to do this when using global script tags. To use one of the predefined methods (such as <code>limitBy</code>, <code>filterBy</code>, <code>find</code>, or <code>orderBy</code>) in your component, you also need to add <code>Vue2Filters.mixin</code> to mixin list: <pre><code class="lang-js">import VueFilterList from 'vue2-filter-list' export default { ... mixins: [VueFilterList.mixin], ... } </code></pre> <h2 id="collection">Collection</h2> <h3 id="after">after</h3> get a collection(array or object) and specified count, and returns all of the items in the collection after the specified count. <pre><code class="lang-js">collection : [ { name: 'foo' }, { name: 'bar' }, { name: 'baz' }, { name: 'zap' }, ] </code></pre> <pre><code class="lang-html"><tr v-for="col in after(collection,2)"> {{ col.name }} </tr>  </code></pre> <h3 id="afterwhere">afterWhere</h3> 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. <pre><code class="lang-js">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' } ] </code></pre> <pre><code class="lang-html"><tr v-for="order in afterWhere(orders,{date: 'Tue Jul 17 2014'})"> order: {{ order.id }}, {{ order.date }} </tr>  </code></pre> <h3 id="before">before</h3> get a collection(array or object) and specified count, and returns all of the items in the collection before the specified count. <pre><code class="lang-js">collection : [ { name: 'foo' }, { name: 'bar' }, { name: 'baz' }, { name: 'zap' }, ] </code></pre> <pre><code class="lang-html"><tr v-for="col in before(collection,3)"> {{ col.name }} </tr>  </code></pre> <h3 id="beforewhere">beforeWhere</h3> 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. <pre><code class="lang-js">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' } ] </code></pre> <pre><code class="lang-html"><tr v-for="order in beforeWhere(orders,{date: 'Tue Jul 17 2014'})"> order: {{ order.id }}, {{ order.date }} </tr>  </code></pre> <h3 id="concat">concat</h3> Concatenates an array/object into another one. <pre><code class="lang-js">array : [ {a: 1}, {a: 2} ], object : { 0: {a: 3}, 1: {a: 4} } </code></pre> <pre><code class="lang-html"><li v-for="elm in concat(array,object)"> {{ elm.a }} </li>  <li v-for="elm in concat(object,array)"> {{ elm.a }} </li>  </code></pre> <h3 id="filterby">filterBy</h3> <ul> <li>Arguments<ul> <li>{Array} [items]</li> <li>{String} [query]</li> <li>{String} [searchKey]</li> </ul> </li> </ul> <pre><code class="lang-html"> <div v-for="item in filterBy(items, 'hello')">  <div v-for="user in filterBy(users, 'Jack', 'name')">  <div v-for="user in filterBy(users, 'Bonnie', 'name', 'age')"> </code></pre> <h3 id="find">find</h3> <ul> <li>Arguments<ul> <li>{Array} [items]</li> <li>{String} [query]</li> <li>{String} [searchKey]</li> </ul> </li> </ul> <pre><code class="lang-html"> <div v-for="item in find(items, 'hello')">  <div v-for="user in find(users, 'Bonnie', 'name', 'age')"> </code></pre> <h3 id="flatten">flatten</h3> Flattens a nested array (the nesting can be to any depth). If you pass shallow, the array will only be flattened a single level <pre><code class="lang-js">weirdArray : [[], 1, 2, 3, [4, 5, 6, [7, 8, 9, [10, 11, [12, [[[[[13], [[[[14, 15]]]]]]]]]]]]] </code></pre> <pre><code class="lang-html"><th v-for="elm in flatten(wierdArray)"> {{ elm }}, </th>  <li v-for="book in fuzzy(books,search,true)"> {{ book.title }} </li> </code></pre> <h3 id="isempty">isEmpty</h3> get collection or string and return if it empty[Boolean] <pre><code class="lang-html"><tr v-for="order in orders" v-hide="orders | isEmpty">  </tr>  <tr v-show="orders | isEmpty"> no content to show </tr> </code></pre> <h3 id="join">join</h3> 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: <pre><code class="lang-js">names : ['John', 'Sebastian', 'Will', 'James'] </code></pre> <pre><code class="lang-html"><p>{{ names | join(', ') }}</p>  </code></pre> <h3 id="limitby">limitBy</h3> <ul> <li>Arguments<ul> <li>{Number|Array} [items]</li> <li>{Number} [limit]</li> <li>{Number} [offset]</li> </ul> </li> </ul> <pre><code class="lang-html"> <div v-for="item in limitBy(items, 10)">{{ item }}</div>  <div v-for="item in limitBy(items, 10, 5)">{{ item }}</div>  <div v-for="n in limitBy(10, 4, 2)">{{ n }}</div> </code></pre> <h3 id="orderby">orderBy</h3> <ul> <li>Arguments <ul> <li>{Array} [items]</li> <li>{String} [sortKey]</li> <li>{Number} [order] - default: 1</li> </ul> Sort users by name: <pre><code class="lang-html"><ul> <li v-for="user in orderBy(users, 'name')"> {{ user.name }} </li> </ul> </code></pre> In descending order: <pre><code class="lang-html"><ul> <li v-for="user in orderBy(users, 'name')"> {{ user.name }} </li> </ul> </code></pre> Sort primitive values: </li> </ul> <pre><code class="lang-html"><ul> <li v-for="name in orderBy(names, true)"> {{ name }} </li> </ul> </code></pre> <h3 id="range">range</h3> 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: <code>range(collection,length,start,increment,callback)</code> <pre><code class="lang-html"><span v-for="i in range([],3)">{{i}},</span>  </code></pre> <pre><code class="lang-html"><span v-for="i in range([],10,10)">{{i}},</span>  </code></pre> <pre><code class="lang-html"><span v-for="i in range([],10,5,2)">{{ i }},</span>  </code></pre> <pre><code class="lang-html"><span v-for="i in range([],11,4,2)">{{ i }},</span>  </code></pre> <pre><code class="lang-js">double(i) { return i * 2; } </code></pre> <pre><code class="lang-html"><span v-for="i in range(11,4,2,double)">{{ i }},</span>  </code></pre> <h3 id="removewith">removeWith</h3> comparison for each element in a collection to the given properties object, returning an array without all elements that have equivalent property values. <pre><code class="lang-js"> collection : [ { id: 1, name: 'foo' }, { id: 1, name: 'bar' }, { id: 2, name: 'baz' } ] </code></pre> <pre><code class="lang-html"><tr v-for="obj in removeWith(collection,{ id: 1 })"> {{ obj.name }} </tr>  <tr v-for="obj in removeWith(collection,{ id: 1, name: 'foo' })"> {{ obj.name }} </tr>  </code></pre> <h3 id="where">where</h3> comparison for each element in a collection to the given properties object, returning an array of all elements that have equivalent property values. <pre><code class="lang-js"> collection : [ { id: 1, name: 'foo' }, { id: 1, name: 'bar' }, { id: 2, name: 'baz' } ] </code></pre> <pre><code class="lang-html"><tr v-for="obj in where(collection,{id: 1})"> {{ obj.name }} </tr>  <tr v-for="obj in where(collection,{id: 1, name: 'foo'})"> {{ obj.name }} </tr>  </code></pre> <h2 id="string">String</h2> <h3 id="ucfirst">ucfirst</h3> ucfirstFilter get string as parameter and return it capitalized <pre><code class="lang-html"><p> {{ 'foo bar baz' | ucfirst }}</p>  </code></pre> <h3 id="uppercase">uppercase</h3> uppercase get string as parameter and return it uppercase <pre><code class="lang-html"><p> {{ 'foo bar baz' | uppercase }}</p>  </code></pre> <h3 id="lowercase">lowercase</h3> lowercase get string as parameter and return it lowercase <pre><code class="lang-html"><p> {{ 'Foo Bar Baz' | lowercase }}</p>  </code></pre> <h3 id="uriencode">uriEncode</h3> get string as parameter and return encoded uri <pre><code class="lang-html">{{ data.name | uriEncode }} </code></pre> <h3 id="uricomponentencode">uriComponentEncode</h3> get string as parameter and return encoded uri component <pre><code class="lang-html">{{ 'Some&strange=chars' | uriComponentEncode }} </code></pre> <h3 id="slugify">slugify</h3> Transform text into a URL slug. Replaces whitespaces, with dash("-"), or given argument <pre><code class="lang-html">{{ 'Some string with spaces' | slugify }}  {{ 'Some string with spaces' | slugify('=') }}  </code></pre> <h3 id="latinize">latinize</h3> Remove accents/diacritics from a string <pre><code class="lang-html"> {{ 'Sòme strÏng with Âccénts' | latinize }}  </code></pre> <h3 id="startswith">startsWith</h3> return whether string starts with the starts parameter. usage: <code>string | startsWith('start',case-sensitive[optional])</code> <pre><code class="lang-html"> {{ 'Lorem ipsum' | startsWith('lorem') }} {{ 'Lorem Ipsum' | startsWith('lorem',true) }}  </code></pre> <h3 id="stringular">stringular</h3> get string with {n} and replace match with enumeration values <pre><code class="lang-html"><p>{{ 'lorem {0} dolor {1} amet' | stringular('ipsum','sit') }}</p> <p>{{ '{3} {0} dolor {1} amet' | stringular('ipsum','sit',null,'lorem') }}</p>  <p>{{ 'lorem {0} dolor sit amet' | stringular }}<p>  <p>{{ text | truncate(7, '...', true) }}</p> <p>{{ text | truncate( 13, '...') }}</p>  <p>{{ text | truncate( 50, '...') }}</p> <!--result: lorem ipsum... lorem ipsum d... lorem ipsum dolor sit amet </code></pre> <h3 id="split">split</h3> truncates a string given a specified length, providing a custom string to denote an omission. usage: <code>string | split([delimiter], [skip-optional])</code> <pre><code class="lang-js">text : 'lorem ipsum dolor sit amet' </code></pre> <pre><code class="lang-html"> {{ text | split(' ') }}</p> {{ text | split(' ', 2)}}</p> <!--result: ['lorem', 'ipsum', 'dolor', 'sit', 'amet'] ['lorem ipsum dolor', 'sit', 'amet'] </code></pre> <h3 id="reverse">reverse</h3> Reverses a string <pre><code class="lang-js">text : 'lorem ipsum dolor sit amet' </code></pre> <pre><code class="lang-html">{{ text | reverse }} <!--result: tema tis rolod muspi merol </code></pre> <h3 id="wrap">wrap</h3> Wrap a string with another string usage: <code>string | wrap(string, string[optional])</code> <pre><code class="lang-html">{{ 'foo' | wrap('/') }} {{ 'foo' | wrap('{{', '}}') }} <!--result: /foo/ {{foo}} </code></pre> <h3 id="trim">trim</h3> Strip whitespace (or other characters) from the beginning and end of a string <pre><code class="lang-html">{{ ' foo ' | trim }} {{ 'foobarfoo' | trim('foo') }} <!--result: foo bar </code></pre> <h3 id="ltrim">ltrim</h3> Strip whitespace (or other characters) from the beginning of a string <pre><code class="lang-html">{{ 'barfoobar' | ltrim('bar') }} <!--result: foobar </code></pre> <h3 id="rtrim">rtrim</h3> Strip whitespace (or other characters) from the end of a string <pre><code class="lang-html">{{ 'barfoobar' | rtrim('bar') }} <!--result: barfoo </code></pre> <h3 id="repeat">repeat</h3> Repeats a string n times Usage: <code>string | repeat(n, separator[optional])</code> <pre><code class="lang-html">{{ 'foo' | repeat(3, '-') }}</p> <!--repeat: foo-foo-foo </code></pre> <h3 id="test">test</h3> Test if a string match a pattern Usage: <code>string | test(pattern, flag[optional])</code> <pre><code class="lang-html">{{ '15/12/2003' | test('^[0-9]{2}[/]{1}[0-9]{2}[/]{1}[0-9]{4}$', 'i') }} {{ '0123456' | test('\\D', 'i') }} <!--result: true true </code></pre> <h3 id="match">match</h3> Return an array of matched element in a string Usage: <code>string | match(pattern, flag[optional])</code> <pre><code class="lang-html">{{ '15/12/2003' | match('\\d+', 'g') }}</p> <!--result: ['15', '12', '2003'] </code></pre> <h2 id="math">Math</h2> <h3 id="max">max</h3> max find and return the largest number in a given array. if an <code>expression</code> is provided, will return max value by expression. Usage: <code>array | max(expression[optional])</code> <pre><code class="lang-js">users : [ { user: { score: 988790 } }, { user: { score: 123414 } }, { user: { rank : 988999 } }, { user: { score: 987621 } } ] </code></pre> <pre><code class="lang-html"><p> {{ [1,2,3,4,7,8,9] | max }}</p> <p> {{ users | max('user.score || user.rank') }}</p> <!-- result: * 9 * { user: { rank : 988999 } } </code></pre> <h3 id="min">min</h3> min find and return the lowest number in a given array. if an <code>expression</code> is provided, will return min value by expression. Usage: <code>array | min(expression[optional])</code> <pre><code class="lang-js">users : [ { user: { score: 988790 } }, { user: { score: 123414 } }, { user: { score: 987621 } } ] </code></pre> <pre><code class="lang-html"><p> {{ [1,2,3,4,7,8,9] | <span class="hljs-na