@hina-ui/vue 1.0.0

package/src/components/combobox/Combobox.vue

@@ -0,0 +1,145 @@
+<script setup lang="ts">
+  import { computed, ref, shallowRef, watch } from 'vue'
+  import { ComboboxAnchor, ComboboxInput, ComboboxRoot, ComboboxTrigger } from 'reka-ui'
+  import { cn } from '../../lib/cn'
+  import { focusFieldFrom } from '../../lib/field-focus'
+  import { useUiLocale } from '../../locale'
+  import { X } from '@lucide/vue'
+  import InputAction from '../input/InputAction.vue'
+  import DisclosureIcon from '../disclosure-icon/DisclosureIcon.vue'
+  import { useFieldControl } from '../form-field/context'
+  import { injectInputGroup } from '../input-group/context'
+  import {
+    inputActionSlot,
+    inputAdornment,
+    inputControl,
+    inputEmbedded,
+    inputHost,
+    inputIndicator,
+    type InputVariants,
+  } from '../input/input.variants'
+  import { flattenOptions, type SelectItems, type SelectOption } from '../select/types'
+  import ComboboxList from './ComboboxList.vue'
+
+  defineOptions({ name: 'HnCombobox', inheritAttrs: false })
+
+  const props = defineProps<{
+    options: SelectItems
+    placeholder?: string
+    ignoreFilter?: boolean
+    clearable?: boolean
+    variant?: InputVariants['variant']
+    size?: InputVariants['size']
+    disabled?: boolean
+    invalid?: boolean
+    class?: string
+  }>()
+  const emit = defineEmits<{ clear: [] }>()
+
+  const model = defineModel<string | number | null>()
+  const search = defineModel<string>('search', { default: '' })
+  const open = defineModel<boolean>('open', { default: false })
+
+  defineSlots<{ option(props: { option: SelectOption }): unknown }>()
+
+  const t = useUiLocale()
+  const group = injectInputGroup()
+  const keyboard = ref(false)
+  const input = shallowRef<{ $el: HTMLInputElement } | null>(null)
+
+  const size = computed(() => (group ? group.size.value : props.size))
+  const {
+    id: fieldId,
+    invalid,
+    disabled,
+    describedBy,
+  } = useFieldControl({
+    invalid: () => props.invalid || !!group?.invalid.value,
+    disabled: () => props.disabled || !!group?.disabled.value,
+  })
+  const clearing = computed(
+    () => !!props.clearable && model.value != null && model.value !== '' && !disabled.value,
+  )
+
+  function displayValue(value: string | number | null | undefined) {
+    return flattenOptions(props.options).find(option => option.value === value)?.label ?? ''
+  }
+
+  function clear() {
+    model.value = null
+    search.value = ''
+    emit('clear')
+    input.value?.$el.focus()
+  }
+
+  watch(search, value => {
+    if (value === '' && model.value != null) model.value = null
+  })
+
+  watch(open, value => {
+    if (!value) keyboard.value = false
+  })
+</script>
+
+<template>
+  <ComboboxRoot
+    v-model="model"
+    v-model:open="open"
+    :disabled="disabled"
+    :ignore-filter="props.ignoreFilter"
+    open-on-click
+  >
+    <ComboboxAnchor as-child>
+      <div
+        data-hn-combobox
+        :data-invalid="invalid ? '' : undefined"
+        :class="
+          cn(
+            group ? inputEmbedded() : inputHost({ variant: props.variant, size: props.size }),
+            props.class,
+          )
+        "
+        @click="focusFieldFrom($event.currentTarget as HTMLElement, $event.target as HTMLElement)"
+        @keydown="keyboard = true"
+      >
+        <ComboboxInput
+          ref="input"
+          v-bind="$attrs"
+          v-model="search"
+          :id="fieldId"
+          :aria-describedby="describedBy"
+          :display-value="displayValue"
+          :placeholder="props.placeholder ?? t.combobox.placeholder"
+          :disabled="disabled"
+          :aria-invalid="invalid || undefined"
+          :class="inputControl({ trailing: true })"
+        />
+        <Transition
+          enter-active-class="hn-transition-base"
+          enter-from-class="scale-90 opacity-0"
+          leave-active-class="hn-transition"
+          leave-to-class="scale-90 opacity-0"
+        >
+          <span v-if="clearing" data-hn-combobox-clear :class="inputActionSlot()">
+            <InputAction :label="t.common.clear" @click="clear">
+              <X />
+            </InputAction>
+          </span>
+        </Transition>
+        <ComboboxTrigger
+          :aria-label="t.combobox.toggle"
+          :disabled="disabled"
+          :class="cn(inputAdornment(), inputIndicator())"
+          @mousedown.prevent
+        >
+          <DisclosureIcon :open="open" />
+        </ComboboxTrigger>
+      </div>
+    </ComboboxAnchor>
+    <ComboboxList :options="props.options" :keyboard="keyboard">
+      <template #option="slotProps">
+        <slot name="option" v-bind="slotProps" />
+      </template>
+    </ComboboxList>
+  </ComboboxRoot>
+</template>

