primevue 3.26.1 → 3.28.0

package/chart/chart.cjs.min.js

@@ -1 +1 @@
-"use strict";var t=require("vue");function e(t){if(t&&t.__esModule)return t;var e=Object.create(null);return t&&Object.keys(t).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(t,r);Object.defineProperty(e,r,n.get?n:{enumerable:!0,get:function(){return t[r]}})}})),e.default=t,Object.freeze(e)}var r={name:"Chart",emits:["select","loaded"],props:{type:String,data:null,options:null,plugins:null,width:{type:Number,default:300},height:{type:Number,default:150},canvasProps:{type:null,default:null}},chart:null,watch:{data:{handler(){this.reinit()},deep:!0},type(){this.reinit()},options(){this.reinit()}},mounted(){this.initChart()},beforeUnmount(){this.chart&&(this.chart.destroy(),this.chart=null)},methods:{initChart(){Promise.resolve().then((function(){return e(require("chart.js/auto"))})).then((t=>{this.chart&&(this.chart.destroy(),this.chart=null),t&&t.default&&(this.chart=new t.default(this.$refs.canvas,{type:this.type,data:this.data,options:this.options,plugins:this.plugins})),this.$emit("loaded",this.chart)}))},getCanvas(){return this.$canvas},getChart(){return this.chart},getBase64Image(){return this.chart.toBase64Image()},refresh(){this.chart&&this.chart.update()},reinit(){this.initChart()},onCanvasClick(t){if(this.chart){const e=this.chart.getElementsAtEventForMode(t,"nearest",{intersect:!0},!1),r=this.chart.getElementsAtEventForMode(t,"dataset",{intersect:!0},!1);e&&e[0]&&r&&this.$emit("select",{originalEvent:t,element:e[0],dataset:r})}},generateLegend(){if(this.chart)return this.chart.generateLegend()}}};const n={class:"p-chart"},i=["width","height"];!function(t,e){void 0===e&&(e={});var r=e.insertAt;if(t&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===r&&n.firstChild?n.insertBefore(i,n.firstChild):n.appendChild(i),i.styleSheet?i.styleSheet.cssText=t:i.appendChild(document.createTextNode(t))}}("\n.p-chart {\n    position: relative;\n}\n"),r.render=function(e,r,a,s,h,c){return t.openBlock(),t.createElementBlock("div",n,[t.createElementVNode("canvas",t.mergeProps({ref:"canvas",width:a.width,height:a.height,onClick:r[0]||(r[0]=t=>c.onCanvasClick(t))},a.canvasProps),null,16,i)])},module.exports=r;
+"use strict";var t=require("primevue/basecomponent"),e=require("vue");function r(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}function n(t){if(t&&t.__esModule)return t;var e=Object.create(null);return t&&Object.keys(t).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(t,r);Object.defineProperty(e,r,n.get?n:{enumerable:!0,get:function(){return t[r]}})}})),e.default=t,Object.freeze(e)}var a={name:"Chart",extends:r(t).default,emits:["select","loaded"],props:{type:String,data:null,options:null,plugins:null,width:{type:Number,default:300},height:{type:Number,default:150},canvasProps:{type:null,default:null}},chart:null,watch:{data:{handler(){this.reinit()},deep:!0},type(){this.reinit()},options(){this.reinit()}},mounted(){this.initChart()},beforeUnmount(){this.chart&&(this.chart.destroy(),this.chart=null)},methods:{initChart(){Promise.resolve().then((function(){return n(require("chart.js/auto"))})).then((t=>{this.chart&&(this.chart.destroy(),this.chart=null),t&&t.default&&(this.chart=new t.default(this.$refs.canvas,{type:this.type,data:this.data,options:this.options,plugins:this.plugins})),this.$emit("loaded",this.chart)}))},getCanvas(){return this.$canvas},getChart(){return this.chart},getBase64Image(){return this.chart.toBase64Image()},refresh(){this.chart&&this.chart.update()},reinit(){this.initChart()},onCanvasClick(t){if(this.chart){const e=this.chart.getElementsAtEventForMode(t,"nearest",{intersect:!0},!1),r=this.chart.getElementsAtEventForMode(t,"dataset",{intersect:!0},!1);e&&e[0]&&r&&this.$emit("select",{originalEvent:t,element:e[0],dataset:r})}},generateLegend(){if(this.chart)return this.chart.generateLegend()}}};const i=["width","height"];!function(t,e){void 0===e&&(e={});var r=e.insertAt;if(t&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===r&&n.firstChild?n.insertBefore(a,n.firstChild):n.appendChild(a),a.styleSheet?a.styleSheet.cssText=t:a.appendChild(document.createTextNode(t))}}("\n.p-chart {\n    position: relative;\n}\n"),a.render=function(t,r,n,a,s,h){return e.openBlock(),e.createElementBlock("div",e.mergeProps({class:"p-chart"},t.ptm("root")),[e.createElementVNode("canvas",e.mergeProps({ref:"canvas",width:n.width,height:n.height,onClick:r[0]||(r[0]=t=>h.onCanvasClick(t))},{...n.canvasProps,...t.ptm("canvas")}),null,16,i)],16)},module.exports=a;

package/chart/chart.esm.js

