primevue 3.16.2 → 3.17.0

package/chips/Chips.vue

@@ -1,24 +1,58 @@
 <template>
     <div :class="containerClass">
-        <ul ref="container" class="p-inputtext p-chips-multiple-container" tabindex="-1" role="listbox" aria-orientation="horizontal" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" :aria-activedescendant="focused ? focusedOptionId : undefined"
-            @click="onWrapperClick()" @focus="onContainerFocus" @blur="onContainerBlur" @keydown="onContainerKeyDown">
-            <li v-for="(val,i) of modelValue" :key="`${i}_${val}`" :id="id + '_chips_item_' + i" role="option" :class="['p-chips-token', {'p-focus': focusedIndex === i}]"
-                :aria-label="val" :aria-selected="true" :aria-setsize="modelValue.length" :aria-posinset="i + 1">
+        <ul
+            ref="container"
+            class="p-inputtext p-chips-multiple-container"
+            tabindex="-1"
+            role="listbox"
+            aria-orientation="horizontal"
+            :aria-labelledby="ariaLabelledby"
+            :aria-label="ariaLabel"
+            :aria-activedescendant="focused ? focusedOptionId : undefined"
+            @click="onWrapperClick()"
+            @focus="onContainerFocus"
+            @blur="onContainerBlur"
+            @keydown="onContainerKeyDown"
+        >
+            <li
+                v-for="(val, i) of modelValue"
+                :key="`${i}_${val}`"
+                :id="id + '_chips_item_' + i"
+                role="option"
+                :class="['p-chips-token', { 'p-focus': focusedIndex === i }]"
+                :aria-label="val"
+                :aria-selected="true"
+                :aria-setsize="modelValue.length"
+                :aria-posinset="i + 1"
+            >
                 <slot name="chip" :value="val">
-                    <span class="p-chips-token-label">{{val}}</span>
+                    <span class="p-chips-token-label">{{ val }}</span>
                 </slot>
                 <span class="p-chips-token-icon pi pi-times-circle" @click="removeItem($event, i)" aria-hidden="true"></span>
             </li>
             <li class="p-chips-input-token" role="option">
-                <input ref="input" type="text" :id="inputId" :class="inputClass" :style="inputStyle" :disabled="disabled || maxedOut" :placeholder="placeholder"
-                    @focus="onFocus($event)" @blur="onBlur($event)" @input="onInput" @keydown="onKeyDown($event)" @paste="onPaste($event)" v-bind="inputProps">
+                <input
+                    ref="input"
+                    :id="inputId"
+                    type="text"
+                    :class="inputClass"
+                    :style="inputStyle"
+                    :disabled="disabled || maxedOut"
+                    :placeholder="placeholder"
+                    @focus="onFocus($event)"
+                    @blur="onBlur($event)"
+                    @input="onInput"
+                    @keydown="onKeyDown($event)"
+                    @paste="onPaste($event)"
+                    v-bind="inputProps"
+                />
             </li>
         </ul>
     </div>
 </template>
 
 <script>
-import {UniqueComponentId} from 'primevue/utils';
+import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'Chips',
@@ -48,17 +82,29 @@ export default {
             type: String,
             default: null
         },
-        inputId: null,
-        inputClass: null,
-        inputStyle: null,
-        inputProps: null,
         disabled: {
             type: Boolean,
             default: false
         },
