primevue 3.27.0 → 3.28.0

package/inlinemessage/inlinemessage.cjs.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var BaseComponent = require('primevue/basecomponent');
 var CheckIcon = require('primevue/icons/check');
 var ExclamationTriangleIcon = require('primevue/icons/exclamationtriangle');
 var InfoCircleIcon = require('primevue/icons/infocircle');
@@ -8,6 +9,7 @@ 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 CheckIcon__default = /*#__PURE__*/_interopDefaultLegacy(CheckIcon);
 var ExclamationTriangleIcon__default = /*#__PURE__*/_interopDefaultLegacy(ExclamationTriangleIcon);
 var InfoCircleIcon__default = /*#__PURE__*/_interopDefaultLegacy(InfoCircleIcon);
@@ -15,6 +17,7 @@ var TimesCircleIcon__default = /*#__PURE__*/_interopDefaultLegacy(TimesCircleIco
 
 var script = {
     name: 'InlineMessage',
+    extends: BaseComponent__default["default"],
     props: {
         severity: {
             type: String,
@@ -53,24 +56,22 @@ var script = {
     }
 };
 
-const _hoisted_1 = { class: "p-inline-message-text" };
-
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (vue.openBlock(), vue.createElementBlock("div", {
+  return (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
     "aria-live": "polite",
-    class: vue.normalizeClass($options.containerClass)
-  }, [
+    class: $options.containerClass
+  }, _ctx.ptm('root')), [
     vue.renderSlot(_ctx.$slots, "icon", {}, () => [
-      (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.icon ? 'span' : $options.iconComponent), {
-        class: vue.normalizeClass(['p-inline-message-icon', $props.icon])
-      }, null, 8, ["class"]))
+      (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.icon ? 'span' : $options.iconComponent), vue.mergeProps({
+        class: ['p-inline-message-icon', $props.icon]
+      }, _ctx.ptm('icon')), null, 16, ["class"]))
     ]),
-    vue.createElementVNode("span", _hoisted_1, [
+    vue.createElementVNode("span", vue.mergeProps({ class: "p-inline-message-text" }, _ctx.ptm('text')), [
       vue.renderSlot(_ctx.$slots, "default", {}, () => [
         vue.createTextVNode(" ")
       ])
-    ])
-  ], 2))
+    ], 16)
+  ], 16))
 }
 
 function styleInject(css, ref) {

package/inlinemessage/inlinemessage.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("primevue/icons/check"),n=require("primevue/icons/exclamationtriangle"),i=require("primevue/icons/infocircle"),t=require("primevue/icons/timescircle"),s=require("vue");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=l(e),r=l(n),a=l(i),c=l(t),d={name:"InlineMessage",props:{severity:{type:String,default:"error"},icon:{type:String,default:void 0}},timeout:null,data:()=>({visible:!0}),mounted(){this.sticky||setTimeout((()=>{this.visible=!1}),this.life)},computed:{containerClass(){return["p-inline-message p-component p-inline-message-"+this.severity,{"p-inline-message-icon-only":!this.$slots.default}]},iconComponent(){return{info:a.default,success:o.default,warn:r.default,error:c.default}[this.severity]}}};const u={class:"p-inline-message-text"};!function(e,n){void 0===n&&(n={});var i=n.insertAt;if(e&&"undefined"!=typeof document){var t=document.head||document.getElementsByTagName("head")[0],s=document.createElement("style");s.type="text/css","top"===i&&t.firstChild?t.insertBefore(s,t.firstChild):t.appendChild(s),s.styleSheet?s.styleSheet.cssText=e:s.appendChild(document.createTextNode(e))}}("\n.p-inline-message {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    vertical-align: top;\n}\n.p-inline-message-icon-only .p-inline-message-text {\n    visibility: hidden;\n    width: 0;\n}\n.p-fluid .p-inline-message {\n    display: flex;\n}\n"),d.render=function(e,n,i,t,l,o){return s.openBlock(),s.createElementBlock("div",{"aria-live":"polite",class:s.normalizeClass(o.containerClass)},[s.renderSlot(e.$slots,"icon",{},(()=>[(s.openBlock(),s.createBlock(s.resolveDynamicComponent(i.icon?"span":o.iconComponent),{class:s.normalizeClass(["p-inline-message-icon",i.icon])},null,8,["class"]))])),s.createElementVNode("span",u,[s.renderSlot(e.$slots,"default",{},(()=>[s.createTextVNode(" ")]))])],2)},module.exports=d;
+"use strict";var e=require("primevue/basecomponent"),n=require("primevue/icons/check"),t=require("primevue/icons/exclamationtriangle"),i=require("primevue/icons/infocircle"),s=require("primevue/icons/timescircle"),o=require("vue");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=r(e),a=r(n),c=r(t),p=r(i),u=r(s),d={name:"InlineMessage",extends:l.default,props:{severity:{type:String,default:"error"},icon:{type:String,default:void 0}},timeout:null,data:()=>({visible:!0}),mounted(){this.sticky||setTimeout((()=>{this.visible=!1}),this.life)},computed:{containerClass(){return["p-inline-message p-component p-inline-message-"+this.severity,{"p-inline-message-icon-only":!this.$slots.default}]},iconComponent(){return{info:p.default,success:a.default,warn:c.default,error:u.default}[this.severity]}}};!function(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],s=document.createElement("style");s.type="text/css","top"===t&&i.firstChild?i.insertBefore(s,i.firstChild):i.appendChild(s),s.styleSheet?s.styleSheet.cssText=e:s.appendChild(document.createTextNode(e))}}("\n.p-inline-message {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    vertical-align: top;\n}\n.p-inline-message-icon-only .p-inline-message-text {\n    visibility: hidden;\n    width: 0;\n}\n.p-fluid .p-inline-message {\n    display: flex;\n}\n"),d.render=function(e,n,t,i,s,r){return o.openBlock(),o.createElementBlock("div",o.mergeProps({"aria-live":"polite",class:r.containerClass},e.ptm("root")),[o.renderSlot(e.$slots,"icon",{},(()=>[(o.openBlock(),o.createBlock(o.resolveDynamicComponent(t.icon?"span":r.iconComponent),o.mergeProps({class:["p-inline-message-icon",t.icon]},e.ptm("icon")),null,16,["class"]))])),o.createElementVNode("span",o.mergeProps({class:"p-inline-message-text"},e.ptm("text")),[o.renderSlot(e.$slots,"default",{},(()=>[o.createTextVNode(" ")]))],16)],16)},module.exports=d;

package/inlinemessage/inlinemessage.esm.js

