@hina-ui/vue 1.7.6 → 1.7.8

package/src/components/button/Button.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
   import { computed, useSlots } from 'vue'
-  import { Primitive, type PrimitiveProps } from 'reka-ui'
   import { cn } from '../../lib/cn'
   import { useAccessibleName } from '../../lib/a11y'
   import { button, buttonIconBox, type ButtonVariants } from './button.variants'
   import IconSlot from './IconSlot.vue'
   import Ripple from '../ripple/Ripple.vue'
   import Spinner from '../spinner/Spinner.vue'
+  import type { PrimitiveProps } from '../../primitives/primitive'
+  import { Primitive } from '../../primitives/primitive'
 
   defineOptions({ name: 'HnButton' })
 

package/src/components/card/Card.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-  import { Primitive, type PrimitiveProps } from 'reka-ui'
   import { cn } from '../../lib/cn'
   import { card } from './card.variants'
+  import type { PrimitiveProps } from '../../primitives/primitive'
+  import { Primitive } from '../../primitives/primitive'
 
   defineOptions({ name: 'HnCard' })
 

package/src/components/checkbox/Checkbox.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
   import { Check, Minus } from '@lucide/vue'
-  import { CheckboxRoot } from 'reka-ui'
+  import { CheckboxRoot } from '../../primitives/checkbox'
   import { useSlots } from 'vue'
   import { cn } from '../../lib/cn'
   import { useFieldControl } from '../form-field/context'

package/src/components/checkbox-group/CheckboxGroup.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts" generic="T extends SelectOption = SelectOption">
-  import { CheckboxGroupRoot } from 'reka-ui'
+  import { CheckboxGroupRoot } from '../../primitives/checkbox'
   import { cn } from '../../lib/cn'
   import { shieldFormField, useFieldControl } from '../form-field/context'
   import Checkbox from '../checkbox/Checkbox.vue'

package/src/components/chip/Chip.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
   import { computed, useSlots } from 'vue'
-  import { Primitive, type PrimitiveProps } from 'reka-ui'
   import { cn } from '../../lib/cn'
   import { devWarn } from '../../lib/dev'
   import { useUiLocale } from '../../locale'
@@ -9,6 +8,8 @@
   import IconSlot from './IconSlot.vue'
   import { useChipRoot } from './composables/useChipRoot'
   import { chip, chipRemove, type ChipVariants } from './chip.variants'
+  import type { PrimitiveProps } from '../../primitives/primitive'
+  import { Primitive } from '../../primitives/primitive'
 
   defineOptions({ name: 'HnChip' })
 

package/src/components/chip/composables/useChipRoot.ts

@@ -1,5 +1,5 @@
 import { computed } from 'vue'
