primevue 3.47.2 → 3.48.1

package/chip/style/chipstyle.esm.min.js

@@ -1 +1 @@
-import n from"primevue/base/style";var e=n.extend({name:"chip",css:"\n@layer primevue {\n    .p-chip {\n        display: inline-flex;\n        align-items: center;\n    }\n\n    .p-chip-text {\n        line-height: 1.5;\n    }\n\n    .p-chip-icon.pi {\n        line-height: 1.5;\n    }\n\n    .p-chip-remove-icon {\n        line-height: 1.5;\n        cursor: pointer;\n    }\n\n    .p-chip img {\n        border-radius: 50%;\n    }\n}\n",classes:{root:function(n){return["p-chip p-component",{"p-chip-image":null!=n.props.image}]},icon:"p-chip-icon",label:"p-chip-text",removeIcon:"p-chip-remove-icon"}});export{e as default};
+import e from"primevue/base/style";var p=e.extend({name:"chip",classes:{root:function(e){return["p-chip p-component",{"p-chip-image":null!=e.props.image}]},icon:"p-chip-icon",label:"p-chip-text",removeIcon:"p-chip-remove-icon"}});export{p as default};

package/chip/style/chipstyle.js

@@ -7,7 +7,6 @@ this.primevue.chip.style = (function (BaseStyle) {
 
     var BaseStyle__default = /*#__PURE__*/_interopDefaultLegacy(BaseStyle);
 
-    var css = "\n@layer primevue {\n    .p-chip {\n        display: inline-flex;\n        align-items: center;\n    }\n\n    .p-chip-text {\n        line-height: 1.5;\n    }\n\n    .p-chip-icon.pi {\n        line-height: 1.5;\n    }\n\n    .p-chip-remove-icon {\n        line-height: 1.5;\n        cursor: pointer;\n    }\n\n    .p-chip img {\n        border-radius: 50%;\n    }\n}\n";
     var classes = {
       root: function root(_ref) {
         var props = _ref.props;
@@ -21,7 +20,6 @@ this.primevue.chip.style = (function (BaseStyle) {
     };
     var ChipStyle = BaseStyle__default["default"].extend({
       name: 'chip',
-      css: css,
       classes: classes
     });
 

package/chip/style/chipstyle.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.chip=this.primevue.chip||{},this.primevue.chip.style=function(e){"use strict";function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}return i(primevue.base.style).default.extend({name:"chip",css:"\n@layer primevue {\n    .p-chip {\n        display: inline-flex;\n        align-items: center;\n    }\n\n    .p-chip-text {\n        line-height: 1.5;\n    }\n\n    .p-chip-icon.pi {\n        line-height: 1.5;\n    }\n\n    .p-chip-remove-icon {\n        line-height: 1.5;\n        cursor: pointer;\n    }\n\n    .p-chip img {\n        border-radius: 50%;\n    }\n}\n",classes:{root:function(e){return["p-chip p-component",{"p-chip-image":null!=e.props.image}]},icon:"p-chip-icon",label:"p-chip-text",removeIcon:"p-chip-remove-icon"}})}();
+this.primevue=this.primevue||{},this.primevue.chip=this.primevue.chip||{},this.primevue.chip.style=function(e){"use strict";function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}return i(primevue.base.style).default.extend({name:"chip",classes:{root:function(e){return["p-chip p-component",{"p-chip-image":null!=e.props.image}]},icon:"p-chip-icon",label:"p-chip-text",removeIcon:"p-chip-remove-icon"}})}();

package/chips/BaseChips.vue

@@ -30,6 +30,14 @@ export default {
             type: String,
             default: null
         },
+        variant: {
+            type: String,
+            default: null
+        },
+        invalid: {
+            type: Boolean,
+            default: false
+        },
         disabled: {
             type: Boolean,
             default: false

package/chips/Chips.d.ts

@@ -184,10 +184,21 @@ export interface ChipsProps {
      * @deprecated since v3.27.0. Use 'removetokenicon' slot.
      */
     removeTokenIcon?: string | undefined;
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean | undefined;
     /**
      * When present, it specifies that the element should be disabled.
+     * @defaultValue false
      */
     disabled?: boolean | undefined;
+    /**
+     * Specifies the input variant of the component.
+     * @defaultValue outlined
+     */
+    variant?: 'outlined' | 'filled' | undefined;
     /**
      * Placeholder text for the input.
      */

package/chips/Chips.vue

@@ -1,5 +1,5 @@
 <template>
-    <div :class="cx('root')" v-bind="ptm('root')" data-pc-name="chips">
+    <div :class="cx('root')" v-bind="ptm('root')">
         <ul
             ref="container"
             :class="cx('container')"
@@ -67,12 +67,20 @@ export default {
     emits: ['update:modelValue', 'add', 'remove', 'focus', 'blur'],
     data() {
         return {
-            id: UniqueComponentId(),
+            id: this.$attrs.id,
             inputValue: null,
             focused: false,
             focusedIndex: null
         };
     },
+    watch: {
+        '$attrs.id': function (newValue) {
+            this.id = newValue || UniqueComponentId();
+        }
+    },
+    mounted() {
+        this.id = this.id || UniqueComponentId();
+    },
     methods: {
         onWrapperClick() {
             this.$refs.input.focus();

package/chips/chips.cjs.js

@@ -40,6 +40,14 @@ var script$1 = {
       type: String,
       "default": null
     },
+    variant: {
+      type: String,
+      "default": null
+    },
+    invalid: {
+      type: Boolean,
+      "default": false
+    },
     disabled: {
       type: Boolean,
       "default": false
@@ -93,12 +101,20 @@ var script = {
   emits: ['update:modelValue', 'add', 'remove', 'focus', 'blur'],
   data: function data() {
     return {
-      id: utils.UniqueComponentId(),
+      id: this.$attrs.id,
       inputValue: null,
       focused: false,
       focusedIndex: null
     };
   },
+  watch: {
+    '$attrs.id': function $attrsId(newValue) {
+      this.id = newValue || utils.UniqueComponentId();
+    }
+  },
+  mounted: function mounted() {
+    this.id = this.id || utils.UniqueComponentId();
+  },
   methods: {
     onWrapperClick: function onWrapperClick() {
       this.$refs.input.focus();
@@ -275,9 +291,7 @@ var _hoisted_3 = ["id", "disabled", "placeholder"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
     "class": _ctx.cx('root')
-  }, _ctx.ptm('root'), {
-    "data-pc-name": "chips"
-  }), [vue.createElementVNode("ul", vue.mergeProps({
+  }, _ctx.ptm('root')), [vue.createElementVNode("ul", vue.mergeProps({
     ref: "container",
     "class": _ctx.cx('container'),
     tabindex: "-1",

package/chips/chips.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("primevue/icons/timescircle"),t=require("primevue/utils"),n=require("primevue/basecomponent"),o=require("primevue/chips/style"),r=require("vue");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=i(e);function l(e){return d(e)||c(e)||s(e)||u()}function u(){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 s(e,t){if(e){if("string"==typeof e)return p(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?p(e,t):void 0}}function c(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function d(e){if(Array.isArray(e))return p(e)}function p(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,o=new Array(t);n<t;n++)o[n]=e[n];return o}var f={name:"Chips",extends:{name:"BaseChips",extends:i(n).default,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},ariaLabelledby:{type:String,default:null},ariaLabel:{type:String,default:null}},style:i(o).default,provide:function(){return{$parentInstance:this}}},emits:["update:modelValue","add","remove","focus","blur"],data:function(){return{id:t.UniqueComponentId(),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 t=e.target.value;switch(e.code){case"Backspace":0===t.length&&this.modelValue&&this.modelValue.length>0&&this.removeItem(e,null!==this.focusedIndex?this.focusedIndex:this.modelValue.length-1);break;case"Enter":case"NumpadEnter":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:function(e){var t=this;if(this.separator){var n=this.separator.replace("\\n","\n").replace("\\r","\r").replace("\\t","\t"),o=(e.clipboardData||window.clipboardData).getData("Text");if(o){var r=this.modelValue||[],i=o.split(n);i=i.filter((function(e){return t.allowDuplicate||-1===r.indexOf(e)})),r=[].concat(l(r),l(i)),this.updateModel(e,r,!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,t,n){var o=this;this.$emit("update:modelValue",t),this.$emit("add",{originalEvent:e,value:t}),this.$refs.input.value="",this.inputValue="",setTimeout((function(){o.maxedOut&&(o.focused=!1)}),0),n&&e.preventDefault()},addItem:function(e,t,n){if(t&&t.trim().length){var o=this.modelValue?l(this.modelValue):[];(this.allowDuplicate||-1===o.indexOf(t))&&(o.push(t),this.updateModel(e,o,n))}},removeItem:function(e,t){if(!this.disabled){var n=l(this.modelValue),o=n.splice(t,1);this.focusedIndex=null,this.$refs.input.focus(),this.$emit("update:modelValue",n),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:a.default}};function m(e){return m="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},m(e)}function h(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function y(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?h(Object(n),!0).forEach((function(t){b(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):h(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function b(e,t,n){var o;return(t="symbol"==m(o=v(t,"string"))?o:String(o))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function v(e,t){if("object"!=m(e)||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var o=n.call(e,t||"default");if("object"!=m(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}var g=["aria-labelledby","aria-label","aria-activedescendant"],I=["id","aria-label","aria-setsize","aria-posinset","data-p-focused"],x=["id","disabled","placeholder"];f.render=function(e,t,n,o,i,a){return r.openBlock(),r.createElementBlock("div",r.mergeProps({class:e.cx("root")},e.ptm("root"),{"data-pc-name":"chips"}),[r.createElementVNode("ul",r.mergeProps({ref:"container",class:e.cx("container"),tabindex:"-1",role:"listbox","aria-orientation":"horizontal","aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,"aria-activedescendant":i.focused?a.focusedOptionId:void 0,onClick:t[5]||(t[5]=function(e){return a.onWrapperClick()}),onFocus:t[6]||(t[6]=function(){return a.onContainerFocus&&a.onContainerFocus.apply(a,arguments)}),onBlur:t[7]||(t[7]=function(){return a.onContainerBlur&&a.onContainerBlur.apply(a,arguments)}),onKeydown:t[8]||(t[8]=function(){return a.onContainerKeyDown&&a.onContainerKeyDown.apply(a,arguments)})},e.ptm("container")),[(r.openBlock(!0),r.createElementBlock(r.Fragment,null,r.renderList(e.modelValue,(function(t,n){return r.openBlock(),r.createElementBlock("li",r.mergeProps({key:"".concat(n,"_").concat(t),id:i.id+"_chips_item_"+n,role:"option",class:e.cx("token",{index:n}),"aria-label":t,"aria-selected":!0,"aria-setsize":e.modelValue.length,"aria-posinset":n+1},e.ptm("token"),{"data-p-focused":i.focusedIndex===n}),[r.renderSlot(e.$slots,"chip",{class:r.normalizeClass(e.cx("label")),value:t},(function(){return[r.createElementVNode("span",r.mergeProps({class:e.cx("label")},e.ptm("label")),r.toDisplayString(t),17)]})),r.renderSlot(e.$slots,"removetokenicon",{class:r.normalizeClass(e.cx("removeTokenIcon")),index:n,onClick:function(e){return a.removeItem(e,n)},removeCallback:function(e){return a.removeItem(e,n)}},(function(){return[(r.openBlock(),r.createBlock(r.resolveDynamicComponent(e.removeTokenIcon?"span":"TimesCircleIcon"),r.mergeProps({class:[e.cx("removeTokenIcon"),e.removeTokenIcon],onClick:function(e){return a.removeItem(e,n)},"aria-hidden":"true"},e.ptm("removeTokenIcon")),null,16,["class","onClick"]))]}))],16,I)})),128)),r.createElementVNode("li",r.mergeProps({class:e.cx("inputToken"),role:"option"},e.ptm("inputToken")),[r.createElementVNode("input",r.mergeProps({ref:"input",id:e.inputId,type:"text",class:e.inputClass,style:e.inputStyle,disabled:e.disabled||a.maxedOut,placeholder:e.placeholder,onFocus:t[0]||(t[0]=function(e){return a.onFocus(e)}),onBlur:t[1]||(t[1]=function(e){return a.onBlur(e)}),onInput:t[2]||(t[2]=function(){return a.onInput&&a.onInput.apply(a,arguments)}),onKeydown:t[3]||(t[3]=function(e){return a.onKeyDown(e)}),onPaste:t[4]||(t[4]=function(e){return a.onPaste(e)})},y(y({},e.inputProps),e.ptm("input"))),null,16,x)],16)],16,g)],16)},module.exports=f;
+"use strict";var e=require("primevue/icons/timescircle"),t=require("primevue/utils"),n=require("primevue/basecomponent"),o=require("primevue/chips/style"),r=require("vue");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=i(e);function l(e){return d(e)||c(e)||s(e)||u()}function u(){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 s(e,t){if(e){if("string"==typeof e)return p(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?p(e,t):void 0}}function c(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function d(e){if(Array.isArray(e))return p(e)}function p(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,o=new Array(t);n<t;n++)o[n]=e[n];return o}var f={name:"Chips",extends:{name:"BaseChips",extends:i(n).default,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},variant:{type:String,default:null},invalid:{type:Boolean,default:!1},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},ariaLabelledby:{type:String,default:null},ariaLabel:{type:String,default:null}},style:i(o).default,provide:function(){return{$parentInstance:this}}},emits:["update:modelValue","add","remove","focus","blur"],data:function(){return{id:this.$attrs.id,inputValue:null,focused:!1,focusedIndex:null}},watch:{"$attrs.id":function(e){this.id=e||t.UniqueComponentId()}},mounted:function(){this.id=this.id||t.UniqueComponentId()},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 t=e.target.value;switch(e.code){case"Backspace":0===t.length&&this.modelValue&&this.modelValue.length>0&&this.removeItem(e,null!==this.focusedIndex?this.focusedIndex:this.modelValue.length-1);break;case"Enter":case"NumpadEnter":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:function(e){var t=this;if(this.separator){var n=this.separator.replace("\\n","\n").replace("\\r","\r").replace("\\t","\t"),o=(e.clipboardData||window.clipboardData).getData("Text");if(o){var r=this.modelValue||[],i=o.split(n);i=i.filter((function(e){return t.allowDuplicate||-1===r.indexOf(e)})),r=[].concat(l(r),l(i)),this.updateModel(e,r,!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,t,n){var o=this;this.$emit("update:modelValue",t),this.$emit("add",{originalEvent:e,value:t}),this.$refs.input.value="",this.inputValue="",setTimeout((function(){o.maxedOut&&(o.focused=!1)}),0),n&&e.preventDefault()},addItem:function(e,t,n){if(t&&t.trim().length){var o=this.modelValue?l(this.modelValue):[];(this.allowDuplicate||-1===o.indexOf(t))&&(o.push(t),this.updateModel(e,o,n))}},removeItem:function(e,t){if(!this.disabled){var n=l(this.modelValue),o=n.splice(t,1);this.focusedIndex=null,this.$refs.input.focus(),this.$emit("update:modelValue",n),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:a.default}};function m(e){return m="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},m(e)}function h(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function y(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?h(Object(n),!0).forEach((function(t){b(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):h(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function b(e,t,n){var o;return(t="symbol"==m(o=v(t,"string"))?o:String(o))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function v(e,t){if("object"!=m(e)||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var o=n.call(e,t||"default");if("object"!=m(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}var g=["aria-labelledby","aria-label","aria-activedescendant"],I=["id","aria-label","aria-setsize","aria-posinset","data-p-focused"],x=["id","disabled","placeholder"];f.render=function(e,t,n,o,i,a){return r.openBlock(),r.createElementBlock("div",r.mergeProps({class:e.cx("root")},e.ptm("root")),[r.createElementVNode("ul",r.mergeProps({ref:"container",class:e.cx("container"),tabindex:"-1",role:"listbox","aria-orientation":"horizontal","aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,"aria-activedescendant":i.focused?a.focusedOptionId:void 0,onClick:t[5]||(t[5]=function(e){return a.onWrapperClick()}),onFocus:t[6]||(t[6]=function(){return a.onContainerFocus&&a.onContainerFocus.apply(a,arguments)}),onBlur:t[7]||(t[7]=function(){return a.onContainerBlur&&a.onContainerBlur.apply(a,arguments)}),onKeydown:t[8]||(t[8]=function(){return a.onContainerKeyDown&&a.onContainerKeyDown.apply(a,arguments)})},e.ptm("container")),[(r.openBlock(!0),r.createElementBlock(r.Fragment,null,r.renderList(e.modelValue,(function(t,n){return r.openBlock(),r.createElementBlock("li",r.mergeProps({key:"".concat(n,"_").concat(t),id:i.id+"_chips_item_"+n,role:"option",class:e.cx("token",{index:n}),"aria-label":t,"aria-selected":!0,"aria-setsize":e.modelValue.length,"aria-posinset":n+1},e.ptm("token"),{"data-p-focused":i.focusedIndex===n}),[r.renderSlot(e.$slots,"chip",{class:r.normalizeClass(e.cx("label")),value:t},(function(){return[r.createElementVNode("span",r.mergeProps({class:e.cx("label")},e.ptm("label")),r.toDisplayString(t),17)]})),r.renderSlot(e.$slots,"removetokenicon",{class:r.normalizeClass(e.cx("removeTokenIcon")),index:n,onClick:function(e){return a.removeItem(e,n)},removeCallback:function(e){return a.removeItem(e,n)}},(function(){return[(r.openBlock(),r.createBlock(r.resolveDynamicComponent(e.removeTokenIcon?"span":"TimesCircleIcon"),r.mergeProps({class:[e.cx("removeTokenIcon"),e.removeTokenIcon],onClick:function(e){return a.removeItem(e,n)},"aria-hidden":"true"},e.ptm("removeTokenIcon")),null,16,["class","onClick"]))]}))],16,I)})),128)),r.createElementVNode("li",r.mergeProps({class:e.cx("inputToken"),role:"option"},e.ptm("inputToken")),[r.createElementVNode("input",r.mergeProps({ref:"input",id:e.inputId,type:"text",class:e.inputClass,style:e.inputStyle,disabled:e.disabled||a.maxedOut,placeholder:e.placeholder,onFocus:t[0]||(t[0]=function(e){return a.onFocus(e)}),onBlur:t[1]||(t[1]=function(e){return a.onBlur(e)}),onInput:t[2]||(t[2]=function(){return a.onInput&&a.onInput.apply(a,arguments)}),onKeydown:t[3]||(t[3]=function(e){return a.onKeyDown(e)}),onPaste:t[4]||(t[4]=function(e){return a.onPaste(e)})},y(y({},e.inputProps),e.ptm("input"))),null,16,x)],16)],16,g)],16)},module.exports=f;

package/chips/chips.esm.js

@@ -32,6 +32,14 @@ var script$1 = {
       type: String,
       "default": null
     },
+    variant: {
+      type: String,
+      "default": null
+    },
+    invalid: {
+      type: Boolean,
+      "default": false
+    },
     disabled: {
       type: Boolean,
       "default": false
@@ -85,12 +93,20 @@ var script = {
   emits: ['update:modelValue', 'add', 'remove', 'focus', 'blur'],
   data: function data() {
     return {
-      id: UniqueComponentId(),
+      id: this.$attrs.id,
       inputValue: null,
       focused: false,
       focusedIndex: null
     };
   },
+  watch: {
+    '$attrs.id': function $attrsId(newValue) {
+      this.id = newValue || UniqueComponentId();
+    }
+  },
+  mounted: function mounted() {
+    this.id = this.id || UniqueComponentId();
+  },
   methods: {
     onWrapperClick: function onWrapperClick() {
       this.$refs.input.focus();
@@ -267,9 +283,7 @@ var _hoisted_3 = ["id", "disabled", "placeholder"];
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", mergeProps({
     "class": _ctx.cx('root')
-  }, _ctx.ptm('root'), {
-    "data-pc-name": "chips"
-  }), [createElementVNode("ul", mergeProps({
+  }, _ctx.ptm('root')), [createElementVNode("ul", mergeProps({
     ref: "container",
     "class": _ctx.cx('container'),
     tabindex: "-1",

package/chips/chips.esm.min.js

@@ -1 +1 @@
-import e from"primevue/icons/timescircle";import{UniqueComponentId as t}from"primevue/utils";import n from"primevue/basecomponent";import o from"primevue/chips/style";import{openBlock as r,createElementBlock as i,mergeProps as a,createElementVNode as l,Fragment as u,renderList as s,renderSlot as c,normalizeClass as d,toDisplayString as p,createBlock as f,resolveDynamicComponent as m}from"vue";function h(e){return I(e)||v(e)||b(e)||y()}function y(){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 b(e,t){if(e){if("string"==typeof e)return g(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?g(e,t):void 0}}function v(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function I(e){if(Array.isArray(e))return g(e)}function g(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,o=new Array(t);n<t;n++)o[n]=e[n];return o}var x={name:"Chips",extends:{name:"BaseChips",extends:n,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},ariaLabelledby:{type:String,default:null},ariaLabel:{type:String,default:null}},style:o,provide:function(){return{$parentInstance:this}}},emits:["update:modelValue","add","remove","focus","blur"],data:function(){return{id:t(),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 t=e.target.value;switch(e.code){case"Backspace":0===t.length&&this.modelValue&&this.modelValue.length>0&&this.removeItem(e,null!==this.focusedIndex?this.focusedIndex:this.modelValue.length-1);break;case"Enter":case"NumpadEnter":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:function(e){var t=this;if(this.separator){var n=this.separator.replace("\\n","\n").replace("\\r","\r").replace("\\t","\t"),o=(e.clipboardData||window.clipboardData).getData("Text");if(o){var r=this.modelValue||[],i=o.split(n);i=i.filter((function(e){return t.allowDuplicate||-1===r.indexOf(e)})),r=[].concat(h(r),h(i)),this.updateModel(e,r,!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,t,n){var o=this;this.$emit("update:modelValue",t),this.$emit("add",{originalEvent:e,value:t}),this.$refs.input.value="",this.inputValue="",setTimeout((function(){o.maxedOut&&(o.focused=!1)}),0),n&&e.preventDefault()},addItem:function(e,t,n){if(t&&t.trim().length){var o=this.modelValue?h(this.modelValue):[];(this.allowDuplicate||-1===o.indexOf(t))&&(o.push(t),this.updateModel(e,o,n))}},removeItem:function(e,t){if(!this.disabled){var n=h(this.modelValue),o=n.splice(t,1);this.focusedIndex=null,this.$refs.input.focus(),this.$emit("update:modelValue",n),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 O(e){return O="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},O(e)}function w(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function k(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?w(Object(n),!0).forEach((function(t){V(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):w(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function V(e,t,n){var o;return(t="symbol"==O(o=S(t,"string"))?o:String(o))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function S(e,t){if("object"!=O(e)||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var o=n.call(e,t||"default");if("object"!=O(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}var C=["aria-labelledby","aria-label","aria-activedescendant"],j=["id","aria-label","aria-setsize","aria-posinset","data-p-focused"],B=["id","disabled","placeholder"];x.render=function(e,t,n,o,h,y){return r(),i("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":h.focused?y.focusedOptionId:void 0,onClick:t[5]||(t[5]=function(e){return y.onWrapperClick()}),onFocus:t[6]||(t[6]=function(){return y.onContainerFocus&&y.onContainerFocus.apply(y,arguments)}),onBlur:t[7]||(t[7]=function(){return y.onContainerBlur&&y.onContainerBlur.apply(y,arguments)}),onKeydown:t[8]||(t[8]=function(){return y.onContainerKeyDown&&y.onContainerKeyDown.apply(y,arguments)})},e.ptm("container")),[(r(!0),i(u,null,s(e.modelValue,(function(t,n){return r(),i("li",a({key:"".concat(n,"_").concat(t),id:h.id+"_chips_item_"+n,role:"option",class:e.cx("token",{index:n}),"aria-label":t,"aria-selected":!0,"aria-setsize":e.modelValue.length,"aria-posinset":n+1},e.ptm("token"),{"data-p-focused":h.focusedIndex===n}),[c(e.$slots,"chip",{class:d(e.cx("label")),value:t},(function(){return[l("span",a({class:e.cx("label")},e.ptm("label")),p(t),17)]})),c(e.$slots,"removetokenicon",{class:d(e.cx("removeTokenIcon")),index:n,onClick:function(e){return y.removeItem(e,n)},removeCallback:function(e){return y.removeItem(e,n)}},(function(){return[(r(),f(m(e.removeTokenIcon?"span":"TimesCircleIcon"),a({class:[e.cx("removeTokenIcon"),e.removeTokenIcon],onClick:function(e){return y.removeItem(e,n)},"aria-hidden":"true"},e.ptm("removeTokenIcon")),null,16,["class","onClick"]))]}))],16,j)})),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:t[0]||(t[0]=function(e){return y.onFocus(e)}),onBlur:t[1]||(t[1]=function(e){return y.onBlur(e)}),onInput:t[2]||(t[2]=function(){return y.onInput&&y.onInput.apply(y,arguments)}),onKeydown:t[3]||(t[3]=function(e){return y.onKeyDown(e)}),onPaste:t[4]||(t[4]=function(e){return y.onPaste(e)})},k(k({},e.inputProps),e.ptm("input"))),null,16,B)],16)],16,C)],16)};export{x as default};
+import e from"primevue/icons/timescircle";import{UniqueComponentId as t}from"primevue/utils";import n from"primevue/basecomponent";import o from"primevue/chips/style";import{openBlock as i,createElementBlock as r,mergeProps as a,createElementVNode as l,Fragment as u,renderList as s,renderSlot as c,normalizeClass as d,toDisplayString as p,createBlock as f,resolveDynamicComponent as h}from"vue";function m(e){return g(e)||v(e)||b(e)||y()}function y(){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 b(e,t){if(e){if("string"==typeof e)return I(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?I(e,t):void 0}}function v(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,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,o=new Array(t);n<t;n++)o[n]=e[n];return o}var x={name:"Chips",extends:{name:"BaseChips",extends:n,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},variant:{type:String,default:null},invalid:{type:Boolean,default:!1},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},ariaLabelledby:{type:String,default:null},ariaLabel:{type:String,default:null}},style:o,provide:function(){return{$parentInstance:this}}},emits:["update:modelValue","add","remove","focus","blur"],data:function(){return{id:this.$attrs.id,inputValue:null,focused:!1,focusedIndex:null}},watch:{"$attrs.id":function(e){this.id=e||t()}},mounted:function(){this.id=this.id||t()},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 t=e.target.value;switch(e.code){case"Backspace":0===t.length&&this.modelValue&&this.modelValue.length>0&&this.removeItem(e,null!==this.focusedIndex?this.focusedIndex:this.modelValue.length-1);break;case"Enter":case"NumpadEnter":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:function(e){var t=this;if(this.separator){var n=this.separator.replace("\\n","\n").replace("\\r","\r").replace("\\t","\t"),o=(e.clipboardData||window.clipboardData).getData("Text");if(o){var i=this.modelValue||[],r=o.split(n);r=r.filter((function(e){return t.allowDuplicate||-1===i.indexOf(e)})),i=[].concat(m(i),m(r)),this.updateModel(e,i,!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,t,n){var o=this;this.$emit("update:modelValue",t),this.$emit("add",{originalEvent:e,value:t}),this.$refs.input.value="",this.inputValue="",setTimeout((function(){o.maxedOut&&(o.focused=!1)}),0),n&&e.preventDefault()},addItem:function(e,t,n){if(t&&t.trim().length){var o=this.modelValue?m(this.modelValue):[];(this.allowDuplicate||-1===o.indexOf(t))&&(o.push(t),this.updateModel(e,o,n))}},removeItem:function(e,t){if(!this.disabled){var n=m(this.modelValue),o=n.splice(t,1);this.focusedIndex=null,this.$refs.input.focus(),this.$emit("update:modelValue",n),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 O(e){return O="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},O(e)}function w(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function k(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?w(Object(n),!0).forEach((function(t){V(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):w(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function V(e,t,n){var o;return(t="symbol"==O(o=S(t,"string"))?o:String(o))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function S(e,t){if("object"!=O(e)||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var o=n.call(e,t||"default");if("object"!=O(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}var C=["aria-labelledby","aria-label","aria-activedescendant"],j=["id","aria-label","aria-setsize","aria-posinset","data-p-focused"],B=["id","disabled","placeholder"];x.render=function(e,t,n,o,m,y){return i(),r("div",a({class:e.cx("root")},e.ptm("root")),[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:t[5]||(t[5]=function(e){return y.onWrapperClick()}),onFocus:t[6]||(t[6]=function(){return y.onContainerFocus&&y.onContainerFocus.apply(y,arguments)}),onBlur:t[7]||(t[7]=function(){return y.onContainerBlur&&y.onContainerBlur.apply(y,arguments)}),onKeydown:t[8]||(t[8]=function(){return y.onContainerKeyDown&&y.onContainerKeyDown.apply(y,arguments)})},e.ptm("container")),[(i(!0),r(u,null,s(e.modelValue,(function(t,n){return i(),r("li",a({key:"".concat(n,"_").concat(t),id:m.id+"_chips_item_"+n,role:"option",class:e.cx("token",{index:n}),"aria-label":t,"aria-selected":!0,"aria-setsize":e.modelValue.length,"aria-posinset":n+1},e.ptm("token"),{"data-p-focused":m.focusedIndex===n}),[c(e.$slots,"chip",{class:d(e.cx("label")),value:t},(function(){return[l("span",a({class:e.cx("label")},e.ptm("label")),p(t),17)]})),c(e.$slots,"removetokenicon",{class:d(e.cx("removeTokenIcon")),index:n,onClick:function(e){return y.removeItem(e,n)},removeCallback:function(e){return y.removeItem(e,n)}},(function(){return[(i(),f(h(e.removeTokenIcon?"span":"TimesCircleIcon"),a({class:[e.cx("removeTokenIcon"),e.removeTokenIcon],onClick:function(e){return y.removeItem(e,n)},"aria-hidden":"true"},e.ptm("removeTokenIcon")),null,16,["class","onClick"]))]}))],16,j)})),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:t[0]||(t[0]=function(e){return y.onFocus(e)}),onBlur:t[1]||(t[1]=function(e){return y.onBlur(e)}),onInput:t[2]||(t[2]=function(){return y.onInput&&y.onInput.apply(y,arguments)}),onKeydown:t[3]||(t[3]=function(e){return y.onKeyDown(e)}),onPaste:t[4]||(t[4]=function(e){return y.onPaste(e)})},k(k({},e.inputProps),e.ptm("input"))),null,16,B)],16)],16,C)],16)};export{x as default};

package/chips/chips.js

@@ -36,6 +36,14 @@ this.primevue.chips = (function (TimesCircleIcon, utils, BaseComponent, ChipsSty
           type: String,
           "default": null
         },
+        variant: {
+          type: String,
+          "default": null
+        },
+        invalid: {
+          type: Boolean,
+          "default": false
+        },
         disabled: {
           type: Boolean,
           "default": false
@@ -89,12 +97,20 @@ this.primevue.chips = (function (TimesCircleIcon, utils, BaseComponent, ChipsSty
       emits: ['update:modelValue', 'add', 'remove', 'focus', 'blur'],
       data: function data() {
         return {
-          id: utils.UniqueComponentId(),
+          id: this.$attrs.id,
           inputValue: null,
           focused: false,
           focusedIndex: null
         };
       },
+      watch: {
+        '$attrs.id': function $attrsId(newValue) {
+          this.id = newValue || utils.UniqueComponentId();
+        }
+      },
+      mounted: function mounted() {
+        this.id = this.id || utils.UniqueComponentId();
+      },
       methods: {
         onWrapperClick: function onWrapperClick() {
           this.$refs.input.focus();
@@ -271,9 +287,7 @@ this.primevue.chips = (function (TimesCircleIcon, utils, BaseComponent, ChipsSty
     function render(_ctx, _cache, $props, $setup, $data, $options) {
       return vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
         "class": _ctx.cx('root')
-      }, _ctx.ptm('root'), {
-        "data-pc-name": "chips"
-      }), [vue.createElementVNode("ul", vue.mergeProps({
+      }, _ctx.ptm('root')), [vue.createElementVNode("ul", vue.mergeProps({
         ref: "container",
         "class": _ctx.cx('container'),
         tabindex: "-1",

package/chips/chips.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.chips=function(e,t,n,o,r){"use strict";function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=i(e);function l(e){return d(e)||c(e)||s(e)||u()}function u(){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 s(e,t){if(e){if("string"==typeof e)return p(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?p(e,t):void 0}}function c(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function d(e){if(Array.isArray(e))return p(e)}function p(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,o=new Array(t);n<t;n++)o[n]=e[n];return o}var f={name:"Chips",extends:{name:"BaseChips",extends:i(n).default,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},ariaLabelledby:{type:String,default:null},ariaLabel:{type:String,default:null}},style:i(o).default,provide:function(){return{$parentInstance:this}}},emits:["update:modelValue","add","remove","focus","blur"],data:function(){return{id:t.UniqueComponentId(),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 t=e.target.value;switch(e.code){case"Backspace":0===t.length&&this.modelValue&&this.modelValue.length>0&&this.removeItem(e,null!==this.focusedIndex?this.focusedIndex:this.modelValue.length-1);break;case"Enter":case"NumpadEnter":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:function(e){var t=this;if(this.separator){var n=this.separator.replace("\\n","\n").replace("\\r","\r").replace("\\t","\t"),o=(e.clipboardData||window.clipboardData).getData("Text");if(o){var r=this.modelValue||[],i=o.split(n);i=i.filter((function(e){return t.allowDuplicate||-1===r.indexOf(e)})),r=[].concat(l(r),l(i)),this.updateModel(e,r,!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,t,n){var o=this;this.$emit("update:modelValue",t),this.$emit("add",{originalEvent:e,value:t}),this.$refs.input.value="",this.inputValue="",setTimeout((function(){o.maxedOut&&(o.focused=!1)}),0),n&&e.preventDefault()},addItem:function(e,t,n){if(t&&t.trim().length){var o=this.modelValue?l(this.modelValue):[];(this.allowDuplicate||-1===o.indexOf(t))&&(o.push(t),this.updateModel(e,o,n))}},removeItem:function(e,t){if(!this.disabled){var n=l(this.modelValue),o=n.splice(t,1);this.focusedIndex=null,this.$refs.input.focus(),this.$emit("update:modelValue",n),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:a.default}};function m(e){return m="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},m(e)}function h(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function y(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?h(Object(n),!0).forEach((function(t){b(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):h(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function b(e,t,n){var o;return(t="symbol"==m(o=v(t,"string"))?o:String(o))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function v(e,t){if("object"!=m(e)||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var o=n.call(e,t||"default");if("object"!=m(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}var g=["aria-labelledby","aria-label","aria-activedescendant"],I=["id","aria-label","aria-setsize","aria-posinset","data-p-focused"],x=["id","disabled","placeholder"];return f.render=function(e,t,n,o,i,a){return r.openBlock(),r.createElementBlock("div",r.mergeProps({class:e.cx("root")},e.ptm("root"),{"data-pc-name":"chips"}),[r.createElementVNode("ul",r.mergeProps({ref:"container",class:e.cx("container"),tabindex:"-1",role:"listbox","aria-orientation":"horizontal","aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,"aria-activedescendant":i.focused?a.focusedOptionId:void 0,onClick:t[5]||(t[5]=function(e){return a.onWrapperClick()}),onFocus:t[6]||(t[6]=function(){return a.onContainerFocus&&a.onContainerFocus.apply(a,arguments)}),onBlur:t[7]||(t[7]=function(){return a.onContainerBlur&&a.onContainerBlur.apply(a,arguments)}),onKeydown:t[8]||(t[8]=function(){return a.onContainerKeyDown&&a.onContainerKeyDown.apply(a,arguments)})},e.ptm("container")),[(r.openBlock(!0),r.createElementBlock(r.Fragment,null,r.renderList(e.modelValue,(function(t,n){return r.openBlock(),r.createElementBlock("li",r.mergeProps({key:"".concat(n,"_").concat(t),id:i.id+"_chips_item_"+n,role:"option",class:e.cx("token",{index:n}),"aria-label":t,"aria-selected":!0,"aria-setsize":e.modelValue.length,"aria-posinset":n+1},e.ptm("token"),{"data-p-focused":i.focusedIndex===n}),[r.renderSlot(e.$slots,"chip",{class:r.normalizeClass(e.cx("label")),value:t},(function(){return[r.createElementVNode("span",r.mergeProps({class:e.cx("label")},e.ptm("label")),r.toDisplayString(t),17)]})),r.renderSlot(e.$slots,"removetokenicon",{class:r.normalizeClass(e.cx("removeTokenIcon")),index:n,onClick:function(e){return a.removeItem(e,n)},removeCallback:function(e){return a.removeItem(e,n)}},(function(){return[(r.openBlock(),r.createBlock(r.resolveDynamicComponent(e.removeTokenIcon?"span":"TimesCircleIcon"),r.mergeProps({class:[e.cx("removeTokenIcon"),e.removeTokenIcon],onClick:function(e){return a.removeItem(e,n)},"aria-hidden":"true"},e.ptm("removeTokenIcon")),null,16,["class","onClick"]))]}))],16,I)})),128)),r.createElementVNode("li",r.mergeProps({class:e.cx("inputToken"),role:"option"},e.ptm("inputToken")),[r.createElementVNode("input",r.mergeProps({ref:"input",id:e.inputId,type:"text",class:e.inputClass,style:e.inputStyle,disabled:e.disabled||a.maxedOut,placeholder:e.placeholder,onFocus:t[0]||(t[0]=function(e){return a.onFocus(e)}),onBlur:t[1]||(t[1]=function(e){return a.onBlur(e)}),onInput:t[2]||(t[2]=function(){return a.onInput&&a.onInput.apply(a,arguments)}),onKeydown:t[3]||(t[3]=function(e){return a.onKeyDown(e)}),onPaste:t[4]||(t[4]=function(e){return a.onPaste(e)})},y(y({},e.inputProps),e.ptm("input"))),null,16,x)],16)],16,g)],16)},f}(primevue.icons.timescircle,primevue.utils,primevue.basecomponent,primevue.chips.style,Vue);
+this.primevue=this.primevue||{},this.primevue.chips=function(e,t,n,o,r){"use strict";function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=i(e);function l(e){return d(e)||c(e)||s(e)||u()}function u(){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 s(e,t){if(e){if("string"==typeof e)return p(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?p(e,t):void 0}}function c(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}function d(e){if(Array.isArray(e))return p(e)}function p(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,o=new Array(t);n<t;n++)o[n]=e[n];return o}var f={name:"Chips",extends:{name:"BaseChips",extends:i(n).default,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},variant:{type:String,default:null},invalid:{type:Boolean,default:!1},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},ariaLabelledby:{type:String,default:null},ariaLabel:{type:String,default:null}},style:i(o).default,provide:function(){return{$parentInstance:this}}},emits:["update:modelValue","add","remove","focus","blur"],data:function(){return{id:this.$attrs.id,inputValue:null,focused:!1,focusedIndex:null}},watch:{"$attrs.id":function(e){this.id=e||t.UniqueComponentId()}},mounted:function(){this.id=this.id||t.UniqueComponentId()},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 t=e.target.value;switch(e.code){case"Backspace":0===t.length&&this.modelValue&&this.modelValue.length>0&&this.removeItem(e,null!==this.focusedIndex?this.focusedIndex:this.modelValue.length-1);break;case"Enter":case"NumpadEnter":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:function(e){var t=this;if(this.separator){var n=this.separator.replace("\\n","\n").replace("\\r","\r").replace("\\t","\t"),o=(e.clipboardData||window.clipboardData).getData("Text");if(o){var r=this.modelValue||[],i=o.split(n);i=i.filter((function(e){return t.allowDuplicate||-1===r.indexOf(e)})),r=[].concat(l(r),l(i)),this.updateModel(e,r,!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,t,n){var o=this;this.$emit("update:modelValue",t),this.$emit("add",{originalEvent:e,value:t}),this.$refs.input.value="",this.inputValue="",setTimeout((function(){o.maxedOut&&(o.focused=!1)}),0),n&&e.preventDefault()},addItem:function(e,t,n){if(t&&t.trim().length){var o=this.modelValue?l(this.modelValue):[];(this.allowDuplicate||-1===o.indexOf(t))&&(o.push(t),this.updateModel(e,o,n))}},removeItem:function(e,t){if(!this.disabled){var n=l(this.modelValue),o=n.splice(t,1);this.focusedIndex=null,this.$refs.input.focus(),this.$emit("update:modelValue",n),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:a.default}};function m(e){return m="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},m(e)}function h(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function y(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?h(Object(n),!0).forEach((function(t){b(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):h(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function b(e,t,n){var o;return(t="symbol"==m(o=v(t,"string"))?o:String(o))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function v(e,t){if("object"!=m(e)||!e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var o=n.call(e,t||"default");if("object"!=m(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}var g=["aria-labelledby","aria-label","aria-activedescendant"],I=["id","aria-label","aria-setsize","aria-posinset","data-p-focused"],x=["id","disabled","placeholder"];return f.render=function(e,t,n,o,i,a){return r.openBlock(),r.createElementBlock("div",r.mergeProps({class:e.cx("root")},e.ptm("root")),[r.createElementVNode("ul",r.mergeProps({ref:"container",class:e.cx("container"),tabindex:"-1",role:"listbox","aria-orientation":"horizontal","aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,"aria-activedescendant":i.focused?a.focusedOptionId:void 0,onClick:t[5]||(t[5]=function(e){return a.onWrapperClick()}),onFocus:t[6]||(t[6]=function(){return a.onContainerFocus&&a.onContainerFocus.apply(a,arguments)}),onBlur:t[7]||(t[7]=function(){return a.onContainerBlur&&a.onContainerBlur.apply(a,arguments)}),onKeydown:t[8]||(t[8]=function(){return a.onContainerKeyDown&&a.onContainerKeyDown.apply(a,arguments)})},e.ptm("container")),[(r.openBlock(!0),r.createElementBlock(r.Fragment,null,r.renderList(e.modelValue,(function(t,n){return r.openBlock(),r.createElementBlock("li",r.mergeProps({key:"".concat(n,"_").concat(t),id:i.id+"_chips_item_"+n,role:"option",class:e.cx("token",{index:n}),"aria-label":t,"aria-selected":!0,"aria-setsize":e.modelValue.length,"aria-posinset":n+1},e.ptm("token"),{"data-p-focused":i.focusedIndex===n}),[r.renderSlot(e.$slots,"chip",{class:r.normalizeClass(e.cx("label")),value:t},(function(){return[r.createElementVNode("span",r.mergeProps({class:e.cx("label")},e.ptm("label")),r.toDisplayString(t),17)]})),r.renderSlot(e.$slots,"removetokenicon",{class:r.normalizeClass(e.cx("removeTokenIcon")),index:n,onClick:function(e){return a.removeItem(e,n)},removeCallback:function(e){return a.removeItem(e,n)}},(function(){return[(r.openBlock(),r.createBlock(r.resolveDynamicComponent(e.removeTokenIcon?"span":"TimesCircleIcon"),r.mergeProps({class:[e.cx("removeTokenIcon"),e.removeTokenIcon],onClick:function(e){return a.removeItem(e,n)},"aria-hidden":"true"},e.ptm("removeTokenIcon")),null,16,["class","onClick"]))]}))],16,I)})),128)),r.createElementVNode("li",r.mergeProps({class:e.cx("inputToken"),role:"option"},e.ptm("inputToken")),[r.createElementVNode("input",r.mergeProps({ref:"input",id:e.inputId,type:"text",class:e.inputClass,style:e.inputStyle,disabled:e.disabled||a.maxedOut,placeholder:e.placeholder,onFocus:t[0]||(t[0]=function(e){return a.onFocus(e)}),onBlur:t[1]||(t[1]=function(e){return a.onBlur(e)}),onInput:t[2]||(t[2]=function(){return a.onInput&&a.onInput.apply(a,arguments)}),onKeydown:t[3]||(t[3]=function(e){return a.onKeyDown(e)}),onPaste:t[4]||(t[4]=function(e){return a.onPaste(e)})},y(y({},e.inputProps),e.ptm("input"))),null,16,x)],16)],16,g)],16)},f}(primevue.icons.timescircle,primevue.utils,primevue.basecomponent,primevue.chips.style,Vue);

package/chips/style/chipsstyle.cjs.js

@@ -6,22 +6,28 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var BaseStyle__default = /*#__PURE__*/_interopDefaultLegacy(BaseStyle);
 
-var css = "\n@layer primevue {\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}\n";
 var classes = {
   root: function root(_ref) {
     var instance = _ref.instance,
       props = _ref.props;
     return ['p-chips p-component p-inputwrapper', {
       'p-disabled': props.disabled,
+      'p-invalid': props.invalid,
       'p-focus': instance.focused,
       'p-inputwrapper-filled': props.modelValue && props.modelValue.length || instance.inputValue && instance.inputValue.length,
       'p-inputwrapper-focus': instance.focused
     }];
   },
-  container: 'p-inputtext p-chips-multiple-container',
-  token: function token(_ref2) {
-    var state = _ref2.state,
-      index = _ref2.index;
+  container: function container(_ref2) {
+    var props = _ref2.props,
+      instance = _ref2.instance;
+    return ['p-inputtext p-chips-multiple-container', {
+      'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled'
+    }];
+  },
+  token: function token(_ref3) {
+    var state = _ref3.state,
+      index = _ref3.index;
     return ['p-chips-token', {
       'p-focus': state.focusedIndex === index
     }];
@@ -32,7 +38,6 @@ var classes = {
 };
 var ChipsStyle = BaseStyle__default["default"].extend({
   name: 'chips',
-  css: css,
   classes: classes
 });
 

package/chips/style/chipsstyle.cjs.min.js

@@ -1 +1 @@
-"use strict";function n(n){return n&&"object"==typeof n&&"default"in n?n:{default:n}}var e=n(require("primevue/base/style")).default.extend({name:"chips",css:"\n@layer primevue {\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}\n",classes:{root:function(n){var e=n.instance,p=n.props;return["p-chips p-component p-inputwrapper",{"p-disabled":p.disabled,"p-focus":e.focused,"p-inputwrapper-filled":p.modelValue&&p.modelValue.length||e.inputValue&&e.inputValue.length,"p-inputwrapper-focus":e.focused}]},container:"p-inputtext p-chips-multiple-container",token:function(n){return["p-chips-token",{"p-focus":n.state.focusedIndex===n.index}]},label:"p-chips-token-label",removeTokenIcon:"p-chips-token-icon",inputToken:"p-chips-input-token"}});module.exports=e;
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=e(require("primevue/base/style")).default.extend({name:"chips",classes:{root:function(e){var n=e.instance,t=e.props;return["p-chips p-component p-inputwrapper",{"p-disabled":t.disabled,"p-invalid":t.invalid,"p-focus":n.focused,"p-inputwrapper-filled":t.modelValue&&t.modelValue.length||n.inputValue&&n.inputValue.length,"p-inputwrapper-focus":n.focused}]},container:function(e){var n=e.props;return["p-inputtext p-chips-multiple-container",{"p-variant-filled":n.variant?"filled"===n.variant:"filled"===e.instance.$primevue.config.inputStyle}]},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"}});module.exports=n;

package/chips/style/chipsstyle.esm.js

@@ -1,21 +1,27 @@
 import BaseStyle from 'primevue/base/style';
 
-var css = "\n@layer primevue {\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}\n";
 var classes = {
   root: function root(_ref) {
     var instance = _ref.instance,
       props = _ref.props;
     return ['p-chips p-component p-inputwrapper', {
       'p-disabled': props.disabled,
+      'p-invalid': props.invalid,
       'p-focus': instance.focused,
       'p-inputwrapper-filled': props.modelValue && props.modelValue.length || instance.inputValue && instance.inputValue.length,
       'p-inputwrapper-focus': instance.focused
     }];
   },
-  container: 'p-inputtext p-chips-multiple-container',
-  token: function token(_ref2) {
-    var state = _ref2.state,
-      index = _ref2.index;
+  container: function container(_ref2) {
+    var props = _ref2.props,
+      instance = _ref2.instance;
+    return ['p-inputtext p-chips-multiple-container', {
+      'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled'
+    }];
+  },
+  token: function token(_ref3) {
+    var state = _ref3.state,
+      index = _ref3.index;
     return ['p-chips-token', {
       'p-focus': state.focusedIndex === index
     }];
@@ -26,7 +32,6 @@ var classes = {
 };
 var ChipsStyle = BaseStyle.extend({
   name: 'chips',
-  css: css,
   classes: classes
 });
 

package/chips/style/chipsstyle.esm.min.js

@@ -1 +1 @@
-import n from"primevue/base/style";var e=n.extend({name:"chips",css:"\n@layer primevue {\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}\n",classes:{root:function(n){var e=n.instance,p=n.props;return["p-chips p-component p-inputwrapper",{"p-disabled":p.disabled,"p-focus":e.focused,"p-inputwrapper-filled":p.modelValue&&p.modelValue.length||e.inputValue&&e.inputValue.length,"p-inputwrapper-focus":e.focused}]},container:"p-inputtext p-chips-multiple-container",token:function(n){return["p-chips-token",{"p-focus":n.state.focusedIndex===n.index}]},label:"p-chips-token-label",removeTokenIcon:"p-chips-token-icon",inputToken:"p-chips-input-token"}});export{e as default};
+import e from"primevue/base/style";var n=e.extend({name:"chips",classes:{root:function(e){var n=e.instance,p=e.props;return["p-chips p-component p-inputwrapper",{"p-disabled":p.disabled,"p-invalid":p.invalid,"p-focus":n.focused,"p-inputwrapper-filled":p.modelValue&&p.modelValue.length||n.inputValue&&n.inputValue.length,"p-inputwrapper-focus":n.focused}]},container:function(e){var n=e.props;return["p-inputtext p-chips-multiple-container",{"p-variant-filled":n.variant?"filled"===n.variant:"filled"===e.instance.$primevue.config.inputStyle}]},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"}});export{n as default};

package/chips/style/chipsstyle.js

@@ -7,22 +7,28 @@ this.primevue.chips.style = (function (BaseStyle) {
 
     var BaseStyle__default = /*#__PURE__*/_interopDefaultLegacy(BaseStyle);
 
-    var css = "\n@layer primevue {\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}\n";
     var classes = {
       root: function root(_ref) {
         var instance = _ref.instance,
           props = _ref.props;
         return ['p-chips p-component p-inputwrapper', {
           'p-disabled': props.disabled,
+          'p-invalid': props.invalid,
           'p-focus': instance.focused,
           'p-inputwrapper-filled': props.modelValue && props.modelValue.length || instance.inputValue && instance.inputValue.length,
           'p-inputwrapper-focus': instance.focused
         }];
       },
-      container: 'p-inputtext p-chips-multiple-container',
-      token: function token(_ref2) {
-        var state = _ref2.state,
-          index = _ref2.index;
+      container: function container(_ref2) {
+        var props = _ref2.props,
+          instance = _ref2.instance;
+        return ['p-inputtext p-chips-multiple-container', {
+          'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled'
+        }];
+      },
+      token: function token(_ref3) {
+        var state = _ref3.state,
+          index = _ref3.index;
         return ['p-chips-token', {
           'p-focus': state.focusedIndex === index
         }];
@@ -33,7 +39,6 @@ this.primevue.chips.style = (function (BaseStyle) {
     };
     var ChipsStyle = BaseStyle__default["default"].extend({
       name: 'chips',
-      css: css,
       classes: classes
     });
 

package/chips/style/chipsstyle.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.chips=this.primevue.chips||{},this.primevue.chips.style=function(n){"use strict";function e(n){return n&&"object"==typeof n&&"default"in n?n:{default:n}}return e(primevue.base.style).default.extend({name:"chips",css:"\n@layer primevue {\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}\n",classes:{root:function(n){var e=n.instance,i=n.props;return["p-chips p-component p-inputwrapper",{"p-disabled":i.disabled,"p-focus":e.focused,"p-inputwrapper-filled":i.modelValue&&i.modelValue.length||e.inputValue&&e.inputValue.length,"p-inputwrapper-focus":e.focused}]},container:"p-inputtext p-chips-multiple-container",token:function(n){return["p-chips-token",{"p-focus":n.state.focusedIndex===n.index}]},label:"p-chips-token-label",removeTokenIcon:"p-chips-token-icon",inputToken:"p-chips-input-token"}})}();
+this.primevue=this.primevue||{},this.primevue.chips=this.primevue.chips||{},this.primevue.chips.style=function(e){"use strict";function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}return i(primevue.base.style).default.extend({name:"chips",classes:{root:function(e){var i=e.instance,n=e.props;return["p-chips p-component p-inputwrapper",{"p-disabled":n.disabled,"p-invalid":n.invalid,"p-focus":i.focused,"p-inputwrapper-filled":n.modelValue&&n.modelValue.length||i.inputValue&&i.inputValue.length,"p-inputwrapper-focus":i.focused}]},container:function(e){var i=e.props;return["p-inputtext p-chips-multiple-container",{"p-variant-filled":i.variant?"filled"===i.variant:"filled"===e.instance.$primevue.config.inputStyle}]},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"}})}();

package/colorpicker/ColorPicker.d.ts

@@ -54,7 +54,7 @@ export interface ColorPickerChangeEvent {
     /**
      * Browser event
      */
-    originalEvent: Event;
+    event: Event;
     /**
      * Selected color value.
      */

package/colorpicker/ColorPicker.vue

@@ -96,8 +96,7 @@ export default {
             this.selfUpdate = true;
             this.updateColorHandle();
             this.updateInput();
-            this.updateModel();
-            this.$emit('change', { event: event, value: this.modelValue });
+            this.updateModel(event);
         },
         pickHue(event) {
             let top = this.hueView.getBoundingClientRect().top + (window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0);
@@ -111,28 +110,32 @@ export default {
             this.selfUpdate = true;
             this.updateColorSelector();
             this.updateHue();
-            this.updateModel();
+            this.updateModel(event);
             this.updateInput();
-            this.$emit('change', { event: event, value: this.modelValue });
         },
-        updateModel() {
+        updateModel(event) {
+            let value = this.modelValue;
+
             switch (this.format) {
                 case 'hex':
-                    this.$emit('update:modelValue', this.HSBtoHEX(this.hsbValue));
+                    value = this.HSBtoHEX(this.hsbValue);
                     break;
 
                 case 'rgb':
-                    this.$emit('update:modelValue', this.HSBtoRGB(this.hsbValue));
+                    value = this.HSBtoRGB(this.hsbValue);
                     break;
 
                 case 'hsb':
-                    this.$emit('update:modelValue', this.hsbValue);
+                    value = this.hsbValue;
                     break;
 
                 default:
                     //NoOp
                     break;
             }
+
+            this.$emit('update:modelValue', value);
+            this.$emit('change', { event, value });
         },
         updateColorSelector() {
             if (this.colorSelector) {