primevue 3.27.0 → 3.28.0

package/terminal/Terminal.vue

@@ -1,25 +1,27 @@
 <template>
-    <div class="p-terminal p-component" @click="onClick">
-        <div v-if="welcomeMessage">{{ welcomeMessage }}</div>
-        <div class="p-terminal-content">
-            <div v-for="(command, i) of commands" :key="command.text + i.toString()">
-                <span class="p-terminal-prompt">{{ prompt }}</span>
-                <span class="p-terminal-command">{{ command.text }}</span>
-                <div class="p-terminal-response" aria-live="polite">{{ command.response }}</div>
+    <div class="p-terminal p-component" @click="onClick" v-bind="ptm('root')">
+        <div v-if="welcomeMessage" v-bind="ptm('welcomeMessage')">{{ welcomeMessage }}</div>
+        <div class="p-terminal-content" v-bind="ptm('content')">
+            <div v-for="(command, i) of commands" :key="command.text + i.toString()" v-bind="ptm('commands')">
+                <span class="p-terminal-prompt" v-bind="ptm('prompt')">{{ prompt }}</span>
+                <span class="p-terminal-command" v-bind="ptm('command')">{{ command.text }}</span>
+                <div class="p-terminal-response" aria-live="polite" v-bind="ptm('response')">{{ command.response }}</div>
             </div>
         </div>
