@hina-ui/vue 1.7.9 → 1.7.10

package/src/components/command-palette/composables/useCommandItems.ts

@@ -1,29 +1,35 @@
 import { computed } from 'vue'
-import type { CommandItems } from '../types'
+import type { CommandGroup, CommandItems } from '../types'
 import { filterCommands } from '../utils/match'
 import type { CommandMatch } from '../utils/match'
 import type { SelectItems, SelectOption } from '../../select/types'
 
 type CommandOption<T> = SelectOption & { match: CommandMatch<T> }
 
+export interface CommandOptionGroup<T> {
+  label: string
+  options: CommandOption<T>[]
+  group: CommandGroup<T>
+}
+
 export function useCommandItems<T>(
   props: { items: CommandItems<T>; ignoreFilter?: boolean },
   search: () => string,
 ) {
   const sections = computed(() => filterCommands(props.items, props.ignoreFilter ? '' : search()))
   const options = computed<SelectItems<CommandOption<T>>>(() =>
-    sections.value.flatMap<CommandOption<T> | { label: string; options: CommandOption<T>[] }>(
-      section => {
-        const options = section.matches.map(match => ({
-          value: match.item.id,
-          label: match.item.label,
-          disabled: match.item.disabled,
-          description: match.item.description,
-          match,
-        }))
-        return section.label ? [{ label: section.label, options }] : options
-      },
-    ),
+    sections.value.flatMap<CommandOption<T> | CommandOptionGroup<T>>(section => {
+      const options = section.matches.map(match => ({
+        value: match.item.id,
+        label: match.item.label,
+        disabled: match.item.disabled,
+        description: match.item.description,
+        match,
+      }))
+      return section.group
+        ? [{ label: section.group.label, options, group: section.group as CommandGroup<T> }]
+        : options
+    }),
   )
   return { sections, options }
 }

package/src/components/command-palette/types.ts

@@ -32,6 +32,10 @@ export interface CommandEmptySlotProps {
   search: string
 }
 
+export interface CommandHeadingSlotProps<T = unknown> {
+  group: CommandGroup<T>
+}
+
 export function isCommandGroup<T>(
   entry: CommandItem<T> | CommandGroup<T>,
 ): entry is CommandGroup<T> {

package/src/components/command-palette/utils/match.ts

@@ -4,6 +4,7 @@ import type * as Shared from '../../../../../shared/src/lib/command-palette/matc
 export {
   commandMatchRange,
   filterCommands,
+  layoutCommandSections,
 } from '../../../../../shared/src/lib/command-palette/match'
 export type CommandMatch<T = unknown> = Shared.CommandMatch<CommandItem<T>>
 export type CommandSection<T = unknown> = Shared.CommandSection<CommandItem<T>>

package/src/components/virtual-list/VirtualChoices.vue

@@ -1,11 +1,18 @@
 <script setup lang="ts" generic="T extends SelectOption = SelectOption">
+  import { computed } from 'vue'
+  import { cn } from '../../lib/cn'
   import { useUiLocale } from '../../locale'
   import { useVirtualChoices } from '../../lib/reka/useVirtualChoices'
   import type { VirtualizeOptions } from '../../lib/virtual/types'
   import ScrollArea from '../scroll-area/ScrollArea.vue'
   import { selectEmpty, selectLabel } from '../select/select.variants'
-  import type { SelectItems, SelectOption } from '../select/types'
-  import { virtualListContent, virtualListItem } from './virtual-list.variants'
+  import type { SelectItems, SelectOption, SelectOptionGroup } from '../select/types'
+  import {
+    virtualChoiceHeading,
+    virtualChoiceHeadings,
+    virtualListContent,
+    virtualListItem,
+  } from './virtual-list.variants'
 
   defineOptions({ name: 'HnVirtualChoices', inheritAttrs: false })
   const props = defineProps<{
@@ -20,10 +27,15 @@
   const t = useUiLocale()
   const { area, body, rows, entries, bodyStyle, measure, itemAttrs, labelId } =
     useVirtualChoices(props)
-  defineSlots<{
+  const slots = defineSlots<{
     default(props: { option: T; attrs: ReturnType<typeof itemAttrs> }): unknown
+    group?(props: { group: SelectOptionGroup<T> }): unknown
     empty?(): unknown
   }>()
+  const held = (index: number) => !!slots.group && !rows.value[index]!.option
+  const origin = computed(() =>
+    entries.value[0] ? entries.value[0].start - parseFloat(bodyStyle.value.paddingBlockStart) : 0,
+  )
 </script>
 
 <template>
@@ -34,7 +46,7 @@
       maxHeight: typeof props.maxHeight === 'number' ? `${props.maxHeight}px` : props.maxHeight,
     }"
   >
-    <div :class="props.padded === false ? undefined : 'p-1'">
+    <div :class="cn(slots.group && 'relative', props.padded !== false && 'p-1') || undefined">
       <div
         ref="body"
         v-bind="$attrs"
@@ -45,17 +57,23 @@
         <div
           v-for="entry in entries"
           :key="entry.key"
-          :ref="measure"
+          :ref="held(entry.index) ? undefined : measure"
           :data-index="entry.index"
           role="presentation"
           :class="virtualListItem({ orientation: 'vertical' })"
-          :style="{ marginBlockStart: `${entry.gapBefore}px` }"
+          :style="{
+            marginBlockStart: `${entry.gapBefore}px`,
+            height: held(entry.index) ? `${entry.size}px` : undefined,
+          }"
         >
           <slot
             v-if="rows[entry.index]!.option"
             :option="rows[entry.index]!.option!"
             :attrs="itemAttrs(entry.index)"
           />
+          <span v-else-if="slots.group" :id="labelId(entry.index)" hidden>
+            {{ rows[entry.index]!.label }}
+          </span>
           <div v-else :id="labelId(entry.index)" :class="selectLabel()">
             {{ rows[entry.index]!.label }}
           </div>
@@ -64,6 +82,21 @@
       <div v-if="!rows.length" :class="selectEmpty()">
         <slot name="empty">{{ t.select.empty }}</slot>
       </div>
+      <div v-else-if="slots.group" :class="virtualChoiceHeadings()">
+        <div class="relative">
+          <template v-for="entry in entries" :key="entry.key">
+            <div
+              v-if="rows[entry.index]!.source"
+              :ref="measure"
+              :data-index="entry.index"
+              :class="virtualChoiceHeading()"
+              :style="{ top: `${entry.start - origin}px` }"
+            >
+              <slot name="group" :group="rows[entry.index]!.source!" />
+            </div>
+          </template>
+        </div>
+      </div>
     </div>
   </ScrollArea>
 </template>

package/src/index.ts

@@ -82,6 +82,7 @@ export type {
   CommandItemMatch,
   CommandItemSlotProps,
   CommandEmptySlotProps,
+  CommandHeadingSlotProps,
 } from './components/command-palette/types'
 export { default as Listbox } from './components/listbox/Listbox.vue'
 export type { ListboxVariants } from './components/listbox/listbox.variants'