Skip to content

Commit 9095837

Browse files
committed
docs: slight updates to documentation
1 parent 7e3de5f commit 9095837

File tree

3 files changed

+29
-6
lines changed

3 files changed

+29
-6
lines changed

README.md

Lines changed: 23 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -84,11 +84,31 @@ See the [token source file](https://github.com/RonaldJerez/vue-input-facade/blob
8484
<input type="text" v-facade="'##/##/##'" />
8585
```
8686

87-
See [demo page](https://ronaldjerez.github.io/vue-input-facade) for more usage examples
87+
### Migrating existing projects
8888

89-
## Thanks
89+
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.
9090

91-
Thanks to [Marcos Neves](https://vuejs-tips.github.io/) for the vue-the-mask component of which this vue-input-facade was originally forked from.
91+
```javascript
92+
import InputFacade from 'vue-input-facade'
93+
94+
// migrating from v-mask
95+
const options = {
96+
// rename the directive from: v-facade to: v-mask
97+
name: 'mask',
98+
99+
// use these tokens instead of the default
100+
tokens: {
101+
'#': { pattern: /\d/ },
102+
'A': { pattern: /[a-z]/i },
103+
'N': { pattern: /[0-9a-z]/i },
104+
'X': { pattern: /./ }
105+
}
106+
}
107+
108+
Vue.use(InputFacade, options)
109+
```
110+
111+
See [demo page](https://ronaldjerez.github.io/vue-input-facade) for more usage examples
92112

93113
## Contribution
94114

docs/advanced.md

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,11 @@ If you are migrating an existing project to vue-input-facade from another plugin
66
import InputFacade from 'vue-input-facade'
77

88
// migrating from v-mask
9-
// the directive will now be v-mask instead of v-facade
10-
// and all the tokens will be replaced globally by the following
119
const options = {
10+
// rename the directive from: v-facade to: v-mask
1211
name: 'mask',
12+
13+
// use these tokens instead of the default
1314
tokens: {
1415
'#': { pattern: /\d/ },
1516
'A': { pattern: /[a-z]/i },

docs/directive.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
For times when you cannot use the component, you may use the directive instead. The directive has all the same features as the component, however the interface may not be as straight forward as using a component.
1+
For times when you cannot use the component, you may use the directive instead. The directive has all the same features as the component, however the interface may not be as straight forward as using a component. The `prefill` and `short` features may passed in to the directive as modifiers.
22

33
### Basic usage
44

@@ -16,6 +16,8 @@ let value = '12A789MM'
1616

1717
You have access to the unmasked value via the input event. The `unmaskedValue` property can be found as part of the `target` property of the input event.
1818

19+
> Note: Some 3rd party components may not pass the `event` parameter when emitting input, such is the case with vuetify's v-text-input. In this case you can listen to the native event so you can still access the unmasked value. ex: `v-on:input.native="handler"`.
20+
1921
```js
2022
let event = ''
2123

0 commit comments

Comments
 (0)