primevue 3.26.1 → 3.28.0

package/inlinemessage/inlinemessage.cjs.js

@@ -1,13 +1,31 @@
 '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');
+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 CheckIcon__default = /*#__PURE__*/_interopDefaultLegacy(CheckIcon);
+var ExclamationTriangleIcon__default = /*#__PURE__*/_interopDefaultLegacy(ExclamationTriangleIcon);
+var InfoCircleIcon__default = /*#__PURE__*/_interopDefaultLegacy(InfoCircleIcon);
+var TimesCircleIcon__default = /*#__PURE__*/_interopDefaultLegacy(TimesCircleIcon);
+
 var script = {
     name: 'InlineMessage',
+    extends: BaseComponent__default["default"],
     props: {
         severity: {
             type: String,
             default: 'error'
+        },
+        icon: {
+            type: String,
+            default: undefined
         }
     },
     timeout: null,
@@ -27,36 +45,33 @@ var script = {
         containerClass() {
             return ['p-inline-message p-component p-inline-message-' + this.severity, { 'p-inline-message-icon-only': !this.$slots.default }];
         },
-        iconClass() {
-            return [
-                'p-inline-message-icon pi',
-                {
-                    'pi-info-circle': this.severity === 'info',
-                    'pi-check': this.severity === 'success',
-                    'pi-exclamation-triangle': this.severity === 'warn',
-                    'pi-times-circle': this.severity === 'error'
-                }
-            ];
+        iconComponent() {
+            return {
+                info: InfoCircleIcon__default["default"],
+                success: CheckIcon__default["default"],
+                warn: ExclamationTriangleIcon__default["default"],
+                error: TimesCircleIcon__default["default"]
+            }[this.severity];
         }
     }
 };
 
-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)
-  }, [
-    vue.createElementVNode("span", {
-      class: vue.normalizeClass($options.iconClass)
-    }, null, 2),
-    vue.createElementVNode("span", _hoisted_1, [
+    class: $options.containerClass
+  }, _ctx.ptm('root')), [
+    vue.renderSlot(_ctx.$slots, "icon", {}, () => [
+      (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", 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("vue"),i={name:"InlineMessage",props:{severity:{type:String,default:"error"}},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}]},iconClass(){return["p-inline-message-icon pi",{"pi-info-circle":"info"===this.severity,"pi-check":"success"===this.severity,"pi-exclamation-triangle":"warn"===this.severity,"pi-times-circle":"error"===this.severity}]}}};const n={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"),i.render=function(i,t,s,l,a,r){return e.openBlock(),e.createElementBlock("div",{"aria-live":"polite",class:e.normalizeClass(r.containerClass)},[e.createElementVNode("span",{class:e.normalizeClass(r.iconClass)},null,2),e.createElementVNode("span",n,[e.renderSlot(i.$slots,"default",{},(()=>[e.createTextVNode(" ")]))])],2)},module.exports=i;
+"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,21 @@
-import { openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, createTextVNode } from 'vue';
+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, mergeProps, renderSlot, createBlock, resolveDynamicComponent, createElementVNode, createTextVNode } from 'vue';
 
 var script = {
     name: 'InlineMessage',
+    extends: BaseComponent,
     props: {
         severity: {
             type: String,
             default: 'error'
+        },
+        icon: {
+            type: String,
+            default: undefined
         }
     },
     timeout: null,
@@ -25,36 +35,33 @@ var script = {
         containerClass() {
             return ['p-inline-message p-component p-inline-message-' + this.severity, { 'p-inline-message-icon-only': !this.$slots.default }];
         },
-        iconClass() {
-            return [
-                'p-inline-message-icon pi',
-                {
-                    'pi-info-circle': this.severity === 'info',
-                    'pi-check': this.severity === 'success',
-                    'pi-exclamation-triangle': this.severity === 'warn',
-                    'pi-times-circle': this.severity === 'error'
-                }
-            ];
+        iconComponent() {
+            return {
+                info: InfoCircleIcon,
+                success: CheckIcon,
+                warn: ExclamationTriangleIcon,
+                error: TimesCircleIcon
+            }[this.severity];
         }
     }
 };
 
-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)
-  }, [
-    createElementVNode("span", {
-      class: normalizeClass($options.iconClass)
-    }, null, 2),
-    createElementVNode("span", _hoisted_1, [
+    class: $options.containerClass
+  }, _ctx.ptm('root')), [
+    renderSlot(_ctx.$slots, "icon", {}, () => [
+      (openBlock(), createBlock(resolveDynamicComponent($props.icon ? 'span' : $options.iconComponent), mergeProps({
+        class: ['p-inline-message-icon', $props.icon]
+      }, _ctx.ptm('icon')), null, 16, ["class"]))
+    ]),
+    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{openBlock as e,createElementBlock as i,normalizeClass as n,createElementVNode as t,renderSlot as s,createTextVNode as l}from"vue";var a={name:"InlineMessage",props:{severity:{type:String,default:"error"}},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}]},iconClass(){return["p-inline-message-icon pi",{"pi-info-circle":"info"===this.severity,"pi-check":"success"===this.severity,"pi-exclamation-triangle":"warn"===this.severity,"pi-times-circle":"error"===this.severity}]}}};const r={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"),a.render=function(a,o,c,p,d,m){return e(),i("div",{"aria-live":"polite",class:n(m.containerClass)},[t("span",{class:n(m.iconClass)},null,2),t("span",r,[s(a.$slots,"default",{},(()=>[l(" ")]))])],2)};export{a 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,13 +1,26 @@
 this.primevue = this.primevue || {};
-this.primevue.inlinemessage = (function (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);
+    var TimesCircleIcon__default = /*#__PURE__*/_interopDefaultLegacy(TimesCircleIcon);
+
     var script = {
         name: 'InlineMessage',
+        extends: BaseComponent__default["default"],
         props: {
             severity: {
                 type: String,
                 default: 'error'
+            },
+            icon: {
+                type: String,
+                default: undefined
             }
         },
         timeout: null,
@@ -27,36 +40,33 @@ this.primevue.inlinemessage = (function (vue) {
             containerClass() {
                 return ['p-inline-message p-component p-inline-message-' + this.severity, { 'p-inline-message-icon-only': !this.$slots.default }];
             },
-            iconClass() {
-                return [
-                    'p-inline-message-icon pi',
-                    {
-                        'pi-info-circle': this.severity === 'info',
-                        'pi-check': this.severity === 'success',
-                        'pi-exclamation-triangle': this.severity === 'warn',
-                        'pi-times-circle': this.severity === 'error'
-                    }
-                ];
+            iconComponent() {
+                return {
+                    info: InfoCircleIcon__default["default"],
+                    success: CheckIcon__default["default"],
+                    warn: ExclamationTriangleIcon__default["default"],
+                    error: TimesCircleIcon__default["default"]
+                }[this.severity];
             }
         }
     };
 
-    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)
-      }, [
-        vue.createElementVNode("span", {
-          class: vue.normalizeClass($options.iconClass)
-        }, null, 2),
-        vue.createElementVNode("span", _hoisted_1, [
+        class: $options.containerClass
+      }, _ctx.ptm('root')), [
+        vue.renderSlot(_ctx.$slots, "icon", {}, () => [
+          (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", vue.mergeProps({ class: "p-inline-message-text" }, _ctx.ptm('text')), [
           vue.renderSlot(_ctx.$slots, "default", {}, () => [
             vue.createTextVNode(" ")
           ])
-        ])
-      ], 2))
+        ], 16)
+      ], 16))
     }
 
     function styleInject(css, ref) {
@@ -93,4 +103,4 @@ this.primevue.inlinemessage = (function (vue) {
 
     return script;
 
-})(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){"use strict";var i={name:"InlineMessage",props:{severity:{type:String,default:"error"}},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}]},iconClass(){return["p-inline-message-icon pi",{"pi-info-circle":"info"===this.severity,"pi-check":"success"===this.severity,"pi-exclamation-triangle":"warn"===this.severity,"pi-times-circle":"error"===this.severity}]}}};const n={class:"p-inline-message-text"};return 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"),i.render=function(i,t,s,l,a,r){return e.openBlock(),e.createElementBlock("div",{"aria-live":"polite",class:e.normalizeClass(r.containerClass)},[e.createElementVNode("span",{class:e.normalizeClass(r.iconClass)},null,2),e.createElementVNode("span",n,[e.renderSlot(i.$slots,"default",{},(()=>[e.createTextVNode(" ")]))])],2)},i}(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.
  */