-import type { PrimitiveProps } from 'reka-ui'
+import type { PrimitiveProps } from '../../../primitives/primitive'
 
 export function useChipRoot(props: PrimitiveProps & { selectable?: boolean; disabled?: boolean }) {
   const tag = computed(() => props.as ?? (props.selectable ? 'button' : 'span'))

package/src/components/collapsible/Collapsible.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-  import { CollapsibleRoot, useForwardPropsEmits, type CollapsibleRootEmits } from 'reka-ui'
+  import { CollapsibleRoot, type CollapsibleRootEmits } from '../../primitives/collapsible'
+  import { useForwardPropsEmits } from '../../primitives/utils/useForwardPropsEmits'
   import { cn } from '../../lib/cn'
 
   defineOptions({ name: 'HnCollapsible' })

package/src/components/collapsible/CollapsibleContent.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import { CollapsibleContent as RekaCollapsibleContent } from 'reka-ui'
+  import { CollapsibleContent as RekaCollapsibleContent } from '../../primitives/collapsible'
   import { cn } from '../../lib/cn'
   import { rekaCollapsibleStyle } from '../../lib/reka/styles'
   import { useCollapseGap } from '../../lib/collapse'

package/src/components/collapsible/CollapsibleTrigger.vue

@@ -2,8 +2,8 @@
   import {
     CollapsibleTrigger as RekaCollapsibleTrigger,
     injectCollapsibleRootContext,
-    useId,
-  } from 'reka-ui'
+  } from '../../primitives/collapsible'
+  import { useId } from '../../primitives/utils/useId'
   import { cn } from '../../lib/cn'
   import Button from '../button/Button.vue'
   import DisclosureIcon from '../disclosure-icon/DisclosureIcon.vue'

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

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="T = unknown">
   import {
     DialogContent,
     DialogOverlay,
@@ -14,22 +14,40 @@
   import CommandPalettePanel from './CommandPalettePanel.vue'
   import { useHotkey } from './composables/useHotkey'
   import { commandWrapper } from './command-palette.variants'
-  import type { CommandItem, CommandItems } from './types'
+  import type {
+    CommandEmptySlotProps,
+    CommandItem,
+    CommandItems,
+    CommandItemSlotProps,
+  } from './types'
 
   defineOptions({ name: 'HnCommandPalette', inheritAttrs: false })
 
-  const props = defineProps<{
-    items: CommandItems
-    virtualize?: VirtualizeOptions
-    placeholder?: string
-    label?: string
-    hotkey?: string
-    ignoreFilter?: boolean
-    inline?: boolean
-    class?: string
-  }>()
+  const props = withDefaults(
+    defineProps<{
+      items: CommandItems<T>
+      virtualize?: VirtualizeOptions
+      placeholder?: string
+      label?: string
+      hotkey?: string
+      ignoreFilter?: boolean
+      loading?: boolean
+      closeOnSelect?: boolean
+      inline?: boolean
+      class?: string
+    }>(),
+    { closeOnSelect: true },
+  )
 
-  const emit = defineEmits<{ select: [item: CommandItem] }>()
+  const emit = defineEmits<{ select: [item: CommandItem<T>] }>()
+
+  defineSlots<{
+    default?(): unknown
+    input?(): unknown
+    item?(props: CommandItemSlotProps<T>): unknown
+    loading?(): unknown
+    empty?(props: CommandEmptySlotProps): unknown
+  }>()
 
   const open = defineModel<boolean>('open', { default: false })
   const search = defineModel<string>('search', { default: '' })
@@ -49,10 +67,10 @@
     if (!value) search.value = ''
   })
 