@@ -1,11 +1,13 @@
+import BaseComponent from 'primevue/basecomponent';
 import CheckIcon from 'primevue/icons/check';
 import ExclamationTriangleIcon from 'primevue/icons/exclamationtriangle';
 import InfoCircleIcon from 'primevue/icons/infocircle';
 import TimesCircleIcon from 'primevue/icons/timescircle';
-import { openBlock, createElementBlock, normalizeClass, renderSlot, createBlock, resolveDynamicComponent, createElementVNode, createTextVNode } from 'vue';
+import { openBlock, createElementBlock, mergeProps, renderSlot, createBlock, resolveDynamicComponent, createElementVNode, createTextVNode } from 'vue';
 
 var script = {
     name: 'InlineMessage',
+    extends: BaseComponent,
     props: {
         severity: {
             type: String,
@@ -44,24 +46,22 @@ var script = {
     }
 };
 
-const _hoisted_1 = { class: "p-inline-message-text" };
-
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), createElementBlock("div", {
+  return (openBlock(), createElementBlock("div", mergeProps({
     "aria-live": "polite",
-    class: normalizeClass($options.containerClass)
-  }, [
+    class: $options.containerClass
+  }, _ctx.ptm('root')), [
     renderSlot(_ctx.$slots, "icon", {}, () => [
-      (openBlock(), createBlock(resolveDynamicComponent($props.icon ? 'span' : $options.iconComponent), {
-        class: normalizeClass(['p-inline-message-icon', $props.icon])
-      }, null, 8, ["class"]))
+      (openBlock(), createBlock(resolveDynamicComponent($props.icon ? 'span' : $options.iconComponent), mergeProps({
+        class: ['p-inline-message-icon', $props.icon]
+      }, _ctx.ptm('icon')), null, 16, ["class"]))
     ]),
-    createElementVNode("span", _hoisted_1, [
+    createElementVNode("span", mergeProps({ class: "p-inline-message-text" }, _ctx.ptm('text')), [
       renderSlot(_ctx.$slots, "default", {}, () => [
         createTextVNode(" ")
       ])
-    ])
-  ], 2))
+    ], 16)
+  ], 16))
 }
 
 function styleInject(css, ref) {

package/inlinemessage/inlinemessage.esm.min.js

@@ -1 +1 @@
-import e from"primevue/icons/check";import i from"primevue/icons/exclamationtriangle";import n from"primevue/icons/infocircle";import t from"primevue/icons/timescircle";import{openBlock as s,createElementBlock as o,normalizeClass as l,renderSlot as r,createBlock as a,resolveDynamicComponent as c,createElementVNode as m,createTextVNode as p}from"vue";var d={name:"InlineMessage",props:{severity:{type:String,default:"error"},icon:{type:String,default:void 0}},timeout:null,data:()=>({visible:!0}),mounted(){this.sticky||setTimeout((()=>{this.visible=!1}),this.life)},computed:{containerClass(){return["p-inline-message p-component p-inline-message-"+this.severity,{"p-inline-message-icon-only":!this.$slots.default}]},iconComponent(){return{info:n,success:e,warn:i,error:t}[this.severity]}}};const u={class:"p-inline-message-text"};!function(e,i){void 0===i&&(i={});var n=i.insertAt;if(e&&"undefined"!=typeof document){var t=document.head||document.getElementsByTagName("head")[0],s=document.createElement("style");s.type="text/css","top"===n&&t.firstChild?t.insertBefore(s,t.firstChild):t.appendChild(s),s.styleSheet?s.styleSheet.cssText=e:s.appendChild(document.createTextNode(e))}}("\n.p-inline-message {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    vertical-align: top;\n}\n.p-inline-message-icon-only .p-inline-message-text {\n    visibility: hidden;\n    width: 0;\n}\n.p-fluid .p-inline-message {\n    display: flex;\n}\n"),d.render=function(e,i,n,t,d,f){return s(),o("div",{"aria-live":"polite",class:l(f.containerClass)},[r(e.$slots,"icon",{},(()=>[(s(),a(c(n.icon?"span":f.iconComponent),{class:l(["p-inline-message-icon",n.icon])},null,8,["class"]))])),m("span",u,[r(e.$slots,"default",{},(()=>[p(" ")]))])],2)};export{d as default};
+import e from"primevue/basecomponent";import i from"primevue/icons/check";import n from"primevue/icons/exclamationtriangle";import t from"primevue/icons/infocircle";import s from"primevue/icons/timescircle";import{openBlock as o,createElementBlock as r,mergeProps as l,renderSlot as a,createBlock as m,resolveDynamicComponent as c,createElementVNode as p,createTextVNode as d}from"vue";var u={name:"InlineMessage",extends:e,props:{severity:{type:String,default:"error"},icon:{type:String,default:void 0}},timeout:null,data:()=>({visible:!0}),mounted(){this.sticky||setTimeout((()=>{this.visible=!1}),this.life)},computed:{containerClass(){return["p-inline-message p-component p-inline-message-"+this.severity,{"p-inline-message-icon-only":!this.$slots.default}]},iconComponent(){return{info:t,success:i,warn:n,error:s}[this.severity]}}};!function(e,i){void 0===i&&(i={});var n=i.insertAt;if(e&&"undefined"!=typeof document){var t=document.head||document.getElementsByTagName("head")[0],s=document.createElement("style");s.type="text/css","top"===n&&t.firstChild?t.insertBefore(s,t.firstChild):t.appendChild(s),s.styleSheet?s.styleSheet.cssText=e:s.appendChild(document.createTextNode(e))}}("\n.p-inline-message {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    vertical-align: top;\n}\n.p-inline-message-icon-only .p-inline-message-text {\n    visibility: hidden;\n    width: 0;\n}\n.p-fluid .p-inline-message {\n    display: flex;\n}\n"),u.render=function(e,i,n,t,s,u){return o(),r("div",l({"aria-live":"polite",class:u.containerClass},e.ptm("root")),[a(e.$slots,"icon",{},(()=>[(o(),m(c(n.icon?"span":u.iconComponent),l({class:["p-inline-message-icon",n.icon]},e.ptm("icon")),null,16,["class"]))])),p("span",l({class:"p-inline-message-text"},e.ptm("text")),[a(e.$slots,"default",{},(()=>[d(" ")]))],16)],16)};export{u as default};

package/inlinemessage/inlinemessage.js

@@ -1,9 +1,10 @@
 this.primevue = this.primevue || {};
-this.primevue.inlinemessage = (function (CheckIcon, ExclamationTriangleIcon, InfoCircleIcon, TimesCircleIcon, vue) {
+this.primevue.inlinemessage = (function (BaseComponent, CheckIcon, ExclamationTriangleIcon, InfoCircleIcon, TimesCircleIcon, vue) {
     'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+    var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
     var CheckIcon__default = /*#__PURE__*/_interopDefaultLegacy(CheckIcon);
     var ExclamationTriangleIcon__default = /*#__PURE__*/_interopDefaultLegacy(ExclamationTriangleIcon);
     var InfoCircleIcon__default = /*#__PURE__*/_interopDefaultLegacy(InfoCircleIcon);
@@ -11,6 +12,7 @@ this.primevue.inlinemessage = (function (CheckIcon, ExclamationTriangleIcon, Inf
 
     var script = {
         name: 'InlineMessage',
+        extends: BaseComponent__default["default"],
         props: {
             severity: {
                 type: String,
@@ -49,24 +51,22 @@ this.primevue.inlinemessage = (function (CheckIcon, ExclamationTriangleIcon, Inf
         }
     };
 
-    const _hoisted_1 = { class: "p-inline-message-text" };
-
     function render(_ctx, _cache, $props, $setup, $data, $options) {
-      return (vue.openBlock(), vue.createElementBlock("div", {
+      return (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
         "aria-live": "polite",
-        class: vue.normalizeClass($options.containerClass)
-      }, [
+        class: $options.containerClass
+      }, _ctx.ptm('root')), [
         vue.renderSlot(_ctx.$slots, "icon", {}, () => [
-          (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.icon ? 'span' : $options.iconComponent), {
-            class: vue.normalizeClass(['p-inline-message-icon', $props.icon])
-          }, null, 8, ["class"]))
+          (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.icon ? 'span' : $options.iconComponent), vue.mergeProps({
+            class: ['p-inline-message-icon', $props.icon]
+          }, _ctx.ptm('icon')), null, 16, ["class"]))
         ]),
-        vue.createElementVNode("span", _hoisted_1, [
+        vue.createElementVNode("span", vue.mergeProps({ class: "p-inline-message-text" }, _ctx.ptm('text')), [
           vue.renderSlot(_ctx.$slots, "default", {}, () => [
             vue.createTextVNode(" ")
           ])
-        ])
-      ], 2))
+        ], 16)
+      ], 16))
     }
 
     function styleInject(css, ref) {
@@ -103,4 +103,4 @@ this.primevue.inlinemessage = (function (CheckIcon, ExclamationTriangleIcon, Inf
 
     return script;
 
-})(primevue.icons.check, primevue.icons.exclamationtriangle, primevue.icons.infocircle, primevue.icons.timescircle, Vue);
+})(primevue.basecomponent, primevue.icons.check, primevue.icons.exclamationtriangle, primevue.icons.infocircle, primevue.icons.timescircle, Vue);

package/inlinemessage/inlinemessage.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.inlinemessage=function(e,n,i,t,s){"use strict";function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=l(e),a=l(n),r=l(i),c=l(t),d={name:"InlineMessage",props:{severity:{type:String,default:"error"},icon:{type:String,default:void 0}},timeout:null,data:()=>({visible:!0}),mounted(){this.sticky||setTimeout((()=>{this.visible=!1}),this.life)},computed:{containerClass(){return["p-inline-message p-component p-inline-message-"+this.severity,{"p-inline-message-icon-only":!this.$slots.default}]},iconComponent(){return{info:r.default,success:o.default,warn:a.default,error:c.default}[this.severity]}}};const p={class:"p-inline-message-text"};return function(e,n){void 0===n&&(n={});var i=n.insertAt;if(e&&"undefined"!=typeof document){var t=document.head||document.getElementsByTagName("head")[0],s=document.createElement("style");s.type="text/css","top"===i&&t.firstChild?t.insertBefore(s,t.firstChild):t.appendChild(s),s.styleSheet?s.styleSheet.cssText=e:s.appendChild(document.createTextNode(e))}}("\n.p-inline-message {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    vertical-align: top;\n}\n.p-inline-message-icon-only .p-inline-message-text {\n    visibility: hidden;\n    width: 0;\n}\n.p-fluid .p-inline-message {\n    display: flex;\n}\n"),d.render=function(e,n,i,t,l,o){return s.openBlock(),s.createElementBlock("div",{"aria-live":"polite",class:s.normalizeClass(o.containerClass)},[s.renderSlot(e.$slots,"icon",{},(()=>[(s.openBlock(),s.createBlock(s.resolveDynamicComponent(i.icon?"span":o.iconComponent),{class:s.normalizeClass(["p-inline-message-icon",i.icon])},null,8,["class"]))])),s.createElementVNode("span",p,[s.renderSlot(e.$slots,"default",{},(()=>[s.createTextVNode(" ")]))])],2)},d}(primevue.icons.check,primevue.icons.exclamationtriangle,primevue.icons.infocircle,primevue.icons.timescircle,Vue);
+this.primevue=this.primevue||{},this.primevue.inlinemessage=function(e,n,t,i,s,o){"use strict";function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=l(e),a=l(n),c=l(t),p=l(i),m=l(s),d={name:"InlineMessage",extends:r.default,props:{severity:{type:String,default:"error"},icon:{type:String,default:void 0}},timeout:null,data:()=>({visible:!0}),mounted(){this.sticky||setTimeout((()=>{this.visible=!1}),this.life)},computed:{containerClass(){return["p-inline-message p-component p-inline-message-"+this.severity,{"p-inline-message-icon-only":!this.$slots.default}]},iconComponent(){return{info:p.default,success:a.default,warn:c.default,error:m.default}[this.severity]}}};return function(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],s=document.createElement("style");s.type="text/css","top"===t&&i.firstChild?i.insertBefore(s,i.firstChild):i.appendChild(s),s.styleSheet?s.styleSheet.cssText=e:s.appendChild(document.createTextNode(e))}}("\n.p-inline-message {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    vertical-align: top;\n}\n.p-inline-message-icon-only .p-inline-message-text {\n    visibility: hidden;\n    width: 0;\n}\n.p-fluid .p-inline-message {\n    display: flex;\n}\n"),d.render=function(e,n,t,i,s,l){return o.openBlock(),o.createElementBlock("div",o.mergeProps({"aria-live":"polite",class:l.containerClass},e.ptm("root")),[o.renderSlot(e.$slots,"icon",{},(()=>[(o.openBlock(),o.createBlock(o.resolveDynamicComponent(t.icon?"span":l.iconComponent),o.mergeProps({class:["p-inline-message-icon",t.icon]},e.ptm("icon")),null,16,["class"]))])),o.createElementVNode("span",o.mergeProps({class:"p-inline-message-text"},e.ptm("text")),[o.renderSlot(e.$slots,"default",{},(()=>[o.createTextVNode(" ")]))],16)],16)},d}(primevue.basecomponent,primevue.icons.check,primevue.icons.exclamationtriangle,primevue.icons.infocircle,primevue.icons.timescircle,Vue);

