https://github.com/jankapunkt/meteor-autoform-tags
Provides a form field to enter tags.
https://github.com/jankapunkt/meteor-autoform-tags
autoform autoform-extension hacktoberfest meteor meteor-autoform-tags taginput tags
Last synced: about 1 month ago
JSON representation
Provides a form field to enter tags.
- Host: GitHub
- URL: https://github.com/jankapunkt/meteor-autoform-tags
- Owner: jankapunkt
- License: mit
- Created: 2018-05-24T12:38:57.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-05-23T12:47:48.000Z (about 2 years ago)
- Last Synced: 2025-04-22T22:19:05.380Z (about 1 month ago)
- Topics: autoform, autoform-extension, hacktoberfest, meteor, meteor-autoform-tags, taginput, tags
- Language: JavaScript
- Homepage:
- Size: 64.5 KB
- Stars: 5
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Meteor AutoForm Tags (Bootstrap 4)
[](https://www.repostatus.org/#active)
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](https://github.com/jankapunkt/meteor-autoform-tags-examples).
### Changelog
**2.1.1**
- added support for AutoForm 7
**2.1.0**
- fire blur on input when close (x) button is pressed
- on new input blur with text inside the text is added as element
- not published, use 2.1.1
**2.0.0**
* Breaking change: default export is a module with dynamic import, see documentation on how to import
**1.3.0**
* use `textarea` instead of `contenteditable` to fix iOS input bug
* redesign layout for better ux
* add explicit mobile events to the Template's event map
* fix select logic
* removed direct jquery dependency
**1.2.3**
* aftags-input is now a class attribute instead of id
* aftags-input has min-width of 5rem
* events use new aftags-input class attribute
* show tag length and char length hints using showTagLength and showCharLength flags
**1.2.2**
* Fixed compatibility for multiple template instances in same form
**1.2.1**
* Fixed missing update on hidden input when value is passed via data
**1.2**
* Implemented passing an existing value reactively
**1.1**
* Fixed word wrapping failure on mobile devices
* Fix missing display of current characters in some cases
**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](https://github.com/imajus/autoform-bootstrap4) (AutoForm 6.X)
or [jkuester:autoform-bootstrap4](https://github.com/jkuester/autoform-bootstrap4) (AutoForm 7.X) in order to use this package.
See the installation manual in the repo for setting up BS4 for your AutoForm.
### Import the package
By default the package now exports an async function to initialize the extension:
```javascript
const AFTags = (await import('meteor/jkuester:autoform-tags')).default
await AFTags.load()
```
### Static import
You can still import this package as with versions < 2.0.0 by directly importing the js file:
```javascript
import 'meteor/jkuester:autoform-tags/autoform-tags.js'
```
Then the package will be automatically added to your initial client bundle
### 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'`:
```javascript
{
tags: {
type: Array, // all tags will be saved in an array
autoform: {
type: 'tags' // indicate to use tags add-on
}
'tags.$': {
type: String
}
}
}
```
##### 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.
```javascript
{
tags: {
type: Array, // all tags will be saved in an array
autoform: {
type: 'tags', // indicate to use tags add-on
minCount: 2, // minimum number of tags
maxCount: 8, // maximum number of tags
max: 16, // max length of a tag in chars
min: 4 // min length of a tag in chars
}
},
'tags.$': {
type: String,
}
}
```
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.
```javascript
{
tags: {
type: Array, // all tags will be saved in an array
autoform: {
placeholder: 'Enter a tag...',
type: 'tags', // indicate to use tags add-on
options: () => [ // list of tags to be suggested
'apple',
'cherry',
'orange'
],
onlyOptions: false // if true only values in options are accepted
},
'tags.$': {
type: String
}
}
}
```
##### Full Example
You can also combine the above mentioned options:
```javascript
{
tags: {
type: Array, // all tags will be saved in an array
autoform: {
placeholder: 'Enter a tag...',
type: 'tags', // indicate to use tags add-on
max: 16, // max length of a tag in chars
min: 4, // min length of a tag in chars
minCount: 2, // minimum number of tags
maxCount: 8, // maximum number of tags
options: () => [ // list of tags to be suggested
'apple',
'cherry',
'orange'
],
onlyOptions: true // if true only values in options are allowed
},
'tags.$': {
type: String,
}
}
}
```
### 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