From 80b25a0ce7a7896a87cc4390fbbb876148c0a51b Mon Sep 17 00:00:00 2001
From: Alexander Shabunevich <loonar@gmail.com>
Date: Fri, 27 Sep 2019 22:12:19 +0300
Subject: [PATCH] Updated docs and readme

- add autocomplete attributes and 'tel' type
---
 README.md      | 15 ++++++++++++++-
 docs/index.htm | 18 +++++++++++-------
 2 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index 3aa6efb..5a1f00d 100644
--- a/README.md
+++ b/README.md
@@ -12,6 +12,12 @@ Simple zero-dependency input mask for Vue.js and vanilla JS. [Demo and examples]
 
     npm install maska
 
+To load latest version from CDN you can use:
+
+``` html
+<script src="https://cdn.jsdelivr.net/npm/maska/dist/maska.js"></script>
+```
+
 ## Usage with Vue.js
 
 If you load Vue.js via `<script>` then just add `v-maska` directive to your input:
@@ -26,7 +32,14 @@ You can add custom tokens by passing in object instead of string to directive:
 <input v-maska="{ mask: 'Z*', tokens: { 'Z': { pattern: /[а-яА-Я]/ }}}">
 ```
 
-If you use SFC then import `directive` component from library:
+With bundlers you can add global directive:
+
+``` javascript
+import Maska from 'maska'
+Vue.use(Maska)
+```
+
+or import `maska` directive for local usage in component:
 
 ``` html
 <template>
diff --git a/docs/index.htm b/docs/index.htm
index 792e58d..18dfe24 100644
--- a/docs/index.htm
+++ b/docs/index.htm
@@ -23,16 +23,16 @@
                 <div class="box">
                     <form id="vue-form">
                         <div class="field">
-                            <label class="label">Phone with code</label>
+                            <label class="label">Phone with code: {{ phone }}</label>
                             <div class="control">
-                                <input v-maska="'+1 (###) ###-##-##'" value="12345678901" class="input">
+                                <input v-maska="'+1 (###) ###-##-##'" class="input" type="tel" autocomplete="tel" v-model="phone">
                             </div>
                             <p class="help is-family-code">v-maska="'+1 (###) ###-##-##'"</p>
                         </div>
                         <div class="field">
-                            <label class="label">Hex color (custom tokens)</label>
+                            <label class="label">Hex color (custom tokens): {{ color }}</label>
                             <div class="control">
-                                <input v-maska="{ mask: '!#HHHHHH', tokens: { 'H': { pattern: /[0-9a-fA-F]/, uppercase: true }}}" class="input">
+                                <input v-maska="{ mask: '!#HHHHHH', tokens: { 'H': { pattern: /[0-9a-fA-F]/, uppercase: true }}}" class="input" v-model="color">
                             </div>
                             <p class="help is-family-code">v-maska="{ mask: '!#HHHHHH', tokens: { 'H': { pattern: /[0-9a-fA-F]/, uppercase: true }}}"</p>
                         </div>
@@ -47,7 +47,7 @@
                                 <div class="field">
                                     <label class="label">Phone with code</label>
                                     <div class="control">
-                                        <input data-mask="+1 (###) ###-####" class="masked input">
+                                        <input data-mask="+1 (###) ###-####" class="masked input" type="tel" autocomplete="tel">
                                     </div>
                                     <p class="help is-family-code">data-mask="+1 (###) ###-####"</p>
                                 </div>
@@ -96,12 +96,16 @@
         </div>
     </section>
 
-    <script src="https://cdn.jsdelivr.net/npm/vue@2.6"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/maska/dist/maska.js"></script>
     <script>
         // vue
         new Vue({
-            el: '#vue-form'
+            el: '#vue-form',
+            data: {
+                phone: '19992345678',
+                color: null
+            }
         });
 
         // vanilla default