primevue 3.27.0 → 3.28.0

package/breadcrumb/breadcrumb.js

@@ -1,17 +1,20 @@
 this.primevue = this.primevue || {};
-this.primevue.breadcrumb = (function (ChevronRightIcon, vue) {
+this.primevue.breadcrumb = (function (BaseComponent, ChevronRightIcon, vue) {
     'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+    var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
     var ChevronRightIcon__default = /*#__PURE__*/_interopDefaultLegacy(ChevronRightIcon);
 
     var script$1 = {
         name: 'BreadcrumbItem',
+        extends: BaseComponent__default["default"],
         props: {
             item: null,
             templates: null,
-            exact: null
+            exact: null,
+            index: null
         },
         methods: {
             onClick(event, navigate) {
@@ -56,26 +59,18 @@ this.primevue.breadcrumb = (function (ChevronRightIcon, vue) {
         }
     };
 
-    const _hoisted_1$1 = ["href", "aria-current", "onClick"];
-    const _hoisted_2$1 = {
-      key: 2,
-      class: "p-menuitem-text"
-    };
-    const _hoisted_3$1 = ["href", "target", "aria-current"];
-    const _hoisted_4 = {
-      key: 2,
-      class: "p-menuitem-text"
-    };
+    const _hoisted_1 = ["href", "aria-current", "onClick"];
+    const _hoisted_2 = ["href", "target", "aria-current"];
 
     function render$1(_ctx, _cache, $props, $setup, $data, $options) {
       const _component_router_link = vue.resolveComponent("router-link");
 
       return ($options.visible())
-        ? (vue.openBlock(), vue.createElementBlock("li", {
+        ? (vue.openBlock(), vue.createElementBlock("li", vue.mergeProps({
             key: 0,
-            class: vue.normalizeClass($options.containerClass())
-          }, [
-            (!$props.templates.item)
+            class: $options.containerClass()
+          }, _ctx.ptm('menuitem')), [
+            (!$props.templates || !$props.templates.item)
               ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
                   ($props.item.to)
                     ? (vue.openBlock(), vue.createBlock(_component_router_link, {
@@ -84,12 +79,12 @@ this.primevue.breadcrumb = (function (ChevronRightIcon, vue) {
                         custom: ""
                       }, {
                         default: vue.withCtx(({ navigate, href, isActive, isExactActive }) => [
-                          vue.createElementVNode("a", {
+                          vue.createElementVNode("a", vue.mergeProps({
                             href: href,
-                            class: vue.normalizeClass($options.linkClass({ isActive, isExactActive })),
+                            class: $options.linkClass({ isActive, isExactActive }),
                             "aria-current": $options.isCurrentUrl(),
                             onClick: $event => ($options.onClick($event, navigate))
-                          }, [
+                          }, _ctx.ptm('action')), [
                             ($props.templates.itemicon)
                               ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates.itemicon), {
                                   key: 0,
@@ -97,48 +92,54 @@ this.primevue.breadcrumb = (function (ChevronRightIcon, vue) {
                                   class: "p-menuitem-icon"
                                 }, null, 8, ["item"]))
                               : ($props.item.icon)
-                                ? (vue.openBlock(), vue.createElementBlock("span", {
+                                ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
                                     key: 1,
-                                    class: vue.normalizeClass(['p-menuitem-icon', $props.item.icon])
-                                  }, null, 2))
+                                    class: ['p-menuitem-icon', $props.item.icon]
+                                  }, _ctx.ptm('icon')), null, 16))
                                 : vue.createCommentVNode("", true),
                             ($props.item.label)
-                              ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$1, vue.toDisplayString($options.label()), 1))
+                              ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
+                                  key: 2,
+                                  class: "p-menuitem-text"
+                                }, _ctx.ptm('label')), vue.toDisplayString($options.label()), 17))
                               : vue.createCommentVNode("", true)
-                          ], 10, _hoisted_1$1)
+                          ], 16, _hoisted_1)
                         ]),
                         _: 1
                       }, 8, ["to"]))
-                    : (vue.openBlock(), vue.createElementBlock("a", {
+                    : (vue.openBlock(), vue.createElementBlock("a", vue.mergeProps({
                         key: 1,
                         href: $props.item.url || '#',
-                        class: vue.normalizeClass($options.linkClass()),
+                        class: $options.linkClass(),
                         target: $props.item.target,
                         "aria-current": $options.isCurrentUrl(),
                         onClick: _cache[0] || (_cache[0] = (...args) => ($options.onClick && $options.onClick(...args)))
-                      }, [
-                        ($props.templates.itemicon)
+                      }, _ctx.ptm('action')), [
+                        ($props.templates && $props.templates.itemicon)
                           ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates.itemicon), {
                               key: 0,
                               item: $props.item,
                               class: "p-menuitem-icon"
                             }, null, 8, ["item"]))
                           : ($props.item.icon)
-                            ? (vue.openBlock(), vue.createElementBlock("span", {
+                            ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
                                 key: 1,
-                                class: vue.normalizeClass(['p-menuitem-icon', $props.item.icon])
-                              }, null, 2))
+                                class: ['p-menuitem-icon', $props.item.icon]
+                              }, _ctx.ptm('icon')), null, 16))
                             : vue.createCommentVNode("", true),
                         ($props.item.label)
-                          ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4, vue.toDisplayString($options.label()), 1))
+                          ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
+                              key: 2,
+                              class: "p-menuitem-text"
+                            }, _ctx.ptm('label')), vue.toDisplayString($options.label()), 17))
                           : vue.createCommentVNode("", true)