package/src/components/combobox/ComboboxList.vue

@@ -0,0 +1,98 @@
+<script setup lang="ts">
+  import { Check } from '@lucide/vue'
+  import {
+    ComboboxContent,
+    ComboboxEmpty,
+    ComboboxGroup,
+    ComboboxItem,
+    ComboboxItemIndicator,
+    ComboboxLabel,
+    ComboboxPortal,
+  } from 'reka-ui'
+  import { ref } from 'vue'
+  import { useUiLocale } from '../../locale'
+  import Card from '../card/Card.vue'
+  import ScrollArea from '../scroll-area/ScrollArea.vue'
+  import { selectEmpty, selectItem, selectLabel, selectListBody } from '../select/select.variants'
+  import { isOptionGroup, type SelectItems, type SelectOption } from '../select/types'
+  import { comboboxContent, comboboxList } from './combobox.variants'
+
+  defineOptions({ name: 'HnComboboxList' })
+
+  const props = defineProps<{ options: SelectItems; keyboard?: boolean }>()
+
+  const fresh = ref(false)
+
+  defineSlots<{ option(props: { option: SelectOption }): unknown }>()
+
+  const t = useUiLocale()
+</script>
+
+<template>
+  <ComboboxPortal>
+    <ComboboxContent as-child position="popper" align="start" :side-offset="8">
+      <Card
+        :padded="false"
+        data-hn-combobox-content
+        :data-hn-fresh="fresh && !props.keyboard ? '' : undefined"
+        :class="comboboxContent()"
+        @vue:mounted="fresh = true"
+        @keydown="fresh = false"
+        @pointermove="fresh = false"
+      >
+        <ScrollArea :class="comboboxList()">
+          <div :class="selectListBody()">
+            <template
+              v-for="item in props.options"
+              :key="isOptionGroup(item) ? item.label : item.value"
+            >
+              <ComboboxGroup v-if="isOptionGroup(item)">
+                <ComboboxLabel :class="selectLabel()">{{ item.label }}</ComboboxLabel>
+                <ComboboxItem
+                  v-for="option in item.options"
+                  :key="option.value"
+                  :value="option.value"
+                  :text-value="option.label"
+                  :disabled="option.disabled"
+                  :class="selectItem()"
+                >
+                  <span class="min-w-0 flex-1">
+                    <slot name="option" :option="option">
+                      <span class="block truncate">{{ option.label }}</span>
+                      <span v-if="option.description" class="text-muted block truncate text-xs">
+                        {{ option.description }}
+                      </span>
+                    </slot>
+                  </span>
+                  <span class="flex size-4 shrink-0 items-center justify-center">
+                    <ComboboxItemIndicator><Check /></ComboboxItemIndicator>
+                  </span>
+                </ComboboxItem>
+              </ComboboxGroup>
+              <ComboboxItem
+                v-else
+                :value="item.value"
+                :text-value="item.label"
+                :disabled="item.disabled"
+                :class="selectItem()"
+              >
+                <span class="min-w-0 flex-1">
+                  <slot name="option" :option="item">
+                    <span class="block truncate">{{ item.label }}</span>
+                    <span v-if="item.description" class="text-muted block truncate text-xs">
+                      {{ item.description }}
+                    </span>
+                  </slot>
+                </span>
+                <span class="flex size-4 shrink-0 items-center justify-center">
+                  <ComboboxItemIndicator><Check /></ComboboxItemIndicator>
+                </span>
+              </ComboboxItem>
+            </template>
+            <ComboboxEmpty :class="selectEmpty()">{{ t.select.empty }}</ComboboxEmpty>
+          </div>
+        </ScrollArea>
+      </Card>
+    </ComboboxContent>
+  </ComboboxPortal>
+</template>

