@hina-ui/vue 1.7.3 → 1.7.4

package/src/components/autocomplete/Autocomplete.vue

@@ -0,0 +1,207 @@
+<script setup lang="ts" generic="T extends AutocompleteOption = AutocompleteOption">
+  import { computed } from 'vue'
+  import { cn } from '../../lib/cn'
+  import { focusFieldFrom } from '../../lib/field-focus'
+  import { rekaPopoverStyle } from '../../lib/reka/styles'
+  import { useUiLocale } from '../../locale'
+  import { useFieldControl } from '../form-field/context'
+  import { injectInputGroup } from '../input-group/context'
+  import {
+    inputAdornment,
+    inputControl,
+    inputEmbedded,
+    inputHost,
+    type InputVariants,
+  } from '../input/input.variants'
+  import { selectEmpty, selectItem, selectListBody } from '../select/select.variants'
+  import Popover from '../popover/Popover.vue'
+  import ScrollArea from '../scroll-area/ScrollArea.vue'
+  import Spinner from '../spinner/Spinner.vue'
+  import { autocompleteContent, autocompleteList } from './autocomplete.variants'
+  import { useAutocomplete } from './composables/useAutocomplete'
+  import type {
+    AutocompleteOption,
+    AutocompleteSelection,
+    CompletionContext,
+    CompletionEdit,
+  } from './types'
+
+  defineOptions({ name: 'HnAutocomplete', inheritAttrs: false })
+  const props = defineProps<{
+    options: readonly T[]
+    getCompletion?: (option: T, context: CompletionContext) => CompletionEdit
+    loading?: boolean
+    selectOnTab?: boolean
+    placeholder?: string
+    disabled?: boolean
+    readonly?: boolean
+    invalid?: boolean
+    size?: InputVariants['size']
+    variant?: InputVariants['variant']
+    class?: string
+  }>()
+  const model = defineModel<string>({ default: '' })
+  const open = defineModel<boolean>('open', { default: false })
+  const emit = defineEmits<{
+    query: [context: CompletionContext]
+    select: [selection: AutocompleteSelection<T>]
+    submit: [text: string]
+    clear: []
+  }>()
+  defineSlots<{
+    leading?(): unknown
+    trailing?(): unknown
+    option?(props: { option: T; active: boolean }): unknown
+    empty?(): unknown
+    loading?(): unknown
+  }>()
+  const t = useUiLocale()
+  const group = injectInputGroup()
+  const size = computed(() => (group ? group.size.value : props.size))
+  const { id, labelledBy, describedBy, invalid, disabled } = useFieldControl({
+    invalid: () => props.invalid || !!group?.invalid.value,
+    disabled: () => props.disabled || !!group?.disabled.value,
+  })
+  const {
+    input,
+    host,
+    scroll,
+    listId,
+    optionId,
+    active,
+    activeId,
+    visible,
+    composing,
+    show,
+    onInput,
+    onBlur,
+    onCompositionEnd,
+    onKeydown,
+    select,
+    highlight,
+  } = useAutocomplete({
+    options: () => props.options,
+    model,
+    open,
+    disabled: () => disabled.value,
+    readonly: () => props.readonly,
+    selectOnTab: () => props.selectOnTab,
+    getCompletion: () => props.getCompletion,
+    onQuery: value => emit('query', value),
+    onSelect: value => emit('select', value),
+    onSubmit: value => emit('submit', value),
+    onClear: () => emit('clear'),
+  })
+  defineExpose({ input, focus: () => input.value?.focus(), blur: () => input.value?.blur() })
+</script>
+
+<template>
+  <div
+    ref="host"
+    data-hn-autocomplete
+    :data-invalid="invalid ? '' : undefined"
+    :data-disabled="disabled ? '' : undefined"
+    :class="cn(group ? inputEmbedded() : inputHost({ size, variant: props.variant }), props.class)"
+    @click="focusFieldFrom($event.currentTarget as HTMLElement, $event.target as HTMLElement)"
+  >
+    <span v-if="$slots.leading" :class="inputAdornment()"><slot name="leading" /></span>
+    <input
+      ref="input"
+      v-bind="$attrs"
+      :id="id"
+      :value="model"
+      type="text"
+      role="combobox"
+      autocomplete="off"
+      aria-autocomplete="list"
+      aria-haspopup="listbox"
+      :aria-expanded="visible"
+      :aria-controls="visible ? listId : undefined"
+      :aria-activedescendant="activeId"
+      :aria-busy="props.loading || undefined"
+      :aria-invalid="invalid || undefined"
+      :aria-labelledby="labelledBy"
+      :aria-describedby="describedBy"
+      :disabled="disabled"
+      :readonly="props.readonly"
+      :placeholder="props.placeholder"
+      :class="
+        inputControl({ leading: !!$slots.leading, trailing: !!$slots.trailing || props.loading })
+      "
+      @input="onInput"
+      @focus="show"
+      @click="show"
+      @blur="onBlur"
+      @keydown="onKeydown"
+      @compositionstart="composing = true"
+      @compositionend="onCompositionEnd"
+    />
+    <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="props.loading" :class="inputAdornment()"><Spinner size="sm" /></span>
+    </Transition>
+    <span v-if="$slots.trailing" :class="inputAdornment()"><slot name="trailing" /></span>
+  </div>
+  <Popover
+    v-model:open="visible"
+    :anchor="host"
+    :modal="false"
+    :padded="false"
+    align="start"
+    role="presentation"
+    :aria-hidden="!visible || undefined"
+    :class="autocompleteContent()"
+    :style="rekaPopoverStyle"
+    @open-auto-focus.prevent
+    @close-auto-focus.prevent
+    @escape-key-down.prevent
+  >
+    <template #content>
+      <ScrollArea ref="scroll" :class="autocompleteList()">
+        <div
+          :id="listId"
+          role="listbox"
+          :aria-label="
+            ($attrs['aria-label'] as string | undefined) ??
+            t.select.optionCountLabel(props.options.length)
+          "
+          :aria-labelledby="labelledBy"
+          :aria-busy="props.loading || undefined"
+          :class="selectListBody()"
+        >
+          <div
+            v-for="(option, index) in props.options"
+            :id="optionId(index)"
+            :key="option.value"
+            role="option"
+            :aria-selected="active === option.value"
+            :aria-disabled="option.disabled || undefined"
+            :data-disabled="option.disabled ? '' : undefined"
+            :data-highlighted="active === option.value ? '' : undefined"
+            :class="selectItem()"
+            @pointerdown.prevent
+            @pointermove="highlight(option, $event)"
+            @click="select(option)"
+          >
+            <slot name="option" :option="option" :active="active === option.value">
+              <span class="min-w-0 flex-1">
+                <span class="block truncate">{{ option.label }}</span>
+                <span v-if="option.description" class="text-muted block truncate text-xs">
+                  {{ option.description }}
+                </span>
+              </span>
+            </slot>
+          </div>
+        </div>
+        <div v-if="props.loading || !props.options.length" role="status" :class="selectEmpty()">
+          <slot v-if="props.loading" name="loading">{{ t.common.loading }}</slot>
+          <slot v-else name="empty">{{ t.select.empty }}</slot>
+        </div>
+      </ScrollArea>
+    </template>
+  </Popover>
+</template>

