@hina-ui/vue 1.7.7 → 1.7.8

package/src/components/app-shell/AppShell.vue

@@ -1,5 +1,14 @@
 <script setup lang="ts">
-  import { computed, getCurrentInstance, shallowRef, watch } from 'vue'
+  import {
+    computed,
+    getCurrentInstance,
+    h,
+    inject,
+    onMounted,
+    shallowRef,
+    ssrContextKey,
+    watch,
+  } from 'vue'
   import { cn } from '../../lib/cn'
   import { useUiLocale } from '../../locale'
   import ScrollArea from '../scroll-area/ScrollArea.vue'
@@ -7,6 +16,10 @@
   import Drawer from '../drawer/Drawer.vue'
   import DrawerScope from '../sidebar/DrawerScope'
   import { provideSidebar, type SidebarState } from '../sidebar/context'
+  import {
+    createScrollRestoreSession,
+    scrollRestoreScript,
+  } from '../../../../shared/src/lib/scroll-restore'
   import { useDesktopQuery } from './composables/useDesktopQuery'
   import { useSidebarScrollUpdates } from './composables/useSidebarScrollUpdates'
 
@@ -56,6 +69,32 @@
     onTransitionRun,
   })
 
+  const RestoreScript = () => h('script', { innerHTML: scrollRestoreScript() })
+  const scripted = shallowRef(!!inject(ssrContextKey, null) || !!getCurrentInstance()?.vnode.el)
+  onMounted(() => {
+    scripted.value = false
+  })
+
+  let restoredKey: string | undefined
+  watch(
+    () => [props.restoreKey, main.value?.instance] as const,
+    ([key, instance], _previous, onCleanup) => {
+      if (!key || !instance) return
+      const { viewport, target } = instance.elements()
+      const session = createScrollRestoreSession({
+        key,
+        viewport,
+        target,
+        initial: restoredKey === undefined || restoredKey === key,
+        onUpdated: listener => instance.on('updated', listener),
+        onScroll: listener => instance.on('scroll', listener),
+      })
+      restoredKey = key
+      onCleanup(() => session.dispose())
+    },
+    { immediate: true, flush: 'post' },
+  )
+
   type Navigable = { currentRoute?: { value?: { fullPath?: string } } }
   const router = getCurrentInstance()?.appContext.config.globalProperties.$router as
     Navigable | undefined
@@ -70,7 +109,14 @@
 
 <template>
   <TooltipProvider>
-    <div :class="cn('bg-canvas text-fg flex h-screen flex-col overflow-hidden', props.class)">
+    <div
+      :class="
+        cn(
+          'bg-canvas text-fg flex h-screen flex-col overflow-hidden [--hn-app-shell-header-h:calc(3.5rem+1px)]',
+          props.class,
+        )
+      "
+    >
       <div v-if="$slots.banner" class="shrink-0">
         <slot name="banner" />
       </div>
@@ -79,8 +125,11 @@
           <slot name="sidebar" />
         </div>
         <div class="flex min-h-0 min-w-0 flex-1 flex-col">
-          <header v-if="$slots.header" class="border-line bg-canvas shrink-0 border-b">
-            <div class="flex h-14 items-center gap-3 px-4 sm:px-6">
+          <header
+            v-if="$slots.header"
+            class="border-line bg-canvas h-(--hn-app-shell-header-h) shrink-0 border-b"
+          >
+            <div class="flex h-full items-center gap-3 px-4 sm:px-6">
               <slot name="header" />
             </div>
           </header>
@@ -88,6 +137,7 @@
             <ScrollArea ref="main" :data-scroll-restore="props.restoreKey" class="h-full">
               <slot />
             </ScrollArea>
+            <RestoreScript v-if="props.restoreKey && scripted" />
           </main>
         </div>
       </div>

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>