-                      ], 10, _hoisted_3$1))
+                      ], 16, _hoisted_2))
                 ], 64))
               : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates.item), {
                   key: 1,
                   item: $props.item
                 }, null, 8, ["item"]))
-          ], 2))
+          ], 16))
         : vue.createCommentVNode("", true)
     }
 
@@ -146,6 +147,7 @@ this.primevue.breadcrumb = (function (ChevronRightIcon, vue) {
 
     var script = {
         name: 'Breadcrumb',
+        extends: BaseComponent__default["default"],
         props: {
             model: {
                 type: Array,
@@ -166,48 +168,47 @@ this.primevue.breadcrumb = (function (ChevronRightIcon, vue) {
         }
     };
 
-    const _hoisted_1 = { class: "p-breadcrumb p-component" };
-    const _hoisted_2 = { class: "p-breadcrumb-list" };
-    const _hoisted_3 = {
-      key: 0,
-      class: "p-menuitem-separator"
-    };
-
     function render(_ctx, _cache, $props, $setup, $data, $options) {
       const _component_BreadcrumbItem = vue.resolveComponent("BreadcrumbItem");
       const _component_ChevronRightIcon = vue.resolveComponent("ChevronRightIcon");
 
-      return (vue.openBlock(), vue.createElementBlock("nav", _hoisted_1, [
-        vue.createElementVNode("ol", _hoisted_2, [
+      return (vue.openBlock(), vue.createElementBlock("nav", vue.mergeProps({ class: "p-breadcrumb p-component" }, _ctx.ptm('root')), [
+        vue.createElementVNode("ol", vue.mergeProps({ class: "p-breadcrumb-list" }, _ctx.ptm('menu')), [
           ($props.home)
             ? (vue.openBlock(), vue.createBlock(_component_BreadcrumbItem, {
                 key: 0,
                 item: $props.home,
                 class: "p-breadcrumb-home",
                 templates: _ctx.$slots,
-                exact: $props.exact
-              }, null, 8, ["item", "templates", "exact"]))
+                exact: $props.exact,
+                pt: _ctx.pt
+              }, null, 8, ["item", "templates", "exact", "pt"]))
             : vue.createCommentVNode("", true),
           (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.model, (item, i) => {
             return (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
               key: item.label
             }, [
               ($props.home || i !== 0)
-                ? (vue.openBlock(), vue.createElementBlock("li", _hoisted_3, [
+                ? (vue.openBlock(), vue.createElementBlock("li", vue.mergeProps({
+                    key: 0,
+                    class: "p-menuitem-separator"
+                  }, _ctx.ptm('separator')), [
                     vue.renderSlot(_ctx.$slots, "separator", {}, () => [
-                      vue.createVNode(_component_ChevronRightIcon, { "aria-hidden": "true" })
+                      vue.createVNode(_component_ChevronRightIcon, vue.mergeProps({ "aria-hidden": "true" }, _ctx.ptm('separatorIcon')), null, 16)
                     ])
-                  ]))
+                  ], 16))
                 : vue.createCommentVNode("", true),
               vue.createVNode(_component_BreadcrumbItem, {
                 item: item,
+                index: i,
                 templates: _ctx.$slots,
-                exact: $props.exact
-              }, null, 8, ["item", "templates", "exact"])
+                exact: $props.exact,
+                pt: _ctx.pt
+              }, null, 8, ["item", "index", "templates", "exact", "pt"])
             ], 64))
           }), 128))
-        ])
-      ]))
+        ], 16)
+      ], 16))
     }
 
     function styleInject(css, ref) {
@@ -244,4 +245,4 @@ this.primevue.breadcrumb = (function (ChevronRightIcon, vue) {
 
     return script;
 
-})(primevue.icons.chevronright, Vue);
+})(primevue.basecomponent, primevue.icons.chevronright, Vue);

