feat: add loading implentation for button in vue 2

oruga-ui · Jan 19, 2023 · 83955df · 83955df
1 parent 695aeaa
commit 83955df
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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",