package/inplace/Inplace.d.ts

@@ -7,9 +7,63 @@
  * @module inplace
  *
  */
+
 import { ButtonHTMLAttributes, HTMLAttributes, VNode } from 'vue';
+import { ButtonPassThroughOptions } from '../button';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type InplacePassThroughOptionType = InplacePassThroughAttributes | ((options: InplacePassThroughMethodOptions) => InplacePassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface InplacePassThroughMethodOptions {
+    props: InplaceProps;
+    state: InplaceState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link InplaceProps.pt}
+ */
+export interface InplacePassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: InplacePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the display's DOM element.
+     */
+    display?: InplacePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: InplacePassThroughOptionType;
+    /**
+     * Uses to pass attributes to the Button component.
+     * @see {@link ButtonPassThroughOptions}
+     */
+    closeButton?: ButtonPassThroughOptions;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface InplacePassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in Inplace component.
+ */
+export interface InplaceState {
+    /**
+     * Current active state as a boolean.
+     * @defaultValue false
+     */
+    d_active: boolean;
+}
+
 /**
  * Defines valid properties in Inplace component.
  */
@@ -42,6 +96,11 @@ export interface InplaceProps {
      * Uses to pass all properties of the HTMLButtonElement to the close button.
      */
     closeButtonProps?: ButtonHTMLAttributes | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {InplacePassThroughOptions}
+     */
+    pt?: InplacePassThroughOptions;
 }
 
 /**

package/inplace/Inplace.vue

@@ -1,14 +1,14 @@
 <template>
-    <div v-focustrap :class="containerClass" aria-live="polite">
-        <div v-if="!d_active" ref="display" :class="displayClass" :tabindex="$attrs.tabindex || '0'" role="button" @click="open" @keydown.enter="open" v-bind="displayProps">
+    <div v-focustrap :class="containerClass" aria-live="polite" v-bind="ptm('root')">
+        <div v-if="!d_active" ref="display" :class="displayClass" :tabindex="$attrs.tabindex || '0'" role="button" @click="open" @keydown.enter="open" v-bind="{ ...displayProps, ...ptm('display') }">
             <slot name="display"></slot>
         </div>
-        <div v-else class="p-inplace-content">
+        <div v-else class="p-inplace-content" v-bind="ptm('content')">
             <slot name="content"></slot>
-            <IPButton v-if="closable" :aria-label="closeAriaLabel" @click="close" v-bind="closeButtonProps">
+            <IPButton v-if="closable" :aria-label="closeAriaLabel" @click="close" :pt="ptm('closeButton')" v-bind="closeButtonProps">
                 <template #icon>
                     <slot name="closeicon">
-                        <component :is="closeIcon ? 'span' : 'TimesIcon'" :class="closeIcon"></component>
+                        <component :is="closeIcon ? 'span' : 'TimesIcon'" :class="closeIcon" v-bind="ptm('closeButton')['icon']"></component>
                     </slot>
                 </template>
             </IPButton>
@@ -17,12 +17,14 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import Button from 'primevue/button';
 import FocusTrap from 'primevue/focustrap';
 import TimesIcon from 'primevue/icons/times';
 
 export default {
     name: 'Inplace',
+    extends: BaseComponent,
     emits: ['open', 'close', 'update:active'],
     props: {
         closable: {

package/inplace/inplace.cjs.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var BaseComponent = require('primevue/basecomponent');
 var Button = require('primevue/button');
 var FocusTrap = require('primevue/focustrap');
 var TimesIcon = require('primevue/icons/times');
@@ -7,12 +8,14 @@ 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 Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
 var FocusTrap__default = /*#__PURE__*/_interopDefaultLegacy(FocusTrap);
 var TimesIcon__default = /*#__PURE__*/_interopDefaultLegacy(TimesIcon);
 
 var script = {
     name: 'Inplace',
+    extends: BaseComponent__default["default"],
     emits: ['open', 'close', 'update:active'],
     props: {
         closable: {
@@ -90,19 +93,15 @@ var script = {
 };
 
 const _hoisted_1 = ["tabindex"];
-const _hoisted_2 = {
-  key: 1,
-  class: "p-inplace-content"
-};
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_IPButton = vue.resolveComponent("IPButton");
   const _directive_focustrap = vue.resolveDirective("focustrap");
 
-  return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
-    class: vue.normalizeClass($options.containerClass),
+  return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+    class: $options.containerClass,
     "aria-live": "polite"
-  }, [
+  }, _ctx.ptm('root')), [
     (!$data.d_active)
       ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
           key: 0,
@@ -112,29 +111,31 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           role: "button",
           onClick: _cache[0] || (_cache[0] = (...args) => ($options.open && $options.open(...args))),
           onKeydown: _cache[1] || (_cache[1] = vue.withKeys((...args) => ($options.open && $options.open(...args)), ["enter"]))
-        }, $props.displayProps), [
+        }, { ...$props.displayProps, ..._ctx.ptm('display') }), [
           vue.renderSlot(_ctx.$slots, "display")
         ], 16, _hoisted_1))
