primevue 3.26.1 → 3.28.0

package/button/Button.vue

@@ -1,19 +1,27 @@
 <template>
-    <button v-ripple :class="buttonClass" type="button" :aria-label="defaultAriaLabel" :disabled="disabled">
+    <button v-ripple :class="buttonClass" type="button" :aria-label="defaultAriaLabel" :disabled="disabled" v-bind="ptm('root')">
         <slot>
-            <span v-if="loading && !icon" :class="iconStyleClass"></span>
-            <span v-if="icon" :class="iconStyleClass"></span>
-            <span class="p-button-label">{{ label || '&nbsp;' }}</span>
-            <span v-if="badge" :class="badgeStyleClass">{{ badge }}</span>
+            <slot v-if="loading" name="loadingicon" :class="loadingIconStyleClass">
+                <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]" v-bind="ptm('icon')"></span>
+            </slot>
+            <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,
@@ -45,7 +53,7 @@ export default {
         },
         loadingIcon: {
             type: String,
-            default: 'pi pi-spinner pi-spin'
+            default: undefined
         },
         link: {
             type: Boolean,
@@ -85,11 +93,11 @@ export default {
             return [
                 'p-button p-component',
                 {
-                    'p-button-icon-only': this.icon && !this.label,
+                    'p-button-icon-only': this.hasIcon && !this.label,
                     'p-button-vertical': (this.iconPos === 'top' || this.iconPos === 'bottom') && this.label,
                     'p-disabled': this.$attrs.disabled || this.loading,
                     'p-button-loading': this.loading,
-                    'p-button-loading-label-only': this.loading && !this.icon && this.label,
+                    '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,
@@ -104,7 +112,6 @@ export default {
         },
         iconStyleClass() {
             return [
-                this.loading ? 'p-button-loading-icon ' + this.loadingIcon : this.icon,
                 'p-button-icon',
                 this.iconClass,
                 {
@@ -115,6 +122,9 @@ export default {
                 }
             ];
         },
+        loadingIconStyleClass() {
+            return ['p-button-loading-icon pi-spin', this.iconStyleClass];
+        },
         badgeStyleClass() {
             return [
                 'p-badge p-component',
@@ -129,8 +139,14 @@ export default {
         },
         defaultAriaLabel() {
             return this.label ? this.label + (this.badge ? ' ' + this.badge : '') : this.$attrs['aria-label'];
+        },
+        hasIcon() {
+            return this.icon || this.$slots.icon;
         }
     },
+    components: {
+        SpinnerIcon
+    },
     directives: {
         ripple: Ripple
     }

package/button/button.cjs.js

@@ -1,14 +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,
@@ -40,7 +45,7 @@ var script = {
         },
         loadingIcon: {
             type: String,
-            default: 'pi pi-spinner pi-spin'
+            default: undefined
         },
         link: {
             type: Boolean,
@@ -80,11 +85,11 @@ var script = {
             return [
                 'p-button p-component',
                 {
-                    'p-button-icon-only': this.icon && !this.label,
+                    'p-button-icon-only': this.hasIcon && !this.label,
                     'p-button-vertical': (this.iconPos === 'top' || this.iconPos === 'bottom') && this.label,
                     'p-disabled': this.$attrs.disabled || this.loading,
                     'p-button-loading': this.loading,
-                    'p-button-loading-label-only': this.loading && !this.icon && this.label,
+                    '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,
@@ -99,7 +104,6 @@ var script = {
         },
         iconStyleClass() {
             return [
-                this.loading ? 'p-button-loading-icon ' + this.loadingIcon : this.icon,
                 'p-button-icon',
                 this.iconClass,
                 {
@@ -110,6 +114,9 @@ var script = {
                 }
             ];
         },
+        loadingIconStyleClass() {
+            return ['p-button-loading-icon pi-spin', this.iconStyleClass];
+        },
         badgeStyleClass() {
             return [
                 'p-badge p-component',
@@ -124,47 +131,68 @@ var script = {
         },
         defaultAriaLabel() {
             return this.label ? this.label + (this.badge ? ' ' + this.badge : '') : this.$attrs['aria-label'];
+        },
+        hasIcon() {
+            return this.icon || this.$slots.icon;
         }
     },
+    components: {
+        SpinnerIcon: SpinnerIcon__default["default"]
+    },
     directives: {
         ripple: Ripple__default["default"]
     }
 };
 
 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
-  }, [
+  }, _ctx.ptm('root')), [
     vue.renderSlot(_ctx.$slots, "default", {}, () => [
-      ($props.loading && !$props.icon)
-        ? (vue.openBlock(), vue.createElementBlock("span", {
+      ($props.loading)
+        ? vue.renderSlot(_ctx.$slots, "loadingicon", {
             key: 0,
-            class: vue.normalizeClass($options.iconStyleClass)
-          }, null, 2))
-        : vue.createCommentVNode("", true),
-      ($props.icon)
-        ? (vue.openBlock(), vue.createElementBlock("span", {
+            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)
-          }, null, 2))
-        : vue.createCommentVNode("", true),
-      vue.createElementVNode("span", _hoisted_2, vue.toDisplayString($props.label || ' '), 1),
+          }, () => [
+            ($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.openBlock(), vue.createElementBlock("span", vue.mergeProps({
             key: 2,
-            class: vue.normalizeClass($options.badgeStyleClass)
-          }, vue.toDisplayString($props.badge), 3))
+            class: $options.badgeStyleClass
+          }, _ctx.ptm('badge')), vue.toDisplayString($props.badge), 17))
         : vue.createCommentVNode("", true)
     ])
-  ], 10, _hoisted_1)), [
+  ], 16, _hoisted_1)), [
     [_directive_ripple]
   ])
 }

package/button/button.cjs.min.js

@@ -1 +1 @@
-"use strict";var t=require("primevue/ripple"),e=require("vue");function l(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var i={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:"pi pi-spinner pi-spin"},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.icon&&!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.icon&&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[this.loading?"p-button-loading-icon "+this.loadingIcon:this.icon,"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}]},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"]}},directives:{ripple:l(t).default}};const n=["aria-label","disabled"],o={class:"p-button-label"};i.render=function(t,l,i,a,s,d){const r=e.resolveDirective("ripple");return e.withDirectives((e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(d.buttonClass),type:"button","aria-label":d.defaultAriaLabel,disabled:d.disabled},[e.renderSlot(t.$slots,"default",{},(()=>[i.loading&&!i.icon?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(d.iconStyleClass)},null,2)):e.createCommentVNode("",!0),i.icon?(e.openBlock(),e.createElementBlock("span",{key:1,class:e.normalizeClass(d.iconStyleClass)},null,2)):e.createCommentVNode("",!0),e.createElementVNode("span",o,e.toDisplayString(i.label||" "),1),i.badge?(e.openBlock(),e.createElementBlock("span",{key:2,class:e.normalizeClass(d.badgeStyleClass)},e.toDisplayString(i.badge),3)):e.createCommentVNode("",!0)]))],10,n)),[[r]])},module.exports=i;
+"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,8 +1,11 @@
+import BaseComponent from 'primevue/basecomponent';
+import SpinnerIcon from 'primevue/icons/spinner';
 import Ripple from 'primevue/ripple';