@@ -1,7 +1,9 @@
-import { openBlock, createElementBlock, createElementVNode, mergeProps } from 'vue';
+import BaseComponent from 'primevue/basecomponent';
+import { openBlock, createElementBlock, mergeProps, createElementVNode } from 'vue';
 
 var script = {
     name: 'Chart',
+    extends: BaseComponent,
     emits: ['select', 'loaded'],
     props: {
         type: String,
@@ -104,18 +106,17 @@ var script = {
     }
 };
 
-const _hoisted_1 = { class: "p-chart" };
-const _hoisted_2 = ["width", "height"];
+const _hoisted_1 = ["width", "height"];
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), createElementBlock("div", _hoisted_1, [
+  return (openBlock(), createElementBlock("div", mergeProps({ class: "p-chart" }, _ctx.ptm('root')), [
     createElementVNode("canvas", mergeProps({
       ref: "canvas",
       width: $props.width,
       height: $props.height,
       onClick: _cache[0] || (_cache[0] = $event => ($options.onCanvasClick($event)))
-    }, $props.canvasProps), null, 16, _hoisted_2)
-  ]))
+    }, { ...$props.canvasProps, ..._ctx.ptm('canvas') }), null, 16, _hoisted_1)
+  ], 16))
 }
 
 function styleInject(css, ref) {

package/chart/chart.esm.min.js

@@ -1 +1 @@
-import{openBlock as t,createElementBlock as e,createElementVNode as a,mergeProps as i}from"vue";var n={name:"Chart",emits:["select","loaded"],props:{type:String,data:null,options:null,plugins:null,width:{type:Number,default:300},height:{type:Number,default:150},canvasProps:{type:null,default:null}},chart:null,watch:{data:{handler(){this.reinit()},deep:!0},type(){this.reinit()},options(){this.reinit()}},mounted(){this.initChart()},beforeUnmount(){this.chart&&(this.chart.destroy(),this.chart=null)},methods:{initChart(){import("chart.js/auto").then((t=>{this.chart&&(this.chart.destroy(),this.chart=null),t&&t.default&&(this.chart=new t.default(this.$refs.canvas,{type:this.type,data:this.data,options:this.options,plugins:this.plugins})),this.$emit("loaded",this.chart)}))},getCanvas(){return this.$canvas},getChart(){return this.chart},getBase64Image(){return this.chart.toBase64Image()},refresh(){this.chart&&this.chart.update()},reinit(){this.initChart()},onCanvasClick(t){if(this.chart){const e=this.chart.getElementsAtEventForMode(t,"nearest",{intersect:!0},!1),a=this.chart.getElementsAtEventForMode(t,"dataset",{intersect:!0},!1);e&&e[0]&&a&&this.$emit("select",{originalEvent:t,element:e[0],dataset:a})}},generateLegend(){if(this.chart)return this.chart.generateLegend()}}};const s={class:"p-chart"},h=["width","height"];!function(t,e){void 0===e&&(e={});var a=e.insertAt;if(t&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===a&&i.firstChild?i.insertBefore(n,i.firstChild):i.appendChild(n),n.styleSheet?n.styleSheet.cssText=t:n.appendChild(document.createTextNode(t))}}("\n.p-chart {\n    position: relative;\n}\n"),n.render=function(n,r,d,l,c,o){return t(),e("div",s,[a("canvas",i({ref:"canvas",width:d.width,height:d.height,onClick:r[0]||(r[0]=t=>o.onCanvasClick(t))},d.canvasProps),null,16,h)])};export{n as default};
+import t from"primevue/basecomponent";import{openBlock as e,createElementBlock as a,mergeProps as i,createElementVNode as n}from"vue";var s={name:"Chart",extends:t,emits:["select","loaded"],props:{type:String,data:null,options:null,plugins:null,width:{type:Number,default:300},height:{type:Number,default:150},canvasProps:{type:null,default:null}},chart:null,watch:{data:{handler(){this.reinit()},deep:!0},type(){this.reinit()},options(){this.reinit()}},mounted(){this.initChart()},beforeUnmount(){this.chart&&(this.chart.destroy(),this.chart=null)},methods:{initChart(){import("chart.js/auto").then((t=>{this.chart&&(this.chart.destroy(),this.chart=null),t&&t.default&&(this.chart=new t.default(this.$refs.canvas,{type:this.type,data:this.data,options:this.options,plugins:this.plugins})),this.$emit("loaded",this.chart)}))},getCanvas(){return this.$canvas},getChart(){return this.chart},getBase64Image(){return this.chart.toBase64Image()},refresh(){this.chart&&this.chart.update()},reinit(){this.initChart()},onCanvasClick(t){if(this.chart){const e=this.chart.getElementsAtEventForMode(t,"nearest",{intersect:!0},!1),a=this.chart.getElementsAtEventForMode(t,"dataset",{intersect:!0},!1);e&&e[0]&&a&&this.$emit("select",{originalEvent:t,element:e[0],dataset:a})}},generateLegend(){if(this.chart)return this.chart.generateLegend()}}};const r=["width","height"];!function(t,e){void 0===e&&(e={});var a=e.insertAt;if(t&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===a&&i.firstChild?i.insertBefore(n,i.firstChild):i.appendChild(n),n.styleSheet?n.styleSheet.cssText=t:n.appendChild(document.createTextNode(t))}}("\n.p-chart {\n    position: relative;\n}\n"),s.render=function(t,s,h,o,c,d){return e(),a("div",i({class:"p-chart"},t.ptm("root")),[n("canvas",i({ref:"canvas",width:h.width,height:h.height,onClick:s[0]||(s[0]=t=>d.onCanvasClick(t))},{...h.canvasProps,...t.ptm("canvas")}),null,16,r)],16)};export{s as default};

package/chart/chart.js

@@ -1,9 +1,14 @@
 this.primevue = this.primevue || {};
-this.primevue.chart = (function (vue) {
+this.primevue.chart = (function (BaseComponent, vue) {
     'use strict';
 
+    function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+    var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
+
     var script = {
         name: 'Chart',
+        extends: BaseComponent__default["default"],
         emits: ['select', 'loaded'],
         props: {
             type: String,
@@ -106,18 +111,17 @@ this.primevue.chart = (function (vue) {
         }
     };
 
-    const _hoisted_1 = { class: "p-chart" };
-    const _hoisted_2 = ["width", "height"];
+    const _hoisted_1 = ["width", "height"];
 
     function render(_ctx, _cache, $props, $setup, $data, $options) {
-      return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+      return (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({ class: "p-chart" }, _ctx.ptm('root')), [
         vue.createElementVNode("canvas", vue.mergeProps({
           ref: "canvas",
           width: $props.width,
           height: $props.height,
           onClick: _cache[0] || (_cache[0] = $event => ($options.onCanvasClick($event)))
-        }, $props.canvasProps), null, 16, _hoisted_2)
-      ]))
+        }, { ...$props.canvasProps, ..._ctx.ptm('canvas') }), null, 16, _hoisted_1)
+      ], 16))
     }
 
     function styleInject(css, ref) {
@@ -154,4 +158,4 @@ this.primevue.chart = (function (vue) {
 
     return script;
 
-})(Vue);
+})(primevue.basecomponent, Vue);