package/src/components/autocomplete/autocomplete.variants.ts

@@ -0,0 +1 @@
+export { autocompleteContent, autocompleteList } from '@hina-ui/shared/variants/autocomplete'

package/src/components/autocomplete/composables/useAutocomplete.ts

@@ -0,0 +1,231 @@
+import { computed, nextTick, shallowRef, useId, watch, type Ref } from 'vue'
+import { useEventListener } from '@vueuse/core'
+import { applyCompletion } from '@hina-ui/shared/lib/completion'
+import type {
+  AutocompleteOption,
+  AutocompleteSelection,
+  CompletionContext,
+  CompletionEdit,
+} from '../types'
+
+export function useAutocomplete<T extends AutocompleteOption>(config: {
+  options: () => readonly T[]
+  model: Ref<string>
+  open: Ref<boolean>
+  disabled: () => boolean
+  readonly: () => boolean | undefined
+  selectOnTab: () => boolean | undefined
+  getCompletion: () => ((option: T, context: CompletionContext) => CompletionEdit) | undefined
+  onQuery: (context: CompletionContext) => void
+  onSelect: (selection: AutocompleteSelection<T>) => void
+  onSubmit: (text: string) => void
+  onClear: () => void
+}) {
+  const input = shallowRef<HTMLInputElement>()
+  const host = shallowRef<HTMLElement>()
+  const scroll = shallowRef<{ viewport: HTMLElement | undefined }>()
+  const active = shallowRef<string | number>()
+  const composing = shallowRef(false)
+  const listId = `hn-autocomplete-${useId()}`
+  const blocked = computed(() => config.disabled() || !!config.readonly())
+  const visible = computed({
+    get: () => config.open.value && !blocked.value,
+    set: value => {
+      config.open.value = value
+    },
+  })
+  const activeIndex = computed(() =>
+    config.options().findIndex(option => option.value === active.value && !option.disabled),
+  )
+  const optionId = (index: number) => `${listId}-${index}`
+  const activeId = computed(() =>
+    visible.value && activeIndex.value >= 0 ? optionId(activeIndex.value) : undefined,
+  )
+  let lastQuery = ''
+  let revision = 0
+  let restoringFocus = false
+
+  function context(): CompletionContext {
+    const text = input.value?.value ?? config.model.value
+    return {
+      text,
+      selectionStart: input.value?.selectionStart ?? text.length,
+      selectionEnd: input.value?.selectionEnd ?? text.length,
+    }
+  }
+
+  function query(force = false) {
+    if (blocked.value || composing.value) return false
+    const value = context()
+    const signature = JSON.stringify(value)
+    if (!force && signature === lastQuery) return false
+    lastQuery = signature
+    active.value = undefined
+    config.onQuery(value)
+    return true
+  }
+
+  function show() {
+    if (blocked.value || composing.value || restoringFocus) return
+    const reopening = !visible.value
+    visible.value = true
+    query(reopening)
+  }
+
+  function onInput() {
+    revision++
+    config.model.value = input.value?.value ?? ''
+    active.value = undefined
+    if (composing.value) return
+    visible.value = true
+    query()
+  }
+
+  function onCompositionEnd() {
+    composing.value = false
+    onInput()
+  }
+
+  function onBlur() {
+    revision++
+    visible.value = false
+  }
+
+  useEventListener(
+    () => input.value?.ownerDocument,
+    'selectionchange',
+    () => {
+      if (input.value?.ownerDocument.activeElement !== input.value || composing.value) return
+      if (query()) visible.value = true
+    },
+  )
+
+  async function select(option: T) {
+    if (blocked.value || composing.value || !visible.value || option.disabled) return
+    const before = context()
+    const edit = config.getCompletion()?.(option, before) ?? {
+      range: [0, before.text.length],
+      text: option.label,
+    }
+    const after = applyCompletion(before, edit)
+    const current = ++revision
+    config.model.value = after.text
+    active.value = undefined
+    visible.value = !!edit.keepOpen
+    lastQuery = JSON.stringify(after)
+    config.onSelect({ option, context: before, edit })
+    await nextTick()
+    if (current !== revision || !input.value || blocked.value || input.value.value !== after.text)
+      return
+    restoringFocus = true
+    input.value.focus({ preventScroll: true })
+    restoringFocus = false
+    input.value.setSelectionRange(after.selectionStart, after.selectionEnd)
+    query(true)
+  }
+
+  async function move(direction: number) {
+    visible.value = true
+    await nextTick()
+    if (!visible.value || blocked.value) return
+    const options = config.options()
+    let index = activeIndex.value
+    if (index < 0) index = direction > 0 ? -1 : options.length
+    for (let step = 0; step < options.length; step++) {
+      index = (index + direction + options.length) % options.length
+      if (!options[index]!.disabled) {
+        active.value = options[index]!.value
+        break
+      }
+    }
+    await nextTick()
+    const row = activeId.value ? input.value?.ownerDocument.getElementById(activeId.value) : null
+    const viewport = scroll.value?.viewport
+    if (!row || !viewport) return
+    const bounds = row.getBoundingClientRect()
+    const frame = viewport.getBoundingClientRect()
+    if (bounds.top < frame.top) viewport.scrollTop -= frame.top - bounds.top
+    else if (bounds.bottom > frame.bottom) viewport.scrollTop += bounds.bottom - frame.bottom
+  }
+
+  function onKeydown(event: KeyboardEvent) {
+    if (
+      blocked.value ||
+      composing.value ||
+      event.isComposing ||
+      event.keyCode === 229 ||
+      event.defaultPrevented
+    )
+      return
+    if (event.ctrlKey || event.metaKey || event.altKey) return
+    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+      event.preventDefault()
+      if (!visible.value) query(true)
+      void move(event.key === 'ArrowDown' ? 1 : -1)
+    } else if (
+      event.key === 'Enter' ||
+      (event.key === 'Tab' && !event.shiftKey && config.selectOnTab())
+    ) {
+      const option = visible.value ? config.options()[activeIndex.value] : undefined
+      if (option) {
+        event.preventDefault()
+        void select(option)
+      } else if (event.key === 'Enter') {
+        event.preventDefault()
+        visible.value = false
+        config.onSubmit(config.model.value)
+      }
+    } else if (event.key === 'Escape') {
+      if (!visible.value && !config.model.value) return
+      event.preventDefault()
+      event.stopPropagation()
+      if (visible.value) visible.value = false
+      else {
+        config.model.value = ''
+        lastQuery = JSON.stringify({ text: '', selectionStart: 0, selectionEnd: 0 })
+        config.onClear()
+        config.onQuery({ text: '', selectionStart: 0, selectionEnd: 0 })
+      }
+    }
+  }
+
+  function highlight(option: T, event: PointerEvent) {
+    if (event.pointerType === 'touch' || !visible.value || option.disabled) return
+    active.value = option.value
+  }
+
+  watch(
+    () => config.options(),
+    () => {
+      active.value = undefined
+    },
+  )
+  watch(visible, value => {
+    if (!value) active.value = undefined
+  })
+  watch(activeIndex, value => {
+    if (value < 0) active.value = undefined
+  })
+  watch(blocked, value => {
+    if (value) visible.value = false
+  })
+
+  return {
+    input,
+    host,
+    scroll,
+    listId,
+    optionId,
+    active,
+    activeId,
+    visible,
+    composing,
+    show,
+    onInput,
+    onBlur,
+    onCompositionEnd,
+    onKeydown,
+    select,
+    highlight,
+  }
+}