-        <div class="p-terminal-prompt-container">
-            <span class="p-terminal-prompt">{{ prompt }}</span>
-            <input ref="input" v-model="commandText" type="text" class="p-terminal-input" autocomplete="off" @keydown="onKeydown" />
+        <div class="p-terminal-prompt-container" v-bind="ptm('container')">
+            <span class="p-terminal-prompt" v-bind="ptm('prompt')">{{ prompt }}</span>
+            <input ref="input" v-model="commandText" type="text" class="p-terminal-input" autocomplete="off" @keydown="onKeydown" v-bind="ptm('commandText')" />
         </div>
     </div>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import TerminalService from 'primevue/terminalservice';
 
 export default {
     name: 'Terminal',
+    extends: BaseComponent,
     props: {
         welcomeMessage: {
             type: String,

package/terminal/terminal.cjs.js

@@ -1,14 +1,17 @@
 'use strict';
 
+var BaseComponent = require('primevue/basecomponent');
 var TerminalService = require('primevue/terminalservice');
 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 TerminalService__default = /*#__PURE__*/_interopDefaultLegacy(TerminalService);
 
 var script = {
     name: 'Terminal',
+    extends: BaseComponent__default["default"],
     props: {
         welcomeMessage: {
             type: String,
@@ -52,50 +55,42 @@ var script = {
     }
 };
 
-const _hoisted_1 = { key: 0 };
-const _hoisted_2 = { class: "p-terminal-content" };
-const _hoisted_3 = { class: "p-terminal-prompt" };
-const _hoisted_4 = { class: "p-terminal-command" };
-const _hoisted_5 = {
-  class: "p-terminal-response",
-  "aria-live": "polite"
-};
-const _hoisted_6 = { class: "p-terminal-prompt-container" };
-const _hoisted_7 = { class: "p-terminal-prompt" };
-
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (vue.openBlock(), vue.createElementBlock("div", {
+  return (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
     class: "p-terminal p-component",
     onClick: _cache[2] || (_cache[2] = (...args) => ($options.onClick && $options.onClick(...args)))
-  }, [
+  }, _ctx.ptm('root')), [
     ($props.welcomeMessage)
-      ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, vue.toDisplayString($props.welcomeMessage), 1))
+      ? (vue.openBlock(), vue.createElementBlock("div", vue.normalizeProps(vue.mergeProps({ key: 0 }, _ctx.ptm('welcomeMessage'))), vue.toDisplayString($props.welcomeMessage), 17))
       : vue.createCommentVNode("", true),
-    vue.createElementVNode("div", _hoisted_2, [
+    vue.createElementVNode("div", vue.mergeProps({ class: "p-terminal-content" }, _ctx.ptm('content')), [
       (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($data.commands, (command, i) => {
-        return (vue.openBlock(), vue.createElementBlock("div", {
+        return (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
           key: command.text + i.toString()
-        }, [
-          vue.createElementVNode("span", _hoisted_3, vue.toDisplayString($props.prompt), 1),
-          vue.createElementVNode("span", _hoisted_4, vue.toDisplayString(command.text), 1),
-          vue.createElementVNode("div", _hoisted_5, vue.toDisplayString(command.response), 1)
-        ]))
+        }, _ctx.ptm('commands')), [
+          vue.createElementVNode("span", vue.mergeProps({ class: "p-terminal-prompt" }, _ctx.ptm('prompt')), vue.toDisplayString($props.prompt), 17),
+          vue.createElementVNode("span", vue.mergeProps({ class: "p-terminal-command" }, _ctx.ptm('command')), vue.toDisplayString(command.text), 17),
+          vue.createElementVNode("div", vue.mergeProps({
+            class: "p-terminal-response",
+            "aria-live": "polite"
+          }, _ctx.ptm('response')), vue.toDisplayString(command.response), 17)
+        ], 16))
       }), 128))
-    ]),
-    vue.createElementVNode("div", _hoisted_6, [
-      vue.createElementVNode("span", _hoisted_7, vue.toDisplayString($props.prompt), 1),
-      vue.withDirectives(vue.createElementVNode("input", {
+    ], 16),
+    vue.createElementVNode("div", vue.mergeProps({ class: "p-terminal-prompt-container" }, _ctx.ptm('container')), [
+      vue.createElementVNode("span", vue.mergeProps({ class: "p-terminal-prompt" }, _ctx.ptm('prompt')), vue.toDisplayString($props.prompt), 17),
+      vue.withDirectives(vue.createElementVNode("input", vue.mergeProps({
         ref: "input",
         "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => (($data.commandText) = $event)),
         type: "text",
         class: "p-terminal-input",
         autocomplete: "off",
         onKeydown: _cache[1] || (_cache[1] = (...args) => ($options.onKeydown && $options.onKeydown(...args)))
-      }, null, 544), [
+      }, _ctx.ptm('commandText')), null, 16), [
         [vue.vModelText, $data.commandText]
       ])
-    ])
-  ]))
+    ], 16)
+  ], 16))
 }
 
 function styleInject(css, ref) {

package/terminal/terminal.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("primevue/terminalservice"),t=require("vue");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=n(e),r={name:"Terminal",props:{welcomeMessage:{type:String,default:null},prompt:{type:String,default:null}},data:()=>({commandText:null,commands:[]}),mounted(){o.default.on("response",this.responseListener),this.$refs.input.focus()},updated(){this.$el.scrollTop=this.$el.scrollHeight},beforeUnmount(){o.default.off("response",this.responseListener)},methods:{onClick(){this.$refs.input.focus()},onKeydown(e){"Enter"===e.code&&this.commandText&&(this.commands.push({text:this.commandText}),o.default.emit("command",this.commandText),this.commandText="")},responseListener(e){this.commands[this.commands.length-1].response=e}}};const l={key:0},a={class:"p-terminal-content"},i={class:"p-terminal-prompt"},s={class:"p-terminal-command"},m={class:"p-terminal-response","aria-live":"polite"},c={class:"p-terminal-prompt-container"},p={class:"p-terminal-prompt"};!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===n&&o.firstChild?o.insertBefore(r,o.firstChild):o.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}("\n.p-terminal {\n    height: 18rem;\n    overflow: auto;\n}\n.p-terminal-prompt-container {\n    display: flex;\n    align-items: center;\n}\n.p-terminal-input {\n    flex: 1 1 auto;\n    border: 0 none;\n    background-color: transparent;\n    color: inherit;\n    padding: 0;\n    outline: 0 none;\n}\n.p-terminal-input::-ms-clear {\n    display: none;\n}\n"),r.render=function(e,n,o,r,d,u){return t.openBlock(),t.createElementBlock("div",{class:"p-terminal p-component",onClick:n[2]||(n[2]=(...e)=>u.onClick&&u.onClick(...e))},[o.welcomeMessage?(t.openBlock(),t.createElementBlock("div",l,t.toDisplayString(o.welcomeMessage),1)):t.createCommentVNode("",!0),t.createElementVNode("div",a,[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(d.commands,((e,n)=>(t.openBlock(),t.createElementBlock("div",{key:e.text+n.toString()},[t.createElementVNode("span",i,t.toDisplayString(o.prompt),1),t.createElementVNode("span",s,t.toDisplayString(e.text),1),t.createElementVNode("div",m,t.toDisplayString(e.response),1)])))),128))]),t.createElementVNode("div",c,[t.createElementVNode("span",p,t.toDisplayString(o.prompt),1),t.withDirectives(t.createElementVNode("input",{ref:"input","onUpdate:modelValue":n[0]||(n[0]=e=>d.commandText=e),type:"text",class:"p-terminal-input",autocomplete:"off",onKeydown:n[1]||(n[1]=(...e)=>u.onKeydown&&u.onKeydown(...e))},null,544),[[t.vModelText,d.commandText]])])])},module.exports=r;
+"use strict";var e=require("primevue/basecomponent"),t=require("primevue/terminalservice"),n=require("vue");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=o(e),m=o(t),s={name:"Terminal",extends:r.default,props:{welcomeMessage:{type:String,default:null},prompt:{type:String,default:null}},data:()=>({commandText:null,commands:[]}),mounted(){m.default.on("response",this.responseListener),this.$refs.input.focus()},updated(){this.$el.scrollTop=this.$el.scrollHeight},beforeUnmount(){m.default.off("response",this.responseListener)},methods:{onClick(){this.$refs.input.focus()},onKeydown(e){"Enter"===e.code&&this.commandText&&(this.commands.push({text:this.commandText}),m.default.emit("command",this.commandText),this.commandText="")},responseListener(e){this.commands[this.commands.length-1].response=e}}};!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===n&&o.firstChild?o.insertBefore(r,o.firstChild):o.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}("\n.p-terminal {\n    height: 18rem;\n    overflow: auto;\n}\n.p-terminal-prompt-container {\n    display: flex;\n    align-items: center;\n}\n.p-terminal-input {\n    flex: 1 1 auto;\n    border: 0 none;\n    background-color: transparent;\n    color: inherit;\n    padding: 0;\n    outline: 0 none;\n}\n.p-terminal-input::-ms-clear {\n    display: none;\n}\n"),s.render=function(e,t,o,r,m,s){return n.openBlock(),n.createElementBlock("div",n.mergeProps({class:"p-terminal p-component",onClick:t[2]||(t[2]=(...e)=>s.onClick&&s.onClick(...e))},e.ptm("root")),[o.welcomeMessage?(n.openBlock(),n.createElementBlock("div",n.normalizeProps(n.mergeProps({key:0},e.ptm("welcomeMessage"))),n.toDisplayString(o.welcomeMessage),17)):n.createCommentVNode("",!0),n.createElementVNode("div",n.mergeProps({class:"p-terminal-content"},e.ptm("content")),[(n.openBlock(!0),n.createElementBlock(n.Fragment,null,n.renderList(m.commands,((t,r)=>(n.openBlock(),n.createElementBlock("div",n.mergeProps({key:t.text+r.toString()},e.ptm("commands")),[n.createElementVNode("span",n.mergeProps({class:"p-terminal-prompt"},e.ptm("prompt")),n.toDisplayString(o.prompt),17),n.createElementVNode("span",n.mergeProps({class:"p-terminal-command"},e.ptm("command")),n.toDisplayString(t.text),17),n.createElementVNode("div",n.mergeProps({class:"p-terminal-response","aria-live":"polite"},e.ptm("response")),n.toDisplayString(t.response),17)],16)))),128))],16),n.createElementVNode("div",n.mergeProps({class:"p-terminal-prompt-container"},e.ptm("container")),[n.createElementVNode("span",n.mergeProps({class:"p-terminal-prompt"},e.ptm("prompt")),n.toDisplayString(o.prompt),17),n.withDirectives(n.createElementVNode("input",n.mergeProps({ref:"input","onUpdate:modelValue":t[0]||(t[0]=e=>m.commandText=e),type:"text",class:"p-terminal-input",autocomplete:"off",onKeydown:t[1]||(t[1]=(...e)=>s.onKeydown&&s.onKeydown(...e))},e.ptm("commandText")),null,16),[[n.vModelText,m.commandText]])],16)],16)},module.exports=s;