package/chart/chart.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.chart=function(t){"use strict";var e={name:"Chart",emits:["select","loaded"],props:{type:String,data:null,options:null,plugins:null,width:{type:Number,default:300},height:{type:Number,default:150},canvasProps:{type:null,default:null}},chart:null,watch:{data:{handler(){this.reinit()},deep:!0},type(){this.reinit()},options(){this.reinit()}},mounted(){this.initChart()},beforeUnmount(){this.chart&&(this.chart.destroy(),this.chart=null)},methods:{initChart(){import("chart.js/auto").then((t=>{this.chart&&(this.chart.destroy(),this.chart=null),t&&t.default&&(this.chart=new t.default(this.$refs.canvas,{type:this.type,data:this.data,options:this.options,plugins:this.plugins})),this.$emit("loaded",this.chart)}))},getCanvas(){return this.$canvas},getChart(){return this.chart},getBase64Image(){return this.chart.toBase64Image()},refresh(){this.chart&&this.chart.update()},reinit(){this.initChart()},onCanvasClick(t){if(this.chart){const e=this.chart.getElementsAtEventForMode(t,"nearest",{intersect:!0},!1),i=this.chart.getElementsAtEventForMode(t,"dataset",{intersect:!0},!1);e&&e[0]&&i&&this.$emit("select",{originalEvent:t,element:e[0],dataset:i})}},generateLegend(){if(this.chart)return this.chart.generateLegend()}}};const i={class:"p-chart"},n=["width","height"];return function(t,e){void 0===e&&(e={});var i=e.insertAt;if(t&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===i&&n.firstChild?n.insertBefore(a,n.firstChild):n.appendChild(a),a.styleSheet?a.styleSheet.cssText=t:a.appendChild(document.createTextNode(t))}}("\n.p-chart {\n    position: relative;\n}\n"),e.render=function(e,a,s,r,h,c){return t.openBlock(),t.createElementBlock("div",i,[t.createElementVNode("canvas",t.mergeProps({ref:"canvas",width:s.width,height:s.height,onClick:a[0]||(a[0]=t=>c.onCanvasClick(t))},s.canvasProps),null,16,n)])},e}(Vue);
+this.primevue=this.primevue||{},this.primevue.chart=function(t,e){"use strict";function i(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var n={name:"Chart",extends:i(t).default,emits:["select","loaded"],props:{type:String,data:null,options:null,plugins:null,width:{type:Number,default:300},height:{type:Number,default:150},canvasProps:{type:null,default:null}},chart:null,watch:{data:{handler(){this.reinit()},deep:!0},type(){this.reinit()},options(){this.reinit()}},mounted(){this.initChart()},beforeUnmount(){this.chart&&(this.chart.destroy(),this.chart=null)},methods:{initChart(){import("chart.js/auto").then((t=>{this.chart&&(this.chart.destroy(),this.chart=null),t&&t.default&&(this.chart=new t.default(this.$refs.canvas,{type:this.type,data:this.data,options:this.options,plugins:this.plugins})),this.$emit("loaded",this.chart)}))},getCanvas(){return this.$canvas},getChart(){return this.chart},getBase64Image(){return this.chart.toBase64Image()},refresh(){this.chart&&this.chart.update()},reinit(){this.initChart()},onCanvasClick(t){if(this.chart){const e=this.chart.getElementsAtEventForMode(t,"nearest",{intersect:!0},!1),i=this.chart.getElementsAtEventForMode(t,"dataset",{intersect:!0},!1);e&&e[0]&&i&&this.$emit("select",{originalEvent:t,element:e[0],dataset:i})}},generateLegend(){if(this.chart)return this.chart.generateLegend()}}};const a=["width","height"];return function(t,e){void 0===e&&(e={});var i=e.insertAt;if(t&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===i&&n.firstChild?n.insertBefore(a,n.firstChild):n.appendChild(a),a.styleSheet?a.styleSheet.cssText=t:a.appendChild(document.createTextNode(t))}}("\n.p-chart {\n    position: relative;\n}\n"),n.render=function(t,i,n,s,r,h){return e.openBlock(),e.createElementBlock("div",e.mergeProps({class:"p-chart"},t.ptm("root")),[e.createElementVNode("canvas",e.mergeProps({ref:"canvas",width:n.width,height:n.height,onClick:i[0]||(i[0]=t=>h.onCanvasClick(t))},{...n.canvasProps,...t.ptm("canvas")}),null,16,a)],16)},n}(primevue.basecomponent,Vue);

package/checkbox/Checkbox.d.ts

@@ -7,7 +7,7 @@
  * @module checkbox
  *
  */
-import { InputHTMLAttributes } from 'vue';
+import { InputHTMLAttributes, VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
 /**
@@ -86,7 +86,18 @@ export interface CheckboxProps {
     'aria-label'?: string | undefined;
 }
 
-export interface CheckboxSlots {}
+export interface CheckboxSlots {
+    /**
+     * Custom icon template.
+     * @param {Object} scope - icon slot's params.
+     */
+    icon(scope: {
+        /**
+         * State of the checkbox.
+         */
+        checked: boolean;
+    }): VNode[];
+}
 
 /**
  * Defines valid emits in Checkbox component.

package/checkbox/Checkbox.vue

@@ -20,12 +20,15 @@
             />
         </div>
         <div ref="box" :class="['p-checkbox-box', inputClass, { 'p-highlight': checked, 'p-disabled': disabled, 'p-focus': focused }]" :style="inputStyle">
-            <span :class="['p-checkbox-icon', { 'pi pi-check': checked }]"></span>
+            <slot name="icon" :checked="checked">
+                <component :is="checked ? 'CheckIcon' : null" class="p-checkbox-icon" />
+            </slot>
         </div>
     </div>
 </template>
 
 <script>
+import CheckIcon from 'primevue/icons/check';
 import { ObjectUtils } from 'primevue/utils';
 
 export default {
@@ -135,6 +138,9 @@ export default {
                 }
             ];
         }
+    },
+    components: {
+        CheckIcon: CheckIcon
     }
 };
 </script>

package/checkbox/checkbox.cjs.js

@@ -1,8 +1,13 @@
 'use strict';
 
+var CheckIcon = require('primevue/icons/check');
 var utils = require('primevue/utils');
 var vue = require('vue');
 
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var CheckIcon__default = /*#__PURE__*/_interopDefaultLegacy(CheckIcon);
+
 var script = {
     name: 'Checkbox',
     emits: ['click', 'update:modelValue', 'change', 'input', 'focus', 'blur'],
@@ -110,6 +115,9 @@ var script = {
                 }
             ];
         }