-  function select(item: CommandItem) {
+  function select(item: CommandItem<T>) {
     item.onSelect?.()
     emit('select', item)
-    if (!props.inline) open.value = false
+    if (!props.inline && (item.closeOnSelect ?? props.closeOnSelect)) open.value = false
   }
 </script>
 
@@ -67,9 +85,19 @@
     :label="label"
     :placeholder="props.placeholder"
     :ignore-filter="props.ignoreFilter"
+    :loading="props.loading"
     :class="props.class"
     @select="select"
-  />
+  >
+    <template v-if="$slots.input" #input><slot name="input" /></template>
+    <template v-if="$slots.item" #item="slotProps">
+      <slot name="item" v-bind="slotProps" />
+    </template>
+    <template v-if="$slots.loading" #loading><slot name="loading" /></template>
+    <template v-if="$slots.empty" #empty="slotProps">
+      <slot name="empty" v-bind="slotProps" />
+    </template>
+  </CommandPalettePanel>
   <DialogRoot v-else v-model:open="open">
     <DialogTrigger v-if="$slots.default" as-child>
       <slot />
@@ -87,12 +115,21 @@
             :label="label"
             :placeholder="props.placeholder"
             :ignore-filter="props.ignoreFilter"
+            :loading="props.loading"
             :class="props.class"
             @select="select"
           >
             <VisuallyHidden>
               <DialogTitle>{{ label }}</DialogTitle>
             </VisuallyHidden>
+            <template v-if="$slots.input" #input><slot name="input" /></template>
+            <template v-if="$slots.item" #item="slotProps">
+              <slot name="item" v-bind="slotProps" />
+            </template>
+            <template v-if="$slots.loading" #loading><slot name="loading" /></template>
+            <template v-if="$slots.empty" #empty="slotProps">
+              <slot name="empty" v-bind="slotProps" />
+            </template>
           </CommandPalettePanel>
         </DialogContent>
       </div>

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

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+  import { ListboxFilter } from 'reka-ui'
+  import { shallowRef, watchEffect } from 'vue'
+  import { cn } from '../../lib/cn'
+  import { commandInput } from './command-palette.variants'
+  import { injectCommandPalette } from './context'
+
+  defineOptions({ name: 'HnCommandPaletteInput' })
+
+  const props = defineProps<{
+    placeholder?: string
+    class?: string
+  }>()
+
+  const context = injectCommandPalette()
+  const filter = shallowRef<{ $el: HTMLElement }>()
+
+  watchEffect(() => {
+    context.input.value = filter.value?.$el
+  })
+</script>
+
+<template>
+  <ListboxFilter
+    ref="filter"
+    v-model="context.search.value"
+    :auto-focus="context.autoFocus.value"
+    :placeholder="props.placeholder ?? context.placeholder.value"
+    :aria-label="context.label.value"
+    :class="props.class ? cn(commandInput(), props.class) : commandInput()"
+  />
+</template>

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

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="T = unknown">
   import { ListboxItem } from 'reka-ui'
   import { computed } from 'vue'
   import Kbd from '../kbd/Kbd.vue'
@@ -8,8 +8,9 @@
 
   defineOptions({ name: 'HnCommandPaletteItem' })
 
-  const props = defineProps<{ match: CommandMatch }>()
+  const props = defineProps<{ match: CommandMatch<T> }>()
   const emit = defineEmits<{ select: [] }>()
+  defineSlots<{ default?(): unknown }>()
 
   const parts = computed(() => {
     const { item, start, end } = props.match
@@ -26,13 +27,14 @@
     :class="selectItem()"
     @select="emit('select')"
   >
+    <slot v-if="$slots.default" />
     <component
       :is="props.match.item.icon"
-      v-if="props.match.item.icon"
+      v-else-if="props.match.item.icon"
       aria-hidden="true"
       class="text-muted"
     />
-    <span :class="commandItemBody()">
+    <span v-if="!$slots.default" :class="commandItemBody()">
       <span class="truncate">
         <span v-text="parts[0]" />
         <span v-if="parts[1]" :class="commandItemMatch()" v-text="parts[1]" />
@@ -42,7 +44,7 @@
         {{ props.match.item.description }}
       </span>
     </span>
-    <span v-if="props.match.item.kbd?.length" :class="commandItemHint()">
+    <span v-if="!$slots.default && props.match.item.kbd?.length" :class="commandItemHint()">
       <Kbd v-for="key in props.match.item.kbd" :key="key">{{ key }}</Kbd>
     </span>
   </ListboxItem>

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

@@ -1,13 +1,7 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="T = unknown">
   import { Search } from '@lucide/vue'
-  import {
-    ListboxContent,
-    ListboxFilter,
-    ListboxGroup,
-    ListboxGroupLabel,
-    ListboxRoot,
-  } from 'reka-ui'
-  import { shallowRef } from 'vue'
+  import { ListboxContent, ListboxGroup, ListboxGroupLabel, ListboxRoot } from 'reka-ui'
+  import { computed, nextTick, shallowRef } from 'vue'
   import { cn } from '../../lib/cn'
   import { useUiLocale } from '../../locale'
   import Card from '../card/Card.vue'
@@ -15,38 +9,77 @@
   import VirtualChoices from '../virtual-list/VirtualChoices.vue'
   import type { VirtualizeOptions } from '../../lib/virtual/types'
   import { selectLabel, selectListBody } from '../select/select.variants'
+  import CommandPaletteInput from './CommandPaletteInput.vue'
   import CommandPaletteItem from './CommandPaletteItem.vue'
   import {
     commandCard,
     commandEmpty,
-    commandInput,
     commandInputRow,
     commandList,
+    commandStatus,
   } from './command-palette.variants'
-  import type { CommandItem, CommandItems } from './types'
+  import { provideCommandPalette } from './context'
+  import type {
+    CommandEmptySlotProps,
+    CommandItem,
+    CommandItems,
+    CommandItemSlotProps,
+  } from './types'
   import { useCommandItems } from './composables/useCommandItems'
+  import { commandMatchRange } from './utils/match'
 
   defineOptions({ name: 'HnCommandPalettePanel', inheritAttrs: false })
 
   const props = defineProps<{
-    items: CommandItems
+    items: CommandItems<T>
     virtualize?: VirtualizeOptions
     label: string
     placeholder?: string
     ignoreFilter?: boolean
+    loading?: boolean
     autoFocus?: boolean
     inline?: boolean
     class?: string
   }>()
 
-  const emit = defineEmits<{ select: [item: CommandItem] }>()
+  const emit = defineEmits<{ select: [item: CommandItem<T>] }>()
+
+  defineSlots<{
+    default?(): unknown
+    input?(): unknown
+    item?(props: CommandItemSlotProps<T>): unknown
+    loading?(): unknown
+    empty?(props: CommandEmptySlotProps): unknown
+  }>()
 
   const search = defineModel<string>('search', { default: '' })
 
   const t = useUiLocale()
 
-  const input = shallowRef<{ $el: HTMLElement }>()
+  const input = shallowRef<HTMLElement>()
   const { sections, options } = useCommandItems(props, () => search.value)
+
+  function select(item: CommandItem<T>) {
+    const field = input.value
+    const panel = field?.closest('[data-hn-command-palette]')
+    const inside = !!panel?.contains(document.activeElement)
+    emit('select', item)
+    if (!field || !panel || !inside) return
+    void nextTick(() => {
+      const active = document.activeElement
+      if (!field.isConnected) return
+      if (!active || active === document.body || panel.contains(active))
+        field.focus({ preventScroll: true })
+    })
+  }
+
+  provideCommandPalette({
+    search,
+    label: computed(() => props.label),
+    placeholder: computed(() => props.placeholder ?? t.value.command.placeholder),
+    autoFocus: computed(() => props.autoFocus),
+    input,
+  })
 </script>
 
 <template>
@@ -58,22 +91,21 @@
   >
     <slot />
     <ListboxRoot selection-behavior="replace" highlight-on-hover class="flex min-h-0 flex-col">
-      <div :class="commandInputRow()">
+      <slot v-if="$slots.input" name="input" />
+      <div v-else :class="commandInputRow()">
         <Search aria-hidden="true" />
-        <ListboxFilter
-          ref="input"
-          v-model="search"
-          :auto-focus="props.autoFocus"
-          :placeholder="props.placeholder ?? t.command.placeholder"
-          :aria-label="props.label"
-          :class="commandInput()"
-        />
+        <CommandPaletteInput />
       </div>
-      <ListboxContent v-if="props.virtualize" as-child :aria-label="props.label">
+      <ListboxContent
+        v-if="props.virtualize"
+        as-child
+        :aria-label="props.label"
+        :aria-busy="props.loading || undefined"
+      >
         <VirtualChoices
           :options="options"
           :virtualize="props.virtualize"
-          :input="input?.$el"
+          :input="input"
           kind="listbox"
           :class="commandList()"
         >
@@ -81,14 +113,29 @@
             <CommandPaletteItem
               v-bind="attrs"
               :match="option.match"
-              @select="emit('select', option.match.item)"
-            />
+              @select="select(option.match.item)"
+            >
+              <template v-if="$slots.item" #default>
+                <slot
+                  name="item"
+                  :item="option.match.item"
+                  :match="commandMatchRange(option.match)"
+                />
+              </template>
+            </CommandPaletteItem>
+          </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>
           </template>
-          <template #empty>{{ t.command.empty }}</template>
         </VirtualChoices>
       </ListboxContent>
       <ScrollArea v-else :class="commandList()">
-        <ListboxContent :aria-label="props.label" :class="selectListBody()">
+        <ListboxContent
+          :aria-label="props.label"
+          :aria-busy="props.loading || undefined"
+          :class="selectListBody()"
+        >
           <template v-for="section in sections" :key="section.key">
             <ListboxGroup v-if="section.label">
               <ListboxGroupLabel :class="selectLabel()">{{ section.label }}</ListboxGroupLabel>
@@ -96,21 +143,35 @@
                 v-for="match in section.matches"
                 :key="match.item.id"
                 :match="match"
-                @select="emit('select', match.item)"
-              />
+                @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 in section.matches"
                 :key="match.item.id"
                 :match="match"
-                @select="emit('select', match.item)"
-              />
+                @select="select(match.item)"
+              >
+                <template v-if="$slots.item" #default>
+                  <slot name="item" :item="match.item" :match="commandMatchRange(match)" />
+                </template>
+              </CommandPaletteItem>
             </template>
           </template>
-          <div v-if="sections.length === 0" :class="commandEmpty()">{{ t.command.empty }}</div>
         </ListboxContent>
+        <div v-if="sections.length === 0" role="status" :class="commandEmpty()">
+          <slot v-if="props.loading" name="loading">{{ t.common.loading }}</slot>
+          <slot v-else name="empty" :search="search">{{ t.command.empty }}</slot>
+        </div>
       </ScrollArea>
+      <div v-if="props.loading && sections.length > 0" role="status" :class="commandStatus()">
+        <slot name="loading">{{ t.common.loading }}</slot>
+      </div>
     </ListboxRoot>
   </Card>
 </template>

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

@@ -4,24 +4,26 @@ import { filterCommands } from '../utils/match'
 import type { CommandMatch } from '../utils/match'
 import type { SelectItems, SelectOption } from '../../select/types'
 
-type CommandOption = SelectOption & { match: CommandMatch }
+type CommandOption<T> = SelectOption & { match: CommandMatch<T> }
 
-export function useCommandItems(
-  props: { items: CommandItems; ignoreFilter?: boolean },
+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>>(() =>
-    sections.value.flatMap<CommandOption | { label: string; options: CommandOption[] }>(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
-    }),
+  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
+      },
+    ),
   )
   return { sections, options }
 }

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

