arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-21 23:40:39 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix(ButtonGroup): handle components with children (#999)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Conner Blanton
2023-11-20 12:38:05 -06:00
committed by GitHub
parent c9b9bd6fb9
commit f4be95dcf5
7 changed files with 130 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/runtime/components/elements/Button.vue
View File

@@ -24,6 +24,7 @@ import UIcon from '../elements/Icon.vue'
import ULink from '../elements/Link.vue'
import { useUI } from '../../composables/useUI'
import { mergeConfig } from '../../utils'
import { useInjectButtonGroup } from '../../composables/useButtonGroup'
import type { ButtonColor, ButtonSize, ButtonVariant, Strategy } from '../../types'
// @ts-expect-error
import appConfig from '#build/app.config'
@@ -130,6 +131,8 @@ export default defineComponent({
setup (props, { slots }) {
const { ui, attrs } = useUI('button', toRef(props, 'ui'), config)
const { size, rounded } = useInjectButtonGroup({ ui, props })
const isLeading = computed(() => {
return (props.icon && props.leading) || (props.icon && !props.trailing) || (props.loading && !props.trailing) || props.leadingIcon
})
@@ -146,10 +149,10 @@ export default defineComponent({
return twMerge(twJoin(
ui.value.base,
ui.value.font,
ui.value.rounded,
ui.value.size[props.size],
ui.value.gap[props.size],
props.padded && ui.value[isSquare.value ? 'square' : 'padding'][props.size],
rounded.value,
ui.value.size[size.value],
ui.value.gap[size.value],
props.padded && ui.value[isSquare.value ? 'square' : 'padding'][size.value],
variant?.replaceAll('{color}', props.color),
props.block ? 'w-full flex justify-center items-center' : 'inline-flex items-center'
), props.class)
@@ -174,7 +177,7 @@ export default defineComponent({
const leadingIconClass = computed(() => {
return twJoin(
ui.value.icon.base,
ui.value.icon.size[props.size],
ui.value.icon.size[size.value],
props.loading && 'animate-spin'
)
})
@@ -182,7 +185,7 @@ export default defineComponent({
const trailingIconClass = computed(() => {
return twJoin(
ui.value.icon.base,
ui.value.icon.size[props.size],
ui.value.icon.size[size.value],
props.loading && !isLeading.value && 'animate-spin'
)
})