-import { resolveDirective, withDirectives, openBlock, createElementBlock, normalizeClass, renderSlot, 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,
@@ -34,7 +37,7 @@ var script = {
         },
         loadingIcon: {
             type: String,
-            default: 'pi pi-spinner pi-spin'
+            default: undefined
         },
         link: {
             type: Boolean,
@@ -74,11 +77,11 @@ var script = {
             return [
                 'p-button p-component',
                 {
-                    'p-button-icon-only': this.icon && !this.label,
+                    'p-button-icon-only': this.hasIcon && !this.label,
                     'p-button-vertical': (this.iconPos === 'top' || this.iconPos === 'bottom') && this.label,
                     'p-disabled': this.$attrs.disabled || this.loading,
                     'p-button-loading': this.loading,
-                    'p-button-loading-label-only': this.loading && !this.icon && this.label,
+                    '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,
@@ -93,7 +96,6 @@ var script = {
         },
         iconStyleClass() {
             return [
-                this.loading ? 'p-button-loading-icon ' + this.loadingIcon : this.icon,
                 'p-button-icon',
                 this.iconClass,
                 {
@@ -104,6 +106,9 @@ var script = {
                 }
             ];
         },
+        loadingIconStyleClass() {
+            return ['p-button-loading-icon pi-spin', this.iconStyleClass];
+        },
         badgeStyleClass() {
             return [
                 'p-badge p-component',
@@ -118,47 +123,68 @@ var script = {
         },
         defaultAriaLabel() {
             return this.label ? this.label + (this.badge ? ' ' + this.badge : '') : this.$attrs['aria-label'];
+        },
+        hasIcon() {
+            return this.icon || this.$slots.icon;
         }
     },
+    components: {
+        SpinnerIcon
+    },
     directives: {
         ripple: Ripple
     }
 };
 
 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
-  }, [
+  }, _ctx.ptm('root')), [
     renderSlot(_ctx.$slots, "default", {}, () => [
-      ($props.loading && !$props.icon)
-        ? (openBlock(), createElementBlock("span", {
+      ($props.loading)
+        ? renderSlot(_ctx.$slots, "loadingicon", {
             key: 0,
-            class: normalizeClass($options.iconStyleClass)
-          }, null, 2))
-        : createCommentVNode("", true),
-      ($props.icon)
-        ? (openBlock(), createElementBlock("span", {
+            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)
-          }, null, 2))
-        : createCommentVNode("", true),
-      createElementVNode("span", _hoisted_2, toDisplayString($props.label || ' '), 1),
+          }, () => [
+            ($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", {
+        ? (openBlock(), createElementBlock("span", mergeProps({
             key: 2,
-            class: normalizeClass($options.badgeStyleClass)
-          }, toDisplayString($props.badge), 3))
+            class: $options.badgeStyleClass
+          }, _ctx.ptm('badge')), toDisplayString($props.badge), 17))
         : createCommentVNode("", true)
     ])
-  ], 10, _hoisted_1)), [
+  ], 16, _hoisted_1)), [
     [_directive_ripple]
   ])
 }

