- Vue the mask typescript
- Saved searches
- Use saved searches to filter your results more quickly
- vuejs-tips/vue-the-mask
- Name already in use
- Sign In Required
- Launching GitHub Desktop
- Launching GitHub Desktop
- Launching Xcode
- Launching Visual Studio Code
- Latest commit
- Git stats
- Files
- README.md
- Saved searches
- Use saved searches to filter your results more quickly
- Typescript support #113
- Typescript support #113
- Comments
- vue-the-mask
- Install
- Usage
- Properties
- Other Solutions
- Currency
- Vue the mask typescript
Vue the mask typescript
A lightweight (2KB gzipped) and dependency free mask input created specific for Vue.js
yarn add vue-the-mask or npm i -S vue-the-mask
import VueTheMask from 'vue-the-mask'Vue.use(VueTheMask)
Local (inside the component)
import TheMask> from 'vue-the-mask'export defaultcomponents: TheMask>>
import mask> from 'vue-the-mask'export defaultdirectives: mask>>
'#': 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>
Property | Required | Type | Default | Description |
---|---|---|---|---|
value | false | String | Input value or v-model | |
mask | true | String, Array | Mask pattern | |
masked | false | Boolean | false | emit value with mask chars, default is raw |
placeholder | false | String | Same as html input | |
type | false | String | ‘text’ | Input type (email, tel, number, . ) |
tokens | false | Object | tokens | Custom tokens for mask |
We understand that money format is a totally different domain, which needs another specific component. You can use https://github.com/vuejs-tips/v-money
- https://github.com/nosir/cleave.js
- https://github.com/text-mask/text-mask
- https://github.com/igorescobar/jQuery-Mask-Plugin
- https://github.com/fernandofleury/vanilla-masker
- https://github.com/angular-ui/ui-mask
- https://github.com/insin/inputmask-core
- https://github.com/niksmr/vue-masked-input
- https://github.com/probil/v-mask
- https://github.com/moip/awesome-mask
- https://github.com/the-darc/string-mask
- https://github.com/romulobrasil/PureMask.js
- https://github.com/devindex/vue-mask
You’re free to contribute to this project by submitting issues and/or pull requests. This project is test-driven, so keep in mind that every change and new feature should be covered by tests. Your name will be added to the hall of fame 😉
This project is licensed under MIT License
Saved searches
Use saved searches to filter your results more quickly
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.
vuejs-tips/vue-the-mask
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Name already in use
A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Sign In Required
Please sign in to use Codespaces.
Launching GitHub Desktop
If nothing happens, download GitHub Desktop and try again.
Launching GitHub Desktop
If nothing happens, download GitHub Desktop and try again.
Launching Xcode
If nothing happens, download Xcode and try again.
Launching Visual Studio Code
Your codespace will open once ready.
There was a problem preparing your codespace, please try again.
Latest commit
Git stats
Files
Failed to load latest commit information.
README.md
A lightweight (2KB gzipped) and dependency free mask input created specific for Vue.js
yarn add vue-the-mask or npm i -S vue-the-mask
import VueTheMask from 'vue-the-mask' Vue.use(VueTheMask)
Local (inside the component)
import TheMask> from 'vue-the-mask' export default components: TheMask> >
import mask> from 'vue-the-mask' export default directives: mask> >
'#': 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>
Property | Required | Type | Default | Description |
---|---|---|---|---|
value | false | String | Input value or v-model | |
mask | true | String, Array | Mask pattern | |
masked | false | Boolean | false | emit value with mask chars, default is raw |
placeholder | false | String | Same as html input | |
type | false | String | ‘text’ | Input type (email, tel, number, . ) |
tokens | false | Object | tokens | Custom tokens for mask |
We understand that money format is a totally different domain, which needs another specific component. You can use https://github.com/vuejs-tips/v-money
- https://github.com/nosir/cleave.js
- https://github.com/text-mask/text-mask
- https://github.com/igorescobar/jQuery-Mask-Plugin
- https://github.com/fernandofleury/vanilla-masker
- https://github.com/angular-ui/ui-mask
- https://github.com/insin/inputmask-core
- https://github.com/niksmr/vue-masked-input
- https://github.com/probil/v-mask
- https://github.com/moip/awesome-mask
- https://github.com/the-darc/string-mask
- https://github.com/romulobrasil/PureMask.js
- https://github.com/devindex/vue-mask
You’re free to contribute to this project by submitting issues and/or pull requests. This project is test-driven, so keep in mind that every change and new feature should be covered by tests. Your name will be added to the hall of fame 😉
This project is licensed under MIT License
Saved searches
Use saved searches to filter your results more quickly
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Typescript support #113
Typescript support #113
Comments
Does this library support typescript? I did not find any reference .
The text was updated successfully, but these errors were encountered:
I couldn’t find typings as well, but i found another solution. You can check it out bellow.
I created a file named third-parties.d.ts in the _types folder, in my src folder (just for organization) with the following content:
declare module ‘vue-the-mask’;
You can put more declarations here.
And in my tsconfig.json, i setted my custom type with:
«typeRoots»: [ «node_modules/@types», «./src/_types/third-parties.d.ts» ],
Yo, why’d this get closed? Surely someone can write a type for this.
This should cover all use-cases:
declare module 'vue-the-mask' import AsyncComponent, Component, DirectiveFunction, DirectiveOptions, PluginFunction, > from 'vue'; // Local component: const TheMask: Componentany, any, any, any> | AsyncComponentany, any, any, any>; // Local directive: const mask: DirectiveFunction | DirectiveOptions; // Global plugin / default: const VueTheMask: PluginFunctionany> & TheMask: Componentany, any, any, any> | AsyncComponentany, any, any, any>; mask: DirectiveFunction | DirectiveOptions; >; export TheMask, mask >; export default VueTheMask; >
vue-the-mask
We understand that money format is a totally different domain, which needs another specific component. You can use this one: v-money.
Install
yarn add vue-the-mask or npm i -S vue-the-mask
Usage
// Global import VueTheMask from 'vue-the-mask' Vue.use(VueTheMask) // Local Component import from 'vue-the-mask' export default < components: > // Local Directive import from 'vue-the-mask' export default < directives: >
Properties
Property | Required | Type | Default | Description |
---|---|---|---|---|
value | false | String | Input value or v-model | |
mask | true | String, Array | Mask pattern | |
masked | false | Boolean | false | emit value with mask chars, default is raw |
placeholder | false | String | Same as html input | |
type | false | String | ‘text’ | Input type (email, tel, number, . ) |
tokens | false | Object | tokens | Custom tokens for mask |
Other Solutions
- https://github.com/nosir/cleave.js
- https://github.com/text-mask/text-mask
- https://github.com/igorescobar/jQuery-Mask-Plugin
- https://github.com/fernandofleury/vanilla-masker
- https://github.com/angular-ui/ui-mask
- https://github.com/insin/inputmask-core
- https://github.com/niksmr/vue-masked-input
- https://github.com/probil/v-mask
- https://github.com/moip/awesome-mask
- https://github.com/the-darc/string-mask
- https://github.com/romulobrasil/PureMask.js
- https://github.com/devindex/vue-mask
Currency
Vue the mask typescript
A lightweight (2KB gzipped) and dependency free mask input created specific for Vue.js
yarn add vue-the-mask or npm i -S vue-the-mask
import VueTheMask from 'vue-the-mask'Vue.use(VueTheMask)
Local (inside the component)
import TheMask> from 'vue-the-mask'export defaultcomponents: TheMask>>
import mask> from 'vue-the-mask'export defaultdirectives: mask>>
'#': 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>
Property | Required | Type | Default | Description |
---|---|---|---|---|
value | false | String | Input value or v-model | |
mask | true | String, Array | Mask pattern | |
masked | false | Boolean | false | emit value with mask chars, default is raw |
placeholder | false | String | Same as html input | |
type | false | String | ‘text’ | Input type (email, tel, number, . ) |
tokens | false | Object | tokens | Custom tokens for mask |
We understand that money format is a totally different domain, which needs another specific component. You can use https://github.com/vuejs-tips/v-money
- https://github.com/nosir/cleave.js
- https://github.com/text-mask/text-mask
- https://github.com/igorescobar/jQuery-Mask-Plugin
- https://github.com/fernandofleury/vanilla-masker
- https://github.com/angular-ui/ui-mask
- https://github.com/insin/inputmask-core
- https://github.com/niksmr/vue-masked-input
- https://github.com/probil/v-mask
- https://github.com/moip/awesome-mask
- https://github.com/the-darc/string-mask
- https://github.com/romulobrasil/PureMask.js
- https://github.com/devindex/vue-mask
You’re free to contribute to this project by submitting issues and/or pull requests. This project is test-driven, so keep in mind that every change and new feature should be covered by tests. Your name will be added to the hall of fame 😉
This project is licensed under MIT License