package/breadcrumb/breadcrumb.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.breadcrumb=function(e,t){"use strict";function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=n(e),i={name:"BreadcrumbItem",props:{item:null,templates:null,exact:null},methods:{onClick(e,t){this.item.command&&this.item.command({originalEvent:e,item:this.item}),this.item.to&&t&&t(e)},containerClass(){return["p-menuitem",{"p-disabled":this.disabled()},this.item.class]},linkClass(e){return["p-menuitem-link",{"router-link-active":e&&e.isActive,"router-link-active-exact":this.exact&&e&&e.isExactActive}]},visible(){return"function"==typeof this.item.visible?this.item.visible():!1!==this.item.visible},disabled(){return"function"==typeof this.item.disabled?this.item.disabled():this.item.disabled},label(){return"function"==typeof this.item.label?this.item.label():this.item.label},isCurrentUrl(){const{to:e,url:t}=this.item;let n=this.$router?this.$router.currentRoute.path:"";return e===n||t===n?"page":void 0}}};const o=["href","aria-current","onClick"],a={key:2,class:"p-menuitem-text"},r=["href","target","aria-current"],c={key:2,class:"p-menuitem-text"};i.render=function(e,n,l,i,m,s){const p=t.resolveComponent("router-link");return s.visible()?(t.openBlock(),t.createElementBlock("li",{key:0,class:t.normalizeClass(s.containerClass())},[l.templates.item?(t.openBlock(),t.createBlock(t.resolveDynamicComponent(l.templates.item),{key:1,item:l.item},null,8,["item"])):(t.openBlock(),t.createElementBlock(t.Fragment,{key:0},[l.item.to?(t.openBlock(),t.createBlock(p,{key:0,to:l.item.to,custom:""},{default:t.withCtx((({navigate:e,href:n,isActive:i,isExactActive:r})=>[t.createElementVNode("a",{href:n,class:t.normalizeClass(s.linkClass({isActive:i,isExactActive:r})),"aria-current":s.isCurrentUrl(),onClick:t=>s.onClick(t,e)},[l.templates.itemicon?(t.openBlock(),t.createBlock(t.resolveDynamicComponent(l.templates.itemicon),{key:0,item:l.item,class:"p-menuitem-icon"},null,8,["item"])):l.item.icon?(t.openBlock(),t.createElementBlock("span",{key:1,class:t.normalizeClass(["p-menuitem-icon",l.item.icon])},null,2)):t.createCommentVNode("",!0),l.item.label?(t.openBlock(),t.createElementBlock("span",a,t.toDisplayString(s.label()),1)):t.createCommentVNode("",!0)],10,o)])),_:1},8,["to"])):(t.openBlock(),t.createElementBlock("a",{key:1,href:l.item.url||"#",class:t.normalizeClass(s.linkClass()),target:l.item.target,"aria-current":s.isCurrentUrl(),onClick:n[0]||(n[0]=(...e)=>s.onClick&&s.onClick(...e))},[l.templates.itemicon?(t.openBlock(),t.createBlock(t.resolveDynamicComponent(l.templates.itemicon),{key:0,item:l.item,class:"p-menuitem-icon"},null,8,["item"])):l.item.icon?(t.openBlock(),t.createElementBlock("span",{key:1,class:t.normalizeClass(["p-menuitem-icon",l.item.icon])},null,2)):t.createCommentVNode("",!0),l.item.label?(t.openBlock(),t.createElementBlock("span",c,t.toDisplayString(s.label()),1)):t.createCommentVNode("",!0)],10,r))],64))],2)):t.createCommentVNode("",!0)};var m={name:"Breadcrumb",props:{model:{type:Array,default:null},home:{type:null,default:null},exact:{type:Boolean,default:!0}},components:{BreadcrumbItem:i,ChevronRightIcon:l.default}};const s={class:"p-breadcrumb p-component"},p={class:"p-breadcrumb-list"},u={key:0,class:"p-menuitem-separator"};return function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var l=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===n&&l.firstChild?l.insertBefore(i,l.firstChild):l.appendChild(i),i.styleSheet?i.styleSheet.cssText=e:i.appendChild(document.createTextNode(e))}}("\n.p-breadcrumb {\n    overflow-x: auto;\n}\n.p-breadcrumb .p-breadcrumb-list {\n    margin: 0;\n    padding: 0;\n    list-style-type: none;\n    display: flex;\n    align-items: center;\n    flex-wrap: nowrap;\n}\n.p-breadcrumb .p-menuitem-text {\n    line-height: 1;\n}\n.p-breadcrumb .p-menuitem-link {\n    text-decoration: none;\n    display: flex;\n    align-items: center;\n}\n.p-breadcrumb .p-menuitem-separator {\n    display: flex;\n    align-items: center;\n}\n.p-breadcrumb::-webkit-scrollbar {\n    display: none;\n}\n"),m.render=function(e,n,l,i,o,a){const r=t.resolveComponent("BreadcrumbItem"),c=t.resolveComponent("ChevronRightIcon");return t.openBlock(),t.createElementBlock("nav",s,[t.createElementVNode("ol",p,[l.home?(t.openBlock(),t.createBlock(r,{key:0,item:l.home,class:"p-breadcrumb-home",templates:e.$slots,exact:l.exact},null,8,["item","templates","exact"])):t.createCommentVNode("",!0),(t.openBlock(!0),t.createElementBlock(t.Fragment,null,t.renderList(l.model,((n,i)=>(t.openBlock(),t.createElementBlock(t.Fragment,{key:n.label},[l.home||0!==i?(t.openBlock(),t.createElementBlock("li",u,[t.renderSlot(e.$slots,"separator",{},(()=>[t.createVNode(c,{"aria-hidden":"true"})]))])):t.createCommentVNode("",!0),t.createVNode(r,{item:n,templates:e.$slots,exact:l.exact},null,8,["item","templates","exact"])],64)))),128))])])},m}(primevue.icons.chevronright,Vue);
+this.primevue=this.primevue||{},this.primevue.breadcrumb=function(e,t,n){"use strict";function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=i(e),o=i(t),r={name:"BreadcrumbItem",extends:l.default,props:{item:null,templates:null,exact:null,index:null},methods:{onClick(e,t){this.item.command&&this.item.command({originalEvent:e,item:this.item}),this.item.to&&t&&t(e)},containerClass(){return["p-menuitem",{"p-disabled":this.disabled()},this.item.class]},linkClass(e){return["p-menuitem-link",{"router-link-active":e&&e.isActive,"router-link-active-exact":this.exact&&e&&e.isExactActive}]},visible(){return"function"==typeof this.item.visible?this.item.visible():!1!==this.item.visible},disabled(){return"function"==typeof this.item.disabled?this.item.disabled():this.item.disabled},label(){return"function"==typeof this.item.label?this.item.label():this.item.label},isCurrentUrl(){const{to:e,url:t}=this.item;let n=this.$router?this.$router.currentRoute.path:"";return e===n||t===n?"page":void 0}}};const m=["href","aria-current","onClick"],a=["href","target","aria-current"];r.render=function(e,t,i,l,o,r){const c=n.resolveComponent("router-link");return r.visible()?(n.openBlock(),n.createElementBlock("li",n.mergeProps({key:0,class:r.containerClass()},e.ptm("menuitem")),[i.templates&&i.templates.item?(n.openBlock(),n.createBlock(n.resolveDynamicComponent(i.templates.item),{key:1,item:i.item},null,8,["item"])):(n.openBlock(),n.createElementBlock(n.Fragment,{key:0},[i.item.to?(n.openBlock(),n.createBlock(c,{key:0,to:i.item.to,custom:""},{default:n.withCtx((({navigate:t,href:l,isActive:o,isExactActive:a})=>[n.createElementVNode("a",n.mergeProps({href:l,class:r.linkClass({isActive:o,isExactActive:a}),"aria-current":r.isCurrentUrl(),onClick:e=>r.onClick(e,t)},e.ptm("action")),[i.templates.itemicon?(n.openBlock(),n.createBlock(n.resolveDynamicComponent(i.templates.itemicon),{key:0,item:i.item,class:"p-menuitem-icon"},null,8,["item"])):i.item.icon?(n.openBlock(),n.createElementBlock("span",n.mergeProps({key:1,class:["p-menuitem-icon",i.item.icon]},e.ptm("icon")),null,16)):n.createCommentVNode("",!0),i.item.label?(n.openBlock(),n.createElementBlock("span",n.mergeProps({key:2,class:"p-menuitem-text"},e.ptm("label")),n.toDisplayString(r.label()),17)):n.createCommentVNode("",!0)],16,m)])),_:1},8,["to"])):(n.openBlock(),n.createElementBlock("a",n.mergeProps({key:1,href:i.item.url||"#",class:r.linkClass(),target:i.item.target,"aria-current":r.isCurrentUrl(),onClick:t[0]||(t[0]=(...e)=>r.onClick&&r.onClick(...e))},e.ptm("action")),[i.templates&&i.templates.itemicon?(n.openBlock(),n.createBlock(n.resolveDynamicComponent(i.templates.itemicon),{key:0,item:i.item,class:"p-menuitem-icon"},null,8,["item"])):i.item.icon?(n.openBlock(),n.createElementBlock("span",n.mergeProps({key:1,class:["p-menuitem-icon",i.item.icon]},e.ptm("icon")),null,16)):n.createCommentVNode("",!0),i.item.label?(n.openBlock(),n.createElementBlock("span",n.mergeProps({key:2,class:"p-menuitem-text"},e.ptm("label")),n.toDisplayString(r.label()),17)):n.createCommentVNode("",!0)],16,a))],64))],16)):n.createCommentVNode("",!0)};var c={name:"Breadcrumb",extends:l.default,props:{model:{type:Array,default:null},home:{type:null,default:null},exact:{type:Boolean,default:!0}},components:{BreadcrumbItem:r,ChevronRightIcon:o.default}};return function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===n&&i.firstChild?i.insertBefore(l,i.firstChild):i.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}("\n.p-breadcrumb {\n    overflow-x: auto;\n}\n.p-breadcrumb .p-breadcrumb-list {\n    margin: 0;\n    padding: 0;\n    list-style-type: none;\n    display: flex;\n    align-items: center;\n    flex-wrap: nowrap;\n}\n.p-breadcrumb .p-menuitem-text {\n    line-height: 1;\n}\n.p-breadcrumb .p-menuitem-link {\n    text-decoration: none;\n    display: flex;\n    align-items: center;\n}\n.p-breadcrumb .p-menuitem-separator {\n    display: flex;\n    align-items: center;\n}\n.p-breadcrumb::-webkit-scrollbar {\n    display: none;\n}\n"),c.render=function(e,t,i,l,o,r){const m=n.resolveComponent("BreadcrumbItem"),a=n.resolveComponent("ChevronRightIcon");return n.openBlock(),n.createElementBlock("nav",n.mergeProps({class:"p-breadcrumb p-component"},e.ptm("root")),[n.createElementVNode("ol",n.mergeProps({class:"p-breadcrumb-list"},e.ptm("menu")),[i.home?(n.openBlock(),n.createBlock(m,{key:0,item:i.home,class:"p-breadcrumb-home",templates:e.$slots,exact:i.exact,pt:e.pt},null,8,["item","templates","exact","pt"])):n.createCommentVNode("",!0),(n.openBlock(!0),n.createElementBlock(n.Fragment,null,n.renderList(i.model,((t,l)=>(n.openBlock(),n.createElementBlock(n.Fragment,{key:t.label},[i.home||0!==l?(n.openBlock(),n.createElementBlock("li",n.mergeProps({key:0,class:"p-menuitem-separator"},e.ptm("separator")),[n.renderSlot(e.$slots,"separator",{},(()=>[n.createVNode(a,n.mergeProps({"aria-hidden":"true"},e.ptm("separatorIcon")),null,16)]))],16)):n.createCommentVNode("",!0),n.createVNode(m,{item:t,index:l,templates:e.$slots,exact:i.exact,pt:e.pt},null,8,["item","index","templates","exact","pt"])],64)))),128))],16)],16)},c}(primevue.basecomponent,primevue.icons.chevronright,Vue);

