fix(ui): Splittitle and IconOnly for splitside of split button

This commit is contained in:
ArneBo 2025-01-25 16:31:31 +01:00
parent 5f1c28e588
commit 5a87995c36
1 changed files with 15 additions and 3 deletions

View File

@ -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>