feat: support toggling multi-select groups in combobox

Author: bnjm

src/components/Combobox.vue

@@ -4,6 +4,7 @@ import { Combobox, ComboboxButton, ComboboxInput } from '@headlessui/vue'
 
 import type { Option } from './Option.vue'
 import { OptionGroup, areOptionsGrouped } from './OptionGroup.vue'
+import { GROUP_VALUE_PREFIX } from './SelectableOptionGroup.vue'
 import ATag from './Tag.vue'
 import AColorCircle from './ColorCircle.vue'
 import OptionsPanel, { Direction } from './internal/OptionsPanel.vue'
@@ -124,6 +125,15 @@ export default defineComponent({
     collapsedTagsLabel: {
       type: Function as PropType<(count: number) => string>,
       default: (count: number) => `+${count} more`
+    },
+    /**
+     * When true and the combobox is in multi-select mode with grouped options,
+     * displays a CheckboxSelectAll in each group header to select/clear all
+     * options in that group.
+     */
+    selectableGroups: {
+      type: Boolean,
+      default: false
     }
   },
   emits: ['update:modelValue', 'update:query'],
@@ -146,11 +156,41 @@ export default defineComponent({
       }
     }
 
+    // toggle all options in a group (select all if not all selected, otherwise clear)
+    const handleGroupToggle = (options: Option[]) => {
+      if (!isMultiSelect(props.modelValue)) return
+
+      const values = options.filter(o => !o.disabled).map(o => o.value)
+      const currentSet = new Set(props.modelValue)
+      const allSelected = values.every(v => currentSet.has(v))
+
+      const newSelection = allSelected
+        ? props.modelValue.filter(v => !values.includes(v))
+        : [...new Set([...props.modelValue, ...values])]
+
+      emit('update:modelValue', newSelection)
+      clearQuery()
+    }
+
     const model = computed({
       get: () => {
         return props.modelValue
       },
       set: value => {
+        // handle keyboard selection of group headers (which have __group__ prefix)
+        if (isMultiSelect(value) && areOptionsGrouped(props.options)) {
+          const groupValue = value.find(v => v.startsWith(GROUP_VALUE_PREFIX))
+          if (groupValue) {
+            // extract group title and toggle its options
+            const title = groupValue.slice(GROUP_VALUE_PREFIX.length)
+            const group = props.options.find(g => g.title === title)
+            if (group) {
+              handleGroupToggle(group.options)
+            }
+            return
+          }
+        }
+
         emit('update:modelValue', value)
         clearQuery()
       }
@@ -245,6 +285,13 @@ export default defineComponent({
       return Math.max(0, model.value.length - props.maxTags)
     })
 
+    const showSelectableGroups = computed(
+      () =>
+        props.selectableGroups &&
+        isMultiSelect(props.modelValue) &&
+        areOptionsGrouped(props.options)
+    )
+
     const handleDelete = () => {
       if (isMultiSelect(model.value) && !query.value) {
         model.value = model.value.slice(0, -1)
@@ -279,7 +326,8 @@ export default defineComponent({
       handleBlur,
       container,
       visibleValues,
-      hiddenCount
+      hiddenCount,
+      showSelectableGroups
     }
   }
 })
@@ -367,7 +415,9 @@ export default defineComponent({
         :multi="isMultiSelect"
         :inline="inline"
         :escape-overflow="escapeOverflow"
-        :width="optionsPanelWidth">
+        :width="optionsPanelWidth"
+        :selectable-groups="showSelectableGroups"
+        :selected-values="isMultiSelect ? (model as string[]) : []">
         <template #default>
           <!-- @slot  `#default` slot. Takes `a-option` or `a-option-group` components without any wrappers. Use this slot to render options with extra styles or markup. Default value: `options` prop rendered as `a-option`s or `a-option-group`s -->
           <slot :filtered-options="filteredOptions"></slot>

src/components/SelectableOptionGroup.vue

@@ -0,0 +1,132 @@
+<script lang="ts">
+import { defineComponent, PropType, computed } from 'vue'
+import { ComboboxOption } from '@headlessui/vue'
+import ASeparator from './Separator.vue'
+import { Option } from './Option.vue'
+import AOption from './Option.vue'
+import ACheckbox from './Checkbox.vue'
+
+export const GROUP_VALUE_PREFIX = '__group__'
+
+export default defineComponent({
+  name: 'ASelectableOptionGroup',
+  components: { ASeparator, AOption, ACheckbox, ComboboxOption },
+  props: {
+    /**
+     * the option group title
+     */
+    title: {
+      type: String,
+      required: true
+    },
+    /**
+     * list of options in this group
+     */
+    options: {
+      type: Array as PropType<Option[]>,
+      required: true
+    },
+    /**
+     * current selection values (for computing checkbox state)
+     */
+    modelValue: {
+      type: Array as PropType<string[]>,
+      default: () => []
+    },
+    /**
+     * parent component type. Only 'combobox' is supported because this component
+     * uses Headless UI's ComboboxOption for keyboard navigation.
+     * This prop exists for API consistency with AOptionGroup.
+     */
+    component: {
+      type: String as PropType<'combobox'>,
+      default: 'combobox',
+      validator: (value: string) => value === 'combobox'
+    }
+  },
+  setup(props) {
+    const titleId = computed(() => `${props.title}-option-group`)
+
+    // used by Headless UI for keyboard navigation AND click selection
+    const groupValue = computed(() => `${GROUP_VALUE_PREFIX}${props.title}`)
+
+    const enabledOptions = computed(() => props.options.filter(o => !o.disabled))
+
+    const selectedCount = computed(() => {
+      const selectedSet = new Set(props.modelValue)
+      return props.options.filter(o => selectedSet.has(o.value)).length
+    })
+
+    const areAllSelected = computed(
+      () => selectedCount.value === enabledOptions.value.length && enabledOptions.value.length > 0
+    )
+
+    const isPartiallySelected = computed(
+      () => selectedCount.value > 0 && selectedCount.value < enabledOptions.value.length
+    )
+
+    return {
+      titleId,
+      groupValue,
+      areAllSelected,
+      isPartiallySelected
+    }
+  }
+})
+</script>
+
+<template>
+  <div role="group" :aria-labelledby="titleId" class="a-selectable-option-group">
+    <!-- used to focus the group header via keyboard -->
+    <ComboboxOption v-slot="{ active }" as="template" :value="groupValue">
+      <div
+        :id="titleId"
+        class="a-selectable-option-group__header flex min-h-8 items-center capitalize text-warsaw body-xs-600 px-2 cursor-pointer"
+        :class="{ 'bg-athens a-selectable-option-group__header--active': active }">
+        <!--
+            @slot Named `#group-title` slot. Use to render custom styles or extra markup as the option group title.
+            Renders a checkbox with the title prop by default.
+          -->
+        <slot name="group-title">
+          <ACheckbox readonly :model-value="areAllSelected" :mixed="isPartiallySelected">
+            <span class="capitalize text-warsaw body-xs-600">{{ title }}</span>
+          </ACheckbox>
+        </slot>
+      </div>
+    </ComboboxOption>
+
+    <div class="a-selectable-option-group__options [&_[role='option']]:pl-4">
+      <!--
+          @slot `#default` slot. Takes `a-option` components without any wrappers.
+          Use this slot to render combobox options with extra styles or markup.
+
+          Default value: `options` prop rendered as `a-option`s with `multi` enabled
+        -->
+      <slot>
+        <AOption
+          v-for="option in options"
+          :key="option.value"
+          component="combobox"
+          multi
+          :option="option" />
+      </slot>
+    </div>
+  </div>
+  <a-separator class="my-2 last-of-type:hidden" />
+</template>
+
+<style>
+.a-selectable-option-group__header:hover {
+  @apply bg-athens;
+}
+
+/* when header is hovered or focused via keyboard, highlight child options */
+.a-selectable-option-group:has(.a-selectable-option-group__header:hover)
+  .a-selectable-option-group__options
+  [role='option'],
+.a-selectable-option-group:has(.a-selectable-option-group__header--active)
+  .a-selectable-option-group__options
+  [role='option'] {
+  @apply bg-athens/50;
+}
+</style>