+    },
+    components: {
+        CheckIcon: CheckIcon__default["default"]
     }
 };
 
@@ -144,9 +152,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       class: vue.normalizeClass(['p-checkbox-box', $props.inputClass, { 'p-highlight': $options.checked, 'p-disabled': $props.disabled, 'p-focus': $data.focused }]),
       style: vue.normalizeStyle($props.inputStyle)
     }, [
-      vue.createElementVNode("span", {
-        class: vue.normalizeClass(['p-checkbox-icon', { 'pi pi-check': $options.checked }])
-      }, null, 2)
+      vue.renderSlot(_ctx.$slots, "icon", { checked: $options.checked }, () => [
+        (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($options.checked ? 'CheckIcon' : null), { class: "p-checkbox-icon" }))
+      ])
     ], 6)
   ], 2))
 }

package/checkbox/checkbox.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("primevue/utils"),l=require("vue"),t={name:"Checkbox",emits:["click","update:modelValue","change","input","focus","blur"],props:{value:null,modelValue:null,binary:Boolean,name:{type:String,default:null},trueValue:{type:null,default:!0},falseValue:{type:null,default:!1},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},required:{type:Boolean,default:!1},tabindex:{type:Number,default:null},inputId:{type:String,default:null},inputClass:{type:[String,Object],default:null},inputStyle:{type:Object,default:null},inputProps:{type:null,default:null},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},data:()=>({focused:!1}),methods:{onClick(l){if(!this.disabled&&!this.readonly){let t;t=this.binary?this.checked?this.falseValue:this.trueValue:this.checked?this.modelValue.filter((l=>!e.ObjectUtils.equals(l,this.value))):this.modelValue?[...this.modelValue,this.value]:[this.value],this.$emit("click",l),this.$emit("update:modelValue",t),this.$emit("change",l),this.$emit("input",t),this.$refs.input.focus()}},onFocus(e){this.focused=!0,this.$emit("focus",e)},onBlur(e){this.focused=!1,this.$emit("blur",e)}},computed:{checked(){return this.binary?this.modelValue===this.trueValue:e.ObjectUtils.contains(this.value,this.modelValue)},containerClass(){return["p-checkbox p-component",{"p-checkbox-checked":this.checked,"p-checkbox-disabled":this.disabled,"p-checkbox-focused":this.focused}]}}};const a={class:"p-hidden-accessible"},i=["id","value","name","checked","tabindex","disabled","readonly","required","aria-labelledby","aria-label"];t.render=function(e,t,u,s,n,d){return l.openBlock(),l.createElementBlock("div",{class:l.normalizeClass(d.containerClass),onClick:t[2]||(t[2]=e=>d.onClick(e))},[l.createElementVNode("div",a,[l.createElementVNode("input",l.mergeProps({ref:"input",id:u.inputId,type:"checkbox",value:u.value,name:u.name,checked:d.checked,tabindex:u.tabindex,disabled:u.disabled,readonly:u.readonly,required:u.required,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,onFocus:t[0]||(t[0]=e=>d.onFocus(e)),onBlur:t[1]||(t[1]=e=>d.onBlur(e))},u.inputProps),null,16,i)]),l.createElementVNode("div",{ref:"box",class:l.normalizeClass(["p-checkbox-box",u.inputClass,{"p-highlight":d.checked,"p-disabled":u.disabled,"p-focus":n.focused}]),style:l.normalizeStyle(u.inputStyle)},[l.createElementVNode("span",{class:l.normalizeClass(["p-checkbox-icon",{"pi pi-check":d.checked}])},null,2)],6)],2)},module.exports=t;
+"use strict";var e=require("primevue/icons/check"),l=require("primevue/utils"),t=require("vue");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i={name:"Checkbox",emits:["click","update:modelValue","change","input","focus","blur"],props:{value:null,modelValue:null,binary:Boolean,name:{type:String,default:null},trueValue:{type:null,default:!0},falseValue:{type:null,default:!1},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},required:{type:Boolean,default:!1},tabindex:{type:Number,default:null},inputId:{type:String,default:null},inputClass:{type:[String,Object],default:null},inputStyle:{type:Object,default:null},inputProps:{type:null,default:null},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},data:()=>({focused:!1}),methods:{onClick(e){if(!this.disabled&&!this.readonly){let t;t=this.binary?this.checked?this.falseValue:this.trueValue:this.checked?this.modelValue.filter((e=>!l.ObjectUtils.equals(e,this.value))):this.modelValue?[...this.modelValue,this.value]:[this.value],this.$emit("click",e),this.$emit("update:modelValue",t),this.$emit("change",e),this.$emit("input",t),this.$refs.input.focus()}},onFocus(e){this.focused=!0,this.$emit("focus",e)},onBlur(e){this.focused=!1,this.$emit("blur",e)}},computed:{checked(){return this.binary?this.modelValue===this.trueValue:l.ObjectUtils.contains(this.value,this.modelValue)},containerClass(){return["p-checkbox p-component",{"p-checkbox-checked":this.checked,"p-checkbox-disabled":this.disabled,"p-checkbox-focused":this.focused}]}},components:{CheckIcon:a(e).default}};const u={class:"p-hidden-accessible"},n=["id","value","name","checked","tabindex","disabled","readonly","required","aria-labelledby","aria-label"];i.render=function(e,l,a,i,c,s){return t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(s.containerClass),onClick:l[2]||(l[2]=e=>s.onClick(e))},[t.createElementVNode("div",u,[t.createElementVNode("input",t.mergeProps({ref:"input",id:a.inputId,type:"checkbox",value:a.value,name:a.name,checked:s.checked,tabindex:a.tabindex,disabled:a.disabled,readonly:a.readonly,required:a.required,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,onFocus:l[0]||(l[0]=e=>s.onFocus(e)),onBlur:l[1]||(l[1]=e=>s.onBlur(e))},a.inputProps),null,16,n)]),t.createElementVNode("div",{ref:"box",class:t.normalizeClass(["p-checkbox-box",a.inputClass,{"p-highlight":s.checked,"p-disabled":a.disabled,"p-focus":c.focused}]),style:t.normalizeStyle(a.inputStyle)},[t.renderSlot(e.$slots,"icon",{checked:s.checked},(()=>[(t.openBlock(),t.createBlock(t.resolveDynamicComponent(s.checked?"CheckIcon":null),{class:"p-checkbox-icon"}))]))],6)],2)},module.exports=i;

