New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
vuetify-masked
Advanced tools
vuetify-masked - npm Package Compare versions
Comparing version 0.0.3 to 1.0.0
| { | ||
| "name": "vuetify-masked", | ||
| "description": "vuetify masked textfield and filter", | ||
| "version": "0.0.3", | ||
| "version": "1.0.0", | ||
| "author": "Kim Mannstedt <k.mannstedt+dev@gmail.com>", | ||
@@ -6,0 +6,0 @@ "license": "MIT", |
120
README.md
@@ -5,3 +5,3 @@ # vuetify-masked | ||
| # Install | ||
| ## Install | ||
@@ -11,3 +11,3 @@ ``` | ||
| ``` | ||
| ## Global | ||
| ### Global | ||
| ```javascript | ||
@@ -20,3 +20,3 @@ import Vue from 'vue' | ||
| ## Local | ||
| ### Local | ||
| ```javascript | ||
@@ -38,39 +38,95 @@ // use only the component | ||
| ``` | ||
| # Usage | ||
| ## Usage | ||
| Once installed, for a simple mask the component can be used in a template as simple as: | ||
| ### Type 'text' | ||
| ```javascript | ||
| <!-- Component --> | ||
| <v-text-field-masked | ||
| v-model="text" | ||
| formatMask="ADDD-ul/#####" | ||
| :properties="{ | ||
| readonly: false, | ||
| disabled: false, | ||
| outlined: false, | ||
| clearable: true, | ||
| }" | ||
| label="Masked Text" | ||
| formatMask="###A/##l/D#U" | ||
| label="default type (text)" | ||
| ></v-text-field-masked> | ||
| <!-- Filter --> | ||
| {{ text | vuetifyMaskedFilter({ formatMask: "ADDD-ul/#####" }) }} | ||
| ``` | ||
| The filter can be used by the following: | ||
| Resulted value for '123A56U89a' is '123A/56u/89A'. | ||
| ### Type 'float' | ||
| ```javascript | ||
| {{ text | vuetifyMaskedFilter({ formatMask: "ADDD-ul/#####", type: "text" }) }} | ||
| <v-text-field-masked | ||
| v-model="text" | ||
| formatMask="###A/##l/D#U" | ||
| label="float type" | ||
| type="float" | ||
| ></v-text-field-masked> | ||
| <!-- Filter --> | ||
| {{ text | vuetifyMaskedFilter({ type:"float" }) }} | ||
| ``` | ||
| Resulted value for '1234567890' is '1,234,567,890.00' | ||
| # Options (Component Props and Filter Parameters | ||
| ### Type 'integer' | ||
| ```javascript | ||
| <v-text-field-masked | ||
| v-model="text" | ||
| formatMask="###A/##l/D#U" | ||
| label="integer type" | ||
| type="integer" | ||
| ></v-text-field-masked> | ||
| <!-- Filter --> | ||
| {{ text | vuetifyMaskedFilter({ type:"integer" }) }} | ||
| ``` | ||
| Resulted value for '1234567890' is '1,234,567,890' | ||
| ### Type 'currency' | ||
| ```javascript | ||
| <v-text-field-masked | ||
| v-model="text" | ||
| formatMask="###A/##l/D#U" | ||
| label="currency type" | ||
| type="currency" | ||
| ></v-text-field-masked> | ||
| <!-- Filter --> | ||
| {{ text | vuetifyMaskedFilter({ type:"currency" }) }} | ||
| ``` | ||
| Resulted value for '1234567890' is '1,234,567,890.00USD' | ||
| ### Type 'percentage' | ||
| ```javascript | ||
| <v-text-field-masked | ||
| v-model="text" | ||
| formatMask="###A/##l/D#U" | ||
| label="percentage type" | ||
| type="percentage" | ||
| ></v-text-field-masked> | ||
| <!-- Filter --> | ||
| {{ text | vuetifyMaskedFilter({ type:"percentage" }) }} | ||
| ``` | ||
| Resulted value for '1234567890' is '1,234,567,890.00%' | ||
| ## Options (Component Props and Filter Parameters | ||
| The following options can be used for component and filter | ||
| |Option |type |Default |Component |Filter |Description | | ||
| |Option |Type |Default |Component |Filter |Description | | ||
| |:-------------|:--- |:-----------------|:----------|:------|:-----------| | ||
| |v-model |string, number |``null`` |yes |no | | | ||
| |formatMask |string, object |``'##########'`` |yes |no |Used to mask the given value. Meaining of characters and usable aatributes for obecjt can be foudn below table| | ||
| |deformatMask |string, object |``null`` |yes |no |Mask used to deformat the masked value. If null all characters of the masked will be removed | | ||
| |type |string |``'text'`` |yes |yes |5 types exist: text, float, integer, currency, and percentage | | ||
| |empty |string |``null`` |yes |no |Value returned for an empty text field| | ||
| |falseCharWildcard|string |``''`` |yes |yes |False characters of the provided v-model/value will be replaced with this one. By default they will simply be deleted.| | ||
| |formatMask |string, object |``'##########'`` |yes |yes |Used to mask the given value. Meaining of characters and usable aatributes for obecjt can be foudn below table| | ||
| |hints |object ||yes|no| Hints will be displayed depending on the cursor position and according to the next possible character that can be entered. | | ||
| |length |number |``null`` |yes |no |Max number of digits (including precision) that can be entered into the text field. Ignored for type text.| | ||
| |locale |string |``'en-EN'`` |yes |yes |Used to determine the decimal and thousands seperator. | | ||
| |maskCharacter |array |``['-', '.', ',', ' ', '/', '(', ')', '_', '\\', '\'', '~', '*', '&', '"', '?']``|yes|no|Characters of the mask. Can not be used as input character for the text field. Used for both, formatMask and deformatMask.| | ||
| |empty |string |``null`` |yes |no |Value returned for an empty text field| | ||
| |precision |number |``2`` |yes |yes |Precision used for numbers. Ingored for types text and integer.| | ||
| |length |number |``null`` |yes |no |Max number of digits (including precision) that can be entered into the text field. Ignored for Type text.| | ||
| |properties |object |``null`` |yes |no |Properties for the v-text-field used by vuetify-masked| | ||
| |suffix |string |``null`` (text, integer, float)<br/>``'%'`` (percentage)<br/>``'USD'``(currency)|yes|yes|| | ||
| |falseCharWildcard|string |``''`` |yes |yes |False characters of the provided v-model/value will be replaced with this one. By default they will simply be deleted.| | ||
| |hints |object |<code>{<br/>digit: 'The next char is a digit',<br/>alphabetic: 'The next char is alphabetic',<br/>lowerCase: 'The next char is lower case',<br/>upperCase: 'The next char is upper case',<br/>alphanumeric: 'The next char is alphanumeric',<br/>numeric: null,<br/>maxLength: 'Max number of characters reached'<br/>}</code>|yes|no| Hints will be displayed depending on the cursor position and according to the next possible character that can be entered. | | ||
| |type |string |``'text'`` |yes |yes |5 types exist: text, float, integer, currency, and percentage | | ||
| |value |string, number |``null`` |yes |yes |Mapped to the v-model of the component| | | ||
| |v-model |string, number |``null`` |yes |no | | | ||
| ## Predefind Mask Characters | ||
| ### Predefined Mask Characters | ||
| |Character|Description| | ||
@@ -86,5 +142,5 @@ |---------|-----------| | ||
| ## Object Attributes for Mask | ||
| ### Object Attributes for Mask | ||
| In case of an object, the following attributes can be set. | ||
| |Attribute|type|Description| | ||
| |Attribute|Type|Description| | ||
| |---------|----|-----------| | ||
@@ -98,3 +154,11 @@ |mask|string|Character of the mask.| | ||
| # Examples | ||
| Examples will be added soon. | ||
| ### Hints Object Attributes and Default Values | ||
| |Attribute |Type |Default|Description| | ||
| |------------|------|-------|-----------| | ||
| |alphabetic |string|``'The next char is alphabetic'``|By default used for ``'A'``| | ||
| |alphanumeric|string|``'The next char is alphanumeric'``|By default used for ``'#'`` | ||
| |digit |string|``'The next char is a digit'``|By default used for ``'D'``| | ||
| |lowerCase |string|``'The next char is lower case'``|By default used for ``'l'``| | ||
| |maxLength |string|``'Max number of characters reached'``|| | ||
| |numeric |string|``null``|Only used for types float, integer, currency, and percentage| | ||
| |upperCase |string|``'The next char is upper case'``|By default used for ``'U'``| |
@@ -12,3 +12,2 @@ import { formatFloat, formatText } from "./utils/formatter"; | ||
| locale: 'en-EN', | ||
| length: null, | ||
| suffix: null, | ||
@@ -65,9 +64,13 @@ falseCharWildcard: '' | ||
| function cmpSuffix() { | ||
| if(globalOptions.type === 'percentage') { | ||
| return globalOptions.suffix || '%' | ||
| } else if(globalOptions.type === 'currency') { | ||
| return globalOptions.suffix || 'USD' | ||
| } else { | ||
| return globalOptions.suffix || '' | ||
| } | ||
| } | ||
| export default (value, options) => { | ||
| /* | ||
| TODO | ||
| * assign default options to options | ||
| * format the value with the correct options | ||
| */ | ||
| globalOptions = Object.assign(globalOptions, options) | ||
@@ -83,3 +86,3 @@ | ||
| return result | ||
| return result + cmpSuffix() | ||
| } |
Fixed alerts
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by6.05%
34767
- Lines of code
- increased by1.42%
214
- Number of low quality alerts
- decreased by-100%
0
- Number of lines in readme file
- increased by67.37%
159
No dependency changes