primevue 3.27.0 → 3.28.0

package/tabmenu/tabmenu.js

@@ -1,13 +1,15 @@
 this.primevue = this.primevue || {};
-this.primevue.tabmenu = (function (Ripple, utils, vue) {
+this.primevue.tabmenu = (function (BaseComponent, Ripple, utils, vue) {
     'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+    var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
     var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
 
     var script = {
         name: 'TabMenu',
+        extends: BaseComponent__default["default"],
         emits: ['update:activeIndex', 'tab-change'],
         props: {
             model: {
@@ -55,6 +57,13 @@ this.primevue.tabmenu = (function (Ripple, utils, vue) {
             clearTimeout(this.timeout);
         },
         methods: {
+            getPTOptions(key, index) {
+                return this.ptm(key, {
+                    context: {
+                        order: index
+                    }
+                });
+            },
             onItemClick(event, item, index, navigate) {
                 if (this.disabled(item)) {
                     event.preventDefault();
@@ -235,31 +244,23 @@ this.primevue.tabmenu = (function (Ripple, utils, vue) {
         }
     };
 
-    const _hoisted_1 = { class: "p-tabmenu p-component" };
-    const _hoisted_2 = ["aria-labelledby", "aria-label"];
-    const _hoisted_3 = ["href", "aria-label", "aria-disabled", "tabindex", "onClick", "onKeydown"];
-    const _hoisted_4 = { class: "p-menuitem-text" };
-    const _hoisted_5 = ["onClick", "onKeydown"];
-    const _hoisted_6 = ["href", "target", "aria-label", "aria-disabled", "tabindex"];
-    const _hoisted_7 = { class: "p-menuitem-text" };
-    const _hoisted_8 = {
-      ref: "inkbar",
-      role: "none",
-      class: "p-tabmenu-ink-bar"
-    };
+    const _hoisted_1 = ["aria-labelledby", "aria-label"];
+    const _hoisted_2 = ["href", "aria-label", "aria-disabled", "tabindex", "onClick", "onKeydown"];
+    const _hoisted_3 = ["onClick", "onKeydown"];
+    const _hoisted_4 = ["href", "target", "aria-label", "aria-disabled", "tabindex"];
 
     function render(_ctx, _cache, $props, $setup, $data, $options) {
       const _component_router_link = vue.resolveComponent("router-link");
       const _directive_ripple = vue.resolveDirective("ripple");
 
-      return (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
-        vue.createElementVNode("ul", {
+      return (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({ class: "p-tabmenu p-component" }, _ctx.ptm('root')), [
+        vue.createElementVNode("ul", vue.mergeProps({
           ref: "nav",
           class: "p-tabmenu-nav p-reset",
           role: "menubar",
           "aria-labelledby": _ctx.ariaLabelledby,
           "aria-label": _ctx.ariaLabel
-        }, [
+        }, _ctx.ptm('menu')), [
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.model, (item, i) => {
             return (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
               key: $options.label(item) + '_' + i.toString()
@@ -272,16 +273,16 @@ this.primevue.tabmenu = (function (Ripple, utils, vue) {
                   }, {
                     default: vue.withCtx(({ navigate, href, isActive, isExactActive }) => [
                       ($options.visible(item))
-                        ? (vue.openBlock(), vue.createElementBlock("li", {
+                        ? (vue.openBlock(), vue.createElementBlock("li", vue.mergeProps({
                             key: 0,
                             ref_for: true,
                             ref: "tab",
-                            class: vue.normalizeClass($options.getRouteItemClass(item, isActive, isExactActive)),
-                            style: vue.normalizeStyle(item.style),
+                            class: $options.getRouteItemClass(item, isActive, isExactActive),
+                            style: item.style,
                             role: "presentation"
-                          }, [
+                          }, $options.getPTOptions('menuitem', i)), [
                             (!_ctx.$slots.item)
-                              ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("a", {
+                              ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("a", vue.mergeProps({
                                   key: 0,
                                   ref_for: true,
                                   ref: "tabLink",
@@ -293,7 +294,7 @@ this.primevue.tabmenu = (function (Ripple, utils, vue) {
                                   tabindex: isExactActive ? '0' : '-1',
                                   onClick: $event => ($options.onItemClick($event, item, i, navigate)),
                                   onKeydown: $event => ($options.onKeydownItem($event, item, i, navigate))
-                                }, [
+                                }, $options.getPTOptions('action', i)), [
                                   (_ctx.$slots.itemicon)
                                     ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.$slots.itemicon), {
                                         key: 0,
@@ -301,13 +302,13 @@ this.primevue.tabmenu = (function (Ripple, utils, vue) {
                                         class: vue.normalizeClass($options.getItemIcon(item))
                                       }, null, 8, ["item", "class"]))
                                     : (item.icon)
-                                      ? (vue.openBlock(), vue.createElementBlock("span", {
+                                      ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
                                           key: 1,
-                                          class: vue.normalizeClass($options.getItemIcon(item))
-                                        }, null, 2))
+                                          class: $options.getItemIcon(item)
+                                        }, $options.getPTOptions('icon', i)), null, 16))
                                       : vue.createCommentVNode("", true),
-                                  vue.createElementVNode("span", _hoisted_4, vue.toDisplayString($options.label(item)), 1)
-                                ], 40, _hoisted_3)), [
+                                  vue.createElementVNode("span", vue.mergeProps({ class: "p-menuitem-text" }, $options.getPTOptions('label', i)), vue.toDisplayString($options.label(item)), 17)
+                                ], 16, _hoisted_2)), [
                                   [_directive_ripple]
                                 ])
                               : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.$slots.item), {
@@ -315,23 +316,23 @@ this.primevue.tabmenu = (function (Ripple, utils, vue) {
                                   item: item,
                                   index: i
                                 }, null, 8, ["item", "index"]))
-                          ], 6))
+                          ], 16))
                         : vue.createCommentVNode("", true)
                     ]),
                     _: 2
                   }, 1032, ["to"]))
                 : ($options.visible(item))
-                  ? (vue.openBlock(), vue.createElementBlock("li", {
+                  ? (vue.openBlock(), vue.createElementBlock("li", vue.mergeProps({
                       key: 1,
                       ref_for: true,
                       ref: "tab",
-                      class: vue.normalizeClass($options.getItemClass(item, i)),
+                      class: $options.getItemClass(item, i),
                       role: "presentation",
                       onClick: $event => ($options.onItemClick($event, item, i)),
                       onKeydown: $event => ($options.onKeydownItem($event, item, i))
-                    }, [
+                    }, $options.getPTOptions('menuitem', i)), [
                       (!_ctx.$slots.item)
-                        ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("a", {
+                        ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("a", vue.mergeProps({
                             key: 0,
                             ref_for: true,
                             ref: "tabLink",
@@ -342,7 +343,7 @@ this.primevue.tabmenu = (function (Ripple, utils, vue) {
                             "aria-label": $options.label(item),
                             "aria-disabled": $options.disabled(item),
                             tabindex: $options.setTabIndex(i)
-                          }, [
+                          }, $options.getPTOptions('action', i)), [
                             (_ctx.$slots.itemicon)
                               ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.$slots.itemicon), {
                                   key: 0,
@@ -350,13 +351,13 @@ this.primevue.tabmenu = (function (Ripple, utils, vue) {
                                   class: vue.normalizeClass($options.getItemIcon(item))
                                 }, null, 8, ["item", "class"]))
                               : (item.icon)
-                                ? (vue.openBlock(), vue.createElementBlock("span", {
+                                ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
                                     key: 1,
-                                    class: vue.normalizeClass($options.getItemIcon(item))
-                                  }, null, 2))
+                                    class: $options.getItemIcon(item)
+                                  }, $options.getPTOptions('icon', i)), null, 16))
                                 : vue.createCommentVNode("", true),
-                            vue.createElementVNode("span", _hoisted_7, vue.toDisplayString($options.label(item)), 1)
-                          ], 8, _hoisted_6)), [
+                            vue.createElementVNode("span", vue.mergeProps({ class: "p-menuitem-text" }, $options.getPTOptions('label', i)), vue.toDisplayString($options.label(item)), 17)
+                          ], 16, _hoisted_4)), [
                             [_directive_ripple]
                           ])
                         : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.$slots.item), {
@@ -364,13 +365,17 @@ this.primevue.tabmenu = (function (Ripple, utils, vue) {
                             item: item,
                             index: i
                           }, null, 8, ["item", "index"]))
-                    ], 42, _hoisted_5))
+                    ], 16, _hoisted_3))
                   : vue.createCommentVNode("", true)
             ], 64))
           }), 128)),
-          vue.createElementVNode("li", _hoisted_8, null, 512)
-        ], 8, _hoisted_2)
-      ]))
+          vue.createElementVNode("li", vue.mergeProps({
+            ref: "inkbar",
+            role: "none",
+            class: "p-tabmenu-ink-bar"
+          }, _ctx.ptm('inkbar')), null, 16)
+        ], 16, _hoisted_1)
+      ], 16))
     }
 
     function styleInject(css, ref) {
@@ -407,4 +412,4 @@ this.primevue.tabmenu = (function (Ripple, utils, vue) {
 
     return script;
 
-})(primevue.ripple, primevue.utils, Vue);
+})(primevue.basecomponent, primevue.ripple, primevue.utils, Vue);

