feat: 🎊 Make DefaultButton center icon (#462)

wizarrrr · Jul 24, 2024 · c8b8d36 · c8b8d36
1 parent 9d3d0ad
commit c8b8d36
Showing 1 changed file with 13 additions and 2 deletions.
diff --git 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;
         },