chore: update readme file

Author: RonaldJerez

README.md

@@ -4,69 +4,97 @@ A lightweight and dependency free input facade created specific for Vue
 
 ## [Docs and Demo](https://ronaldjerez.github.io/vue-input-facade)
 
-## Install
+## Installing
 
 ```
-yarn add vue-input-facade
-or
 npm i vue-input-facade
+or
+yarn add vue-input-facade
 ```
 
-## Usage (two flavors)
+## Importing
 
-### Global
+### Globally
+
+installs the component, directive and filter for your entire application.
 
 ```javascript
 import InputFacade from 'vue-input-facade'
 Vue.use(InputFacade)
 ```
 
-### Local (inside the component)
+### Locally
 
 ```javascript
-import { InputFacade } from 'vue-input-facade'
+import { InputFacade, facade, masker } from 'vue-input-facade'
 export default {
-  components: { InputFacade }
+  components: { InputFacade },
+  directives: { facade },
+  filters: { facade: masker }
 }
 ```
 
-### Local (as directive)
+## Usage
 
-```javascript
-import { facade } from 'vue-input-facade'
-export default {
-  directives: { facade }
-}
+### Component
+
+```html
+<label>Phone Number</label>
+<input-facade mask="(###) ###-####" name="phoneNumber" type="tel" masked />
 ```
 
-### Local (as filter)
+### Directive
 
-```javascript
-import { masker } from 'vue-input-facade'
-export default {
-  filters: { facade: masker }
-}
+```html
+<label>Date</label>
+<input type="text" v-facade="'##/##/##'" />
 ```
 
-## Tokens
+See [demo page](https://ronaldjerez.github.io/vue-input-facade) for more usage example
+
+## Default Tokens
+
++ `S` = alpha characters
++ `#` = numerical characters
++ `X` = alpha numerical characters
++ `A` = alpha characters, forced to uppercase
++ `a` = alpha characters, forced to lowercase
++ `\` = escape any of the above characters
+
+See the [token source file](src/tokens.js) for definition signature
+
+## Component Properties
+
+Inherits from [HTMLInputElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement), plus adds these additional properties:
+
+| Property    | Required | Type          | Default                 | Description                                |
+| ----------- | -------- | ------------- | ----------------------- | ------------------------------------------ |
+| mask        | false    | String, Array |                         | Mask pattern                               |
+| masked      | false    | Boolean       | false                   | emit value with mask chars, default is raw |
+| tokens      | false    | Object        | [tokens](src/tokens.js) | Custom tokens for mask                     |
+
+## Migrating Existing Project
+
+If you are migrating an existing project to vue-input-facade from another plugin and dont want to touch the whole codebase.  You may pass options during plugin installation to override the default tokens or directive name.
 
 ```javascript
-'#': {pattern: /\d/},
-'X': {pattern: /[0-9a-zA-Z]/},
-'S': {pattern: /[a-zA-Z]/},
-'A': {pattern: /[a-zA-Z]/, transform: v => v.toLocaleUpperCase()},
-'a': {pattern: /[a-zA-Z]/, transform: v => v.toLocaleLowerCase()},
-'!': {escape: true}
-```
+import InputFacade from 'vue-input-facade'
 
-## Properties
+// migrating from v-mask
+// the directive will now be v-mask instead of v-facade
+// and all the tokens will be replaced globally by the following
+const options = {
+  name: 'mask',
+  tokens: {
+    '#': { pattern: /\d/ },
+    'A': { pattern: /[a-zA-Z]/ },
+    'N': { pattern: /[0-9a-zA-Z]/ },
+    'X': { pattern: /./ }
+  }
+}
 
-| Property    | Required | Type          | Default           | Description                                |
-| ----------- | -------- | ------------- | ----------------- | ------------------------------------------ |
-| value       | false    | String        |                   | Input value or v-model                     |
-| mask        | false    | String, Array |                   | Mask pattern                               |
-| masked      | false    | Boolean       | false             | emit value with mask chars, default is raw |
-| tokens      | false    | Object        | [tokens](#tokens) | Custom tokens for mask                     |
+Vue.use(InputFacade, options)
+```
 
 ## Thanks
 

src/docs/App.vue

@@ -119,17 +119,6 @@ hexTokens: {
         >
       </div>
 
-      <h1 id="tokens">Tokens</h1>
-      <pre>
-    '#': {pattern: /\d/},
-    'X': {pattern: /[0-9a-zA-Z]/},
-    'S': {pattern: /[a-zA-Z]/},
-    'A': {pattern: /[a-zA-Z]/, transform: v => v.toLocaleUpperCase()},
-    'a': {pattern: /[a-zA-Z]/, transform: v => v.toLocaleLowerCase()},
-    '!': {escape: true}
-    </pre
-      >
-
       <h1>Try it now</h1>
       <div class="equal width fields">
         <div class="field">