package/checkbox/checkbox.esm.js

@@ -1,5 +1,6 @@
+import CheckIcon from 'primevue/icons/check';
 import { ObjectUtils } from 'primevue/utils';
-import { openBlock, createElementBlock, normalizeClass, createElementVNode, mergeProps, normalizeStyle } from 'vue';
+import { openBlock, createElementBlock, normalizeClass, createElementVNode, mergeProps, normalizeStyle, renderSlot, createBlock, resolveDynamicComponent } from 'vue';
 
 var script = {
     name: 'Checkbox',
@@ -108,6 +109,9 @@ var script = {
                 }
             ];
         }
+    },
+    components: {
+        CheckIcon: CheckIcon
     }
 };
 
@@ -142,9 +146,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       class: normalizeClass(['p-checkbox-box', $props.inputClass, { 'p-highlight': $options.checked, 'p-disabled': $props.disabled, 'p-focus': $data.focused }]),
       style: normalizeStyle($props.inputStyle)
     }, [
-      createElementVNode("span", {
-        class: normalizeClass(['p-checkbox-icon', { 'pi pi-check': $options.checked }])
-      }, null, 2)
+      renderSlot(_ctx.$slots, "icon", { checked: $options.checked }, () => [
+        (openBlock(), createBlock(resolveDynamicComponent($options.checked ? 'CheckIcon' : null), { class: "p-checkbox-icon" }))
+      ])
     ], 6)
   ], 2))
 }

package/checkbox/checkbox.esm.min.js

@@ -1 +1 @@
-import{ObjectUtils as e}from"primevue/utils";import{openBlock as l,createElementBlock as t,normalizeClass as a,createElementVNode as i,mergeProps as u,normalizeStyle as d}from"vue";var s={name:"Checkbox",emits:["click","update:modelValue","change","input","focus","blur"],props:{value:null,modelValue:null,binary:Boolean,name:{type:String,default:null},trueValue:{type:null,default:!0},falseValue:{type:null,default:!1},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},required:{type:Boolean,default:!1},tabindex:{type:Number,default:null},inputId:{type:String,default:null},inputClass:{type:[String,Object],default:null},inputStyle:{type:Object,default:null},inputProps:{type:null,default:null},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},data:()=>({focused:!1}),methods:{onClick(l){if(!this.disabled&&!this.readonly){let t;t=this.binary?this.checked?this.falseValue:this.trueValue:this.checked?this.modelValue.filter((l=>!e.equals(l,this.value))):this.modelValue?[...this.modelValue,this.value]:[this.value],this.$emit("click",l),this.$emit("update:modelValue",t),this.$emit("change",l),this.$emit("input",t),this.$refs.input.focus()}},onFocus(e){this.focused=!0,this.$emit("focus",e)},onBlur(e){this.focused=!1,this.$emit("blur",e)}},computed:{checked(){return this.binary?this.modelValue===this.trueValue:e.contains(this.value,this.modelValue)},containerClass(){return["p-checkbox p-component",{"p-checkbox-checked":this.checked,"p-checkbox-disabled":this.disabled,"p-checkbox-focused":this.focused}]}}};const n={class:"p-hidden-accessible"},c=["id","value","name","checked","tabindex","disabled","readonly","required","aria-labelledby","aria-label"];s.render=function(e,s,o,r,h,p){return l(),t("div",{class:a(p.containerClass),onClick:s[2]||(s[2]=e=>p.onClick(e))},[i("div",n,[i("input",u({ref:"input",id:o.inputId,type:"checkbox",value:o.value,name:o.name,checked:p.checked,tabindex:o.tabindex,disabled:o.disabled,readonly:o.readonly,required:o.required,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,onFocus:s[0]||(s[0]=e=>p.onFocus(e)),onBlur:s[1]||(s[1]=e=>p.onBlur(e))},o.inputProps),null,16,c)]),i("div",{ref:"box",class:a(["p-checkbox-box",o.inputClass,{"p-highlight":p.checked,"p-disabled":o.disabled,"p-focus":h.focused}]),style:d(o.inputStyle)},[i("span",{class:a(["p-checkbox-icon",{"pi pi-check":p.checked}])},null,2)],6)],2)};export{s as default};
+import e from"primevue/icons/check";import{ObjectUtils as l}from"primevue/utils";import{openBlock as t,createElementBlock as a,normalizeClass as i,createElementVNode as u,mergeProps as d,normalizeStyle as n,renderSlot as s,createBlock as c,resolveDynamicComponent as o}from"vue";var r={name:"Checkbox",emits:["click","update:modelValue","change","input","focus","blur"],props:{value:null,modelValue:null,binary:Boolean,name:{type:String,default:null},trueValue:{type:null,default:!0},falseValue:{type:null,default:!1},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},required:{type:Boolean,default:!1},tabindex:{type:Number,default:null},inputId:{type:String,default:null},inputClass:{type:[String,Object],default:null},inputStyle:{type:Object,default:null},inputProps:{type:null,default:null},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},data:()=>({focused:!1}),methods:{onClick(e){if(!this.disabled&&!this.readonly){let t;t=this.binary?this.checked?this.falseValue:this.trueValue:this.checked?this.modelValue.filter((e=>!l.equals(e,this.value))):this.modelValue?[...this.modelValue,this.value]:[this.value],this.$emit("click",e),this.$emit("update:modelValue",t),this.$emit("change",e),this.$emit("input",t),this.$refs.input.focus()}},onFocus(e){this.focused=!0,this.$emit("focus",e)},onBlur(e){this.focused=!1,this.$emit("blur",e)}},computed:{checked(){return this.binary?this.modelValue===this.trueValue:l.contains(this.value,this.modelValue)},containerClass(){return["p-checkbox p-component",{"p-checkbox-checked":this.checked,"p-checkbox-disabled":this.disabled,"p-checkbox-focused":this.focused}]}},components:{CheckIcon:e}};const h={class:"p-hidden-accessible"},p=["id","value","name","checked","tabindex","disabled","readonly","required","aria-labelledby","aria-label"];r.render=function(e,l,r,b,f,m){return t(),a("div",{class:i(m.containerClass),onClick:l[2]||(l[2]=e=>m.onClick(e))},[u("div",h,[u("input",d({ref:"input",id:r.inputId,type:"checkbox",value:r.value,name:r.name,checked:m.checked,tabindex:r.tabindex,disabled:r.disabled,readonly:r.readonly,required:r.required,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,onFocus:l[0]||(l[0]=e=>m.onFocus(e)),onBlur:l[1]||(l[1]=e=>m.onBlur(e))},r.inputProps),null,16,p)]),u("div",{ref:"box",class:i(["p-checkbox-box",r.inputClass,{"p-highlight":m.checked,"p-disabled":r.disabled,"p-focus":f.focused}]),style:n(r.inputStyle)},[s(e.$slots,"icon",{checked:m.checked},(()=>[(t(),c(o(m.checked?"CheckIcon":null),{class:"p-checkbox-icon"}))]))],6)],2)};export{r as default};

