From 5a87995c368761f80ef65e30e10dc52f8dd8ee45 Mon Sep 17 00:00:00 2001
From: ArneBo <arne@ecobasa.org>
Date: Sat, 25 Jan 2025 16:31:31 +0100
Subject: [PATCH] fix(ui): Splittitle and IconOnly for splitside of split
 button

---
 front/src/components/ui/Button.vue | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/front/src/components/ui/Button.vue b/front/src/components/ui/Button.vue
index 954dc2fe8..09f0e6033 100644
--- a/front/src/components/ui/Button.vue
+++ b/front/src/components/ui/Button.vue
@@ -38,6 +38,7 @@ const props = defineProps<{
 
 const slots = useSlots()
 const isIconOnly = computed(() => !!props.icon && !slots.default)
+const isSplitIconOnly = computed(() => !!props.splitIcon && !props.splitTitle)
 
 const internalLoader = ref(false)
 const isLoading = computed(() => props.isLoading || internalLoader.value)
@@ -99,14 +100,25 @@ onMounted(() => {
     v-bind="{
       ...$attrs,
       ...color(props, ['interactive'])(
-         width(props, ['square'])(
+         width(props, isSplitIconOnly ? ['square'] : ['normalHeight', 'buttonWidth'])(
          align(props, { alignSelf:'start', alignText:'center' })(
     )))}"
     :disabled="disabled || undefined"
-    :class="['funkwhale', 'button', {'split-toggle': !dropdownOnly}]"
-    :title="splitTitle"
+    :class="[
+      'funkwhale',
+      'button',
+      {
+        'split-toggle': !dropdownOnly,
+        'is-loading': isLoading,
+        'is-icon-only': isSplitIconOnly,
+        'has-icon': !!splitIcon,
+        'is-round': round,
+        'is-shadow': shadow
+      }
+    ]"
     @click="onSplitClick"
   >
+    <span v-if="splitTitle">{{ splitTitle }}</span>
     <i :class="['bi', splitIcon]" />
   </button>
 </div>