-      : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
+      : (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+          key: 1,
+          class: "p-inplace-content"
+        }, _ctx.ptm('content')), [
           vue.renderSlot(_ctx.$slots, "content"),
           ($props.closable)
             ? (vue.openBlock(), vue.createBlock(_component_IPButton, vue.mergeProps({
                 key: 0,
                 "aria-label": $options.closeAriaLabel,
-                onClick: $options.close
+                onClick: $options.close,
+                pt: _ctx.ptm('closeButton')
               }, $props.closeButtonProps), {
                 icon: vue.withCtx(() => [
                   vue.renderSlot(_ctx.$slots, "closeicon", {}, () => [
-                    (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.closeIcon ? 'span' : 'TimesIcon'), {
-                      class: vue.normalizeClass($props.closeIcon)
-                    }, null, 8, ["class"]))
+                    (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.closeIcon ? 'span' : 'TimesIcon'), vue.mergeProps({ class: $props.closeIcon }, _ctx.ptm('closeButton')['icon']), null, 16, ["class"]))
                   ])
                 ]),
                 _: 3
-              }, 16, ["aria-label", "onClick"]))
+              }, 16, ["aria-label", "onClick", "pt"]))
             : vue.createCommentVNode("", true)
-        ]))
-  ], 2)), [
+        ], 16))
+  ], 16)), [
     [_directive_focustrap]
   ])
 }