package/src/components/autocomplete/types.ts

@@ -0,0 +1,16 @@
+import type { CompletionContext, CompletionEdit } from '../../../../shared/src/lib/completion'
+
+export type { CompletionContext, CompletionEdit } from '../../../../shared/src/lib/completion'
+
+export interface AutocompleteOption {
+  value: string | number
+  label: string
+  description?: string
+  disabled?: boolean
+}
+
+export interface AutocompleteSelection<T extends AutocompleteOption = AutocompleteOption> {
+  option: T
+  context: CompletionContext
+  edit: CompletionEdit
+}

package/src/components/avatar/AvatarGroup.vue

@@ -4,7 +4,7 @@
   import Avatar from './Avatar.vue'
   import { flattenChildren } from './utils/children'
   import type { AvatarVariants } from './avatar.variants'
-  import { avatarGroupItem } from './avatar-group.variants'
+  import { avatarGroup } from './avatar-group.variants'
   import { provideAvatarGroup } from './context'
 
   defineOptions({ name: 'HnAvatarGroup' })
@@ -22,14 +22,13 @@
     props.max && props.max > 0 ? children.value.slice(0, props.max) : children.value,
   )
   const hidden = computed(() => children.value.length - visible.value.length)
-  const item = computed(() => avatarGroupItem({ size: props.size }))
 
   provideAvatarGroup(computed(() => ({ size: props.size })))
 </script>
 
 <template>
