feat(CheckboxGroup): add table variant (#3997)

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

src/runtime/components/CheckboxGroup.vue

@@ -17,7 +17,7 @@ export type CheckboxGroupItem = {
   [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'> {
+export interface CheckboxGroupProps<T extends CheckboxGroupItem = CheckboxGroupItem> extends Pick<CheckboxGroupRootProps, 'defaultValue' | 'disabled' | 'loop' | 'modelValue' | 'name' | 'required'>, Pick<CheckboxProps, 'color' | 'indicator' | 'icon'> {
   /**
    * The element or component this component should render as.
    * @defaultValue 'div'
@@ -44,6 +44,10 @@ export interface CheckboxGroupProps<T extends CheckboxGroupItem = CheckboxGroupI
    * @defaultValue 'md'
    */
   size?: CheckboxGroup['variants']['size']
+  /**
+   * @defaultValue 'list'
+   */
+  variant?: CheckboxGroup['variants']['variant']
   /**
    * The orientation the checkbox buttons are laid out.
    * @defaultValue 'vertical'
@@ -97,7 +101,9 @@ const id = _id.value ?? useId()
 const ui = computed(() => tv({ extend: theme, ...(appConfig.ui?.checkboxGroup || {}) })({
   size: size.value,
   required: props.required,
-  orientation: props.orientation
+  orientation: props.orientation,
+  color: props.color,
+  variant: props.variant
 }))
 
 function normalizeItem(item: any) {

src/theme/checkbox-group.ts

@@ -1,4 +1,6 @@
-export default {
+import type { ModuleOptions } from '../module'
+
+export default (options: Required<ModuleOptions>) => ({
   slots: {
     root: 'relative',
     fieldset: 'flex gap-x-2',
@@ -14,6 +16,17 @@ export default {
         fieldset: 'flex-col'
       }
     },
+    color: {
+      ...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, {}])),
+      neutral: {}
+    },
+    variant: {
+      list: {},
+      card: {},
+      table: {
+        item: 'border border-muted'
+      }
+    },
     size: {
       xs: {
         fieldset: 'gap-y-0.5',
@@ -42,7 +55,53 @@ export default {
       }
     }
   },
+  compoundVariants: [
+    { size: 'xs', variant: 'table', class: { item: 'p-2.5' } },
+    { size: 'sm', variant: 'table', class: { item: 'p-3' } },
+    { size: 'md', variant: 'table', class: { item: 'p-3.5' } },
+    { size: 'lg', variant: 'table', class: { item: 'p-4' } },
+    { size: 'xl', variant: 'table', class: { item: 'p-4.5' } },
+    {
+      orientation: 'horizontal',
+      variant: 'table',
+      class: {
+        item: 'first-of-type:rounded-l-lg last-of-type:rounded-r-lg',
+        fieldset: 'gap-0 -space-x-px'
+      }
+    },
+    {
+      orientation: 'vertical',
+      variant: 'table',
+      class: {
+        item: 'first-of-type:rounded-t-lg last-of-type:rounded-b-lg',
+        fieldset: 'gap-0 -space-y-px'
+      }
+    },
+    ...(options.theme.colors || []).map((color: string) => ({
+      color,
+      variant: 'table',
+      class: {
+        item: `has-data-[state=checked]:bg-${color}/10 has-data-[state=checked]:border-${color}/50 has-data-[state=checked]:z-[1]`
+      }
+    })),
+    {
+      color: 'neutral',
+      variant: 'table',
+      class: {
+        item: 'has-data-[state=checked]:bg-elevated has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:z-[1]'
+      }
+    },
+    {
+      variant: 'table',
+      disabled: true,
+      class: {
+        item: 'cursor-not-allowed opacity-75'
+      }
+    }
+  ],
   defaultVariants: {
-    size: 'md'
+    size: 'md',
+    variant: 'list',
+    color: 'primary'
   }
-}
+})