primevue 3.26.1 → 3.27.0

package/breadcrumb/breadcrumb.js

@@ -1,12 +1,16 @@
 this.primevue = this.primevue || {};
-this.primevue.breadcrumb = (function (vue) {
+this.primevue.breadcrumb = (function (ChevronRightIcon, vue) {
     'use strict';
 
+    function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+    var ChevronRightIcon__default = /*#__PURE__*/_interopDefaultLegacy(ChevronRightIcon);
+
     var script$1 = {
         name: 'BreadcrumbItem',
         props: {
             item: null,
-            template: null,
+            templates: null,
             exact: null
         },
         methods: {
@@ -49,22 +53,17 @@ this.primevue.breadcrumb = (function (vue) {
 
                 return to === lastPath || url === lastPath ? 'page' : undefined;
             }
-        },
-        computed: {
-            iconClass() {
-                return ['p-menuitem-icon', this.item.icon];
-            }
         }
     };
 
     const _hoisted_1$1 = ["href", "aria-current", "onClick"];
     const _hoisted_2$1 = {
-      key: 1,
+      key: 2,
       class: "p-menuitem-text"
     };
     const _hoisted_3$1 = ["href", "target", "aria-current"];
-    const _hoisted_4$1 = {
-      key: 1,
+    const _hoisted_4 = {
+      key: 2,
       class: "p-menuitem-text"
     };
 
@@ -76,7 +75,7 @@ this.primevue.breadcrumb = (function (vue) {
             key: 0,
             class: vue.normalizeClass($options.containerClass())
           }, [
-            (!$props.template)
+            (!$props.templates.item)
               ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
                   ($props.item.to)
                     ? (vue.openBlock(), vue.createBlock(_component_router_link, {
@@ -91,12 +90,18 @@ this.primevue.breadcrumb = (function (vue) {
                             "aria-current": $options.isCurrentUrl(),
                             onClick: $event => ($options.onClick($event, navigate))
                           }, [
-                            ($props.item.icon)
-                              ? (vue.openBlock(), vue.createElementBlock("span", {
+                            ($props.templates.itemicon)
+                              ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates.itemicon), {
                                   key: 0,
-                                  class: vue.normalizeClass($options.iconClass)
-                                }, null, 2))
-                              : vue.createCommentVNode("", true),
+                                  item: $props.item,
+                                  class: "p-menuitem-icon"
+                                }, null, 8, ["item"]))
+                              : ($props.item.icon)
+                                ? (vue.openBlock(), vue.createElementBlock("span", {
+                                    key: 1,
+                                    class: vue.normalizeClass(['p-menuitem-icon', $props.item.icon])
+                                  }, null, 2))
+                                : vue.createCommentVNode("", true),
                             ($props.item.label)
                               ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$1, vue.toDisplayString($options.label()), 1))
                               : vue.createCommentVNode("", true)
@@ -112,18 +117,24 @@ this.primevue.breadcrumb = (function (vue) {
                         "aria-current": $options.isCurrentUrl(),
                         onClick: _cache[0] || (_cache[0] = (...args) => ($options.onClick && $options.onClick(...args)))
                       }, [
-                        ($props.item.icon)
-                          ? (vue.openBlock(), vue.createElementBlock("span", {
+                        ($props.templates.itemicon)
+                          ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates.itemicon), {
                               key: 0,
-                              class: vue.normalizeClass($options.iconClass)
-                            }, null, 2))
-                          : vue.createCommentVNode("", true),
+                              item: $props.item,
+                              class: "p-menuitem-icon"
+                            }, null, 8, ["item"]))
+                          : ($props.item.icon)
+                            ? (vue.openBlock(), vue.createElementBlock("span", {
+                                key: 1,
+                                class: vue.normalizeClass(['p-menuitem-icon', $props.item.icon])
+                              }, null, 2))
+                            : vue.createCommentVNode("", true),
                         ($props.item.label)
-                          ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4$1, vue.toDisplayString($options.label()), 1))
+                          ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_4, vue.toDisplayString($options.label()), 1))
                           : vue.createCommentVNode("", true)
                       ], 10, _hoisted_3$1))
                 ], 64))
-              : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.template), {
+              : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates.item), {
                   key: 1,
                   item: $props.item
                 }, null, 8, ["item"]))
@@ -150,7 +161,8 @@ this.primevue.breadcrumb = (function (vue) {
             }
         },
         components: {
-            BreadcrumbItem: script$1
+            BreadcrumbItem: script$1,
+            ChevronRightIcon: ChevronRightIcon__default["default"]
         }
     };
 