package/inplace/inplace.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("primevue/button"),t=require("primevue/focustrap"),l=require("primevue/icons/times"),n=require("vue");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=i(e),a=i(t),s=i(l),c={name:"Inplace",emits:["open","close","update:active"],props:{closable:{type:Boolean,default:!1},active:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},closeIcon:{type:String,default:void 0},displayProps:{type:null,default:null},closeButtonProps:{type:null,default:null}},data(){return{d_active:this.active}},watch:{active(e){this.d_active=e}},methods:{open(e){this.disabled||(this.$emit("open",e),this.d_active=!0,this.$emit("update:active",!0))},close(e){this.$emit("close",e),this.d_active=!1,this.$emit("update:active",!1),setTimeout((()=>{this.$refs.display.focus()}),0)}},computed:{containerClass(){return["p-inplace p-component",{"p-inplace-closable":this.closable}]},displayClass(){return["p-inplace-display",{"p-disabled":this.disabled}]},closeAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.close:void 0}},components:{IPButton:o.default,TimesIcon:s.default},directives:{focustrap:a.default}};const p=["tabindex"],r={key:1,class:"p-inplace-content"};!function(e,t){void 0===t&&(t={});var l=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===l&&n.firstChild?n.insertBefore(i,n.firstChild):n.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}("\n.p-inplace .p-inplace-display {\n    display: inline;\n    cursor: pointer;\n}\n.p-inplace .p-inplace-content {\n    display: inline;\n}\n.p-fluid .p-inplace.p-inplace-closable .p-inplace-content {\n    display: flex;\n}\n.p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext {\n    flex: 1 1 auto;\n    width: 1%;\n}\n"),c.render=function(e,t,l,i,o,a){const s=n.resolveComponent("IPButton"),c=n.resolveDirective("focustrap");return n.withDirectives((n.openBlock(),n.createElementBlock("div",{class:n.normalizeClass(a.containerClass),"aria-live":"polite"},[o.d_active?(n.openBlock(),n.createElementBlock("div",r,[n.renderSlot(e.$slots,"content"),l.closable?(n.openBlock(),n.createBlock(s,n.mergeProps({key:0,"aria-label":a.closeAriaLabel,onClick:a.close},l.closeButtonProps),{icon:n.withCtx((()=>[n.renderSlot(e.$slots,"closeicon",{},(()=>[(n.openBlock(),n.createBlock(n.resolveDynamicComponent(l.closeIcon?"span":"TimesIcon"),{class:n.normalizeClass(l.closeIcon)},null,8,["class"]))]))])),_:3},16,["aria-label","onClick"])):n.createCommentVNode("",!0)])):(n.openBlock(),n.createElementBlock("div",n.mergeProps({key:0,ref:"display",class:a.displayClass,tabindex:e.$attrs.tabindex||"0",role:"button",onClick:t[0]||(t[0]=(...e)=>a.open&&a.open(...e)),onKeydown:t[1]||(t[1]=n.withKeys(((...e)=>a.open&&a.open(...e)),["enter"]))},l.displayProps),[n.renderSlot(e.$slots,"display")],16,p))],2)),[[c]])},module.exports=c;
+"use strict";var e=require("primevue/basecomponent"),t=require("primevue/button"),n=require("primevue/focustrap"),o=require("primevue/icons/times"),l=require("vue");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=i(e),s=i(t),c=i(n),p=i(o),r={name:"Inplace",extends:a.default,emits:["open","close","update:active"],props:{closable:{type:Boolean,default:!1},active:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},closeIcon:{type:String,default:void 0},displayProps:{type:null,default:null},closeButtonProps:{type:null,default:null}},data(){return{d_active:this.active}},watch:{active(e){this.d_active=e}},methods:{open(e){this.disabled||(this.$emit("open",e),this.d_active=!0,this.$emit("update:active",!0))},close(e){this.$emit("close",e),this.d_active=!1,this.$emit("update:active",!1),setTimeout((()=>{this.$refs.display.focus()}),0)}},computed:{containerClass(){return["p-inplace p-component",{"p-inplace-closable":this.closable}]},displayClass(){return["p-inplace-display",{"p-disabled":this.disabled}]},closeAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.close:void 0}},components:{IPButton:s.default,TimesIcon:p.default},directives:{focustrap:c.default}};const d=["tabindex"];!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===n&&o.firstChild?o.insertBefore(l,o.firstChild):o.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}("\n.p-inplace .p-inplace-display {\n    display: inline;\n    cursor: pointer;\n}\n.p-inplace .p-inplace-content {\n    display: inline;\n}\n.p-fluid .p-inplace.p-inplace-closable .p-inplace-content {\n    display: flex;\n}\n.p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext {\n    flex: 1 1 auto;\n    width: 1%;\n}\n"),r.render=function(e,t,n,o,i,a){const s=l.resolveComponent("IPButton"),c=l.resolveDirective("focustrap");return l.withDirectives((l.openBlock(),l.createElementBlock("div",l.mergeProps({class:a.containerClass,"aria-live":"polite"},e.ptm("root")),[i.d_active?(l.openBlock(),l.createElementBlock("div",l.mergeProps({key:1,class:"p-inplace-content"},e.ptm("content")),[l.renderSlot(e.$slots,"content"),n.closable?(l.openBlock(),l.createBlock(s,l.mergeProps({key:0,"aria-label":a.closeAriaLabel,onClick:a.close,pt:e.ptm("closeButton")},n.closeButtonProps),{icon:l.withCtx((()=>[l.renderSlot(e.$slots,"closeicon",{},(()=>[(l.openBlock(),l.createBlock(l.resolveDynamicComponent(n.closeIcon?"span":"TimesIcon"),l.mergeProps({class:n.closeIcon},e.ptm("closeButton").icon),null,16,["class"]))]))])),_:3},16,["aria-label","onClick","pt"])):l.createCommentVNode("",!0)],16)):(l.openBlock(),l.createElementBlock("div",l.mergeProps({key:0,ref:"display",class:a.displayClass,tabindex:e.$attrs.tabindex||"0",role:"button",onClick:t[0]||(t[0]=(...e)=>a.open&&a.open(...e)),onKeydown:t[1]||(t[1]=l.withKeys(((...e)=>a.open&&a.open(...e)),["enter"]))},{...n.displayProps,...e.ptm("display")}),[l.renderSlot(e.$slots,"display")],16,d))],16)),[[c]])},module.exports=r;

package/inplace/inplace.esm.js

