primevue 3.27.0 → 3.28.0

package/button/button.esm.min.js

@@ -1 +1 @@
-import t from"primevue/icons/spinner";import l from"primevue/ripple";import{resolveComponent as n,resolveDirective as e,withDirectives as i,openBlock as s,createElementBlock as o,normalizeClass as a,renderSlot as d,Fragment as p,createBlock as u,createCommentVNode as r,createElementVNode as b,toDisplayString as c}from"vue";var h={name:"Button",props:{label:{type:String,default:null},icon:{type:String,default:null},iconPos:{type:String,default:"left"},iconClass:{type:String,default:null},badge:{type:String,default:null},badgeClass:{type:String,default:null},loading:{type:Boolean,default:!1},loadingIcon:{type:String,default:void 0},link:{type:Boolean,default:!1},severity:{type:String,default:null},raised:{type:Boolean,default:!1},rounded:{type:Boolean,default:!1},text:{type:Boolean,default:!1},outlined:{type:Boolean,default:!1},size:{type:String,default:null},plain:{type:Boolean,default:!1}},computed:{buttonClass(){return["p-button p-component",{"p-button-icon-only":this.hasIcon&&!this.label,"p-button-vertical":("top"===this.iconPos||"bottom"===this.iconPos)&&this.label,"p-disabled":this.$attrs.disabled||this.loading,"p-button-loading":this.loading,"p-button-loading-label-only":this.loading&&!this.hasIcon&&this.label,"p-button-link":this.link,[`p-button-${this.severity}`]:this.severity,"p-button-raised":this.raised,"p-button-rounded":this.rounded,"p-button-text":this.text,"p-button-outlined":this.outlined,"p-button-sm":"small"===this.size,"p-button-lg":"large"===this.size,"p-button-plain":this.plain}]},iconStyleClass(){return["p-button-icon",this.iconClass,{"p-button-icon-left":"left"===this.iconPos&&this.label,"p-button-icon-right":"right"===this.iconPos&&this.label,"p-button-icon-top":"top"===this.iconPos&&this.label,"p-button-icon-bottom":"bottom"===this.iconPos&&this.label}]},loadingIconStyleClass(){return["p-button-loading-icon pi-spin",this.iconStyleClass]},badgeStyleClass(){return["p-badge p-component",this.badgeClass,{"p-badge-no-gutter":this.badge&&1===String(this.badge).length}]},disabled(){return this.$attrs.disabled||this.loading},defaultAriaLabel(){return this.label?this.label+(this.badge?" "+this.badge:""):this.$attrs["aria-label"]},hasIcon(){return this.icon||this.$slots.icon}},components:{SpinnerIcon:t},directives:{ripple:l}};const g=["aria-label","disabled"],y={class:"p-button-label"};h.render=function(t,l,h,f,S,m){const C=n("SpinnerIcon"),I=e("ripple");return i((s(),o("button",{class:a(m.buttonClass),type:"button","aria-label":m.defaultAriaLabel,disabled:m.disabled},[d(t.$slots,"default"),t.$slots.default?r("",!0):(s(),o(p,{key:0},[h.loading?d(t.$slots,"loadingicon",{key:0,class:a(m.loadingIconStyleClass)},(()=>[h.loadingIcon?(s(),o("span",{key:0,class:a([m.loadingIconStyleClass,h.loadingIcon])},null,2)):(s(),u(C,{key:1,class:a(m.loadingIconStyleClass),spin:""},null,8,["class"]))])):d(t.$slots,"icon",{key:1,class:a(m.iconStyleClass)},(()=>[h.icon?(s(),o("span",{key:0,class:a([m.iconStyleClass,h.icon])},null,2)):r("",!0)])),b("span",y,c(h.label||" "),1),h.badge?(s(),o("span",{key:2,class:a(m.badgeStyleClass)},c(h.badge),3)):r("",!0)],64))],10,g)),[[I]])};export{h as default};
+import t from"primevue/basecomponent";import l from"primevue/icons/spinner";import n from"primevue/ripple";import{resolveComponent as e,resolveDirective as o,withDirectives as i,openBlock as s,createElementBlock as a,mergeProps as p,renderSlot as d,normalizeClass as u,createBlock as r,createCommentVNode as b,createElementVNode as c,toDisplayString as g}from"vue";var h={name:"Button",extends:t,props:{label:{type:String,default:null},icon:{type:String,default:null},iconPos:{type:String,default:"left"},iconClass:{type:String,default:null},badge:{type:String,default:null},badgeClass:{type:String,default:null},loading:{type:Boolean,default:!1},loadingIcon:{type:String,default:void 0},link:{type:Boolean,default:!1},severity:{type:String,default:null},raised:{type:Boolean,default:!1},rounded:{type:Boolean,default:!1},text:{type:Boolean,default:!1},outlined:{type:Boolean,default:!1},size:{type:String,default:null},plain:{type:Boolean,default:!1}},computed:{buttonClass(){return["p-button p-component",{"p-button-icon-only":this.hasIcon&&!this.label,"p-button-vertical":("top"===this.iconPos||"bottom"===this.iconPos)&&this.label,"p-disabled":this.$attrs.disabled||this.loading,"p-button-loading":this.loading,"p-button-loading-label-only":this.loading&&!this.hasIcon&&this.label,"p-button-link":this.link,[`p-button-${this.severity}`]:this.severity,"p-button-raised":this.raised,"p-button-rounded":this.rounded,"p-button-text":this.text,"p-button-outlined":this.outlined,"p-button-sm":"small"===this.size,"p-button-lg":"large"===this.size,"p-button-plain":this.plain}]},iconStyleClass(){return["p-button-icon",this.iconClass,{"p-button-icon-left":"left"===this.iconPos&&this.label,"p-button-icon-right":"right"===this.iconPos&&this.label,"p-button-icon-top":"top"===this.iconPos&&this.label,"p-button-icon-bottom":"bottom"===this.iconPos&&this.label}]},loadingIconStyleClass(){return["p-button-loading-icon pi-spin",this.iconStyleClass]},badgeStyleClass(){return["p-badge p-component",this.badgeClass,{"p-badge-no-gutter":this.badge&&1===String(this.badge).length}]},disabled(){return this.$attrs.disabled||this.loading},defaultAriaLabel(){return this.label?this.label+(this.badge?" "+this.badge:""):this.$attrs["aria-label"]},hasIcon(){return this.icon||this.$slots.icon}},components:{SpinnerIcon:l},directives:{ripple:n}};const y=["aria-label","disabled"];h.render=function(t,l,n,h,f,m){const S=e("SpinnerIcon"),C=o("ripple");return i((s(),a("button",p({class:m.buttonClass,type:"button","aria-label":m.defaultAriaLabel,disabled:m.disabled},t.ptm("root")),[d(t.$slots,"default",{},(()=>[n.loading?d(t.$slots,"loadingicon",{key:0,class:u(m.loadingIconStyleClass)},(()=>[n.loadingIcon?(s(),a("span",p({key:0,class:[m.loadingIconStyleClass,n.loadingIcon]},t.ptm("loadingIcon")),null,16)):(s(),r(S,p({key:1,class:m.loadingIconStyleClass,spin:""},t.ptm("loadingIcon")),null,16,["class"]))])):d(t.$slots,"icon",{key:1,class:u(m.iconStyleClass)},(()=>[n.icon?(s(),a("span",p({key:0,class:[m.iconStyleClass,n.icon]},t.ptm("icon")),null,16)):b("",!0)])),c("span",p({class:"p-button-label"},t.ptm("label")),g(n.label||" "),17),n.badge?(s(),a("span",p({key:2,class:m.badgeStyleClass},t.ptm("badge")),g(n.badge),17)):b("",!0)]))],16,y)),[[C]])};export{h as default};

