feat(CheckboxGroup): new component (#3862)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
Co-authored-by: Romain Hamel <rom.hml@gmail.com>

src/runtime/components/Checkbox.vue

@@ -18,10 +18,19 @@ export interface CheckboxProps extends Pick<CheckboxRootProps, 'disabled' | 'req
    * @defaultValue 'primary'
    */
   color?: Checkbox['variants']['color']
+  /**
+   * @defaultValue 'list'
+   */
+  variant?: Checkbox['variants']['variant']
   /**
    * @defaultValue 'md'
    */
   size?: Checkbox['variants']['size']
+  /**
+   * Position of the indicator.
+   * @defaultValue 'start'
+   */
+  indicator?: Checkbox['variants']['indicator']
   /**
    * The icon displayed when checked.
    * @defaultValue appConfig.ui.icons.check
@@ -75,9 +84,10 @@ const id = _id.value ?? useId()
 const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.checkbox || {}) })({
   size: size.value,
   color: color.value,
+  variant: props.variant,
+  indicator: props.indicator,
   required: props.required,
-  disabled: disabled.value,
-  checked: Boolean(modelValue.value ?? props.defaultValue)
+  disabled: disabled.value
 }))
 
 function onUpdate(value: any) {
@@ -91,7 +101,7 @@ function onUpdate(value: any) {
 
 <!-- eslint-disable vue/no-template-shadow -->
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <Primitive :as="variant === 'list' ? as : Label" :class="ui.root({ class: [props.class, props.ui?.root] })">
     <div :class="ui.container({ class: props.ui?.container })">
       <CheckboxRoot
         :id="id"
@@ -103,7 +113,7 @@ function onUpdate(value: any) {
         @update:model-value="onUpdate"
       >
         <template #default="{ modelValue }">
-          <CheckboxIndicator as-child>
+          <CheckboxIndicator :class="ui.indicator({ class: props.ui?.indicator })">
             <UIcon v-if="modelValue === 'indeterminate'" :name="indeterminateIcon || appConfig.ui.icons.minus" :class="ui.icon({ class: props.ui?.icon })" />
             <UIcon v-else :name="icon || appConfig.ui.icons.check" :class="ui.icon({ class: props.ui?.icon })" />
           </CheckboxIndicator>
@@ -112,11 +122,11 @@ function onUpdate(value: any) {
     </div>
 
     <div v-if="(label || !!slots.label) || (description || !!slots.description)" :class="ui.wrapper({ class: props.ui?.wrapper })">
-      <Label v-if="label || !!slots.label" :for="id" :class="ui.label({ class: props.ui?.label })">
+      <component :is="variant === 'list' ? Label : 'p'" v-if="label || !!slots.label" :for="id" :class="ui.label({ class: props.ui?.label })">
         <slot name="label" :label="label">
           {{ label }}
         </slot>
-      </Label>
+      </component>
       <p v-if="description || !!slots.description" :class="ui.description({ class: props.ui?.description })">
         <slot name="description" :description="description">
           {{ description }}

src/runtime/components/CheckboxGroup.vue

@@ -0,0 +1,175 @@
+<script lang="ts">
+import type { CheckboxGroupRootProps, CheckboxGroupRootEmits } from 'reka-ui'
+import type { AppConfig } from '@nuxt/schema'
+import theme from '#build/ui/checkbox-group'
+import type { CheckboxProps } from '../types'
+import type { AcceptableValue, ComponentConfig } from '../types/utils'
+
+type CheckboxGroup = ComponentConfig<typeof theme, AppConfig, 'checkboxGroup'>
+
+export type CheckboxGroupValue = AcceptableValue
+
+export type CheckboxGroupItem = {
+  label?: string
+  description?: string
+  disabled?: boolean
+  value?: string
+  [key: string]: any
+} | CheckboxGroupValue
+
+export interface CheckboxGroupProps<T extends CheckboxGroupItem = CheckboxGroupItem> extends Pick<CheckboxGroupRootProps, 'defaultValue' | 'disabled' | 'loop' | 'modelValue' | 'name' | 'required'>, Pick<CheckboxProps, 'color' | 'variant' | 'indicator' | 'icon'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  legend?: string
+  /**
+   * When `items` is an array of objects, select the field to use as the value.
+   * @defaultValue 'value'
+   */
+  valueKey?: string
+  /**
+   * When `items` is an array of objects, select the field to use as the label.
+   * @defaultValue 'label'
+   */
+  labelKey?: string
+  /**
+   * When `items` is an array of objects, select the field to use as the description.
+   * @defaultValue 'description'
+   */
+  descriptionKey?: string
+  items?: T[]
+  /**
+   * @defaultValue 'md'
+   */
+  size?: CheckboxGroup['variants']['size']
+  /**
+   * The orientation the checkbox buttons are laid out.
+   * @defaultValue 'vertical'
+   */
+  orientation?: CheckboxGroupRootProps['orientation']
+  class?: any
+  ui?: CheckboxGroup['slots']
+}
+
+export type CheckboxGroupEmits = CheckboxGroupRootEmits & {
+  change: [payload: Event]
+}
+
+type SlotProps<T extends CheckboxGroupItem> = (props: { item: T & { id: string }, modelValue?: CheckboxGroupValue }) => any
+
+export interface CheckboxGroupSlots<T extends CheckboxGroupItem = CheckboxGroupItem> {
+  legend(props?: {}): any
+  label: SlotProps<T>
+  description: SlotProps<T>
+}
+</script>
+
+<script setup lang="ts" generic="T extends CheckboxGroupItem">
+import { computed, useId } from 'vue'
+import { CheckboxGroupRoot, useForwardProps, useForwardPropsEmits } from 'reka-ui'
+import { reactivePick } from '@vueuse/core'
+import { useAppConfig } from '#imports'
+import { useFormField } from '../composables/useFormField'
+import { get } from '../utils'
+import { tv } from '../utils/tv'
+
+const props = withDefaults(defineProps<CheckboxGroupProps<T>>(), {
+  valueKey: 'value',
+  labelKey: 'label',
+  descriptionKey: 'description',
+  orientation: 'vertical'
+})
+const emits = defineEmits<CheckboxGroupEmits>()
+const slots = defineSlots<CheckboxGroupSlots<T>>()
+
+const appConfig = useAppConfig() as CheckboxGroup['AppConfig']
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'modelValue', 'defaultValue', 'orientation', 'loop', 'required'), emits)
+const checkboxProps = useForwardProps(reactivePick(props, 'variant', 'indicator', 'icon'))
+
+const { emitFormChange, emitFormInput, color, name, size, id: _id, disabled, ariaAttrs } = useFormField<CheckboxGroupProps<T>>(props, { bind: false })
+const id = _id.value ?? useId()
+
+const ui = computed(() => tv({ extend: theme, ...(appConfig.ui?.checkboxGroup || {}) })({
+  size: size.value,
+  required: props.required,
+  orientation: props.orientation
+}))
+
+function normalizeItem(item: any) {
+  if (item === null) {
+    return {
+      id: `${id}:null`,
+      value: undefined,
+      label: undefined
+    }
+  }
+
+  if (typeof item === 'string' || typeof item === 'number') {
+    return {
+      id: `${id}:${item}`,
+      value: String(item),
+      label: String(item)
+    }
+  }
+
+  const value = get(item, props.valueKey as string)
+  const label = get(item, props.labelKey as string)
+  const description = get(item, props.descriptionKey as string)
+
+  return {
+    ...item,
+    value,
+    label,
+    description,
+    id: `${id}:${value}`
+  }
+}
+
+const normalizedItems = computed(() => {
+  if (!props.items) {
+    return []
+  }
+  return props.items.map(normalizeItem)
+})
+
+function onUpdate(value: any) {
+  // @ts-expect-error - 'target' does not exist in type 'EventInit'
+  const event = new Event('change', { target: { value } })
+  emits('change', event)
+  emitFormChange()
+  emitFormInput()
+}
+</script>
+
+<!-- eslint-disable vue/no-template-shadow -->
+<template>
+  <CheckboxGroupRoot
+    :id="id"
+    v-bind="rootProps"
+    :name="name"
+    :disabled="disabled"
+    :class="ui.root({ class: [props.class, props.ui?.root] })"
+    @update:model-value="onUpdate"
+  >
+    <fieldset :class="ui.fieldset({ class: props.ui?.fieldset })" v-bind="ariaAttrs">
+      <legend v-if="legend || !!slots.legend" :class="ui.legend({ class: props.ui?.legend })">
+        <slot name="legend">
+          {{ legend }}
+        </slot>
+      </legend>
+
+      <UCheckbox
+        v-for="item in normalizedItems"
+        :key="item.value"
+        v-bind="{ ...item, ...checkboxProps }"
+        :color="color"
+        :size="size"
+        :name="name"
+        :disabled="item.disabled || disabled"
+      />
+    </fieldset>
+  </CheckboxGroupRoot>
+</template>

