arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-20 15:01:46 +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

60
src/runtime/components/elements/ButtonGroup.ts
View File

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