-  <div :class="cn('flex flex-row-reverse justify-end', props.class)">
-    <Avatar v-if="hidden > 0" :class="item">+{{ hidden }}</Avatar>
-    <component :is="node" v-for="(node, i) in [...visible].reverse()" :key="i" :class="item" />
+  <div :class="cn(avatarGroup({ size: props.size }), props.class)">
+    <Avatar v-if="hidden > 0">+{{ hidden }}</Avatar>
+    <component :is="node" v-for="(node, i) in [...visible].reverse()" :key="i" />
   </div>
 </template>

package/src/components/avatar/avatar-group.variants.ts

@@ -1,15 +1 @@
-import { tv, type VariantProps } from '../../lib/tv'
-
-export const avatarGroupItem = tv({
-  base: 'ring-surface first:me-0 ring-2',
-  variants: {
-    size: {
-      sm: '-me-1.5',
-      md: '-me-2',
-      lg: '-me-2.5',
-    },
-  },
-  defaultVariants: { size: 'md' },
-})
-
-export type AvatarGroupVariants = VariantProps<typeof avatarGroupItem>
+export * from '../../../../shared/src/variants/avatar-group'

package/src/components/avatar/avatar.variants.ts

@@ -1,18 +1 @@
-import { tv, type VariantProps } from '../../lib/tv'
-
-export const avatar = tv({
-  base: [
-    'bg-inset text-muted relative inline-flex shrink-0 items-center justify-center',
-    'overflow-hidden rounded-full align-middle font-medium select-none',
-  ],
-  variants: {
-    size: {
-      sm: 'size-6 text-xs [&_svg]:size-3.5',
-      md: 'size-8 text-sm [&_svg]:size-4',
-      lg: 'size-10 text-base [&_svg]:size-5',
-    },
-  },
-  defaultVariants: { size: 'md' },
-})
-
-export type AvatarVariants = VariantProps<typeof avatar>
+export * from '../../../../shared/src/variants/avatar'

