v.1.0.0

Author: Irfan Maulana

.babelrc

@@ -0,0 +1,5 @@
+{	
+  "presets": [
+    "env"
+  ]
+}

.travis.yml

@@ -0,0 +1,6 @@
+language: node_js
+node_js: '7'
+script: npm run test
+after_script:
+  - npm install -g codecov
+  - codecov

App.vue

@@ -5,69 +5,23 @@
 
 		<div class="app">
     	<div class="grid__row content centered">
-	      <h1>Lightweight and Customizable Vue Currency Filter Plugins By Irfan Maulana</h1>
+	      <h1>Lightweight Vue 2 String Manipulation Filter By Irfan Maulana</h1>
 
-				<h2>Example : </h2>
-				<input type="tel" pattern="[0-9]*" v-model="textInput" class="textfield textfield--shadow"/>
-	      
-				<div><b>Before filter</b> : {{ textInput }}</div>
-	      <div>
-					<b>After filter</b> : 
-					<b class="result__filter">{{ textInput | currency(configSymbol, configSeparator, configFractionCount, configFractionSeparator, configSymbolPosition, configSymbolSpacing) }}</b>
-				</div>
-
-				<h2>Customize Config :</h2>
-				<div class="form__group">
-					<div class="form__icon form__icon--radius-left">
-						Symbol
-					</div>
-					<input class="textfield" type="text" v-model="configSymbol">                
-				</div>
-				
-				<div class="form__group">
-					<div class="form__icon form__icon--radius-left">
-						Separator
-					</div>
-					<input class="textfield" type="text" v-model="configSeparator">                
-				</div>
-
-				<div class="form__group">
-					<div class="form__icon form__icon--radius-left">
-						Fraction Count
-					</div>
-					<input class="textfield" type="tel" pattern="[0-9]*" v-model="configFractionCount">                
-				</div>
 
-				<div class="form__group">
-					<div class="form__icon form__icon--radius-left">
-						Fraction Separator
-					</div>
-					<input class="textfield" type="text" v-model="configFractionSeparator">                
+				<div>
+					<b>Before filter</b> : {{ textInput }}
 				</div>
-
-				<div class="form__group m-b-5">
-					<div class="form__icon form__icon--radius-left">
-						Symbol Position
-					</div>
-					<div class="form__wrapper">
-						<input class="radio radio--blue" type="radio" id="radio-form-1" name="radio-symbol" v-model="configSymbolPosition" v-bind:value="'front'">
-						<label for="radio-form-1">Front</label>
-						<input class="radio radio--blue" type="radio" id="radio-form-2" name="radio-symbol" v-model="configSymbolPosition" v-bind:value="'back'">
-						<label for="radio-form-2">End of text</label>                   
-					</div>                
+	      <div>
+					<b>Uppercase</b> : <b class="result__uppercase">{{ textInput | uppercase }}</b>
+					<br>
+					<b>Lowercase</b> : <b class="result__lowercase">{{ textInput | lowercase }}</b>
+					<br>
+					<b>Capitalize</b> : <b class="result__capitalize">{{ textInput | capitalize }}</b>
+					<br>
+					<b>Titlecase</b> : <b class="result__titlecase">{{ textInput | titlecase }}</b>
+					<br>
 				</div>
 
-				<div class="form__group m-b-5">
-					<div class="form__icon form__icon--radius-left">
-						Symbol Spacing
-					</div>
-					<div class="form__wrapper">
-						<input class="radio radio--blue" type="radio" id="radio-form-3" name="radio-spacing" v-model="configSymbolSpacing" v-bind:value="true">
-						<label for="radio-form-3">Yes</label>
-						<input class="radio radio--blue" type="radio" id="radio-form-4" name="radio-spacing" v-model="configSymbolSpacing" v-bind:value="false">
-						<label for="radio-form-4">No</label>                   
-					</div>                
-				</div>
 
       </div>
     </div>
@@ -84,29 +38,13 @@ export default {
   name: 'app',
   data () {
     return {
-			textInput: 20000,
-			configSymbol: '$',
-			configSeparator: '.',
-			configFractionCount: 0,
-			configFractionSeparator: ',',
-			configSymbolPosition: 'front',
-			configSymbolSpacing: true
+			textInput: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
     }
   }
 }
-
 </script>
 
 <style lang="scss">
-.form__group{
-	max-width: 500px;
-}
-.form__icon{
-	width: 180px;
-}
-.form__wrapper{
-	margin-left: 5px;
-}
 .m-b-5{
 	margin-bottom: 5px;
 }

README.md

@@ -22,6 +22,7 @@
 + `uppercase`
 + `lowercase`
 + `capitalize`
++ `titlecase`
 
 ## Download
 
@@ -48,7 +49,10 @@ Vue.use(VueStringFilter)
 #### Use in View :
 
 ```html
-<span>{{ 20000 | currency}}</span>
+<span>{{ stringWillFormatted | uppercase }}</span>
+<span>{{ stringWillFormatted | lowercase }}</span>
+<span>{{ stringWillFormatted | capitalize }}</span>
+<span>{{ stringWillFormatted | titlecase }}</span>
 ```
 
 

VueStringFilter.js

@@ -1,23 +1,26 @@
 const VueStringFilter = {
-  install (Vue, options) {
-
-    // helper to check undefined variable
-    function _isUndefined (obj) {
-      return typeof obj === "undefined"
-    }
-
-    if(_isUndefined(options)) options = {}
+  install(Vue, options) {
 
     Vue.filter('lowercase', function (value) {
-      return value
+
+      return value.toString().toLowerCase()
     })
 
     Vue.filter('uppercase', function (value) {
-      return value
+
+      return value.toString().toUpperCase()
     })
 
     Vue.filter('capitalize', function (value) {
-      return value
+
+      return value.charAt(0).toUpperCase() + value.slice(1)
+    })
+
+    Vue.filter('titlecase', function (value) {
+
+      return value.replace(/\w\S*/g, function (txt) { 
+        return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase() 
+      })
     })
 
   }