primevue/chips/chips.esm.min.js

[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primevue) [![Discord Chat](https://img.shields.io/discord/55794023

import{openBlock as e,createElementBlock as t,normalizeClass as n,normalizeStyle as l,createElementVNode as i,Fragment as a,renderList as s,renderSlot as o,toDisplayString as p,mergeProps as d}from"vue";var u={name:"Chips",inheritAttrs:!1,emits:["update:modelValue","add","remove"],props:{modelValue:{type:Array,default:null},max:{type:Number,default:null},separator:{type:String,default:null},addOnBlur:{type:Boolean,default:null},allowDuplicate:{type:Boolean,default:!0},class:null,style:null},data:()=>({inputValue:null,focused:!1}),methods:{onWrapperClick(){this.$refs.input.focus()},onInput(e){this.inputValue=e.target.value},onFocus(){this.focused=!0},onBlur(e){this.focused=!1,this.addOnBlur&&this.addItem(e,e.target.value,!1)},onKeyDown(e){const t=e.target.value;switch(e.which){case 8:0===t.length&&this.modelValue&&this.modelValue.length>0&&this.removeItem(e,this.modelValue.length-1);break;case 13:t&&t.trim().length&&!this.maxedOut&&this.addItem(e,t,!0);break;default:this.separator&&(","!==this.separator||188!==e.which&&110!==e.which||this.addItem(e,t,!0))}},onPaste(e){if(this.separator){let t=(e.clipboardData||window.clipboardData).getData("Text");if(t){let n=this.modelValue||[],l=t.split(this.separator);l=l.filter((e=>this.allowDuplicate||-1===n.indexOf(e))),n=[...n,...l],this.updateModel(e,n,!0)}}},updateModel(e,t,n){this.$emit("update:modelValue",t),this.$emit("add",{originalEvent:e,value:t}),this.$refs.input.value="",this.inputValue="",n&&e.preventDefault()},addItem(e,t,n){if(t&&t.trim().length){let l=this.modelValue?[...this.modelValue]:[];(this.allowDuplicate||-1===l.indexOf(t))&&(l.push(t),this.updateModel(e,l,n))}},removeItem(e,t){if(this.$attrs.disabled)return;let n=[...this.modelValue];const l=n.splice(t,1);this.$emit("update:modelValue",n),this.$emit("remove",{originalEvent:e,value:l})}},computed:{maxedOut(){return this.max&&this.modelValue&&this.max===this.modelValue.length},containerClass(){return["p-chips p-component p-inputwrapper",this.class,{"p-inputwrapper-filled":this.modelValue&&this.modelValue.length||this.inputValue&&this.inputValue.length,"p-inputwrapper-focus":this.focused}]}}};const r={class:"p-chips-token-label"},h=["onClick"],c={class:"p-chips-input-token"},m=["disabled"];!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var l=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===n&&l.firstChild?l.insertBefore(i,l.firstChild):l.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}("\n.p-chips {\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n}\n.p-chips-multiple-container {\n    margin: 0;\n    padding: 0;\n    list-style-type: none;\n    cursor: text;\n    overflow: hidden;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -ms-flex-wrap: wrap;\n        flex-wrap: wrap;\n}\n.p-chips-token {\n    cursor: default;\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-flex: 0;\n        -ms-flex: 0 0 auto;\n            flex: 0 0 auto;\n}\n.p-chips-input-token {\n    -webkit-box-flex: 1;\n        -ms-flex: 1 1 auto;\n            flex: 1 1 auto;\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n}\n.p-chips-token-icon {\n    cursor: pointer;\n}\n.p-chips-input-token input {\n    border: 0 none;\n    outline: 0 none;\n    background-color: transparent;\n    margin: 0;\n    padding: 0;\n    -webkit-box-shadow: none;\n            box-shadow: none;\n    border-radius: 0;\n    width: 100%;\n}\n.p-fluid .p-chips {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n}\n"),u.render=function(u,f,x,b,y,w){return e(),t("div",{class:n(w.containerClass),style:l(x.style)},[i("ul",{class:n(["p-inputtext p-chips-multiple-container",{"p-disabled":u.$attrs.disabled,"p-focus":y.focused}]),onClick:f[5]||(f[5]=e=>w.onWrapperClick())},[(e(!0),t(a,null,s(x.modelValue,((n,l)=>(e(),t("li",{key:`${l}_${n}`,class:"p-chips-token"},[o(u.$slots,"chip",{value:n},(()=>[i("span",r,p(n),1)])),i("span",{class:"p-chips-token-icon pi pi-times-circle",onClick:e=>w.removeItem(e,l)},null,8,h)])))),128)),i("li",c,[i("input",d({ref:"input",type:"text"},u.$attrs,{onFocus:f[0]||(f[0]=(...e)=>w.onFocus&&w.onFocus(...e)),onBlur:f[1]||(f[1]=e=>w.onBlur(e)),onInput:f[2]||(f[2]=(...e)=>w.onInput&&w.onInput(...e)),onKeydown:f[3]||(f[3]=e=>w.onKeyDown(e)),onPaste:f[4]||(f[4]=e=>w.onPaste(e)),disabled:u.$attrs.disabled||w.maxedOut}),null,16,m)])],2)],6)};export{u as default};