package/checkbox/checkbox.js

@@ -1,7 +1,11 @@
 this.primevue = this.primevue || {};
-this.primevue.checkbox = (function (utils, vue) {
+this.primevue.checkbox = (function (CheckIcon, utils, vue) {
     'use strict';
 
+    function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+    var CheckIcon__default = /*#__PURE__*/_interopDefaultLegacy(CheckIcon);
+
     var script = {
         name: 'Checkbox',
         emits: ['click', 'update:modelValue', 'change', 'input', 'focus', 'blur'],
@@ -109,6 +113,9 @@ this.primevue.checkbox = (function (utils, vue) {
                     }
                 ];
             }
+        },
+        components: {
+            CheckIcon: CheckIcon__default["default"]
         }
     };
 
@@ -143,9 +150,9 @@ this.primevue.checkbox = (function (utils, vue) {
           class: vue.normalizeClass(['p-checkbox-box', $props.inputClass, { 'p-highlight': $options.checked, 'p-disabled': $props.disabled, 'p-focus': $data.focused }]),
           style: vue.normalizeStyle($props.inputStyle)
         }, [
-          vue.createElementVNode("span", {
-            class: vue.normalizeClass(['p-checkbox-icon', { 'pi pi-check': $options.checked }])
-          }, null, 2)
+          vue.renderSlot(_ctx.$slots, "icon", { checked: $options.checked }, () => [
+            (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($options.checked ? 'CheckIcon' : null), { class: "p-checkbox-icon" }))
+          ])
         ], 6)
       ], 2))
     }
@@ -154,4 +161,4 @@ this.primevue.checkbox = (function (utils, vue) {
 
     return script;
 
-})(primevue.utils, Vue);
+})(primevue.icons.check, primevue.utils, Vue);

