feat(ButtonGroup): new component (#88)

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

playground/app.vue

@@ -16,6 +16,7 @@ const components = [
   'badge',
   'breadcrumb',
   'button',
+  'button-group',
   'card',
   'checkbox',
   'chip',

playground/pages/button-group.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import theme from '#build/ui/button'
+
+const sizes = Object.keys(theme.variants.size)
+</script>
+
+<template>
+  <div class="flex flex-col gap-4 items-center">
+    <div class="flex flex-col gap-4 -ml-[70px]">
+      <UButtonGroup>
+        <UButton> Click me! </UButton>
+      </UButtonGroup>
+
+      <UButtonGroup>
+        <UInput />
+      </UButtonGroup>
+
+      <UButtonGroup>
+        <UButton> Click me! </UButton>
+        <UButton color="white">
+          Click me!
+        </UButton>
+        <UButton> Click me! </UButton>
+      </UButtonGroup>
+
+      <UButtonGroup orientation="vertical">
+        <UButton color="white">
+          Click me!
+        </UButton>
+        <UInput />
+      </UButtonGroup>
+
+      <UButtonGroup>
+        <UButton color="white">
+          Click me!
+        </UButton>
+        <UInput />
+      </UButtonGroup>
+
+      <UButtonGroup>
+        <UInput />
+        <UButton color="white">
+          Click me!
+        </UButton>
+      </UButtonGroup>
+    </div>
+
+    <div class="flex gap-4 items-center justify-center">
+      <UButtonGroup v-for="size in sizes" :key="size" :size="(size as any)">
+        <UInput />
+        <UButton color="white">
+          Click me!
+        </UButton>
+      </UButtonGroup>
+    </div>
+  </div>
+</template>

src/runtime/components/Button.vue

@@ -35,7 +35,7 @@ export interface ButtonSlots {
 import { computed } from 'vue'
 import { useForwardProps } from 'radix-vue'
 import { reactiveOmit } from '@vueuse/core'
-import { useComponentIcons } from '#imports'
+import { useComponentIcons, useButtonGroup } from '#imports'
 import { UIcon, UAvatar, ULink } from '#components'
 
 const props = defineProps<ButtonProps>()
@@ -43,19 +43,20 @@ const slots = defineSlots<ButtonSlots>()
 
 const linkProps = useForwardProps(reactiveOmit(props, 'type', 'label', 'color', 'variant', 'size', 'icon', 'leading', 'leadingIcon', 'trailing', 'trailingIcon', 'loading', 'loadingIcon', 'square', 'block', 'disabled', 'truncate', 'class', 'ui'))
 
-// const { size, rounded } = useInjectButtonGroup({ ui, props })
+const { orientation, size: buttonSize } = useButtonGroup<ButtonProps>(props)
 const { isLeading, isTrailing, leadingIconName, trailingIconName, avatarSize } = useComponentIcons<ButtonProps>(props)
 
 const ui = computed(() => tv({ extend: button, slots: props.ui })({
   color: props.color,
   variant: props.variant,
-  size: props.size,
+  size: buttonSize.value,
   loading: props.loading,
   truncate: props.truncate,
   block: props.block,
   square: props.square || (!slots.default && !props.label),
   leading: isLeading.value,
-  trailing: isTrailing.value
+  trailing: isTrailing.value,
+  buttonGroup: orientation.value
 }))
 </script>
 

src/runtime/components/ButtonGroup.vue

@@ -0,0 +1,49 @@
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { AppConfig } from '@nuxt/schema'
+import _appConfig from '#build/app.config'
+import theme from '#build/ui/button-group'
+import type { ButtonProps } from './Button.vue'
+
+const appConfig = _appConfig as AppConfig & { ui: { buttonGroup: Partial<typeof theme> } }
+
+const buttonGroup = tv({ extend: tv(theme), ...(appConfig.ui?.buttonGroup) })
+
+type ButtonGroupVariants = VariantProps<typeof buttonGroup>
+
+export interface ButtonGroupProps {
+  size?: ButtonProps['size']
+  orientation?: ButtonGroupVariants['orientation']
+  class?: any
+  ui?: Partial<typeof buttonGroup.slots>
+}
+
+export interface ButtonGroupSlots {
+  default(): any
+}
+</script>
+
+<script setup lang="ts">
+import { provide, computed } from 'vue'
+import { buttonGroupInjectionKey } from '#imports'
+
+const props = withDefaults(defineProps<ButtonGroupProps>(), {
+  orientation: 'horizontal'
+})
+defineSlots<ButtonGroupSlots>()
+
+const ui = computed(() => tv({ extend: buttonGroup, slots: props.ui })({
+  orientation: props.orientation
+}))
+
+provide(buttonGroupInjectionKey, computed(() => ({
+  orientation: props.orientation,
+  size: props.size
+})))
+</script>
+
+<template>
+  <div :class="ui.base({ class: props.class })">
+    <slot />
+  </div>
+</template>

src/runtime/components/Input.vue

@@ -45,7 +45,7 @@ export interface InputSlots {
 
 <script lang="ts" setup>
 import { ref, computed, onMounted } from 'vue'
-import { useComponentIcons, useFormField } from '#imports'
+import { useComponentIcons, useFormField, useButtonGroup } from '#imports'
 import { UIcon, UAvatar } from '#components'
 import { looseToNumber } from '#ui/utils'
 
@@ -60,20 +60,21 @@ const slots = defineSlots<InputSlots>()
 
 const [modelValue, modelModifiers] = defineModel<string | number>()
 
-const { emitFormBlur, emitFormInput, size, color, id, name, disabled } = useFormField<InputProps>(props)
+const { emitFormBlur, emitFormInput, size: formGroupSize, color, id, name, disabled } = useFormField<InputProps>(props)
+const { orientation, size: buttonGroupSize } = useButtonGroup<InputProps>(props)
 const { isLeading, isTrailing, leadingIconName, trailingIconName, avatarSize } = useComponentIcons<InputProps>(props)
-// const { size: sizeButtonGroup, rounded } = useInjectButtonGroup({ ui, props })
 
-// const size = computed(() => sizeButtonGroup.value || sizeFormGroup.value)
+const inputSize = computed(() => buttonGroupSize.value || formGroupSize.value)
 
 const ui = computed(() => tv({ extend: input, slots: props.ui })({
   type: props.type as InputVariants['type'],
   color: color.value,
   variant: props.variant,
-  size: size?.value,
+  size: inputSize?.value,
   loading: props.loading,
   leading: isLeading.value || !!slots.leading,
-  trailing: isTrailing.value || !!slots.trailing
+  trailing: isTrailing.value || !!slots.trailing,
+  buttonGroup: orientation.value
 }))
 
 const inputRef = ref<HTMLInputElement | null>(null)

src/runtime/composables/useButtonGroup.ts

@@ -0,0 +1,21 @@
+import { type InjectionKey, type ComputedRef } from 'vue'
+import { inject, computed } from 'vue'
+import type { GetObjectField } from '#ui/types/utils'
+import type { ButtonGroupProps } from '../components/ButtonGroup.vue'
+
+export const buttonGroupInjectionKey: InjectionKey<ComputedRef<{
+  size: ButtonGroupProps ['size']
+  orientation: ButtonGroupProps['orientation']
+}>> = Symbol('nuxt-ui.button-group')
+
+type Props<T> = {
+  size?: GetObjectField<T, 'size'>
+}
+
+export function useButtonGroup<T>(props: Props<T>) {
+  const buttonGroup = inject(buttonGroupInjectionKey, undefined)
+  return {
+    orientation: computed(() => buttonGroup?.value.orientation),
+    size: computed(() => props?.size ?? buttonGroup?.value.size)
+  }
+}

src/theme/button-group.ts

@@ -0,0 +1,32 @@
+export const buttonGroupVariant = {
+  buttonGroup: {
+    horizontal: 'not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none',
+    vertical: 'not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none'
+  }
+}
+
+export const buttonGroupVariantWithRoot = {
+  buttonGroup: {
+    horizontal: {
+      root: 'group',
+      base: 'group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none'
+    },
+    vertical: {
+      root: 'group',
+      base: 'group-not-only:group-first:rounded-b-none group-not-only:group-last:rounded-t-none group-not-last:group-not-first:rounded-none'
+    }
+  }
+}
+
+export default {
+  slots: {
+    base: 'relative'
+  },
+
+  variants: {
+    orientation: {
+      horizontal: 'inline-flex -space-x-px',
+      vertical: 'flex flex-col -space-y-px'
+    }
+  }
+}

src/theme/button.ts

@@ -1,3 +1,5 @@
+import { buttonGroupVariant } from './button-group'
+
 export default (config: { colors: string[] }) => ({
   slots: {
     base: 'rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75',
@@ -7,6 +9,7 @@ export default (config: { colors: string[] }) => ({
     trailingIcon: 'shrink-0'
   },
   variants: {
+    ...buttonGroupVariant,
     color: {
       ...Object.fromEntries(config.colors.map((color: string) => [color, ''])),
       white: '',

src/theme/index.ts

@@ -5,6 +5,7 @@ export { default as avatarGroup } from './avatar-group'
 export { default as badge } from './badge'
 export { default as breadcrumb } from './breadcrumb'
 export { default as button } from './button'
+export { default as buttonGroup } from './button-group'
 export { default as card } from './card'
 export { default as checkbox } from './checkbox'
 export { default as chip } from './chip'

src/theme/input.ts

@@ -1,3 +1,5 @@
+import { buttonGroupVariantWithRoot } from './button-group'
+
 export default (config: { colors: string[] }) => {
   return {
     slots: {
@@ -10,6 +12,7 @@ export default (config: { colors: string[] }) => {
       trailingIcon: 'shrink-0 text-gray-400 dark:text-gray-500'
     },
     variants: {
+      ...buttonGroupVariantWithRoot,
       size: {
         xs: {
           base: 'px-2 py-1 text-xs',

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()
+  })
+})

test/components/__snapshots__/ButtonGroup.spec.ts.snap

@@ -0,0 +1,91 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`ButtonGroup > renders orientation vertical with default slot correctly 1`] = `
+"<div class="relative flex flex-col -space-y-px">
+  <div class="relative group"><input type="text" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 group-not-only:group-first:rounded-b-none group-not-only:group-last:rounded-t-none group-not-last:group-not-first:rounded-none px-2.5 py-1.5 text-sm shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
+    <!--v-if-->
+    <!--v-if-->
+  </div> <button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 not-only:first:rounded-b-none not-only:last:rounded-t-none not-last:not-first:rounded-none px-2.5 py-1.5 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400">
+    <!--v-if--><span class=""> Click me! </span>
+    <!--v-if-->
+  </button>
+</div>"
+`;
+
+exports[`ButtonGroup > renders with as correctly 1`] = `"<div class="relative inline-flex -space-x-px" as="div"></div>"`;
+
+exports[`ButtonGroup > renders with class correctly 1`] = `"<div class="relative inline-flex -space-x-px"></div>"`;
+
+exports[`ButtonGroup > renders with default slot correctly 1`] = `
+"<div class="relative inline-flex -space-x-px">
+  <div class="relative group"><input type="text" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-2.5 py-1.5 text-sm shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
+    <!--v-if-->
+    <!--v-if-->
+  </div> <button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none px-2.5 py-1.5 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400">
+    <!--v-if--><span class=""> Click me! </span>
+    <!--v-if-->
+  </button>
+</div>"
+`;
+
+exports[`ButtonGroup > renders with size lg correctly 1`] = `
+"<div class="relative inline-flex -space-x-px">
+  <div class="relative group"><input type="text" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-3 py-2 text-sm shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
+    <!--v-if-->
+    <!--v-if-->
+  </div> <button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none px-3 py-2 text-sm gap-2 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400">
+    <!--v-if--><span class=""> Click me! </span>
+    <!--v-if-->
+  </button>
+</div>"
+`;
+
+exports[`ButtonGroup > renders with size md correctly 1`] = `
+"<div class="relative inline-flex -space-x-px">
+  <div class="relative group"><input type="text" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-2.5 py-1.5 text-sm shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
+    <!--v-if-->
+    <!--v-if-->
+  </div> <button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none px-2.5 py-1.5 text-sm gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400">
+    <!--v-if--><span class=""> Click me! </span>
+    <!--v-if-->
+  </button>
+</div>"
+`;
+
+exports[`ButtonGroup > renders with size sm correctly 1`] = `
+"<div class="relative inline-flex -space-x-px">
+  <div class="relative group"><input type="text" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-2.5 py-1.5 text-xs shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
+    <!--v-if-->
+    <!--v-if-->
+  </div> <button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none px-2.5 py-1.5 text-xs gap-1.5 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400">
+    <!--v-if--><span class=""> Click me! </span>
+    <!--v-if-->
+  </button>
+</div>"
+`;
+
+exports[`ButtonGroup > renders with size xl correctly 1`] = `
+"<div class="relative inline-flex -space-x-px">
+  <div class="relative group"><input type="text" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-3 py-2 text-base shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
+    <!--v-if-->
+    <!--v-if-->
+  </div> <button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none px-3 py-2 text-base gap-2 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400">
+    <!--v-if--><span class=""> Click me! </span>
+    <!--v-if-->
+  </button>
+</div>"
+`;
+
+exports[`ButtonGroup > renders with size xs correctly 1`] = `
+"<div class="relative inline-flex -space-x-px">
+  <div class="relative group"><input type="text" class="relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0 rounded-md placeholder-gray-400 dark:placeholder-gray-500 group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none px-2 py-1 text-xs shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400">
+    <!--v-if-->
+    <!--v-if-->
+  </div> <button type="button" class="rounded-md font-medium inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 not-only:first:rounded-e-none not-only:last:rounded-s-none not-last:not-first:rounded-none px-2 py-1 text-xs gap-1 shadow-sm text-white dark:text-gray-900 bg-primary-500 hover:bg-primary-600 disabled:bg-primary-500 dark:bg-primary-400 dark:hover:bg-primary-500 dark:disabled:bg-primary-400 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-500 dark:focus-visible:outline-primary-400">
+    <!--v-if--><span class=""> Click me! </span>
+    <!--v-if-->
+  </button>
+</div>"
+`;
+
+exports[`ButtonGroup > renders with ui correctly 1`] = `"<div class="relative inline-flex -space-x-px"></div>"`;