vue2-filter-list

# Vue2-filter-list   Prebuilt filters for Vue.js ## Table of contents: - [Get Started](#get-started) - [Contributing](#contributing) - [Collection](#collection) - [after](#after) - [afterWhere](#afterwhere) - [before](#before) - [beforeWhere](#beforewhere) - [concat](#concat) - [filterBy](#filterby) - [find](#find) - [flatten](#flatten) - [fuzzy](#fuzzy) - [isEmpty](#isempty) - [join](#join) - [limitBy](#limitBy) - [orderBy](#orderBy) - [range](#range) - [removeWith](#removewith) - [reverse](#reverse) - [where](#where) - [String](#string) - [endsWith](#endswith) - [latinize](#latinize) - [uppercase](#uppercase) - [lowercase](#lowercase) - [test](#test) - [trim](#trim) - [ltrim](#ltrim) - [rtrim](#rtrim) - [match](#match) - [phoneUS](#phoneus) - [placeholder](#placeholder) - [repeat](#repeat) - [reverse](#reverse-1) - [slugify](#slugify) - [split](#split) - [startsWith](#startswith) - [stripTags](#striptags) - [stringular](#stringular) - [truncate](#truncate) - [ucfirst](#ucfirst) - [uriEncode](#uriencode) - [uriComponentEncode](#uricomponentencode) - [wrap](#wrap) - [Math](#math) - [min](#min) - [max](#max) - [abs](#abs) - [percent](#percent) - [radix](#radix) - [sum](#sum) - [degrees](#degrees) - [radians](#radians) - [shortFmt](#shortfmt) - [byteFmt](#bytefmt) - [kbFmt](#kbfmt) - [Other](#other) - [bytes](#bytes) - [currency](#currency) - [dateFormat](#dateFormat) - [json](#json) - [number](#number) - [ordinal](#ordinal) - [pluralize](#pluralize) ## Get Started ### NPM ``` npm install vue2-filter-list ``` When used with a module system, you must explicitly install the filters via `Vue.use()`: ```js 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: ```js 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. ```js collection : [ { name: 'foo' }, { name: 'bar' }, { name: 'baz' }, { name: 'zap' }, ] ``` ```html <tr v-for="col in after(collection,2)"> {{ col.name }} </tr>  ``` ### 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. ```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' } ] ``` ```html <tr v-for="order in afterWhere(orders,{date: 'Tue Jul 17 2014'})"> order: {{ order.id }}, {{ order.date }} </tr>  ``` ### before get a collection(array or object) and specified count, and returns all of the items in the collection before the specified count. ```js collection : [ { name: 'foo' }, { name: 'bar' }, { name: 'baz' }, { name: 'zap' }, ] ``` ```html <tr v-for="col in before(collection,3)"> {{ col.name }} </tr>  ``` ### 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. ```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' } ] ``` ```html <tr v-for="order in beforeWhere(orders,{date: 'Tue Jul 17 2014'})"> order: {{ order.id }}, {{ order.date }} </tr>  ``` ### concat Concatenates an array/object into another one. ```js array : [ {a: 1}, {a: 2} ], object : { 0: {a: 3}, 1: {a: 4} } ``` ```html <li v-for="elm in concat(array,object)"> {{ elm.a }} </li>  <li v-for="elm in concat(object,array)"> {{ elm.a }} </li>  ``` ### filterBy - Arguments - {Array} [items] - {String} [query] - {String} [searchKey] ```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')"> ``` ### find - Arguments - {Array} [items] - {String} [query] - {String} [searchKey] ```html  <div v-for="item in find(items, 'hello')">  <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 ```js weirdArray : [[], 1, 2, 3, [4, 5, 6, [7, 8, 9, [10, 11, [12, [[[[[13], [[[[14, 15]]]]]]]]]]]]] ``` ```html <th v-for="elm in flatten(wierdArray)"> {{ elm }}, </th>  <li v-for="book in fuzzy(books,search,true)"> {{ book.title }} </li> ``` ### isEmpty get collection or string and return if it empty[Boolean] ```html <tr v-for="order in orders" v-hide="orders | isEmpty">  </tr>  <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: ```js names : ['John', 'Sebastian', 'Will', 'James'] ``` ```html {{ names | join(', ') }}  ``` ### limitBy - Arguments - {Number|Array} [items] - {Number} [limit] - {Number} [offset] ```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> ``` ### orderBy - Arguments - {Array} [items] - {String} [sortKey] - {Number} [order] - default: 1 Sort users by name: ```html <ul> <li v-for="user in orderBy(users, 'name')"> {{ user.name }} </li> </ul> ``` In descending order: ```html <ul> <li v-for="user in orderBy(users, 'name')"> {{ user.name }} </li> </ul> ``` Sort primitive values: ```html <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)``` ```html {{i}},  ``` ```html {{i}},  ``` ```html {{ i }},  ``` ```html {{ i }},  ``` ```js double(i) { return i * 2; } ``` ```html {{ i }},  ``` ### removeWith comparison for each element in a collection to the given properties object, returning an array without all elements that have equivalent property values. ```js collection : [ { id: 1, name: 'foo' }, { id: 1, name: 'bar' }, { id: 2, name: 'baz' } ] ``` ```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>  ``` ### where comparison for each element in a collection to the given properties object, returning an array of all elements that have equivalent property values. ```js collection : [ { id: 1, name: 'foo' }, { id: 1, name: 'bar' }, { id: 2, name: 'baz' } ] ``` ```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>  ``` ## String ### ucfirst ucfirstFilter get string as parameter and return it capitalized ```html {{ 'foo bar baz' | ucfirst }}  ``` ### uppercase uppercase get string as parameter and return it uppercase ```html {{ 'foo bar baz' | uppercase }}  ``` ### lowercase lowercase get string as parameter and return it lowercase ```html {{ 'Foo Bar Baz' | lowercase }}  ``` ### uriEncode get string as parameter and return encoded uri ```html {{ data.name | uriEncode }} ``` ### uriComponentEncode get string as parameter and return encoded uri component ```html {{ 'Some&strange=chars' | uriComponentEncode }} ``` ### slugify Transform text into a URL slug. Replaces whitespaces, with dash("-"), or given argument ```html {{ 'Some string with spaces' | slugify }}  {{ 'Some string with spaces' | slugify('=') }}  ``` ### latinize Remove accents/diacritics from a string ```html {{ 'Sòme strÏng with Âccénts' | latinize }}  ``` ### startsWith return whether string starts with the starts parameter. usage: ```string | startsWith('start',case-sensitive[optional])``` ```html {{ 'Lorem ipsum' | startsWith('lorem') }} {{ 'Lorem Ipsum' | startsWith('lorem',true) }}  ``` ### stringular get string with {n} and replace match with enumeration values ```html {{ 'lorem {0} dolor {1} amet' | stringular('ipsum','sit') }} {{ '{3} {0} dolor {1} amet' | stringular('ipsum','sit',null,'lorem') }}  {{ 'lorem {0} dolor sit amet' | stringular }}  {{ text | truncate(7, '...', true) }} {{ text | truncate( 13, '...') }}  {{ text | truncate( 50, '...') }} <!--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])``` ```js text : 'lorem ipsum dolor sit amet' ``` ```html {{ text | split(' ') }} {{ text | split(' ', 2)}} <!--result: ['lorem', 'ipsum', 'dolor', 'sit', 'amet'] ['lorem ipsum dolor', 'sit', 'amet'] ``` ### reverse Reverses a string ```js text : 'lorem ipsum dolor sit amet' ``` ```html {{ text | reverse }} <!--result: tema tis rolod muspi merol ``` ### wrap Wrap a string with another string usage: ```string | wrap(string, string[optional])``` ```html {{ 'foo' | wrap('/') }} {{ 'foo' | wrap('{{', '}}') }} <!--result: /foo/ {{foo}} ``` ### trim Strip whitespace (or other characters) from the beginning and end of a string ```html {{ ' foo ' | trim }} {{ 'foobarfoo' | trim('foo') }} <!--result: foo bar ``` ### ltrim Strip whitespace (or other characters) from the beginning of a string ```html {{ 'barfoobar' | ltrim('bar') }} <!--result: foobar ``` ### rtrim Strip whitespace (or other characters) from the end of a string ```html {{ 'barfoobar' | rtrim('bar') }} <!--result: barfoo ``` ### repeat Repeats a string n times **Usage:** ```string | repeat(n, separator[optional])``` ```html {{ 'foo' | repeat(3, '-') }} <!--repeat: foo-foo-foo ``` ### test Test if a string match a pattern **Usage:** ```string | test(pattern, flag[optional])``` ```html {{ '15/12/2003' | test('^[0-9]{2}[/]{1}[0-9]{2}[/]{1}[0-9]{4}$', 'i') }} {{ '0123456' | test('\\D', 'i') }} <!--result: true true ``` ### match Return an array of matched element in a string **Usage:** ```string | match(pattern, flag[optional])``` ```html {{ '15/12/2003' | match('\\d+', 'g') }} <!--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])``` ```js users : [ { user: { score: 988790 } }, { user: { score: 123414 } }, { user: { rank : 988999 } }, { user: { score: 987621 } } ] ``` ```html {{ [1,2,3,4,7,8,9] | max }} {{ users | max('user.score || user.rank') }} <!-- 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])``` ```js users : [ { user: { score: 988790 } }, { user: { score: 123414 } }, { user: { score: 987621 } } ] ``` ```html {{ [1,2,3,4,7,8,9] | min }} {{ users | min('user.score') }} <!-- result: * 1 * { user: { score: 123414 } } ``` ### abs Returns the absolute value of a number ```html <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. ```html {{ 23 | percent(500) }} {{ 23 | percent(500, true) }} <!--result: 4.6 4 ``` ### radix Converting decimal numbers to different bases(radix) **Usage:** ```number | radix(base)``` ```html {{ 8 | radix(2)}} {{ 32586 | radix(16) }} <!--result: 1000 7F4A ``` ### sum Sum up all values within an array **Usage:** ```array | sum(initial-value[optional])``` ```html {{ [2,3,5] | sum }} {{ [2,3,5] | sum(10) }} <!--result 10 20 ``` ### degrees Converts radians into degrees **Usage:** ```radians | degrees(round-to-decimal)```, ```html {{ 0.785398 | degrees(0) }} {{ -1.57 | degrees(3) }} <!--result 45 -89.954 ``` ### radians Converts degrees into radians **Usage:** ```degrees | radians(round-to-decimal)```, ```html {{ 45 | radians(2) }} {{ 180 | radians(5) }} <!--result 0.79 3.14159 ``` ### shortFmt Converts numbers into formatted display **Usage:** ```number | shortFmt(round-to-decimal)```, ```html {{ 45000 | shortFmt(0) }} {{ 18234822 | shortFmt(1) }} <!--result 45 k 18.2 m ``` ### byteFmt Converts bytes into formatted display **Usage:** ```number | byteFmt(round-to-decimal)```, ```html {{ 1998 | byteFmt(2) }} {{ 1339234901 | byteFmt(5) }} <!--result 1.95 KB 1.24726 GB ``` ### kbFmt Converts kilobytes into formatted display **Usage:** ```number | kbFmt(round-to-decimal)```, ```html {{ 1024 | kbFmt(0) }} {{ 1049901 | kbFmt(5) }} <!--result 1 MB 1.00126 GB ``` ## Other ###bytes + Arguments: * `{Number} [decimalDigits] - default: 2` + Examples: ```js {{ 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: ```js {{ 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: ```js {{ amount | currency }} // 12345 => $12,345.00 ``` Use a different symbol: ```js {{ amount | currency('£') }} // 12345 => £12,345.00 ``` Use a different number decimal places: ```js {{ amount | currency('₽', 0) }} // 12345 => ₽12,345 ``` Use a different thousands separator: ```js {{ amount | currency('$', 0, { thousandsSeparator: '.' }) }} // 12345 => $12.345 ``` Use a different decimal separator: ```js {{ amount | currency('$', 2, { decimalSeparator: ',' }) }} // 12345 => $12,345,00 ``` Use symbol on right: ```js {{ amount | currency('$', 0, { symbolOnLeft: false }) }} // 12345 => 12,345$ ``` Add space between amount and symbol: ```js {{ amount | currency('$', 0, { spaceBetweenAmountAndSymbol: true }) }} // 12345 => $ 12,345 ``` Show the plus sign if the value is greater than zero: ```js {{ amount | currency('$', 0, { showPlusSign: true }) }} // 12345 => +$12,345 ``` Use multiple options: ```js {{ 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: ```js {{ count }} {{ count | pluralize('item') }} // 1 => '1 item' // 2 => '2 items' ``` Use an array of words: ```js {{ count }} {{ count | pluralize(['fry', 'fries']) }} // 1 => '1 fry' // 2 => '2 fries' // 3 => '3 fries' ``` Include number to output: ```js {{ count | pluralize('test', { includeNumber: true }) }} // 1 => '1 test' // 2 => '2 tests' ``` ## ordinal + Arguments: * `{Object} [options] - default: {}` + Options: * `{Boolean} [includeNumber] - default: false` + Example: ```js {{ date | ordinal }} // 1 => 'st' // 2 => 'nd' // 3 => 'rd' // 4 => 'th' // 5 => 'th' ``` Include number to output: ```js {{ date | ordinal({ includeNumber: true }) }} // 1 => '1st' // 2 => '2nd' ``` ### number + Arguments: * `{String} [format] - default: ''` * `{Object} [options] - default: {}` + Options: * `{String} [thousandsSeparator] - default: ','` * `{String} [decimalSeparator] - default: '.'` + Examples: ```js {{ 123456 | number('0,0') }} // => 123,456 ``` Change the number of digits after the decimal point: ```js {{ 12345.67 | number('0.0000') }} // => 12345.6700 ``` Add a plus or minus sign to the beginning: ```js {{ 123456 | number('+0') }} // => +123456 {{ 123456 | number('-0') }} // => -123456 ``` Show number in thousand (K) or in millions (M): ```js {{ 123456 | number('0a') }} // => 123K {{ 123456 | number('0 a') }} // => 123 K {{ 123456789 | number('0a') }} // => 123M ``` Use a different thousands separator: ```js {{ 1234567 | number('0,0', { thousandsSeparator: ' ' }) }} // => 1 234 567 ``` Use a different decimal separator: ```js {{ 12345.67 | number('0.00', { decimalSeparator: '|' }) }} // => 12,345|67 ``` ### dateFormat -Converts date to given format ```js date:new Date() ``` ```html {{ date | dateFormat('YYYY-MM-DD')}} ``` ### json -Converts javascript object to json string ```js users : [ { user: { score: 988790 } }, { user: { score: 123414 } }, { user: { rank : 988999 } }, { user: { score: 987621 } } ] ``` ```html {{ 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](http://opensource.org/licenses/MIT)