{"id":18326706,"url":"https://github.com/ronaldjerez/vue-input-facade","last_synced_at":"2025-04-04T15:06:55.021Z","repository":{"id":37251436,"uuid":"227667355","full_name":"RonaldJerez/vue-input-facade","owner":"RonaldJerez","description":"A lightweight and dependency free input masking library created specific for Vue","archived":false,"fork":false,"pushed_at":"2024-01-12T18:57:28.000Z","size":3724,"stargazers_count":183,"open_issues_count":6,"forks_count":27,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-04T14:57:24.934Z","etag":null,"topics":["facade","input","input-mask","masking","plugin","vue","vue-components"],"latest_commit_sha":null,"homepage":"https://ronaldjerez.github.io/vue-input-facade/latest/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/RonaldJerez.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2019-12-12T18:05:42.000Z","updated_at":"2025-01-18T12:51:57.000Z","dependencies_parsed_at":"2024-04-14T07:41:50.978Z","dependency_job_id":"af582c00-7f63-48e8-8441-83a2a686a12a","html_url":"https://github.com/RonaldJerez/vue-input-facade","commit_stats":{"total_commits":109,"total_committers":12,"mean_commits":9.083333333333334,"dds":0.2018348623853211,"last_synced_commit":"356a694bf4347ffc73b30fb822e8a8fec43422f7"},"previous_names":[],"tags_count":47,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RonaldJerez%2Fvue-input-facade","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RonaldJerez%2Fvue-input-facade/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RonaldJerez%2Fvue-input-facade/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RonaldJerez%2Fvue-input-facade/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RonaldJerez","download_url":"https://codeload.github.com/RonaldJerez/vue-input-facade/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247198449,"owners_count":20900079,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["facade","input","input-mask","masking","plugin","vue","vue-components"],"created_at":"2024-11-05T19:07:50.861Z","updated_at":"2025-04-04T15:06:55.001Z","avatar_url":"https://github.com/RonaldJerez.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\" markdown=\"1\" style=\"text-align:center\"\u003e\n\n# Vue Input Facade\n\nA lightweight and dependency free input masking library created specific for Vue\n\n[![Build Status](https://travis-ci.org/RonaldJerez/vue-input-facade.svg?branch=master)](https://travis-ci.org/RonaldJerez/vue-input-facade)\n[![Coverage Status](https://coveralls.io/repos/github/RonaldJerez/vue-input-facade/badge.svg?branch=master\u0026service=github)](https://coveralls.io/github/RonaldJerez/vue-input-facade?branch=master\u0026service=github)\n[![License](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n\n\u003cdiv class=\"hide\" markdown=\"1\"\u003e\n\n### [Docs and Demo](https://ronaldjerez.github.io/vue-input-facade/latest/)\n\n\u003c/div\u003e\n\n---\n\n\u003c/div\u003e\n\n## Installing\n\n```bash\nnpm i vue-input-facade\n```\n\n```bash\nyarn add vue-input-facade\n```\n\n## Importing\n\n### Globally\n\nInstalls the component, directive and filter for your entire application.\n\n```javascript\nimport InputFacade from 'vue-input-facade'\nVue.use(InputFacade)\n```\n\n### Locally\n\nInstall per component as needed\n\n```javascript\nimport { InputFacade, facade, filter } from 'vue-input-facade'\n\nexport default {\n  components: { InputFacade },\n  directives: { facade },\n  filters: { facade: filter },\n  // ... rest of component config\n}\n```\n\n### Default Mask Tokens\n\n+ `S` = alpha characters\n+ `#` = numerical characters\n+ `X` = alpha numerical characters\n+ `A` = alpha characters, transformed to uppercase\n+ `a` = alpha characters, transformed to lowercase\n+ `\\` = escape any of the above characters\n+ `?` = mark the preceding character as optional [0 or 1]\n+ `*` = mark the preceding character as optional \u0026 repeating [0 or more]\n+ `|` = used for alternative static characters: A|B|C will accept A or B or C\n\nSee the [token source file](https://github.com/RonaldJerez/vue-input-facade/blob/master/src/tokens.js) for definition signature\n\n\u003cdiv class=\"hide\" markdown=\"1\"\u003e\n\n## Note about special input types\nThe masking library does not currently work on special input types such as number, email etc.  This is due to browsers treating these special inputs differently than text input and not supporting the same API.  As such, only use vue-input-facade with `\u003cinput type=\"text|tel|search\"\u003e`.\n\n## Usage\n\n### As Component\n\n```html\n\u003clabel\u003ePhone Number\u003c/label\u003e\n\u003cinput-facade mask=\"(###) ###-####\" name=\"phoneNumber\" type=\"tel\" /\u003e\n```\n\n### As Directive\n\n```html\n\u003clabel\u003eDate\u003c/label\u003e\n\u003cinput type=\"text\" v-facade=\"'##/##/##'\" /\u003e\n```\n\n### Migrating existing projects\n\nIf 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.\n\n```javascript\nimport InputFacade from 'vue-input-facade'\n\n// migrating from v-mask\nconst options = {\n  // rename the directive from: v-facade to: v-mask\n  name: 'mask',\n\n  // use these tokens instead of the default\n  tokens: {\n    '#': { pattern: /\\d/ },\n    'A': { pattern: /[a-z]/i },\n    'N': { pattern: /[0-9a-z]/i },\n    'X': { pattern: /./ }\n  }\n}\n\nVue.use(InputFacade, options)\n```\n\n\nSee [demo page](https://ronaldjerez.github.io/vue-input-facade) for more usage examples\n\n## Contribution\n\nYou'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.  The project uses [semantic-release](https://github.com/semantic-release/semantic-release) to release new versions, therefore all commit messages should follow [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/#summary), we are using [commitizen](https://github.com/commitizen/cz-cli) to facilitate writting the commit messages.\n\n## License\n\nThis project is licensed under [MIT License](http://en.wikipedia.org/wiki/MIT_License)\n\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fronaldjerez%2Fvue-input-facade","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fronaldjerez%2Fvue-input-facade","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fronaldjerez%2Fvue-input-facade/lists"}