v.1.1.0 #1 add slug filter

Author: Irfan Maulana

App.vue

@@ -9,16 +9,18 @@
 
 
 				<div>
-					<b>Before filter</b> : {{ textInput }}
+					<b>Before filter</b>: {{ textInput }}
 				</div>
 	      <div>
-					<b>Uppercase</b> : <b class="result__uppercase">{{ textInput | uppercase }}</b>
+					<b>Uppercase</b>: <span class="result__uppercase">{{ textInput | uppercase }}</span>
 					<br>
-					<b>Lowercase</b> : <b class="result__lowercase">{{ textInput | lowercase }}</b>
+					<b>Lowercase</b>: <span class="result__lowercase">{{ textInput | lowercase }}</span>
 					<br>
-					<b>Capitalize</b> : <b class="result__capitalize">{{ textInput | capitalize }}</b>
+					<b>Capitalize</b>: <span class="result__capitalize">{{ textInput | capitalize }}</span>
 					<br>
-					<b>Titlecase</b> : <b class="result__titlecase">{{ textInput | titlecase }}</b>
+					<b>Titlecase</b>: <span class="result__titlecase">{{ textInput | titlecase }}</span>
+					<br>
+					<b>Slug</b>: <span class="result__slug">{{ textInput | slug }}</span>
 					<br>
 				</div>
 

README.md

@@ -23,6 +23,7 @@
 + `lowercase`
 + `capitalize`
 + `titlecase`
++ `slug`
 
 ## Download
 
@@ -53,6 +54,7 @@ Vue.use(VueStringFilter)
 <span>{{ stringWillFormatted | lowercase }}</span>
 <span>{{ stringWillFormatted | capitalize }}</span>
 <span>{{ stringWillFormatted | titlecase }}</span>
+<span>{{ stringWillFormatted | slug }}</span>
 ```
 
 

VueStringFilter.js

@@ -22,6 +22,20 @@ const VueStringFilter = {
         return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase() 
       })
     })
+    
+    Vue.filter('slug', function (value) {
+      
+      // credit for gist : https://gist.github.com/mathewbyrne/1280286
+      let result = value.toString()
+                        .toLowerCase()
+                        .trim()
+                        .replace(/&/g, '-and-') //
+                        .replace(/[\s\W-]+/g, '-')
+                        .replace(/--+/g, '-')
+                        .replace(/^-+|-+$/g, '')
+                        
+      return result
+    })
 
   }
 }

dist/VueStringFilter.bundle.js

@@ -1,7 +1,7 @@
 {
   "name": "vue-string-filter",
   "description": "Lightweight Vue 2 String Manipulation Filter",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "license": "MIT",
   "author": "Irfan Maulana (https://github.com/mazipan/)",
   "homepage": "https://mazipan.github.io/vue-string-filter/",