simple-tags-for-vue/dist/simple-tags-for-vue.min.js

Attach or detach tags with suggestions. Vue 3. Styled with Tailwind CSS.

var SimpleTagsForVue=function(t){"use strict";function e(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(t)))return;var n=[],r=!0,i=!1,a=void 0;try{for(var l,o=t[Symbol.iterator]();!(r=(l=o.next()).done)&&(n.push(l.value),!e||n.length!==e);r=!0);}catch(t){i=!0,a=t}finally{try{r||null==o.return||o.return()}finally{if(i)throw a}}return n}(t,e)||function(t,e){if(!t)return;if("string"==typeof t)return n(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);"Object"===r&&t.constructor&&(r=t.constructor.name);if("Map"===r||"Set"===r)return Array.from(t);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return n(t,e)}(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function n(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,r=new Array(e);n<e;n++)r[n]=t[n];return r}var r={name:"tags_input",props:{modelValue:{type:Array,default:[]},existing:{type:Array,default:[]},unused:{type:Array,default:[]},tailwind:{type:Boolean,default:!0}},emits:["update:modelValue","destroy"],data:function(){return{tags:this.modelValue,existing_tags:this.existing,input_text:""}},methods:{addTag:function(t){var e=t.target.value?t.target.value:t.target.innerText;e&&(this.tags.find((function(t){return t===e}))||(this.tags.push(e),this.$emit("update:modelValue",this.tags),this.input_text=""))},removeTag:function(t){var e=this.tags.findIndex((function(e){return e===t}));this.tags.splice(e,1),this.$emit("update:modelValue",this.tags)},destroy:function(t,e){if("brightness(75%)"!==e.target.style.filter)e.target.style.filter="brightness(75%)";else{this.$emit("destroy",t);var n=this.existing_tags.findIndex((function(e){return e===t}));this.existing_tags.splice(n,1)}}},computed:{existing_without_selected:function(){var t=this,e=this.existing_tags.filter((function(e){return!t.tags.includes(e)}));return this.input_text?e.filter((function(e){return e.includes(t.input_text)})):e}}},i=t.createTextVNode("     "),a=t.createTextVNode("     ");r.render=function(e,n,r,l,o,u){return t.openBlock(),t.createBlock("div",null,[t.createVNode("div",{class:r.tailwind?"flex flex-wrap":null},[(t.openBlock(!0),t.createBlock(t.Fragment,null,t.renderList(o.tags,(function(e){return t.openBlock(),t.createBlock("div",{class:r.tailwind?"bg-blue-300 rounded-2xl text-white mr-2 mb-2 flex items-center pl-2 pr-1":null},[t.createVNode("span",null,t.toDisplayString(e),1),i,t.createVNode("span",{onClick:function(t){return u.removeTag(e)},style:{cursor:"pointer"}},"ⓧ",8,["onClick"])],2)})),256))],2),t.createVNode("div",null,[t.withDirectives(t.createVNode("input",{type:"text","onUpdate:modelValue":n[1]||(n[1]=function(t){return o.input_text=t}),onKeydown:n[2]||(n[2]=t.withKeys(t.withModifiers((function(){return u.addTag&&u.addTag.apply(u,arguments)}),["prevent"]),["enter"]))},null,544),[[t.vModelText,o.input_text]]),(t.openBlock(!0),t.createBlock(t.Fragment,null,t.renderList(o.tags,(function(e){return t.openBlock(),t.createBlock("input",{type:"hidden",name:"tags[]",value:e},null,8,["value"])})),256))]),t.createVNode("div",{class:r.tailwind?"mt-4 flex flex-wrap":null},[(t.openBlock(!0),t.createBlock(t.Fragment,null,t.renderList(u.existing_without_selected,(function(e){return t.openBlock(),t.createBlock("div",{class:r.tailwind?"existing-tags bg-blue-200 rounded-2xl text-white mr-2 mb-2 flex items-center pl-2 pr-1":null,style:{cursor:"pointer"}},[t.createVNode("span",{onClick:n[3]||(n[3]=function(){return u.addTag&&u.addTag.apply(u,arguments)})},t.toDisplayString(e),1),a,r.unused.includes(e)?(t.openBlock(),t.createBlock("span",{key:0,onClick:function(t){return u.destroy(e,t)},class:r.tailwind?"text-blue-300":null},"ⓧ",10,["onClick"])):t.createCommentVNode("",!0)],2)})),256))],2)])};var l=function(){var t=r;return t.install=function(e){e.component("SimpleTagsForVue",t)},t}(),o=Object.freeze({__proto__:null,default:l});return Object.entries(o).forEach((function(t){var n=e(t,2),r=n[0],i=n[1];"default"!==r&&(l[r]=i)})),l}(Vue);