package/button/button.esm.min.js

@@ -1 +1 @@
-import t from"primevue/ripple";import{resolveDirective as l,withDirectives as e,openBlock as i,createElementBlock as n,normalizeClass as a,renderSlot as o,createCommentVNode as s,createElementVNode as d,toDisplayString as p}from"vue";var u={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:"pi pi-spinner pi-spin"},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.icon&&!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.icon&&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[this.loading?"p-button-loading-icon "+this.loadingIcon:this.icon,"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}]},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"]}},directives:{ripple:t}};const b=["aria-label","disabled"],r={class:"p-button-label"};u.render=function(t,u,h,g,c,y){const f=l("ripple");return e((i(),n("button",{class:a(y.buttonClass),type:"button","aria-label":y.defaultAriaLabel,disabled:y.disabled},[o(t.$slots,"default",{},(()=>[h.loading&&!h.icon?(i(),n("span",{key:0,class:a(y.iconStyleClass)},null,2)):s("",!0),h.icon?(i(),n("span",{key:1,class:a(y.iconStyleClass)},null,2)):s("",!0),d("span",r,p(h.label||" "),1),h.badge?(i(),n("span",{key:2,class:a(y.badgeStyleClass)},p(h.badge),3)):s("",!0)]))],10,b)),[[f]])};export{u as default};
+import t from"primevue/basecomponent";import l from"primevue/icons/spinner";import n from"primevue/ripple";import{resolveComponent as e,resolveDirective as o,withDirectives as i,openBlock as s,createElementBlock as a,mergeProps as p,renderSlot as d,normalizeClass as u,createBlock as r,createCommentVNode as b,createElementVNode as c,toDisplayString as g}from"vue";var h={name:"Button",extends:t,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:l},directives:{ripple:n}};const y=["aria-label","disabled"];h.render=function(t,l,n,h,f,m){const S=e("SpinnerIcon"),C=o("ripple");return i((s(),a("button",p({class:m.buttonClass,type:"button","aria-label":m.defaultAriaLabel,disabled:m.disabled},t.ptm("root")),[d(t.$slots,"default",{},(()=>[n.loading?d(t.$slots,"loadingicon",{key:0,class:u(m.loadingIconStyleClass)},(()=>[n.loadingIcon?(s(),a("span",p({key:0,class:[m.loadingIconStyleClass,n.loadingIcon]},t.ptm("loadingIcon")),null,16)):(s(),r(S,p({key:1,class:m.loadingIconStyleClass,spin:""},t.ptm("loadingIcon")),null,16,["class"]))])):d(t.$slots,"icon",{key:1,class:u(m.iconStyleClass)},(()=>[n.icon?(s(),a("span",p({key:0,class:[m.iconStyleClass,n.icon]},t.ptm("icon")),null,16)):b("",!0)])),c("span",p({class:"p-button-label"},t.ptm("label")),g(n.label||" "),17),n.badge?(s(),a("span",p({key:2,class:m.badgeStyleClass},t.ptm("badge")),g(n.badge),17)):b("",!0)]))],16,y)),[[C]])};export{h as default};

package/button/button.js

@@ -1,13 +1,16 @@
 this.primevue = this.primevue || {};
