meteor-autoform-tags (Bootstrap 4)

AutoForm add-on, that provides an interactive tag input. Optimized for Bootstrap 4. See installation for getting a BS4 theme for your AutoForm.

Example Project

You can check out the latest published state of this package using this example project.

Changelog

1.0

Moved to Bootstrap 4 theme, use 'card' as base for template
Range display default text is 'text-muted'
Display min/max range of tags when no tag is edited (and minCount/maxCount values are set via schema)
Display min/max range of characters if tag is edited (and min/max values are set via schema)
Cancel edit when hitting ESC or clicking outside of tag also on editing existing tags
Correct display of select options

Installation

You need aldeed:autoform >= 6 to use this package.
You can then install this package via

meteor add jkuester:autoform-tags

You manually need to install imajus:autoform-bootstrap4 in order to use this package. See the installation manual in the repo for setting up BS4 for your AutoForm.

Creating a Tag-Field by Schema

Minimal

There are many options to configure this component. The most minimal approach is to define the autoform type to be 'tags':

1{
2  tags: {
3    type: Array,      // all tags will be saved in an array
4      autoform: {
5        type: 'tags'  // indicate to use tags add-on
6      }
7    'tags.$': {
8      type: String
9    }
10  }
11}

With Boundaries

You can limit the amount of tags as you can do with any array in autoform. Furthermore you can limit the min/max length of the characters that are valid for each tag.

Validation for array size will be done by AutoForm while validation of character length is done within the component.

1{
2  tags: {
3    type: Array,      // all tags will be saved in an array
4    autoform: {
5      type: 'tags',   // indicate to use tags add-on
6      minCount: 2,    // minimum number of tags
7      maxCount: 8,    // maximum number of tags
8      max: 16,        // max length of a tag in chars
9      min: 4          // min length of a tag in chars
10    }
11  },
12  'tags.$': {
13    type: String,
14  }
15}

Note that max, min, maxCount and minCount need all to be defined within the autoform property of the array in order to behave properly.

With Support

You can declare a placeholder text as call to action as well define a list of suggestions. If a user clicks a tag in the list, it is immediately added to the tag stack. This list can also be used as source for allowed values.

1{
2  tags: {
3    type: Array,            // all tags will be saved in an array
4    autoform: {
5      placeholder: 'Enter a tag...',
6      type: 'tags',         // indicate to use tags add-on
7      options: () => [      // list of tags to be suggested
8        'apple', 
9        'cherry', 
10        'orange'
11        ],
12      onlyOptions: false    // if true only values in options are accepted
13    },
14    'tags.$': {
15      type: String
16    }
17  }
18}

Full Example

You can also combine the above mentioned options:

1{
2  tags: {
3    type: Array,          // all tags will be saved in an array
4    autoform: {
5      placeholder: 'Enter a tag...',
6      type: 'tags',       // indicate to use tags add-on
7      max: 16,            // max length of a tag in chars
8      min: 4,             // min length of a tag in chars
9      minCount: 2,          // minimum number of tags
10      maxCount: 8,          // maximum number of tags
11      options: () => [    // list of tags to be suggested
12        'apple',
13        'cherry',
14        'orange'
15        ],
16      onlyOptions: true   // if true only values in options are allowed
17    },
18    'tags.$': {
19      type: String,
20    }
21  }
22}

Component Behavior and Interacting with Tags

You can click on the input or on the edit button to activate editing.
The input supports spaces between characters but trims whitespace to single space between characters.
To apply the entered tag hit either Enter, Tab or click the button with the check mark.
The entered text will remain, if the component looses focus but will not be applied.
If the same tag already exists in the stack, it will be highlighted on input. In this state the input is not accepted to be added to the stack.
If max or min are defined and the entered tag does not fulfill the requirements it will be highlighted together with the allowed text-size range, that appears in the upper-right part of the component.
Each tag can be edited by clicking the tag. Same functionality applies to the edited tag as for a new tag.
Each applies tag can be removed from the stack.
Clicking suggestions will add them immediatly to the stack and disable the selected ones.

Roadmap and Future Features

Enable/disable whitespaces via schema
Define bootstrap color-classes for highlighting doubles or insufficient character size via schema
Replace html icons with a library if such is installed
Support emojis / auto-transform tags into emojis