@@ -160,16 +172,10 @@ this.primevue.breadcrumb = (function (vue) {
       key: 0,
       class: "p-menuitem-separator"
     };
-    const _hoisted_4 = /*#__PURE__*/vue.createElementVNode("span", {
-      class: "pi pi-chevron-right",
-      "aria-hidden": "true"
-    }, null, -1);
-    const _hoisted_5 = [
-      _hoisted_4
-    ];
 
     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, [
@@ -178,22 +184,26 @@ this.primevue.breadcrumb = (function (vue) {
                 key: 0,
                 item: $props.home,
                 class: "p-breadcrumb-home",
-                template: _ctx.$slots.item,
+                templates: _ctx.$slots,
                 exact: $props.exact
-              }, null, 8, ["item", "template", "exact"]))
+              }, null, 8, ["item", "templates", "exact"]))
             : 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, _hoisted_5))
+                ? (vue.openBlock(), vue.createElementBlock("li", _hoisted_3, [
+                    vue.renderSlot(_ctx.$slots, "separator", {}, () => [
+                      vue.createVNode(_component_ChevronRightIcon, { "aria-hidden": "true" })
+                    ])
+                  ]))
                 : vue.createCommentVNode("", true),
               vue.createVNode(_component_BreadcrumbItem, {
                 item: item,
-                template: _ctx.$slots.item,
+                templates: _ctx.$slots,
                 exact: $props.exact
-              }, null, 8, ["item", "template", "exact"])
+              }, null, 8, ["item", "templates", "exact"])
             ], 64))
           }), 128))
         ])
@@ -234,4 +244,4 @@ this.primevue.breadcrumb = (function (vue) {
 
     return script;
 
-})(Vue);
+})(primevue.icons.chevronright, Vue);

package/breadcrumb/breadcrumb.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.breadcrumb=function(e){"use strict";var t={name:"BreadcrumbItem",props:{item:null,template: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}},computed:{iconClass(){return["p-menuitem-icon",this.item.icon]}}};const n=["href","aria-current","onClick"],l={key:1,class:"p-menuitem-text"},i=["href","target","aria-current"],a={key:1,class:"p-menuitem-text"};t.render=function(t,r,o,c,m,s){const p=e.resolveComponent("router-link");return s.visible()?(e.openBlock(),e.createElementBlock("li",{key:0,class:e.normalizeClass(s.containerClass())},[o.template?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.template),{key:1,item:o.item},null,8,["item"])):(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[o.item.to?(e.openBlock(),e.createBlock(p,{key:0,to:o.item.to,custom:""},{default:e.withCtx((({navigate:t,href:i,isActive:a,isExactActive:r})=>[e.createElementVNode("a",{href:i,class:e.normalizeClass(s.linkClass({isActive:a,isExactActive:r})),"aria-current":s.isCurrentUrl(),onClick:e=>s.onClick(e,t)},[o.item.icon?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(s.iconClass)},null,2)):e.createCommentVNode("",!0),o.item.label?(e.openBlock(),e.createElementBlock("span",l,e.toDisplayString(s.label()),1)):e.createCommentVNode("",!0)],10,n)])),_:1},8,["to"])):(e.openBlock(),e.createElementBlock("a",{key:1,href:o.item.url||"#",class:e.normalizeClass(s.linkClass()),target:o.item.target,"aria-current":s.isCurrentUrl(),onClick:r[0]||(r[0]=(...e)=>s.onClick&&s.onClick(...e))},[o.item.icon?(e.openBlock(),e.createElementBlock("span",{key:0,class:e.normalizeClass(s.iconClass)},null,2)):e.createCommentVNode("",!0),o.item.label?(e.openBlock(),e.createElementBlock("span",a,e.toDisplayString(s.label()),1)):e.createCommentVNode("",!0)],10,i))],64))],2)):e.createCommentVNode("",!0)};var r={name:"Breadcrumb",props:{model:{type:Array,default:null},home:{type:null,default:null},exact:{type:Boolean,default:!0}},components:{BreadcrumbItem:t}};const o={class:"p-breadcrumb p-component"},c={class:"p-breadcrumb-list"},m={key:0,class:"p-menuitem-separator"},s=[e.createElementVNode("span",{class:"pi pi-chevron-right","aria-hidden":"true"},null,-1)];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"),r.render=function(t,n,l,i,a,r){const p=e.resolveComponent("BreadcrumbItem");return e.openBlock(),e.createElementBlock("nav",o,[e.createElementVNode("ol",c,[l.home?(e.openBlock(),e.createBlock(p,{key:0,item:l.home,class:"p-breadcrumb-home",template:t.$slots.item,exact:l.exact},null,8,["item","template","exact"])):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.model,((n,i)=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:n.label},[l.home||0!==i?(e.openBlock(),e.createElementBlock("li",m,s)):e.createCommentVNode("",!0),e.createVNode(p,{item:n,template:t.$slots.item,exact:l.exact},null,8,["item","template","exact"])],64)))),128))])])},r}(Vue);
+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);

