@hina-ui/vue 1.7.8 → 1.7.10

package/src/components/command-palette/CommandPalettePanel.vue

@@ -14,6 +14,9 @@
   import {
     commandCard,
     commandEmpty,
+    commandGrid,
+    commandGridRows,
+    commandHeading,
     commandInputRow,
     commandList,
     commandStatus,
@@ -21,12 +24,14 @@
   import { provideCommandPalette } from './context'
   import type {
     CommandEmptySlotProps,
+    CommandGroup,
+    CommandHeadingSlotProps,
     CommandItem,
     CommandItems,
     CommandItemSlotProps,
   } from './types'
-  import { useCommandItems } from './composables/useCommandItems'
-  import { commandMatchRange } from './utils/match'
+  import { useCommandItems, type CommandOptionGroup } from './composables/useCommandItems'
+  import { commandMatchRange, layoutCommandSections } from './utils/match'
 
   defineOptions({ name: 'HnCommandPalettePanel', inheritAttrs: false })
 
@@ -44,10 +49,11 @@
 
   const emit = defineEmits<{ select: [item: CommandItem<T>] }>()
 
-  defineSlots<{
+  const slots = defineSlots<{
     default?(): unknown
     input?(): unknown
     item?(props: CommandItemSlotProps<T>): unknown
+    heading?(props: CommandHeadingSlotProps<T>): unknown
     loading?(): unknown
     empty?(props: CommandEmptySlotProps): unknown
   }>()
@@ -58,6 +64,16 @@
 
   const input = shallowRef<HTMLElement>()
   const { sections, options } = useCommandItems(props, () => search.value)
+  const layout = computed(() => (slots.heading ? layoutCommandSections(sections.value) : undefined))
+
+  function returnFocus() {
+    void nextTick(() => {
+      const field = input.value
+      const active = document.activeElement
+      if (field?.isConnected && (!active || active === document.body || active.contains(field)))
+        field.focus({ preventScroll: true })
+    })
+  }
 
   function select(item: CommandItem<T>) {
     const field = input.value
@@ -124,6 +140,16 @@
               </template>
             </CommandPaletteItem>
           </template>
+          <template v-if="$slots.heading" #group="{ group }">
+            <div
+              data-hn-command-heading
+              :class="commandHeading()"
+              @mousedown.prevent
+              @click="returnFocus"
+            >
+              <slot name="heading" :group="(group as CommandOptionGroup<T>).group" />
+            </div>
+          </template>
           <template #empty>
             <slot v-if="props.loading" name="loading">{{ t.common.loading }}</slot>
             <slot v-else name="empty" :search="search">{{ t.command.empty }}</slot>
@@ -131,7 +157,63 @@
         </VirtualChoices>
       </ListboxContent>
       <ScrollArea v-else :class="commandList()">
+        <div v-if="layout" :class="commandGrid()">
+          <ListboxContent
+            :aria-label="props.label"
+            :aria-busy="props.loading || undefined"
+            :class="commandGridRows()"
+            :style="{ gridRow: `1 / span ${layout.rows}` }"
+          >
+            <template v-for="{ section, row, span } in layout.sections" :key="section.key">
+              <ListboxGroup
+                v-if="section.group"
+                :aria-label="section.group.label"
+                :aria-labelledby="undefined"
+                :class="commandGridRows()"
+                :style="{ gridRow: `${row} / span ${span}` }"
+              >
+                <CommandPaletteItem
+                  v-for="(match, index) in section.matches"
+                  :key="match.item.id"
+                  :match="match"
+                  :style="{ gridRow: index + 2 }"
+                  @select="select(match.item)"
+                >
+                  <template v-if="$slots.item" #default>
+                    <slot name="item" :item="match.item" :match="commandMatchRange(match)" />
+                  </template>
+                </CommandPaletteItem>
+              </ListboxGroup>
+              <template v-else>
+                <CommandPaletteItem
+                  v-for="(match, index) in section.matches"
+                  :key="match.item.id"
+                  :match="match"
+                  :style="{ gridRow: row + index }"
+                  @select="select(match.item)"
+                >
+                  <template v-if="$slots.item" #default>
+                    <slot name="item" :item="match.item" :match="commandMatchRange(match)" />
+                  </template>
+                </CommandPaletteItem>
+              </template>
+            </template>
+          </ListboxContent>
+          <template v-for="{ section, row } in layout.sections" :key="section.key">
+            <div
+              v-if="section.group"
+              data-hn-command-heading
+              :class="commandHeading()"
+              :style="{ gridRow: row, gridColumn: 1 }"
+              @mousedown.prevent
+              @click="returnFocus"
+            >
+              <slot name="heading" :group="section.group as CommandGroup<T>" />
+            </div>
+          </template>
+        </div>
         <ListboxContent
+          v-else
           :aria-label="props.label"
           :aria-busy="props.loading || undefined"
           :class="selectListBody()"

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'
@@ -307,6 +308,7 @@ export {
   writeScrollRecord,
   createScrollRestorer,
   createScrollRestoreSession,
+  keepScrollPosition,
   scrollRestoreScript,
 } from './components/scroll-area/scroll-restore'
 export type {