@@ -1,10 +1,12 @@
+import BaseComponent from 'primevue/basecomponent';
 import Button from 'primevue/button';
 import FocusTrap from 'primevue/focustrap';
 import TimesIcon from 'primevue/icons/times';
-import { resolveComponent, resolveDirective, withDirectives, openBlock, createElementBlock, normalizeClass, mergeProps, withKeys, renderSlot, createBlock, withCtx, resolveDynamicComponent, createCommentVNode } from 'vue';
+import { resolveComponent, resolveDirective, withDirectives, openBlock, createElementBlock, mergeProps, withKeys, renderSlot, createBlock, withCtx, resolveDynamicComponent, createCommentVNode } from 'vue';
 
 var script = {
     name: 'Inplace',
+    extends: BaseComponent,
     emits: ['open', 'close', 'update:active'],
     props: {
         closable: {
@@ -82,19 +84,15 @@ var script = {
 };
 
 const _hoisted_1 = ["tabindex"];
-const _hoisted_2 = {
-  key: 1,
-  class: "p-inplace-content"
-};
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_IPButton = resolveComponent("IPButton");
   const _directive_focustrap = resolveDirective("focustrap");
 
-  return withDirectives((openBlock(), createElementBlock("div", {
-    class: normalizeClass($options.containerClass),
+  return withDirectives((openBlock(), createElementBlock("div", mergeProps({
+    class: $options.containerClass,
     "aria-live": "polite"
-  }, [
+  }, _ctx.ptm('root')), [
     (!$data.d_active)
       ? (openBlock(), createElementBlock("div", mergeProps({
           key: 0,
@@ -104,29 +102,31 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           role: "button",
           onClick: _cache[0] || (_cache[0] = (...args) => ($options.open && $options.open(...args))),
           onKeydown: _cache[1] || (_cache[1] = withKeys((...args) => ($options.open && $options.open(...args)), ["enter"]))
-        }, $props.displayProps), [
+        }, { ...$props.displayProps, ..._ctx.ptm('display') }), [
           renderSlot(_ctx.$slots, "display")
         ], 16, _hoisted_1))
-      : (openBlock(), createElementBlock("div", _hoisted_2, [
+      : (openBlock(), createElementBlock("div", mergeProps({
+          key: 1,
+          class: "p-inplace-content"
+        }, _ctx.ptm('content')), [
           renderSlot(_ctx.$slots, "content"),
           ($props.closable)
             ? (openBlock(), createBlock(_component_IPButton, mergeProps({
                 key: 0,
                 "aria-label": $options.closeAriaLabel,
-                onClick: $options.close
+                onClick: $options.close,
+                pt: _ctx.ptm('closeButton')
               }, $props.closeButtonProps), {
                 icon: withCtx(() => [
                   renderSlot(_ctx.$slots, "closeicon", {}, () => [
-                    (openBlock(), createBlock(resolveDynamicComponent($props.closeIcon ? 'span' : 'TimesIcon'), {
-                      class: normalizeClass($props.closeIcon)
-                    }, null, 8, ["class"]))
+                    (openBlock(), createBlock(resolveDynamicComponent($props.closeIcon ? 'span' : 'TimesIcon'), mergeProps({ class: $props.closeIcon }, _ctx.ptm('closeButton')['icon']), null, 16, ["class"]))
                   ])
                 ]),
                 _: 3
-              }, 16, ["aria-label", "onClick"]))
+              }, 16, ["aria-label", "onClick", "pt"]))
             : createCommentVNode("", true)
-        ]))
-  ], 2)), [
+        ], 16))
+  ], 16)), [
     [_directive_focustrap]
   ])
 }

package/inplace/inplace.esm.min.js

@@ -1 +1 @@
-import e from"primevue/button";import t from"primevue/focustrap";import i from"primevue/icons/times";import{resolveComponent as n,resolveDirective as l,withDirectives as a,openBlock as o,createElementBlock as s,normalizeClass as c,mergeProps as p,withKeys as d,renderSlot as r,createBlock as u,withCtx as m,resolveDynamicComponent as f,createCommentVNode as v}from"vue";var y={name:"Inplace",emits:["open","close","update:active"],props:{closable:{type:Boolean,default:!1},active:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},closeIcon:{type:String,default:void 0},displayProps:{type:null,default:null},closeButtonProps:{type:null,default:null}},data(){return{d_active:this.active}},watch:{active(e){this.d_active=e}},methods:{open(e){this.disabled||(this.$emit("open",e),this.d_active=!0,this.$emit("update:active",!0))},close(e){this.$emit("close",e),this.d_active=!1,this.$emit("update:active",!1),setTimeout((()=>{this.$refs.display.focus()}),0)}},computed:{containerClass(){return["p-inplace p-component",{"p-inplace-closable":this.closable}]},displayClass(){return["p-inplace-display",{"p-disabled":this.disabled}]},closeAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.close:void 0}},components:{IPButton:e,TimesIcon:i},directives:{focustrap:t}};const h=["tabindex"],b={key:1,class:"p-inplace-content"};!function(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===i&&n.firstChild?n.insertBefore(l,n.firstChild):n.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}("\n.p-inplace .p-inplace-display {\n    display: inline;\n    cursor: pointer;\n}\n.p-inplace .p-inplace-content {\n    display: inline;\n}\n.p-fluid .p-inplace.p-inplace-closable .p-inplace-content {\n    display: flex;\n}\n.p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext {\n    flex: 1 1 auto;\n    width: 1%;\n}\n"),y.render=function(e,t,i,y,C,$){const x=n("IPButton"),B=l("focustrap");return a((o(),s("div",{class:c($.containerClass),"aria-live":"polite"},[C.d_active?(o(),s("div",b,[r(e.$slots,"content"),i.closable?(o(),u(x,p({key:0,"aria-label":$.closeAriaLabel,onClick:$.close},i.closeButtonProps),{icon:m((()=>[r(e.$slots,"closeicon",{},(()=>[(o(),u(f(i.closeIcon?"span":"TimesIcon"),{class:c(i.closeIcon)},null,8,["class"]))]))])),_:3},16,["aria-label","onClick"])):v("",!0)])):(o(),s("div",p({key:0,ref:"display",class:$.displayClass,tabindex:e.$attrs.tabindex||"0",role:"button",onClick:t[0]||(t[0]=(...e)=>$.open&&$.open(...e)),onKeydown:t[1]||(t[1]=d(((...e)=>$.open&&$.open(...e)),["enter"]))},i.displayProps),[r(e.$slots,"display")],16,h))],2)),[[B]])};export{y as default};
+import e from"primevue/basecomponent";import t from"primevue/button";import n from"primevue/focustrap";import i from"primevue/icons/times";import{resolveComponent as o,resolveDirective as l,withDirectives as a,openBlock as s,createElementBlock as p,mergeProps as c,withKeys as d,renderSlot as r,createBlock as u,withCtx as m,resolveDynamicComponent as f,createCommentVNode as v}from"vue";var y={name:"Inplace",extends:e,emits:["open","close","update:active"],props:{closable:{type:Boolean,default:!1},active:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},closeIcon:{type:String,default:void 0},displayProps:{type:null,default:null},closeButtonProps:{type:null,default:null}},data(){return{d_active:this.active}},watch:{active(e){this.d_active=e}},methods:{open(e){this.disabled||(this.$emit("open",e),this.d_active=!0,this.$emit("update:active",!0))},close(e){this.$emit("close",e),this.d_active=!1,this.$emit("update:active",!1),setTimeout((()=>{this.$refs.display.focus()}),0)}},computed:{containerClass(){return["p-inplace p-component",{"p-inplace-closable":this.closable}]},displayClass(){return["p-inplace-display",{"p-disabled":this.disabled}]},closeAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.close:void 0}},components:{IPButton:t,TimesIcon:i},directives:{focustrap:n}};const h=["tabindex"];!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css","top"===n&&i.firstChild?i.insertBefore(o,i.firstChild):i.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}}("\n.p-inplace .p-inplace-display {\n    display: inline;\n    cursor: pointer;\n}\n.p-inplace .p-inplace-content {\n    display: inline;\n}\n.p-fluid .p-inplace.p-inplace-closable .p-inplace-content {\n    display: flex;\n}\n.p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext {\n    flex: 1 1 auto;\n    width: 1%;\n}\n"),y.render=function(e,t,n,i,y,b){const x=o("IPButton"),B=l("focustrap");return a((s(),p("div",c({class:b.containerClass,"aria-live":"polite"},e.ptm("root")),[y.d_active?(s(),p("div",c({key:1,class:"p-inplace-content"},e.ptm("content")),[r(e.$slots,"content"),n.closable?(s(),u(x,c({key:0,"aria-label":b.closeAriaLabel,onClick:b.close,pt:e.ptm("closeButton")},n.closeButtonProps),{icon:m((()=>[r(e.$slots,"closeicon",{},(()=>[(s(),u(f(n.closeIcon?"span":"TimesIcon"),c({class:n.closeIcon},e.ptm("closeButton").icon),null,16,["class"]))]))])),_:3},16,["aria-label","onClick","pt"])):v("",!0)],16)):(s(),p("div",c({key:0,ref:"display",class:b.displayClass,tabindex:e.$attrs.tabindex||"0",role:"button",onClick:t[0]||(t[0]=(...e)=>b.open&&b.open(...e)),onKeydown:t[1]||(t[1]=d(((...e)=>b.open&&b.open(...e)),["enter"]))},{...n.displayProps,...e.ptm("display")}),[r(e.$slots,"display")],16,h))],16)),[[B]])};export{y as default};