+        inputId: {
+            type: String,
+            default: null
+        },
+        inputClass: {
+            type: String,
+            default: null
+        },
+        inputStyle: {
+            type: null,
+            default: null
+        },
+        inputProps: {
+            type: null,
+            default: null
+        },
         'aria-labelledby': {
             type: String,
-			default: null
+            default: null
         },
         'aria-label': {
             type: String,
@@ -89,39 +135,43 @@ export default {
         onBlur(event) {
             this.focused = false;
             this.focusedIndex = null;
+
             if (this.addOnBlur) {
                 this.addItem(event, event.target.value, false);
             }
+
             this.$emit('blur', event);
         },
         onKeyDown(event) {
             const inputValue = event.target.value;
 
-            switch(event.code) {
+            switch (event.code) {
                 case 'Backspace':
                     if (inputValue.length === 0 && this.modelValue && this.modelValue.length > 0) {
                         if (this.focusedIndex !== null) {
                             this.removeItem(event, this.focusedIndex);
-                        }
-                        else this.removeItem(event, this.modelValue.length - 1);
+                        } else this.removeItem(event, this.modelValue.length - 1);
                     }
-                break;
+
+                    break;
 
                 case 'Enter':
                     if (inputValue && inputValue.trim().length && !this.maxedOut) {
                         this.addItem(event, inputValue, true);
                     }
-                break;
+
+                    break;
 
                 case 'ArrowLeft':
                     if (inputValue.length === 0 && this.modelValue && this.modelValue.length > 0) {
                         this.$refs.container.focus();
                     }
-                break;
+
+                    break;
 
                 case 'ArrowRight':
                     event.stopPropagation();
-                break;
+                    break;
 
                 default:
                     if (this.separator) {
@@ -129,16 +179,19 @@ export default {
                             this.addItem(event, inputValue, true);
                         }
                     }
-                break;
+
+                    break;
             }
         },
         onPaste(event) {
             if (this.separator) {
                 let pastedData = (event.clipboardData || window['clipboardData']).getData('Text');
+
                 if (pastedData) {
                     let value = this.modelValue || [];
                     let pastedValues = pastedData.split(this.separator);
-                    pastedValues = pastedValues.filter(val => (this.allowDuplicate || value.indexOf(val) === -1));
+
+                    pastedValues = pastedValues.filter((val) => this.allowDuplicate || value.indexOf(val) === -1);
                     value = [...value, ...pastedValues];
                     this.updateModel(event, value, true);
                 }
@@ -177,12 +230,10 @@ export default {
         },
         onArrowRightKeyOn() {
             if (this.inputValue.length === 0 && this.modelValue && this.modelValue.length > 0) {
-
                 if (this.focusedIndex === this.modelValue.length - 1) {
                     this.focusedIndex = null;
                     this.$refs.input.focus();
-                }
-                else {
+                } else {
                     this.focusedIndex++;
                 }
             }
@@ -207,7 +258,8 @@ export default {
         },
         addItem(event, item, preventDefault) {
             if (item && item.trim().length) {
-                let value = this.modelValue ? [...this.modelValue]: [];
+                let value = this.modelValue ? [...this.modelValue] : [];
+
                 if (this.allowDuplicate || value.indexOf(item) === -1) {
                     value.push(item);
                     this.updateModel(event, value, preventDefault);
@@ -221,6 +273,7 @@ export default {
 
             let values = [...this.modelValue];
             const removedItem = values.splice(index, 1);
+
             this.focusedIndex = null;
             this.$refs.input.focus();
             this.$emit('update:modelValue', values);
@@ -235,18 +288,21 @@ export default {
             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
-            }];
+            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 this.focusedIndex !== null ? `${this.id}_chips_item_${this.focusedIndex}` : null;
         }
     }
-}
+};
 </script>
 
 <style>

package/chips/chips.cjs.js

@@ -31,17 +31,29 @@ var script = {
             type: String,
             default: null
         },
-        inputId: null,
-        inputClass: null,
-        inputStyle: null,
-        inputProps: null,
         disabled: {
             type: Boolean,
             default: false
         },
+        inputId: {
+            type: String,
+            default: null
+        },
+        inputClass: {
+            type: String,
+            default: null
+        },
+        inputStyle: {
+            type: null,
+            default: null
+        },
+        inputProps: {
+            type: null,
+            default: null
+        },
         'aria-labelledby': {
             type: String,
-			default: null
+            default: null
         },
         'aria-label': {
             type: String,
@@ -72,39 +84,43 @@ var script = {
         onBlur(event) {
             this.focused = false;
             this.focusedIndex = null;
+
             if (this.addOnBlur) {
                 this.addItem(event, event.target.value, false);
             }
+
             this.$emit('blur', event);
         },
         onKeyDown(event) {
             const inputValue = event.target.value;
 
-            switch(event.code) {
+            switch (event.code) {
                 case 'Backspace':
                     if (inputValue.length === 0 && this.modelValue && this.modelValue.length > 0) {
                         if (this.focusedIndex !== null) {
                             this.removeItem(event, this.focusedIndex);
-                        }
-                        else this.removeItem(event, this.modelValue.length - 1);
+                        } else this.removeItem(event, this.modelValue.length - 1);
                     }
-                break;
+
+                    break;
 
                 case 'Enter':
                     if (inputValue && inputValue.trim().length && !this.maxedOut) {
                         this.addItem(event, inputValue, true);
                     }
-                break;
+
+                    break;
 
                 case 'ArrowLeft':
                     if (inputValue.length === 0 && this.modelValue && this.modelValue.length > 0) {
                         this.$refs.container.focus();
                     }
-                break;
+
+                    break;
 
                 case 'ArrowRight':
                     event.stopPropagation();
-                break;
+                    break;
 
                 default:
                     if (this.separator) {
@@ -112,16 +128,19 @@ var script = {
                             this.addItem(event, inputValue, true);
                         }
                     }
-                break;
+
+                    break;
             }
         },
         onPaste(event) {
             if (this.separator) {
                 let pastedData = (event.clipboardData || window['clipboardData']).getData('Text');
+
                 if (pastedData) {
                     let value = this.modelValue || [];
                     let pastedValues = pastedData.split(this.separator);
-                    pastedValues = pastedValues.filter(val => (this.allowDuplicate || value.indexOf(val) === -1));
+
+                    pastedValues = pastedValues.filter((val) => this.allowDuplicate || value.indexOf(val) === -1);
                     value = [...value, ...pastedValues];
                     this.updateModel(event, value, true);
                 }
@@ -157,12 +176,10 @@ var script = {
         },
         onArrowRightKeyOn() {
             if (this.inputValue.length === 0 && this.modelValue && this.modelValue.length > 0) {
-
                 if (this.focusedIndex === this.modelValue.length - 1) {
                     this.focusedIndex = null;
                     this.$refs.input.focus();
-                }
-                else {
+                } else {
                     this.focusedIndex++;
                 }
             }
@@ -187,7 +204,8 @@ var script = {
         },
         addItem(event, item, preventDefault) {
             if (item && item.trim().length) {
-                let value = this.modelValue ? [...this.modelValue]: [];
+                let value = this.modelValue ? [...this.modelValue] : [];
+
                 if (this.allowDuplicate || value.indexOf(item) === -1) {
                     value.push(item);
                     this.updateModel(event, value, preventDefault);
@@ -201,6 +219,7 @@ var script = {
 
             let values = [...this.modelValue];
             const removedItem = values.splice(index, 1);
+
             this.focusedIndex = null;
             this.$refs.input.focus();
             this.$emit('update:modelValue', values);
@@ -215,12 +234,15 @@ var script = {
             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
-            }];
+            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 this.focusedIndex !== null ? `${this.id}_chips_item_${this.focusedIndex}` : null;
@@ -261,7 +283,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           key: `${i}_${val}`,
           id: $data.id + '_chips_item_' + i,
           role: "option",
-          class: vue.normalizeClass(['p-chips-token', {'p-focus': $data.focusedIndex === i}]),
+          class: vue.normalizeClass(['p-chips-token', { 'p-focus': $data.focusedIndex === i }]),
           "aria-label": val,
           "aria-selected": true,
           "aria-setsize": $props.modelValue.length,
@@ -280,8 +302,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       vue.createElementVNode("li", _hoisted_5, [
         vue.createElementVNode("input", vue.mergeProps({
           ref: "input",
-          type: "text",
           id: $props.inputId,
+          type: "text",
           class: $props.inputClass,
           style: $props.inputStyle,
           disabled: $props.disabled || $options.maxedOut,

package/chips/chips.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("primevue/utils"),t=require("vue"),n={name:"Chips",emits:["update:modelValue","add","remove","focus","blur"],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},placeholder:{type:String,default:null},inputId:null,inputClass:null,inputStyle:null,inputProps:null,disabled:{type:Boolean,default:!1},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},data:()=>({id:e.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&&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="",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}}};const l=["aria-labelledby","aria-label","aria-activedescendant"],i=["id","aria-label","aria-setsize","aria-posinset"],a={class:"p-chips-token-label"},s=["onClick"],o={class:"p-chips-input-token",role:"option"},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: -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"),n.render=function(e,n,u,r,p,c){return t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(c.containerClass)},[t.createElementVNode("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":p.focused?c.focusedOptionId:void 0,onClick:n[5]||(n[5]=e=>c.onWrapperClick()),onFocus:n[6]||(n[6]=(...e)=>c.onContainerFocus&&c.onContainerFocus(...e)),onBlur:n[7]||(n[7]=(...e)=>c.onContainerBlur&&c.onContainerBlur(...e)),onKeydown:n[8]||(n[8]=(...e)=>c.onContainerKeyDown&&c.onContainerKeyDown(...e))},[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(u.modelValue,((n,l)=>(t.openBlock(),t.createElementBlock("li",{key:`${l}_${n}`,id:p.id+"_chips_item_"+l,role:"option",class:t.normalizeClass(["p-chips-token",{"p-focus":p.focusedIndex===l}]),"aria-label":n,"aria-selected":!0,"aria-setsize":u.modelValue.length,"aria-posinset":l+1},[t.renderSlot(e.$slots,"chip",{value:n},(()=>[t.createElementVNode("span",a,t.toDisplayString(n),1)])),t.createElementVNode("span",{class:"p-chips-token-icon pi pi-times-circle",onClick:e=>c.removeItem(e,l),"aria-hidden":"true"},null,8,s)],10,i)))),128)),t.createElementVNode("li",o,[t.createElementVNode("input",t.mergeProps({ref:"input",type:"text",id:u.inputId,class:u.inputClass,style:u.inputStyle,disabled:u.disabled||c.maxedOut,placeholder:u.placeholder,onFocus:n[0]||(n[0]=e=>c.onFocus(e)),onBlur:n[1]||(n[1]=e=>c.onBlur(e)),onInput:n[2]||(n[2]=(...e)=>c.onInput&&c.onInput(...e)),onKeydown:n[3]||(n[3]=e=>c.onKeyDown(e)),onPaste:n[4]||(n[4]=e=>c.onPaste(e))},u.inputProps),null,16,d)])],40,l)],2)},module.exports=n;
+"use strict";var e=require("primevue/utils"),t=require("vue"),n={name:"Chips",emits:["update:modelValue","add","remove","focus","blur"],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},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},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},data:()=>({id:e.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&&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="",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}}};const l=["aria-labelledby","aria-label","aria-activedescendant"],i=["id","aria-label","aria-setsize","aria-posinset"],a={class:"p-chips-token-label"},s=["onClick"],o={class:"p-chips-input-token",role:"option"},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: -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"),n.render=function(e,n,u,r,p,c){return t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(c.containerClass)},[t.createElementVNode("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":p.focused?c.focusedOptionId:void 0,onClick:n[5]||(n[5]=e=>c.onWrapperClick()),onFocus:n[6]||(n[6]=(...e)=>c.onContainerFocus&&c.onContainerFocus(...e)),onBlur:n[7]||(n[7]=(...e)=>c.onContainerBlur&&c.onContainerBlur(...e)),onKeydown:n[8]||(n[8]=(...e)=>c.onContainerKeyDown&&c.onContainerKeyDown(...e))},[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(u.modelValue,((n,l)=>(t.openBlock(),t.createElementBlock("li",{key:`${l}_${n}`,id:p.id+"_chips_item_"+l,role:"option",class:t.normalizeClass(["p-chips-token",{"p-focus":p.focusedIndex===l}]),"aria-label":n,"aria-selected":!0,"aria-setsize":u.modelValue.length,"aria-posinset":l+1},[t.renderSlot(e.$slots,"chip",{value:n},(()=>[t.createElementVNode("span",a,t.toDisplayString(n),1)])),t.createElementVNode("span",{class:"p-chips-token-icon pi pi-times-circle",onClick:e=>c.removeItem(e,l),"aria-hidden":"true"},null,8,s)],10,i)))),128)),t.createElementVNode("li",o,[t.createElementVNode("input",t.mergeProps({ref:"input",id:u.inputId,type:"text",class:u.inputClass,style:u.inputStyle,disabled:u.disabled||c.maxedOut,placeholder:u.placeholder,onFocus:n[0]||(n[0]=e=>c.onFocus(e)),onBlur:n[1]||(n[1]=e=>c.onBlur(e)),onInput:n[2]||(n[2]=(...e)=>c.onInput&&c.onInput(...e)),onKeydown:n[3]||(n[3]=e=>c.onKeyDown(e)),onPaste:n[4]||(n[4]=e=>c.onPaste(e))},u.inputProps),null,16,d)])],40,l)],2)},module.exports=n;

package/chips/chips.esm.js

@@ -29,17 +29,29 @@ var script = {
             type: String,
             default: null
         },
-        inputId: null,
-        inputClass: null,
-        inputStyle: null,
-        inputProps: null,
         disabled: {
             type: Boolean,
             default: false
         },
+        inputId: {
+            type: String,
+            default: null
+        },
+        inputClass: {
+            type: String,
+            default: null
+        },
+        inputStyle: {
+            type: null,
+            default: null
+        },
+        inputProps: {
+            type: null,
+            default: null
+        },
         'aria-labelledby': {
             type: String,
-			default: null
+            default: null
         },
         'aria-label': {
             type: String,
@@ -70,39 +82,43 @@ var script = {
         onBlur(event) {
             this.focused = false;
             this.focusedIndex = null;
+
             if (this.addOnBlur) {
                 this.addItem(event, event.target.value, false);
             }
+
             this.$emit('blur', event);
         },
         onKeyDown(event) {
             const inputValue = event.target.value;
 
-            switch(event.code) {
+            switch (event.code) {
                 case 'Backspace':
                     if (inputValue.length === 0 && this.modelValue && this.modelValue.length > 0) {
                         if (this.focusedIndex !== null) {
                             this.removeItem(event, this.focusedIndex);
-                        }
-                        else this.removeItem(event, this.modelValue.length - 1);
+                        } else this.removeItem(event, this.modelValue.length - 1);
                     }
-                break;
+
+                    break;
 
                 case 'Enter':
                     if (inputValue && inputValue.trim().length && !this.maxedOut) {
                         this.addItem(event, inputValue, true);
                     }
-                break;
+
+                    break;
 
                 case 'ArrowLeft':
                     if (inputValue.length === 0 && this.modelValue && this.modelValue.length > 0) {
                         this.$refs.container.focus();
                     }
-                break;
+
+                    break;
 
                 case 'ArrowRight':
                     event.stopPropagation();
-                break;
+                    break;
 
                 default:
                     if (this.separator) {
@@ -110,16 +126,19 @@ var script = {
                             this.addItem(event, inputValue, true);
                         }
                     }
-                break;
+
+                    break;
             }
         },
         onPaste(event) {
             if (this.separator) {
                 let pastedData = (event.clipboardData || window['clipboardData']).getData('Text');
+
                 if (pastedData) {
                     let value = this.modelValue || [];
                     let pastedValues = pastedData.split(this.separator);
-                    pastedValues = pastedValues.filter(val => (this.allowDuplicate || value.indexOf(val) === -1));
+
+                    pastedValues = pastedValues.filter((val) => this.allowDuplicate || value.indexOf(val) === -1);
                     value = [...value, ...pastedValues];
                     this.updateModel(event, value, true);
                 }
@@ -155,12 +174,10 @@ var script = {
         },
         onArrowRightKeyOn() {
             if (this.inputValue.length === 0 && this.modelValue && this.modelValue.length > 0) {
-
                 if (this.focusedIndex === this.modelValue.length - 1) {
                     this.focusedIndex = null;
                     this.$refs.input.focus();
-                }
-                else {
+                } else {
                     this.focusedIndex++;
                 }
             }
@@ -185,7 +202,8 @@ var script = {
         },
         addItem(event, item, preventDefault) {
             if (item && item.trim().length) {
-                let value = this.modelValue ? [...this.modelValue]: [];
+                let value = this.modelValue ? [...this.modelValue] : [];
+
                 if (this.allowDuplicate || value.indexOf(item) === -1) {
                     value.push(item);
                     this.updateModel(event, value, preventDefault);
@@ -199,6 +217,7 @@ var script = {
 
             let values = [...this.modelValue];
             const removedItem = values.splice(index, 1);
+
             this.focusedIndex = null;
             this.$refs.input.focus();
             this.$emit('update:modelValue', values);
@@ -213,12 +232,15 @@ var script = {
             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
-            }];
+            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 this.focusedIndex !== null ? `${this.id}_chips_item_${this.focusedIndex}` : null;
@@ -259,7 +281,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           key: `${i}_${val}`,
           id: $data.id + '_chips_item_' + i,
           role: "option",
-          class: normalizeClass(['p-chips-token', {'p-focus': $data.focusedIndex === i}]),
+          class: normalizeClass(['p-chips-token', { 'p-focus': $data.focusedIndex === i }]),
           "aria-label": val,
           "aria-selected": true,
           "aria-setsize": $props.modelValue.length,
@@ -278,8 +300,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       createElementVNode("li", _hoisted_5, [
         createElementVNode("input", mergeProps({
           ref: "input",
-          type: "text",
           id: $props.inputId,
+          type: "text",
           class: $props.inputClass,
           style: $props.inputStyle,
           disabled: $props.disabled || $options.maxedOut,