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

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

docs/components/content/ComponentCard.vue

@@ -11,7 +11,7 @@
           class="justify-center"
         />
         <USelectMenu
-          v-else-if="prop.type === 'string' && prop.options.length && prop.name !== 'label'"
+          v-else-if="prop.options.length && prop.name !== 'label'"
           v-model="componentProps[prop.name]"
           :options="prop.options"
           :name="`prop-${prop.name}`"

docs/content/2.elements/5.button.md

@@ -276,12 +276,14 @@ excludedProps:
 To stack buttons as a group, use the `ButtonGroup` component.
 
 - To size all the buttons equally, pass the `size` prop
+- To change the orientation of the buttons, set the `orientation` prop to `vertical`
 - To adjust the rounded or the shadow around buttons, customize with `ui.buttonGroup.rounded` or `ui.buttonGroup.shadow`
 
 ::component-card{slug="ButtonGroup"}
 ---
 props:
   size: 'sm'
+  orientation: 'horizontal'
 ui:
   size:
     2xs: ''
@@ -290,6 +292,9 @@ ui:
     md: ''
     lg: ''
     xl: ''
+  orientation:
+    horizontal: ''
+    vertical: ''
 code: |
   <UButton label="Action" color="white" />
     <UButton icon="i-heroicons-chevron-down-20-solid" color="gray" />

src/runtime/components/elements/ButtonGroup.ts

@@ -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(() => ({
+    const rounded = computed(() => {
-      'rounded-none': { left: 'rounded-s-none', right: 'rounded-e-none' },
+      const roundedMap = {
-      'rounded-sm': { left: 'rounded-s-sm', right: 'rounded-e-sm' },
+        'rounded-none': { horizontal: { left: 'rounded-s-none', right: 'rounded-e-none' }, vertical: { top: 'rounded-t-none', bottom: 'rounded-b-none' } },
-      rounded: { left: 'rounded-s', right: 'rounded-e' },
+        'rounded-sm': { horizontal: { left: 'rounded-s-sm', right: 'rounded-e-sm' }, vertical: { top: 'rounded-t-sm', bottom: 'rounded-b-sm' } },
-      'rounded-md': { left: 'rounded-s-md', right: 'rounded-e-md' },
+        rounded: { horizontal: { left: 'rounded-s', right: 'rounded-e' }, vertical: { top: 'rounded-t', bottom: 'rounded-b' } },
-      'rounded-lg': { left: 'rounded-s-lg', right: 'rounded-e-lg' },
+        'rounded-md': { horizontal: { left: 'rounded-s-md', right: 'rounded-e-md' }, vertical: { top: 'rounded-t-md', bottom: 'rounded-b-md' } },
-      'rounded-xl': { left: 'rounded-s-xl', right: 'rounded-e-xl' },
+        'rounded-lg': { horizontal: { left: 'rounded-s-lg', right: 'rounded-e-lg' }, vertical: { top: 'rounded-t-lg', bottom: 'rounded-b-lg' } },
-      'rounded-2xl': { left: 'rounded-s-2xl', right: 'rounded-e-2xl' },
+        'rounded-xl': { horizontal: { left: 'rounded-s-xl', right: 'rounded-e-xl' }, vertical: { top: 'rounded-t-xl', bottom: 'rounded-b-xl' } },
-      'rounded-3xl': { left: 'rounded-s-3xl', right: 'rounded-e-3xl' },
+        'rounded-2xl': { horizontal: { left: 'rounded-s-2xl', right: 'rounded-e-2xl' }, vertical: { top: 'rounded-t-2xl', bottom: 'rounded-b-2xl' } },
-      'rounded-full': { left: 'rounded-s-full', right: 'rounded-e-full' }
+        'rounded-3xl': { horizontal: { left: 'rounded-s-3xl', right: 'rounded-e-3xl' }, vertical: { top: 'rounded-t-3xl', bottom: 'rounded-b-3xl' } },
-    }[ui.value.rounded]))
+        '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)