src/runtime/components/RadioGroup.vue

@@ -175,6 +175,7 @@ function onUpdate(value: any) {
           {{ legend }}
         </slot>
       </legend>
+
       <component :is="variant === 'list' ? 'div' : Label" v-for="item in normalizedItems" :key="item.value" :class="ui.item({ class: props.ui?.item })">
         <div :class="ui.container({ class: props.ui?.container })">
           <RadioGroupItem
@@ -187,8 +188,8 @@ function onUpdate(value: any) {
           </RadioGroupItem>
         </div>
 
-        <div :class="ui.wrapper({ class: props.ui?.wrapper })">
-          <component :is="variant === 'list' ? Label : 'p'" :class="ui.label({ class: props.ui?.label })" :for="item.id">
+        <div v-if="(item.label || !!slots.label) || (item.description || !!slots.description)" :class="ui.wrapper({ class: props.ui?.wrapper })">
+          <component :is="variant === 'list' ? Label : 'p'" v-if="item.label || !!slots.label" :for="item.id" :class="ui.label({ class: props.ui?.label })">
             <slot name="label" :item="item" :model-value="(modelValue as RadioGroupValue)">
               {{ item.label }}
             </slot>

src/runtime/types/index.ts

@@ -11,6 +11,7 @@ export * from '../components/Calendar.vue'
 export * from '../components/Card.vue'
 export * from '../components/Carousel.vue'
 export * from '../components/Checkbox.vue'
+export * from '../components/CheckboxGroup.vue'
 export * from '../components/Chip.vue'
 export * from '../components/Collapsible.vue'
 export * from '../components/ColorPicker.vue'