{"id":15498749,"url":"https://github.com/jankapunkt/meteor-autoform-tags","last_synced_at":"2025-07-19T00:37:23.806Z","repository":{"id":81102546,"uuid":"134713412","full_name":"jankapunkt/meteor-autoform-tags","owner":"jankapunkt","description":"Provides a form field to enter tags.","archived":false,"fork":false,"pushed_at":"2023-05-23T12:47:48.000Z","size":66,"stargazers_count":5,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-22T22:19:26.380Z","etag":null,"topics":["autoform","autoform-extension","hacktoberfest","meteor","meteor-autoform-tags","taginput","tags"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jankapunkt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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},"funding":{"github":null,"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":["https://paypal.me/kuesterjan"]}},"created_at":"2018-05-24T12:38:57.000Z","updated_at":"2023-09-27T06:37:40.000Z","dependencies_parsed_at":null,"dependency_job_id":"56599e16-025c-4d6c-8cb5-36a1ce935432","html_url":"https://github.com/jankapunkt/meteor-autoform-tags","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jankapunkt/meteor-autoform-tags","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jankapunkt%2Fmeteor-autoform-tags","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jankapunkt%2Fmeteor-autoform-tags/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jankapunkt%2Fmeteor-autoform-tags/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jankapunkt%2Fmeteor-autoform-tags/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jankapunkt","download_url":"https://codeload.github.com/jankapunkt/meteor-autoform-tags/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jankapunkt%2Fmeteor-autoform-tags/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265863793,"owners_count":23840888,"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":["autoform","autoform-extension","hacktoberfest","meteor","meteor-autoform-tags","taginput","tags"],"created_at":"2024-10-02T08:47:30.659Z","updated_at":"2025-07-19T00:37:23.787Z","avatar_url":"https://github.com/jankapunkt.png","language":"JavaScript","funding_links":["https://paypal.me/kuesterjan"],"categories":[],"sub_categories":[],"readme":"# Meteor AutoForm Tags (Bootstrap 4)\n\n[![Project Status: Active – The project has reached a stable, usable state and is being actively developed.](https://www.repostatus.org/badges/latest/active.svg)](https://www.repostatus.org/#active)\n\n![GitHub](https://img.shields.io/github/license/jankapunkt/meteor-autoform-tags.svg)\n\nAutoForm add-on, that provides an interactive tag input.\nOptimized for Bootstrap 4. See installation for getting a BS4 theme for your AutoForm.\n\n### Example Project\n\nYou can check out the latest published state of this package using [this example project](https://github.com/jankapunkt/meteor-autoform-tags-examples).\n\n### Changelog\n\n**2.1.1**\n- added support for AutoForm 7\n\n**2.1.0**\n- fire blur on input when close (x) button is pressed\n- on new input blur with text inside the text is added as element\n- not published, use 2.1.1\n\n**2.0.0**\n\n* Breaking change: default export is a module with dynamic import, see documentation on how to import\n\n**1.3.0**\n* use `textarea` instead of `contenteditable` to fix iOS input bug\n* redesign layout for better ux\n* add explicit mobile events to the Template's event map\n* fix select logic\n* removed direct jquery dependency\n\n**1.2.3**\n\n* aftags-input is now a class attribute instead of id\n* aftags-input has min-width of 5rem\n* events use new aftags-input class attribute\n* show tag length and char length hints using showTagLength and showCharLength flags\n\n**1.2.2**\n\n* Fixed compatibility for multiple template instances in same form \n\n**1.2.1**\n\n* Fixed missing update on hidden input when value is passed via data\n\n**1.2**\n\n* Implemented passing an existing value reactively\n\n**1.1**\n\n* Fixed word wrapping failure on mobile devices\n* Fix missing display of current characters in some cases\n\n**1.0**\n\n* Moved to Bootstrap 4 theme, use 'card' as base for template\n* Range display default text is 'text-muted'\n* Display min/max range of tags when no tag is edited (and minCount/maxCount values are set via schema)\n* Display min/max range of characters if tag is edited (and min/max values are set via schema)\n* Cancel edit when hitting ESC or clicking outside of tag also on editing existing tags\n* Correct display of select options\n\n### Installation\n\nYou need `aldeed:autoform` \u003e= 6 to use this package.  \nYou can then install this package via \n\n`meteor add jkuester:autoform-tags`\n\nYou manually need to install [imajus:autoform-bootstrap4](https://github.com/imajus/autoform-bootstrap4) (AutoForm 6.X)\nor [jkuester:autoform-bootstrap4](https://github.com/jkuester/autoform-bootstrap4) (AutoForm 7.X) in order to use this package.\nSee the installation manual in the repo for setting up BS4 for your AutoForm.\n\n### Import the package\n\nBy default the package now exports an async function to initialize the extension:\n\n```javascript\nconst AFTags = (await import('meteor/jkuester:autoform-tags')).default\nawait AFTags.load()\n```\n\n### Static import\n\nYou can still import this package as with versions \u003c 2.0.0 by directly importing the js file:\n\n```javascript\nimport 'meteor/jkuester:autoform-tags/autoform-tags.js'\n```\n\nThen the package will be automatically added to your initial client bundle\n\n### Creating a Tag-Field by Schema\n\n##### Minimal\n\nThere are many options to configure this component. The most minimal approach is to define the `autoform` type to be `'tags'`:\n\n```javascript\n{\n  tags: {\n    type: Array,      // all tags will be saved in an array\n      autoform: {\n        type: 'tags'  // indicate to use tags add-on\n      }\n    'tags.$': {\n      type: String\n    }\n  }\n}\n```\n\n##### With Boundaries\n\nYou can limit the amount of tags as you can do with any array in autoform. \nFurthermore you can limit the min/max length of the characters that are valid for each tag.\n\nValidation for array size will be done by `AutoForm` while validation of character length is done within the component.\n\n```javascript\n{\n  tags: {\n    type: Array,      // all tags will be saved in an array\n    autoform: {\n      type: 'tags',   // indicate to use tags add-on\n      minCount: 2,    // minimum number of tags\n      maxCount: 8,    // maximum number of tags\n      max: 16,        // max length of a tag in chars\n      min: 4          // min length of a tag in chars\n    }\n  },\n  'tags.$': {\n    type: String,\n  }\n}\n```\n \n Note that `max`, `min`, `maxCount` and `minCount` need **all** to be defined within the `autoform` property of the array in order to behave properly.\n \n \n ##### With Support\n \n You can declare a placeholder text as call to action as well define a list of suggestions. \n If a user clicks a tag in the list, it is immediately added to the tag stack. \n This list can also be used as source for allowed values.\n \n```javascript\n{\n  tags: {\n    type: Array,            // all tags will be saved in an array\n    autoform: {\n      placeholder: 'Enter a tag...',\n      type: 'tags',         // indicate to use tags add-on\n      options: () =\u003e [      // list of tags to be suggested\n        'apple', \n        'cherry', \n        'orange'\n        ],\n      onlyOptions: false    // if true only values in options are accepted\n    },\n    'tags.$': {\n      type: String\n    }\n  }\n}\n```\n \n ##### Full Example\n \n You can also combine the above mentioned options:\n \n```javascript\n{\n  tags: {\n    type: Array,          // all tags will be saved in an array\n    autoform: {\n      placeholder: 'Enter a tag...',\n      type: 'tags',       // indicate to use tags add-on\n      max: 16,            // max length of a tag in chars\n      min: 4,             // min length of a tag in chars\n      minCount: 2,          // minimum number of tags\n      maxCount: 8,          // maximum number of tags\n      options: () =\u003e [    // list of tags to be suggested\n        'apple',\n        'cherry',\n        'orange'\n        ],\n      onlyOptions: true   // if true only values in options are allowed\n    },\n    'tags.$': {\n      type: String,\n    }\n  }\n}\n```\n   \n### Component Behavior and Interacting with Tags\n\n\n* You can click on the input or on the edit button to activate editing.\n* The input supports spaces between characters but trims whitespace to single space between characters.\n* To apply the entered tag hit either `Enter`, `Tab` or click the button with the check mark.\n* The entered text will remain, if the component looses focus but will not be applied.    \n* If the same tag already exists in the stack, it will be highlighted on input. \n  In this state the input is not accepted to be added to the stack.\n* If `max` or `min` are defined and the entered tag does not fulfill the requirements it will be highlighted together \n  with the allowed text-size range, that appears in the upper-right part of the component. \n\n* Each tag can be edited by clicking the tag. Same functionality applies to the edited tag as for a new tag.\n* Each applies tag can be removed from the stack.\n\n* Clicking suggestions will add them immediatly to the stack and disable the selected ones.\n\n### Roadmap and Future Features\n\n* Enable/disable whitespaces via schema\n* Define bootstrap color-classes for highlighting doubles or insufficient character size via schema\n* Replace html icons with a library if such is installed\n* Support emojis / auto-transform tags into emojis\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjankapunkt%2Fmeteor-autoform-tags","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjankapunkt%2Fmeteor-autoform-tags","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjankapunkt%2Fmeteor-autoform-tags/lists"}