@@ -0,0 +1,28 @@
+import {
+  inject,
+  provide,
+  type ComputedRef,
+  type InjectionKey,
+  type Ref,
+  type ShallowRef,
+} from 'vue'
+
+export interface CommandPaletteContext {
+  search: Ref<string>
+  label: ComputedRef<string>
+  placeholder: ComputedRef<string>
+  autoFocus: ComputedRef<boolean | undefined>
+  input: ShallowRef<HTMLElement | undefined>
+}
+
+const COMMAND_PALETTE_KEY = Symbol('hn-command-palette') as InjectionKey<CommandPaletteContext>
+
+export function provideCommandPalette(context: CommandPaletteContext) {
+  provide(COMMAND_PALETTE_KEY, context)
+}
+
+export function injectCommandPalette() {
+  const context = inject(COMMAND_PALETTE_KEY, null)
+  if (!context) throw new Error('CommandPaletteInput must be used inside CommandPalette')
+  return context
+}

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

@@ -1,6 +1,7 @@
 import type { Component } from 'vue'
+import type { CommandMatchRange } from '../../../../shared/src/lib/command-palette/match'
 
-export interface CommandItem {
+export interface CommandItem<T = unknown> {
   id: string
   label: string
   description?: string
@@ -8,16 +9,31 @@ export interface CommandItem {
   icon?: Component
   kbd?: string[]
   disabled?: boolean
+  closeOnSelect?: boolean
+  data?: T
   onSelect?: () => void
 }
 
-export interface CommandGroup {
+export interface CommandGroup<T = unknown> {
   label: string
-  items: CommandItem[]
+  items: CommandItem<T>[]
 }
 
-export type CommandItems = Array<CommandItem | CommandGroup>
+export type CommandItems<T = unknown> = Array<CommandItem<T> | CommandGroup<T>>
 
-export function isCommandGroup(entry: CommandItem | CommandGroup): entry is CommandGroup {
+export type CommandItemMatch = CommandMatchRange
+
+export interface CommandItemSlotProps<T = unknown> {
+  item: CommandItem<T>
+  match: CommandItemMatch | null
+}
+
+export interface CommandEmptySlotProps {
+  search: string
+}
+
+export function isCommandGroup<T>(
+  entry: CommandItem<T> | CommandGroup<T>,
+): entry is CommandGroup<T> {
   return 'items' in entry
 }

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

@@ -1,6 +1,9 @@
 import type { CommandItem } from '../types'
 import type * as Shared from '../../../../../shared/src/lib/command-palette/match'
 
-export { filterCommands } from '../../../../../shared/src/lib/command-palette/match'
-export type CommandMatch = Shared.CommandMatch<CommandItem>
-export type CommandSection = Shared.CommandSection<CommandItem>
+export {
+  commandMatchRange,
+  filterCommands,
+} 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/description-list/DescriptionList.vue

@@ -3,11 +3,17 @@
 
   defineOptions({ name: 'HnDescriptionList' })
 
-  const props = defineProps<{ class?: string }>()
+  const props = defineProps<{
+    orientation?: 'vertical' | 'horizontal'
+    class?: string
+  }>()
 </script>
 
 <template>
-  <dl :class="cn('hn-dl', props.class)">
+  <dl
+    :data-orientation="props.orientation === 'horizontal' ? 'horizontal' : undefined"
+    :class="cn('hn-dl', props.class)"
+  >
     <slot />
   </dl>
 </template>