{"id":19655898,"url":"https://github.com/vaadin-component-factory/input-mask","last_synced_at":"2025-04-28T18:32:14.880Z","repository":{"id":161219104,"uuid":"623934235","full_name":"vaadin-component-factory/input-mask","owner":"vaadin-component-factory","description":"Vaadin Flow integration of imaskjs library.","archived":false,"fork":false,"pushed_at":"2024-06-13T20:32:55.000Z","size":77,"stargazers_count":1,"open_issues_count":4,"forks_count":5,"subscribers_count":5,"default_branch":"main","last_synced_at":"2024-06-14T22:31:30.918Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Java","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vaadin-component-factory.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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,"publiccode":null,"codemeta":null}},"created_at":"2023-04-05T11:56:00.000Z","updated_at":"2024-06-13T20:32:58.000Z","dependencies_parsed_at":null,"dependency_job_id":"4b248a34-a12b-41ce-bcfc-9e218600680d","html_url":"https://github.com/vaadin-component-factory/input-mask","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vaadin-component-factory%2Finput-mask","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vaadin-component-factory%2Finput-mask/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vaadin-component-factory%2Finput-mask/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vaadin-component-factory%2Finput-mask/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vaadin-component-factory","download_url":"https://codeload.github.com/vaadin-component-factory/input-mask/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224126817,"owners_count":17260118,"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":[],"created_at":"2024-11-11T15:24:34.526Z","updated_at":"2024-11-11T15:24:35.360Z","avatar_url":"https://github.com/vaadin-component-factory.png","language":"Java","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Input Mask Add-on for Vaadin Flow\n\nVaadin Flow integration of [imaskjs library](https://www.npmjs.com/package/imask).\n\nThis component is part of Vaadin Component Factory.\n\n## Description\n\nInputMask component allows to add an input mask to a Vaadin Flow component like TextField or DatePicker.\n\nGo to [How to use](#Howtouse) section for use examples.\n\n## Development instructions\n\nBuild the project and install the add-on locally:\n```\nmvn clean install\n```\nTo start the demo server go to vcf-input-mask-demo and run:\n```\nmvn jetty:run\n```\n\nThis deploys demo at http://localhost:8080\n\n## Using the component in a Flow application\nTo use the component in an application using maven,\nadd the following dependency to your `pom.xml`:\n```\n\u003cdependency\u003e\n    \u003cgroupId\u003eorg.vaadin.addons.componentfactory\u003c/groupId\u003e\n    \u003cartifactId\u003evcf-input-mask\u003c/artifactId\u003e\n    \u003cversion\u003e${component.version}\u003c/version\u003e\n\u003c/dependency\u003e\n```\n\n## How to use\n\n### Basic use example\n```java\nTextField phoneField = new TextField(\"Phone\");\nnew InputMask(\"(000) 000-0000\").extend(phoneField);\n```\n\n```java\nDatePicker dateField = new DatePicker(\"Date\");\ndateField.setI18n(new DatePickerI18n().setDateFormat(\"MM/dd/yyyy\"));\nInputMask dateFieldMask = new InputMask(\"00/00/0000\");\ndateFieldMask.extend(dateField);\n```\n\n### Binder example\n\n```java\nTextField phoneField = new TextField(\"Phone\");\nInputMask phoneFieldMask = new InputMask(\"(000) 000-0000\");\nphoneFieldMask.extend(phoneField);\n\nBinder\u003cPerson\u003e binder = new Binder\u003cPerson\u003e();    \nbinder.forField(phoneField).withNullRepresentation(\"\")\n\t.withValidator(this::validatePhone)\n\t.bind(Person::getPhone, Person::setPhone);\n\nPerson person = new Person();\nperson.setPhone(\"1112223333\");\nbinder.setBean(person);\n```\n\n```java\nDatePicker dateField = new DatePicker(\"Date\");\ndateField.setI18n(new DatePickerI18n().setDateFormat(\"MM/dd/yyyy\"));\nInputMask dateFieldMask = new InputMask(DATE_MASK, option(\"overwrite\", true));    \ndateFieldMask.extend(dateField);\n\nBinder\u003cPerson\u003e binder = new Binder\u003c\u003e();\nbinder.forField(dateField)\n\t.withValidator(this::validateBirthday)\n\t.bind(Person::getBirthday, Person::setBirthday);\nbinder.readBean(new Person());\n```\n\n### Special use case: binding unmasked value (text field only)\n\nIn order to allow binder to use the unmasked value from the InputMask, binder should be defined using the InputMask field instead of the actual text field.\nThis use case is only supported for TextField (IllegalArgumentException is thrown if this approach is intended to be used with a different field).\n\n```java\nTextField phoneField = new TextField(\"Phone\");\n\nInputMask phoneFieldMask = new InputMask(\"(000) 000-0000\");\nphoneFieldMask.extend(phoneField);\n\nBinder\u003cPerson\u003e binder = new Binder\u003cPerson\u003e();   \n\n// use input mask field for the binding so the unsmasked value \n// is linked to binder (phoneFieldMask) \nbinder.forField(phoneFieldMask)\n\t.withValidator(this::validatePhone)\n\t.bind(Person::getPhone, Person::setPhone);\n\nbinder.setBean(new Person());\n```\n\n## License \u0026 Author\n\nThis Add-on is distributed under [Apache Licence 2.0](https://github.com/vaadin-component-factory/input-mask/blob/main/LICENSE).\n\nInputMask Component for Vaadin Flow is written by Vaadin Ltd.\n\n### Sponsored development\nMajor pieces of development of this add-on has been sponsored by multiple customers of Vaadin. Read more about Expert on Demand at: [Support](https://vaadin.com/support) and [Pricing](https://vaadin.com/pricing).\n\n## Missing features or bugs\nYou can report any issue or missing feature on [GitHub](https://github.com/vaadin-component-factory/input-mask/issues).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvaadin-component-factory%2Finput-mask","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvaadin-component-factory%2Finput-mask","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvaadin-component-factory%2Finput-mask/lists"}