From 358d348b5531bf41ef07e68ec180129634a36a94 Mon Sep 17 00:00:00 2001 From: Heitor Ramon Ribeiro Date: Mon, 3 Sep 2018 23:06:29 -0300 Subject: [PATCH 1/3] Added Mask Directive Documentation --- source/components/input-mask.md | 44 +++++++++++++++++++++++++++++++++ 1 file changed, 44 insertions(+) create mode 100644 source/components/input-mask.md diff --git a/source/components/input-mask.md b/source/components/input-mask.md new file mode 100644 index 00000000..9f60a290 --- /dev/null +++ b/source/components/input-mask.md @@ -0,0 +1,44 @@ +title: Directive "v-mask" +--- +This directives can take an String or an Array of tokens, to be used as a masked input. + +When the directive is applied all the response of the Input will be the masked value. + +## Installation +Edit `/quasar.conf.js`: +```js +framework: { + directives: ['Mask'] +} +``` + +## Basic Usage +``` html + +... + + +... +``` + +### Mask Tokens + +##### Numeric +``` +'#' => [0-9] or '*' +'0' => [0-9] +'9' => [0-9] +``` + +##### Alphanumeric +``` +'X' => [0-9a-zA-Z] +'S' => [a-zA-Z] +'A' => [a-zA-Z] Uppercased +'a' => [a-zA-Z] Lowercased +``` + +##### Escaped Token +``` +'!' => Escape a Token +``` From 8516cfb90bf32707a9972a3715fd436117e65deb Mon Sep 17 00:00:00 2001 From: Heitor Ramon Ribeiro Date: Wed, 5 Sep 2018 22:04:53 -0300 Subject: [PATCH 2/3] Added Object Config --- source/components/input-mask.md | 43 ++++++++++++++++++++++++++++++++- 1 file changed, 42 insertions(+), 1 deletion(-) diff --git a/source/components/input-mask.md b/source/components/input-mask.md index 9f60a290..bea4de4e 100644 --- a/source/components/input-mask.md +++ b/source/components/input-mask.md @@ -18,10 +18,51 @@ framework: { ... + ... ``` +### String Mask +If you want to have a simple mask, the directive can be called with a `string of tokens. -### Mask Tokens +``` html + +... + +... +``` + +### Array Mask +If you need to have a dynamic mask, that need to be placed on the length of the string. You can pass to the directive an `array` of token `trings`. + +``` html + +... + +... +``` + +### Object Mask +If you mask need to have a custom rule, or an custom settings, you can pass an `object` as a value. + +The object need to have two properties, `mask` and `tokens`. +`mask` can be an `string` or an `array` of `strings`. + +`tokens` need to be an `object` with each key being a regex pattern. + +```html + +``` + +```JS +{ + mask: '##-@@-SS', + tokens: { + '@': { + pattern: /[0-9a-zA-Z]/ + } + } +} +``` ##### Numeric ``` From 1d9a41bbf4a7b1c8b60612059e1321b4d3565358 Mon Sep 17 00:00:00 2001 From: Scott Date: Thu, 6 Sep 2018 13:16:38 +0200 Subject: [PATCH 3/3] Update input-mask.md (#1) Helped with the grammar some. Scott --- source/components/input-mask.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/source/components/input-mask.md b/source/components/input-mask.md index bea4de4e..f0c029a0 100644 --- a/source/components/input-mask.md +++ b/source/components/input-mask.md @@ -1,8 +1,8 @@ title: Directive "v-mask" --- -This directives can take an String or an Array of tokens, to be used as a masked input. +This directives can take a String or an Array of tokens and can use them to create a specialized masked input. -When the directive is applied all the response of the Input will be the masked value. +When the directive is applied, the value of the input will be kept in line with the masked value. This is great for adding, for instance, a mask for a telephone number input. ## Installation Edit `/quasar.conf.js`: @@ -22,7 +22,7 @@ framework: { ... ``` ### String Mask -If you want to have a simple mask, the directive can be called with a `string of tokens. +If you want to have a simple mask, the directive can be called with a `string of tokens`. ``` html @@ -32,7 +32,7 @@ If you want to have a simple mask, the directive can be called with a `string of ``` ### Array Mask -If you need to have a dynamic mask, that need to be placed on the length of the string. You can pass to the directive an `array` of token `trings`. +If you need to have a dynamic mask that needs to be placed on the length of the string. You can pass an `array` of token `strings` to the directive. ``` html @@ -42,10 +42,10 @@ If you need to have a dynamic mask, that need to be placed on the length of the ``` ### Object Mask -If you mask need to have a custom rule, or an custom settings, you can pass an `object` as a value. +If your mask needs to have a custom rule, or a custom setting, you can pass an `object` as the masking value. -The object need to have two properties, `mask` and `tokens`. -`mask` can be an `string` or an `array` of `strings`. +The object needs to have two properties, `mask` and `tokens`. +`mask` can be a `string` or an `array` of `strings`. `tokens` need to be an `object` with each key being a regex pattern.