package/terminal/terminal.esm.js

@@ -1,8 +1,10 @@
+import BaseComponent from 'primevue/basecomponent';
 import TerminalService from 'primevue/terminalservice';
-import { openBlock, createElementBlock, toDisplayString, createCommentVNode, createElementVNode, Fragment, renderList, withDirectives, vModelText } from 'vue';
+import { openBlock, createElementBlock, mergeProps, normalizeProps, toDisplayString, createCommentVNode, createElementVNode, Fragment, renderList, withDirectives, vModelText } from 'vue';
 
 var script = {
     name: 'Terminal',
+    extends: BaseComponent,
     props: {
         welcomeMessage: {
             type: String,
@@ -46,50 +48,42 @@ var script = {
     }
 };
 
-const _hoisted_1 = { key: 0 };
-const _hoisted_2 = { class: "p-terminal-content" };
-const _hoisted_3 = { class: "p-terminal-prompt" };
-const _hoisted_4 = { class: "p-terminal-command" };
-const _hoisted_5 = {
-  class: "p-terminal-response",
-  "aria-live": "polite"
-};
-const _hoisted_6 = { class: "p-terminal-prompt-container" };
-const _hoisted_7 = { class: "p-terminal-prompt" };
-
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), createElementBlock("div", {
+  return (openBlock(), createElementBlock("div", mergeProps({
     class: "p-terminal p-component",
     onClick: _cache[2] || (_cache[2] = (...args) => ($options.onClick && $options.onClick(...args)))
-  }, [
+  }, _ctx.ptm('root')), [
     ($props.welcomeMessage)
-      ? (openBlock(), createElementBlock("div", _hoisted_1, toDisplayString($props.welcomeMessage), 1))
+      ? (openBlock(), createElementBlock("div", normalizeProps(mergeProps({ key: 0 }, _ctx.ptm('welcomeMessage'))), toDisplayString($props.welcomeMessage), 17))
       : createCommentVNode("", true),
-    createElementVNode("div", _hoisted_2, [
+    createElementVNode("div", mergeProps({ class: "p-terminal-content" }, _ctx.ptm('content')), [
       (openBlock(true), createElementBlock(Fragment, null, renderList($data.commands, (command, i) => {
-        return (openBlock(), createElementBlock("div", {
+        return (openBlock(), createElementBlock("div", mergeProps({
           key: command.text + i.toString()
-        }, [
-          createElementVNode("span", _hoisted_3, toDisplayString($props.prompt), 1),
-          createElementVNode("span", _hoisted_4, toDisplayString(command.text), 1),
-          createElementVNode("div", _hoisted_5, toDisplayString(command.response), 1)
-        ]))
+        }, _ctx.ptm('commands')), [
+          createElementVNode("span", mergeProps({ class: "p-terminal-prompt" }, _ctx.ptm('prompt')), toDisplayString($props.prompt), 17),
+          createElementVNode("span", mergeProps({ class: "p-terminal-command" }, _ctx.ptm('command')), toDisplayString(command.text), 17),
+          createElementVNode("div", mergeProps({
+            class: "p-terminal-response",
+            "aria-live": "polite"
+          }, _ctx.ptm('response')), toDisplayString(command.response), 17)
+        ], 16))
       }), 128))
-    ]),
-    createElementVNode("div", _hoisted_6, [
-      createElementVNode("span", _hoisted_7, toDisplayString($props.prompt), 1),
-      withDirectives(createElementVNode("input", {
+    ], 16),
+    createElementVNode("div", mergeProps({ class: "p-terminal-prompt-container" }, _ctx.ptm('container')), [
+      createElementVNode("span", mergeProps({ class: "p-terminal-prompt" }, _ctx.ptm('prompt')), toDisplayString($props.prompt), 17),
+      withDirectives(createElementVNode("input", mergeProps({
         ref: "input",
         "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => (($data.commandText) = $event)),
         type: "text",
         class: "p-terminal-input",
         autocomplete: "off",
         onKeydown: _cache[1] || (_cache[1] = (...args) => ($options.onKeydown && $options.onKeydown(...args)))
-      }, null, 544), [
+      }, _ctx.ptm('commandText')), null, 16), [
         [vModelText, $data.commandText]
       ])
-    ])
-  ]))
+    ], 16)
+  ], 16))
 }
 
 function styleInject(css, ref) {

package/terminal/terminal.esm.min.js

@@ -1 +1 @@
-import e from"primevue/terminalservice";import{openBlock as n,createElementBlock as t,toDisplayString as o,createCommentVNode as s,createElementVNode as i,Fragment as r,renderList as a,withDirectives as m,vModelText as l}from"vue";var p={name:"Terminal",props:{welcomeMessage:{type:String,default:null},prompt:{type:String,default:null}},data:()=>({commandText:null,commands:[]}),mounted(){e.on("response",this.responseListener),this.$refs.input.focus()},updated(){this.$el.scrollTop=this.$el.scrollHeight},beforeUnmount(){e.off("response",this.responseListener)},methods:{onClick(){this.$refs.input.focus()},onKeydown(n){"Enter"===n.code&&this.commandText&&(this.commands.push({text:this.commandText}),e.emit("command",this.commandText),this.commandText="")},responseListener(e){this.commands[this.commands.length-1].response=e}}};const d={key:0},c={class:"p-terminal-content"},u={class:"p-terminal-prompt"},h={class:"p-terminal-command"},f={class:"p-terminal-response","aria-live":"polite"},x={class:"p-terminal-prompt-container"},y={class:"p-terminal-prompt"};!function(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],s=document.createElement("style");s.type="text/css","top"===t&&o.firstChild?o.insertBefore(s,o.firstChild):o.appendChild(s),s.styleSheet?s.styleSheet.cssText=e:s.appendChild(document.createTextNode(e))}}("\n.p-terminal {\n    height: 18rem;\n    overflow: auto;\n}\n.p-terminal-prompt-container {\n    display: flex;\n    align-items: center;\n}\n.p-terminal-input {\n    flex: 1 1 auto;\n    border: 0 none;\n    background-color: transparent;\n    color: inherit;\n    padding: 0;\n    outline: 0 none;\n}\n.p-terminal-input::-ms-clear {\n    display: none;\n}\n"),p.render=function(e,p,v,g,T,w){return n(),t("div",{class:"p-terminal p-component",onClick:p[2]||(p[2]=(...e)=>w.onClick&&w.onClick(...e))},[v.welcomeMessage?(n(),t("div",d,o(v.welcomeMessage),1)):s("",!0),i("div",c,[(n(!0),t(r,null,a(T.commands,((e,s)=>(n(),t("div",{key:e.text+s.toString()},[i("span",u,o(v.prompt),1),i("span",h,o(e.text),1),i("div",f,o(e.response),1)])))),128))]),i("div",x,[i("span",y,o(v.prompt),1),m(i("input",{ref:"input","onUpdate:modelValue":p[0]||(p[0]=e=>T.commandText=e),type:"text",class:"p-terminal-input",autocomplete:"off",onKeydown:p[1]||(p[1]=(...e)=>w.onKeydown&&w.onKeydown(...e))},null,544),[[l,T.commandText]])])])};export{p as default};
+import e from"primevue/basecomponent";import n from"primevue/terminalservice";import{openBlock as t,createElementBlock as o,mergeProps as m,normalizeProps as s,toDisplayString as p,createCommentVNode as r,createElementVNode as i,Fragment as a,renderList as l,withDirectives as c,vModelText as d}from"vue";var u={name:"Terminal",extends:e,props:{welcomeMessage:{type:String,default:null},prompt:{type:String,default:null}},data:()=>({commandText:null,commands:[]}),mounted(){n.on("response",this.responseListener),this.$refs.input.focus()},updated(){this.$el.scrollTop=this.$el.scrollHeight},beforeUnmount(){n.off("response",this.responseListener)},methods:{onClick(){this.$refs.input.focus()},onKeydown(e){"Enter"===e.code&&this.commandText&&(this.commands.push({text:this.commandText}),n.emit("command",this.commandText),this.commandText="")},responseListener(e){this.commands[this.commands.length-1].response=e}}};!function(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],m=document.createElement("style");m.type="text/css","top"===t&&o.firstChild?o.insertBefore(m,o.firstChild):o.appendChild(m),m.styleSheet?m.styleSheet.cssText=e:m.appendChild(document.createTextNode(e))}}("\n.p-terminal {\n    height: 18rem;\n    overflow: auto;\n}\n.p-terminal-prompt-container {\n    display: flex;\n    align-items: center;\n}\n.p-terminal-input {\n    flex: 1 1 auto;\n    border: 0 none;\n    background-color: transparent;\n    color: inherit;\n    padding: 0;\n    outline: 0 none;\n}\n.p-terminal-input::-ms-clear {\n    display: none;\n}\n"),u.render=function(e,n,u,h,f,x){return t(),o("div",m({class:"p-terminal p-component",onClick:n[2]||(n[2]=(...e)=>x.onClick&&x.onClick(...e))},e.ptm("root")),[u.welcomeMessage?(t(),o("div",s(m({key:0},e.ptm("welcomeMessage"))),p(u.welcomeMessage),17)):r("",!0),i("div",m({class:"p-terminal-content"},e.ptm("content")),[(t(!0),o(a,null,l(f.commands,((n,s)=>(t(),o("div",m({key:n.text+s.toString()},e.ptm("commands")),[i("span",m({class:"p-terminal-prompt"},e.ptm("prompt")),p(u.prompt),17),i("span",m({class:"p-terminal-command"},e.ptm("command")),p(n.text),17),i("div",m({class:"p-terminal-response","aria-live":"polite"},e.ptm("response")),p(n.response),17)],16)))),128))],16),i("div",m({class:"p-terminal-prompt-container"},e.ptm("container")),[i("span",m({class:"p-terminal-prompt"},e.ptm("prompt")),p(u.prompt),17),c(i("input",m({ref:"input","onUpdate:modelValue":n[0]||(n[0]=e=>f.commandText=e),type:"text",class:"p-terminal-input",autocomplete:"off",onKeydown:n[1]||(n[1]=(...e)=>x.onKeydown&&x.onKeydown(...e))},e.ptm("commandText")),null,16),[[d,f.commandText]])],16)],16)};export{u as default};

