From c8b8d3653b140472172737ec275d6444054b2ada Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Albin=20M=C3=A9doc?= <albinmedoc99@gmail.com>
Date: Wed, 24 Jul 2024 11:13:31 +0200
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=8A=20Make=20DefaultButton=20c?=
 =?UTF-8?q?enter=20icon=20(#462)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/Buttons/DefaultButton.vue      | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/apps/wizarr-frontend/src/components/Buttons/DefaultButton.vue b/apps/wizarr-frontend/src/components/Buttons/DefaultButton.vue
index 28d977b56..829620d5c 100644
--- a/apps/wizarr-frontend/src/components/Buttons/DefaultButton.vue
+++ b/apps/wizarr-frontend/src/components/Buttons/DefaultButton.vue
@@ -17,10 +17,10 @@
             <DefaultLoading icon_size="md"></DefaultLoading>
         </span>
         <span :class="{ 'opacity-0': loading }">
-            <i v-if="icon && options.icon.icon_position === 'left'" :class="icon + ' ' + (options.icon?.icon_class ?? '') + ' mr-2'"></i>
+            <i v-if="icon && options.icon.icon_position === 'left'" :class="icon_classes"></i>
             <slot v-if="slotAvailable"></slot>
             <span v-else>{{ buttonText }}{{ label }}</span>
-            <i v-if="icon && options.icon.icon_position === 'right'" :class="icon + ' ' + (options.icon?.icon_class ?? '') + ' ml-2'"></i>
+            <i v-if="icon && options.icon.icon_position === 'right'" :class="icon_classes"></i>
         </span>
     </button>
     <!-- </template> -->
@@ -107,6 +107,17 @@ export default defineComponent({
             // Return classes as string
             return classes.join(" ");
         },
+        icon_classes() {
+            const classes = [this.icon, this.options.icon?.icon_class ?? ""];
+            if (this.slotAvailable || this.buttonText || this.label) {
+                if (this.options.icon.icon_position === "left") {
+                    classes.push("mr-2");
+                } else {
+                    classes.push("ml-2");
+                }
+            }
+            return classes.join(" ");
+        },
         slotAvailable() {
             return this.$slots.default !== undefined;
         },