-this.primevue.button = (function (Ripple, vue) {
+this.primevue.button = (function (BaseComponent, SpinnerIcon, Ripple, vue) {
     'use strict';
 
     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,
@@ -39,7 +42,7 @@ this.primevue.button = (function (Ripple, vue) {
             },
             loadingIcon: {
                 type: String,
-                default: 'pi pi-spinner pi-spin'
+                default: undefined
             },
             link: {
                 type: Boolean,
@@ -79,11 +82,11 @@ this.primevue.button = (function (Ripple, vue) {
                 return [
                     'p-button p-component',
                     {
-                        'p-button-icon-only': this.icon && !this.label,
+                        'p-button-icon-only': this.hasIcon && !this.label,
                         'p-button-vertical': (this.iconPos === 'top' || this.iconPos === 'bottom') && this.label,
                         'p-disabled': this.$attrs.disabled || this.loading,
                         'p-button-loading': this.loading,
-                        'p-button-loading-label-only': this.loading && !this.icon && this.label,
+                        '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,
@@ -98,7 +101,6 @@ this.primevue.button = (function (Ripple, vue) {
             },
             iconStyleClass() {
                 return [
-                    this.loading ? 'p-button-loading-icon ' + this.loadingIcon : this.icon,
                     'p-button-icon',
                     this.iconClass,
                     {
@@ -109,6 +111,9 @@ this.primevue.button = (function (Ripple, vue) {
                     }
                 ];
             },
+            loadingIconStyleClass() {
+                return ['p-button-loading-icon pi-spin', this.iconStyleClass];
+            },
             badgeStyleClass() {
                 return [
                     'p-badge p-component',
@@ -123,47 +128,68 @@ this.primevue.button = (function (Ripple, vue) {
             },
             defaultAriaLabel() {
                 return this.label ? this.label + (this.badge ? ' ' + this.badge : '') : this.$attrs['aria-label'];
+            },
+            hasIcon() {
+                return this.icon || this.$slots.icon;
             }
         },
+        components: {
+            SpinnerIcon: SpinnerIcon__default["default"]
+        },
         directives: {
             ripple: Ripple__default["default"]
         }
     };
 
     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
-      }, [
+      }, _ctx.ptm('root')), [
         vue.renderSlot(_ctx.$slots, "default", {}, () => [
-          ($props.loading && !$props.icon)
-            ? (vue.openBlock(), vue.createElementBlock("span", {
+          ($props.loading)
+            ? vue.renderSlot(_ctx.$slots, "loadingicon", {
                 key: 0,
-                class: vue.normalizeClass($options.iconStyleClass)
-              }, null, 2))
-            : vue.createCommentVNode("", true),
-          ($props.icon)
-            ? (vue.openBlock(), vue.createElementBlock("span", {
+                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)
-              }, null, 2))
-            : vue.createCommentVNode("", true),
-          vue.createElementVNode("span", _hoisted_2, vue.toDisplayString($props.label || ' '), 1),
+              }, () => [
+                ($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.openBlock(), vue.createElementBlock("span", vue.mergeProps({
                 key: 2,
-                class: vue.normalizeClass($options.badgeStyleClass)
-              }, vue.toDisplayString($props.badge), 3))
+                class: $options.badgeStyleClass
+              }, _ctx.ptm('badge')), vue.toDisplayString($props.badge), 17))
             : vue.createCommentVNode("", true)
         ])
-      ], 10, _hoisted_1)), [
+      ], 16, _hoisted_1)), [
         [_directive_ripple]
       ])
     }
@@ -172,4 +198,4 @@ this.primevue.button = (function (Ripple, vue) {
 
     return script;
 
-})(primevue.ripple, Vue);
+})(primevue.basecomponent, primevue.icons.spinner, primevue.ripple, Vue);

package/button/button.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.button=function(t,e){"use strict";function l(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var i={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:"pi pi-spinner pi-spin"},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.icon&&!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.icon&&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[this.loading?"p-button-loading-icon "+this.loadingIcon:this.icon,"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}]},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"]}},directives:{ripple:l(t).default}};const n=["aria-label","disabled"],o={class:"p-button-label"};return i.render=function(t,l,i,a,s,u){const d=e.resolveDirective("ripple");return e.withDirectives((e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(u.buttonClass),type:"button","aria-label":u.defaultAriaLabel,disabled:u.disabled},[e.renderSlot(t.$slots,"default",{},(()=>[i.loading&&!i.icon?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(u.iconStyleClass)},null,2)):e.createCommentVNode("",!0),i.icon?(e.openBlock(),e.createElementBlock("span",{key:1,class:e.normalizeClass(u.iconStyleClass)},null,2)):e.createCommentVNode("",!0),e.createElementVNode("span",o,e.toDisplayString(i.label||" "),1),i.badge?(e.openBlock(),e.createElementBlock("span",{key:2,class:e.normalizeClass(u.badgeStyleClass)},e.toDisplayString(i.badge),3)):e.createCommentVNode("",!0)]))],10,n)),[[d]])},i}(primevue.ripple,Vue);
+this.primevue=this.primevue||{},this.primevue.button=function(t,e,l,n){"use strict";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"];return 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]])},r}(primevue.basecomponent,primevue.icons.spinner,primevue.ripple,Vue);