PlaceholderChar customize added

niksmr · niksmr · commit 83236c585a4c · 2017-02-02T23:33:29.000+04:00
diff --git a/README.md b/README.md
@@ -32,6 +32,11 @@ You can also get a raw user input text if you want. Instead of using v-model you
 <masked-input mask="+\\1 (111) 1111-11" placeholder="Phone" @input="rawVal = arguments[1]" />
 ```
 
+Placeholder character is customizable (`_` by default):
+```vue
+<masked-input v-model="phone" mask="+\\1 (111) 111-1111" placeholderChar="-" placeholder="Phone number" type="tel" />
+```
+
 ## Known issues/TODO
 * Cut in mobile Chrome
 * Cyrillic chars are not supported in mobile Chrome
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
     "name": "vue-masked-input",
     "description": "Masked input component for Vue.js 2.X",
-    "version": "0.2.3",
+    "version": "0.2.4",
     "author": "niksmr",
     "license": "MIT",
     "homepage": "https://github.com/niksmr/vue-masked-input",
diff --git a/src/App.vue b/src/App.vue
@@ -15,7 +15,7 @@
     <li># – alphanumeric, forced to upper case when entered</li>
   </ul>
   <h4>Date: </h4>
-  <masked-input v-model="date" mask="11 / 11 / 1111" placeholder="Date"/><span v-if="">{{ date }}</span>
+  <masked-input v-model="date" mask="11 / 11 / 1111" placeholder="Date"/><span>{{ date }}</span>
   <p class="code">
     &lt;masked-input v-model="date" mask="11 / 11 / 1111" placeholder="Date" /&gt;
   </p>
diff --git a/src/MaskedInput.vue b/src/MaskedInput.vue
@@ -40,11 +40,13 @@ export default {
     },
     mask: {
       type: String,
-      required: true
+      required: true,
+      validator:  value => !! (value && value.length >= 1)
     },
     placeholderChar: {
       type: String,
-      default: '_'
+      default: '_',
+      validator:  value => !! (value && value.length === 1)
     },
   },
 
@@ -95,8 +97,9 @@ export default {
         this.$emit('input', this.default, this.default)
       }
       catch (e) {
+        console.error(e.message);
         this.mask_core = null
-        this.$refs.input.value = '0 editable chars in mask'
+        this.$refs.input.value = 'Error, see console'
         this.$emit('input', this.$refs.input.value, '')
       }
     },
diff --git a/src/ff-polyfill.js b/src/ff-polyfill.js
@@ -1,5 +1,5 @@
 //https://gist.github.com/nuxodin/9250e56a3ce6c0446efa
-export default function () {
+export default () => {
   var w = window,
     d = w.document;
 

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "vue-masked-input",`
`3`	`3`	`"description": "Masked input component for Vue.js 2.X",`
`4`		`- "version": "0.2.3",`
	`4`	`+ "version": "0.2.4",`
`5`	`5`	`"author": "niksmr",`
`6`	`6`	`"license": "MIT",`
`7`	`7`	`"homepage": "https://github.com/niksmr/vue-masked-input",`