feat(ButtonGroup): new component (#88)

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

test/components/ButtonGroup.spec.ts

@@ -0,0 +1,47 @@
+import { describe, it, expect } from 'vitest'
+import ButtonGroup, { type ButtonGroupProps, type ButtonGroupSlots } from '../../src/runtime/components/ButtonGroup.vue'
+import ComponentRender from '../component-render'
+import { UInput, UButton } from '#components'
+import buttonTheme from '#build/ui/button'
+
+describe('ButtonGroup', () => {
+  const sizes = Object.keys(buttonTheme.variants.size) as any
+
+  it.each([
+    // Props
+    ['with as', { props: { as: 'div' } }],
+    ['with class', { props: { class: '' } }],
+    ['with ui', { props: { ui: {} } }],
+    // Slots
+    ['with default slot', {
+      slots: {
+        default: {
+          components: { UInput, UButton },
+          template: `<UInput /> <UButton> Click me! </UButton>`
+        }
+      }
+    }],
+    ['orientation vertical with default slot', {
+      props: { orientation: 'vertical' },
+      slots: {
+        default: {
+          components: { UInput, UButton },
+          template: `<UInput /> <UButton> Click me! </UButton>`
+        }
+      }
+    }],
+    ...sizes.map((size: string) =>
+      [`with size ${size}`, { props: { size },
+        slots: {
+          default: {
+            components: { UInput, UButton },
+            template: `<UInput /> <UButton> Click me! </UButton>`
+          }
+        }
+      }]
+    )
+  ])('renders %s correctly', async (nameOrHtml: string, options: { props?: ButtonGroupProps, slots?: Partial<ButtonGroupSlots> }) => {
+    const html = await ComponentRender(nameOrHtml, options, ButtonGroup)
+    expect(html).toMatchSnapshot()
+  })
+})