From ead74b07c3f37d46fa4b9d9749fcfeb4d588728d Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Fri, 16 Apr 2021 10:55:07 +0300
Subject: [PATCH] Fixed #1160 - [Feature-Request] Add "loading" prop to Buttons

---
 src/components/button/Button.d.ts |  2 ++
 src/components/button/Button.vue  | 11 +++++-
 src/views/button/ButtonDemo.vue   | 17 +++++++++
 src/views/button/ButtonDoc.vue    | 58 +++++++++++++++++++++++++++++--
 4 files changed, 84 insertions(+), 4 deletions(-)

diff --git a/src/components/button/Button.d.ts b/src/components/button/Button.d.ts
index d82fed5c2..621ad1694 100755
--- a/src/components/button/Button.d.ts
+++ b/src/components/button/Button.d.ts
@@ -4,6 +4,8 @@ interface ButtonProps {
     iconPos?: string;
     badge?: string;
     badgeClass?: string;
+    loading?: boolean;
+    loadingIcon?: string;
 }
 
 declare class Button {
diff --git a/src/components/button/Button.vue b/src/components/button/Button.vue
index bb9b8ed66..3c7588e21 100755
--- a/src/components/button/Button.vue
+++ b/src/components/button/Button.vue
@@ -1,6 +1,7 @@
 <template>
     <button :class="buttonClass" type="button" v-ripple>
         <slot>
+            <span v-if="loading && !icon" :class="iconClass"></span>
             <span v-if="icon" :class="iconClass"></span>
             <span class="p-button-label">{{label||'&nbsp;'}}</span>
             <span v-if="badge" :class="badgeStyleClass">{{badge}}</span>
@@ -29,6 +30,14 @@ export default {
         badgeClass: {
             type: String,
             default: null
+        },
+        loading: {
+            type: Boolean,
+            default: false
+        },
+        loadingIcon: {
+            type: String,
+            default: 'pi pi-spinner pi-spin'
         }
     },
     computed: {
@@ -42,7 +51,7 @@ export default {
         },
         iconClass() {
             return [
-                this.icon,
+                this.loading ? this.loadingIcon : this.icon,
                 'p-button-icon',
                 {
                     'p-button-icon-left': this.iconPos === 'left' && this.label,
diff --git a/src/views/button/ButtonDemo.vue b/src/views/button/ButtonDemo.vue
index f720b935d..63938aa0b 100755
--- a/src/views/button/ButtonDemo.vue
+++ b/src/views/button/ButtonDemo.vue
@@ -108,6 +108,12 @@
                 <Button type="button" label="Emails" badge="8" />
                 <Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" />
 
+                <h5>Loading</h5>
+                <Button type="button" label="Search" icon="pi pi-search" :loading="loading[0]" @click="load(0)" />
+                <Button type="button" label="Search" icon="pi pi-search" iconPos="right" :loading="loading[1]" @click="load(1)"  />
+                <Button type="button" icon="pi pi-search" :loading="loading[2]" @click="load(2)" />
+                <Button type="button" label="Search" :loading="loading[3]" @click="load(3)" />
+
                 <h5>Templating</h5>
                 <Button type="button" class="p-px-3">
                     <img alt="logo" src="../../assets/images/logo-white.svg" style="width: 1.5rem"/>
@@ -141,6 +147,17 @@
 import ButtonDoc from './ButtonDoc'
 
 export default {
+    data() {
+        return {
+            loading: [false, false, false]
+        }
+    },
+    methods: {
+        load(index) {
+            this.loading[index] = true;
+            setTimeout(() => this.loading.value[index] = false, 10000);
+        }
+    },
 	components: {
 		'ButtonDoc': ButtonDoc
     }
diff --git a/src/views/button/ButtonDoc.vue b/src/views/button/ButtonDoc.vue
index 7f9941b2d..645ed17de 100755
--- a/src/views/button/ButtonDoc.vue
+++ b/src/views/button/ButtonDoc.vue
@@ -117,6 +117,13 @@ import Button from 'primevue/button';
 &lt;Button label="Normal" icon="pi pi-check" class="p-button"  /&gt;
 &lt;Button label="Large" icon="pi pi-check" class="p-button-lg" /&gt;
 
+</code></pre>
+
+        <h5>Loading State</h5>
+        <p>Button displays a <i>loadingIcon</i> when <i>loading</i> property is enabled.</p>
+<pre v-code><code>
+&lt;Button label="Save" icon="pi pi-check" :loading="isLoading" /&gt;
+
 </code></pre>
 
         <h5>Templating</h5>
@@ -175,6 +182,18 @@ import Button from 'primevue/button';
                         <td>string</td>
                         <td>null</td>
                         <td>Style class of the badge.</td>
+                    </tr>
+                    <tr>
+                        <td>loading</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Whether the button is in loading state.</td>
+                    </tr>
+                    <tr>
+                        <td>loadingIcon</td>
+                        <td>string</td>
+                        <td>pi pi-spinner pi-spin</td>
+                        <td>Icon to display in loading state.</td>
                     </tr>
 				</tbody>
 			</table>
@@ -328,8 +347,14 @@ export default {
         <Button type="button" label="Emails" badge="8" />
         <Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" />
 
+        <h5>Loading</h5>
+        <Button type="button" label="Search" icon="pi pi-search" :loading="loading[0]" @click="load(0)" />
+        <Button type="button" label="Search" icon="pi pi-search" iconPos="right" :loading="loading[1]" @click="load(1)"  />
+        <Button type="button" icon="pi pi-search" :loading="loading[2]" @click="load(2)" />
+        <Button type="button" label="Search" :loading="loading[3]" @click="load(3)" />
+
         <h5>Templating</h5>
-       <Button type="button" class="p-px-3">
+        <Button type="button" class="p-px-3">
             <img alt="logo" src="../../assets/images/logo-white.svg" style="width: 1.5rem"/>
         </Button>
         <Button type="button" class="p-button-outlined p-button-success">
@@ -355,6 +380,17 @@ export default {
 
 <script>
 export default {
+    data() {
+        return {
+            loading: [false, false, false]
+        }
+    },
+    methods: {
+        load(index) {
+            this.loading[index] = true;
+            setTimeout(() => this.loading[index] = false, 10000);
+        }
+    }
 }
 <\\/script>
 
@@ -501,6 +537,12 @@ export default {
         <Button type="button" label="Emails" badge="8" />
         <Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" />
 
+        <h5>Loading</h5>
+        <Button type="button" label="Search" icon="pi pi-search" :loading="loading[0]" @click="load(0)" />
+        <Button type="button" label="Search" icon="pi pi-search" iconPos="right" :loading="loading[1]" @click="load(1)"  />
+        <Button type="button" icon="pi pi-search" :loading="loading[2]" @click="load(2)" />
+        <Button type="button" label="Search" :loading="loading[3]" @click="load(3)" />
+
         <h5>Templating</h5>
         <Button type="button" class="p-px-3">
             <img alt="logo" src="../../assets/images/logo-white.svg" style="width: 1.5rem"/>
@@ -527,9 +569,19 @@ export default {
 </template>
 
 <script>
-import { defineComponent } from "vue";
+import { ref } from 'vue';
 
-export default defineComponent({});
+export default({
+    setup() {
+        const loading = ref([false, false, false]);
+        const load = (index) => {
+            loading.value[index] = true;
+            setTimeout(() => loading.value[index] = false, 1000);
+        }
+
+        return {loading, load};
+    }
+});
 <\\/script>
 
 <style lang="scss" scoped>