package/src/components/badge/badge.variants.ts

@@ -1,54 +1 @@
-import { tv, type VariantProps } from '../../lib/tv'
-
-export const badge = tv({
-  base: [
-    'pointer-events-none absolute z-[1] inline-flex items-center justify-center rounded-full will-change-transform',
-    'font-medium leading-none whitespace-nowrap select-none',
-  ],
-  variants: {
-    tone: {
-      accent: 'bg-accent text-accent-on',
-      neutral: 'bg-neutral-solid text-neutral-solid-on',
-      success: 'bg-success text-success-on',
-      warning: 'bg-warning text-warning-on',
-      danger: 'bg-danger text-danger-on',
-      info: 'bg-info text-info-on',
-    },
-    size: {
-      sm: 'h-4 min-w-4 px-1 text-xs',
-      md: 'h-5 min-w-5 px-1.5 text-xs',
-    },
-    placement: {
-      'top-end': 'top-0 end-0 translate-x-1/2 -translate-y-1/2',
-      'top-start': 'top-0 start-0 -translate-x-1/2 -translate-y-1/2',
-      'bottom-end': 'bottom-0 end-0 translate-x-1/2 translate-y-1/2',
-      'bottom-start': 'bottom-0 start-0 -translate-x-1/2 translate-y-1/2',
-    },
-    shape: {
-      rect: '',
-      circle: '',
-    },
-    outline: {
-      true: 'ring-surface ring-2',
-      false: '',
-    },
-    bare: {
-      true: 'h-auto min-w-0 bg-transparent p-0',
-    },
-  },
-  compoundVariants: [
-    { shape: 'circle', placement: 'top-end', class: 'top-[14%] end-[14%]' },
-    { shape: 'circle', placement: 'top-start', class: 'top-[14%] start-[14%]' },
-    { shape: 'circle', placement: 'bottom-end', class: 'bottom-[14%] end-[14%]' },
-    { shape: 'circle', placement: 'bottom-start', class: 'bottom-[14%] start-[14%]' },
-  ],
-  defaultVariants: {
-    tone: 'danger',
-    size: 'sm',
-    placement: 'top-end',
-    shape: 'rect',
-    outline: true,
-  },
-})
-
-export type BadgeVariants = VariantProps<typeof badge>
+export * from '../../../../shared/src/variants/badge'

package/src/components/banner/banner.variants.ts

@@ -1,52 +1 @@
-import { tv, type VariantProps } from '../../lib/tv'
-
-export const banner = tv({
-  base: 'hn-transition-base grid w-full grid-cols-[1fr_auto] items-center gap-3 px-4 py-2.5 text-sm sm:grid-cols-[1fr_auto_1fr] [&_a]:[--hn-link-color:currentColor]',
-  variants: {
-    tone: {
-      neutral: 'bg-neutral-solid text-neutral-solid-on',
-      accent: 'bg-accent text-accent-on',
-      info: 'bg-info text-info-on',
-      success: 'bg-success text-success-on',
-      warning: 'bg-warning text-warning-on',
-      danger: 'bg-danger text-danger-on',
-    },
-  },
-  defaultVariants: { tone: 'accent' },
-})
-
-export const bannerContent = tv({
-  base: 'flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1 sm:col-start-2 sm:justify-center sm:text-center',
-})
-
-export const bannerIcon = tv({
-  base: 'size-4 shrink-0',
-})
-
-export const bannerActions = tv({
-  base: 'flex shrink-0 items-center gap-2',
-})
-
-export const bannerItem = tv({
-  base: 'flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1 sm:justify-center',
-})
-
-export const bannerControls = tv({
-  base: 'col-start-2 -my-1 -me-1 flex shrink-0 items-center gap-1 justify-self-end sm:col-start-3',
-})
-
-export const bannerCounter = tv({
-  base: 'text-xs tabular-nums',
-})
-
-const slideForward = {
-  enterFrom: 'opacity-0 translate-x-4 rtl:-translate-x-4',
-  leaveTo: 'opacity-0 -translate-x-4 rtl:translate-x-4',
-}
-
-export const bannerSlide = {
-  forward: slideForward,
-  backward: { enterFrom: slideForward.leaveTo, leaveTo: slideForward.enterFrom },
-}
-
-export type BannerVariants = VariantProps<typeof banner>
+export * from '../../../../shared/src/variants/banner'