package/button/Button.d.ts

@@ -10,6 +10,49 @@
 import { ButtonHTMLAttributes, VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type ButtonPassThroughOptionType = ButtonPassThroughAttributes | ((options: ButtonPassThroughMethodOptions) => ButtonPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ButtonPassThroughMethodOptions {
+    props: ButtonProps;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link ButtonProps.pt}
+ */
+export interface ButtonPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: ButtonPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the loading icon's DOM element.
+     */
+    loadingIcon?: ButtonPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the icon's DOM element.
+     */
+    icon?: ButtonPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the label's DOM element.
+     */
+    label?: ButtonPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the badge's DOM element.
+     */
+    badge?: ButtonPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface ButtonPassThroughAttributes {
+    [key: string]: any;
+}
+
 /**
  * Defines valid properties in Button component.
  */
@@ -94,6 +137,11 @@ export interface ButtonProps extends ButtonHTMLAttributes {
      * @defaultValue false
      */
     plain?: boolean | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {ButtonPassThroughOptions}
+     */
+    pt?: ButtonPassThroughOptions;
 }
 
 /**

package/button/Button.vue

@@ -1,26 +1,27 @@
 <template>
-    <button v-ripple :class="buttonClass" type="button" :aria-label="defaultAriaLabel" :disabled="disabled">
-        <slot></slot>
-        <template v-if="!$slots.default">
+    <button v-ripple :class="buttonClass" type="button" :aria-label="defaultAriaLabel" :disabled="disabled" v-bind="ptm('root')">
+        <slot>
             <slot v-if="loading" name="loadingicon" :class="loadingIconStyleClass">
-                <span v-if="loadingIcon" :class="[loadingIconStyleClass, loadingIcon]" />
-                <SpinnerIcon v-else :class="loadingIconStyleClass" spin />
+                <span v-if="loadingIcon" :class="[loadingIconStyleClass, loadingIcon]" v-bind="ptm('loadingIcon')" />
+                <SpinnerIcon v-else :class="loadingIconStyleClass" spin v-bind="ptm('loadingIcon')" />
             </slot>
             <slot v-else name="icon" :class="iconStyleClass">
-                <span v-if="icon" :class="[iconStyleClass, icon]"></span>
+                <span v-if="icon" :class="[iconStyleClass, icon]" v-bind="ptm('icon')"></span>
             </slot>
-            <span class="p-button-label">{{ label || '&nbsp;' }}</span>
-            <span v-if="badge" :class="badgeStyleClass">{{ badge }}</span>
-        </template>
+            <span class="p-button-label" v-bind="ptm('label')">{{ label || '&nbsp;' }}</span>
+            <span v-if="badge" :class="badgeStyleClass" v-bind="ptm('badge')">{{ badge }}</span>
+        </slot>
     </button>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import SpinnerIcon from 'primevue/icons/spinner';
 import Ripple from 'primevue/ripple';
 
 export default {
     name: 'Button',
+    extends: BaseComponent,
     props: {
         label: {
             type: String,

package/button/button.cjs.js

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

package/button/button.cjs.min.js

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

package/button/button.esm.js

@@ -1,9 +1,11 @@
+import BaseComponent from 'primevue/basecomponent';
 import SpinnerIcon from 'primevue/icons/spinner';
 import Ripple from 'primevue/ripple';
-import { resolveComponent, resolveDirective, withDirectives, openBlock, createElementBlock, normalizeClass, renderSlot, Fragment, createBlock, createCommentVNode, createElementVNode, toDisplayString } from 'vue';
+import { resolveComponent, resolveDirective, withDirectives, openBlock, createElementBlock, mergeProps, renderSlot, normalizeClass, createBlock, createCommentVNode, createElementVNode, toDisplayString } from 'vue';
 
 var script = {
     name: 'Button',
+    extends: BaseComponent,
     props: {
         label: {
             type: String,
@@ -135,58 +137,54 @@ var script = {
 };
 
 const _hoisted_1 = ["aria-label", "disabled"];
-const _hoisted_2 = { class: "p-button-label" };
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_SpinnerIcon = resolveComponent("SpinnerIcon");
   const _directive_ripple = resolveDirective("ripple");
 
-  return withDirectives((openBlock(), createElementBlock("button", {
-    class: normalizeClass($options.buttonClass),
+  return withDirectives((openBlock(), createElementBlock("button", mergeProps({
+    class: $options.buttonClass,
     type: "button",
     "aria-label": $options.defaultAriaLabel,
     disabled: $options.disabled
-  }, [
-    renderSlot(_ctx.$slots, "default"),
-    (!_ctx.$slots.default)
-      ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-          ($props.loading)
-            ? renderSlot(_ctx.$slots, "loadingicon", {
-                key: 0,
-                class: normalizeClass($options.loadingIconStyleClass)
-              }, () => [
-                ($props.loadingIcon)
-                  ? (openBlock(), createElementBlock("span", {
-                      key: 0,
-                      class: normalizeClass([$options.loadingIconStyleClass, $props.loadingIcon])
-                    }, null, 2))
-                  : (openBlock(), createBlock(_component_SpinnerIcon, {
-                      key: 1,
-                      class: normalizeClass($options.loadingIconStyleClass),
-                      spin: ""
-                    }, null, 8, ["class"]))
-              ])
-            : renderSlot(_ctx.$slots, "icon", {
-                key: 1,
-                class: normalizeClass($options.iconStyleClass)
-              }, () => [
-                ($props.icon)
-                  ? (openBlock(), createElementBlock("span", {
-                      key: 0,
-                      class: normalizeClass([$options.iconStyleClass, $props.icon])
-                    }, null, 2))
-                  : createCommentVNode("", true)
-              ]),
-          createElementVNode("span", _hoisted_2, toDisplayString($props.label || ' '), 1),
-          ($props.badge)
-            ? (openBlock(), createElementBlock("span", {
-                key: 2,
-                class: normalizeClass($options.badgeStyleClass)
-              }, toDisplayString($props.badge), 3))
-            : createCommentVNode("", true)
-        ], 64))
-      : createCommentVNode("", true)
-  ], 10, _hoisted_1)), [
+  }, _ctx.ptm('root')), [
+    renderSlot(_ctx.$slots, "default", {}, () => [
+      ($props.loading)
+        ? renderSlot(_ctx.$slots, "loadingicon", {
+            key: 0,
+            class: normalizeClass($options.loadingIconStyleClass)
+          }, () => [
+            ($props.loadingIcon)
+              ? (openBlock(), createElementBlock("span", mergeProps({
+                  key: 0,
+                  class: [$options.loadingIconStyleClass, $props.loadingIcon]
+                }, _ctx.ptm('loadingIcon')), null, 16))
+              : (openBlock(), createBlock(_component_SpinnerIcon, mergeProps({
+                  key: 1,
+                  class: $options.loadingIconStyleClass,
+                  spin: ""
+                }, _ctx.ptm('loadingIcon')), null, 16, ["class"]))
+          ])
+        : renderSlot(_ctx.$slots, "icon", {
+            key: 1,
+            class: normalizeClass($options.iconStyleClass)
+          }, () => [
+            ($props.icon)
+              ? (openBlock(), createElementBlock("span", mergeProps({
+                  key: 0,
+                  class: [$options.iconStyleClass, $props.icon]
+                }, _ctx.ptm('icon')), null, 16))
+              : createCommentVNode("", true)
+          ]),
+      createElementVNode("span", mergeProps({ class: "p-button-label" }, _ctx.ptm('label')), toDisplayString($props.label || ' '), 17),
+      ($props.badge)
+        ? (openBlock(), createElementBlock("span", mergeProps({
+            key: 2,
+            class: $options.badgeStyleClass
+          }, _ctx.ptm('badge')), toDisplayString($props.badge), 17))
+        : createCommentVNode("", true)
+    ])
+  ], 16, _hoisted_1)), [
     [_directive_ripple]
   ])
 }