@yaireo/tagify
Version:
lightweight, efficient Tags input component in Vanilla JS / React / Angular [super customizable, tiny size & top performance]
101 lines (94 loc) • 6.86 kB
JavaScript
export default {
delimiters : ",", // [RegEx] split tags by any of these delimiters ("null" to cancel) Example: ",| |."
pattern : null, // RegEx pattern to validate input by. Ex: /[1-9]/
tagTextProp : 'value', // tag data Object property which will be displayed as the tag's text
maxTags : Infinity, // Maximum number of tags
callbacks : {}, // Exposed callbacks object to be triggered on certain events
addTagOnBlur : true, // automatically adds the text which was inputed as a tag when blur event happens
addTagOn : ['blur', 'tab', 'enter'], // if the tagify field (in a normal mode) has any non-tag input in it, convert it to a tag on any of these events: blur away from the field, click "tab"/"enter" key
onChangeAfterBlur : true, // By default, the native way of inputs' onChange events is kept, and it only fires when the field is blured.
duplicates : false, // "true" - allow duplicate tags
whitelist : [], // Array of tags to suggest as the user types (can be used along with "enforceWhitelist" setting)
blacklist : [], // A list of non-allowed tags
enforceWhitelist : false, // Only allow tags from the whitelist
userInput : true, // disable manually typing/pasting/editing tags (tags may only be added from the whitelist)
focusable : true, // Allow the component as a whole to recieve focus. There are implementations of Tagify without external border and so 'focusability' causes unwanted behaviour
focusInputOnRemove : true, // Refocus the input when a tag is removed
keepInvalidTags : false, // if true, do not remove tags which did not pass validation
createInvalidTags : true, // if false, do not create invalid tags from invalid user input
mixTagsAllowedAfter : /,|\.|\:|\s/, // RegEx - Define conditions in which mix-tags content allows a tag to be added after
mixTagsInterpolator : ['[[', ']]'], // Interpolation for mix mode. Everything between these will become a tag, if is a valid Object
backspace : true, // false / true / "edit"
skipInvalid : false, // If `true`, do not add invalid, temporary, tags before automatically removing them
pasteAsTags : true, // automatically converts pasted text into tags. if "false", allows for further text editing
editTags : {
clicks : 2, // clicks to enter "edit-mode": 1 for single click. any other value is considered as double-click
keepInvalid : true // keeps invalid edits as-is until `esc` is pressed while in focus
}, // 1 or 2 clicks to edit a tag. false/null for not allowing editing
transformTag : ()=>{}, // Takes a tag input string as argument and returns a transformed value
trim : true, // whether or not the value provided should be trimmed, before being added as a tag
a11y: {
focusableTags: false
},
mixMode: {
insertAfterTag : '\u00A0', // String/Node to inject after a tag has been added (see #588)
},
autoComplete: {
enabled: true, // Tries to suggest the input's value while typing (match from whitelist) by adding the rest of term as grayed-out text
rightKey: false, // If `true`, when Right key is pressed, use the suggested value to create a tag, else just auto-completes the input. in mixed-mode this is set to "true"
tabKey: false, // If 'true`, pressing `tab` key would only auto-complete but not also convert to a tag (like `rightKey` does).
},
classNames: {
namespace : 'tagify',
mixMode : 'tagify--mix',
selectMode : 'tagify--select',
input : 'tagify__input',
focus : 'tagify--focus',
tagNoAnimation : 'tagify--noAnim',
tagInvalid : 'tagify--invalid',
tagNotAllowed : 'tagify--notAllowed',
scopeLoading : 'tagify--loading',
hasMaxTags : 'tagify--hasMaxTags',
hasNoTags : 'tagify--noTags',
empty : 'tagify--empty',
inputInvalid : 'tagify__input--invalid',
dropdown : 'tagify__dropdown',
dropdownWrapper : 'tagify__dropdown__wrapper',
dropdownHeader : 'tagify__dropdown__header',
dropdownFooter : 'tagify__dropdown__footer',
dropdownItem : 'tagify__dropdown__item',
dropdownItemActive : 'tagify__dropdown__item--active',
dropdownItemHidden : 'tagify__dropdown__item--hidden',
dropdownItemSelected : 'tagify__dropdown__item--selected',
dropdownInital : 'tagify__dropdown--initial',
tag : 'tagify__tag',
tagText : 'tagify__tag-text',
tagX : 'tagify__tag__removeBtn',
tagLoading : 'tagify__tag--loading',
tagEditing : 'tagify__tag--editable',
tagFlash : 'tagify__tag--flash',
tagHide : 'tagify__tag--hide',
},
dropdown: {
classname : '',
enabled : 2, // minimum input characters to be typed for the suggestions dropdown to show
maxItems : 10,
searchKeys : ["value", "searchBy"],
fuzzySearch : true,
caseSensitive : false,
accentedSearch : true,
includeSelectedTags: false, // Should the suggestions list Include already-selected tags (after filtering)
escapeHTML : true, // escapes HTML entities in the suggestions' rendered text
highlightFirst : true, // highlights first-matched item in the list
closeOnSelect : true, // closes the dropdown after selecting an item, if `enabled:0` (which means always show dropdown)
clearOnSelect : true, // after selecting a suggetion, should the typed text input remain or be cleared
position : 'all', // 'manual' / 'text' / 'all'
appendTarget : null // defaults to document.body once DOM has been loaded
},
hooks: {
beforeRemoveTag: () => Promise.resolve(),
beforePaste: () => Promise.resolve(),
suggestionClick: () => Promise.resolve(),
beforeKeyDown: () => Promise.resolve(),
}
}