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 e from"primevue/basecomponent";import t from"primevue/icons/timescircle";import{UniqueComponentId as n}from"primevue/utils";import{openBlock as i,createElementBlock as l,mergeProps as o,createElementVNode as a,Fragment as s,renderList as u,renderSlot as d,toDisplayString as r,createBlock as p,resolveDynamicComponent as c}from"vue";var h={name:"Chips",extends:e,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,Object],default:null},inputStyle:{type:Object,default:null},inputProps:{type:null,default:null},removeTokenIcon:{type:String,default:void 0},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},data:()=>({id:n(),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}},components:{TimesCircleIcon:t}};const m=["aria-labelledby","aria-label","aria-activedescendant"],f=["id","aria-label","aria-setsize","aria-posinset"],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"),h.render=function(e,t,n,h,x,I){return i(),l("div",o({class:I.containerClass},e.ptm("root")),[a("ul",o({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":x.focused?I.focusedOptionId:void 0,onClick:t[5]||(t[5]=e=>I.onWrapperClick()),onFocus:t[6]||(t[6]=(...e)=>I.onContainerFocus&&I.onContainerFocus(...e)),onBlur:t[7]||(t[7]=(...e)=>I.onContainerBlur&&I.onContainerBlur(...e)),onKeydown:t[8]||(t[8]=(...e)=>I.onContainerKeyDown&&I.onContainerKeyDown(...e))},e.ptm("container")),[(i(!0),l(s,null,u(n.modelValue,((t,s)=>(i(),l("li",o({key:`${s}_${t}`,id:x.id+"_chips_item_"+s,role:"option",class:["p-chips-token",{"p-focus":x.focusedIndex===s}],"aria-label":t,"aria-selected":!0,"aria-setsize":n.modelValue.length,"aria-posinset":s+1},e.ptm("token")),[d(e.$slots,"chip",{value:t},(()=>[a("span",o({class:"p-chips-token-label"},e.ptm("label")),r(t),17)])),d(e.$slots,"removetokenicon",{onClick:e=>I.removeItem(e,s)},(()=>[(i(),p(c(n.removeTokenIcon?"span":"TimesCircleIcon"),o({class:["p-chips-token-icon",n.removeTokenIcon],onClick:e=>I.removeItem(e,s),"aria-hidden":"true"},e.ptm("removeTokenIcon")),null,16,["class","onClick"]))]))],16,f)))),128)),a("li",o({class:"p-chips-input-token",role:"option"},e.ptm("inputToken")),[a("input",o({ref:"input",id:n.inputId,type:"text",class:n.inputClass,style:n.inputStyle,disabled:n.disabled||I.maxedOut,placeholder:n.placeholder,onFocus:t[0]||(t[0]=e=>I.onFocus(e)),onBlur:t[1]||(t[1]=e=>I.onBlur(e)),onInput:t[2]||(t[2]=(...e)=>I.onInput&&I.onInput(...e)),onKeydown:t[3]||(t[3]=e=>I.onKeyDown(e)),onPaste:t[4]||(t[4]=e=>I.onPaste(e))},{...n.inputProps,...e.ptm("input")}),null,16,y)],16)],16,m)],16)};export{h as default};