package/tabmenu/tabmenu.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.tabmenu=function(e,t,n){"use strict";function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l={name:"TabMenu",emits:["update:activeIndex","tab-change"],props:{model:{type:Array,default:null},exact:{type:Boolean,default:!0},activeIndex:{type:Number,default:0},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},timeout:null,data(){return{d_activeIndex:this.activeIndex}},watch:{$route(){this.timeout=setTimeout((()=>this.updateInkBar()),50)},activeIndex(e){this.d_activeIndex=e}},mounted(){this.updateInkBar()},updated(){this.updateInkBar()},beforeUnmount(){clearTimeout(this.timeout)},methods:{onItemClick(e,t,n,a){this.disabled(t)?e.preventDefault():(t.command&&t.command({originalEvent:e,item:t}),t.to&&a&&a(e),n!==this.d_activeIndex&&(this.d_activeIndex=n,this.$emit("update:activeIndex",this.d_activeIndex)),this.$emit("tab-change",{originalEvent:e,index:n}))},onKeydownItem(e,t,n){let a=n,l={};const i=this.$refs.tabLink;switch(e.code){case"ArrowRight":l=this.findNextItem(this.$refs.tab,a),a=l.i;break;case"ArrowLeft":l=this.findPrevItem(this.$refs.tab,a),a=l.i;break;case"End":l=this.findPrevItem(this.$refs.tab,this.model.length),a=l.i,e.preventDefault();break;case"Home":l=this.findNextItem(this.$refs.tab,-1),a=l.i,e.preventDefault();break;case"Space":case"Enter":e.currentTarget&&e.currentTarget.click(),e.preventDefault();break;case"Tab":this.setDefaultTabIndexes(i)}i[a]&&i[n]&&(i[n].tabIndex="-1",i[a].tabIndex="0",i[a].focus())},findNextItem(e,n){let a=n+1;if(a>=e.length)return{nextItem:e[e.length],i:e.length};let l=e[a];return l?t.DomHandler.hasClass(l,"p-disabled")?this.findNextItem(e,a):{nextItem:l,i:a}:null},findPrevItem(e,n){let a=n-1;if(a<0)return{nextItem:e[0],i:0};let l=e[a];return l?t.DomHandler.hasClass(l,"p-disabled")?this.findPrevItem(e,a):{prevItem:l,i:a}:null},getItemClass(e,t){return["p-tabmenuitem",e.class,{"p-highlight":this.d_activeIndex===t,"p-disabled":this.disabled(e)}]},getRouteItemClass(e,t,n){return["p-tabmenuitem",e.class,{"p-highlight":this.exact?n:t,"p-disabled":this.disabled(e)}]},getItemIcon:e=>["p-menuitem-icon",e.icon],visible:e=>"function"==typeof e.visible?e.visible():!1!==e.visible,disabled:e=>"function"==typeof e.disabled?e.disabled():e.disabled,label:e=>"function"==typeof e.label?e.label():e.label,setDefaultTabIndexes(e){setTimeout((()=>{e.forEach((e=>{e.tabIndex=t.DomHandler.hasClass(e.parentElement,"p-highlight")?"0":"-1"}))}),300)},setTabIndex(e){return this.d_activeIndex===e?"0":"-1"},updateInkBar(){let e=this.$refs.nav.children,n=!1;for(let a=0;a<e.length;a++){let l=e[a];t.DomHandler.hasClass(l,"p-highlight")&&(this.$refs.inkbar.style.width=t.DomHandler.getWidth(l)+"px",this.$refs.inkbar.style.left=t.DomHandler.getOffset(l).left-t.DomHandler.getOffset(this.$refs.nav).left+"px",n=!0)}n||(this.$refs.inkbar.style.width="0px",this.$refs.inkbar.style.left="0px")}},directives:{ripple:a(e).default}};const i={class:"p-tabmenu p-component"},s=["aria-labelledby","aria-label"],o=["href","aria-label","aria-disabled","tabindex","onClick","onKeydown"],r={class:"p-menuitem-text"},d=["onClick","onKeydown"],c=["href","target","aria-label","aria-disabled","tabindex"],m={class:"p-menuitem-text"},u={ref:"inkbar",role:"none",class:"p-tabmenu-ink-bar"};return function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===n&&a.firstChild?a.insertBefore(l,a.firstChild):a.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}("\n.p-tabmenu {\n    overflow-x: auto;\n}\n.p-tabmenu-nav {\n    display: flex;\n    margin: 0;\n    padding: 0;\n    list-style-type: none;\n    flex-wrap: nowrap;\n}\n.p-tabmenu-nav a {\n    cursor: pointer;\n    user-select: none;\n    display: flex;\n    align-items: center;\n    position: relative;\n    text-decoration: none;\n    text-decoration: none;\n    overflow: hidden;\n}\n.p-tabmenu-nav a:focus {\n    z-index: 1;\n}\n.p-tabmenu-nav .p-menuitem-text {\n    line-height: 1;\n}\n.p-tabmenu-ink-bar {\n    display: none;\n    z-index: 1;\n}\n.p-tabmenu::-webkit-scrollbar {\n    display: none;\n}\n"),l.render=function(e,t,a,l,p,b){const f=n.resolveComponent("router-link"),h=n.resolveDirective("ripple");return n.openBlock(),n.createElementBlock("div",i,[n.createElementVNode("ul",{ref:"nav",class:"p-tabmenu-nav p-reset",role:"menubar","aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel},[(n.openBlock(!0),n.createElementBlock(n.Fragment,null,n.renderList(a.model,((t,a)=>(n.openBlock(),n.createElementBlock(n.Fragment,{key:b.label(t)+"_"+a.toString()},[t.to&&!b.disabled(t)?(n.openBlock(),n.createBlock(f,{key:0,to:t.to,custom:""},{default:n.withCtx((({navigate:l,href:i,isActive:s,isExactActive:d})=>[b.visible(t)?(n.openBlock(),n.createElementBlock("li",{key:0,ref_for:!0,ref:"tab",class:n.normalizeClass(b.getRouteItemClass(t,s,d)),style:n.normalizeStyle(t.style),role:"presentation"},[e.$slots.item?(n.openBlock(),n.createBlock(n.resolveDynamicComponent(e.$slots.item),{key:1,item:t,index:a},null,8,["item","index"])):n.withDirectives((n.openBlock(),n.createElementBlock("a",{key:0,ref_for:!0,ref:"tabLink",role:"menuitem",href:i,class:"p-menuitem-link","aria-label":b.label(t),"aria-disabled":b.disabled(t),tabindex:d?"0":"-1",onClick:e=>b.onItemClick(e,t,a,l),onKeydown:e=>b.onKeydownItem(e,t,a,l)},[e.$slots.itemicon?(n.openBlock(),n.createBlock(n.resolveDynamicComponent(e.$slots.itemicon),{key:0,item:t,class:n.normalizeClass(b.getItemIcon(t))},null,8,["item","class"])):t.icon?(n.openBlock(),n.createElementBlock("span",{key:1,class:n.normalizeClass(b.getItemIcon(t))},null,2)):n.createCommentVNode("",!0),n.createElementVNode("span",r,n.toDisplayString(b.label(t)),1)],40,o)),[[h]])],6)):n.createCommentVNode("",!0)])),_:2},1032,["to"])):b.visible(t)?(n.openBlock(),n.createElementBlock("li",{key:1,ref_for:!0,ref:"tab",class:n.normalizeClass(b.getItemClass(t,a)),role:"presentation",onClick:e=>b.onItemClick(e,t,a),onKeydown:e=>b.onKeydownItem(e,t,a)},[e.$slots.item?(n.openBlock(),n.createBlock(n.resolveDynamicComponent(e.$slots.item),{key:1,item:t,index:a},null,8,["item","index"])):n.withDirectives((n.openBlock(),n.createElementBlock("a",{key:0,ref_for:!0,ref:"tabLink",role:"menuitem",href:t.url,class:"p-menuitem-link",target:t.target,"aria-label":b.label(t),"aria-disabled":b.disabled(t),tabindex:b.setTabIndex(a)},[e.$slots.itemicon?(n.openBlock(),n.createBlock(n.resolveDynamicComponent(e.$slots.itemicon),{key:0,item:t,class:n.normalizeClass(b.getItemIcon(t))},null,8,["item","class"])):t.icon?(n.openBlock(),n.createElementBlock("span",{key:1,class:n.normalizeClass(b.getItemIcon(t))},null,2)):n.createCommentVNode("",!0),n.createElementVNode("span",m,n.toDisplayString(b.label(t)),1)],8,c)),[[h]])],42,d)):n.createCommentVNode("",!0)],64)))),128)),n.createElementVNode("li",u,null,512)],8,s)])},l}(primevue.ripple,primevue.utils,Vue);
+this.primevue=this.primevue||{},this.primevue.tabmenu=function(e,t,n,a){"use strict";function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=i(e),o=i(t),s={name:"TabMenu",extends:l.default,emits:["update:activeIndex","tab-change"],props:{model:{type:Array,default:null},exact:{type:Boolean,default:!0},activeIndex:{type:Number,default:0},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},timeout:null,data(){return{d_activeIndex:this.activeIndex}},watch:{$route(){this.timeout=setTimeout((()=>this.updateInkBar()),50)},activeIndex(e){this.d_activeIndex=e}},mounted(){this.updateInkBar()},updated(){this.updateInkBar()},beforeUnmount(){clearTimeout(this.timeout)},methods:{getPTOptions(e,t){return this.ptm(e,{context:{order:t}})},onItemClick(e,t,n,a){this.disabled(t)?e.preventDefault():(t.command&&t.command({originalEvent:e,item:t}),t.to&&a&&a(e),n!==this.d_activeIndex&&(this.d_activeIndex=n,this.$emit("update:activeIndex",this.d_activeIndex)),this.$emit("tab-change",{originalEvent:e,index:n}))},onKeydownItem(e,t,n){let a=n,i={};const l=this.$refs.tabLink;switch(e.code){case"ArrowRight":i=this.findNextItem(this.$refs.tab,a),a=i.i;break;case"ArrowLeft":i=this.findPrevItem(this.$refs.tab,a),a=i.i;break;case"End":i=this.findPrevItem(this.$refs.tab,this.model.length),a=i.i,e.preventDefault();break;case"Home":i=this.findNextItem(this.$refs.tab,-1),a=i.i,e.preventDefault();break;case"Space":case"Enter":e.currentTarget&&e.currentTarget.click(),e.preventDefault();break;case"Tab":this.setDefaultTabIndexes(l)}l[a]&&l[n]&&(l[n].tabIndex="-1",l[a].tabIndex="0",l[a].focus())},findNextItem(e,t){let a=t+1;if(a>=e.length)return{nextItem:e[e.length],i:e.length};let i=e[a];return i?n.DomHandler.hasClass(i,"p-disabled")?this.findNextItem(e,a):{nextItem:i,i:a}:null},findPrevItem(e,t){let a=t-1;if(a<0)return{nextItem:e[0],i:0};let i=e[a];return i?n.DomHandler.hasClass(i,"p-disabled")?this.findPrevItem(e,a):{prevItem:i,i:a}:null},getItemClass(e,t){return["p-tabmenuitem",e.class,{"p-highlight":this.d_activeIndex===t,"p-disabled":this.disabled(e)}]},getRouteItemClass(e,t,n){return["p-tabmenuitem",e.class,{"p-highlight":this.exact?n:t,"p-disabled":this.disabled(e)}]},getItemIcon:e=>["p-menuitem-icon",e.icon],visible:e=>"function"==typeof e.visible?e.visible():!1!==e.visible,disabled:e=>"function"==typeof e.disabled?e.disabled():e.disabled,label:e=>"function"==typeof e.label?e.label():e.label,setDefaultTabIndexes(e){setTimeout((()=>{e.forEach((e=>{e.tabIndex=n.DomHandler.hasClass(e.parentElement,"p-highlight")?"0":"-1"}))}),300)},setTabIndex(e){return this.d_activeIndex===e?"0":"-1"},updateInkBar(){let e=this.$refs.nav.children,t=!1;for(let a=0;a<e.length;a++){let i=e[a];n.DomHandler.hasClass(i,"p-highlight")&&(this.$refs.inkbar.style.width=n.DomHandler.getWidth(i)+"px",this.$refs.inkbar.style.left=n.DomHandler.getOffset(i).left-n.DomHandler.getOffset(this.$refs.nav).left+"px",t=!0)}t||(this.$refs.inkbar.style.width="0px",this.$refs.inkbar.style.left="0px")}},directives:{ripple:o.default}};const r=["aria-labelledby","aria-label"],m=["href","aria-label","aria-disabled","tabindex","onClick","onKeydown"],d=["onClick","onKeydown"],c=["href","target","aria-label","aria-disabled","tabindex"];return function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===n&&a.firstChild?a.insertBefore(i,a.firstChild):a.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}("\n.p-tabmenu {\n    overflow-x: auto;\n}\n.p-tabmenu-nav {\n    display: flex;\n    margin: 0;\n    padding: 0;\n    list-style-type: none;\n    flex-wrap: nowrap;\n}\n.p-tabmenu-nav a {\n    cursor: pointer;\n    user-select: none;\n    display: flex;\n    align-items: center;\n    position: relative;\n    text-decoration: none;\n    text-decoration: none;\n    overflow: hidden;\n}\n.p-tabmenu-nav a:focus {\n    z-index: 1;\n}\n.p-tabmenu-nav .p-menuitem-text {\n    line-height: 1;\n}\n.p-tabmenu-ink-bar {\n    display: none;\n    z-index: 1;\n}\n.p-tabmenu::-webkit-scrollbar {\n    display: none;\n}\n"),s.render=function(e,t,n,i,l,o){const s=a.resolveComponent("router-link"),p=a.resolveDirective("ripple");return a.openBlock(),a.createElementBlock("div",a.mergeProps({class:"p-tabmenu p-component"},e.ptm("root")),[a.createElementVNode("ul",a.mergeProps({ref:"nav",class:"p-tabmenu-nav p-reset",role:"menubar","aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel},e.ptm("menu")),[(a.openBlock(!0),a.createElementBlock(a.Fragment,null,a.renderList(n.model,((t,n)=>(a.openBlock(),a.createElementBlock(a.Fragment,{key:o.label(t)+"_"+n.toString()},[t.to&&!o.disabled(t)?(a.openBlock(),a.createBlock(s,{key:0,to:t.to,custom:""},{default:a.withCtx((({navigate:i,href:l,isActive:s,isExactActive:r})=>[o.visible(t)?(a.openBlock(),a.createElementBlock("li",a.mergeProps({key:0,ref_for:!0,ref:"tab",class:o.getRouteItemClass(t,s,r),style:t.style,role:"presentation"},o.getPTOptions("menuitem",n)),[e.$slots.item?(a.openBlock(),a.createBlock(a.resolveDynamicComponent(e.$slots.item),{key:1,item:t,index:n},null,8,["item","index"])):a.withDirectives((a.openBlock(),a.createElementBlock("a",a.mergeProps({key:0,ref_for:!0,ref:"tabLink",role:"menuitem",href:l,class:"p-menuitem-link","aria-label":o.label(t),"aria-disabled":o.disabled(t),tabindex:r?"0":"-1",onClick:e=>o.onItemClick(e,t,n,i),onKeydown:e=>o.onKeydownItem(e,t,n,i)},o.getPTOptions("action",n)),[e.$slots.itemicon?(a.openBlock(),a.createBlock(a.resolveDynamicComponent(e.$slots.itemicon),{key:0,item:t,class:a.normalizeClass(o.getItemIcon(t))},null,8,["item","class"])):t.icon?(a.openBlock(),a.createElementBlock("span",a.mergeProps({key:1,class:o.getItemIcon(t)},o.getPTOptions("icon",n)),null,16)):a.createCommentVNode("",!0),a.createElementVNode("span",a.mergeProps({class:"p-menuitem-text"},o.getPTOptions("label",n)),a.toDisplayString(o.label(t)),17)],16,m)),[[p]])],16)):a.createCommentVNode("",!0)])),_:2},1032,["to"])):o.visible(t)?(a.openBlock(),a.createElementBlock("li",a.mergeProps({key:1,ref_for:!0,ref:"tab",class:o.getItemClass(t,n),role:"presentation",onClick:e=>o.onItemClick(e,t,n),onKeydown:e=>o.onKeydownItem(e,t,n)},o.getPTOptions("menuitem",n)),[e.$slots.item?(a.openBlock(),a.createBlock(a.resolveDynamicComponent(e.$slots.item),{key:1,item:t,index:n},null,8,["item","index"])):a.withDirectives((a.openBlock(),a.createElementBlock("a",a.mergeProps({key:0,ref_for:!0,ref:"tabLink",role:"menuitem",href:t.url,class:"p-menuitem-link",target:t.target,"aria-label":o.label(t),"aria-disabled":o.disabled(t),tabindex:o.setTabIndex(n)},o.getPTOptions("action",n)),[e.$slots.itemicon?(a.openBlock(),a.createBlock(a.resolveDynamicComponent(e.$slots.itemicon),{key:0,item:t,class:a.normalizeClass(o.getItemIcon(t))},null,8,["item","class"])):t.icon?(a.openBlock(),a.createElementBlock("span",a.mergeProps({key:1,class:o.getItemIcon(t)},o.getPTOptions("icon",n)),null,16)):a.createCommentVNode("",!0),a.createElementVNode("span",a.mergeProps({class:"p-menuitem-text"},o.getPTOptions("label",n)),a.toDisplayString(o.label(t)),17)],16,c)),[[p]])],16,d)):a.createCommentVNode("",!0)],64)))),128)),a.createElementVNode("li",a.mergeProps({ref:"inkbar",role:"none",class:"p-tabmenu-ink-bar"},e.ptm("inkbar")),null,16)],16,r)],16)},s}(primevue.basecomponent,primevue.ripple,primevue.utils,Vue);

package/tag/Tag.d.ts

@@ -10,6 +10,41 @@
 import { VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type TagPassThroughOptionType = TagPassThroughAttributes | ((options: TagPassThroughMethodOptions) => TagPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface TagPassThroughMethodOptions {
+    props: TagProps;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link TagProps.pt}
+ */
+export interface TagPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: TagPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: TagPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the value's DOM element.
+     */
+    value?: TagPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface TagPassThroughAttributes {
+    [key: string]: any;
+}
+
 /**
  * Defines valid properties in Tag component.
  */
@@ -32,6 +67,11 @@ export interface TagProps {
      * @deprecated since v3.27.0. Use 'icon' slot.
      */
     icon?: string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {TagPassThroughOptions}
+     */
+    pt?: TagPassThroughOptions;
 }
 
 /**

package/tag/Tag.vue

@@ -1,16 +1,19 @@
 <template>
-    <span :class="containerClass">
-        <component v-if="$slots.icon" :is="$slots.icon" class="p-tag-icon" />
-        <span v-else-if="icon" :class="iconClass"></span>
+    <span :class="containerClass" v-bind="ptm('root')">
+        <component v-if="$slots.icon" :is="$slots.icon" class="p-tag-icon" v-bind="ptm('icon')" />
+        <span v-else-if="icon" :class="iconClass" v-bind="ptm('icon')"></span>
         <slot>
-            <span class="p-tag-value">{{ value }}</span>
+            <span class="p-tag-value" v-bind="ptm('value')">{{ value }}</span>
         </slot>
     </span>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
+
 export default {
     name: 'Tag',
+    extends: BaseComponent,
     props: {
         value: null,
         severity: null,

package/tag/tag.cjs.js

@@ -1,9 +1,15 @@
 'use strict';
 
+var BaseComponent = require('primevue/basecomponent');
 var vue = require('vue');
 
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
+
 var script = {
     name: 'Tag',
+    extends: BaseComponent__default["default"],
     props: {
         value: null,
         severity: null,
@@ -29,27 +35,23 @@ var script = {
     }
 };
 
-const _hoisted_1 = { class: "p-tag-value" };
-
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (vue.openBlock(), vue.createElementBlock("span", {
-    class: vue.normalizeClass($options.containerClass)
-  }, [
+  return (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({ class: $options.containerClass }, _ctx.ptm('root')), [
     (_ctx.$slots.icon)
-      ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.$slots.icon), {
+      ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.$slots.icon), vue.mergeProps({
           key: 0,
           class: "p-tag-icon"
-        }))
+        }, _ctx.ptm('icon')), null, 16))
       : ($props.icon)
-        ? (vue.openBlock(), vue.createElementBlock("span", {
+        ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
             key: 1,
-            class: vue.normalizeClass($options.iconClass)
-          }, null, 2))
+            class: $options.iconClass
+          }, _ctx.ptm('icon')), null, 16))
         : vue.createCommentVNode("", true),
     vue.renderSlot(_ctx.$slots, "default", {}, () => [
-      vue.createElementVNode("span", _hoisted_1, vue.toDisplayString($props.value), 1)
+      vue.createElementVNode("span", vue.mergeProps({ class: "p-tag-value" }, _ctx.ptm('value')), vue.toDisplayString($props.value), 17)
     ])
-  ], 2))
+  ], 16))
 }
 
 function styleInject(css, ref) {

package/tag/tag.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("vue"),n={name:"Tag",props:{value:null,severity:null,rounded:Boolean,icon:String},computed:{containerClass(){return["p-tag p-component",{"p-tag-info":"info"===this.severity,"p-tag-success":"success"===this.severity,"p-tag-warning":"warning"===this.severity,"p-tag-danger":"danger"===this.severity,"p-tag-rounded":this.rounded}]},iconClass(){return["p-tag-icon",this.icon]}}};const t={class:"p-tag-value"};!function(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var s=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===t&&s.firstChild?s.insertBefore(a,s.firstChild):s.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}("\n.p-tag {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n}\n.p-tag-icon,\n.p-tag-value,\n.p-tag-icon.pi {\n    line-height: 1.5;\n}\n.p-tag.p-tag-rounded {\n    border-radius: 10rem;\n}\n"),n.render=function(n,s,a,o,i,r){return e.openBlock(),e.createElementBlock("span",{class:e.normalizeClass(r.containerClass)},[n.$slots.icon?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(n.$slots.icon),{key:0,class:"p-tag-icon"})):a.icon?(e.openBlock(),e.createElementBlock("span",{key:1,class:e.normalizeClass(r.iconClass)},null,2)):e.createCommentVNode("",!0),e.renderSlot(n.$slots,"default",{},(()=>[e.createElementVNode("span",t,e.toDisplayString(a.value),1)]))],2)},module.exports=n;
+"use strict";var e=require("primevue/basecomponent"),t=require("vue");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o={name:"Tag",extends:n(e).default,props:{value:null,severity:null,rounded:Boolean,icon:String},computed:{containerClass(){return["p-tag p-component",{"p-tag-info":"info"===this.severity,"p-tag-success":"success"===this.severity,"p-tag-warning":"warning"===this.severity,"p-tag-danger":"danger"===this.severity,"p-tag-rounded":this.rounded}]},iconClass(){return["p-tag-icon",this.icon]}}};!function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],s=document.createElement("style");s.type="text/css","top"===n&&o.firstChild?o.insertBefore(s,o.firstChild):o.appendChild(s),s.styleSheet?s.styleSheet.cssText=e:s.appendChild(document.createTextNode(e))}}("\n.p-tag {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n}\n.p-tag-icon,\n.p-tag-value,\n.p-tag-icon.pi {\n    line-height: 1.5;\n}\n.p-tag.p-tag-rounded {\n    border-radius: 10rem;\n}\n"),o.render=function(e,n,o,s,r,a){return t.openBlock(),t.createElementBlock("span",t.mergeProps({class:a.containerClass},e.ptm("root")),[e.$slots.icon?(t.openBlock(),t.createBlock(t.resolveDynamicComponent(e.$slots.icon),t.mergeProps({key:0,class:"p-tag-icon"},e.ptm("icon")),null,16)):o.icon?(t.openBlock(),t.createElementBlock("span",t.mergeProps({key:1,class:a.iconClass},e.ptm("icon")),null,16)):t.createCommentVNode("",!0),t.renderSlot(e.$slots,"default",{},(()=>[t.createElementVNode("span",t.mergeProps({class:"p-tag-value"},e.ptm("value")),t.toDisplayString(o.value),17)]))],16)},module.exports=o;

package/tag/tag.esm.js

@@ -1,7 +1,9 @@
-import { openBlock, createElementBlock, normalizeClass, createBlock, resolveDynamicComponent, createCommentVNode, renderSlot, createElementVNode, toDisplayString } from 'vue';
+import BaseComponent from 'primevue/basecomponent';
+import { openBlock, createElementBlock, mergeProps, createBlock, resolveDynamicComponent, createCommentVNode, renderSlot, createElementVNode, toDisplayString } from 'vue';
 
 var script = {
     name: 'Tag',
+    extends: BaseComponent,
     props: {
         value: null,
         severity: null,
@@ -27,27 +29,23 @@ var script = {
     }
 };
 
-const _hoisted_1 = { class: "p-tag-value" };
-
 function render(_ctx, _cache, $props, $setup, $data, $options) {
-  return (openBlock(), createElementBlock("span", {
-    class: normalizeClass($options.containerClass)
-  }, [
+  return (openBlock(), createElementBlock("span", mergeProps({ class: $options.containerClass }, _ctx.ptm('root')), [
     (_ctx.$slots.icon)
-      ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.$slots.icon), {
+      ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.$slots.icon), mergeProps({
           key: 0,
           class: "p-tag-icon"
-        }))
+        }, _ctx.ptm('icon')), null, 16))
       : ($props.icon)
-        ? (openBlock(), createElementBlock("span", {
+        ? (openBlock(), createElementBlock("span", mergeProps({
             key: 1,
-            class: normalizeClass($options.iconClass)
-          }, null, 2))
+            class: $options.iconClass
+          }, _ctx.ptm('icon')), null, 16))
         : createCommentVNode("", true),
     renderSlot(_ctx.$slots, "default", {}, () => [
-      createElementVNode("span", _hoisted_1, toDisplayString($props.value), 1)
+      createElementVNode("span", mergeProps({ class: "p-tag-value" }, _ctx.ptm('value')), toDisplayString($props.value), 17)
     ])
-  ], 2))
+  ], 16))
 }
 
 function styleInject(css, ref) {

package/tag/tag.esm.min.js

@@ -1 +1 @@
-import{openBlock as e,createElementBlock as n,normalizeClass as t,createBlock as s,resolveDynamicComponent as a,createCommentVNode as i,renderSlot as o,createElementVNode as r,toDisplayString as c}from"vue";var l={name:"Tag",props:{value:null,severity:null,rounded:Boolean,icon:String},computed:{containerClass(){return["p-tag p-component",{"p-tag-info":"info"===this.severity,"p-tag-success":"success"===this.severity,"p-tag-warning":"warning"===this.severity,"p-tag-danger":"danger"===this.severity,"p-tag-rounded":this.rounded}]},iconClass(){return["p-tag-icon",this.icon]}}};const d={class:"p-tag-value"};!function(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var s=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===t&&s.firstChild?s.insertBefore(a,s.firstChild):s.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}("\n.p-tag {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n}\n.p-tag-icon,\n.p-tag-value,\n.p-tag-icon.pi {\n    line-height: 1.5;\n}\n.p-tag.p-tag-rounded {\n    border-radius: 10rem;\n}\n"),l.render=function(l,p,u,g,h,f){return e(),n("span",{class:t(f.containerClass)},[l.$slots.icon?(e(),s(a(l.$slots.icon),{key:0,class:"p-tag-icon"})):u.icon?(e(),n("span",{key:1,class:t(f.iconClass)},null,2)):i("",!0),o(l.$slots,"default",{},(()=>[r("span",d,c(u.value),1)]))],2)};export{l as default};
+import e from"primevue/basecomponent";import{openBlock as n,createElementBlock as t,mergeProps as s,createBlock as a,resolveDynamicComponent as i,createCommentVNode as o,renderSlot as r,createElementVNode as l,toDisplayString as p}from"vue";var c={name:"Tag",extends:e,props:{value:null,severity:null,rounded:Boolean,icon:String},computed:{containerClass(){return["p-tag p-component",{"p-tag-info":"info"===this.severity,"p-tag-success":"success"===this.severity,"p-tag-warning":"warning"===this.severity,"p-tag-danger":"danger"===this.severity,"p-tag-rounded":this.rounded}]},iconClass(){return["p-tag-icon",this.icon]}}};!function(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var s=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===t&&s.firstChild?s.insertBefore(a,s.firstChild):s.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}("\n.p-tag {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n}\n.p-tag-icon,\n.p-tag-value,\n.p-tag-icon.pi {\n    line-height: 1.5;\n}\n.p-tag.p-tag-rounded {\n    border-radius: 10rem;\n}\n"),c.render=function(e,c,d,u,g,m){return n(),t("span",s({class:m.containerClass},e.ptm("root")),[e.$slots.icon?(n(),a(i(e.$slots.icon),s({key:0,class:"p-tag-icon"},e.ptm("icon")),null,16)):d.icon?(n(),t("span",s({key:1,class:m.iconClass},e.ptm("icon")),null,16)):o("",!0),r(e.$slots,"default",{},(()=>[l("span",s({class:"p-tag-value"},e.ptm("value")),p(d.value),17)]))],16)};export{c as default};

package/tag/tag.js

@@ -1,9 +1,14 @@
 this.primevue = this.primevue || {};
-this.primevue.tag = (function (vue) {
+this.primevue.tag = (function (BaseComponent, vue) {
     'use strict';
 
+    function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+    var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
+
     var script = {
         name: 'Tag',
+        extends: BaseComponent__default["default"],
         props: {
             value: null,
             severity: null,
@@ -29,27 +34,23 @@ this.primevue.tag = (function (vue) {
         }
     };
 
-    const _hoisted_1 = { class: "p-tag-value" };
-
     function render(_ctx, _cache, $props, $setup, $data, $options) {
-      return (vue.openBlock(), vue.createElementBlock("span", {
-        class: vue.normalizeClass($options.containerClass)
-      }, [
+      return (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({ class: $options.containerClass }, _ctx.ptm('root')), [
         (_ctx.$slots.icon)
-          ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.$slots.icon), {
+          ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.$slots.icon), vue.mergeProps({
               key: 0,
               class: "p-tag-icon"
-            }))
+            }, _ctx.ptm('icon')), null, 16))
           : ($props.icon)
-            ? (vue.openBlock(), vue.createElementBlock("span", {
+            ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
                 key: 1,
-                class: vue.normalizeClass($options.iconClass)
-              }, null, 2))
+                class: $options.iconClass
+              }, _ctx.ptm('icon')), null, 16))
             : vue.createCommentVNode("", true),
         vue.renderSlot(_ctx.$slots, "default", {}, () => [
-          vue.createElementVNode("span", _hoisted_1, vue.toDisplayString($props.value), 1)
+          vue.createElementVNode("span", vue.mergeProps({ class: "p-tag-value" }, _ctx.ptm('value')), vue.toDisplayString($props.value), 17)
         ])
-      ], 2))
+      ], 16))
     }
 
     function styleInject(css, ref) {
@@ -86,4 +87,4 @@ this.primevue.tag = (function (vue) {
 
     return script;
 
-})(Vue);
+})(primevue.basecomponent, Vue);

package/tag/tag.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.tag=function(e){"use strict";var n={name:"Tag",props:{value:null,severity:null,rounded:Boolean,icon:String},computed:{containerClass(){return["p-tag p-component",{"p-tag-info":"info"===this.severity,"p-tag-success":"success"===this.severity,"p-tag-warning":"warning"===this.severity,"p-tag-danger":"danger"===this.severity,"p-tag-rounded":this.rounded}]},iconClass(){return["p-tag-icon",this.icon]}}};const t={class:"p-tag-value"};return function(e,n){void 0===n&&(n={});var t=n.insertAt;if(e&&"undefined"!=typeof document){var s=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===t&&s.firstChild?s.insertBefore(a,s.firstChild):s.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}("\n.p-tag {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n}\n.p-tag-icon,\n.p-tag-value,\n.p-tag-icon.pi {\n    line-height: 1.5;\n}\n.p-tag.p-tag-rounded {\n    border-radius: 10rem;\n}\n"),n.render=function(n,s,a,i,o,r){return e.openBlock(),e.createElementBlock("span",{class:e.normalizeClass(r.containerClass)},[n.$slots.icon?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(n.$slots.icon),{key:0,class:"p-tag-icon"})):a.icon?(e.openBlock(),e.createElementBlock("span",{key:1,class:e.normalizeClass(r.iconClass)},null,2)):e.createCommentVNode("",!0),e.renderSlot(n.$slots,"default",{},(()=>[e.createElementVNode("span",t,e.toDisplayString(a.value),1)]))],2)},n}(Vue);
+this.primevue=this.primevue||{},this.primevue.tag=function(e,t){"use strict";function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o={name:"Tag",extends:n(e).default,props:{value:null,severity:null,rounded:Boolean,icon:String},computed:{containerClass(){return["p-tag p-component",{"p-tag-info":"info"===this.severity,"p-tag-success":"success"===this.severity,"p-tag-warning":"warning"===this.severity,"p-tag-danger":"danger"===this.severity,"p-tag-rounded":this.rounded}]},iconClass(){return["p-tag-icon",this.icon]}}};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],s=document.createElement("style");s.type="text/css","top"===n&&o.firstChild?o.insertBefore(s,o.firstChild):o.appendChild(s),s.styleSheet?s.styleSheet.cssText=e:s.appendChild(document.createTextNode(e))}}("\n.p-tag {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n}\n.p-tag-icon,\n.p-tag-value,\n.p-tag-icon.pi {\n    line-height: 1.5;\n}\n.p-tag.p-tag-rounded {\n    border-radius: 10rem;\n}\n"),o.render=function(e,n,o,s,i,r){return t.openBlock(),t.createElementBlock("span",t.mergeProps({class:r.containerClass},e.ptm("root")),[e.$slots.icon?(t.openBlock(),t.createBlock(t.resolveDynamicComponent(e.$slots.icon),t.mergeProps({key:0,class:"p-tag-icon"},e.ptm("icon")),null,16)):o.icon?(t.openBlock(),t.createElementBlock("span",t.mergeProps({key:1,class:r.iconClass},e.ptm("icon")),null,16)):t.createCommentVNode("",!0),t.renderSlot(e.$slots,"default",{},(()=>[t.createElementVNode("span",t.mergeProps({class:"p-tag-value"},e.ptm("value")),t.toDisplayString(o.value),17)]))],16)},o}(primevue.basecomponent,Vue);

package/terminal/Terminal.d.ts

@@ -9,6 +9,80 @@
  */
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type TerminalPassThroughOptionType = TerminalPassThroughAttributes | ((options: TerminalPassThroughMethodOptions) => TerminalPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface TerminalPassThroughMethodOptions {
+    props: TerminalProps;
+    state: TerminalState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link TerminalProps.pt}
+ */
+export interface TerminalPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: TerminalPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the welcome message's DOM element.
+     */
+    welcomeMessage?: TerminalPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: TerminalPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the commands' DOM element.
+     */
+    commands?: TerminalPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the prompt's DOM element.
+     */
+    prompt?: TerminalPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the command's DOM element.
+     */
+    command?: TerminalPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the response's DOM element.
+     */
+    response?: TerminalPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the container's DOM element.
+     */
+    container?: TerminalPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the command text's DOM element.
+     */
+    commandText?: TerminalPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface TerminalPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in Terminal component.
+ */
+export interface TerminalState {
+    /**
+     * Current command text as a string.
+     */
+    commandText: string;
+    /**
+     * Current commands as an array.
+     */
+    commands: string[];
+}
+
 /**
  * Defines valid properties in Terminal component.
  */
@@ -21,6 +95,11 @@ export interface TerminalProps {
      * Prompt text for each command.
      */
     prompt?: string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {TerminalPassThroughOptions}
+     */
+    pt?: TerminalPassThroughOptions;
 }
 
 /**