arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-19 14:31:47 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(ButtonGroup): add orientation prop (#603)

Browse Source 
Co-authored-by: Benjamin Canac <canacb1@gmail.com>
This commit is contained in:
Eduard Aymerich
2023-09-06 17:41:31 +02:00
committed by Benjamin Canac
parent e04c212d0d
commit b3bc6e2e9e
3 changed files with 35 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -20,6 +20,13 @@ export default defineComponent({
return Object.keys(appConfig.ui.button.size).includes(value)
}
},
orientation: {
type: String as PropType<'horizontal' | 'vertical'>,
default: 'horizontal',
validator (value: string) {
return ['horizontal', 'vertical'].includes(value)
}
},
ui: {
type: Object as PropType<Partial<typeof appConfig.ui.buttonGroup>>,
default: () => ({})
@@ -33,21 +40,30 @@ export default defineComponent({
const children = computed(() => getSlotsChildren(slots))
const rounded = computed(() => ({
'rounded-none': { left: 'rounded-s-none', right: 'rounded-e-none' },
'rounded-sm': { left: 'rounded-s-sm', right: 'rounded-e-sm' },
rounded: { left: 'rounded-s', right: 'rounded-e' },
'rounded-md': { left: 'rounded-s-md', right: 'rounded-e-md' },
'rounded-lg': { left: 'rounded-s-lg', right: 'rounded-e-lg' },
'rounded-xl': { left: 'rounded-s-xl', right: 'rounded-e-xl' },
'rounded-2xl': { left: 'rounded-s-2xl', right: 'rounded-e-2xl' },
'rounded-3xl': { left: 'rounded-s-3xl', right: 'rounded-e-3xl' },
'rounded-full': { left: 'rounded-s-full', right: 'rounded-e-full' }
}[ui.value.rounded]))
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.orientation === 'vertical') {
ui.value.wrapper = 'flex flex-col -space-y-px'
} else {
ui.value.wrapper = 'inline-flex -space-x-px'
}
if (props.size) {
vProps.size = props.size
}
@@ -57,11 +73,11 @@ export default defineComponent({
vProps.ui.base = '!shadow-none'
if (index === 0) {
vProps.ui.rounded += ` ${rounded.value.left}`
vProps.ui.rounded += ` ${rounded.value.left || rounded.value.top}`
}
if (index === children.value.length - 1) {
vProps.ui.rounded += ` ${rounded.value.right}`
vProps.ui.rounded += ` ${rounded.value.right || rounded.value.bottom}`
}
return cloneVNode(node, vProps)