Refactor #3832 Refactor #3833 - For Button

api-generator/components/button.js

@@ -97,10 +97,25 @@ const ButtonProps = [
     }
 ];
 
+const ButtonEvents = [];
+
+const ButtonSlots = [
+    {
+        name: 'icon',
+        description: 'Custom icon template.'
+    },
+    {
+        name: 'loadingicon',
+        description: 'Custom loading icon template.'
+    }
+];
+
 module.exports = {
     button: {
         name: 'Button',
         description: 'Button is an extension to standard button element with icons and theming.',
-        props: ButtonProps
+        props: ButtonProps,
+        events: ButtonEvents,
+        slots: ButtonSlots
     }
 };

components/lib/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[];
 }
 
 /**

components/lib/button/Button.vue

@@ -1,15 +1,21 @@
 <template>
     <button v-ripple :class="buttonClass" type="button" :aria-label="defaultAriaLabel" :disabled="disabled">
-        <slot>
+        <slot></slot>
-            <span v-if="loading && !icon" :class="iconStyleClass"></span>
+        <template v-if="!$slots.default">
-            <span v-if="icon" :class="iconStyleClass"></span>
+            <slot v-if="loading" name="loadingicon" :class="iconStyleClass">
+                <component :is="loadingIcon ? 'span' : 'SpinnerIcon'" :class="iconStyleClass" spin />
+            </slot>
+            <slot v-else name="icon" :class="iconStyleClass">
+                <span v-if="icon" :class="iconStyleClass"></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/icon/spinner';
 import Ripple from 'primevue/ripple';
 
 export default {
@@ -45,7 +51,7 @@ export default {
         },
         loadingIcon: {
             type: String,
-            default: 'pi pi-spinner pi-spin'
+            default: undefined
         },
         link: {
             type: Boolean,
@@ -85,11 +91,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 +110,7 @@ export default {
         },
         iconStyleClass() {
             return [
-                this.loading ? 'p-button-loading-icon ' + this.loadingIcon : this.icon,
+                this.loading ? 'p-button-loading-icon ' + (this.loadingIcon || '') : this.icon,
                 'p-button-icon',
                 this.iconClass,
                 {
@@ -129,8 +135,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
     }