package/inplace/inplace.js

@@ -1,15 +1,17 @@
 this.primevue = this.primevue || {};
-this.primevue.inplace = (function (Button, FocusTrap, TimesIcon, vue) {
+this.primevue.inplace = (function (BaseComponent, Button, FocusTrap, TimesIcon, vue) {
     'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+    var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
     var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
     var FocusTrap__default = /*#__PURE__*/_interopDefaultLegacy(FocusTrap);
     var TimesIcon__default = /*#__PURE__*/_interopDefaultLegacy(TimesIcon);
 
     var script = {
         name: 'Inplace',
+        extends: BaseComponent__default["default"],
         emits: ['open', 'close', 'update:active'],
         props: {
             closable: {
@@ -87,19 +89,15 @@ this.primevue.inplace = (function (Button, FocusTrap, TimesIcon, vue) {
     };
 
     const _hoisted_1 = ["tabindex"];
-    const _hoisted_2 = {
-      key: 1,
-      class: "p-inplace-content"
-    };
 
     function render(_ctx, _cache, $props, $setup, $data, $options) {
       const _component_IPButton = vue.resolveComponent("IPButton");
       const _directive_focustrap = vue.resolveDirective("focustrap");
 
-      return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
-        class: vue.normalizeClass($options.containerClass),
+      return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+        class: $options.containerClass,
         "aria-live": "polite"
-      }, [
+      }, _ctx.ptm('root')), [
         (!$data.d_active)
           ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
               key: 0,
@@ -109,29 +107,31 @@ this.primevue.inplace = (function (Button, FocusTrap, TimesIcon, vue) {
               role: "button",
               onClick: _cache[0] || (_cache[0] = (...args) => ($options.open && $options.open(...args))),
               onKeydown: _cache[1] || (_cache[1] = vue.withKeys((...args) => ($options.open && $options.open(...args)), ["enter"]))
-            }, $props.displayProps), [
+            }, { ...$props.displayProps, ..._ctx.ptm('display') }), [
               vue.renderSlot(_ctx.$slots, "display")
             ], 16, _hoisted_1))
-          : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
+          : (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+              key: 1,
+              class: "p-inplace-content"
+            }, _ctx.ptm('content')), [
               vue.renderSlot(_ctx.$slots, "content"),
               ($props.closable)
                 ? (vue.openBlock(), vue.createBlock(_component_IPButton, vue.mergeProps({
                     key: 0,
                     "aria-label": $options.closeAriaLabel,
-                    onClick: $options.close
+                    onClick: $options.close,
+                    pt: _ctx.ptm('closeButton')
                   }, $props.closeButtonProps), {
                     icon: vue.withCtx(() => [
                       vue.renderSlot(_ctx.$slots, "closeicon", {}, () => [
-                        (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.closeIcon ? 'span' : 'TimesIcon'), {
-                          class: vue.normalizeClass($props.closeIcon)
-                        }, null, 8, ["class"]))
+                        (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.closeIcon ? 'span' : 'TimesIcon'), vue.mergeProps({ class: $props.closeIcon }, _ctx.ptm('closeButton')['icon']), null, 16, ["class"]))
                       ])
                     ]),
                     _: 3
-                  }, 16, ["aria-label", "onClick"]))
+                  }, 16, ["aria-label", "onClick", "pt"]))
                 : vue.createCommentVNode("", true)
-            ]))
-      ], 2)), [
+            ], 16))
+      ], 16)), [
         [_directive_focustrap]
       ])
     }
@@ -170,4 +170,4 @@ this.primevue.inplace = (function (Button, FocusTrap, TimesIcon, vue) {
 
     return script;
 
-})(primevue.button, primevue.focustrap, primevue.icons.times, Vue);
+})(primevue.basecomponent, primevue.button, primevue.focustrap, primevue.icons.times, Vue);