package/src/components/combobox/combobox.variants.ts

@@ -0,0 +1,12 @@
+import { tv } from '../../lib/tv'
+
+export const comboboxContent = tv({
+  base: [
+    'hn-anim-pop z-(--hn-z-overlay) flex w-[var(--reka-combobox-trigger-width)] min-w-40 flex-col overflow-hidden shadow-md outline-none',
+    '[&[data-hn-fresh]_[data-highlighted]:not(:hover)]:[--hn-state-hover-opacity:0]',
+  ],
+})
+
+export const comboboxList = tv({
+  base: 'max-h-[min(20rem,var(--reka-combobox-content-available-height))]',
+})

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

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+  import {
+    DialogContent,
+    DialogOverlay,
+    DialogPortal,
+    DialogRoot,
+    DialogTitle,
+    DialogTrigger,
+    VisuallyHidden,
+  } from 'reka-ui'
+  import { computed, watch } from 'vue'
+  import { useUiLocale } from '../../locale'
+  import CommandPalettePanel from './CommandPalettePanel.vue'
+  import { useHotkey } from './composables/useHotkey'
+  import { commandWrapper } from './command-palette.variants'
+  import type { CommandItem, CommandItems } from './types'
+
+  defineOptions({ name: 'HnCommandPalette', inheritAttrs: false })
+
+  const props = defineProps<{
+    items: CommandItems
+    placeholder?: string
+    label?: string
+    hotkey?: string
+    ignoreFilter?: boolean
+    inline?: boolean
+    class?: string
+  }>()
+
+  const emit = defineEmits<{ select: [item: CommandItem] }>()
+
+  const open = defineModel<boolean>('open', { default: false })
+  const search = defineModel<string>('search', { default: '' })
+
+  const t = useUiLocale()
+
+  const label = computed(() => props.label ?? t.value.command.label)
+
+  useHotkey(
+    () => (props.inline ? undefined : props.hotkey),
+    () => {
+      open.value = !open.value
+    },
+  )
+
+  watch(open, value => {
+    if (!value) search.value = ''
+  })
+
+  function select(item: CommandItem) {
+    item.onSelect?.()
+    emit('select', item)
+    if (!props.inline) open.value = false
+  }
+</script>
+
+<template>
+  <CommandPalettePanel
+    v-if="props.inline"
+    v-bind="$attrs"
+    v-model:search="search"
+    inline
+    :items="props.items"
+    :label="label"
+    :placeholder="props.placeholder"
+    :ignore-filter="props.ignoreFilter"
+    :class="props.class"
+    @select="select"
+  />
+  <DialogRoot v-else v-model:open="open">
+    <DialogTrigger v-if="$slots.default" as-child>
+      <slot />
+    </DialogTrigger>
+    <DialogPortal>
+      <DialogOverlay class="hn-scrim" />
+      <div :class="commandWrapper()">
+        <DialogContent as-child>
+          <CommandPalettePanel
+            v-bind="$attrs"
+            v-model:search="search"
+            auto-focus
+            :items="props.items"
+            :label="label"
+            :placeholder="props.placeholder"
+            :ignore-filter="props.ignoreFilter"
+            :class="props.class"
+            @select="select"
+          >
+            <VisuallyHidden>
+              <DialogTitle>{{ label }}</DialogTitle>
+            </VisuallyHidden>
+          </CommandPalettePanel>
+        </DialogContent>
+      </div>
+    </DialogPortal>
+  </DialogRoot>
+</template>

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

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+  import { ListboxItem } from 'reka-ui'
+  import { computed } from 'vue'
+  import Kbd from '../kbd/Kbd.vue'
+  import { selectItem } from '../select/select.variants'
+  import { commandItemBody, commandItemHint, commandItemMatch } from './command-palette.variants'
+  import type { CommandMatch } from './utils/match'
+
+  defineOptions({ name: 'HnCommandPaletteItem' })
+
+  const props = defineProps<{ match: CommandMatch }>()
+  const emit = defineEmits<{ select: [] }>()
+
+  const parts = computed(() => {
+    const { item, start, end } = props.match
+    if (start < 0) return [item.label, '', '']
+    return [item.label.slice(0, start), item.label.slice(start, end), item.label.slice(end)]
+  })
+</script>
+
+<template>
+  <ListboxItem
+    :value="props.match.item.id"
+    :disabled="props.match.item.disabled"
+    data-hn-highlight-only
+    :class="selectItem()"
+    @select="emit('select')"
+  >
+    <component
+      :is="props.match.item.icon"
+      v-if="props.match.item.icon"
+      aria-hidden="true"
+      class="text-muted"
+    />
+    <span :class="commandItemBody()">
+      <span class="truncate">
+        <span v-text="parts[0]" />
+        <span v-if="parts[1]" :class="commandItemMatch()" v-text="parts[1]" />
+        <span v-if="parts[2]" v-text="parts[2]" />
+      </span>
+      <span v-if="props.match.item.description" class="text-muted truncate text-xs">
+        {{ props.match.item.description }}
+      </span>
+    </span>
+    <span v-if="props.match.item.kbd?.length" :class="commandItemHint()">
+      <Kbd v-for="key in props.match.item.kbd" :key="key">{{ key }}</Kbd>
+    </span>
+  </ListboxItem>
+</template>

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

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+  import { Search } from '@lucide/vue'
+  import {
+    ListboxContent,
+    ListboxFilter,
+    ListboxGroup,
+    ListboxGroupLabel,
+    ListboxRoot,
+  } from 'reka-ui'
+  import { computed } from 'vue'
+  import { cn } from '../../lib/cn'
+  import { useUiLocale } from '../../locale'
+  import Card from '../card/Card.vue'
+  import ScrollArea from '../scroll-area/ScrollArea.vue'
+  import { selectLabel, selectListBody } from '../select/select.variants'
+  import CommandPaletteItem from './CommandPaletteItem.vue'
+  import {
+    commandCard,
+    commandEmpty,
+    commandInput,
+    commandInputRow,
+    commandList,
+  } from './command-palette.variants'
+  import type { CommandItem, CommandItems } from './types'
+  import { filterCommands } from './utils/match'
+
+  defineOptions({ name: 'HnCommandPalettePanel', inheritAttrs: false })
+
+  const props = defineProps<{
+    items: CommandItems
+    label: string
+    placeholder?: string
+    ignoreFilter?: boolean
+    autoFocus?: boolean
+    inline?: boolean
+    class?: string
+  }>()
+
+  const emit = defineEmits<{ select: [item: CommandItem] }>()
+
+  const search = defineModel<string>('search', { default: '' })
+
+  const t = useUiLocale()
+
+  const sections = computed(() =>
+    filterCommands(props.items, props.ignoreFilter ? '' : search.value),
+  )
+</script>
+
+<template>
+  <Card
+    v-bind="$attrs"
+    data-hn-command-palette
+    :padded="false"
+    :class="cn(commandCard({ inline: props.inline }), props.class)"
+  >
+    <slot />
+    <ListboxRoot selection-behavior="replace" highlight-on-hover class="flex min-h-0 flex-col">
+      <div :class="commandInputRow()">
+        <Search aria-hidden="true" />
+        <ListboxFilter
+          v-model="search"
+          :auto-focus="props.autoFocus"
+          :placeholder="props.placeholder ?? t.command.placeholder"
+          :aria-label="props.label"
+          :class="commandInput()"
+        />
+      </div>
+      <ScrollArea :class="commandList()">
+        <ListboxContent :aria-label="props.label" :class="selectListBody()">
+          <template v-for="section in sections" :key="section.key">
+            <ListboxGroup v-if="section.label">
+              <ListboxGroupLabel :class="selectLabel()">{{ section.label }}</ListboxGroupLabel>
+              <CommandPaletteItem
+                v-for="match in section.matches"
+                :key="match.item.id"
+                :match="match"
+                @select="emit('select', match.item)"
+              />
+            </ListboxGroup>
+            <template v-else>
+              <CommandPaletteItem
+                v-for="match in section.matches"
+                :key="match.item.id"
+                :match="match"
+                @select="emit('select', match.item)"
+              />
+            </template>
+          </template>
+          <div v-if="sections.length === 0" :class="commandEmpty()">{{ t.command.empty }}</div>
+        </ListboxContent>
+      </ScrollArea>
+    </ListboxRoot>
+  </Card>
+</template>

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