package/button/button.js

@@ -1,14 +1,16 @@
 this.primevue = this.primevue || {};
-this.primevue.button = (function (SpinnerIcon, Ripple, vue) {
+this.primevue.button = (function (BaseComponent, SpinnerIcon, Ripple, vue) {
     'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+    var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
     var SpinnerIcon__default = /*#__PURE__*/_interopDefaultLegacy(SpinnerIcon);
     var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
 
     var script = {
         name: 'Button',
+        extends: BaseComponent__default["default"],
         props: {
             label: {
                 type: String,
@@ -140,58 +142,54 @@ this.primevue.button = (function (SpinnerIcon, Ripple, vue) {
     };
 
     const _hoisted_1 = ["aria-label", "disabled"];
-    const _hoisted_2 = { class: "p-button-label" };
 
     function render(_ctx, _cache, $props, $setup, $data, $options) {
       const _component_SpinnerIcon = vue.resolveComponent("SpinnerIcon");
       const _directive_ripple = vue.resolveDirective("ripple");
 
-      return vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
-        class: vue.normalizeClass($options.buttonClass),
+      return vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
+        class: $options.buttonClass,
         type: "button",
         "aria-label": $options.defaultAriaLabel,
         disabled: $options.disabled
-      }, [
-        vue.renderSlot(_ctx.$slots, "default"),
-        (!_ctx.$slots.default)
-          ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-              ($props.loading)
-                ? vue.renderSlot(_ctx.$slots, "loadingicon", {
-                    key: 0,
-                    class: vue.normalizeClass($options.loadingIconStyleClass)
-                  }, () => [
-                    ($props.loadingIcon)
-                      ? (vue.openBlock(), vue.createElementBlock("span", {
-                          key: 0,
-                          class: vue.normalizeClass([$options.loadingIconStyleClass, $props.loadingIcon])
-                        }, null, 2))
-                      : (vue.openBlock(), vue.createBlock(_component_SpinnerIcon, {
-                          key: 1,
-                          class: vue.normalizeClass($options.loadingIconStyleClass),
-                          spin: ""
-                        }, null, 8, ["class"]))
-                  ])
-                : vue.renderSlot(_ctx.$slots, "icon", {
-                    key: 1,
-                    class: vue.normalizeClass($options.iconStyleClass)
-                  }, () => [
-                    ($props.icon)
-                      ? (vue.openBlock(), vue.createElementBlock("span", {
-                          key: 0,
-                          class: vue.normalizeClass([$options.iconStyleClass, $props.icon])
-                        }, null, 2))
-                      : vue.createCommentVNode("", true)
-                  ]),
-              vue.createElementVNode("span", _hoisted_2, vue.toDisplayString($props.label || ' '), 1),
-              ($props.badge)
-                ? (vue.openBlock(), vue.createElementBlock("span", {
-                    key: 2,
-                    class: vue.normalizeClass($options.badgeStyleClass)
-                  }, vue.toDisplayString($props.badge), 3))
-                : vue.createCommentVNode("", true)
-            ], 64))
-          : vue.createCommentVNode("", true)
-      ], 10, _hoisted_1)), [
+      }, _ctx.ptm('root')), [
+        vue.renderSlot(_ctx.$slots, "default", {}, () => [
+          ($props.loading)
+            ? vue.renderSlot(_ctx.$slots, "loadingicon", {
+                key: 0,
+                class: vue.normalizeClass($options.loadingIconStyleClass)
+              }, () => [
+                ($props.loadingIcon)
+                  ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
+                      key: 0,
+                      class: [$options.loadingIconStyleClass, $props.loadingIcon]
+                    }, _ctx.ptm('loadingIcon')), null, 16))
+                  : (vue.openBlock(), vue.createBlock(_component_SpinnerIcon, vue.mergeProps({
+                      key: 1,
+                      class: $options.loadingIconStyleClass,
+                      spin: ""
+                    }, _ctx.ptm('loadingIcon')), null, 16, ["class"]))
+              ])
+            : vue.renderSlot(_ctx.$slots, "icon", {
+                key: 1,
+                class: vue.normalizeClass($options.iconStyleClass)
+              }, () => [
+                ($props.icon)
+                  ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
+                      key: 0,
+                      class: [$options.iconStyleClass, $props.icon]
+                    }, _ctx.ptm('icon')), null, 16))
+                  : vue.createCommentVNode("", true)
+              ]),
+          vue.createElementVNode("span", vue.mergeProps({ class: "p-button-label" }, _ctx.ptm('label')), vue.toDisplayString($props.label || ' '), 17),
+          ($props.badge)
+            ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
+                key: 2,
+                class: $options.badgeStyleClass
+              }, _ctx.ptm('badge')), vue.toDisplayString($props.badge), 17))
+            : vue.createCommentVNode("", true)
+        ])
+      ], 16, _hoisted_1)), [
         [_directive_ripple]
       ])
     }