package/inplace/inplace.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.inplace=function(e,t,n,l){"use strict";function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=i(e),a=i(t),s=i(n),c={name:"Inplace",emits:["open","close","update:active"],props:{closable:{type:Boolean,default:!1},active:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},closeIcon:{type:String,default:void 0},displayProps:{type:null,default:null},closeButtonProps:{type:null,default:null}},data(){return{d_active:this.active}},watch:{active(e){this.d_active=e}},methods:{open(e){this.disabled||(this.$emit("open",e),this.d_active=!0,this.$emit("update:active",!0))},close(e){this.$emit("close",e),this.d_active=!1,this.$emit("update:active",!1),setTimeout((()=>{this.$refs.display.focus()}),0)}},computed:{containerClass(){return["p-inplace p-component",{"p-inplace-closable":this.closable}]},displayClass(){return["p-inplace-display",{"p-disabled":this.disabled}]},closeAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.close:void 0}},components:{IPButton:o.default,TimesIcon:s.default},directives:{focustrap:a.default}};const p=["tabindex"],r={key:1,class:"p-inplace-content"};return function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var l=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===n&&l.firstChild?l.insertBefore(i,l.firstChild):l.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}("\n.p-inplace .p-inplace-display {\n    display: inline;\n    cursor: pointer;\n}\n.p-inplace .p-inplace-content {\n    display: inline;\n}\n.p-fluid .p-inplace.p-inplace-closable .p-inplace-content {\n    display: flex;\n}\n.p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext {\n    flex: 1 1 auto;\n    width: 1%;\n}\n"),c.render=function(e,t,n,i,o,a){const s=l.resolveComponent("IPButton"),c=l.resolveDirective("focustrap");return l.withDirectives((l.openBlock(),l.createElementBlock("div",{class:l.normalizeClass(a.containerClass),"aria-live":"polite"},[o.d_active?(l.openBlock(),l.createElementBlock("div",r,[l.renderSlot(e.$slots,"content"),n.closable?(l.openBlock(),l.createBlock(s,l.mergeProps({key:0,"aria-label":a.closeAriaLabel,onClick:a.close},n.closeButtonProps),{icon:l.withCtx((()=>[l.renderSlot(e.$slots,"closeicon",{},(()=>[(l.openBlock(),l.createBlock(l.resolveDynamicComponent(n.closeIcon?"span":"TimesIcon"),{class:l.normalizeClass(n.closeIcon)},null,8,["class"]))]))])),_:3},16,["aria-label","onClick"])):l.createCommentVNode("",!0)])):(l.openBlock(),l.createElementBlock("div",l.mergeProps({key:0,ref:"display",class:a.displayClass,tabindex:e.$attrs.tabindex||"0",role:"button",onClick:t[0]||(t[0]=(...e)=>a.open&&a.open(...e)),onKeydown:t[1]||(t[1]=l.withKeys(((...e)=>a.open&&a.open(...e)),["enter"]))},n.displayProps),[l.renderSlot(e.$slots,"display")],16,p))],2)),[[c]])},c}(primevue.button,primevue.focustrap,primevue.icons.times,Vue);
+this.primevue=this.primevue||{},this.primevue.inplace=function(e,t,n,o,l){"use strict";function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=i(e),s=i(t),c=i(n),p=i(o),r={name:"Inplace",extends:a.default,emits:["open","close","update:active"],props:{closable:{type:Boolean,default:!1},active:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},closeIcon:{type:String,default:void 0},displayProps:{type:null,default:null},closeButtonProps:{type:null,default:null}},data(){return{d_active:this.active}},watch:{active(e){this.d_active=e}},methods:{open(e){this.disabled||(this.$emit("open",e),this.d_active=!0,this.$emit("update:active",!0))},close(e){this.$emit("close",e),this.d_active=!1,this.$emit("update:active",!1),setTimeout((()=>{this.$refs.display.focus()}),0)}},computed:{containerClass(){return["p-inplace p-component",{"p-inplace-closable":this.closable}]},displayClass(){return["p-inplace-display",{"p-disabled":this.disabled}]},closeAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.close:void 0}},components:{IPButton:s.default,TimesIcon:p.default},directives:{focustrap:c.default}};const d=["tabindex"];return function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===n&&o.firstChild?o.insertBefore(l,o.firstChild):o.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}("\n.p-inplace .p-inplace-display {\n    display: inline;\n    cursor: pointer;\n}\n.p-inplace .p-inplace-content {\n    display: inline;\n}\n.p-fluid .p-inplace.p-inplace-closable .p-inplace-content {\n    display: flex;\n}\n.p-fluid .p-inplace.p-inplace-closable .p-inplace-content > .p-inputtext {\n    flex: 1 1 auto;\n    width: 1%;\n}\n"),r.render=function(e,t,n,o,i,a){const s=l.resolveComponent("IPButton"),c=l.resolveDirective("focustrap");return l.withDirectives((l.openBlock(),l.createElementBlock("div",l.mergeProps({class:a.containerClass,"aria-live":"polite"},e.ptm("root")),[i.d_active?(l.openBlock(),l.createElementBlock("div",l.mergeProps({key:1,class:"p-inplace-content"},e.ptm("content")),[l.renderSlot(e.$slots,"content"),n.closable?(l.openBlock(),l.createBlock(s,l.mergeProps({key:0,"aria-label":a.closeAriaLabel,onClick:a.close,pt:e.ptm("closeButton")},n.closeButtonProps),{icon:l.withCtx((()=>[l.renderSlot(e.$slots,"closeicon",{},(()=>[(l.openBlock(),l.createBlock(l.resolveDynamicComponent(n.closeIcon?"span":"TimesIcon"),l.mergeProps({class:n.closeIcon},e.ptm("closeButton").icon),null,16,["class"]))]))])),_:3},16,["aria-label","onClick","pt"])):l.createCommentVNode("",!0)],16)):(l.openBlock(),l.createElementBlock("div",l.mergeProps({key:0,ref:"display",class:a.displayClass,tabindex:e.$attrs.tabindex||"0",role:"button",onClick:t[0]||(t[0]=(...e)=>a.open&&a.open(...e)),onKeydown:t[1]||(t[1]=l.withKeys(((...e)=>a.open&&a.open(...e)),["enter"]))},{...n.displayProps,...e.ptm("display")}),[l.renderSlot(e.$slots,"display")],16,d))],16)),[[c]])},r}(primevue.basecomponent,primevue.button,primevue.focustrap,primevue.icons.times,Vue);