package/terminal/terminal.js

@@ -1,13 +1,15 @@
 this.primevue = this.primevue || {};
-this.primevue.terminal = (function (TerminalService, vue) {
+this.primevue.terminal = (function (BaseComponent, TerminalService, vue) {
     'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+    var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
     var TerminalService__default = /*#__PURE__*/_interopDefaultLegacy(TerminalService);
 
     var script = {
         name: 'Terminal',
+        extends: BaseComponent__default["default"],
         props: {
             welcomeMessage: {
                 type: String,
@@ -51,50 +53,42 @@ this.primevue.terminal = (function (TerminalService, vue) {
         }
     };
 
-    const _hoisted_1 = { key: 0 };
-    const _hoisted_2 = { class: "p-terminal-content" };
-    const _hoisted_3 = { class: "p-terminal-prompt" };
-    const _hoisted_4 = { class: "p-terminal-command" };
-    const _hoisted_5 = {
-      class: "p-terminal-response",
-      "aria-live": "polite"
-    };
-    const _hoisted_6 = { class: "p-terminal-prompt-container" };
-    const _hoisted_7 = { class: "p-terminal-prompt" };
-
     function render(_ctx, _cache, $props, $setup, $data, $options) {
-      return (vue.openBlock(), vue.createElementBlock("div", {
+      return (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
         class: "p-terminal p-component",
         onClick: _cache[2] || (_cache[2] = (...args) => ($options.onClick && $options.onClick(...args)))
-      }, [
+      }, _ctx.ptm('root')), [
         ($props.welcomeMessage)
-          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, vue.toDisplayString($props.welcomeMessage), 1))
+          ? (vue.openBlock(), vue.createElementBlock("div", vue.normalizeProps(vue.mergeProps({ key: 0 }, _ctx.ptm('welcomeMessage'))), vue.toDisplayString($props.welcomeMessage), 17))
           : vue.createCommentVNode("", true),
-        vue.createElementVNode("div", _hoisted_2, [
+        vue.createElementVNode("div", vue.mergeProps({ class: "p-terminal-content" }, _ctx.ptm('content')), [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($data.commands, (command, i) => {
-            return (vue.openBlock(), vue.createElementBlock("div", {
+            return (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
               key: command.text + i.toString()
-            }, [
-              vue.createElementVNode("span", _hoisted_3, vue.toDisplayString($props.prompt), 1),
-              vue.createElementVNode("span", _hoisted_4, vue.toDisplayString(command.text), 1),
-              vue.createElementVNode("div", _hoisted_5, vue.toDisplayString(command.response), 1)
-            ]))
+            }, _ctx.ptm('commands')), [
+              vue.createElementVNode("span", vue.mergeProps({ class: "p-terminal-prompt" }, _ctx.ptm('prompt')), vue.toDisplayString($props.prompt), 17),
+              vue.createElementVNode("span", vue.mergeProps({ class: "p-terminal-command" }, _ctx.ptm('command')), vue.toDisplayString(command.text), 17),
+              vue.createElementVNode("div", vue.mergeProps({
+                class: "p-terminal-response",
+                "aria-live": "polite"
+              }, _ctx.ptm('response')), vue.toDisplayString(command.response), 17)
+            ], 16))
           }), 128))
-        ]),
-        vue.createElementVNode("div", _hoisted_6, [
-          vue.createElementVNode("span", _hoisted_7, vue.toDisplayString($props.prompt), 1),
-          vue.withDirectives(vue.createElementVNode("input", {
+        ], 16),
+        vue.createElementVNode("div", vue.mergeProps({ class: "p-terminal-prompt-container" }, _ctx.ptm('container')), [
+          vue.createElementVNode("span", vue.mergeProps({ class: "p-terminal-prompt" }, _ctx.ptm('prompt')), vue.toDisplayString($props.prompt), 17),
+          vue.withDirectives(vue.createElementVNode("input", vue.mergeProps({
             ref: "input",
             "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => (($data.commandText) = $event)),
             type: "text",
             class: "p-terminal-input",
             autocomplete: "off",
             onKeydown: _cache[1] || (_cache[1] = (...args) => ($options.onKeydown && $options.onKeydown(...args)))
-          }, null, 544), [
+          }, _ctx.ptm('commandText')), null, 16), [
             [vue.vModelText, $data.commandText]
           ])
-        ])
-      ]))
+        ], 16)
+      ], 16))
     }
 
     function styleInject(css, ref) {
@@ -131,4 +125,4 @@ this.primevue.terminal = (function (TerminalService, vue) {
 
     return script;
 
-})(primevue.terminalservice, Vue);
+})(primevue.basecomponent, primevue.terminalservice, Vue);

