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/icons/timescircle";import{UniqueComponentId as n}from"primevue/utils";import t from"primevue/basecomponent";import{useStyle as o}from"primevue/usestyle";import{openBlock as i,createElementBlock as r,mergeProps as a,createElementVNode as l,Fragment as u,renderList as s,renderSlot as c,normalizeClass as p,toDisplayString as d,createBlock as f,resolveDynamicComponent as h}from"vue";var m=o("\n.p-chips {\n    display: inline-flex;\n}\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\n.p-chips-token {\n    cursor: default;\n    display: inline-flex;\n    align-items: center;\n    flex: 0 0 auto;\n}\n\n.p-chips-input-token {\n    flex: 1 1 auto;\n    display: inline-flex;\n}\n\n.p-chips-token-icon {\n    cursor: pointer;\n}\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\n.p-fluid .p-chips {\n    display: flex;\n}\n",{name:"chips",manual:!0});function y(e){return g(e)||x(e)||v(e)||b()}function b(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function v(e,n){if(e){if("string"==typeof e)return I(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);return"Object"===t&&e.constructor&&(t=e.constructor.name),"Map"===t||"Set"===t?Array.from(e):"Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t)?I(e,n):void 0}}function x(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function g(e){if(Array.isArray(e))return I(e)}function I(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,o=new Array(n);t<n;t++)o[t]=e[t];return o}var k={name:"Chips",extends:{name:"BaseChips",extends:t,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}},css:{classes:{root:function(e){var n=e.instance,t=e.props;return["p-chips p-component p-inputwrapper",{"p-disabled":t.disabled,"p-focus":n.focused,"p-inputwrapper-filled":t.modelValue&&t.modelValue.length||n.inputValue&&n.inputValue.length,"p-inputwrapper-focus":n.focused}]},container:"p-inputtext p-chips-multiple-container",token:function(e){return["p-chips-token",{"p-focus":e.state.focusedIndex===e.index}]},label:"p-chips-token-label",removeTokenIcon:"p-chips-token-icon",inputToken:"p-chips-input-token"},loadStyle:m.load},provide:function(){return{$parentInstance:this}}},emits:["update:modelValue","add","remove","focus","blur"],data:function(){return{id:n(),inputValue:null,focused:!1,focusedIndex:null}},methods:{onWrapperClick:function(){this.$refs.input.focus()},onInput:function(e){this.inputValue=e.target.value,this.focusedIndex=null},onFocus:function(e){this.focused=!0,this.focusedIndex=null,this.$emit("focus",e)},onBlur:function(e){this.focused=!1,this.focusedIndex=null,this.addOnBlur&&this.addItem(e,e.target.value,!1),this.$emit("blur",e)},onKeyDown:function(e){var n=e.target.value;switch(e.code){case"Backspace":0===n.length&&this.modelValue&&this.modelValue.length>0&&this.removeItem(e,null!==this.focusedIndex?this.focusedIndex:this.modelValue.length-1);break;case"Enter":n&&n.trim().length&&!this.maxedOut&&this.addItem(e,n,!0);break;case"ArrowLeft":0===n.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,n,!0)}},onPaste:function(e){var n=this;if(this.separator){var t=(e.clipboardData||window.clipboardData).getData("Text");if(t){var o=this.modelValue||[],i=t.split(this.separator);i=i.filter((function(e){return n.allowDuplicate||-1===o.indexOf(e)})),o=[].concat(y(o),y(i)),this.updateModel(e,o,!0)}}},onContainerFocus:function(){this.focused=!0},onContainerBlur:function(){this.focusedIndex=-1,this.focused=!1},onContainerKeyDown:function(e){switch(e.code){case"ArrowLeft":this.onArrowLeftKeyOn(e);break;case"ArrowRight":this.onArrowRightKeyOn(e);break;case"Backspace":this.onBackspaceKeyOn(e)}},onArrowLeftKeyOn:function(){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:function(){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:function(e){null!==this.focusedIndex&&this.removeItem(e,this.focusedIndex)},updateModel:function(e,n,t){var o=this;this.$emit("update:modelValue",n),this.$emit("add",{originalEvent:e,value:n}),this.$refs.input.value="",this.inputValue="",setTimeout((function(){o.maxedOut&&(o.focused=!1)}),0),t&&e.preventDefault()},addItem:function(e,n,t){if(n&&n.trim().length){var o=this.modelValue?y(this.modelValue):[];(this.allowDuplicate||-1===o.indexOf(n))&&(o.push(n),this.updateModel(e,o,t))}},removeItem:function(e,n){if(!this.disabled){var t=y(this.modelValue),o=t.splice(n,1);this.focusedIndex=null,this.$refs.input.focus(),this.$emit("update:modelValue",t),this.$emit("remove",{originalEvent:e,value:o})}}},computed:{maxedOut:function(){return this.max&&this.modelValue&&this.max===this.modelValue.length},focusedOptionId:function(){return null!==this.focusedIndex?"".concat(this.id,"_chips_item_").concat(this.focusedIndex):null}},components:{TimesCircleIcon:e}};function w(e){return w="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},w(e)}function O(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);n&&(o=o.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,o)}return t}function V(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?O(Object(t),!0).forEach((function(n){S(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):O(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function S(e,n,t){return(n=C(n))in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function C(e){var n=j(e,"string");return"symbol"===w(n)?n:String(n)}function j(e,n){if("object"!==w(e)||null===e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var o=t.call(e,n||"default");if("object"!==w(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}var B=["aria-labelledby","aria-label","aria-activedescendant"],P=["id","aria-label","aria-setsize","aria-posinset","data-p-focused"],A=["id","disabled","placeholder"];k.render=function(e,n,t,o,m,y){return i(),r("div",a({class:e.cx("root")},e.ptm("root"),{"data-pc-name":"chips"}),[l("ul",a({ref:"container",class:e.cx("container"),tabindex:"-1",role:"listbox","aria-orientation":"horizontal","aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,"aria-activedescendant":m.focused?y.focusedOptionId:void 0,onClick:n[5]||(n[5]=function(e){return y.onWrapperClick()}),onFocus:n[6]||(n[6]=function(){return y.onContainerFocus&&y.onContainerFocus.apply(y,arguments)}),onBlur:n[7]||(n[7]=function(){return y.onContainerBlur&&y.onContainerBlur.apply(y,arguments)}),onKeydown:n[8]||(n[8]=function(){return y.onContainerKeyDown&&y.onContainerKeyDown.apply(y,arguments)})},e.ptm("container")),[(i(!0),r(u,null,s(e.modelValue,(function(n,t){return i(),r("li",a({key:"".concat(t,"_").concat(n),id:m.id+"_chips_item_"+t,role:"option",class:e.cx("token",{index:t}),"aria-label":n,"aria-selected":!0,"aria-setsize":e.modelValue.length,"aria-posinset":t+1},e.ptm("token"),{"data-p-focused":m.focusedIndex===t}),[c(e.$slots,"chip",{class:p(e.cx("label")),value:n},(function(){return[l("span",a({class:e.cx("label")},e.ptm("label")),d(n),17)]})),c(e.$slots,"removetokenicon",{class:p(e.cx("removeTokenIcon")),index:t,onClick:function(e){return y.removeItem(e,t)}},(function(){return[(i(),f(h(e.removeTokenIcon?"span":"TimesCircleIcon"),a({class:[e.cx("removeTokenIcon"),e.removeTokenIcon],onClick:function(e){return y.removeItem(e,t)},"aria-hidden":"true"},e.ptm("removeTokenIcon")),null,16,["class","onClick"]))]}))],16,P)})),128)),l("li",a({class:e.cx("inputToken"),role:"option"},e.ptm("inputToken")),[l("input",a({ref:"input",id:e.inputId,type:"text",class:e.inputClass,style:e.inputStyle,disabled:e.disabled||y.maxedOut,placeholder:e.placeholder,onFocus:n[0]||(n[0]=function(e){return y.onFocus(e)}),onBlur:n[1]||(n[1]=function(e){return y.onBlur(e)}),onInput:n[2]||(n[2]=function(){return y.onInput&&y.onInput.apply(y,arguments)}),onKeydown:n[3]||(n[3]=function(e){return y.onKeyDown(e)}),onPaste:n[4]||(n[4]=function(e){return y.onPaste(e)})},V(V({},e.inputProps),e.ptm("input"))),null,16,A)],16)],16,B)],16)};export{k as default};