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{UniqueComponentId as e}from"primevue/utils";import{openBlock as t,createElementBlock as n,normalizeClass as i,createElementVNode as l,Fragment as a,renderList as s,renderSlot as o,toDisplayString as u,mergeProps as d}from"vue";var r={name:"Chips",emits:["update:modelValue","add","remove","focus","blur"],props:{modelValue:{type:Array,default:null},max:{type:Number,default:null},separator:{type:[String,Object],default:null},addOnBlur:{type:Boolean,default:null},allowDuplicate:{type:Boolean,default:!0},placeholder:{type:String,default:null},disabled:{type:Boolean,default:!1},inputId:{type:String,default:null},inputClass:{type:String,default:null},inputStyle:{type:null,default:null},inputProps:{type:null,default:null},removeTokenIcon:{type:String,default:"pi pi-times-circle"},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},data:()=>({id:e(),inputValue:null,focused:!1,focusedIndex:null}),methods:{onWrapperClick(){this.$refs.input.focus()},onInput(e){this.inputValue=e.target.value,this.focusedIndex=null},onFocus(e){this.focused=!0,this.focusedIndex=null,this.$emit("focus",e)},onBlur(e){this.focused=!1,this.focusedIndex=null,this.addOnBlur&&this.addItem(e,e.target.value,!1),this.$emit("blur",e)},onKeyDown(e){const t=e.target.value;switch(e.code){case"Backspace":0===t.length&&this.modelValue&&this.modelValue.length>0&&(null!==this.focusedIndex?this.removeItem(e,this.focusedIndex):this.removeItem(e,this.modelValue.length-1));break;case"Enter":t&&t.trim().length&&!this.maxedOut&&this.addItem(e,t,!0);break;case"ArrowLeft":0===t.length&&this.modelValue&&this.modelValue.length>0&&this.$refs.container.focus();break;case"ArrowRight":e.stopPropagation();break;default:this.separator&&(this.separator===e.key||e.key.match(this.separator))&&this.addItem(e,t,!0)}},onPaste(e){if(this.separator){let t=(e.clipboardData||window.clipboardData).getData("Text");if(t){let n=this.modelValue||[],i=t.split(this.separator);i=i.filter((e=>this.allowDuplicate||-1===n.indexOf(e))),n=[...n,...i],this.updateModel(e,n,!0)}}},onContainerFocus(){this.focused=!0},onContainerBlur(){this.focusedIndex=-1,this.focused=!1},onContainerKeyDown(e){switch(e.code){case"ArrowLeft":this.onArrowLeftKeyOn(e);break;case"ArrowRight":this.onArrowRightKeyOn(e);break;case"Backspace":this.onBackspaceKeyOn(e)}},onArrowLeftKeyOn(){0===this.inputValue.length&&this.modelValue&&this.modelValue.length>0&&(this.focusedIndex=null===this.focusedIndex?this.modelValue.length-1:this.focusedIndex-1,this.focusedIndex<0&&(this.focusedIndex=0))},onArrowRightKeyOn(){0===this.inputValue.length&&this.modelValue&&this.modelValue.length>0&&(this.focusedIndex===this.modelValue.length-1?(this.focusedIndex=null,this.$refs.input.focus()):this.focusedIndex++)},onBackspaceKeyOn(e){null!==this.focusedIndex&&this.removeItem(e,this.focusedIndex)},updateModel(e,t,n){this.$emit("update:modelValue",t),this.$emit("add",{originalEvent:e,value:t}),this.$refs.input.value="",this.inputValue="",setTimeout((()=>{this.maxedOut&&(this.focused=!1)}),0),n&&e.preventDefault()},addItem(e,t,n){if(t&&t.trim().length){let i=this.modelValue?[...this.modelValue]:[];(this.allowDuplicate||-1===i.indexOf(t))&&(i.push(t),this.updateModel(e,i,n))}},removeItem(e,t){if(this.disabled)return;let n=[...this.modelValue];const i=n.splice(t,1);this.focusedIndex=null,this.$refs.input.focus(),this.$emit("update:modelValue",n),this.$emit("remove",{originalEvent:e,value:i})}},computed:{maxedOut(){return this.max&&this.modelValue&&this.max===this.modelValue.length},containerClass(){return["p-chips p-component p-inputwrapper",{"p-disabled":this.disabled,"p-focus":this.focused,"p-inputwrapper-filled":this.modelValue&&this.modelValue.length||this.inputValue&&this.inputValue.length,"p-inputwrapper-focus":this.focused}]},focusedOptionId(){return null!==this.focusedIndex?`${this.id}_chips_item_${this.focusedIndex}`:null}}};const p=["aria-labelledby","aria-label","aria-activedescendant"],h=["id","aria-label","aria-setsize","aria-posinset"],c={class:"p-chips-token-label"},f=["onClick"],m={class:"p-chips-input-token",role:"option"},y=["id","disabled","placeholder"];!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===n&&i.firstChild?i.insertBefore(l,i.firstChild):i.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}("\n.p-chips {\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: flex;\n    align-items: center;\n    flex-wrap: wrap;\n}\n.p-chips-token {\n    cursor: default;\n    display: inline-flex;\n    align-items: center;\n    flex: 0 0 auto;\n}\n.p-chips-input-token {\n    flex: 1 1 auto;\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    box-shadow: none;\n    border-radius: 0;\n    width: 100%;\n}\n.p-fluid .p-chips {\n    display: flex;\n}\n"),r.render=function(e,r,x,g,b,I){return t(),n("div",{class:i(I.containerClass)},[l("ul",{ref:"container",class:"p-inputtext p-chips-multiple-container",tabindex:"-1",role:"listbox","aria-orientation":"horizontal","aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,"aria-activedescendant":b.focused?I.focusedOptionId:void 0,onClick:r[5]||(r[5]=e=>I.onWrapperClick()),onFocus:r[6]||(r[6]=(...e)=>I.onContainerFocus&&I.onContainerFocus(...e)),onBlur:r[7]||(r[7]=(...e)=>I.onContainerBlur&&I.onContainerBlur(...e)),onKeydown:r[8]||(r[8]=(...e)=>I.onContainerKeyDown&&I.onContainerKeyDown(...e))},[(t(!0),n(a,null,s(x.modelValue,((a,s)=>(t(),n("li",{key:`${s}_${a}`,id:b.id+"_chips_item_"+s,role:"option",class:i(["p-chips-token",{"p-focus":b.focusedIndex===s}]),"aria-label":a,"aria-selected":!0,"aria-setsize":x.modelValue.length,"aria-posinset":s+1},[o(e.$slots,"chip",{value:a},(()=>[l("span",c,u(a),1)])),l("span",{class:i(["p-chips-token-icon",x.removeTokenIcon]),onClick:e=>I.removeItem(e,s),"aria-hidden":"true"},null,10,f)],10,h)))),128)),l("li",m,[l("input",d({ref:"input",id:x.inputId,type:"text",class:x.inputClass,style:x.inputStyle,disabled:x.disabled||I.maxedOut,placeholder:x.placeholder,onFocus:r[0]||(r[0]=e=>I.onFocus(e)),onBlur:r[1]||(r[1]=e=>I.onBlur(e)),onInput:r[2]||(r[2]=(...e)=>I.onInput&&I.onInput(...e)),onKeydown:r[3]||(r[3]=e=>I.onKeyDown(e)),onPaste:r[4]||(r[4]=e=>I.onPaste(e))},x.inputProps),null,16,y)])],40,p)],2)};export{r as default};