package/terminal/terminal.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.terminal=function(e,t){"use strict";function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=n(e),i={name:"Terminal",props:{welcomeMessage:{type:String,default:null},prompt:{type:String,default:null}},data:()=>({commandText:null,commands:[]}),mounted(){o.default.on("response",this.responseListener),this.$refs.input.focus()},updated(){this.$el.scrollTop=this.$el.scrollHeight},beforeUnmount(){o.default.off("response",this.responseListener)},methods:{onClick(){this.$refs.input.focus()},onKeydown(e){"Enter"===e.code&&this.commandText&&(this.commands.push({text:this.commandText}),o.default.emit("command",this.commandText),this.commandText="")},responseListener(e){this.commands[this.commands.length-1].response=e}}};const r={key:0},l={class:"p-terminal-content"},s={class:"p-terminal-prompt"},a={class:"p-terminal-command"},m={class:"p-terminal-response","aria-live":"polite"},c={class:"p-terminal-prompt-container"},p={class:"p-terminal-prompt"};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],i=document.createElement("style");i.type="text/css","top"===n&&o.firstChild?o.insertBefore(i,o.firstChild):o.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}("\n.p-terminal {\n    height: 18rem;\n    overflow: auto;\n}\n.p-terminal-prompt-container {\n    display: flex;\n    align-items: center;\n}\n.p-terminal-input {\n    flex: 1 1 auto;\n    border: 0 none;\n    background-color: transparent;\n    color: inherit;\n    padding: 0;\n    outline: 0 none;\n}\n.p-terminal-input::-ms-clear {\n    display: none;\n}\n"),i.render=function(e,n,o,i,d,u){return t.openBlock(),t.createElementBlock("div",{class:"p-terminal p-component",onClick:n[2]||(n[2]=(...e)=>u.onClick&&u.onClick(...e))},[o.welcomeMessage?(t.openBlock(),t.createElementBlock("div",r,t.toDisplayString(o.welcomeMessage),1)):t.createCommentVNode("",!0),t.createElementVNode("div",l,[(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(d.commands,((e,n)=>(t.openBlock(),t.createElementBlock("div",{key:e.text+n.toString()},[t.createElementVNode("span",s,t.toDisplayString(o.prompt),1),t.createElementVNode("span",a,t.toDisplayString(e.text),1),t.createElementVNode("div",m,t.toDisplayString(e.response),1)])))),128))]),t.createElementVNode("div",c,[t.createElementVNode("span",p,t.toDisplayString(o.prompt),1),t.withDirectives(t.createElementVNode("input",{ref:"input","onUpdate:modelValue":n[0]||(n[0]=e=>d.commandText=e),type:"text",class:"p-terminal-input",autocomplete:"off",onKeydown:n[1]||(n[1]=(...e)=>u.onKeydown&&u.onKeydown(...e))},null,544),[[t.vModelText,d.commandText]])])])},i}(primevue.terminalservice,Vue);
+this.primevue=this.primevue||{},this.primevue.terminal=function(e,t,n){"use strict";function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=o(e),m=o(t),s={name:"Terminal",extends:r.default,props:{welcomeMessage:{type:String,default:null},prompt:{type:String,default:null}},data:()=>({commandText:null,commands:[]}),mounted(){m.default.on("response",this.responseListener),this.$refs.input.focus()},updated(){this.$el.scrollTop=this.$el.scrollHeight},beforeUnmount(){m.default.off("response",this.responseListener)},methods:{onClick(){this.$refs.input.focus()},onKeydown(e){"Enter"===e.code&&this.commandText&&(this.commands.push({text:this.commandText}),m.default.emit("command",this.commandText),this.commandText="")},responseListener(e){this.commands[this.commands.length-1].response=e}}};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],r=document.createElement("style");r.type="text/css","top"===n&&o.firstChild?o.insertBefore(r,o.firstChild):o.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}("\n.p-terminal {\n    height: 18rem;\n    overflow: auto;\n}\n.p-terminal-prompt-container {\n    display: flex;\n    align-items: center;\n}\n.p-terminal-input {\n    flex: 1 1 auto;\n    border: 0 none;\n    background-color: transparent;\n    color: inherit;\n    padding: 0;\n    outline: 0 none;\n}\n.p-terminal-input::-ms-clear {\n    display: none;\n}\n"),s.render=function(e,t,o,r,m,s){return n.openBlock(),n.createElementBlock("div",n.mergeProps({class:"p-terminal p-component",onClick:t[2]||(t[2]=(...e)=>s.onClick&&s.onClick(...e))},e.ptm("root")),[o.welcomeMessage?(n.openBlock(),n.createElementBlock("div",n.normalizeProps(n.mergeProps({key:0},e.ptm("welcomeMessage"))),n.toDisplayString(o.welcomeMessage),17)):n.createCommentVNode("",!0),n.createElementVNode("div",n.mergeProps({class:"p-terminal-content"},e.ptm("content")),[(n.openBlock(!0),n.createElementBlock(n.Fragment,null,n.renderList(m.commands,((t,r)=>(n.openBlock(),n.createElementBlock("div",n.mergeProps({key:t.text+r.toString()},e.ptm("commands")),[n.createElementVNode("span",n.mergeProps({class:"p-terminal-prompt"},e.ptm("prompt")),n.toDisplayString(o.prompt),17),n.createElementVNode("span",n.mergeProps({class:"p-terminal-command"},e.ptm("command")),n.toDisplayString(t.text),17),n.createElementVNode("div",n.mergeProps({class:"p-terminal-response","aria-live":"polite"},e.ptm("response")),n.toDisplayString(t.response),17)],16)))),128))],16),n.createElementVNode("div",n.mergeProps({class:"p-terminal-prompt-container"},e.ptm("container")),[n.createElementVNode("span",n.mergeProps({class:"p-terminal-prompt"},e.ptm("prompt")),n.toDisplayString(o.prompt),17),n.withDirectives(n.createElementVNode("input",n.mergeProps({ref:"input","onUpdate:modelValue":t[0]||(t[0]=e=>m.commandText=e),type:"text",class:"p-terminal-input",autocomplete:"off",onKeydown:t[1]||(t[1]=(...e)=>s.onKeydown&&s.onKeydown(...e))},e.ptm("commandText")),null,16),[[n.vModelText,m.commandText]])],16)],16)},s}(primevue.basecomponent,primevue.terminalservice,Vue);