@@ -200,4 +198,4 @@ this.primevue.button = (function (SpinnerIcon, Ripple, vue) {
 
     return script;
 
-})(primevue.icons.spinner, primevue.ripple, Vue);
+})(primevue.basecomponent, primevue.icons.spinner, primevue.ripple, Vue);

package/button/button.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.button=function(t,e,l){"use strict";function n(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var o=n(t),i=n(e),s={name:"Button",props:{label:{type:String,default:null},icon:{type:String,default:null},iconPos:{type:String,default:"left"},iconClass:{type:String,default:null},badge:{type:String,default:null},badgeClass:{type:String,default:null},loading:{type:Boolean,default:!1},loadingIcon:{type:String,default:void 0},link:{type:Boolean,default:!1},severity:{type:String,default:null},raised:{type:Boolean,default:!1},rounded:{type:Boolean,default:!1},text:{type:Boolean,default:!1},outlined:{type:Boolean,default:!1},size:{type:String,default:null},plain:{type:Boolean,default:!1}},computed:{buttonClass(){return["p-button p-component",{"p-button-icon-only":this.hasIcon&&!this.label,"p-button-vertical":("top"===this.iconPos||"bottom"===this.iconPos)&&this.label,"p-disabled":this.$attrs.disabled||this.loading,"p-button-loading":this.loading,"p-button-loading-label-only":this.loading&&!this.hasIcon&&this.label,"p-button-link":this.link,[`p-button-${this.severity}`]:this.severity,"p-button-raised":this.raised,"p-button-rounded":this.rounded,"p-button-text":this.text,"p-button-outlined":this.outlined,"p-button-sm":"small"===this.size,"p-button-lg":"large"===this.size,"p-button-plain":this.plain}]},iconStyleClass(){return["p-button-icon",this.iconClass,{"p-button-icon-left":"left"===this.iconPos&&this.label,"p-button-icon-right":"right"===this.iconPos&&this.label,"p-button-icon-top":"top"===this.iconPos&&this.label,"p-button-icon-bottom":"bottom"===this.iconPos&&this.label}]},loadingIconStyleClass(){return["p-button-loading-icon pi-spin",this.iconStyleClass]},badgeStyleClass(){return["p-badge p-component",this.badgeClass,{"p-badge-no-gutter":this.badge&&1===String(this.badge).length}]},disabled(){return this.$attrs.disabled||this.loading},defaultAriaLabel(){return this.label?this.label+(this.badge?" "+this.badge:""):this.$attrs["aria-label"]},hasIcon(){return this.icon||this.$slots.icon}},components:{SpinnerIcon:o.default},directives:{ripple:i.default}};const a=["aria-label","disabled"],r={class:"p-button-label"};return s.render=function(t,e,n,o,i,s){const d=l.resolveComponent("SpinnerIcon"),u=l.resolveDirective("ripple");return l.withDirectives((l.openBlock(),l.createElementBlock("button",{class:l.normalizeClass(s.buttonClass),type:"button","aria-label":s.defaultAriaLabel,disabled:s.disabled},[l.renderSlot(t.$slots,"default"),t.$slots.default?l.createCommentVNode("",!0):(l.openBlock(),l.createElementBlock(l.Fragment,{key:0},[n.loading?l.renderSlot(t.$slots,"loadingicon",{key:0,class:l.normalizeClass(s.loadingIconStyleClass)},(()=>[n.loadingIcon?(l.openBlock(),l.createElementBlock("span",{key:0,class:l.normalizeClass([s.loadingIconStyleClass,n.loadingIcon])},null,2)):(l.openBlock(),l.createBlock(d,{key:1,class:l.normalizeClass(s.loadingIconStyleClass),spin:""},null,8,["class"]))])):l.renderSlot(t.$slots,"icon",{key:1,class:l.normalizeClass(s.iconStyleClass)},(()=>[n.icon?(l.openBlock(),l.createElementBlock("span",{key:0,class:l.normalizeClass([s.iconStyleClass,n.icon])},null,2)):l.createCommentVNode("",!0)])),l.createElementVNode("span",r,l.toDisplayString(n.label||" "),1),n.badge?(l.openBlock(),l.createElementBlock("span",{key:2,class:l.normalizeClass(s.badgeStyleClass)},l.toDisplayString(n.badge),3)):l.createCommentVNode("",!0)],64))],10,a)),[[u]])},s}(primevue.icons.spinner,primevue.ripple,Vue);
+this.primevue=this.primevue||{},this.primevue.button=function(t,e,l,n){"use strict";function o(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var i=o(t),s=o(e),a=o(l),r={name:"Button",extends:i.default,props:{label:{type:String,default:null},icon:{type:String,default:null},iconPos:{type:String,default:"left"},iconClass:{type:String,default:null},badge:{type:String,default:null},badgeClass:{type:String,default:null},loading:{type:Boolean,default:!1},loadingIcon:{type:String,default:void 0},link:{type:Boolean,default:!1},severity:{type:String,default:null},raised:{type:Boolean,default:!1},rounded:{type:Boolean,default:!1},text:{type:Boolean,default:!1},outlined:{type:Boolean,default:!1},size:{type:String,default:null},plain:{type:Boolean,default:!1}},computed:{buttonClass(){return["p-button p-component",{"p-button-icon-only":this.hasIcon&&!this.label,"p-button-vertical":("top"===this.iconPos||"bottom"===this.iconPos)&&this.label,"p-disabled":this.$attrs.disabled||this.loading,"p-button-loading":this.loading,"p-button-loading-label-only":this.loading&&!this.hasIcon&&this.label,"p-button-link":this.link,[`p-button-${this.severity}`]:this.severity,"p-button-raised":this.raised,"p-button-rounded":this.rounded,"p-button-text":this.text,"p-button-outlined":this.outlined,"p-button-sm":"small"===this.size,"p-button-lg":"large"===this.size,"p-button-plain":this.plain}]},iconStyleClass(){return["p-button-icon",this.iconClass,{"p-button-icon-left":"left"===this.iconPos&&this.label,"p-button-icon-right":"right"===this.iconPos&&this.label,"p-button-icon-top":"top"===this.iconPos&&this.label,"p-button-icon-bottom":"bottom"===this.iconPos&&this.label}]},loadingIconStyleClass(){return["p-button-loading-icon pi-spin",this.iconStyleClass]},badgeStyleClass(){return["p-badge p-component",this.badgeClass,{"p-badge-no-gutter":this.badge&&1===String(this.badge).length}]},disabled(){return this.$attrs.disabled||this.loading},defaultAriaLabel(){return this.label?this.label+(this.badge?" "+this.badge:""):this.$attrs["aria-label"]},hasIcon(){return this.icon||this.$slots.icon}},components:{SpinnerIcon:s.default},directives:{ripple:a.default}};const p=["aria-label","disabled"];return r.render=function(t,e,l,o,i,s){const a=n.resolveComponent("SpinnerIcon"),r=n.resolveDirective("ripple");return n.withDirectives((n.openBlock(),n.createElementBlock("button",n.mergeProps({class:s.buttonClass,type:"button","aria-label":s.defaultAriaLabel,disabled:s.disabled},t.ptm("root")),[n.renderSlot(t.$slots,"default",{},(()=>[l.loading?n.renderSlot(t.$slots,"loadingicon",{key:0,class:n.normalizeClass(s.loadingIconStyleClass)},(()=>[l.loadingIcon?(n.openBlock(),n.createElementBlock("span",n.mergeProps({key:0,class:[s.loadingIconStyleClass,l.loadingIcon]},t.ptm("loadingIcon")),null,16)):(n.openBlock(),n.createBlock(a,n.mergeProps({key:1,class:s.loadingIconStyleClass,spin:""},t.ptm("loadingIcon")),null,16,["class"]))])):n.renderSlot(t.$slots,"icon",{key:1,class:n.normalizeClass(s.iconStyleClass)},(()=>[l.icon?(n.openBlock(),n.createElementBlock("span",n.mergeProps({key:0,class:[s.iconStyleClass,l.icon]},t.ptm("icon")),null,16)):n.createCommentVNode("",!0)])),n.createElementVNode("span",n.mergeProps({class:"p-button-label"},t.ptm("label")),n.toDisplayString(l.label||" "),17),l.badge?(n.openBlock(),n.createElementBlock("span",n.mergeProps({key:2,class:s.badgeStyleClass},t.ptm("badge")),n.toDisplayString(l.badge),17)):n.createCommentVNode("",!0)]))],16,p)),[[r]])},r}(primevue.basecomponent,primevue.icons.spinner,primevue.ripple,Vue);

package/chart/Chart.d.ts

@@ -10,6 +10,37 @@
 import { CanvasHTMLAttributes } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type ChartPassThroughOptionType = ChartPassThroughAttributes | ((options: ChartPassThroughMethodOptions) => ChartPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ChartPassThroughMethodOptions {
+    props: ChartProps;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link ChartProps.pt}
+ */
+export interface ChartPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: ChartPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the canvas's DOM element.
+     */
+    canvas?: ChartPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface ChartPassThroughAttributes {
+    [key: string]: any;
+}
+
 /**
  * Custom select event.
  * @see {@link ChartEmits.select}
@@ -63,6 +94,11 @@ export interface ChartProps {
      * Uses to pass all properties of the CanvasHTMLAttributes to canvas element inside the component.
      */
     canvasProps?: CanvasHTMLAttributes | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {ChartPassThroughOptions}
+     */
+    pt?: ChartPassThroughOptions;
 }
 
 export interface ChartSlots {}

package/chart/Chart.vue

@@ -1,12 +1,15 @@
 <template>
-    <div class="p-chart">
-        <canvas ref="canvas" :width="width" :height="height" @click="onCanvasClick($event)" v-bind="canvasProps"></canvas>
+    <div class="p-chart" v-bind="ptm('root')">
+        <canvas ref="canvas" :width="width" :height="height" @click="onCanvasClick($event)" v-bind="{ ...canvasProps, ...ptm('canvas') }"></canvas>
     </div>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
+
 export default {
     name: 'Chart',
+    extends: BaseComponent,
     emits: ['select', 'loaded'],
     props: {
         type: String,

package/chart/chart.cjs.js

@@ -1,7 +1,10 @@
 'use strict';
 
+var BaseComponent = require('primevue/basecomponent');
 var vue = require('vue');
 
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
 function _interopNamespace(e) {
     if (e && e.__esModule) return e;
     var n = Object.create(null);
@@ -20,8 +23,11 @@ function _interopNamespace(e) {
     return Object.freeze(n);
 }
 
+var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
+
 var script = {
     name: 'Chart',
+    extends: BaseComponent__default["default"],
     emits: ['select', 'loaded'],
     props: {
         type: String,
@@ -124,18 +130,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 (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) {

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/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.
  */
@@ -37,6 +92,11 @@ export interface ChipProps {
      * @deprecated since v3.27.0. Use 'removeicon' slot.
      */
     removeIcon?: string;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {ChipPassThroughOptions}
+     */
+    pt?: ChipPassThroughOptions;
 }
 
 /**

package/chip/Chip.vue

@@ -1,23 +1,24 @@
 <template>
-    <div v-if="visible" :class="containerClass" :aria-label="label">
-        <slot></slot>
-        <template v-if="!$slots.default">
-            <img v-if="image" :src="image" />
-            <component v-else-if="$slots.icon" :is="$slots.icon" class="p-chip-icon" />
-            <span v-else-if="icon" :class="['p-chip-icon', icon]" />
-            <div v-if="label" class="p-chip-text">{{ label }}</div>
-        </template>
+    <div v-if="visible" :class="containerClass" :aria-label="label" v-bind="ptm('root')">
+        <slot>
+            <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"></component>
+            <component :is="removeIcon ? 'span' : 'TimesCircleIcon'" tabindex="0" :class="['p-chip-remove-icon', removeIcon]" @click="close" @keydown="onKeydown" v-bind="ptm('removeIcon')"></component>
         </slot>
     </div>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import TimesCircleIcon from 'primevue/icons/timescircle';
 
 export default {
     name: 'Chip',
+    extends: BaseComponent,
     emits: ['remove'],
     props: {
         label: {

package/chip/chip.cjs.js

@@ -1,14 +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: {
@@ -65,57 +68,53 @@ var script = {
 
 const _hoisted_1 = ["aria-label"];
 const _hoisted_2 = ["src"];
-const _hoisted_3 = {
-  key: 3,
-  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
-      }, [
-        vue.renderSlot(_ctx.$slots, "default"),
-        (!_ctx.$slots.default)
-          ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-              ($props.image)
-                ? (vue.openBlock(), vue.createElementBlock("img", {
-                    key: 0,
-                    src: $props.image
-                  }, null, 8, _hoisted_2))
-                : (_ctx.$slots.icon)
-                  ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.$slots.icon), {
-                      key: 1,
-                      class: "p-chip-icon"
-                    }))
-                  : ($props.icon)
-                    ? (vue.openBlock(), vue.createElementBlock("span", {
-                        key: 2,
-                        class: vue.normalizeClass(['p-chip-icon', $props.icon])
-                      }, null, 2))
-                    : vue.createCommentVNode("", true),
-              ($props.label)
-                ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, vue.toDisplayString($props.label), 1))
-                : vue.createCommentVNode("", true)
-            ], 64))
-          : vue.createCommentVNode("", true),
+      }, _ctx.ptm('root')), [
+        vue.renderSlot(_ctx.$slots, "default", {}, () => [
+          ($props.image)
+            ? (vue.openBlock(), vue.createElementBlock("img", vue.mergeProps({
+                key: 0,
+                src: $props.image
+              }, _ctx.ptm('image')), null, 16, _hoisted_2))
+            : (_ctx.$slots.icon)
+              ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.$slots.icon), vue.mergeProps({
+                  key: 1,
+                  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", vue.mergeProps({
+                key: 3,
+                class: "p-chip-text"
+              }, _ctx.ptm('label')), vue.toDisplayString($props.label), 17))
+            : vue.createCommentVNode("", true)
+        ]),
         ($props.removable)
           ? vue.renderSlot(_ctx.$slots, "removeicon", {
-              key: 1,
+              key: 0,
               onClick: $options.close,
               onKeydown: $options.onKeydown
             }, () => [
-              (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.removeIcon ? 'span' : 'TimesCircleIcon'), {
+              (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.removeIcon ? 'span' : 'TimesCircleIcon'), vue.mergeProps({
                 tabindex: "0",
-                class: vue.normalizeClass(['p-chip-remove-icon', $props.removeIcon]),
+                class: ['p-chip-remove-icon', $props.removeIcon],
                 onClick: $options.close,
                 onKeydown: $options.onKeydown
-              }, null, 40, ["class", "onClick", "onKeydown"]))
+              }, _ctx.ptm('removeIcon')), null, 16, ["class", "onClick", "onKeydown"]))
             ])
           : vue.createCommentVNode("", true)
-      ], 10, _hoisted_1))
+      ], 16, _hoisted_1))
     : vue.createCommentVNode("", true)
 }