@johmun/vue-tags-input - npm Package Compare versions

Comparing version 1.6.0 to 2.0.0

dist/vue-tags-input.js

@@ -1,2 +0,2 @@
-!function(A,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.vueTagsInput=t():A.vueTagsInput=t()}("undefined"!=typeof self?self:this,function(){return function(A){function t(n){if(e[n])return e[n].exports;var a=e[n]={i:n,l:!1,exports:{}};return A[n].call(a.exports,a,a.exports,t),a.l=!0,a.exports}var e={};return t.m=A,t.c=e,t.d=function(A,e,n){t.o(A,e)||Object.defineProperty(A,e,{configurable:!1,enumerable:!0,get:n})},t.n=function(A){var e=A&&A.__esModule?function(){return A.default}:function(){return A};return t.d(e,"a",e),e},t.o=function(A,t){return Object.prototype.hasOwnProperty.call(A,t)},t.p="/dist/",t(t.s=8)}([function(A,t){function e(A,t){var e=A[1]||"",a=A[3];if(!a)return e;if(t&&"function"==typeof btoa){var i=n(a);return[e].concat(a.sources.map(function(A){return"/*# sourceURL="+a.sourceRoot+A+" */"})).concat([i]).join("\n")}return""+e}function n(A){return"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(A))))+" */"}A.exports=function(A){var t=[];return t.toString=function(){return this.map(function(t){var n=e(t,A);return t[2]?"@media "+t[2]+"{"+n+"}":n}).join("")},t.i=function(A,e){"string"==typeof A&&(A=[[null,A,""]]);for(var n={},a=0;this.length>a;a++){var i=this[a][0];"number"==typeof i&&(n[i]=!0)}for(a=0;A.length>a;a++){var o=A[a];"number"==typeof o[0]&&n[o[0]]||(e&&!o[2]?o[2]=e:e&&(o[2]="("+o[2]+") and ("+e+")"),t.push(o))}},t}},function(A,t){A.exports="data:application/vnd.ms-fontobject;base64,aAUAAMQEAAABAAIAAAAAAAAAAAAAAAAAAAABAJABAAAAAExQAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAUdPJHwAAAAAAAAAAAAAAAAAAAAAAAA4AaQBjAG8AbQBvAG8AbgAAAA4AUgBlAGcAdQBsAGEAcgAAABYAVgBlAHIAcwBpAG8AbgAgADEALgAwAAAADgBpAGMAbwBtAG8AbwBuAAAAAAAAAQAAAAsAgAADADBPUy8yDxIFrAAAALwAAABgY21hcBdW0okAAAEcAAAAVGdhc3AAAAAQAAABcAAAAAhnbHlmpZ+jMAAAAXgAAAD8aGVhZA/FmAgAAAJ0AAAANmhoZWEHgAPIAAACrAAAACRobXR4EgABvgAAAtAAAAAcbG9jYQCSAOIAAALsAAAAEG1heHAACQAfAAAC/AAAACBuYW1lmUoJ+wAAAxwAAAGGcG9zdAADAAAAAASkAAAAIAADA4ABkAAFAAACmQLMAAAAjwKZAswAAAHrADMBCQAAAAAAAAAAAAAAAAAAAAEQAAAAAAAAAAAAAAAAAAAAAEAAAOkCA8D/wABAA8AAQAAAAAEAAAAAAAAAAAAAACAAAAAAAAMAAAADAAAAHAABAAMAAAAcAAMAAQAAABwABAA4AAAACgAIAAIAAgABACDpAv/9//8AAAAAACDpAP/9//8AAf/jFwQAAwABAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAVgEBA74CgQAcAAABMhceARcWFwcmJy4BJyYjIgYHFyERFzY3PgE3NgIWSkNDbykpF2QQIB9VMzQ5P3AtnP6AmB0iIkspKAJVFxhSODlCIDMrKz4REislmgGAmhkVFBwICAABANYAgQMqAtUACwAAAQcXBycHJzcnNxc3Ayru7jzu7jzu7jzu7gKZ7u487u487u487u4AAQCSAIEDgAK9AAUAACUBFwEnNwGAAcQ8/gDuPPkBxDz+AO48AAAAAAEAAAAAAAAfydNRXw889QALBAAAAAAA1nUqGwAAAADWdSobAAAAAAO+AtUAAAAIAAIAAAAAAAAAAQAAA8D/wAAABAAAAAAAA74AAQAAAAAAAAAAAAAAAAAAAAcEAAAAAAAAAAAAAAACAAAABAAAVgQAANYEAACSAAAAAAAKABQAHgBQAGoAfgABAAAABwAdAAEAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEABwAAAAEAAAAAAAIABwBgAAEAAAAAAAMABwA2AAEAAAAAAAQABwB1AAEAAAAAAAUACwAVAAEAAAAAAAYABwBLAAEAAAAAAAoAGgCKAAMAAQQJAAEADgAHAAMAAQQJAAIADgBnAAMAAQQJAAMADgA9AAMAAQQJAAQADgB8AAMAAQQJAAUAFgAgAAMAAQQJAAYADgBSAAMAAQQJAAoANACkaWNvbW9vbgBpAGMAbwBtAG8AbwBuVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwaWNvbW9vbgBpAGMAbwBtAG8AbwBuaWNvbW9vbgBpAGMAbwBtAG8AbwBuUmVndWxhcgBSAGUAZwB1AGwAYQByaWNvbW9vbgBpAGMAbwBtAG8AbwBuRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=="},function(A,t,e){function n(A){for(var t=0;A.length>t;t++){var e=A[t],n=l[e.id];if(n){n.refs++;for(var a=0;n.parts.length>a;a++)n.parts[a](e.parts[a]);for(;e.parts.length>a;a++)n.parts.push(i(e.parts[a]));n.parts.length>e.parts.length&&(n.parts.length=e.parts.length)}else{for(var o=[],a=0;e.parts.length>a;a++)o.push(i(e.parts[a]));l[e.id]={id:e.id,refs:1,parts:o}}}}function a(){var A=document.createElement("style");return A.type="text/css",c.appendChild(A),A}function i(A){var t,e,n=document.querySelector("style["+v+'~="'+A.id+'"]');if(n){if(p)return f;n.parentNode.removeChild(n)}if(h){var i=g++;n=d||(d=a()),t=o.bind(null,n,i,!1),e=o.bind(null,n,i,!0)}else n=a(),t=r.bind(null,n),e=function(){n.parentNode.removeChild(n)};return t(A),function(n){if(n){if(n.css===A.css&&n.media===A.media&&n.sourceMap===A.sourceMap)return;t(A=n)}else e()}}function o(A,t,e,n){var a=e?"":n.css;if(A.styleSheet)A.styleSheet.cssText=b(t,a);else{var i=document.createTextNode(a),o=A.childNodes;o[t]&&A.removeChild(o[t]),o.length?A.insertBefore(i,o[t]):A.appendChild(i)}}function r(A,t){var e=t.css,n=t.media,a=t.sourceMap;if(n&&A.setAttribute("media",n),m.ssrId&&A.setAttribute(v,t.id),a&&(e+="\n/*# sourceURL="+a.sources[0]+" */",e+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(a))))+" */"),A.styleSheet)A.styleSheet.cssText=e;else{for(;A.firstChild;)A.removeChild(A.firstChild);A.appendChild(document.createTextNode(e))}}var s="undefined"!=typeof document;if("undefined"!=typeof DEBUG&&DEBUG&&!s)throw Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var u=e(15),l={},c=s&&(document.head||document.getElementsByTagName("head")[0]),d=null,g=0,p=!1,f=function(){},m=null,v="data-vue-ssr-id",h="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());A.exports=function(A,t,e,a){p=e,m=a||{};var i=u(A,t);return n(i),function(t){for(var e=[],a=0;i.length>a;a++){var o=i[a],r=l[o.id];r.refs--,e.push(r)}t?(i=u(A,t),n(i)):i=[];for(var a=0;e.length>a;a++){var r=e[a];if(0===r.refs){for(var s=0;r.parts.length>s;s++)r.parts[s]();delete l[r.id]}}}};var b=function(){var A=[];return function(t,e){return A[t]=e,A.filter(Boolean).join("\n")}}()},function(A,t){A.exports=function(A,t,e,n,a,i){var o,r=A=A||{},s=typeof A.default;"object"!==s&&"function"!==s||(o=A,r=A.default);var u="function"==typeof r?r.options:r;t&&(u.render=t.render,u.staticRenderFns=t.staticRenderFns,u._compiled=!0),e&&(u.functional=!0),a&&(u._scopeId=a);var l;if(i?(l=function(A){A=A||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,A||"undefined"==typeof __VUE_SSR_CONTEXT__||(A=__VUE_SSR_CONTEXT__),n&&n.call(this,A),A&&A._registeredComponents&&A._registeredComponents.add(i)},u._ssrRegister=l):n&&(l=n),l){var c=u.functional,d=c?u.render:u.beforeCreate;c?(u._injectStyles=l,u.render=function(A,t){return l.call(t),d(A,t)}):u.beforeCreate=d?[].concat(d,l):[l]}return{esModule:o,exports:r,options:u}}},function(A,t,e){"use strict";var n=e(16),a=e.n(n),i=e(5),o=e(6),r=e(20),s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(A){return typeof A}:function(A){return A&&"function"==typeof Symbol&&A.constructor===Symbol&&A!==Symbol.prototype?"symbol":typeof A};t.a={name:"VueTagsInput",components:{TagInput:o.a},props:r.a,data:function(){return{newTag:null,tagsCopy:null,tagsEditStatus:null,deletionMark:null,deletionMarkTime:null,selectedItem:null,focused:null}},computed:{autocompleteOpen:function(){return!!this.autocompleteAlwaysOpen||null!==this.newTag&&this.newTag.length>=this.autocompleteMinLength&&this.filteredAutocompleteItems.length>0&&this.focused},filteredAutocompleteItems:function(){var A=this,t=this.autocompleteItems.map(function(t){return Object(i.c)(t,A.tags,A.validation,A.isDuplicate)});return this.autocompleteFilterDuplicates?t.filter(this.duplicateFilter):t}},methods:{createClasses:i.b,getSelectedIndex:function(A){var t=this.filteredAutocompleteItems,e=this.selectedItem,n=t.length-1;if(0!==t.length)return null===e?0:"before"===A&&0===e?n:"after"===A&&e===n?0:"after"===A?e+1:e-1},selectDefaultItem:function(){this.selectedItem=this.addOnlyFromAutocomplete&&this.filteredAutocompleteItems.length>0?0:null},selectItem:function(A,t){A.preventDefault(),this.selectedItem=this.getSelectedIndex(t)},isSelected:function(A){return this.selectedItem===A},isMarked:function(A){return this.deletionMark===A},invokeDelete:function(){var A=this;if(this.deleteOnBackslash&&0>=this.newTag.length){var t=this.tagsCopy.length-1;null===this.deletionMark?(this.deletionMarkTime=setTimeout(function(){return A.deletionMark=null},1e3),this.deletionMark=t):this.performDeleteTag(t)}},addTagsFromPaste:function(){var A=this;this.addFromPaste&&setTimeout(function(){return A.performAddTags(A.newTag)},10)},performEditTag:function(A){var t=this;this.allowEditTags&&(this._events["before-editing-tag"]||this.editTag(A),this.$emit("before-editing-tag",{index:A,tag:this.tagsCopy[A],editTag:function(){return t.editTag(A)}}))},editTag:function(A){this.allowEditTags&&(this.toggleEditMode(A),this.focus(A))},toggleEditMode:function(A){this.allowEditTags&&!this.disabled&&this.$set(this.tagsEditStatus,A,!this.tagsEditStatus[A])},createChangedTag:function(A,t){var e=this.tagsCopy[A];e.text=t?t.target.value:this.tagsCopy[A].text,this.$set(this.tagsCopy,A,Object(i.c)(e,this.tagsCopy,this.validation,this.isDuplicate))},focus:function(A){var t=this;this.$nextTick(function(){var e=t.$refs.tagCenter[A].querySelector("input.tag-input");e&&e.focus()})},quote:function(A){return A.replace(/([()[{*+.$^\\|?])/g,"\\$1")},cancelEdit:function(A){this.tags[A]&&(this.tagsCopy[A]=Object(i.a)(Object(i.c)(this.tags[A],this.tags,this.validation,this.isDuplicate)),this.$set(this.tagsEditStatus,A,!1))},hasForbiddingAddRule:function(A){var t=this;return A.some(function(A){var e=t.validation.find(function(t){return A===t.type});return!!e&&e.disableAdd})},createTagTexts:function(A){var t=this;return A.split(RegExp(this.separators.map(function(A){return t.quote(A)}).join("|"))).map(function(A){return{text:A}})},performDeleteTag:function(A){var t=this;this._events["before-deleting-tag"]||this.deleteTag(A),this.$emit("before-deleting-tag",{index:A,tag:this.tagsCopy[A],deleteTag:function(){return t.deleteTag(A)}})},deleteTag:function(A){this.disabled||(this.deletionMark=null,clearTimeout(this.deletionMarkTime),this.tagsCopy.splice(A,1),this._events["update:tags"]&&this.$emit("update:tags",this.tagsCopy),this.$emit("tags-changed",this.tagsCopy))},noTriggerKey:function(A,t){var e=-1!==this[t].indexOf(A.keyCode)||-1!==this[t].indexOf(A.key);return e&&A.preventDefault(),!e},performAddTags:function(A,t,e){var n=this;if(!(this.disabled||t&&this.noTriggerKey(t,"addOnKey")||"string"==typeof A&&0===A.trim().length)){var a=[];"object"===(void 0===A?"undefined":s(A))&&(a=[A]),"string"==typeof A&&(a=this.createTagTexts(A)),a.forEach(function(A){A=Object(i.c)(A,n.tags,n.validation,n.isDuplicate),n._events["before-adding-tag"]||n.addTag(A,e),n.$emit("before-adding-tag",{tag:A,addTag:function(){return n.addTag(A,e)}})})}},duplicateFilter:function(A){return this.isDuplicate?!this.isDuplicate(this.tagsCopy,A):!this.tagsCopy.find(function(t){return t.text===A.text})},addTag:function(A){var t=this,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"new-tag-input",n=this.filteredAutocompleteItems.map(function(A){return A.text});this.addOnlyFromAutocomplete&&-1===n.indexOf(A.text)||this.$nextTick(function(){return t.maxTags&&t.tagsCopy.length>=t.maxTags?t.$emit("max-tags-reached",A):t.avoidAddingDuplicates&&!t.duplicateFilter(A)?t.$emit("adding-duplicate",A):void(!A.valid&&t.hasForbiddingAddRule(A.tiClasses)||(t.$emit("input",""),t.tagsCopy.push(A),t._events["update:tags"]&&t.$emit("update:tags",t.tagsCopy),"autocomplete"===e&&t.$refs.newTagInput.focus(),t.$emit("tags-changed",t.tagsCopy)))})},performSaveTag:function(A,t){var e=this,n=this.tagsCopy[A];this.disabled||t&&this.noTriggerKey(t,"addOnKey")||0!==n.text.trim().length&&(this._events["before-saving-tag"]||this.saveTag(A,n),this.$emit("before-saving-tag",{index:A,tag:n,saveTag:function(){return e.saveTag(A,n)}}))},saveTag:function(A,t){if(this.avoidAddingDuplicates){var e=Object(i.a)(this.tagsCopy),n=e.splice(A,1)[0];if(this.isDuplicate?this.isDuplicate(e,n):-1!==e.map(function(A){return A.text}).indexOf(n.text))return this.$emit("saving-duplicate",t)}!t.valid&&this.hasForbiddingAddRule(t.tiClasses)||(this.$set(this.tagsCopy,A,t),this.toggleEditMode(A),this._events["update:tags"]&&this.$emit("update:tags",this.tagsCopy),this.$emit("tags-changed",this.tagsCopy))},tagsEqual:function(){var A=this;return!this.tagsCopy.some(function(t,e){return!a()(t,A.tags[e])})},updateNewTag:function(A){var t=A.target.value;this.newTag=t,this.$emit("input",t)},initTags:function(){this.tagsCopy=Object(i.d)(this.tags,this.validation,this.isDuplicate),this.tagsEditStatus=Object(i.a)(this.tags).map(function(){return!1}),this._events["update:tags"]&&!this.tagsEqual()&&this.$emit("update:tags",this.tagsCopy)},blurred:function(A){this.$el.contains(A.target)||(this.addOnBlur&&this.focused&&this.performAddTags(this.newTag),this.focused=!1)}},watch:{value:function(A){this.addOnlyFromAutocomplete||(this.selectedItem=null),this.newTag=A},tags:{handler:function(){this.initTags()},deep:!0},autocompleteOpen:"selectDefaultItem"},created:function(){this.newTag=this.value,this.initTags()},mounted:function(){this.selectDefaultItem(),document.addEventListener("click",this.blurred)},destroyed:function(){document.removeEventListener("click",this.blurred)}}},function(A,t,e){"use strict";e.d(t,"b",function(){return o}),e.d(t,"c",function(){return r}),e.d(t,"d",function(){return s}),e.d(t,"a",function(){return a});var n=function(A,t){return t.filter(function(t){return"string"==typeof t.rule?!RegExp(t.rule).test(A):t.rule instanceof RegExp?!t.rule.test(A):"[object Function]"==={}.toString.call(t.rule)?t.rule(A):void 0}).map(function(A){return A.type})},a=function(A){return JSON.parse(JSON.stringify(A))},i=function(A,t){for(var e=0;A.length>e;){if(t(A[e],e,A))return e;e++}return-1},o=function(A,t){var e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:[],o=arguments[3];void 0===A.text&&(A={text:A});var r=n(A.text,e),s=i(t,function(t){return t===A}),u=a(t),l=-1!==s?u.splice(s,1)[0]:a(A);return(o?o(u,l):-1!==u.map(function(A){return A.text}).indexOf(l.text))&&r.push("duplicate"),r.push(0===r.length?"valid":"invalid"),r},r=function(A){for(var t=arguments.length,e=Array(t>1?t-1:0),n=1;t>n;n++)e[n-1]=arguments[n];void 0===A.text&&(A={text:A});var i=a(A);return i.tiClasses=o.apply(void 0,[A].concat(e)),i},s=function(A){for(var t=arguments.length,e=Array(t>1?t-1:0),n=1;t>n;n++)e[n-1]=arguments[n];return A.map(function(t){return r.apply(void 0,[t,A].concat(e))})}},function(A,t,e){"use strict";function n(A){e(17)}var a=e(7),i=e(19);t.a=e(3)(a.a,i.a,!1,n,"data-v-5d05513b",null).exports},function(A,t,e){"use strict";t.a={name:"TagInput",props:["scope"]}},function(A,t,e){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n=e(9),a=e(5),i=e(6);e.d(t,"VueTagsInput",function(){return n.a}),e.d(t,"createClasses",function(){return a.b}),e.d(t,"createTag",function(){return a.c}),e.d(t,"createTags",function(){return a.d}),e.d(t,"TagInput",function(){return i.a}),n.a.install=function(A){return A.component(n.a.name,n.a)},"undefined"!=typeof window&&window.Vue&&window.Vue.use(n.a),t.default=n.a},function(A,t,e){"use strict";function n(A){e(10)}var a=e(4),i=e(21);t.a=e(3)(a.a,i.a,!1,n,"data-v-523b8ea9",null).exports},function(A,t,e){var n=e(11);"string"==typeof n&&(n=[[A.i,n,""]]),n.locals&&(A.exports=n.locals);e(2)("3e3f1cb8",n,!0,{})},function(A,t,e){var n=e(12);t=A.exports=e(0)(!1),t.push([A.i,"@font-face{font-family:icomoon;src:url("+n(e(1))+");src:url("+n(e(1))+'#iefix) format("embedded-opentype"),url('+n(e(13))+') format("truetype"),url('+n(e(14))+') format("woff");font-weight:400;font-style:normal}[class*=" icon-"][data-v-523b8ea9],[class^=icon-][data-v-523b8ea9]{font-family:icomoon!important;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-check[data-v-523b8ea9]:before{content:"\\E902"}.icon-close[data-v-523b8ea9]:before{content:"\\E901"}.icon-undo[data-v-523b8ea9]:before{content:"\\E900"}ul[data-v-523b8ea9]{margin:0;padding:0;list-style-type:none}[data-v-523b8ea9],[data-v-523b8ea9]:after,[data-v-523b8ea9]:before{-webkit-box-sizing:border-box;box-sizing:border-box}input[data-v-523b8ea9]:focus{outline:none}input[disabled][data-v-523b8ea9]{background-color:transparent}.vue-tags-input[data-v-523b8ea9]{max-width:450px;position:relative;background-color:#fff}.vue-tags-input.vue-tags-input.disabled[data-v-523b8ea9]{opacity:.5}.vue-tags-input.vue-tags-input.disabled [data-v-523b8ea9]{cursor:default}.input[data-v-523b8ea9]{border:1px solid #ccc;padding:4px}.input[data-v-523b8ea9],.tags[data-v-523b8ea9]{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.tags[data-v-523b8ea9]{width:100%}.tag[data-v-523b8ea9]{background-color:#5c6bc0;color:#fff;border-radius:2px;display:-webkit-box;display:-ms-flexbox;display:flex;padding:3px 5px;margin:2px;font-size:.85em}.tag[data-v-523b8ea9]:focus{outline:none}.tag .content[data-v-523b8ea9]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.tag .tag-center[data-v-523b8ea9]{position:relative}.tag span[data-v-523b8ea9]{line-height:inherit}.tag span.hidden[data-v-523b8ea9]{padding-left:14px;visibility:hidden;height:0;white-space:pre}.tag .actions[data-v-523b8ea9]{margin-left:2px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-size:1.15em}.tag .actions i[data-v-523b8ea9]{cursor:pointer}.tag[data-v-523b8ea9]:last-child{margin-right:4px}.tag.invalid[data-v-523b8ea9],.tag.tag.deletion-mark[data-v-523b8ea9]{background-color:#e54d42}.new-tag-input-wrapper[data-v-523b8ea9]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto;padding:3px 5px;margin:2px;font-size:.85em}.new-tag-input-wrapper input[data-v-523b8ea9]{-webkit-box-flex:1;-ms-flex:1 0 auto;flex:1 0 auto;min-width:100px;border:none;padding:0;margin:0}.new-tag-input[data-v-523b8ea9]{line-height:inherit}.autocomplete[data-v-523b8ea9]{border:1px solid #ccc;border-top:none;position:absolute;width:100%;background-color:#fff;z-index:20}.item>div[data-v-523b8ea9]{cursor:pointer;padding:3px 6px;width:100%}.selected-item[data-v-523b8ea9]{background-color:#5c6bc0;color:#fff}',""])},function(A,t){A.exports=function(A){return"string"!=typeof A?A:(/^['"].*['"]$/.test(A)&&(A=A.slice(1,-1)),/["'() \t\n]/.test(A)?'"'+A.replace(/"/g,'\\"').replace(/\n/g,"\\n")+'"':A)}},function(A,t){A.exports="data:font/ttf;base64,AAEAAAALAIAAAwAwT1MvMg8SBawAAAC8AAAAYGNtYXAXVtKJAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5ZqWfozAAAAF4AAAA/GhlYWQPxZgIAAACdAAAADZoaGVhB4ADyAAAAqwAAAAkaG10eBIAAb4AAALQAAAAHGxvY2EAkgDiAAAC7AAAABBtYXhwAAkAHwAAAvwAAAAgbmFtZZlKCfsAAAMcAAABhnBvc3QAAwAAAAAEpAAAACAAAwOAAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpAgPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAOAAAAAoACAACAAIAAQAg6QL//f//AAAAAAAg6QD//f//AAH/4xcEAAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAFYBAQO+AoEAHAAAATIXHgEXFhcHJicuAScmIyIGBxchERc2Nz4BNzYCFkpDQ28pKRdkECAfVTM0OT9wLZz+gJgdIiJLKSgCVRcYUjg5QiAzKys+ERIrJZoBgJoZFRQcCAgAAQDWAIEDKgLVAAsAAAEHFwcnByc3JzcXNwMq7u487u487u487u4Cme7uPO7uPO7uPO7uAAEAkgCBA4ACvQAFAAAlARcBJzcBgAHEPP4A7jz5AcQ8/gDuPAAAAAABAAAAAAAAH8nTUV8PPPUACwQAAAAAANZ1KhsAAAAA1nUqGwAAAAADvgLVAAAACAACAAAAAAAAAAEAAAPA/8AAAAQAAAAAAAO+AAEAAAAAAAAAAAAAAAAAAAAHBAAAAAAAAAAAAAAAAgAAAAQAAFYEAADWBAAAkgAAAAAACgAUAB4AUABqAH4AAQAAAAcAHQABAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAA4ArgABAAAAAAABAAcAAAABAAAAAAACAAcAYAABAAAAAAADAAcANgABAAAAAAAEAAcAdQABAAAAAAAFAAsAFQABAAAAAAAGAAcASwABAAAAAAAKABoAigADAAEECQABAA4ABwADAAEECQACAA4AZwADAAEECQADAA4APQADAAEECQAEAA4AfAADAAEECQAFABYAIAADAAEECQAGAA4AUgADAAEECQAKADQApGljb21vb24AaQBjAG8AbQBvAG8AblZlcnNpb24gMS4wAFYAZQByAHMAaQBvAG4AIAAxAC4AMGljb21vb24AaQBjAG8AbQBvAG8Abmljb21vb24AaQBjAG8AbQBvAG8AblJlZ3VsYXIAUgBlAGcAdQBsAGEAcmljb21vb24AaQBjAG8AbQBvAG8AbkZvbnQgZ2VuZXJhdGVkIGJ5IEljb01vb24uAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA="},function(A,t){A.exports="data:font/woff;base64,d09GRgABAAAAAAUQAAsAAAAABMQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABCAAAAGAAAABgDxIFrGNtYXAAAAFoAAAAVAAAAFQXVtKJZ2FzcAAAAbwAAAAIAAAACAAAABBnbHlmAAABxAAAAPwAAAD8pZ+jMGhlYWQAAALAAAAANgAAADYPxZgIaGhlYQAAAvgAAAAkAAAAJAeAA8hobXR4AAADHAAAABwAAAAcEgABvmxvY2EAAAM4AAAAEAAAABAAkgDibWF4cAAAA0gAAAAgAAAAIAAJAB9uYW1lAAADaAAAAYYAAAGGmUoJ+3Bvc3QAAATwAAAAIAAAACAAAwAAAAMDgAGQAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA6QIDwP/AAEADwABAAAAAAQAAAAAAAAAAAAAAIAAAAAAAAwAAAAMAAAAcAAEAAwAAABwAAwABAAAAHAAEADgAAAAKAAgAAgACAAEAIOkC//3//wAAAAAAIOkA//3//wAB/+MXBAADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQBWAQEDvgKBABwAAAEyFx4BFxYXByYnLgEnJiMiBgcXIREXNjc+ATc2AhZKQ0NvKSkXZBAgH1UzNDk/cC2c/oCYHSIiSykoAlUXGFI4OUIgMysrPhESKyWaAYCaGRUUHAgIAAEA1gCBAyoC1QALAAABBxcHJwcnNyc3FzcDKu7uPO7uPO7uPO7uApnu7jzu7jzu7jzu7gABAJIAgQOAAr0ABQAAJQEXASc3AYABxDz+AO48+QHEPP4A7jwAAAAAAQAAAAAAAB/J01FfDzz1AAsEAAAAAADWdSobAAAAANZ1KhsAAAAAA74C1QAAAAgAAgAAAAAAAAABAAADwP/AAAAEAAAAAAADvgABAAAAAAAAAAAAAAAAAAAABwQAAAAAAAAAAAAAAAIAAAAEAABWBAAA1gQAAJIAAAAAAAoAFAAeAFAAagB+AAEAAAAHAB0AAQAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAHAAAAAQAAAAAAAgAHAGAAAQAAAAAAAwAHADYAAQAAAAAABAAHAHUAAQAAAAAABQALABUAAQAAAAAABgAHAEsAAQAAAAAACgAaAIoAAwABBAkAAQAOAAcAAwABBAkAAgAOAGcAAwABBAkAAwAOAD0AAwABBAkABAAOAHwAAwABBAkABQAWACAAAwABBAkABgAOAFIAAwABBAkACgA0AKRpY29tb29uAGkAYwBvAG0AbwBvAG5WZXJzaW9uIDEuMABWAGUAcgBzAGkAbwBuACAAMQAuADBpY29tb29uAGkAYwBvAG0AbwBvAG5pY29tb29uAGkAYwBvAG0AbwBvAG5SZWd1bGFyAFIAZQBnAHUAbABhAHJpY29tb29uAGkAYwBvAG0AbwBvAG5Gb250IGdlbmVyYXRlZCBieSBJY29Nb29uLgBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAC4AAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA"},function(A,t){A.exports=function(A,t){for(var e=[],n={},a=0;t.length>a;a++){var i=t[a],o=i[0],r=i[1],s=i[2],u=i[3],l={id:A+":"+a,css:r,media:s,sourceMap:u};n[o]?n[o].parts.push(l):e.push(n[o]={id:o,parts:[l]})}return e}},function(A,t,e){"use strict";var n=Array.isArray,a=Object.keys,i=Object.prototype.hasOwnProperty;A.exports=function A(t,e){if(t===e)return!0;if(t&&e&&"object"==typeof t&&"object"==typeof e){var o,r,s,u=n(t),l=n(e);if(u&&l){if((r=t.length)!=e.length)return!1;for(o=r;0!=o--;)if(!A(t[o],e[o]))return!1;return!0}if(u!=l)return!1;var c=t instanceof Date,d=e instanceof Date;if(c!=d)return!1;if(c&&d)return t.getTime()==e.getTime();var g=t instanceof RegExp,p=e instanceof RegExp;if(g!=p)return!1;if(g&&p)return""+t==""+e;var f=a(t);if((r=f.length)!==a(e).length)return!1;for(o=r;0!=o--;)if(!i.call(e,f[o]))return!1;for(o=r;0!=o--;)if(s=f[o],!A(t[s],e[s]))return!1;return!0}return t!==t&&e!==e}},function(A,t,e){var n=e(18);"string"==typeof n&&(n=[[A.i,n,""]]),n.locals&&(A.exports=n.locals);e(2)("85656b4e",n,!0,{})},function(A,t,e){t=A.exports=e(0)(!1),t.push([A.i,".tag-input[data-v-5d05513b]{background-color:transparent;color:inherit;border:none;padding:0;margin:0;display:-webkit-box;display:-ms-flexbox;display:flex;top:0;position:absolute;width:100%;line-height:inherit}.tag-input[data-v-5d05513b]::-ms-clear{display:none}input[data-v-5d05513b]:focus{outline:none}input[disabled][data-v-5d05513b]{background-color:transparent}",""])},function(A,t,e){"use strict";t.a={render:function(){var A=this,t=A.$createElement,e=A._self._c||t;return A.scope.edit?e("input",{directives:[{name:"model",rawName:"v-model",value:A.scope.tag.text,expression:"scope.tag.text"}],staticClass:"tag-input",attrs:{type:"text",maxlength:A.scope.maxlength,size:"1"},domProps:{value:A.scope.tag.text},on:{input:[function(t){t.target.composing||A.$set(A.scope.tag,"text",t.target.value)},function(t){A.scope.validateTag(A.scope.index,t)}],blur:function(t){A.scope.cancelEdit(A.scope.index)},keydown:function(t){A.scope.performSaveTag(A.scope.index,t)}}}):A._e()},staticRenderFns:[]}},function(A,t,e){"use strict";var n=function(A){return!A.some(function(A){var t=!A.text;t&&console.warn('Missing property "text"',A);var e=!1;return A.classes&&(e="string"!=typeof A.classes),e&&console.warn('Property "classes" must be type of string',A),t||e})},a=function(A){return!A.some(function(A){if("number"==typeof A){var t=isFinite(A)&&Math.floor(A)===A;return t||console.warn("Only numerics are allowed for this prop. Found:",A),!t}if("string"==typeof A){var e=/\W|[a-z]|!\d/i.test(A);return e||console.warn("Only alpha strings are allowed for this prop. Found:",A),!e}return console.warn("Only numeric and string values are allowed. Found:",A),!1})};t.a={value:{type:String,default:"",required:!0},tags:{type:Array,default:function(){return[]},validator:n},autocompleteItems:{type:Array,default:function(){return[]},validator:n},allowEditTags:{type:Boolean,default:!1},autocompleteFilterDuplicates:{default:!0,type:Boolean},addOnlyFromAutocomplete:{type:Boolean,default:!1},autocompleteMinLength:{type:Number,default:1},autocompleteAlwaysOpen:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},placeholder:{type:String,default:"Add Tag"},addOnKey:{type:Array,default:function(){return[13]},validator:a},saveOnKey:{type:Array,default:function(){return[13]},validator:a},maxTags:{type:Number},maxlength:{type:Number},validation:{type:Array,default:function(){return[]},validator:function(A){return!A.some(function(A){var t=!A.rule;t&&console.warn('Property "rule" is missing',A);var e=A.rule&&("string"==typeof A.rule||A.rule instanceof RegExp||"[object Function]"==={}.toString.call(A.rule));e||console.warn("A rule must be type of string, RegExp or function. Found:",JSON.stringify(A.rule));var n=!A.type;n&&console.warn('Property "type" is missing',A);var a=A.type&&"string"!=typeof A.type;return a&&console.warn('Property "type" must be type of string. Found:',A),!e||t||n||a})}},separators:{type:Array,default:function(){return[";"]},validator:function(A){return!A.some(function(A){var t="string"!=typeof A;return t&&console.warn("Separators must be type of string. Found:",A),t})}},avoidAddingDuplicates:{type:Boolean,default:!0},addOnBlur:{type:Boolean,default:!0},isDuplicate:{type:Function,default:null},addFromPaste:{type:Boolean,default:!0},deleteOnBackslash:{default:!0,type:Boolean}}},function(A,t,e){"use strict";t.a={render:function(){var A=this,t=A.$createElement,e=A._self._c||t;return e("div",{staticClass:"vue-tags-input",class:[{disabled:A.disabled},{"ti-focus":A.focused}]},[e("div",{staticClass:"input"},[A.tagsCopy?e("ul",{staticClass:"tags"},[A._l(A.tagsCopy,function(t,n){return e("li",{key:n,staticClass:"tag",class:[{editing:A.tagsEditStatus[n]},t.tiClasses,t.classes,{"deletion-mark":A.isMarked(n)}],style:t.style,attrs:{tabindex:n+1},on:{click:function(e){A.$emit("tag-clicked",{tag:t,index:n})}}},[e("div",{staticClass:"content"},[A.$scopedSlots.tagLeft?e("div",{staticClass:"tag-left"},[A._t("tagLeft",null,{tag:t,index:n,edit:A.tagsEditStatus[n],performSaveEdit:A.performSaveTag,performDelete:A.performDeleteTag,performCancelEdit:A.cancelEdit,performOpenEdit:A.performEditTag,deletionMark:A.isMarked(n)})],2):A._e(),A._v(" "),e("div",{ref:"tagCenter",refInFor:!0,staticClass:"tag-center"},[A.$scopedSlots.tagCenter?A._e():e("span",{class:{hidden:A.tagsEditStatus[n]},on:{click:function(t){A.performEditTag(n)}}},[A._v(A._s(t.text))]),A._v(" "),A.$scopedSlots.tagCenter?A._e():e("tag-input",{attrs:{scope:{edit:A.tagsEditStatus[n],maxlength:A.maxlength,tag:t,index:n,validateTag:A.createChangedTag,cancelEdit:A.cancelEdit,performSaveTag:A.performSaveTag}}}),A._v(" "),A._t("tagCenter",null,{tag:t,index:n,maxlength:A.maxlength,edit:A.tagsEditStatus[n],performSaveEdit:A.performSaveTag,performDelete:A.performDeleteTag,performCancelEdit:A.cancelEdit,validateTag:A.createChangedTag,performSaveTag:A.performSaveTag,performOpenEdit:A.performEditTag,deletionMark:A.isMarked(n)})],2),A._v(" "),A.$scopedSlots.tagRight?e("div",{staticClass:"tag-right"},[A._t("tagRight",null,{tag:t,index:n,edit:A.tagsEditStatus[n],performSaveEdit:A.performSaveTag,performDelete:A.performDeleteTag,performCancelEdit:A.cancelEdit,performOpenEdit:A.performEditTag,deletionMark:A.isMarked(n)})],2):A._e()]),A._v(" "),e("div",{staticClass:"actions"},[A.$scopedSlots.tagActions?A._e():e("i",{directives:[{name:"show",rawName:"v-show",value:A.tagsEditStatus[n],expression:"tagsEditStatus[index]"}],staticClass:"icon-undo",on:{click:function(t){A.cancelEdit(n)}}}),A._v(" "),A.$scopedSlots.tagActions?A._e():e("i",{directives:[{name:"show",rawName:"v-show",value:!A.tagsEditStatus[n],expression:"!tagsEditStatus[index]"}],staticClass:"icon-close",on:{click:function(t){A.performDeleteTag(n)}}}),A._v(" "),A.$scopedSlots.tagActions?A._t("tagActions",null,{tag:t,index:n,edit:A.tagsEditStatus[n],performSaveEdit:A.performSaveTag,performDelete:A.performDeleteTag,performCancelEdit:A.cancelEdit,performOpenEdit:A.performEditTag,deletionMark:A.isMarked(n)}):A._e()],2)])}),A._v(" "),e("li",{staticClass:"new-tag-input-wrapper"},[e("input",A._b({ref:"newTagInput",staticClass:"new-tag-input",class:[A.createClasses(A.newTag,A.tags,A.validation,A.isDuplicate)],attrs:{type:"text",size:"1",placeholder:A.placeholder,maxlength:A.maxlength,disabled:A.disabled},domProps:{value:A.newTag},on:{paste:A.addTagsFromPaste,keydown:[function(t){A.performAddTags(A.filteredAutocompleteItems[A.selectedItem]||A.newTag,t)},function(t){return"button"in t||8===t.keyCode?A.invokeDelete(t):null},function(t){if(!("button"in t)&&38!==t.keyCode)return null;A.selectItem(t,"before")},function(t){if(!("button"in t)&&40!==t.keyCode)return null;A.selectItem(t,"after")}],input:A.updateNewTag,blur:function(t){A.$emit("blur",t)},focus:function(t){A.focused=!0,A.$emit("focus",t)},click:function(t){!A.addOnlyFromAutocomplete&&(A.selectedItem=null)}}},"input",A.$attrs,!1))])],2):A._e()]),A._v(" "),A._t("between-elements"),A._v(" "),A.autocompleteOpen?e("div",{staticClass:"autocomplete",on:{mouseout:function(t){A.selectedItem=null}}},[A._t("autocompleteHeader"),A._v(" "),e("ul",A._l(A.filteredAutocompleteItems,function(t,n){return e("li",{key:n,staticClass:"item",class:[t.tiClasses,t.classes,{"selected-item":A.isSelected(n)}],style:t.style,on:{mouseover:function(t){!A.disabled&&(A.selectedItem=n)}}},[A.$scopedSlots.autocompleteItem?A._t("autocompleteItem",null,{item:t,index:n,performAdd:function(t){return A.performAddTags(t,void 0,"autocomplete")},selected:A.isSelected(n)}):e("div",{on:{click:function(e){A.performAddTags(t,void 0,"autocomplete")}}},[A._v(A._s(t.text)+"\n        ")])],2)})),A._v(" "),A._t("autocompleteFooter")],2):A._e()],2)},staticRenderFns:[]}}])});
+!function(A,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.vueTagsInput=t():A.vueTagsInput=t()}(window,function(){return function(A){var t={};function e(n){if(t[n])return t[n].exports;var i=t[n]={i:n,l:!1,exports:{}};return A[n].call(i.exports,i,i.exports,e),i.l=!0,i.exports}return e.m=A,e.c=t,e.d=function(A,t,n){e.o(A,t)||Object.defineProperty(A,t,{enumerable:!0,get:n})},e.r=function(A){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(A,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(A,"__esModule",{value:!0})},e.t=function(A,t){if(1&t&&(A=e(A)),8&t)return A;if(4&t&&"object"==typeof A&&A&&A.__esModule)return A;var n=Object.create(null);if(e.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:A}),2&t&&"string"!=typeof A)for(var i in A)e.d(n,i,function(t){return A[t]}.bind(null,i));return n},e.n=function(A){var t=A&&A.__esModule?function(){return A.default}:function(){return A};return e.d(t,"a",t),t},e.o=function(A,t){return Object.prototype.hasOwnProperty.call(A,t)},e.p="/dist/",e(e.s=6)}([function(A,t,e){var n=e(8);"string"==typeof n&&(n=[[A.i,n,""]]),n.locals&&(A.exports=n.locals);(0,e(4).default)("7ec05f6c",n,!1,{})},function(A,t,e){var n=e(10);"string"==typeof n&&(n=[[A.i,n,""]]),n.locals&&(A.exports=n.locals);(0,e(4).default)("3453d19d",n,!1,{})},function(A,t,e){"use strict";A.exports=function(A){var t=[];return t.toString=function(){return this.map(function(t){var e=function(A,t){var e=A[1]||"",n=A[3];if(!n)return e;if(t&&"function"==typeof btoa){var i=(s=n,"/*# sourceMappingURL=data:application/json;charset=utf-8;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(s))))+" */"),a=n.sources.map(function(A){return"/*# sourceURL="+n.sourceRoot+A+" */"});return[e].concat(a).concat([i]).join("\n")}var s;return[e].join("\n")}(t,A);return t[2]?"@media "+t[2]+"{"+e+"}":e}).join("")},t.i=function(A,e){"string"==typeof A&&(A=[[null,A,""]]);for(var n={},i=0;i<this.length;i++){var a=this[i][0];null!=a&&(n[a]=!0)}for(i=0;i<A.length;i++){var s=A[i];null!=s[0]&&n[s[0]]||(e&&!s[2]?s[2]=e:e&&(s[2]="("+s[2]+") and ("+e+")"),t.push(s))}},t}},function(A,t){A.exports="data:application/vnd.ms-fontobject;base64,aAUAAMQEAAABAAIAAAAAAAAAAAAAAAAAAAABAJABAAAAAExQAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAUdPJHwAAAAAAAAAAAAAAAAAAAAAAAA4AaQBjAG8AbQBvAG8AbgAAAA4AUgBlAGcAdQBsAGEAcgAAABYAVgBlAHIAcwBpAG8AbgAgADEALgAwAAAADgBpAGMAbwBtAG8AbwBuAAAAAAAAAQAAAAsAgAADADBPUy8yDxIFrAAAALwAAABgY21hcBdW0okAAAEcAAAAVGdhc3AAAAAQAAABcAAAAAhnbHlmpZ+jMAAAAXgAAAD8aGVhZA/FmAgAAAJ0AAAANmhoZWEHgAPIAAACrAAAACRobXR4EgABvgAAAtAAAAAcbG9jYQCSAOIAAALsAAAAEG1heHAACQAfAAAC/AAAACBuYW1lmUoJ+wAAAxwAAAGGcG9zdAADAAAAAASkAAAAIAADA4ABkAAFAAACmQLMAAAAjwKZAswAAAHrADMBCQAAAAAAAAAAAAAAAAAAAAEQAAAAAAAAAAAAAAAAAAAAAEAAAOkCA8D/wABAA8AAQAAAAAEAAAAAAAAAAAAAACAAAAAAAAMAAAADAAAAHAABAAMAAAAcAAMAAQAAABwABAA4AAAACgAIAAIAAgABACDpAv/9//8AAAAAACDpAP/9//8AAf/jFwQAAwABAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAVgEBA74CgQAcAAABMhceARcWFwcmJy4BJyYjIgYHFyERFzY3PgE3NgIWSkNDbykpF2QQIB9VMzQ5P3AtnP6AmB0iIkspKAJVFxhSODlCIDMrKz4REislmgGAmhkVFBwICAABANYAgQMqAtUACwAAAQcXBycHJzcnNxc3Ayru7jzu7jzu7jzu7gKZ7u487u487u487u4AAQCSAIEDgAK9AAUAACUBFwEnNwGAAcQ8/gDuPPkBxDz+AO48AAAAAAEAAAAAAAAfydNRXw889QALBAAAAAAA1nUqGwAAAADWdSobAAAAAAO+AtUAAAAIAAIAAAAAAAAAAQAAA8D/wAAABAAAAAAAA74AAQAAAAAAAAAAAAAAAAAAAAcEAAAAAAAAAAAAAAACAAAABAAAVgQAANYEAACSAAAAAAAKABQAHgBQAGoAfgABAAAABwAdAAEAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEABwAAAAEAAAAAAAIABwBgAAEAAAAAAAMABwA2AAEAAAAAAAQABwB1AAEAAAAAAAUACwAVAAEAAAAAAAYABwBLAAEAAAAAAAoAGgCKAAMAAQQJAAEADgAHAAMAAQQJAAIADgBnAAMAAQQJAAMADgA9AAMAAQQJAAQADgB8AAMAAQQJAAUAFgAgAAMAAQQJAAYADgBSAAMAAQQJAAoANACkaWNvbW9vbgBpAGMAbwBtAG8AbwBuVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwaWNvbW9vbgBpAGMAbwBtAG8AbwBuaWNvbW9vbgBpAGMAbwBtAG8AbwBuUmVndWxhcgBSAGUAZwB1AGwAYQByaWNvbW9vbgBpAGMAbwBtAG8AbwBuRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=="},function(A,t,e){"use strict";function n(A,t){for(var e=[],n={},i=0;i<t.length;i++){var a=t[i],s=a[0],o={id:A+":"+i,css:a[1],media:a[2],sourceMap:a[3]};n[s]?n[s].parts.push(o):e.push(n[s]={id:s,parts:[o]})}return e}e.r(t),e.d(t,"default",function(){return g});var i="undefined"!=typeof document;if("undefined"!=typeof DEBUG&&DEBUG&&!i)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var a={},s=i&&(document.head||document.getElementsByTagName("head")[0]),o=null,r=0,d=!1,l=function(){},u=null,c="data-vue-ssr-id",p="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());function g(A,t,e,i){d=e,u=i||{};var s=n(A,t);return f(s),function(t){for(var e=[],i=0;i<s.length;i++){var o=s[i];(r=a[o.id]).refs--,e.push(r)}t?f(s=n(A,t)):s=[];for(i=0;i<e.length;i++){var r;if(0===(r=e[i]).refs){for(var d=0;d<r.parts.length;d++)r.parts[d]();delete a[r.id]}}}}function f(A){for(var t=0;t<A.length;t++){var e=A[t],n=a[e.id];if(n){n.refs++;for(var i=0;i<n.parts.length;i++)n.parts[i](e.parts[i]);for(;i<e.parts.length;i++)n.parts.push(h(e.parts[i]));n.parts.length>e.parts.length&&(n.parts.length=e.parts.length)}else{var s=[];for(i=0;i<e.parts.length;i++)s.push(h(e.parts[i]));a[e.id]={id:e.id,refs:1,parts:s}}}}function B(){var A=document.createElement("style");return A.type="text/css",s.appendChild(A),A}function h(A){var t,e,n=document.querySelector("style["+c+'~="'+A.id+'"]');if(n){if(d)return l;n.parentNode.removeChild(n)}if(p){var i=r++;n=o||(o=B()),t=v.bind(null,n,i,!1),e=v.bind(null,n,i,!0)}else n=B(),t=function(A,t){var e=t.css,n=t.media,i=t.sourceMap;n&&A.setAttribute("media",n);u.ssrId&&A.setAttribute(c,t.id);i&&(e+="\n/*# sourceURL="+i.sources[0]+" */",e+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(i))))+" */");if(A.styleSheet)A.styleSheet.cssText=e;else{for(;A.firstChild;)A.removeChild(A.firstChild);A.appendChild(document.createTextNode(e))}}.bind(null,n),e=function(){n.parentNode.removeChild(n)};return t(A),function(n){if(n){if(n.css===A.css&&n.media===A.media&&n.sourceMap===A.sourceMap)return;t(A=n)}else e()}}var m,C=(m=[],function(A,t){return m[A]=t,m.filter(Boolean).join("\n")});function v(A,t,e,n){var i=e?"":n.css;if(A.styleSheet)A.styleSheet.cssText=C(t,i);else{var a=document.createTextNode(i),s=A.childNodes;s[t]&&A.removeChild(s[t]),s.length?A.insertBefore(a,s[t]):A.appendChild(a)}}},function(A,t,e){"use strict";var n=Array.isArray,i=Object.keys,a=Object.prototype.hasOwnProperty;A.exports=function A(t,e){if(t===e)return!0;if(t&&e&&"object"==typeof t&&"object"==typeof e){var s,o,r,d=n(t),l=n(e);if(d&&l){if((o=t.length)!=e.length)return!1;for(s=o;0!=s--;)if(!A(t[s],e[s]))return!1;return!0}if(d!=l)return!1;var u=t instanceof Date,c=e instanceof Date;if(u!=c)return!1;if(u&&c)return t.getTime()==e.getTime();var p=t instanceof RegExp,g=e instanceof RegExp;if(p!=g)return!1;if(p&&g)return t.toString()==e.toString();var f=i(t);if((o=f.length)!==i(e).length)return!1;for(s=o;0!=s--;)if(!a.call(e,f[s]))return!1;for(s=o;0!=s--;)if(!A(t[r=f[s]],e[r]))return!1;return!0}return t!=t&&e!=e}},function(A,t,e){A.exports=e(14)},function(A,t,e){"use strict";var n=e(0);e.n(n).a},function(A,t,e){(A.exports=e(2)(!0)).push([A.i,".ti-tag-input[data-v-108f4f13] {\n  background-color: transparent;\n  color: inherit;\n  border: none;\n  padding: 0px;\n  margin: 0px;\n  display: flex;\n  top: 0px;\n  position: absolute;\n  width: 100%;\n  line-height: inherit;\n}\n.ti-tag-input[data-v-108f4f13]::-ms-clear {\n  display: none;\n}\ninput[data-v-108f4f13]:focus {\n  outline: none;\n}\ninput[disabled][data-v-108f4f13] {\n  background-color: transparent;\n}\n","",{version:3,sources:["C:/Users/johan/dev/vue-tags-input/vue-tags-input/C:/Users/johan/dev/vue-tags-input/vue-tags-input/tag-input.vue"],names:[],mappings:"AAAA;EACE,8BAA8B;EAC9B,eAAe;EACf,aAAa;EACb,aAAa;EACb,YAAY;EACZ,cAAc;EACd,SAAS;EACT,mBAAmB;EACnB,YAAY;EACZ,qBAAqB;CAAE;AAEzB;EACE,cAAc;CAAE;AAElB;EACE,cAAc;CAAE;AAElB;EACE,8BAA8B;CAAE",file:"tag-input.vue?vue&type=style&index=0&id=108f4f13&lang=css&scoped=true&",sourcesContent:[".ti-tag-input {\n  background-color: transparent;\n  color: inherit;\n  border: none;\n  padding: 0px;\n  margin: 0px;\n  display: flex;\n  top: 0px;\n  position: absolute;\n  width: 100%;\n  line-height: inherit; }\n\n.ti-tag-input::-ms-clear {\n  display: none; }\n\ninput:focus {\n  outline: none; }\n\ninput[disabled] {\n  background-color: transparent; }\n"],sourceRoot:""}])},function(A,t,e){"use strict";var n=e(1);e.n(n).a},function(A,t,e){t=A.exports=e(2)(!0);var n=e(11),i=n(e(3)),a=n(e(3)+"#iefix"),s=n(e(12)),o=n(e(13));t.push([A.i,"@font-face {\n  font-family: 'icomoon';\n  src: url("+i+");\n  src: url("+a+') format("embedded-opentype"), url('+s+') format("truetype"), url('+o+') format("woff");\n  font-weight: normal;\n  font-style: normal;\n}\n[class^="ti-icon-"][data-v-61d92e31], [class*=" ti-icon-"][data-v-61d92e31] {\n  font-family: \'icomoon\' !important;\n  speak: none;\n  font-style: normal;\n  font-weight: normal;\n  font-variant: normal;\n  text-transform: none;\n  line-height: 1;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n.ti-icon-check[data-v-61d92e31]:before {\n  content: "\\e902";\n}\n.ti-icon-close[data-v-61d92e31]:before {\n  content: "\\e901";\n}\n.ti-icon-undo[data-v-61d92e31]:before {\n  content: "\\e900";\n}\nul[data-v-61d92e31] {\n  margin: 0px;\n  padding: 0px;\n  list-style-type: none;\n}\n*[data-v-61d92e31], *[data-v-61d92e31]:before, *[data-v-61d92e31]:after {\n  box-sizing: border-box;\n}\ninput[data-v-61d92e31]:focus {\n  outline: none;\n}\ninput[disabled][data-v-61d92e31] {\n  background-color: transparent;\n}\n.vue-tags-input[data-v-61d92e31] {\n  max-width: 450px;\n  position: relative;\n  background-color: #fff;\n}\ndiv.vue-tags-input.disabled[data-v-61d92e31] {\n  opacity: 0.5;\n}\ndiv.vue-tags-input.disabled *[data-v-61d92e31] {\n    cursor: default;\n}\n.ti-input[data-v-61d92e31] {\n  border: 1px solid #ccc;\n  display: flex;\n  padding: 4px;\n  flex-wrap: wrap;\n}\n.ti-tags[data-v-61d92e31] {\n  display: flex;\n  flex-wrap: wrap;\n  width: 100%;\n  line-height: 1em;\n}\n.ti-tag[data-v-61d92e31] {\n  background-color: #5C6BC0;\n  color: #fff;\n  border-radius: 2px;\n  display: flex;\n  padding: 3px 5px;\n  margin: 2px;\n  font-size: .85em;\n}\n.ti-tag[data-v-61d92e31]:focus {\n    outline: none;\n}\n.ti-tag .ti-content[data-v-61d92e31] {\n    display: flex;\n    align-items: center;\n}\n.ti-tag .ti-tag-center[data-v-61d92e31] {\n    position: relative;\n}\n.ti-tag span[data-v-61d92e31] {\n    line-height: .85em;\n}\n.ti-tag span.ti-hidden[data-v-61d92e31] {\n    padding-left: 14px;\n    visibility: hidden;\n    height: 0px;\n    white-space: pre;\n}\n.ti-tag .ti-actions[data-v-61d92e31] {\n    margin-left: 2px;\n    display: flex;\n    align-items: center;\n    font-size: 1.15em;\n}\n.ti-tag .ti-actions i[data-v-61d92e31] {\n      cursor: pointer;\n}\n.ti-tag[data-v-61d92e31]:last-child {\n    margin-right: 4px;\n}\n.ti-tag.ti-invalid[data-v-61d92e31], .ti-tag.ti-tag.ti-deletion-mark[data-v-61d92e31] {\n    background-color: #e54d42;\n}\n.ti-new-tag-input-wrapper[data-v-61d92e31] {\n  display: flex;\n  flex: 1 0 auto;\n  padding: 3px 5px;\n  margin: 2px;\n  font-size: .85em;\n}\n.ti-new-tag-input-wrapper input[data-v-61d92e31] {\n    flex: 1 0 auto;\n    min-width: 100px;\n    border: none;\n    padding: 0px;\n    margin: 0px;\n}\n.ti-new-tag-input[data-v-61d92e31] {\n  line-height: initial;\n}\n.ti-autocomplete[data-v-61d92e31] {\n  border: 1px solid #ccc;\n  border-top: none;\n  position: absolute;\n  width: 100%;\n  background-color: #fff;\n  z-index: 20;\n}\n.ti-item > div[data-v-61d92e31] {\n  cursor: pointer;\n  padding: 3px 6px;\n  width: 100%;\n}\n.ti-selected-item[data-v-61d92e31] {\n  background-color: #5C6BC0;\n  color: #fff;\n}\n',"",{version:3,sources:["C:/Users/johan/dev/vue-tags-input/vue-tags-input/C:/Users/johan/dev/vue-tags-input/vue-tags-input/vue-tags-input.scss"],names:[],mappings:"AAAA;EACE,uBAAuB;EACvB,mCAA8C;EAC9C,+JAAuM;EACvM,oBAAoB;EACpB,mBAAmB;CAAE;AAEvB;EACE,kCAAkC;EAClC,YAAY;EACZ,mBAAmB;EACnB,oBAAoB;EACpB,qBAAqB;EACrB,qBAAqB;EACrB,eAAe;EACf,oCAAoC;EACpC,mCAAmC;CAAE;AAEvC;EACE,iBAAiB;CAAE;AAErB;EACE,iBAAiB;CAAE;AAErB;EACE,iBAAiB;CAAE;AAErB;EACE,YAAY;EACZ,aAAa;EACb,sBAAsB;CAAE;AAE1B;EACE,uBAAuB;CAAE;AAE3B;EACE,cAAc;CAAE;AAElB;EACE,8BAA8B;CAAE;AAElC;EACE,iBAAiB;EACjB,mBAAmB;EACnB,uBAAuB;CAAE;AAE3B;EACE,aAAa;CAAE;AACf;IACE,gBAAgB;CAAE;AAEtB;EACE,uBAAuB;EACvB,cAAc;EACd,aAAa;EACb,gBAAgB;CAAE;AAEpB;EACE,cAAc;EACd,gBAAgB;EAChB,YAAY;EACZ,iBAAiB;CAAE;AAErB;EACE,0BAA0B;EAC1B,YAAY;EACZ,mBAAmB;EACnB,cAAc;EACd,iBAAiB;EACjB,YAAY;EACZ,iBAAiB;CAAE;AACnB;IACE,cAAc;CAAE;AAClB;IACE,cAAc;IACd,oBAAoB;CAAE;AACxB;IACE,mBAAmB;CAAE;AACvB;IACE,mBAAmB;CAAE;AACvB;IACE,mBAAmB;IACnB,mBAAmB;IACnB,YAAY;IACZ,iBAAiB;CAAE;AACrB;IACE,iBAAiB;IACjB,cAAc;IACd,oBAAoB;IACpB,kBAAkB;CAAE;AACpB;MACE,gBAAgB;CAAE;AACtB;IACE,kBAAkB;CAAE;AACtB;IACE,0BAA0B;CAAE;AAEhC;EACE,cAAc;EACd,eAAe;EACf,iBAAiB;EACjB,YAAY;EACZ,iBAAiB;CAAE;AACnB;IACE,eAAe;IACf,iBAAiB;IACjB,aAAa;IACb,aAAa;IACb,YAAY;CAAE;AAElB;EACE,qBAAqB;CAAE;AAEzB;EACE,uBAAuB;EACvB,iBAAiB;EACjB,mBAAmB;EACnB,YAAY;EACZ,uBAAuB;EACvB,YAAY;CAAE;AAEhB;EACE,gBAAgB;EAChB,iBAAiB;EACjB,YAAY;CAAE;AAEhB;EACE,0BAA0B;EAC1B,YAAY;CAAE",file:"vue-tags-input.scss?vue&type=style&index=0&id=61d92e31&lang=scss&scoped=true&",sourcesContent:['@font-face {\n  font-family: \'icomoon\';\n  src: url("./assets/fonts/icomoon.eot?7grlse");\n  src: url("./assets/fonts/icomoon.eot?7grlse#iefix") format("embedded-opentype"), url("./assets/fonts/icomoon.ttf?7grlse") format("truetype"), url("./assets/fonts/icomoon.woff?7grlse") format("woff");\n  font-weight: normal;\n  font-style: normal; }\n\n[class^="ti-icon-"], [class*=" ti-icon-"] {\n  font-family: \'icomoon\' !important;\n  speak: none;\n  font-style: normal;\n  font-weight: normal;\n  font-variant: normal;\n  text-transform: none;\n  line-height: 1;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale; }\n\n.ti-icon-check:before {\n  content: "\\e902"; }\n\n.ti-icon-close:before {\n  content: "\\e901"; }\n\n.ti-icon-undo:before {\n  content: "\\e900"; }\n\nul {\n  margin: 0px;\n  padding: 0px;\n  list-style-type: none; }\n\n*, *:before, *:after {\n  box-sizing: border-box; }\n\ninput:focus {\n  outline: none; }\n\ninput[disabled] {\n  background-color: transparent; }\n\n.vue-tags-input {\n  max-width: 450px;\n  position: relative;\n  background-color: #fff; }\n\ndiv.vue-tags-input.disabled {\n  opacity: 0.5; }\n  div.vue-tags-input.disabled * {\n    cursor: default; }\n\n.ti-input {\n  border: 1px solid #ccc;\n  display: flex;\n  padding: 4px;\n  flex-wrap: wrap; }\n\n.ti-tags {\n  display: flex;\n  flex-wrap: wrap;\n  width: 100%;\n  line-height: 1em; }\n\n.ti-tag {\n  background-color: #5C6BC0;\n  color: #fff;\n  border-radius: 2px;\n  display: flex;\n  padding: 3px 5px;\n  margin: 2px;\n  font-size: .85em; }\n  .ti-tag:focus {\n    outline: none; }\n  .ti-tag .ti-content {\n    display: flex;\n    align-items: center; }\n  .ti-tag .ti-tag-center {\n    position: relative; }\n  .ti-tag span {\n    line-height: .85em; }\n  .ti-tag span.ti-hidden {\n    padding-left: 14px;\n    visibility: hidden;\n    height: 0px;\n    white-space: pre; }\n  .ti-tag .ti-actions {\n    margin-left: 2px;\n    display: flex;\n    align-items: center;\n    font-size: 1.15em; }\n    .ti-tag .ti-actions i {\n      cursor: pointer; }\n  .ti-tag:last-child {\n    margin-right: 4px; }\n  .ti-tag.ti-invalid, .ti-tag.ti-tag.ti-deletion-mark {\n    background-color: #e54d42; }\n\n.ti-new-tag-input-wrapper {\n  display: flex;\n  flex: 1 0 auto;\n  padding: 3px 5px;\n  margin: 2px;\n  font-size: .85em; }\n  .ti-new-tag-input-wrapper input {\n    flex: 1 0 auto;\n    min-width: 100px;\n    border: none;\n    padding: 0px;\n    margin: 0px; }\n\n.ti-new-tag-input {\n  line-height: initial; }\n\n.ti-autocomplete {\n  border: 1px solid #ccc;\n  border-top: none;\n  position: absolute;\n  width: 100%;\n  background-color: #fff;\n  z-index: 20; }\n\n.ti-item > div {\n  cursor: pointer;\n  padding: 3px 6px;\n  width: 100%; }\n\n.ti-selected-item {\n  background-color: #5C6BC0;\n  color: #fff; }\n'],sourceRoot:""}])},function(A,t,e){"use strict";A.exports=function(A){return"string"!=typeof A?A:(/^['"].*['"]$/.test(A)&&(A=A.slice(1,-1)),/["'() \t\n]/.test(A)?'"'+A.replace(/"/g,'\\"').replace(/\n/g,"\\n")+'"':A)}},function(A,t){A.exports="data:font/ttf;base64,AAEAAAALAIAAAwAwT1MvMg8SBawAAAC8AAAAYGNtYXAXVtKJAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5ZqWfozAAAAF4AAAA/GhlYWQPxZgIAAACdAAAADZoaGVhB4ADyAAAAqwAAAAkaG10eBIAAb4AAALQAAAAHGxvY2EAkgDiAAAC7AAAABBtYXhwAAkAHwAAAvwAAAAgbmFtZZlKCfsAAAMcAAABhnBvc3QAAwAAAAAEpAAAACAAAwOAAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpAgPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAOAAAAAoACAACAAIAAQAg6QL//f//AAAAAAAg6QD//f//AAH/4xcEAAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAFYBAQO+AoEAHAAAATIXHgEXFhcHJicuAScmIyIGBxchERc2Nz4BNzYCFkpDQ28pKRdkECAfVTM0OT9wLZz+gJgdIiJLKSgCVRcYUjg5QiAzKys+ERIrJZoBgJoZFRQcCAgAAQDWAIEDKgLVAAsAAAEHFwcnByc3JzcXNwMq7u487u487u487u4Cme7uPO7uPO7uPO7uAAEAkgCBA4ACvQAFAAAlARcBJzcBgAHEPP4A7jz5AcQ8/gDuPAAAAAABAAAAAAAAH8nTUV8PPPUACwQAAAAAANZ1KhsAAAAA1nUqGwAAAAADvgLVAAAACAACAAAAAAAAAAEAAAPA/8AAAAQAAAAAAAO+AAEAAAAAAAAAAAAAAAAAAAAHBAAAAAAAAAAAAAAAAgAAAAQAAFYEAADWBAAAkgAAAAAACgAUAB4AUABqAH4AAQAAAAcAHQABAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAA4ArgABAAAAAAABAAcAAAABAAAAAAACAAcAYAABAAAAAAADAAcANgABAAAAAAAEAAcAdQABAAAAAAAFAAsAFQABAAAAAAAGAAcASwABAAAAAAAKABoAigADAAEECQABAA4ABwADAAEECQACAA4AZwADAAEECQADAA4APQADAAEECQAEAA4AfAADAAEECQAFABYAIAADAAEECQAGAA4AUgADAAEECQAKADQApGljb21vb24AaQBjAG8AbQBvAG8AblZlcnNpb24gMS4wAFYAZQByAHMAaQBvAG4AIAAxAC4AMGljb21vb24AaQBjAG8AbQBvAG8Abmljb21vb24AaQBjAG8AbQBvAG8AblJlZ3VsYXIAUgBlAGcAdQBsAGEAcmljb21vb24AaQBjAG8AbQBvAG8AbkZvbnQgZ2VuZXJhdGVkIGJ5IEljb01vb24uAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA="},function(A,t){A.exports="data:font/woff;base64,d09GRgABAAAAAAUQAAsAAAAABMQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABCAAAAGAAAABgDxIFrGNtYXAAAAFoAAAAVAAAAFQXVtKJZ2FzcAAAAbwAAAAIAAAACAAAABBnbHlmAAABxAAAAPwAAAD8pZ+jMGhlYWQAAALAAAAANgAAADYPxZgIaGhlYQAAAvgAAAAkAAAAJAeAA8hobXR4AAADHAAAABwAAAAcEgABvmxvY2EAAAM4AAAAEAAAABAAkgDibWF4cAAAA0gAAAAgAAAAIAAJAB9uYW1lAAADaAAAAYYAAAGGmUoJ+3Bvc3QAAATwAAAAIAAAACAAAwAAAAMDgAGQAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA6QIDwP/AAEADwABAAAAAAQAAAAAAAAAAAAAAIAAAAAAAAwAAAAMAAAAcAAEAAwAAABwAAwABAAAAHAAEADgAAAAKAAgAAgACAAEAIOkC//3//wAAAAAAIOkA//3//wAB/+MXBAADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQBWAQEDvgKBABwAAAEyFx4BFxYXByYnLgEnJiMiBgcXIREXNjc+ATc2AhZKQ0NvKSkXZBAgH1UzNDk/cC2c/oCYHSIiSykoAlUXGFI4OUIgMysrPhESKyWaAYCaGRUUHAgIAAEA1gCBAyoC1QALAAABBxcHJwcnNyc3FzcDKu7uPO7uPO7uPO7uApnu7jzu7jzu7jzu7gABAJIAgQOAAr0ABQAAJQEXASc3AYABxDz+AO48+QHEPP4A7jwAAAAAAQAAAAAAAB/J01FfDzz1AAsEAAAAAADWdSobAAAAANZ1KhsAAAAAA74C1QAAAAgAAgAAAAAAAAABAAADwP/AAAAEAAAAAAADvgABAAAAAAAAAAAAAAAAAAAABwQAAAAAAAAAAAAAAAIAAAAEAABWBAAA1gQAAJIAAAAAAAoAFAAeAFAAagB+AAEAAAAHAB0AAQAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAHAAAAAQAAAAAAAgAHAGAAAQAAAAAAAwAHADYAAQAAAAAABAAHAHUAAQAAAAAABQALABUAAQAAAAAABgAHAEsAAQAAAAAACgAaAIoAAwABBAkAAQAOAAcAAwABBAkAAgAOAGcAAwABBAkAAwAOAD0AAwABBAkABAAOAHwAAwABBAkABQAWACAAAwABBAkABgAOAFIAAwABBAkACgA0AKRpY29tb29uAGkAYwBvAG0AbwBvAG5WZXJzaW9uIDEuMABWAGUAcgBzAGkAbwBuACAAMQAuADBpY29tb29uAGkAYwBvAG0AbwBvAG5pY29tb29uAGkAYwBvAG0AbwBvAG5SZWd1bGFyAFIAZQBnAHUAbABhAHJpY29tb29uAGkAYwBvAG0AbwBvAG5Gb250IGdlbmVyYXRlZCBieSBJY29Nb29uLgBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAC4AAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA"},function(A,t,e){"use strict";e.r(t);var n=function(){var A=this,t=A.$createElement,e=A._self._c||t;return e("div",{staticClass:"vue-tags-input",class:[{"ti-disabled":A.disabled},{"ti-focus":A.focused}]},[e("div",{staticClass:"ti-input"},[A.tagsCopy?e("ul",{staticClass:"ti-tags"},[A._l(A.tagsCopy,function(t,n){return e("li",{key:n,staticClass:"ti-tag",class:[{"ti-editing":A.tagsEditStatus[n]},t.tiClasses,t.classes,{"ti-deletion-mark":A.isMarked(n)}],style:t.style,attrs:{tabindex:n+1},on:{click:function(e){A.$emit("tag-clicked",{tag:t,index:n})}}},[e("div",{staticClass:"ti-content"},[A.$scopedSlots["tag-left"]?e("div",{staticClass:"ti-tag-left"},[A._t("tag-left",null,{tag:t,index:n,edit:A.tagsEditStatus[n],performSaveEdit:A.performSaveTag,performDelete:A.performDeleteTag,performCancelEdit:A.cancelEdit,performOpenEdit:A.performEditTag,deletionMark:A.isMarked(n)})],2):A._e(),A._v(" "),e("div",{ref:"tagCenter",refInFor:!0,staticClass:"ti-tag-center"},[A.$scopedSlots["tag-center"]?A._e():e("span",{class:{"ti-hidden":A.tagsEditStatus[n]},on:{click:function(t){A.performEditTag(n)}}},[A._v(A._s(t.text))]),A._v(" "),A.$scopedSlots["tag-center"]?A._e():e("tag-input",{attrs:{scope:{edit:A.tagsEditStatus[n],maxlength:A.maxlength,tag:t,index:n,validateTag:A.createChangedTag,performCancelEdit:A.cancelEdit,performSaveEdit:A.performSaveTag}}}),A._v(" "),A._t("tag-center",null,{tag:t,index:n,maxlength:A.maxlength,edit:A.tagsEditStatus[n],performSaveEdit:A.performSaveTag,performDelete:A.performDeleteTag,performCancelEdit:A.cancelEdit,validateTag:A.createChangedTag,performOpenEdit:A.performEditTag,deletionMark:A.isMarked(n)})],2),A._v(" "),A.$scopedSlots["tag-right"]?e("div",{staticClass:"ti-tag-right"},[A._t("tag-right",null,{tag:t,index:n,edit:A.tagsEditStatus[n],performSaveEdit:A.performSaveTag,performDelete:A.performDeleteTag,performCancelEdit:A.cancelEdit,performOpenEdit:A.performEditTag,deletionMark:A.isMarked(n)})],2):A._e()]),A._v(" "),e("div",{staticClass:"ti-actions"},[A.$scopedSlots["tag-actions"]?A._e():e("i",{directives:[{name:"show",rawName:"v-show",value:A.tagsEditStatus[n],expression:"tagsEditStatus[index]"}],staticClass:"ti-icon-undo",on:{click:function(t){A.cancelEdit(n)}}}),A._v(" "),A.$scopedSlots["tag-actions"]?A._e():e("i",{directives:[{name:"show",rawName:"v-show",value:!A.tagsEditStatus[n],expression:"!tagsEditStatus[index]"}],staticClass:"ti-icon-close",on:{click:function(t){A.performDeleteTag(n)}}}),A._v(" "),A.$scopedSlots["tag-actions"]?A._t("tag-actions",null,{tag:t,index:n,edit:A.tagsEditStatus[n],performSaveEdit:A.performSaveTag,performDelete:A.performDeleteTag,performCancelEdit:A.cancelEdit,performOpenEdit:A.performEditTag,deletionMark:A.isMarked(n)}):A._e()],2)])}),A._v(" "),e("li",{staticClass:"ti-new-tag-input-wrapper"},[e("input",A._b({ref:"newTagInput",staticClass:"ti-new-tag-input",class:[A.createClasses(A.newTag,A.tags,A.validation,A.isDuplicate)],attrs:{placeholder:A.placeholder,maxlength:A.maxlength,disabled:A.disabled,type:"text",size:"1"},domProps:{value:A.newTag},on:{keydown:[function(t){A.performAddTags(A.filteredAutocompleteItems[A.selectedItem]||A.newTag,t)},function(t){return"button"in t||8===t.keyCode?A.invokeDelete(t):null},function(t){if(!("button"in t)&&38!==t.keyCode)return null;A.selectItem(t,"before")},function(t){if(!("button"in t)&&40!==t.keyCode)return null;A.selectItem(t,"after")}],paste:A.addTagsFromPaste,input:A.updateNewTag,blur:function(t){A.$emit("blur",t)},focus:function(t){A.focused=!0,A.$emit("focus",t)},click:function(t){!A.addOnlyFromAutocomplete&&(A.selectedItem=null)}}},"input",A.$attrs,!1))])],2):A._e()]),A._v(" "),A._t("between-elements"),A._v(" "),A.autocompleteOpen?e("div",{staticClass:"ti-autocomplete",on:{mouseout:function(t){A.selectedItem=null}}},[A._t("autocomplete-header"),A._v(" "),e("ul",A._l(A.filteredAutocompleteItems,function(t,n){return e("li",{key:n,staticClass:"ti-item",class:[t.tiClasses,t.classes,{"ti-selected-item":A.isSelected(n)}],style:t.style,on:{mouseover:function(t){!A.disabled&&(A.selectedItem=n)}}},[A.$scopedSlots["autocomplete-item"]?A._t("autocomplete-item",null,{item:t,index:n,performAdd:function(t){return A.performAddTags(t,void 0,"autocomplete")},selected:A.isSelected(n)}):e("div",{on:{click:function(e){A.performAddTags(t,void 0,"autocomplete")}}},[A._v("\n          "+A._s(t.text)+"\n        ")])],2)}),0),A._v(" "),A._t("autocomplete-footer")],2):A._e()],2)};n._withStripped=!0;var i=e(5),a=e.n(i);const s=A=>JSON.parse(JSON.stringify(A)),o=(A,t,e=[],n)=>{void 0===A.text&&(A={text:A});const i=((A,t)=>t.filter(t=>{const{text:e}=A;return"string"==typeof t.rule?!new RegExp(t.rule).test(e):t.rule instanceof RegExp?!t.rule.test(e):"[object Function]"==={}.toString.call(t.rule)?t.rule(A):void 0}).map(A=>A.classes))(A,e),a=((A,t)=>{let e=0;for(;e<A.length;){if(t(A[e],e,A))return e;e++}return-1})(t,t=>t===A),o=s(t),r=-1!==a?o.splice(a,1)[0]:s(A);return(n?n(o,r):-1!==o.map(A=>A.text).indexOf(r.text))&&i.push("ti-duplicate"),0===i.length?i.push("ti-valid"):i.push("ti-invalid"),i},r=(A,...t)=>{void 0===A.text&&(A={text:A});const e=s(A);return e.tiClasses=o(A,...t),e},d=(A,...t)=>A.map(e=>r(e,A,...t));var l=function(){var A=this,t=A.$createElement,e=A._self._c||t;return A.scope.edit?e("input",{directives:[{name:"model",rawName:"v-model",value:A.scope.tag.text,expression:"scope.tag.text"}],staticClass:"ti-tag-input",attrs:{maxlength:A.scope.maxlength,type:"text",size:"1"},domProps:{value:A.scope.tag.text},on:{input:[function(t){t.target.composing||A.$set(A.scope.tag,"text",t.target.value)},function(t){A.scope.validateTag(A.scope.index,t)}],blur:function(t){A.scope.performCancelEdit(A.scope.index)},keydown:function(t){A.scope.performSaveEdit(A.scope.index,t)}}}):A._e()};l._withStripped=!0;var u={name:"TagInput",props:{scope:{type:Object}}};e(7);function c(A,t,e,n,i,a,s,o){var r,d="function"==typeof A?A.options:A;if(t&&(d.render=t,d.staticRenderFns=e,d._compiled=!0),n&&(d.functional=!0),a&&(d._scopeId="data-v-"+a),s?(r=function(A){(A=A||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(A=__VUE_SSR_CONTEXT__),i&&i.call(this,A),A&&A._registeredComponents&&A._registeredComponents.add(s)},d._ssrRegister=r):i&&(r=o?function(){i.call(this,this.$root.$options.shadowRoot)}:i),r)if(d.functional){d._injectStyles=r;var l=d.render;d.render=function(A,t){return r.call(t),l(A,t)}}else{var u=d.beforeCreate;d.beforeCreate=u?[].concat(u,r):[r]}return{exports:A,options:d}}var p=c(u,l,[],!1,null,"108f4f13",null);p.options.__file="vue-tags-input/tag-input.vue";var g=p.exports;const f=A=>!A.some(A=>{const t=!A.text;t&&console.warn('Missing property "text"',A);let e=!1;return A.classes&&(e="string"!=typeof A.classes),e&&console.warn('Property "classes" must be type of string',A),t||e}),B=A=>!A.some(A=>{if("number"==typeof A){const t=isFinite(A)&&Math.floor(A)===A;return t||console.warn("Only numerics are allowed for this prop. Found:",A),!t}if("string"==typeof A){const t=/\W|[a-z]|!\d/i.test(A);return t||console.warn("Only alpha strings are allowed for this prop. Found:",A),!t}return console.warn("Only numeric and string values are allowed. Found:",A),!1});var h={value:{type:String,default:"",required:!0},tags:{type:Array,default:()=>[],validator:f},autocompleteItems:{type:Array,default:()=>[],validator:f},allowEditTags:{type:Boolean,default:!1},autocompleteFilterDuplicates:{default:!0,type:Boolean},addOnlyFromAutocomplete:{type:Boolean,default:!1},autocompleteMinLength:{type:Number,default:1},autocompleteAlwaysOpen:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},placeholder:{type:String,default:"Add Tag"},addOnKey:{type:Array,default:()=>[13],validator:B},saveOnKey:{type:Array,default:()=>[13],validator:B},maxTags:{type:Number},maxlength:{type:Number},validation:{type:Array,default:()=>[],validator:A=>!A.some(A=>{const t=!A.rule;t&&console.warn('Property "rule" is missing',A);const e=A.rule&&("string"==typeof A.rule||A.rule instanceof RegExp||"[object Function]"==={}.toString.call(A.rule));e||console.warn("A rule must be type of string, RegExp or function. Found:",JSON.stringify(A.rule));const n=!A.classes;n&&console.warn('Property "classes" is missing',A);const i=A.type&&"string"!=typeof A.type;return i&&console.warn('Property "type" must be type of string. Found:',A),!e||t||n||i})},separators:{type:Array,default:()=>[";"],validator:A=>!A.some(A=>{const t="string"!=typeof A;return t&&console.warn("Separators must be type of string. Found:",A),t})},avoidAddingDuplicates:{type:Boolean,default:!0},addOnBlur:{type:Boolean,default:!0},isDuplicate:{type:Function,default:null},addFromPaste:{type:Boolean,default:!0},deleteOnBackspace:{default:!0,type:Boolean}},m={name:"VueTagsInput",components:{TagInput:g},props:h,data:()=>({newTag:null,tagsCopy:null,tagsEditStatus:null,deletionMark:null,deletionMarkTime:null,selectedItem:null,focused:null}),computed:{autocompleteOpen(){return!!this.autocompleteAlwaysOpen||null!==this.newTag&&this.newTag.length>=this.autocompleteMinLength&&this.filteredAutocompleteItems.length>0&&this.focused},filteredAutocompleteItems(){const A=this.autocompleteItems.map(A=>r(A,this.tags,this.validation,this.isDuplicate));return this.autocompleteFilterDuplicates?A.filter(this.duplicateFilter):A}},methods:{createClasses:o,getSelectedIndex(A){const t=this.filteredAutocompleteItems,e=this.selectedItem,n=t.length-1;if(0!==t.length)return null===e?0:"before"===A&&0===e?n:"after"===A&&e===n?0:"after"===A?e+1:e-1},selectDefaultItem(){this.addOnlyFromAutocomplete&&this.filteredAutocompleteItems.length>0?this.selectedItem=0:this.selectedItem=null},selectItem(A,t){A.preventDefault(),this.selectedItem=this.getSelectedIndex(t)},isSelected(A){return this.selectedItem===A},isMarked(A){return this.deletionMark===A},invokeDelete(){if(!this.deleteOnBackspace||this.newTag.length>0)return;const A=this.tagsCopy.length-1;null===this.deletionMark?(this.deletionMarkTime=setTimeout(()=>this.deletionMark=null,1e3),this.deletionMark=A):this.performDeleteTag(A)},addTagsFromPaste(){this.addFromPaste&&setTimeout(()=>this.performAddTags(this.newTag),10)},performEditTag(A){this.allowEditTags&&(this._events["before-editing-tag"]||this.editTag(A),this.$emit("before-editing-tag",{index:A,tag:this.tagsCopy[A],editTag:()=>this.editTag(A)}))},editTag(A){this.allowEditTags&&(this.toggleEditMode(A),this.focus(A))},toggleEditMode(A){this.allowEditTags&&!this.disabled&&this.$set(this.tagsEditStatus,A,!this.tagsEditStatus[A])},createChangedTag(A,t){const e=this.tagsCopy[A];e.text=t?t.target.value:this.tagsCopy[A].text,this.$set(this.tagsCopy,A,r(e,this.tagsCopy,this.validation,this.isDuplicate))},focus(A){this.$nextTick(()=>{const t=this.$refs.tagCenter[A].querySelector("input.ti-tag-input");t&&t.focus()})},quote:A=>A.replace(/([()[{*+.$^\\|?])/g,"\\$1"),cancelEdit(A){this.tags[A]&&(this.tagsCopy[A]=s(r(this.tags[A],this.tags,this.validation,this.isDuplicate)),this.$set(this.tagsEditStatus,A,!1))},hasForbiddingAddRule(A){return A.some(A=>{const t=this.validation.find(t=>A===t.classes);return!!t&&t.disableAdd})},createTagTexts(A){const t=new RegExp(this.separators.map(A=>this.quote(A)).join("|"));return A.split(t).map(A=>({text:A}))},performDeleteTag(A){this._events["before-deleting-tag"]||this.deleteTag(A),this.$emit("before-deleting-tag",{index:A,tag:this.tagsCopy[A],deleteTag:()=>this.deleteTag(A)})},deleteTag(A){this.disabled||(this.deletionMark=null,clearTimeout(this.deletionMarkTime),this.tagsCopy.splice(A,1),this._events["update:tags"]&&this.$emit("update:tags",this.tagsCopy),this.$emit("tags-changed",this.tagsCopy))},noTriggerKey(A,t){const e=-1!==this[t].indexOf(A.keyCode)||-1!==this[t].indexOf(A.key);return e&&A.preventDefault(),!e},performAddTags(A,t,e){if(this.disabled||t&&this.noTriggerKey(t,"addOnKey"))return;let n=[];"object"==typeof A&&(n=[A]),"string"==typeof A&&(n=this.createTagTexts(A)),(n=n.filter(A=>A.text.trim().length>0)).forEach(A=>{A=r(A,this.tags,this.validation,this.isDuplicate),this._events["before-adding-tag"]||this.addTag(A,e),this.$emit("before-adding-tag",{tag:A,addTag:()=>this.addTag(A,e)})})},duplicateFilter(A){return this.isDuplicate?!this.isDuplicate(this.tagsCopy,A):!this.tagsCopy.find(t=>t.text===A.text)},addTag(A,t="new-tag-input"){const e=this.filteredAutocompleteItems.map(A=>A.text);this.addOnlyFromAutocomplete&&-1===e.indexOf(A.text)||this.$nextTick(()=>{return this.maxTags&&this.maxTags<=this.tagsCopy.length?this.$emit("max-tags-reached",A):this.avoidAddingDuplicates&&!this.duplicateFilter(A)?this.$emit("adding-duplicate",A):void(this.hasForbiddingAddRule(A.tiClasses)||(this.$emit("input",""),this.tagsCopy.push(A),this._events["update:tags"]&&this.$emit("update:tags",this.tagsCopy),"autocomplete"===t&&this.$refs.newTagInput.focus(),this.$emit("tags-changed",this.tagsCopy)))})},performSaveTag(A,t){const e=this.tagsCopy[A];this.disabled||t&&this.noTriggerKey(t,"addOnKey")||0!==e.text.trim().length&&(this._events["before-saving-tag"]||this.saveTag(A,e),this.$emit("before-saving-tag",{index:A,tag:e,saveTag:()=>this.saveTag(A,e)}))},saveTag(A,t){if(this.avoidAddingDuplicates){const e=s(this.tagsCopy),n=e.splice(A,1)[0];if(this.isDuplicate?this.isDuplicate(e,n):-1!==e.map(A=>A.text).indexOf(n.text))return this.$emit("saving-duplicate",t)}this.hasForbiddingAddRule(t.tiClasses)||(this.$set(this.tagsCopy,A,t),this.toggleEditMode(A),this._events["update:tags"]&&this.$emit("update:tags",this.tagsCopy),this.$emit("tags-changed",this.tagsCopy))},tagsEqual(){return!this.tagsCopy.some((A,t)=>!a()(A,this.tags[t]))},updateNewTag(A){const t=A.target.value;this.newTag=t,this.$emit("input",t)},initTags(){this.tagsCopy=d(this.tags,this.validation,this.isDuplicate),this.tagsEditStatus=s(this.tags).map(()=>!1),this._events["update:tags"]&&!this.tagsEqual()&&this.$emit("update:tags",this.tagsCopy)},blurred(A){this.$el.contains(A.target)||(this.addOnBlur&&this.focused&&this.performAddTags(this.newTag),this.focused=!1)}},watch:{value(A){this.addOnlyFromAutocomplete||(this.selectedItem=null),this.newTag=A},tags:{handler(){this.initTags()},deep:!0},autocompleteOpen:"selectDefaultItem"},created(){this.newTag=this.value,this.initTags()},mounted(){this.selectDefaultItem(),document.addEventListener("click",this.blurred)},destroyed(){document.removeEventListener("click",this.blurred)}},C=(e(9),c(m,n,[],!1,null,"61d92e31",null));C.options.__file="vue-tags-input/vue-tags-input.vue";var v=C.exports;e.d(t,"VueTagsInput",function(){return v}),e.d(t,"createClasses",function(){return o}),e.d(t,"createTag",function(){return r}),e.d(t,"createTags",function(){return d}),e.d(t,"TagInput",function(){return g}),v.install=(A=>A.component(v.name,v)),"undefined"!=typeof window&&window.Vue&&window.Vue.use(v);t.default=v}])});
 //# sourceMappingURL=vue-tags-input.js.map

docs/docs-formatter.js

@@ -7,5 +7,21 @@ import flatten from 'lodash/flatten';
 
-const docsFormatter = unformatted => {
+export const mergeDocs = (docA, docB) => {
+  return docB.map(entry => {
+    const replace = docA.find(aEntry => aEntry.name === entry.name);
+    return replace ? replace : entry;
+  });
+};
+
+export const format = unformatted => {
   const types = uniq(flatten(
-    unformatted.map(i => i.tags.find(t => t.title === 'property').type.name))
+    unformatted.map(i => {
+      const property = i.tags.find(t => t.title === 'property');
+      if (!property) {
+        console.log('Missing property at:', i);
+        throw `Expected @property to be set for documentation purposes.
+          Possible values are: [props|events|helpers] e.g. @property {props}.
+          If your comment should not show up in the documentation, avoid JSDoc syntax`;
+      }
+      return property.type.name;
+    }))
   );
@@ -20,3 +36,1 @@
 };
-
-export default docsFormatter;

docs/main.js

@@ -5,8 +5,14 @@ import 'normalize-css';
 import router from './router';
-import docsFormatter from './docs-formatter';
+import { format, mergeDocs } from './docs-formatter';
 
-// require the docs file which conains all informmation
+// require the docs file which contains all the information
 const docs = require('!!./docs-loader!../vue-tags-input/vue-tags-input.js');
-window.docs = docsFormatter(docs);
 
+// we require the props file extra and merge it later,
+// then the webpack "browser reload on file change" works with this file, too
+const props = require('!!./docs-loader!../vue-tags-input/vue-tags-input.props.js');
+
+const merged = mergeDocs(props, docs);
+window.docs = format(merged);
+
 new Vue({
@@ -13,0 +19,0 @@ el: '#app',

docs/pages/api/index.js

@@ -1,22 +0,20 @@
-import Props from './props';
-import Events from './events';
-import Slots from './slots';
 import CreateTagsHelper from './create-tags-helper';
+import GenericApiPage from '@components/generic-api-page';
 
-export default [{
-  path: '/api/props',
-  name: 'api.props',
-  component: Props,
-}, {
-  path: '/api/events',
-  name: 'api.events',
-  component: Events,
-}, {
-  path: '/api/slots',
-  name: 'api.slots',
-  component: Slots,
-}, {
-  path: '/api/create-tags-helper',
-  name: 'api.create-tags-helper',
-  component: CreateTagsHelper,
-}];
+const apiRoutes = ['events', 'props', 'slots'].map(type => {
+  return {
+    path: `/api/${type}`,
+    name: `api.${type}`,
+    component: GenericApiPage,
+    meta: { type },
+  };
+});
+
+export default [
+  ...apiRoutes,
+  {
+    path: '/api/create-tags-helper',
+    name: 'api.create-tags-helper',
+    component: CreateTagsHelper,
+  },
+];

docs/pages/examples/index.js

@@ -1,6 +0,6 @@
-import Styling from './styling';
-import Autocomplete from './autocomplete';
-import Validation from './validation';
-import Hooks from './hooks';
-import Templates from './templates';
+import Styling from './styling/';
+import Autocomplete from './autocomplete/';
+import Validation from './validation/';
+import Hooks from './hooks/';
+import Templates from './templates/';
 import Nuxt from './nuxt';
@@ -7,0 +7,0 @@

docs/router.js

@@ -10,2 +10,3 @@ import Vue from 'vue';
 import Changelog from './pages/changelog';
+import Migration from './pages/migration';
 
@@ -24,2 +25,7 @@ Vue.use(Router);
 {
+  path: '/migration',
+  name: 'migration',
+  component: Migration,
+},
+{
   path: '/changelog',
@@ -26,0 +32,0 @@ name: 'changelog',

docs/slots-data.js

 const deletionMark = {
   name: 'deletionMark',
-  description: `If the user wants to delete the tag and presses backslash,
+  description: `If the user wants to delete the tag and presses backspace,
     the property is true for 1 second, because the tag is marked to delete. `,
@@ -49,4 +49,4 @@ type: 'Boolean',
 
-const performSaveTag = {
-  name: 'performSaveTag',
+const performSaveEdit = {
+  name: 'performSaveEdit',
   description: `Call this function and pass an index as parameter
@@ -60,3 +60,3 @@ to save a modified tag`,
   {
-    slot: 'tagLeft',
+    slot: 'tag-left',
     description: 'The slot is positioned on the left of the text value',
@@ -71,7 +71,7 @@ props: [
       performCancelEdit,
-      performSaveTag,
+      performSaveEdit,
     ],
   },
   {
-    slot: 'tagRight',
+    slot: 'tag-right',
     description: 'The slot is positioned between the text value and the actions',
@@ -86,7 +86,7 @@ props: [
       performCancelEdit,
-      performSaveTag,
+      performSaveEdit,
     ],
   },
   {
-    slot: 'tagActions',
+    slot: 'tag-actions',
     description: `The slot is positioned on the right side.
@@ -102,7 +102,7 @@ At default, it holds the 'check', 'undo' and 'close' icons`,
       performCancelEdit,
-      performSaveTag,
+      performSaveEdit,
     ],
   },
   {
-    slot: 'tagCenter',
+    slot: 'tag-center',
     description: 'At default, it holds the tags text value and an input to edit the text',
@@ -122,3 +122,3 @@ props: [
       performCancelEdit,
-      performSaveTag,
+      performSaveEdit,
       {
@@ -135,3 +135,3 @@ name: 'validateTag',
   {
-    slot: 'autocompleteItem',
+    slot: 'autocomplete-item',
     description: 'Slot to create a autocomplete item in the autocomplete layer',
@@ -164,2 +164,10 @@ props: [
   {
+    slot: 'autocomplete-header',
+    description: 'The slot is at the top of the autocomplete layer.',
+  },
+  {
+    slot: 'autocomplete-footer',
+    description: 'The slot is at the bottom of the autocomplete layer.',
+  },
+  {
     slot: 'between-elements',
@@ -166,0 +174,0 @@ description: `The slot is positioned between the tags and the autocomplete layer.

e2e/add-save-on-key.test.js

@@ -10,23 +10,23 @@ import { Selector } from 'testcafe';
   await t
-    .typeText(Selector('.add-save-on .new-tag-input'), 'test')
+    .typeText(Selector('.add-save-on .ti-new-tag-input'), 'test')
     .pressKey(',')
-    .expect(Selector('.add-save-on .tags li').count).eql(2)
-    .expect(Selector('.add-save-on .tags li:nth-child(1) span').textContent).eql('test');
+    .expect(Selector('.add-save-on .ti-tags li').count).eql(2)
+    .expect(Selector('.add-save-on .ti-tags li:nth-child(1) span').textContent).eql('test');
 
   // add a tag from autocomplete with keycode 32 (space)
   await t
-    .typeText(Selector('.add-save-on .new-tag-input'), 'fr')
+    .typeText(Selector('.add-save-on .ti-new-tag-input'), 'fr')
     .pressKey('down')
     .pressKey('down')
     .pressKey('space')
-    .expect(Selector('.add-save-on .tags li').count).eql(3)
-    .expect(Selector('.add-save-on .tags li:nth-child(2) span').textContent).eql('china');
+    .expect(Selector('.add-save-on .ti-tags li').count).eql(3)
+    .expect(Selector('.add-save-on .ti-tags li:nth-child(2) span').textContent).eql('china');
 
   // edit tag 1 and try to submit with keycode 13 (enter)
   await t
-    .click(Selector('.add-save-on .tags li:nth-child(1)'))
+    .click(Selector('.add-save-on .ti-tags li:nth-child(1)'))
     .pressKey('ctrl+a delete')
-    .typeText(Selector('.add-save-on .tags li:nth-child(1) .tag-input'), 'test2')
+    .typeText(Selector('.add-save-on .ti-tags li:nth-child(1) .ti-tag-input'), 'test2')
     .pressKey('enter')
-    .expect(Selector('.add-save-on .tags li:nth-child(1) .tag-input').exists).eql(true);
+    .expect(Selector('.add-save-on .ti-tags li:nth-child(1) .ti-tag-input').exists).eql(true);
 
@@ -36,4 +36,4 @@ // now submit with keycode 188 (,)
     .pressKey(',')
-    .expect(Selector('.add-save-on .tags li:nth-child(1) .tag-input').exists).eql(false)
-    .expect(Selector('.add-save-on .tags li:nth-child(1) span').textContent).eql('test2');
+    .expect(Selector('.add-save-on .ti-tags li:nth-child(1) .ti-tag-input').exists).eql(false)
+    .expect(Selector('.add-save-on .ti-tags li:nth-child(1) span').textContent).eql('test2');
 });

e2e/autocomplete.test.js

@@ -15,6 +15,6 @@ import { Selector } from 'testcafe';
   await t
-    .click(Selector('.e2e-suite .input-0 .input'))
-    .expect(Selector('.e2e-suite .input-0 .autocomplete').exists).eql(false)
-    .expect(Selector('.e2e-suite .input-1 .autocomplete').exists).eql(false)
-    .expect(Selector('.e2e-suite .input-2 .autocomplete').exists).eql(true);
+    .click(Selector('.e2e-suite .input-0 .ti-input'))
+    .expect(Selector('.e2e-suite .input-0 .ti-autocomplete').exists).eql(false)
+    .expect(Selector('.e2e-suite .input-1 .ti-autocomplete').exists).eql(false)
+    .expect(Selector('.e2e-suite .input-2 .ti-autocomplete').exists).eql(true);
 
@@ -24,6 +24,6 @@
   await t
-    .click(Selector('.e2e-suite .input-1 .input'))
-    .expect(Selector('.e2e-suite .input-0 .autocomplete').exists).eql(false)
-    .expect(Selector('.e2e-suite .input-1 .autocomplete').exists).eql(true)
-    .expect(Selector('.e2e-suite .input-2 .autocomplete').exists).eql(true);
+    .click(Selector('.e2e-suite .input-1 .ti-input'))
+    .expect(Selector('.e2e-suite .input-0 .ti-autocomplete').exists).eql(false)
+    .expect(Selector('.e2e-suite .input-1 .ti-autocomplete').exists).eql(true)
+    .expect(Selector('.e2e-suite .input-2 .ti-autocomplete').exists).eql(true);
 
@@ -35,5 +35,5 @@
     .typeText(Selector('.e2e-suite .input-0'), 'tag')
-    .expect(Selector('.e2e-suite .input-0 .autocomplete').exists).eql(true)
-    .expect(Selector('.e2e-suite .input-1 .autocomplete').exists).eql(false)
-    .expect(Selector('.e2e-suite .input-2 .autocomplete').exists).eql(true);
+    .expect(Selector('.e2e-suite .input-0 .ti-autocomplete').exists).eql(true)
+    .expect(Selector('.e2e-suite .input-1 .ti-autocomplete').exists).eql(false)
+    .expect(Selector('.e2e-suite .input-2 .ti-autocomplete').exists).eql(true);
 
@@ -44,17 +44,17 @@ /* clear input from input-0 and check autocomplete visibility status */
     .pressKey('ctrl+a delete')
-    .expect(Selector('.e2e-suite .input-0 .autocomplete').exists).eql(false);
+    .expect(Selector('.e2e-suite .input-0 .ti-autocomplete').exists).eql(false);
 
   /* check if input-1 is shown when clicking around on it */
   await t
-    .click(Selector('.e2e-suite .input-1 .input'))
-    .expect(Selector('.e2e-suite .input-1 .autocomplete').exists).eql(true)
-    .click(Selector('.e2e-suite .input-1 .input'))
-    .expect(Selector('.e2e-suite .input-1 .autocomplete').exists).eql(true);
+    .click(Selector('.e2e-suite .input-1 .ti-input'))
+    .expect(Selector('.e2e-suite .input-1 .ti-autocomplete').exists).eql(true)
+    .click(Selector('.e2e-suite .input-1 .ti-input'))
+    .expect(Selector('.e2e-suite .input-1 .ti-autocomplete').exists).eql(true);
 
   /* check if items are filtered on input-1 and -2 when adding a tag */
   await t
-    .click(Selector('.e2e-suite .input-1 .autocomplete li:nth-child(1)'))
-    .expect(Selector('.e2e-suite .input-1 .autocomplete').exists).eql(true)
-    .expect(Selector('.e2e-suite .input-1 .autocomplete li').count).eql(2)
-    .expect(Selector('.e2e-suite .input-2 .autocomplete li').count).eql(4);
+    .click(Selector('.e2e-suite .input-1 .ti-autocomplete li:nth-child(1)'))
+    .expect(Selector('.e2e-suite .input-1 .ti-autocomplete').exists).eql(true)
+    .expect(Selector('.e2e-suite .input-1 .ti-autocomplete li').count).eql(2)
+    .expect(Selector('.e2e-suite .input-2 .ti-autocomplete li').count).eql(4);
 
@@ -65,4 +65,4 @@ /* on input-0 it should be impossbile to add item-1 again - input-2 allows it */
     .pressKey('enter')
-    .expect(Selector('.e2e-suite .input-0 .tags li').count).eql(2)
-    .expect(Selector('.e2e-suite .input-0 .new-tag-input').value).eql('item-1');
+    .expect(Selector('.e2e-suite .input-0 .ti-tags li').count).eql(2)
+    .expect(Selector('.e2e-suite .input-0 .ti-new-tag-input').value).eql('item-1');
 
@@ -72,5 +72,5 @@ await t
     .pressKey('enter')
-    .expect(Selector('.e2e-suite .input-0 .tags li').count).eql(3)
-    .expect(Selector('.e2e-suite .input-2 .tags li').count).eql(3)
-    .expect(Selector('.e2e-suite .input-0 .new-tag-input').value).eql('');
+    .expect(Selector('.e2e-suite .input-0 .ti-tags li').count).eql(3)
+    .expect(Selector('.e2e-suite .input-2 .ti-tags li').count).eql(3)
+    .expect(Selector('.e2e-suite .input-0 .ti-new-tag-input').value).eql('');
 
@@ -84,7 +84,7 @@
     .expect(
-      Selector('.e2e-suite .input-2 .autocomplete li:nth-child(1)').hasClass('selected-item')
+      Selector('.e2e-suite .input-2 .ti-autocomplete li:nth-child(1)').hasClass('ti-selected-item')
     ).eql(false)
     .pressKey('down')
     .expect(
-      Selector('.e2e-suite .input-2 .autocomplete li:nth-child(1)').hasClass('selected-item')
+      Selector('.e2e-suite .input-2 .ti-autocomplete li:nth-child(1)').hasClass('ti-selected-item')
     ).eql(true);
@@ -96,6 +96,6 @@
     .expect(
-      Selector('.e2e-suite .input-2 .autocomplete li:nth-child(1)').hasClass('selected-item')
+      Selector('.e2e-suite .input-2 .ti-autocomplete li:nth-child(1)').hasClass('ti-selected-item')
     ).eql(false)
     .expect(
-      Selector('.e2e-suite .input-2 .autocomplete li:nth-child(4)').hasClass('selected-item')
+      Selector('.e2e-suite .input-2 .ti-autocomplete li:nth-child(4)').hasClass('ti-selected-item')
     ).eql(true);
@@ -107,3 +107,3 @@
     .expect(
-      Selector('.e2e-suite .input-2 .autocomplete li:nth-child(1)').hasClass('selected-item')
+      Selector('.e2e-suite .input-2 .ti-autocomplete li:nth-child(1)').hasClass('ti-selected-item')
     ).eql(true);
@@ -115,3 +115,3 @@
     .expect(
-      Selector('.e2e-suite .input-2 .autocomplete li:nth-child(4)').hasClass('selected-item')
+      Selector('.e2e-suite .input-2 .ti-autocomplete li:nth-child(4)').hasClass('ti-selected-item')
     ).eql(true);
@@ -124,3 +124,3 @@
     .expect(
-      Selector('.e2e-suite .input-1 .autocomplete li:nth-child(1)').hasClass('selected-item')
+      Selector('.e2e-suite .input-1 .ti-autocomplete li:nth-child(1)').hasClass('ti-selected-item')
     ).eql(true);
@@ -134,6 +134,6 @@
   await t
-    .expect(Selector('.e2e-suite .input-1 .tags li').count).eql(3)
+    .expect(Selector('.e2e-suite .input-1 .ti-tags li').count).eql(3)
     .typeText(Selector('.e2e-suite .input-1'), 'item-')
     .click(Selector('.e2e-suite .input-1 input'))
-    .expect(Selector('.e2e-suite .input-1 .tags li').count).eql(3);
+    .expect(Selector('.e2e-suite .input-1 .ti-tags li').count).eql(3);
 
@@ -144,4 +144,6 @@ /* adding tags via select and enter from autocomplete should be allowed on input-2  */
     .pressKey('enter')
-    .expect(Selector('.e2e-suite .input-1 .tags li').count).eql(4)
-    .expect(Selector('.e2e-suite .input-1 .tags li:nth-child(3) span').textContent).eql('item-3');
+    .expect(Selector('.e2e-suite .input-1 .ti-tags li').count).eql(4)
+    .expect(
+      Selector('.e2e-suite .input-1 .ti-tags li:nth-child(3) span').textContent
+    ).eql('item-3');
 });

e2e/edit-tag.test.js

@@ -9,12 +9,12 @@ import { Selector } from 'testcafe';
   // we sould see a tag on startup
-  await t.expect(Selector('.edit-tag .tags li').count).eql(2);
+  await t.expect(Selector('.edit-tag .ti-tags li').count).eql(2);
 
   // the text of the tag should be 'a tag'
-  await t.expect(Selector('.edit-tag .tags li span').textContent).eql('a tag');
+  await t.expect(Selector('.edit-tag .ti-tags li span').textContent).eql('a tag');
 
   const changeTag = async (text) => {
     await t
-      .click(Selector('.edit-tag .tags li:nth-child(1)'))
+      .click(Selector('.edit-tag .ti-tags li:nth-child(1)'))
       .pressKey('ctrl+a delete')
-      .typeText(Selector('.edit-tag .tags li:nth-child(1)'), text);
+      .typeText(Selector('.edit-tag .ti-tags li:nth-child(1)'), text);
   };
@@ -26,3 +26,3 @@
     .click(Selector('.edit-tag'))
-    .expect(Selector('.edit-tag .tags li span').textContent).eql('a tag');
+    .expect(Selector('.edit-tag .ti-tags li span').textContent).eql('a tag');
 
@@ -32,6 +32,6 @@ // let's see if it discards when clicking discard icon
   await t
-    .expect(Selector('.edit-tag .tags li:nth-child(1) .icon-close').visible).eql(false)
-    .expect(Selector('.edit-tag .tags li:nth-child(1) .icon-undo').visible).eql(true)
-    .click(Selector('.edit-tag .tags li:nth-child(1) .icon-undo'))
-    .expect(Selector('.edit-tag .tags li span').textContent).eql('a tag');
+    .expect(Selector('.edit-tag .ti-tags li:nth-child(1) .ti-icon-close').visible).eql(false)
+    .expect(Selector('.edit-tag .ti-tags li:nth-child(1) .ti-icon-undo').visible).eql(true)
+    .click(Selector('.edit-tag .ti-tags li:nth-child(1) .ti-icon-undo'))
+    .expect(Selector('.edit-tag .ti-tags li span').textContent).eql('a tag');
 
@@ -42,5 +42,5 @@ // let's see if the tag is changed when enter is pressed
     .pressKey('enter')
-    .expect(Selector('.edit-tag .tags li:nth-child(1) .icon-close').visible).eql(true)
-    .expect(Selector('.edit-tag .tags li:nth-child(1) .icon-undo').visible).eql(false)
-    .expect(Selector('.edit-tag .tags li span').textContent).eql('test');
+    .expect(Selector('.edit-tag .ti-tags li:nth-child(1) .ti-icon-close').visible).eql(true)
+    .expect(Selector('.edit-tag .ti-tags li:nth-child(1) .ti-icon-undo').visible).eql(false)
+    .expect(Selector('.edit-tag .ti-tags li span').textContent).eql('test');
 });

e2e/getting-started.test.js

@@ -10,6 +10,6 @@ import { Selector } from 'testcafe';
   await t
-    .typeText(Selector('.getting-started .vue-tags-input .new-tag-input'), 'e2eTag')
+    .typeText(Selector('.getting-started .vue-tags-input .ti-new-tag-input'), 'e2eTag')
     .pressKey('enter')
-    .expect(Selector('.getting-started .vue-tags-input .tags li').count).eql(2)
-    .expect(Selector('.getting-started .vue-tags-input .tag:nth-child(1) span')
+    .expect(Selector('.getting-started .vue-tags-input .ti-tags li').count).eql(2)
+    .expect(Selector('.getting-started .vue-tags-input .ti-tag:nth-child(1) span')
       .textContent).eql('e2eTag');
@@ -19,6 +19,6 @@
   await t
-    .typeText(Selector('.getting-started .vue-tags-input .new-tag-input'), 'e2eTag 2')
+    .typeText(Selector('.getting-started .vue-tags-input .ti-new-tag-input'), 'e2eTag 2')
     .pressKey('enter')
-    .expect(Selector('.getting-started .vue-tags-input .tags li').count).eql(3)
-    .expect(Selector('.getting-started .vue-tags-input .tag:nth-child(2) span')
+    .expect(Selector('.getting-started .vue-tags-input .ti-tags li').count).eql(3)
+    .expect(Selector('.getting-started .vue-tags-input .ti-tag:nth-child(2) span')
       .innerText).eql('e2eTag 2');
@@ -28,5 +28,5 @@
   await t
-    .click(Selector('.getting-started .tag:nth-child(1) .actions .icon-close'))
-    .expect(Selector('.getting-started .vue-tags-input .tags li').count).eql(2)
-    .expect(Selector('.getting-started .vue-tags-input .tag:nth-child(1) span')
+    .click(Selector('.getting-started .ti-tag:nth-child(1) .ti-actions .ti-icon-close'))
+    .expect(Selector('.getting-started .vue-tags-input .ti-tags li').count).eql(2)
+    .expect(Selector('.getting-started .vue-tags-input .ti-tag:nth-child(1) span')
       .innerText).eql('e2eTag 2');
@@ -36,20 +36,20 @@
   await t
-    .typeText(Selector('.getting-started .vue-tags-input .new-tag-input'), 'e2eTag 3')
+    .typeText(Selector('.getting-started .vue-tags-input .ti-new-tag-input'), 'e2eTag 3')
     .click(Selector('.getting-started h1'))
-    .expect(Selector('.getting-started .vue-tags-input .tags li').count).eql(3)
-    .expect(Selector('.getting-started .vue-tags-input .tag:nth-child(2) span')
+    .expect(Selector('.getting-started .vue-tags-input .ti-tags li').count).eql(3)
+    .expect(Selector('.getting-started .vue-tags-input .ti-tag:nth-child(2) span')
       .innerText).eql('e2eTag 3');
 
-  // delete last tag on backslash
+  // delete last tag on backsspace
   await t
-    .click(Selector('.getting-started .vue-tags-input .new-tag-input'))
+    .click(Selector('.getting-started .vue-tags-input .ti-new-tag-input'))
     .pressKey('backspace')
-    .expect(Selector('.getting-started .vue-tags-input .tag:nth-child(2)')
-      .hasClass('deletion-mark')).eql(true)
+    .expect(Selector('.getting-started .vue-tags-input .ti-tag:nth-child(2)')
+      .hasClass('ti-deletion-mark')).eql(true)
     .wait(2000)
-    .expect(Selector('.getting-started .vue-tags-input .tag:nth-child(2)')
+    .expect(Selector('.getting-started .vue-tags-input .ti-tag:nth-child(2)')
       .hasClass('deletion-mark')).eql(false)
     .pressKey('backspace')
     .pressKey('backspace')
-    .expect(Selector('.getting-started .vue-tags-input .tags li').count).eql(2);
+    .expect(Selector('.getting-started .vue-tags-input .ti-tags li').count).eql(2);
 
@@ -56,0 +56,0 @@ // add a tag on paste

e2e/hooks.test.js

@@ -14,7 +14,7 @@ import { Selector } from 'testcafe';
     await t
-      .typeText(Selector('.hooks .new-tag-input'), 'tag')
+      .typeText(Selector('.hooks .ti-new-tag-input'), 'tag')
       .pressKey('enter')
       .expect(Selector('.hooks > .actions').exists).eql(true)
-      .expect(Selector('.hooks .tags').count).eql(1)
-      .expect(Selector('.hooks .new-tag-input').value).eql('tag');
+      .expect(Selector('.hooks .ti-tags').count).eql(1)
+      .expect(Selector('.hooks .ti-new-tag-input').value).eql('tag');
   };
@@ -27,4 +27,4 @@
     .expect(Selector('.hooks > .actions').exists).eql(false)
-    .expect(Selector('.hooks .tags').count).eql(1)
-    .expect(Selector('.hooks .new-tag-input').value).eql('');
+    .expect(Selector('.hooks .ti-tags').count).eql(1)
+    .expect(Selector('.hooks .ti-new-tag-input').value).eql('');
 
@@ -36,4 +36,4 @@ // perform adding -> input should become a tags
     .expect(Selector('.hooks > .actions').exists).eql(false)
-    .expect(Selector('.hooks .tags li').count).eql(2)
-    .expect(Selector('.hooks .new-tag-input').value).eql('');
+    .expect(Selector('.hooks .ti-tags li').count).eql(2)
+    .expect(Selector('.hooks .ti-new-tag-input').value).eql('');
 
@@ -46,5 +46,5 @@
     await t
-      .click(Selector('.hooks .tags li:nth-child(1) .tag-center'))
+      .click(Selector('.hooks .ti-tags li:nth-child(1) .ti-tag-center'))
       .expect(Selector('.hooks > .actions').exists).eql(true)
-      .expect(Selector('.hooks .tags:nth-child(1) .tag-input').exists).eql(false);
+      .expect(Selector('.hooks .ti-tags:nth-child(1) .ti-tag-input').exists).eql(false);
   };
@@ -57,3 +57,3 @@
     .expect(Selector('.hooks > .actions').exists).eql(false)
-    .expect(Selector('.hooks .tags li:nth-child(1) .tag-input').exists).eql(false);
+    .expect(Selector('.hooks .ti-tags li:nth-child(1) .ti-tag-input').exists).eql(false);
 
@@ -65,3 +65,3 @@ // perform edit
     .expect(Selector('.hooks > .actions').exists).eql(false)
-    .expect(Selector('.hooks .tags li:nth-child(1) .tag-input').exists).eql(true);
+    .expect(Selector('.hooks .ti-tags li:nth-child(1) .ti-tag-input').exists).eql(true);
 
@@ -75,5 +75,5 @@
       .pressKey('ctrl+a delete')
-      .typeText(Selector('.hooks .tags li:nth-child(1)'), 'changed')
+      .typeText(Selector('.hooks .ti-tags li:nth-child(1)'), 'changed')
       .pressKey('enter')
-      .expect(Selector('.hooks .tags li:nth-child(1) .tag-input').exists).eql(true)
+      .expect(Selector('.hooks .ti-tags li:nth-child(1) .ti-tag-input').exists).eql(true)
       .expect(Selector('.hooks > .actions').exists).eql(true);
@@ -86,9 +86,9 @@ };
     .click(Selector('.actions .cancel'))
-    .expect(Selector('.hooks .tags li:nth-child(1) span').textContent).eql('tag')
+    .expect(Selector('.hooks .ti-tags li:nth-child(1) span').textContent).eql('tag')
     .expect(Selector('.hooks > .actions').exists).eql(false)
-    .expect(Selector('.hooks .tags li:nth-child(1) .tag-input').exists).eql(false);
+    .expect(Selector('.hooks .ti-tags li:nth-child(1) .ti-tag-input').exists).eql(false);
 
   // perform save
   await t
-    .click(Selector('.hooks .tags li:nth-child(1) .tag-center'))
+    .click(Selector('.hooks .ti-tags li:nth-child(1) .ti-tag-center'))
     .click(Selector('.actions .perform'));
@@ -99,5 +99,5 @@
     .click(Selector('.actions .perform'))
-    .expect(Selector('.hooks .tags li:nth-child(1) span').textContent).eql('changed')
+    .expect(Selector('.hooks .ti-tags li:nth-child(1) span').textContent).eql('changed')
     .expect(Selector('.hooks > .actions').exists).eql(false)
-    .expect(Selector('.hooks .tags li:nth-child(1) .tag-input').exists).eql(false);
+    .expect(Selector('.hooks .ti-tags li:nth-child(1) .ti-tag-input').exists).eql(false);
 
@@ -108,4 +108,4 @@
     await t
-      .click(Selector('.hooks .tags li:nth-child(1) .icon-close'))
-      .expect(Selector('.hooks .tags li').count).eql(2);
+      .click(Selector('.hooks .ti-tags li:nth-child(1) .ti-icon-close'))
+      .expect(Selector('.hooks .ti-tags li').count).eql(2);
   };
@@ -117,3 +117,3 @@
     .click(Selector('.actions .cancel'))
-    .expect(Selector('.hooks .tags li').count).eql(2)
+    .expect(Selector('.hooks .ti-tags li').count).eql(2)
     .expect(Selector('.hooks > .actions').exists).eql(false);
@@ -125,4 +125,4 @@
     .click(Selector('.actions .perform'))
-    .expect(Selector('.hooks .tags li').count).eql(1)
+    .expect(Selector('.hooks .ti-tags li').count).eql(1)
     .expect(Selector('.hooks > .actions').exists).eql(false);
 });

e2e/validation.test.js

@@ -16,5 +16,5 @@ import { Selector } from 'testcafe';
   await t
-    .typeText(Selector('.tags-input-1 .new-tag-input'), 'i')
-    /* does the autocomplete show corect amount of items */
-    .expect(Selector('.tags-input-1 .autocomplete li').count).eql(3);
+    .typeText(Selector('.tags-input-1 .ti-new-tag-input'), 'i')
+    /* does the autocomplete show the correct amount of items */
+    .expect(Selector('.tags-input-1 .ti-autocomplete li').count).eql(3);
 
@@ -24,21 +24,27 @@ await t
     .expect(
-      Selector('.tags-input-1 .autocomplete li:nth-child(1)').hasClass('no-numbers')
+      Selector('.tags-input-1 .ti-autocomplete li:nth-child(1)').hasClass('no-numbers')
     ).eql(true)
     /* does the first item has the class invalid */
     .expect(
-      Selector('.tags-input-1 .autocomplete li:nth-child(1)').hasClass('invalid')
+      Selector('.tags-input-1 .ti-autocomplete li:nth-child(1)').hasClass('ti-invalid')
     ).eql(true)
     /* does the first item has not the class valid */
-    .expect(Selector('.tags-input-1 .autocomplete li:nth-child(1)').hasClass('valid')).eql(false);
+    .expect(
+      Selector('.tags-input-1 .ti-autocomplete li:nth-child(1)').hasClass('ti-valid')
+    ).eql(false);
 
   await t
     /* does the second item has the class valid */
-    .expect(Selector('.tags-input-1 .autocomplete li:nth-child(2)').hasClass('valid')).eql(true);
+    .expect(
+      Selector('.tags-input-1 .ti-autocomplete li:nth-child(2)').hasClass('ti-valid')
+    ).eql(true);
 
   await t
     /* does the third item has the class no-braces */
-    .expect(Selector('.tags-input-1 .autocomplete li:nth-child(3)').hasClass('no-braces')).eql(true)
+    .expect(
+      Selector('.tags-input-1 .ti-autocomplete li:nth-child(3)').hasClass('no-braces')
+    ).eql(true)
     /* does the third item has the class invalid */
     .expect(
-      Selector('.tags-input-1 .autocomplete li:nth-child(3)').hasClass('invalid')
+      Selector('.tags-input-1 .ti-autocomplete li:nth-child(3)').hasClass('ti-invalid')
     ).eql(true);
@@ -48,11 +54,11 @@
   await t
-    .click(Selector('.tags-input-1 .new-tag-input'))
+    .click(Selector('.tags-input-1 .ti-new-tag-input'))
     .pressKey('ctrl+a delete')
-    .typeText(Selector('.tags-input-1 .new-tag-input'), 'Cannot')
-    .expect(Selector('.tags-input-1 .autocomplete li').count).eql(1)
+    .typeText(Selector('.tags-input-1 .ti-new-tag-input'), 'Cannot')
+    .expect(Selector('.tags-input-1 .ti-autocomplete li').count).eql(1)
     .expect(
-      Selector('.tags-input-1 .autocomplete li:nth-child(1)').hasClass('avoid-item')
+      Selector('.tags-input-1 .ti-autocomplete li:nth-child(1)').hasClass('avoid-item')
     ).eql(true)
     .expect(
-      Selector('.tags-input-1 .autocomplete li:nth-child(1)').hasClass('invalid')
+      Selector('.tags-input-1 .ti-autocomplete li:nth-child(1)').hasClass('ti-invalid')
     ).eql(true);
@@ -62,4 +68,4 @@
   await t
-    .click(Selector('.tags-input-1 .new-tag-input'))
-    .expect(Selector('.tags-input-1 .tags li').count).eql(1);
+    .click(Selector('.tags-input-1 .ti-new-tag-input'))
+    .expect(Selector('.tags-input-1 .ti-tags li').count).eql(1);
 
@@ -69,57 +75,57 @@
 
-  /*Is it imbossible to add the item with text "Cannot be added" via enter (disableAdd = true)*/
+  /*Is it impossible to add the item with text "Cannot be added" via enter (disableAdd = true)*/
   await t
-    .typeText(Selector('.tags-input-1 .new-tag-input'), ' be added')
-    .expect(Selector('.tags-input-1 .new-tag-input').hasClass('avoid-item')).eql(true)
-    .expect(Selector('.tags-input-1 .new-tag-input').hasClass('invalid')).eql(true)
+    .typeText(Selector('.tags-input-1 .ti-new-tag-input'), ' be added')
+    .expect(Selector('.tags-input-1 .ti-new-tag-input').hasClass('avoid-item')).eql(true)
+    .expect(Selector('.tags-input-1 .ti-new-tag-input').hasClass('ti-invalid')).eql(true)
     .pressKey('enter')
-    .expect(Selector('.tags-input-1 .tags li').count).eql(1);
+    .expect(Selector('.tags-input-1 .ti-tags li').count).eql(1);
 
   /*Is it imbossible to add the item with text "Cannot be added" via paste (disableAdd = true)*/
   await t
-    .click(Selector('.tags-input-1 .new-tag-input'))
+    .click(Selector('.tags-input-1 .ti-new-tag-input'))
     .pressKey('ctrl+a delete')
-    .typeText(Selector('.tags-input-1 .new-tag-input'), 'Cannot be added', { paste: true })
-    .expect(Selector('.tags-input-1 .tags li').count).eql(1);
+    .typeText(Selector('.tags-input-1 .ti-new-tag-input'), 'Cannot be added', { paste: true })
+    .expect(Selector('.tags-input-1 .ti-tags li').count).eql(1);
 
   /*Is it imbossible to add the item with text "Cannot be added" via blur (disableAdd = true)*/
   await t
-    .click(Selector('.tags-input-1 .new-tag-input'))
+    .click(Selector('.tags-input-1 .ti-new-tag-input'))
     .click(Selector('.validation'))
-    .expect(Selector('.tags-input-1 .tags li').count).eql(1);
+    .expect(Selector('.tags-input-1 .ti-tags li').count).eql(1);
 
   /* does a short text input has the class min-length */
   await t
-    .click(Selector('.tags-input-1 .new-tag-input'))
+    .click(Selector('.tags-input-1 .ti-new-tag-input'))
     .pressKey('ctrl+a delete')
-    .typeText(Selector('.tags-input-1 .new-tag-input'), 'short')
-    .expect(Selector('.tags-input-1 .new-tag-input').hasClass('invalid')).eql(true)
-    .expect(Selector('.tags-input-1 .new-tag-input').hasClass('min-length')).eql(true)
+    .typeText(Selector('.tags-input-1 .ti-new-tag-input'), 'short')
+    .expect(Selector('.tags-input-1 .ti-new-tag-input').hasClass('ti-invalid')).eql(true)
+    .expect(Selector('.tags-input-1 .ti-new-tag-input').hasClass('min-length')).eql(true)
     .pressKey('enter')
-    .expect(Selector('.tags-input-1 .tags li').count).eql(2);
+    .expect(Selector('.tags-input-1 .ti-tags li').count).eql(2);
 
   /* does a duplicate input has the class duplicate */
   await t
-    .click(Selector('.tags-input-1 .new-tag-input'))
+    .click(Selector('.tags-input-1 .ti-new-tag-input'))
     .pressKey('ctrl+a delete')
-    .typeText(Selector('.tags-input-1 .new-tag-input'), 'short')
-    .expect(Selector('.tags-input-1 .new-tag-input').hasClass('invalid')).eql(true)
-    .expect(Selector('.tags-input-1 .new-tag-input').hasClass('duplicate')).eql(true);
+    .typeText(Selector('.tags-input-1 .ti-new-tag-input'), 'short')
+    .expect(Selector('.tags-input-1 .ti-new-tag-input').hasClass('ti-invalid')).eql(true)
+    .expect(Selector('.tags-input-1 .ti-new-tag-input').hasClass('ti-duplicate')).eql(true);
 
   /* does the input gets the classes min-length, no-braces, no-numbers in combination */
   await t
-    .typeText(Selector('.tags-input-1 .new-tag-input'), '8{')
-    .expect(Selector('.tags-input-1 .new-tag-input').hasClass('min-length')).eql(true)
-    .expect(Selector('.tags-input-1 .new-tag-input').hasClass('no-braces')).eql(true)
-    .expect(Selector('.tags-input-1 .new-tag-input').hasClass('no-numbers')).eql(true)
-    .typeText(Selector('.tags-input-1 .new-tag-input'), '6')
-    .expect(Selector('.tags-input-1 .new-tag-input').hasClass('min-length')).eql(false);
+    .typeText(Selector('.tags-input-1 .ti-new-tag-input'), '8{')
+    .expect(Selector('.tags-input-1 .ti-new-tag-input').hasClass('min-length')).eql(true)
+    .expect(Selector('.tags-input-1 .ti-new-tag-input').hasClass('no-braces')).eql(true)
+    .expect(Selector('.tags-input-1 .ti-new-tag-input').hasClass('no-numbers')).eql(true)
+    .typeText(Selector('.tags-input-1 .ti-new-tag-input'), '6')
+    .expect(Selector('.tags-input-1 .ti-new-tag-input').hasClass('min-length')).eql(false);
 
   /* is it possible to make a valid input */
   await t
-    .click(Selector('.tags-input-1 .new-tag-input'))
+    .click(Selector('.tags-input-1 .ti-new-tag-input'))
     .pressKey('ctrl+a delete')
-    .typeText(Selector('.tags-input-1 .new-tag-input'), 'this is valid tag')
-    .expect(Selector('.tags-input-1 .new-tag-input').hasClass('valid')).eql(true)
-    .expect(Selector('.tags-input-1 .new-tag-input').hasClass('invalid')).eql(false);
+    .typeText(Selector('.tags-input-1 .ti-new-tag-input'), 'this is valid tag')
+    .expect(Selector('.tags-input-1 .ti-new-tag-input').hasClass('ti-valid')).eql(true)
+    .expect(Selector('.tags-input-1 .ti-new-tag-input').hasClass('ti-invalid')).eql(false);
 
@@ -131,45 +137,45 @@
   await t
-    .click(Selector('.tags-input-1 .new-tag-input'))
+    .click(Selector('.tags-input-1 .ti-new-tag-input'))
     .pressKey('enter')
-    .expect(Selector('.tags-input-1 .tags li:nth-child(2)').hasClass('valid')).eql(true)
-    .typeText(Selector('.tags-input-1 .new-tag-input'), 'this is valid tag')
+    .expect(Selector('.tags-input-1 .ti-tags li:nth-child(2)').hasClass('ti-valid')).eql(true)
+    .typeText(Selector('.tags-input-1 .ti-new-tag-input'), 'this is valid tag')
     .pressKey('enter')
-    .expect(Selector('.tags-input-1 .tags li:nth-child(2)').hasClass('duplicate')).eql(true)
-    .expect(Selector('.tags-input-1 .tags li:nth-child(2)').hasClass('invalid')).eql(true)
-    .expect(Selector('.tags-input-1 .tags li:nth-child(3)').hasClass('duplicate')).eql(true)
-    .expect(Selector('.tags-input-1 .tags li:nth-child(3)').hasClass('invalid')).eql(true);
+    .expect(Selector('.tags-input-1 .ti-tags li:nth-child(2)').hasClass('ti-duplicate')).eql(true)
+    .expect(Selector('.tags-input-1 .ti-tags li:nth-child(2)').hasClass('ti-invalid')).eql(true)
+    .expect(Selector('.tags-input-1 .ti-tags li:nth-child(3)').hasClass('ti-duplicate')).eql(true)
+    .expect(Selector('.tags-input-1 .ti-tags li:nth-child(3)').hasClass('ti-invalid')).eql(true);
 
   /* does duplicate tags lose the class duplicate when chaning one */
   await t
-    .click(Selector('.tags-input-1 .tags li:nth-child(2)'))
-    .click(Selector('.tags-input-1 .tags li:nth-child(2) input'))
+    .click(Selector('.tags-input-1 .ti-tags li:nth-child(2)'))
+    .click(Selector('.tags-input-1 .ti-tags li:nth-child(2) input'))
     .pressKey('backspace')
     .pressKey('enter')
-    .expect(Selector('.tags-input-1 .tags li:nth-child(2)').hasClass('duplicate')).eql(false)
-    .expect(Selector('.tags-input-1 .tags li:nth-child(2)').hasClass('invalid')).eql(false)
-    .expect(Selector('.tags-input-1 .tags li:nth-child(3)').hasClass('duplicate')).eql(false)
-    .expect(Selector('.tags-input-1 .tags li:nth-child(3)').hasClass('invalid')).eql(false);
+    .expect(Selector('.tags-input-1 .ti-tags li:nth-child(2)').hasClass('ti-duplicate')).eql(false)
+    .expect(Selector('.tags-input-1 .ti-tags li:nth-child(2)').hasClass('ti-invalid')).eql(false)
+    .expect(Selector('.tags-input-1 .ti-tags li:nth-child(3)').hasClass('ti-duplicate')).eql(false)
+    .expect(Selector('.tags-input-1 .ti-tags li:nth-child(3)').hasClass('ti-invalid')).eql(false);
 
   /* does the first tag has the class min-length */
   await t
-    .expect(Selector('.tags-input-1 .tags li:nth-child(1)').hasClass('min-length')).eql(true);
+    .expect(Selector('.tags-input-1 .ti-tags li:nth-child(1)').hasClass('min-length')).eql(true);
 
   /* does the first tag lose the class min-length when chaning */
   await t
-    .click(Selector('.tags-input-1 .tags li:nth-child(1)'))
-    .typeText(Selector('.tags-input-1 .tags li:nth-child(1) input'), ' and now longer')
+    .click(Selector('.tags-input-1 .ti-tags li:nth-child(1)'))
+    .typeText(Selector('.tags-input-1 .ti-tags li:nth-child(1) input'), ' and now longer')
     .pressKey('enter')
-    .expect(Selector('.tags-input-1 .tags li:nth-child(1)').hasClass('valid')).eql(true)
-    .expect(Selector('.tags-input-1 .tags li:nth-child(1)').hasClass('min-length')).eql(false)
-    .expect(Selector('.tags-input-1 .tags li:nth-child(1)').hasClass('invalid')).eql(false);
+    .expect(Selector('.tags-input-1 .ti-tags li:nth-child(1)').hasClass('ti-valid')).eql(true)
+    .expect(Selector('.tags-input-1 .ti-tags li:nth-child(1)').hasClass('min-length')).eql(false)
+    .expect(Selector('.tags-input-1 .ti-tags li:nth-child(1)').hasClass('ti-invalid')).eql(false);
 
   /* does a added tag with text "valid tag but }" has the class no-braces */
   await t
-    .click(Selector('.tags-input-1 .new-tag-input'))
-    .typeText(Selector('.tags-input-1 .new-tag-input'), 'valid tag but }')
+    .click(Selector('.tags-input-1 .ti-new-tag-input'))
+    .typeText(Selector('.tags-input-1 .ti-new-tag-input'), 'valid tag but }')
     .pressKey('enter')
-    .expect(Selector('.tags-input-1 .tags li:nth-child(4)').hasClass('no-braces')).eql(true)
-    .expect(Selector('.tags-input-1 .tags li:nth-child(4)').hasClass('min-length')).eql(false)
-    .expect(Selector('.tags-input-1 .tags li:nth-child(4)').hasClass('no-numbers')).eql(false)
-    .expect(Selector('.tags-input-1 .tags li:nth-child(4)').hasClass('invalid')).eql(true);
+    .expect(Selector('.tags-input-1 .ti-tags li:nth-child(4)').hasClass('no-braces')).eql(true)
+    .expect(Selector('.tags-input-1 .ti-tags li:nth-child(4)').hasClass('min-length')).eql(false)
+    .expect(Selector('.tags-input-1 .ti-tags li:nth-child(4)').hasClass('no-numbers')).eql(false)
+    .expect(Selector('.tags-input-1 .ti-tags li:nth-child(4)').hasClass('ti-invalid')).eql(true);
 });

package.json

 {
   "name": "@johmun/vue-tags-input",
-  "version": "1.6.0",
+  "version": "2.0.0",
   "author": "Johannes Munari <[e-mail]>",
   "license": "MIT",
-  "description": "A tags input component for VueJs with autocompletion, custom validation, templating and much more",
+  "description": "A tags input component for VueJS with autocompletion, custom validation, templating and much more",
   "homepage": "http://www.vue-tags-input.com",
@@ -23,10 +23,10 @@ "private": false,
   "scripts": {
-    "dev": "cross-env NODE_ENV=dev webpack-dev-server --hot",
-    "test-sw": "hs -c 0 -p 8111 ./dist & cross-env NODE_ENV=production webpack -w",
-    "build-lib": "cross-env NODE_ENV=buildLib webpack --hide-modules",
-    "build-docs": "cross-env NODE_ENV=buildDocs webpack --hide-modules",
-    "analyze-build": "cross-env NODE_ENV=buildLib ANALYZE=true webpack",
+    "dev": "npm run docs",
+    "docs": "cross-env NODE_ENV=development webpack-dev-server --hot --config ./build/docs.config.js",
+    "build-docs": "cross-env NODE_ENV=production webpack --config ./build/docs.config.js --hide-modules",
+    "analyze": "cross-env ANALYZE=true npm run build-docs",
+    "build-lib": "webpack --config ./build/lib.config.js --hide-modules",
     "precommit": "lint-staged",
-    "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
-    "lint-fix": "eslint --fix --ignore-path .gitignore .",
+    "lint": "eslint --ext .js,.vue --ignore-path .gitignore . --ignore-pattern *.demo.*",
+    "lint-fix": "eslint --fix --ignore-path .gitignore --ext .js,.vue . --ignore-pattern *.demo.*",
     "e2e": "testcafe all e2e/*test* --app \"npm run dev\" --app-init-delay 10000 -S -s screenshots"
@@ -45,41 +45,73 @@ },
   "devDependencies": {
-    "@hydrant/eslint-config": "^1.1.3",
-    "autoprefixer": "^7.2.6",
-    "axios": "^0.17.1",
-    "babel-core": "^6.26.0",
-    "babel-loader": "^7.1.4",
-    "babel-polyfill": "^6.26.0",
-    "babel-preset-env": "^1.6.1",
-    "babel-preset-stage-2": "^6.24.1",
-    "clean-webpack-plugin": "^0.1.19",
+    "@babel/core": "^7.1.2",
+    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
+    "@babel/polyfill": "^7.0.0",
+    "@babel/preset-env": "^7.1.0",
+    "@hydrant/eslint-config": "^2.0.1",
+    "autoprefixer": "^9.4.3",
+    "axios": "^0.18.0",
+    "babel-eslint": "^10.0.1",
+    "babel-loader": "^8.0.4",
+    "clean-webpack-plugin": "^1.0.0",
     "copy-webpack-plugin": "^4.5.1",
     "cross-env": "^5.1.4",
-    "css-loader": "^0.28.10",
-    "documentation": "^7.1.0",
-    "eslint": "^4.18.2",
-    "eslint-plugin-html": "^3.2.1",
+    "css-loader": "^2.0.2",
+    "documentation": "^9.1.1",
+    "eslint": "^5.10.0",
+    "eslint-plugin-vue": "^5.0.0-beta.3",
     "fast-deep-equal": "^2.0.1",
-    "file-loader": "^1.1.11",
-    "html-webpack-plugin": "^2.30.1",
-    "http-server": "^0.10.0",
-    "image-webpack-loader": "^3.6.0",
-    "js-beautify": "1.6.14",
+    "file-loader": "^3.0.1",
+    "html-webpack-plugin": "^3.2.0",
+    "http-server": "^0.11.1",
+    "husky": "^1.1.2",
+    "image-webpack-loader": "^4.6.0",
+    "ip": "^1.1.5",
+    "lint-staged": "^8.1.0",
     "node-sass": "^4.8.1",
     "normalize-css": "^2.3.1",
-    "postcss-loader": "^2.1.1",
-    "sass-loader": "^6.0.7",
-    "style-loader": "^0.18.2",
-    "testcafe": "^0.18.5",
-    "testcafe-vue-selectors": "^2.1.0",
-    "url-loader": "^0.6.2",
-    "vue-loader": "^13.7.1",
+    "postcss-loader": "^3.0.0",
+    "raw-loader": "^1.0.0",
+    "sass-loader": "^7.1.0",
+    "testcafe": "^0.23.3",
+    "testcafe-vue-selectors": "^3.0.0",
+    "url-loader": "^1.1.2",
+    "vue-loader": "^15.4.2",
     "vue-router": "^3.0.1",
+    "vue-style-loader": "^4.1.2",
     "vue-template-compiler": "^2.5.16",
-    "webpack": "^3.11.0",
-    "webpack-bundle-analyzer": "^2.11.1",
-    "webpack-dev-server": "^2.11.1"
+    "webpack": "^4.28.1",
+    "webpack-bundle-analyzer": "^3.0.3",
+    "webpack-cli": "^3.1.2",
+    "webpack-dev-server": "^3.1.10"
   },
   "eslintConfig": {
-    "extends": "@hydrant/eslint-config/vue"
+    "parserOptions": {
+      "parser": "babel-eslint",
+      "ecmaVersion": 2017,
+      "sourceType": "module"
+    },
+    "extends": "@hydrant/eslint-config/vue",
+    "rules": {
+      "vue/max-attributes-per-line": "off",
+      "vue/no-use-v-if-with-v-for": "off",
+      "vue/no-unused-components": "off",
+      "vue/component-name-in-template-casing": "off",
+      "vue/singleline-html-element-content-newline": "off",
+      "vue/no-v-html": "off",
+      "vue/require-default-prop": "off",
+      "vue/use-v-on-exact": "off",
+      "vue/multiline-html-element-content-newline": "off"
+    }
+  },
+  "browserslist": [
+    "ie >= 11",
+    "last 2 Firefox versions",
+    "last 5 Chrome versions",
+    "last 2 iOS versions"
+  ],
+  "postcss": {
+    "plugins": {
+      "autoprefixer": {}
+    }
   }
 }

README.md

 # vue-tags-input
 
-A tags input component for VueJs with autocompletion, custom validation, templating and much more
+A tags input component for VueJS with autocompletion, custom validation, templating and much more
 
@@ -15,7 +15,7 @@ [Demo & Docs](http://www.vue-tags-input.com)
 * Works with Vuex
-* Small size: 26kb minified | gzipped 9kb
+* Small size: 34kb minified (css included) | gzipped 9kb
 * Autocompletion
 * Many customization options
 * Own templates
-* Delete tags on backslash
+* Delete tags on backspace
 * Add tags on paste
@@ -72,2 +72,2 @@ * Examples & Docs
 
-Copyright (c) 2018 Johannes Munari
+Copyright (c) 2019 Johannes Munari

vue-tags-input/create-tags.js

 // helper functions
 
-const validateUserRules = (text, validation) => {
+const validateUserRules = (tag, validation) => {
   return validation.filter(val => {
+    const { text } = tag;
     // if the rule is a string, we convert it to RegExp
@@ -12,5 +13,5 @@ if (typeof val.rule === 'string') return !new RegExp(val.rule).test(text);
     const isFunction = {}.toString.call(val.rule) === '[object Function]';
-    if (isFunction) return val.rule(text);
+    if (isFunction) return val.rule(tag);
 
-  }).map(val => val.type);
+  }).map(val => val.classes);
 };
@@ -33,3 +34,3 @@
   // create css classes from the user validation array
-  const classes = validateUserRules(tag.text, validation);
+  const classes = validateUserRules(tag, validation);
 
@@ -47,6 +48,6 @@ // if we find the tag, it's an exsting one which is edited.
   // if it's a duplicate, push the class duplicate to the array
-  if (duplicate) classes.push('duplicate');
+  if (duplicate) classes.push('ti-duplicate');
 
   // if we find no classes, the tag is valid → push the class valid
-  classes.length === 0 ? classes.push('valid') : classes.push('invalid');
+  classes.length === 0 ? classes.push('ti-valid') : classes.push('ti-invalid');
   return classes;
@@ -53,0 +54,0 @@ };

vue-tags-input/vue-tags-input.js

@@ -74,4 +74,4 @@ // The file contains the main application logic
     invokeDelete() {
-      // If we shouldn't delete tags on backslash or we have some characters in the input → stop
-      if (!this.deleteOnBackslash || this.newTag.length > 0) return;
+      // If we shouldn't delete tags on backspace or we have some characters in the input → stop
+      if (!this.deleteOnBackspace || this.newTag.length > 0) return;
       const lastIndex = this.tagsCopy.length - 1;
@@ -132,3 +132,3 @@ if (this.deletionMark === null) {
       this.$nextTick(() => {
-        const el = this.$refs.tagCenter[index].querySelector('input.tag-input');
+        const el = this.$refs.tagCenter[index].querySelector('input.ti-tag-input');
         if (el) el.focus();
@@ -151,3 +151,3 @@ });
       return tiClasses.some(type => {
-        const rule = this.validation.find(rule => type === rule.type);
+        const rule = this.validation.find(rule => type === rule.classes);
         return rule ? rule.disableAdd : false;
@@ -208,5 +208,2 @@ });
 
-      // If the tag has no content → stop
-      if (typeof tag === 'string' && tag.trim().length === 0) return;
-
       // Convert the string or object into a tags array
@@ -217,2 +214,5 @@ let tags = [];
 
+      // Filter out the tags with no content
+      tags = tags.filter(tag => tag.text.trim().length > 0);
+
       // The basic checks are done → try to add all tags
@@ -271,4 +271,4 @@ tags.forEach(tag => {
 
-        // If the tag is invalid and we find a rule which avoids adding → stop
-        if (!tag.valid && this.hasForbiddingAddRule(tag.tiClasses)) return;
+        // If we find a rule which avoids that the tag is added → stop
+        if (this.hasForbiddingAddRule(tag.tiClasses)) return;
 
@@ -332,4 +332,4 @@ // Everything is okay → add the tag
 
-      // If the tag is invalid and we find a rule which avoids saving → stop
-      if (!tag.valid && this.hasForbiddingAddRule(tag.tiClasses)) return;
+      // If we find a rule which avoids that the tag is added → stop
+      if (this.hasForbiddingAddRule(tag.tiClasses)) return;
 
@@ -360,3 +360,3 @@ // Everything is okay → save the tag
 
-      // We check if the original and the copied tags are equal →
+      // We check if the original and the copied and validated tags are equal →
       // Update the parent if not and sync is on.
@@ -363,0 +363,0 @@ if (this._events['update:tags'] && !this.tagsEqual()) {

vue-tags-input/vue-tags-input.props.js

@@ -207,3 +207,3 @@ // The file contains all props and validators which are provided by the component
    * @description Pass an array containing objects like in the example below.
-     The property 'type' will be added as css classes, if the property 'rule' matches the text
+     The property 'classes' will be added as css classes, if the property 'rule' matches the text
      of a tag, an autocomplete item or the input. The property 'rule' can be type of
@@ -217,6 +217,6 @@ RegExp or function. If the property 'disableAdd' is 'true', the item can't be added
     {
-     type: 'class', /* css class */
+     classes: 'class', /* css class */
      rule: /^([^0-9]*)$/, /* RegExp */
     }, {
-     type: 'no-braces', /* css class */
+     classes: 'no-braces', /* css class */
      rule(text) { /* function with text as param */
@@ -249,4 +249,4 @@   return text.indexOf('{') !== -1 || text.indexOf('}') !== -1;
 
-        const missingType = !v.type;
-        if (missingType) console.warn('Property "type" is missing', v);
+        const missingClasses = !v.classes;
+        if (missingClasses) console.warn('Property "classes" is missing', v);
 
@@ -256,3 +256,3 @@ const invalidType = v.type && typeof v.type !== 'string';
 
-        return !validRule || missingRule || missingType || invalidType;
+        return !validRule || missingRule || missingClasses || invalidType;
       });
@@ -334,6 +334,6 @@ },
   /**
-   * @description Defines if it's possible to delete tags by pressing backslash.
+   * @description Defines if it's possible to delete tags by pressing backspace.
      If so and the user wants to delete a tag,
      the tag gets the css class 'deletion-mark' for 1 second.
-     If the user presses backslash again in that time period,
+     If the user presses backspace again in that time period,
      the tag is removed from the tags array and the view.
@@ -344,3 +344,3 @@ * @property {props}
    */
-  deleteOnBackslash: {
+  deleteOnBackspace: {
     default: true,
@@ -347,0 +347,0 @@ type: Boolean,

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Lines of code

2135

increased by14.17%

Worsened metrics

Total package byte prevSize

832234

decreased by-65.16%

Dev dependency count

40

increased by14.29%

Number of package files

107

decreased by-12.3%

No dependency changes