@@ -0,0 +1,45 @@
+import { tv } from '../../lib/tv'
+
+export const commandWrapper = tv({
+  base: 'pointer-events-none fixed inset-0 z-(--hn-z-overlay) grid items-start justify-items-center p-4 pt-[15dvh] max-sm:pt-4',
+})
+
+export const commandCard = tv({
+  base: 'flex w-full max-w-xl flex-col overflow-hidden outline-none',
+  variants: {
+    inline: {
+      false: 'hn-anim-modal pointer-events-auto shadow-lg',
+    },
+  },
+  defaultVariants: {
+    inline: false,
+  },
+})
+
+export const commandInputRow = tv({
+  base: 'border-line text-muted flex h-12 shrink-0 items-center gap-2.5 border-b px-4 [&>svg]:size-4 [&>svg]:shrink-0',
+})
+
+export const commandInput = tv({
+  base: 'text-fg placeholder:text-faint h-full min-w-0 flex-1 bg-transparent text-sm outline-none',
+})
+
+export const commandList = tv({
+  base: 'max-h-[min(24rem,60dvh)]',
+})
+
+export const commandItemBody = tv({
+  base: 'flex min-w-0 flex-1 flex-col',
+})
+
+export const commandItemMatch = tv({
+  base: 'text-accent-text font-medium',
+})
+
+export const commandItemHint = tv({
+  base: 'ms-auto flex shrink-0 items-center gap-1',
+})
+
+export const commandEmpty = tv({
+  base: 'text-muted px-4 py-8 text-center text-sm',
+})

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