package/checkbox/checkbox.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.checkbox=function(e,l){"use strict";var t={name:"Checkbox",emits:["click","update:modelValue","change","input","focus","blur"],props:{value:null,modelValue:null,binary:Boolean,name:{type:String,default:null},trueValue:{type:null,default:!0},falseValue:{type:null,default:!1},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},required:{type:Boolean,default:!1},tabindex:{type:Number,default:null},inputId:{type:String,default:null},inputClass:{type:[String,Object],default:null},inputStyle:{type:Object,default:null},inputProps:{type:null,default:null},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},data:()=>({focused:!1}),methods:{onClick(l){if(!this.disabled&&!this.readonly){let t;t=this.binary?this.checked?this.falseValue:this.trueValue:this.checked?this.modelValue.filter((l=>!e.ObjectUtils.equals(l,this.value))):this.modelValue?[...this.modelValue,this.value]:[this.value],this.$emit("click",l),this.$emit("update:modelValue",t),this.$emit("change",l),this.$emit("input",t),this.$refs.input.focus()}},onFocus(e){this.focused=!0,this.$emit("focus",e)},onBlur(e){this.focused=!1,this.$emit("blur",e)}},computed:{checked(){return this.binary?this.modelValue===this.trueValue:e.ObjectUtils.contains(this.value,this.modelValue)},containerClass(){return["p-checkbox p-component",{"p-checkbox-checked":this.checked,"p-checkbox-disabled":this.disabled,"p-checkbox-focused":this.focused}]}}};const a={class:"p-hidden-accessible"},i=["id","value","name","checked","tabindex","disabled","readonly","required","aria-labelledby","aria-label"];return t.render=function(e,t,u,s,n,d){return l.openBlock(),l.createElementBlock("div",{class:l.normalizeClass(d.containerClass),onClick:t[2]||(t[2]=e=>d.onClick(e))},[l.createElementVNode("div",a,[l.createElementVNode("input",l.mergeProps({ref:"input",id:u.inputId,type:"checkbox",value:u.value,name:u.name,checked:d.checked,tabindex:u.tabindex,disabled:u.disabled,readonly:u.readonly,required:u.required,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,onFocus:t[0]||(t[0]=e=>d.onFocus(e)),onBlur:t[1]||(t[1]=e=>d.onBlur(e))},u.inputProps),null,16,i)]),l.createElementVNode("div",{ref:"box",class:l.normalizeClass(["p-checkbox-box",u.inputClass,{"p-highlight":d.checked,"p-disabled":u.disabled,"p-focus":n.focused}]),style:l.normalizeStyle(u.inputStyle)},[l.createElementVNode("span",{class:l.normalizeClass(["p-checkbox-icon",{"pi pi-check":d.checked}])},null,2)],6)],2)},t}(primevue.utils,Vue);
+this.primevue=this.primevue||{},this.primevue.checkbox=function(e,l,t){"use strict";function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a={name:"Checkbox",emits:["click","update:modelValue","change","input","focus","blur"],props:{value:null,modelValue:null,binary:Boolean,name:{type:String,default:null},trueValue:{type:null,default:!0},falseValue:{type:null,default:!1},disabled:{type:Boolean,default:!1},readonly:{type:Boolean,default:!1},required:{type:Boolean,default:!1},tabindex:{type:Number,default:null},inputId:{type:String,default:null},inputClass:{type:[String,Object],default:null},inputStyle:{type:Object,default:null},inputProps:{type:null,default:null},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},data:()=>({focused:!1}),methods:{onClick(e){if(!this.disabled&&!this.readonly){let t;t=this.binary?this.checked?this.falseValue:this.trueValue:this.checked?this.modelValue.filter((e=>!l.ObjectUtils.equals(e,this.value))):this.modelValue?[...this.modelValue,this.value]:[this.value],this.$emit("click",e),this.$emit("update:modelValue",t),this.$emit("change",e),this.$emit("input",t),this.$refs.input.focus()}},onFocus(e){this.focused=!0,this.$emit("focus",e)},onBlur(e){this.focused=!1,this.$emit("blur",e)}},computed:{checked(){return this.binary?this.modelValue===this.trueValue:l.ObjectUtils.contains(this.value,this.modelValue)},containerClass(){return["p-checkbox p-component",{"p-checkbox-checked":this.checked,"p-checkbox-disabled":this.disabled,"p-checkbox-focused":this.focused}]}},components:{CheckIcon:i(e).default}};const u={class:"p-hidden-accessible"},n=["id","value","name","checked","tabindex","disabled","readonly","required","aria-labelledby","aria-label"];return a.render=function(e,l,i,a,c,s){return t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(s.containerClass),onClick:l[2]||(l[2]=e=>s.onClick(e))},[t.createElementVNode("div",u,[t.createElementVNode("input",t.mergeProps({ref:"input",id:i.inputId,type:"checkbox",value:i.value,name:i.name,checked:s.checked,tabindex:i.tabindex,disabled:i.disabled,readonly:i.readonly,required:i.required,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,onFocus:l[0]||(l[0]=e=>s.onFocus(e)),onBlur:l[1]||(l[1]=e=>s.onBlur(e))},i.inputProps),null,16,n)]),t.createElementVNode("div",{ref:"box",class:t.normalizeClass(["p-checkbox-box",i.inputClass,{"p-highlight":s.checked,"p-disabled":i.disabled,"p-focus":c.focused}]),style:t.normalizeStyle(i.inputStyle)},[t.renderSlot(e.$slots,"icon",{checked:s.checked},(()=>[(t.openBlock(),t.createBlock(t.resolveDynamicComponent(s.checked?"CheckIcon":null),{class:"p-checkbox-icon"}))]))],6)],2)},a}(primevue.icons.check,primevue.utils,Vue);

package/chip/Chip.d.ts

