Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
vue-input-facade
Advanced tools
vue-input-facade - npm Package Compare versions
Comparing version 1.0.1 to 1.0.2
| { | ||
| "name": "vue-input-facade", | ||
| "version": "1.0.1", | ||
| "version": "1.0.2", | ||
| "description": "A lightweight and dependency free input facade created specific for Vue", | ||
@@ -5,0 +5,0 @@ "main": "dist/vue-input-facade.umd.min.js", |
@@ -7,14 +7,16 @@ # Vue Input Facade | ||
| ## Install | ||
| ## Installing | ||
| ``` | ||
| npm i vue-input-facade | ||
| or | ||
| yarn add vue-input-facade | ||
| or | ||
| npm i vue-input-facade | ||
| ``` | ||
| ## Usage (two flavors) | ||
| ## Importing | ||
| ### Global | ||
| ### Globally | ||
| installs the component, directive and filter for your entire application. | ||
| ```javascript | ||
@@ -25,48 +27,74 @@ import InputFacade from 'vue-input-facade' | ||
| ### 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) | ||
| ``` | ||
@@ -73,0 +101,0 @@ ## Thanks |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by24.13%
5006
- Number of lines in readme file
- increased by34.15%
110
- Number of medium supply chain risk alerts
- decreased by-50%
1
No dependency changes