@@ -0,0 +1,17 @@
+import { useEventListener } from '@vueuse/core'
+import { computed, toValue, type MaybeRefOrGetter } from 'vue'
+import { matchesHotkey, parseHotkey } from '../utils/hotkey'
+
+export function useHotkey(spec: MaybeRefOrGetter<string | undefined>, handler: () => void) {
+  const hotkey = computed(() => {
+    const value = toValue(spec)
+    return value ? parseHotkey(value) : null
+  })
+
+  useEventListener('keydown', (event: KeyboardEvent) => {
+    if (!hotkey.value || event.defaultPrevented || event.repeat) return
+    if (!matchesHotkey(event, hotkey.value)) return
+    event.preventDefault()
+    handler()
+  })
+}

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

@@ -0,0 +1,23 @@
+import type { Component } from 'vue'
+
+export interface CommandItem {
+  id: string
+  label: string
+  description?: string
+  keywords?: string[]
+  icon?: Component
+  kbd?: string[]
+  disabled?: boolean
+  onSelect?: () => void
+}
+
+export interface CommandGroup {
+  label: string
+  items: CommandItem[]
+}
+
+export type CommandItems = Array<CommandItem | CommandGroup>
+
+export function isCommandGroup(entry: CommandItem | CommandGroup): entry is CommandGroup {
+  return 'items' in entry
+}

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