package/tieredmenu/TieredMenu.d.ts

@@ -11,6 +11,131 @@ import { VNode } from 'vue';
 import { MenuItem } from '../menuitem';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type TieredMenuPassThroughOptionType = TieredMenuPassThroughAttributes | ((options: TieredMenuPassThroughMethodOptions) => TieredMenuPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface TieredMenuPassThroughMethodOptions {
+    props: TieredMenuProps;
+    state: TieredMenuState;
+    context: TieredMenuContext;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link TieredMenuProps.pt}
+ */
+export interface TieredMenuPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: TieredMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the list's DOM element.
+     */
+    menu?: TieredMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the list item's DOM element.
+     */
+    menuitem?: TieredMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: TieredMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the action's DOM element.
+     */
+    action?: TieredMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: TieredMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the label's DOM element.
+     */
+    label?: TieredMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the submenu icon's DOM element.
+     */
+    submenuIcon?: TieredMenuPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the separator's DOM element.
+     */
+    separator?: TieredMenuPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface TieredMenuPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines focused item info
+ */
+export interface TieredMenuFocusedItemInfo {
+    /**
+     * Active item index
+     */
+    index: number;
+    /**
+     * Active item level
+     */
+    level: number;
+    /**
+     * Parent key info
+     */
+    parentKey: string;
+}
+
+/**
+ * Defines current inline state in TieredMenu component.
+ */
+export interface TieredMenuState {
+    /**
+     * Current id state as a string.
+     */
+    id: string;
+    /**
+     * Current focus state as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+    /**
+     * Current focused item info.
+     * @type {TieredMenuFocusedItemInfo}
+     */
+    focusedItemInfo: TieredMenuFocusedItemInfo;
+    /**
+     * Active item path.
+     * @type {TieredMenuFocusedItemInfo}
+     */
+    activeItemPath: TieredMenuFocusedItemInfo[];
+    /**
+     * Current visible state as a boolean.
+     * @defaultValue true
+     */
+    visible: boolean;
+}
+
+/**
+ * Defines current options in TieredMenu component.
+ */
+export interface TieredMenuContext {
+    /**
+     * Current active state of menuitem as a boolean.
+     * @defaultValue false
+     */
+    active: boolean;
+    /**
+     * Current focused state of menuitem as a boolean.
+     * @defaultValue false
+     */
+    focused: boolean;
+}
+
 /**
  * Defines valid properties in TieredMenuMenu component.
  */
@@ -61,6 +186,11 @@ export interface TieredMenuProps {
      * Identifier of the underlying menu element.
      */
     'aria-labelledby'?: string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {TieredMenuPassThroughOptions}
+     */
+    pt?: TieredMenuPassThroughOptions;
 }
 
 /**

package/tieredmenu/TieredMenu.vue

@@ -1,7 +1,7 @@
 <template>
     <Portal :appendTo="appendTo" :disabled="!popup">
         <transition name="p-connected-overlay" @enter="onEnter" @after-enter="onAfterEnter" @leave="onLeave" @after-leave="onAfterLeave">
-            <div v-if="visible" :ref="containerRef" :id="id" :class="containerClass" @click="onOverlayClick" v-bind="$attrs">
+            <div v-if="visible" :ref="containerRef" :id="id" :class="containerClass" @click="onOverlayClick" v-bind="{ ...$attrs, ...ptm('root') }">
                 <TieredMenuSub
                     :ref="menubarRef"
                     :id="id + '_list'"
@@ -20,6 +20,7 @@
                     :activeItemPath="activeItemPath"
                     :exact="exact"
                     :level="0"
+                    :pt="pt"
                     @focus="onFocus"
                     @blur="onBlur"
                     @keydown="onKeyDown"
@@ -32,6 +33,7 @@
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
 import { ConnectedOverlayScrollHandler, DomHandler, ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
@@ -39,6 +41,7 @@ import TieredMenuSub from './TieredMenuSub.vue';
 
 export default {
     name: 'TieredMenu',
+    extends: BaseComponent,
     inheritAttrs: false,
     emits: ['focus', 'blur', 'before-show', 'before-hide', 'hide', 'show'],
     props: {