add more filters, improve readme

Author: zhoraygevorgyan

README.md

@@ -1,5 +1,8 @@
 # vue-common-filters
-Collection of common filters used in projects
+Collection of most used filter  in projects.
+
+# Contribution
+If you found a bug, want to request a feature or want to contribute, create <a href="https://github.com/epicbg/vue-common-filters/issues">issue</a> or submit <a href="https://github.com/epicbg/vue-common-filters/pulls">pull request</a>
 
 # Installation
 
@@ -14,7 +17,11 @@ Download repo
 import Vue from 'vue'
 import VueCommonFilters from 'vue-common-filters'
 
-Vue.use(VueCommonFilters, {
+// THESE ARE ALL OPTIONS YOU CAN CUSTOMIZE
+// YOU ARE NOT REQUIRED TO COPY ALL THESE OPTIONS
+// YOU CAN PASS EMPTY OR NO OPTIONS AT ALL
+
+let config = {
     "currency": {
         "symbol": "$",
         "decimalDigits": 2,
@@ -25,37 +32,245 @@ Vue.use(VueCommonFilters, {
     "text": {
         "truncateClamp": "..."
     },
-    
+
+    "numbers": {
+        "decimalDigits": 2
+    },
+
+    "array": {
+        "implodeDelimiter": ", "
+    },
+
     "dates": {
-        "format": "YYYY-MM-DD HH:mm:ss"
+        "defaultFormat": "YYYY-MM-DD HH:mm:ss",
+        "filterConvertFormat": "DD MMMM YYYY"
     }
-})
+}
+
+Vue.use(VueCommonFilters, config)
 ```
 
-# Useage
+# Usage
+
+## Text filters
 
 ### truncate
-Set string max length
-` {{ 'hello world' | truncate('2', '..') }} ` result `hel...`
+
+Arguments:
+
+{Number} [length]
+{string} [clamp] - default: '...'
+
+Example:
+
+```javascript
+{{ string | truncate(3) }} // 'hello world' => 'hel...'
+```
 
 ### trim
-Remove spaces from start and end of string
-` {{ '  hello world   ' | trim }} ` result `hello world`
 
-### ats (array to string)
-Convert array of strings to single string with delimiter
-` {{ ['h', 'e', 'l', 'o'] | ats(' ') }} ` result `h e l l o`
+Example:
+
+```javascript
+{{ string | trim }} // removes spaces from string
+```
+### capitalize
+
+Example:
+
+```javascript
+{{ string | capitalize }} // 'george' => 'George'
+```
+### uppercase / lowercase
+
+Example:
+
+```javascript
+{{ string | uppercase }} // 'hey' => 'HEY'
+```
+
+```javascript
+{{ string | lowercase }} // 'HEY' => 'hey'
+```
+
+### placeholder
 
-### aots (array of objects to string)
-Reduce array of objects to string. First param key and second param delimiter
-` {{ [{name: 'Boby'}, {name: 'Jonny'}] | aots('name', ', ') }} ` result `Boby, Jonny`
+Example:
+
+```javascript
+{{ string | placeholder('no data yet') }} // null || false => 'no data yet'
+```
+
+## Array / object filters
+
+### implode
+
+Arguments:
+
+{string} [delimiter] - default: ', ' 
+
+Example:
+
+```javascript
+{{ array | implode }} // ['Danny', 'Bobby', 'Mima'] => Danny, Boby, Mima
+{{ array | implode('and') }} // ['Danny', 'Bobby', 'Mima'] => Danny and Boby and Mima
+```
+### implodeObjects
+
+Arguments:
+
+{string} [key] 
+{string} [delimiter] - default: ', ' 
+
+Example:
+
+```javascript
+{{ users | implode('name') }} // [{id: 1, name:'Danny'}, {id: 2, name:'Bobby'}] => Danny, Bobby
+{{ users | implode('name', ' and ') }} // [{id: 1, name:'Danny'}, {id: 2, name:'Bobby'}] => Danny and Bobby
+```
 
 ### search
-Searches and filters array of object for matching keyword.
-`<div v-for"product in products | search('tshirt')"></div>`
+Searches all fields (inside array of objects) for a match with passed [key]
+
+Arguments:
+
+{string} [key]
+
+Example:
+
+```javascript
+{{ users | search('Danny') | implodeObjects('name') }} 
+// [{name:'Danny Miller'}, {name:'Danny Grande'}, {name:'Bobby Miller'}]
+//  => Danny Miller, Bobby Miller 
+```
+
+## Date filters
+
+Examples are shown in default `YYYY-MM-DD HH:mm:ss`. If you have different format you can change it from the config as shown in installation section
+
+This packages uses moment and if you want to change the locale you can do it like so:
+
+```javascript
+moment.locale('en')
+```
+
+### format
+
+Arguments:
+
+{string} [format] - default: DD MMMM YYYY 
+
+Example:
+
+```javascript
+{{ date | format('DD MMMM') }} // '2018-02-01' => '1 February'
+{{ date | format }} // '2018-02-01' => '1 February 2019'
+```
 
 ### fromNow
-` {{ '1970-01-01 00:59:59' | fromNow }} ` result `40 years ago`
 
-### format (format datetime)
-` {{ '1970-01-01 00:59:59' | format('d MMMM') }} ` result `1 january`
+```javascript
+{{ date | fromNow }} // '2019-02-01' => '8 months ago'
+```
+
+### from
+
+Arguments:
+
+{string} [from] 
+
+Example:
+
+```javascript
+{{ date | from('2019-07-02') }} // '2019-07-01' => '1 year ago'
+```
+
+### to
+
+Arguments:
+
+{string} [to] 
+
+Example:
+
+```javascript
+{{ date | to('2019-07-01') }} // '2019-06-01' => 'in 1 month'
+```
+
+### add / substract
+
+Arguments:
+
+{number} [number] 
+{string} [type] 
+
+Example:
+
+```javascript
+{{ date | add(2, 'days') }} // '2019-06-01' => '2019-06-03'
+{{ date | substract(2, 'days') }} // '2019-06-03' => '2019-06-01'
+```
+
+## Number filters
+
+### decimal
+
+Arguments:
+
+{Number} [length] - default: 2
+
+Example:
+
+```javascript
+// '1' => '1.00'
+// '1.2' => '1.20'
+{{ coefficient | decimal }} 
+```
+
+### currency
+
+Arguments:
+
+{string} [symbol] - default: $
+{Number} [decimalDigits] - default: 2
+{Boolean} [symbolOnLeft] - default: true
+{Number} [spaceBetweenAmountAndSymbol] - default: true
+
+Example:
+
+```javascript
+{{ amount | currency }} // 12 => '$ 12.00'
+{{ amount | currency('EUR', 2, false) }} // 12 => 12.00 EUR
+```
+
+You can change the defaults from settings, as shown in installation section
+
+# Programatic Usage
+
+## using functions
+```javascript
+this.$options.filters.filterName(value)
+```
+```javascript
+this.$options.filters.currency(10) => '$ 10.00'
+this.$options.filters.search([{}, {}..])
+```
+
+## changing settings
+```javascript
+import vueCommonFilters from 'vue-common-filters'
+
+// Pass options which u want to customize, no need to pass the whole settings object
+vueCommonFilters.config = {
+    currency: {
+        symbol: 'EUR'
+    }
+}
+```
+
+
+# License
+MIT License
+
+Copyright (c) 2019 EpicWeb
+

config.json

@@ -10,7 +10,16 @@
         "truncateClamp": "..."
     },
 
+    "numbers": {
+        "decimalDigits": 2
+    },
+
+    "array": {
+        "implodeDelimiter": ", "
+    },
+
     "dates": {
-        "format": "YYYY-MM-DD HH:mm:ss"
+        "defaultFormat": "YYYY-MM-DD HH:mm:ss",
+        "filterConvertFormat": "DD MMMM YYYY"
     }
 }

index.js

@@ -3,7 +3,7 @@ import config from './config.json'
 import {merge} from './src/helpers/helper.js'
 
 export default {
-    install(vue, settings) {
+    install(vue, settings = {}) {
 
         // overwrite config props to settings props
         window.__vcf_settings = merge(config, settings)

src/filters.js

@@ -1,9 +1,10 @@
 import { fromNow, format, to, from, add, substract } from './filters/datetime'
 import { search, ats, aots } from './filters/array'
-import { truncate, trim, capitalize, uppercase, lowercase} from './filters/text'
+import { truncate, trim, capitalize, uppercase, lowercase, placeholder} from './filters/text'
 import { currency, decimal } from './filters/numbers'
 
 export default {
+
     // Date and time filters
     "formatDate": format,
     "fromNow": fromNow,
@@ -14,8 +15,8 @@ export default {
 
     // Array filters
     "search": search,
-    "ats": ats,
-    "aots": aots,
+    "implode": ats,
+    "implodeObject": aots,
 
     // Numbers
     "currency": currency,
@@ -26,6 +27,7 @@ export default {
     "trim": trim,
     "capitalize": capitalize,
     "uppercase": uppercase,
-    "lowercast": lowercase
+    "lowercast": lowercase,
+    "placeholder": placeholder
 
 }

src/filters/array.js

@@ -11,7 +11,10 @@ export function search(v, str) {
     return result 
 }
 
-export function ats(v, delimiter) {
+export function ats(v, delimiter = null) {
+    
+    delimiter = delimiter || window.__vcf_settings.dates.implodeDelimiter
+    
     let result = ''
 
     for (const str in v) {
@@ -26,7 +29,8 @@ export function ats(v, delimiter) {
     return result
 }
 
-export function aots(v, key, delimiter) {
+export function aots(v, key, delimiter = null) {
+    delimiter = delimiter || window.__vcf_settings.dates.implodeDelimiter
     let result = ''
     for (const i in v) {
         if(v[i][key]){