primevue/chips/chips.cjs.min.js

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

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