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

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

src/runtime/components/elements/Badge.vue

@@ -10,6 +10,7 @@ import type { PropType } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig } from '../../utils'
+import { useInjectButtonGroup } from '../../composables/useButtonGroup'
 import type { BadgeColor, BadgeSize, BadgeVariant, Strategy } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'
@@ -60,14 +61,16 @@ export default defineComponent({
   setup (props) {
     const { ui, attrs } = useUI('badge', toRef(props, 'ui'), config)
 
+    const { size, rounded } = useInjectButtonGroup({ ui, props })
+
     const badgeClass = computed(() => {
       const variant = ui.value.color?.[props.color as string]?.[props.variant as string] || ui.value.variant[props.variant]
 
       return twMerge(twJoin(
         ui.value.base,
         ui.value.font,
-        ui.value.rounded,
-        ui.value.size[props.size],
+        rounded.value,
+        ui.value.size[size.value],
         variant?.replaceAll('{color}', props.color)
       ), props.class)
     })

src/runtime/components/elements/Button.vue

@@ -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'
       )
     })

src/runtime/components/elements/ButtonGroup.ts

@@ -1,8 +1,9 @@
-import { h, cloneVNode, computed, toRef, defineComponent } from 'vue'
+import { h, computed, toRef, defineComponent } from 'vue'
 import type { PropType } from 'vue'
 import { twMerge, twJoin } from 'tailwind-merge'
 import { useUI } from '../../composables/useUI'
 import { mergeConfig, getSlotsChildren } from '../../utils'
+import { useProvideButtonGroup } from '../../composables/useButtonGroup'
 import type { ButtonSize, Strategy } from '../../types'
 // @ts-expect-error
 import appConfig from '#build/app.config'
@@ -12,6 +13,7 @@ const buttonConfig = mergeConfig<typeof button>(appConfig.ui.strategy, appConfig
 const buttonGroupConfig = mergeConfig<typeof buttonGroup>(appConfig.ui.strategy, appConfig.ui.buttonGroup, buttonGroup)
 
 export default defineComponent({
+  name: 'ButtonGroup',
   inheritAttrs: false,
   props: {
     size: {
@@ -42,43 +44,6 @@ export default defineComponent({
 
     const children = computed(() => getSlotsChildren(slots))
 
-    const rounded = computed(() => {
-      const roundedMap = {
-        'rounded-none': { horizontal: { left: 'rounded-s-none', right: 'rounded-e-none' }, vertical: { top: 'rounded-t-none', bottom: 'rounded-b-none' } },
-        'rounded-sm': { horizontal: { left: 'rounded-s-sm', right: 'rounded-e-sm' }, vertical: { top: 'rounded-t-sm', bottom: 'rounded-b-sm' } },
-        rounded: { horizontal: { left: 'rounded-s', right: 'rounded-e' }, vertical: { top: 'rounded-t', bottom: 'rounded-b' } },
-        'rounded-md': { horizontal: { left: 'rounded-s-md', right: 'rounded-e-md' }, vertical: { top: 'rounded-t-md', bottom: 'rounded-b-md' } },
-        'rounded-lg': { horizontal: { left: 'rounded-s-lg', right: 'rounded-e-lg' }, vertical: { top: 'rounded-t-lg', bottom: 'rounded-b-lg' } },
-        'rounded-xl': { horizontal: { left: 'rounded-s-xl', right: 'rounded-e-xl' }, vertical: { top: 'rounded-t-xl', bottom: 'rounded-b-xl' } },
-        'rounded-2xl': { horizontal: { left: 'rounded-s-2xl', right: 'rounded-e-2xl' }, vertical: { top: 'rounded-t-2xl', bottom: 'rounded-b-2xl' } },
-        'rounded-3xl': { horizontal: { left: 'rounded-s-3xl', right: 'rounded-e-3xl' }, vertical: { top: 'rounded-t-3xl', bottom: 'rounded-b-3xl' } },
-        'rounded-full': { horizontal: { left: 'rounded-s-full', right: 'rounded-e-full' }, vertical: { top: 'rounded-t-full', bottom: 'rounded-b-full' } }
-      }
-      return roundedMap[ui.value.rounded][props.orientation]
-    })
-
-    const clones = computed(() => children.value.map((node, index) => {
-      const vProps: any = {}
-
-      if (props.size) {
-        vProps.size = props.size
-      }
-
-      vProps.ui = node.props?.ui || {}
-      vProps.ui.rounded = 'rounded-none'
-      vProps.ui.base = '!shadow-none'
-
-      if (index === 0) {
-        vProps.ui.rounded += ` ${rounded.value.left || rounded.value.top}`
-      }
-
-      if (index === children.value.length - 1) {
-        vProps.ui.rounded += ` ${rounded.value.right || rounded.value.bottom}`
-      }
-
-      return cloneVNode(node, vProps)
-    }))
-
     const wrapperClass = computed(() => {
       return twMerge(twJoin(
         ui.value.wrapper[props.orientation],
@@ -87,6 +52,23 @@ export default defineComponent({
       ), props.class)
     })
 
-    return () => h('div', { class: wrapperClass.value, ...attrs.value }, clones.value)
+    const rounded = computed(() => {
+      const roundedMap = {
+        'rounded-none': { horizontal: { start: 'rounded-s-none', end: 'rounded-e-none' }, vertical: { start: 'rounded-t-none', end: 'rounded-b-none' } },
+        'rounded-sm': { horizontal: { start: 'rounded-s-sm', end: 'rounded-e-sm' }, vertical: { start: 'rounded-t-sm', end: 'rounded-b-sm' } },
+        rounded: { horizontal: { start: 'rounded-s', end: 'rounded-e' }, vertical: { start: 'rounded-t', end: 'rounded-b' } },
+        'rounded-md': { horizontal: { start: 'rounded-s-md', end: 'rounded-e-md' }, vertical: { start: 'rounded-t-md', end: 'rounded-b-md' } },
+        'rounded-lg': { horizontal: { start: 'rounded-s-lg', end: 'rounded-e-lg' }, vertical: { start: 'rounded-t-lg', end: 'rounded-b-lg' } },
+        'rounded-xl': { horizontal: { start: 'rounded-s-xl', end: 'rounded-e-xl' }, vertical: { start: 'rounded-t-xl', end: 'rounded-b-xl' } },
+        'rounded-2xl': { horizontal: { start: 'rounded-s-2xl', end: 'rounded-e-2xl' }, vertical: { start: 'rounded-t-2xl', end: 'rounded-b-2xl' } },
+        'rounded-3xl': { horizontal: { start: 'rounded-s-3xl', end: 'rounded-e-3xl' }, vertical: { start: 'rounded-t-3xl', end: 'rounded-b-3xl' } },
+        'rounded-full': { horizontal: { start: 'rounded-s-full', end: 'rounded-e-full' }, vertical: { start: 'rounded-t-full', end: 'rounded-b-full' } }
+      }
+      return roundedMap[ui.value.rounded][props.orientation]
+    })
+
+    useProvideButtonGroup({ orientation: toRef(props, 'orientation'), size: toRef(props, 'size'), ui, rounded })
+
+    return () => h('div', { class: wrapperClass.value, ...attrs.value }, children.value)
   }
 })