@@ -0,0 +1,27 @@
+export interface Hotkey {
+  key: string
+  mod: boolean
+  shift: boolean
+  alt: boolean
+}
+
+export function parseHotkey(spec: string): Hotkey {
+  const parts = spec
+    .toLowerCase()
+    .split('+')
+    .map(part => part.trim())
+    .filter(Boolean)
+  const modifiers = parts.slice(0, -1)
+  return {
+    key: parts.at(-1) ?? '',
+    mod: modifiers.includes('mod'),
+    shift: modifiers.includes('shift'),
+    alt: modifiers.includes('alt'),
+  }
+}
+
+export function matchesHotkey(event: KeyboardEvent, hotkey: Hotkey): boolean {
+  if (event.key.toLowerCase() !== hotkey.key) return false
+  const mod = event.metaKey || event.ctrlKey
+  return mod === hotkey.mod && event.shiftKey === hotkey.shift && event.altKey === hotkey.alt
+}

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

@@ -0,0 +1,76 @@
+import { isCommandGroup, type CommandItem, type CommandItems } from '../types'
+
+export interface CommandMatch {
+  item: CommandItem
+  start: number
+  end: number
+}
+
+export interface CommandSection {
+  key: string
+  label?: string
+  matches: CommandMatch[]
+}
+
+interface Scored extends CommandMatch {
+  score: number
+}
+
+interface ScoredSection extends CommandSection {
+  best: number
+}
+
+function score(item: CommandItem, query: string): Scored | null {
+  if (!query) return { item, start: -1, end: -1, score: 0 }
+  const label = item.label.toLowerCase()
+  const at = label.indexOf(query)
+  if (at === 0) return { item, start: 0, end: query.length, score: label === query ? 4 : 3 }
+  if (at > 0) return { item, start: at, end: at + query.length, score: 2 }
+  const keywords = item.keywords?.map(keyword => keyword.toLowerCase()) ?? []
+  if (keywords.includes(query)) return { item, start: -1, end: -1, score: 1.5 }
+  if (keywords.some(keyword => keyword.includes(query)))
+    return { item, start: -1, end: -1, score: 1 }
+  if (item.description?.toLowerCase().includes(query)) {
+    return { item, start: -1, end: -1, score: 0.5 }
+  }
+  return null
+}
+
+function rank(items: CommandItem[], query: string): Scored[] {
+  return items
+    .map(item => score(item, query))
+    .filter((match): match is Scored => match !== null)
+    .sort((a, b) => b.score - a.score)
+}
+
+export function filterCommands(items: CommandItems, query: string): CommandSection[] {
+  const q = query.trim().toLowerCase()
+  const sections: ScoredSection[] = []
+  let loose: CommandItem[] = []
+  const push = (label: string | undefined, entries: CommandItem[]) => {
+    const ranked = rank(entries, q)
+    if (ranked.length === 0) return
+    sections.push({
+      key: String(sections.length),
+      label,
+      best: ranked[0]!.score,
+      matches: ranked.map(({ item, start, end }) => ({ item, start, end })),
+    })
+  }
+  const flush = () => {
+    if (loose.length === 0) return
+    push(undefined, loose)
+    loose = []
+  }
+  for (const entry of items) {
+    if (!isCommandGroup(entry)) {
+      loose.push(entry)
+      continue
+    }
+    flush()
+    push(entry.label, entry.items)
+  }
+  flush()
+  if (q) sections.sort((a, b) => b.best - a.best)
+  return sections.map(({ key, label, matches }) => ({ key, label, matches }))
+}