From 83955dfbdf2004ef4c3d4336e9d77e2415ce90d2 Mon Sep 17 00:00:00 2001
From: Andrea Stagi <stagi.andrea@gmail.com>
Date: Fri, 20 Jan 2023 00:16:39 +0100
Subject: [PATCH] feat: add loading implentation for button in vue 2

---
 packages/docs/components/Button.md                 | 9 +++++++++
 packages/oruga/src/components/button/Button.vue    | 6 ++++++
 packages/oruga/src/components/button/Inspector.vue | 8 ++++++++
 3 files changed, 23 insertions(+)

diff --git a/packages/docs/components/Button.md b/packages/docs/components/Button.md
index 0f44aef9b..394b3f8e3 100644
--- a/packages/docs/components/Button.md
+++ b/packages/docs/components/Button.md
@@ -191,6 +191,14 @@ export default {
                         cmp.data.outlined = true;
                     },
                 },
+                {
+                    class: "loadingClass",
+                    description: "Class of the button loading",
+                    properties: ["loading"],
+                    action: (cmp) => {
+                        cmp.data.loading = true;
+                    },
+                },
                 {
                     class: "invertedClass",
                     description: "Class of the button when inverted",
@@ -298,6 +306,7 @@ export default {
 | iconRight  | Icon name to show on the right           | string  | -                                                                               |                                                                                                                                      |
 | inverted   |                                          | boolean | -                                                                               |                                                                                                                                      |
 | label      | Button label, optional when default slot | string  | -                                                                               |                                                                                                                                      |
+| loading    | Loading style                            | boolean | -                                                                               |                                                                                                                                      |
 | nativeType | Button type, like native                 | string  | -                                                                               | 'button'                                                                                                                             |
 | outlined   | Outlined style                           | boolean | -                                                                               |                                                                                                                                      |
 | override   | Override classes                         | boolean | -                                                                               | false                                                                                                                                |
diff --git a/packages/oruga/src/components/button/Button.vue b/packages/oruga/src/components/button/Button.vue
index eb665176f..e1d993c08 100644
--- a/packages/oruga/src/components/button/Button.vue
+++ b/packages/oruga/src/components/button/Button.vue
@@ -89,6 +89,10 @@ export default {
             type: Boolean,
             default: () => { return getValueByPath(getOptions(), 'button.rounded', false) }
         },
+        /**
+         * Loading style
+         */
+         loading: Boolean,
         /**
          * Outlined style
          */
@@ -129,6 +133,7 @@ export default {
         elementsWrapperClass: [String, Function, Array],
         rootClass: [String, Function, Array],
         outlinedClass: [String, Function, Array],
+        loadingClass: [String, Function, Array],
         invertedClass: [String, Function, Array],
         expandedClass: [String, Function, Array],
         roundedClass: [String, Function, Array],
@@ -153,6 +158,7 @@ export default {
                 { [this.computedClass('expandedClass', 'o-btn--expanded')]: this.expanded },
                 { [this.computedClass('roundedClass', 'o-btn--rounded')]: this.rounded },
                 { [this.computedClass('disabledClass', 'o-btn--disabled')]: this.disabled },
+                { [this.computedClass('loadingClass', 'o-btn--loading')]: this.loading },
             ]
         },
         labelClasses() {
diff --git a/packages/oruga/src/components/button/Inspector.vue b/packages/oruga/src/components/button/Inspector.vue
index 72bb24592..ad59faea1 100644
--- a/packages/oruga/src/components/button/Inspector.vue
+++ b/packages/oruga/src/components/button/Inspector.vue
@@ -28,6 +28,14 @@ export default {
                         cmp.data.outlined = true;
                     },
                 },
+                {
+                    class: "loadingClass",
+                    description: "Class of the button loading",
+                    properties: ["loading"],
+                    action: (cmp) => {
+                        cmp.data.loading = true;
+                    },
+                },
                 {
                     class: "invertedClass",
                     description: "Class of the button when inverted",