package/button/Button.d.ts

@@ -54,7 +54,6 @@ export interface ButtonProps extends ButtonHTMLAttributes {
     loading?: boolean | undefined;
     /**
      * Icon to display in loading state.
-     * @defaultValue pi pi-spinner pi-spin
      */
     loadingIcon?: string | undefined;
     /**
@@ -105,6 +104,26 @@ export interface ButtonSlots {
      * Custom content such as icons, images and text can be placed inside the button via the default slot. Note that when slot is used, label, icon and badge properties are not included.
      */
     default(): VNode[];
+    /**
+     * Custom icon template.
+     * @param {Object} scope - icon slot's params.
+     */
+    icon(scope: {
+        /**
+         * Style class of the icon.
+         */
+        class: string;
+    }): VNode[];
+    /**
+     * Custom loading icon template.
+     * @param {Object} scope - loading icon slot's params.
+     */
+    loadingicon(scope: {
+        /**
+         * Style class of the loading icon.
+         */
+        class: string;
+    }): VNode[];
 }
 
 /**

package/button/Button.vue

@@ -1,15 +1,22 @@
 <template>
     <button v-ripple :class="buttonClass" type="button" :aria-label="defaultAriaLabel" :disabled="disabled">
-        <slot>
-            <span v-if="loading && !icon" :class="iconStyleClass"></span>
-            <span v-if="icon" :class="iconStyleClass"></span>
+        <slot></slot>
+        <template v-if="!$slots.default">
+            <slot v-if="loading" name="loadingicon" :class="loadingIconStyleClass">
+                <span v-if="loadingIcon" :class="[loadingIconStyleClass, loadingIcon]" />
+                <SpinnerIcon v-else :class="loadingIconStyleClass" spin />
+            </slot>
+            <slot v-else name="icon" :class="iconStyleClass">
+                <span v-if="icon" :class="[iconStyleClass, icon]"></span>
+            </slot>
             <span class="p-button-label">{{ label || '&nbsp;' }}</span>
             <span v-if="badge" :class="badgeStyleClass">{{ badge }}</span>
-        </slot>
+        </template>
     </button>
 </template>
 
 <script>
+import SpinnerIcon from 'primevue/icons/spinner';
 import Ripple from 'primevue/ripple';
 
 export default {
@@ -45,7 +52,7 @@ export default {
         },
         loadingIcon: {
             type: String,
-            default: 'pi pi-spinner pi-spin'
+            default: undefined
         },
         link: {
             type: Boolean,
@@ -85,11 +92,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 +111,6 @@ export default {
         },
         iconStyleClass() {
             return [
-                this.loading ? 'p-button-loading-icon ' + this.loadingIcon : this.icon,
                 'p-button-icon',
                 this.iconClass,
                 {
@@ -115,6 +121,9 @@ export default {
                 }
             ];
         },
+        loadingIconStyleClass() {
+            return ['p-button-loading-icon pi-spin', this.iconStyleClass];
+        },
         badgeStyleClass() {
             return [
                 'p-badge p-component',
@@ -129,8 +138,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,10 +1,12 @@
 'use strict';
 
+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 SpinnerIcon__default = /*#__PURE__*/_interopDefaultLegacy(SpinnerIcon);
 var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
 
 var script = {
@@ -40,7 +42,7 @@ var script = {
         },
         loadingIcon: {
             type: String,
-            default: 'pi pi-spinner pi-spin'
+            default: undefined
         },
         link: {
             type: Boolean,
@@ -80,11 +82,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 +101,6 @@ var script = {
         },
         iconStyleClass() {
             return [
-                this.loading ? 'p-button-loading-icon ' + this.loadingIcon : this.icon,
                 'p-button-icon',
                 this.iconClass,
                 {
@@ -110,6 +111,9 @@ var script = {
                 }
             ];
         },
+        loadingIconStyleClass() {
+            return ['p-button-loading-icon pi-spin', this.iconStyleClass];
+        },
         badgeStyleClass() {
             return [
                 'p-badge p-component',
@@ -124,8 +128,14 @@ 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"]
     }
@@ -135,6 +145,7 @@ 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", {
@@ -143,27 +154,45 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     "aria-label": $options.defaultAriaLabel,
     disabled: $options.disabled
   }, [
-    vue.renderSlot(_ctx.$slots, "default", {}, () => [
-      ($props.loading && !$props.icon)
-        ? (vue.openBlock(), vue.createElementBlock("span", {
-            key: 0,
-            class: vue.normalizeClass($options.iconStyleClass)
-          }, null, 2))
-        : vue.createCommentVNode("", true),
-      ($props.icon)
-        ? (vue.openBlock(), vue.createElementBlock("span", {
-            key: 1,
-            class: vue.normalizeClass($options.iconStyleClass)
-          }, 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)
-    ])
+    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)), [
     [_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/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;

package/button/button.esm.js

@@ -1,5 +1,6 @@
+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, normalizeClass, renderSlot, Fragment, createBlock, createCommentVNode, createElementVNode, toDisplayString } from 'vue';
 
 var script = {
     name: 'Button',
@@ -34,7 +35,7 @@ var script = {
         },
         loadingIcon: {
             type: String,
-            default: 'pi pi-spinner pi-spin'
+            default: undefined
         },
         link: {
             type: Boolean,
@@ -74,11 +75,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 +94,6 @@ var script = {
         },
         iconStyleClass() {
             return [
-                this.loading ? 'p-button-loading-icon ' + this.loadingIcon : this.icon,
                 'p-button-icon',
                 this.iconClass,
                 {
@@ -104,6 +104,9 @@ var script = {
                 }
             ];
         },
+        loadingIconStyleClass() {
+            return ['p-button-loading-icon pi-spin', this.iconStyleClass];
+        },
         badgeStyleClass() {
             return [
                 'p-badge p-component',
@@ -118,8 +121,14 @@ 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
     }
@@ -129,6 +138,7 @@ 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", {
@@ -137,27 +147,45 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     "aria-label": $options.defaultAriaLabel,
     disabled: $options.disabled
   }, [
-    renderSlot(_ctx.$slots, "default", {}, () => [
-      ($props.loading && !$props.icon)
-        ? (openBlock(), createElementBlock("span", {
-            key: 0,
-            class: normalizeClass($options.iconStyleClass)
-          }, null, 2))
-        : createCommentVNode("", true),
-      ($props.icon)
-        ? (openBlock(), createElementBlock("span", {
-            key: 1,
-            class: normalizeClass($options.iconStyleClass)
-          }, 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)
-    ])
+    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)), [
     [_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/icons/spinner";import l from"primevue/ripple";import{resolveComponent as n,resolveDirective as e,withDirectives as i,openBlock as s,createElementBlock as o,normalizeClass as a,renderSlot as d,Fragment as p,createBlock as u,createCommentVNode as r,createElementVNode as b,toDisplayString as c}from"vue";var h={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:t},directives:{ripple:l}};const g=["aria-label","disabled"],y={class:"p-button-label"};h.render=function(t,l,h,f,S,m){const C=n("SpinnerIcon"),I=e("ripple");return i((s(),o("button",{class:a(m.buttonClass),type:"button","aria-label":m.defaultAriaLabel,disabled:m.disabled},[d(t.$slots,"default"),t.$slots.default?r("",!0):(s(),o(p,{key:0},[h.loading?d(t.$slots,"loadingicon",{key:0,class:a(m.loadingIconStyleClass)},(()=>[h.loadingIcon?(s(),o("span",{key:0,class:a([m.loadingIconStyleClass,h.loadingIcon])},null,2)):(s(),u(C,{key:1,class:a(m.loadingIconStyleClass),spin:""},null,8,["class"]))])):d(t.$slots,"icon",{key:1,class:a(m.iconStyleClass)},(()=>[h.icon?(s(),o("span",{key:0,class:a([m.iconStyleClass,h.icon])},null,2)):r("",!0)])),b("span",y,c(h.label||" "),1),h.badge?(s(),o("span",{key:2,class:a(m.badgeStyleClass)},c(h.badge),3)):r("",!0)],64))],10,g)),[[I]])};export{h as default};