feat(ButtonGroup): new component (#88)

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

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