@@ -31,7 +85,7 @@ export interface InplaceProps {
     disabled?: boolean | undefined;
     /**
      * Icon to display in the close button.
-     * @defaultValue pi pi-times
+     * @deprecated since v3.27.0. Use 'closeicon' slot.
      */
     closeIcon?: string | undefined;
     /**
@@ -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;
 }
 
 /**
@@ -56,6 +115,10 @@ export interface InplaceSlots {
      * Custom content template.
      */
     content(): VNode[];
+    /**
+     * Custom close icon template.
+     */
+    closeicon(): VNode[];
 }
 
 /**

package/inplace/Inplace.vue

@@ -1,21 +1,30 @@
 <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" :icon="closeIcon" :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" v-bind="ptm('closeButton')['icon']"></component>
+                    </slot>
+                </template>
+            </IPButton>
         </div>
     </div>
 </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: {
@@ -32,7 +41,7 @@ export default {
         },
         closeIcon: {
             type: String,
-            default: 'pi pi-times'
+            default: undefined
         },
         displayProps: {
             type: null,
@@ -84,7 +93,8 @@ export default {
         }
     },
     components: {
-        IPButton: Button
+        IPButton: Button,
+        TimesIcon
     },
     directives: {
         focustrap: FocusTrap

package/inplace/inplace.cjs.js

@@ -1,16 +1,21 @@
 'use strict';
 
+var BaseComponent = require('primevue/basecomponent');
 var Button = require('primevue/button');
 var FocusTrap = require('primevue/focustrap');
+var TimesIcon = require('primevue/icons/times');
 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: {
@@ -27,7 +32,7 @@ var script = {
         },
         closeIcon: {
             type: String,
-            default: 'pi pi-times'
+            default: undefined
         },
         displayProps: {
             type: null,
@@ -79,7 +84,8 @@ var script = {
         }
     },
     components: {
-        IPButton: Button__default["default"]
+        IPButton: Button__default["default"],
+        TimesIcon: TimesIcon__default["default"]
     },
     directives: {
         focustrap: FocusTrap__default["default"]
@@ -87,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,
@@ -109,21 +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,
-                icon: $props.closeIcon,
                 "aria-label": $options.closeAriaLabel,
-                onClick: $options.close
-              }, $props.closeButtonProps), null, 16, ["icon", "aria-label", "onClick"]))
+                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'), vue.mergeProps({ class: $props.closeIcon }, _ctx.ptm('closeButton')['icon']), null, 16, ["class"]))
+                  ])
+                ]),
+                _: 3
+              }, 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("vue");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=n(e),a=n(t),o={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:"pi pi-times"},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:i.default},directives:{focustrap:a.default}};const s=["tabindex"],c={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"),o.render=function(e,t,n,i,a,o){const p=l.resolveComponent("IPButton"),r=l.resolveDirective("focustrap");return l.withDirectives((l.openBlock(),l.createElementBlock("div",{class:l.normalizeClass(o.containerClass),"aria-live":"polite"},[a.d_active?(l.openBlock(),l.createElementBlock("div",c,[l.renderSlot(e.$slots,"content"),n.closable?(l.openBlock(),l.createBlock(p,l.mergeProps({key:0,icon:n.closeIcon,"aria-label":o.closeAriaLabel,onClick:o.close},n.closeButtonProps),null,16,["icon","aria-label","onClick"])):l.createCommentVNode("",!0)])):(l.openBlock(),l.createElementBlock("div",l.mergeProps({key:0,ref:"display",class:o.displayClass,tabindex:e.$attrs.tabindex||"0",role:"button",onClick:t[0]||(t[0]=(...e)=>o.open&&o.open(...e)),onKeydown:t[1]||(t[1]=l.withKeys(((...e)=>o.open&&o.open(...e)),["enter"]))},n.displayProps),[l.renderSlot(e.$slots,"display")],16,s))],2)),[[r]])},module.exports=o;
+"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;