@@ -10,6 +10,61 @@
 import { VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type ChipPassThroughOptionType = ChipPassThroughAttributes | ((options: ChipPassThroughMethodOptions) => ChipPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ChipPassThroughMethodOptions {
+    props: ChipProps;
+    state: ChipState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link ChipProps.pt}
+ */
+export interface ChipPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: ChipPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the image's DOM element.
+     */
+    image?: ChipPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: ChipPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the label' DOM element.
+     */
+    label?: ChipPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the removeIcon's DOM element.
+     */
+    removeIcon?: ChipPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface ChipPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in Chip component.
+ */
+export interface ChipState {
+    /**
+     * Current visible state as a boolean.
+     * @defaultValue true
+     */
+    visible: boolean;
+}
+
 /**
  * Defines valid properties in Chip component.
  */
@@ -20,6 +75,7 @@ export interface ChipProps {
     label?: string;
     /**
      * Defines the icon to display.
+     * @deprecated since v3.27.0. Use 'icon' slot.
      */
     icon?: string;
     /**
@@ -33,9 +89,14 @@ export interface ChipProps {
     removable?: boolean;
     /**
      * Icon of the remove element.
-     * @defaultValue pi pi-times-circle
+     * @deprecated since v3.27.0. Use 'removeicon' slot.
      */
     removeIcon?: string;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {ChipPassThroughOptions}
+     */
+    pt?: ChipPassThroughOptions;
 }
 
 /**
@@ -46,6 +107,24 @@ export interface ChipSlots {
      * Content can easily be customized with the default slot instead of using the built-in modes.
      */
     default(): VNode[];
+    /**
+     * Custom icon template.
+     */
+    icon(): VNode[];
+    /**
+     * Custom remove icon template of chip component.
+     * @param {Object} scope - remove icon slot's params.
+     */
+    removeicon(scope: {
+        /**
+         * Remove icon click event
+         */
+        onClick(): void;
+        /**
+         * Remove icon keydown event
+         */
+        onKeydown(): void;
+    }): VNode[];
 }
 
 /**

package/chip/Chip.vue

@@ -1,17 +1,24 @@
 <template>
-    <div v-if="visible" :class="containerClass" :aria-label="label">
+    <div v-if="visible" :class="containerClass" :aria-label="label" v-bind="ptm('root')">
         <slot>
-            <img v-if="image" :src="image" />
-            <span v-else-if="icon" :class="iconClass"></span>
-            <div v-if="label" class="p-chip-text">{{ label }}</div>
+            <img v-if="image" :src="image" v-bind="ptm('image')" />
+            <component v-else-if="$slots.icon" :is="$slots.icon" class="p-chip-icon" v-bind="ptm('icon')" />
+            <span v-else-if="icon" :class="['p-chip-icon', icon]" v-bind="ptm('icon')" />
+            <div v-if="label" class="p-chip-text" v-bind="ptm('label')">{{ label }}</div>
+        </slot>
+        <slot v-if="removable" name="removeicon" :onClick="close" :onKeydown="onKeydown">
+            <component :is="removeIcon ? 'span' : 'TimesCircleIcon'" tabindex="0" :class="['p-chip-remove-icon', removeIcon]" @click="close" @keydown="onKeydown" v-bind="ptm('removeIcon')"></component>
         </slot>
-        <span v-if="removable" tabindex="0" :class="removeIconClass" @click="close" @keydown="onKeydown"></span>
     </div>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
+import TimesCircleIcon from 'primevue/icons/timescircle';
+
 export default {
     name: 'Chip',
+    extends: BaseComponent,
     emits: ['remove'],
     props: {
         label: {
@@ -32,7 +39,7 @@ export default {
         },
         removeIcon: {
             type: String,
-            default: 'pi pi-times-circle'
+            default: undefined
         }
     },
     data() {
@@ -59,13 +66,10 @@ export default {
                     'p-chip-image': this.image != null
                 }
             ];
-        },
-        iconClass() {
-            return ['p-chip-icon', this.icon];
-        },
-        removeIconClass() {
-            return ['p-chip-remove-icon', this.removeIcon];
         }
+    },
+    components: {
+        TimesCircleIcon
     }
 };
 </script>

package/chip/chip.cjs.js

@@ -1,9 +1,17 @@
 'use strict';
 
+var BaseComponent = require('primevue/basecomponent');
+var TimesCircleIcon = require('primevue/icons/timescircle');
 var vue = require('vue');
 
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
+var TimesCircleIcon__default = /*#__PURE__*/_interopDefaultLegacy(TimesCircleIcon);
+
 var script = {
     name: 'Chip',
+    extends: BaseComponent__default["default"],
     emits: ['remove'],
     props: {
         label: {
@@ -24,7 +32,7 @@ var script = {
         },
         removeIcon: {
             type: String,
-            default: 'pi pi-times-circle'
+            default: undefined
         }
     },
     data() {
@@ -51,56 +59,62 @@ var script = {
                     'p-chip-image': this.image != null
                 }
             ];
-        },
-        iconClass() {
-            return ['p-chip-icon', this.icon];
-        },
-        removeIconClass() {
-            return ['p-chip-remove-icon', this.removeIcon];
         }
+    },
+    components: {
+        TimesCircleIcon: TimesCircleIcon__default["default"]
     }
 };
 
 const _hoisted_1 = ["aria-label"];
 const _hoisted_2 = ["src"];
-const _hoisted_3 = {
-  key: 2,
-  class: "p-chip-text"
-};
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   return ($data.visible)
-    ? (vue.openBlock(), vue.createElementBlock("div", {
+    ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
         key: 0,
-        class: vue.normalizeClass($options.containerClass),
+        class: $options.containerClass,
         "aria-label": $props.label
-      }, [
+      }, _ctx.ptm('root')), [
         vue.renderSlot(_ctx.$slots, "default", {}, () => [
           ($props.image)
-            ? (vue.openBlock(), vue.createElementBlock("img", {
+            ? (vue.openBlock(), vue.createElementBlock("img", vue.mergeProps({
                 key: 0,
                 src: $props.image
-              }, null, 8, _hoisted_2))
-            : ($props.icon)
-              ? (vue.openBlock(), vue.createElementBlock("span", {
+              }, _ctx.ptm('image')), null, 16, _hoisted_2))
+            : (_ctx.$slots.icon)
+              ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.$slots.icon), vue.mergeProps({
                   key: 1,
-                  class: vue.normalizeClass($options.iconClass)
-                }, null, 2))
-              : vue.createCommentVNode("", true),
+                  class: "p-chip-icon"
+                }, _ctx.ptm('icon')), null, 16))
+              : ($props.icon)
+                ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
+                    key: 2,
+                    class: ['p-chip-icon', $props.icon]
+                  }, _ctx.ptm('icon')), null, 16))
+                : vue.createCommentVNode("", true),
           ($props.label)
-            ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, vue.toDisplayString($props.label), 1))
+            ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+                key: 3,
+                class: "p-chip-text"
+              }, _ctx.ptm('label')), vue.toDisplayString($props.label), 17))
             : vue.createCommentVNode("", true)
         ]),
         ($props.removable)
-          ? (vue.openBlock(), vue.createElementBlock("span", {
+          ? vue.renderSlot(_ctx.$slots, "removeicon", {
               key: 0,
-              tabindex: "0",
-              class: vue.normalizeClass($options.removeIconClass),
-              onClick: _cache[0] || (_cache[0] = (...args) => ($options.close && $options.close(...args))),
-              onKeydown: _cache[1] || (_cache[1] = (...args) => ($options.onKeydown && $options.onKeydown(...args)))
-            }, null, 34))
+              onClick: $options.close,
+              onKeydown: $options.onKeydown
+            }, () => [
+              (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.removeIcon ? 'span' : 'TimesCircleIcon'), vue.mergeProps({
+                tabindex: "0",
+                class: ['p-chip-remove-icon', $props.removeIcon],
+                onClick: $options.close,
+                onKeydown: $options.onKeydown
+              }, _ctx.ptm('removeIcon')), null, 16, ["class", "onClick", "onKeydown"]))
+            ])
           : vue.createCommentVNode("", true)
-      ], 10, _hoisted_1))
+      ], 16, _hoisted_1))
     : vue.createCommentVNode("", true)
 }