@hina-ui/vue 1.7.12 → 1.7.14

package/dist/shared/primitives/listbox/index.ts

@@ -0,0 +1,213 @@
+import { handleAndDispatchCustomEvent } from '../dismissable-layer'
+import { getActiveElement } from '../focus-scope'
+import { wrapArray, type FocusIntent } from '../roving-focus'
+import { isEqual } from '../value'
+
+export { isEqual }
+
+export type Comparator<T = unknown> = string | ((a: T, b: T) => boolean)
+export type ListboxSelectionBehavior = 'toggle' | 'replace'
+
+export interface ListboxEntry<V = unknown> {
+  ref: HTMLElement
+  value?: V
+}
+
+export const LISTBOX_SELECT = 'listbox.select'
+
+export type ListboxSelectEvent<T = unknown> = CustomEvent<{ originalEvent: Event; value: T }>
+
+export function dispatchListboxSelect<T>(
+  event: Event,
+  value: T,
+  callback: (event: ListboxSelectEvent<T>) => void,
+) {
+  handleAndDispatchCustomEvent<ListboxSelectEvent<T>>(LISTBOX_SELECT, callback, {
+    originalEvent: event,
+    value,
+  })
+}
+
+export function compare<T>(
+  value: T | undefined,
+  currentValue: T | undefined,
+  comparator?: Comparator<T>,
+) {
+  if (value === undefined || currentValue === undefined) return false
+  if (typeof value === 'string') return value === currentValue
+  if (typeof comparator === 'function') return comparator(value, currentValue)
+  if (typeof comparator === 'string')
+    return (
+      (value as Record<string, unknown> | null)?.[comparator] ===
+      (currentValue as Record<string, unknown> | null)?.[comparator]
+    )
+  return isEqual(value, currentValue)
+}
+
+export function valueComparator<T>(
+  value: T | T[] | undefined,
+  currentValue: T,
+  comparator?: Comparator<T>,
+) {
+  if (value === undefined) return false
+  if (Array.isArray(value)) return value.some(item => compare(item, currentValue, comparator))
+  return compare(value as T, currentValue, comparator)
+}
+
+export function findValuesBetween<T>(array: T[], start: T, end: T) {
+  const startIndex = array.findIndex(item => isEqual(item, start))
+  const endIndex = array.findIndex(item => isEqual(item, end))
+  if (startIndex === -1 || endIndex === -1) return []
+  const [minIndex, maxIndex] = [startIndex, endIndex].sort((a, b) => a - b) as [number, number]
+  return array.slice(minIndex, maxIndex + 1)
+}
+
+export function nextListboxValue<T>(
+  model: T | T[] | undefined,
+  value: T,
+  options: { multiple: boolean; selectionBehavior: ListboxSelectionBehavior; by?: Comparator<T> },
+): { value: T | T[] | undefined; anchor: boolean } {
+  const { multiple, selectionBehavior, by } = options
+  if (multiple) {
+    if (selectionBehavior !== 'toggle') return { value: [value], anchor: true }
+    const values = Array.isArray(model) ? [...model] : []
+    const index = values.findIndex(item => compare(item, value, by))
+    if (index === -1) values.push(value)
+    else values.splice(index, 1)
+    return { value: values, anchor: false }
+  }
+  if (selectionBehavior === 'toggle' && compare(model as T | undefined, value, by))
+    return { value: undefined, anchor: false }
+  return { value, anchor: false }
+}
+
+export function enabledListboxItems(items: HTMLElement[]) {
+  return items.filter(item => item.dataset.disabled !== '')
+}
+
+export function listboxNavigation(
+  items: HTMLElement[],
+  current: HTMLElement | null | undefined,
+  intent: FocusIntent,
+) {
+  let candidates = [...items]
+  if (current) {
+    if (intent === 'last') candidates.reverse()
+    else if (intent === 'prev' || intent === 'next') {
+      if (intent === 'prev') candidates.reverse()
+      candidates = candidates.slice(candidates.indexOf(current) + 1)
+    }
+  }
+  const target = candidates.length
+    ? candidates[!current && intent === 'prev' ? candidates.length - 1 : 0]
+    : undefined
+  return { target, rangeTarget: current ? candidates[0] : undefined, extendsRange: !!current }
+}
+
+export function listboxRangeValues<V>(
+  event: Pick<KeyboardEvent, 'key' | 'shiftKey' | 'altKey' | 'ctrlKey' | 'metaKey'>,
+  items: ListboxEntry<V>[],
+  target: HTMLElement | undefined,
+  firstValue: V | undefined,
+) {
+  if ((event.altKey || event.ctrlKey || event.metaKey) && !event.shiftKey) return
+  if (!event.shiftKey) return
+  const enabled = items.filter(item => item.ref.dataset.disabled !== '')
+  let lastValue = enabled.find(item => item.ref === target)?.value
+  if (event.key === 'End') lastValue = enabled.at(-1)?.value
+  else if (event.key === 'Home') lastValue = enabled[0]?.value
+  if (!lastValue || !firstValue) return
+  return findValuesBetween(
+    enabled.map(item => item.value as V),
+    firstValue,
+    lastValue,
+  )
+}
+
+export function listboxContentTabIndex(focusable: boolean, highlighted: boolean) {
+  return focusable ? (highlighted ? '-1' : '0') : '-1'
+}
+
+export function listboxItemTabIndex(focusable: boolean, highlighted: boolean) {
+  return focusable ? (highlighted ? '0' : '-1') : -1
+}
+
+export function ignoresListboxArrow(key: string, orientation: 'vertical' | 'horizontal') {
+  return (
+    (orientation === 'vertical' && (key === 'ArrowLeft' || key === 'ArrowRight')) ||
+    (orientation === 'horizontal' && (key === 'ArrowUp' || key === 'ArrowDown'))
+  )
+}
+
+export function getNextMatch(values: string[], search: string, currentMatch?: string) {
+  const isRepeated = search.length > 1 && Array.from(search).every(char => char === search[0])
+  const normalizedSearch = isRepeated ? search[0]! : search
+  const currentMatchIndex = currentMatch ? values.indexOf(currentMatch) : -1
+  let wrappedValues = wrapArray(values, Math.max(currentMatchIndex, 0))
+  if (normalizedSearch.length === 1) wrappedValues = wrappedValues.filter(v => v !== currentMatch)
+  const nextMatch = wrappedValues.find(value =>
+    value.toLowerCase().startsWith(normalizedSearch.toLowerCase()),
+  )
+  return nextMatch !== currentMatch ? nextMatch : undefined
+}
+
+export function createTypeahead(timeout = 1000) {
+  let search = ''
+  let timer: ReturnType<typeof setTimeout> | undefined
+  function set(value: string) {
+    search = value
+    if (timer !== undefined) clearTimeout(timer)
+    timer = setTimeout(() => {
+      search = ''
+      timer = undefined
+    }, timeout)
+  }
+  return {
+    get search() {
+      return search
+    },
+    reset() {
+      set('')
+    },
+    handle(key: string, items: { ref: HTMLElement; value?: unknown }[]) {
+      set(search + key)
+      const currentItem = getActiveElement()
+      const itemsWithTextValue = items.map(item => ({
+        ...item,
+        textValue:
+          (item.value as { textValue?: string } | null | undefined)?.textValue ??
+          item.ref.textContent?.trim() ??
+          '',
+      }))
+      const currentMatch = itemsWithTextValue.find(item => item.ref === currentItem)
+      const values = itemsWithTextValue.map(item => item.textValue)
+      const nextMatch = getNextMatch(values, search, currentMatch?.textValue)
+      const newItem = itemsWithTextValue.find(item => item.textValue === nextMatch)
+      if (newItem) newItem.ref.focus()
+      return newItem?.ref
+    },
+    dispose() {
+      if (timer !== undefined) clearTimeout(timer)
+    },
+  }
+}
+
+export type Typeahead = ReturnType<typeof createTypeahead>
+
+export interface EventHook<T> {
+  on: (listener: (value: T) => void) => { off: () => void }
+  trigger: (value: T) => void
+}
+
+export function createEventHook<T>(): EventHook<T> {
+  const listeners = new Set<(value: T) => void>()
+  return {
+    on(listener) {
+      listeners.add(listener)
+      return { off: () => listeners.delete(listener) }
+    },
+    trigger(value) {
+      for (const listener of [...listeners]) listener(value)
+    },
+  }
+}

package/dist/shared/primitives/menu/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 UnoVue <https://github.com/unovue>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/shared/primitives/menu/index.ts

@@ -0,0 +1,66 @@
+import { isPointInPolygon, type Polygon } from '../grace-area'
+
+export type CheckedState = boolean | 'indeterminate'
+export type MenuDirection = 'ltr' | 'rtl'
+export type GraceSide = 'left' | 'right'
+
+export interface GraceIntent {
+  area: Polygon
+  side: GraceSide
+}
+
+export const ITEM_SELECT = 'menu.itemSelect'
+export const SELECTION_KEYS = ['Enter', ' ']
+export const FIRST_KEYS = ['ArrowDown', 'PageUp', 'Home']
+export const LAST_KEYS = ['ArrowUp', 'PageDown', 'End']
+export const FIRST_LAST_KEYS = [...FIRST_KEYS, ...LAST_KEYS]
+export const SUB_OPEN_KEYS: Record<MenuDirection, string[]> = {
+  ltr: [...SELECTION_KEYS, 'ArrowRight'],
+  rtl: [...SELECTION_KEYS, 'ArrowLeft'],
+}
+export const SUB_CLOSE_KEYS: Record<MenuDirection, string[]> = {
+  ltr: ['ArrowLeft'],
+  rtl: ['ArrowRight'],
+}
+
+export function getOpenState(open: boolean) {
+  return open ? 'open' : 'closed'
+}
+
+export function isIndeterminate(checked?: CheckedState): checked is 'indeterminate' {
+  return checked === 'indeterminate'
+}
+
+export function getCheckedState(checked: CheckedState) {
+  return isIndeterminate(checked) ? 'indeterminate' : checked ? 'checked' : 'unchecked'
+}
+
+export function isPointerInGraceArea(event: { clientX: number; clientY: number }, area?: Polygon) {
+  if (!area) return false
+  return isPointInPolygon({ x: event.clientX, y: event.clientY }, area)
+}
+
+export function isMouseEvent(event: { pointerType: string }) {
+  return event.pointerType === 'mouse'
+}
+
+export function submenuGraceIntent(
+  event: { clientX: number; clientY: number },
+  contentRect: { left: number; right: number; top: number; bottom: number },
+  side: GraceSide,
+): GraceIntent {
+  const rightSide = side === 'right'
+  const bleed = rightSide ? -5 : +5
+  const contentNearEdge = contentRect[rightSide ? 'left' : 'right']
+  const contentFarEdge = contentRect[rightSide ? 'right' : 'left']
+  return {
+    area: [
+      { x: event.clientX + bleed, y: event.clientY },
+      { x: contentNearEdge, y: contentRect.top },
+      { x: contentFarEdge, y: contentRect.top },
+      { x: contentFarEdge, y: contentRect.bottom },
+      { x: contentNearEdge, y: contentRect.bottom },
+    ],
+    side,
+  }
+}

package/dist/shared/primitives/navigation-menu/LICENSE

@@ -0,0 +1,44 @@
+MIT License
+
+Copyright (c) 2023 UnoVue <https://github.com/unovue>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+Portions adapted from Radix UI:
+MIT License
+
+Copyright (c) 2022 WorkOS
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/shared/primitives/navigation-menu/index.ts

@@ -0,0 +1,125 @@
+import { getActiveElement } from '../focus-scope'
+
+export type NavigationMenuAlign = 'start' | 'center' | 'end'
+
+export function getOpenState(open: boolean) {
+  return open ? 'open' : 'closed'
+}
+
+export function makeTriggerId(baseId: string, value: string) {
+  return `${baseId}-trigger-${value}`
+}
+
+export function makeContentId(baseId: string, value: string) {
+  return `${baseId}-content-${value}`
+}
+
+export const LINK_SELECT = 'navigationMenu.linkSelect'
+export const EVENT_ROOT_CONTENT_DISMISS = 'navigationMenu.rootContentDismiss'
+
+export function getTabbableCandidates(container: HTMLElement) {
+  const nodes: HTMLElement[] = []
+  const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
+    acceptNode: node => {
+      const element = node as HTMLElement & { disabled?: boolean; type?: string }
+      const isHiddenInput = element.tagName === 'INPUT' && element.type === 'hidden'
+      if (element.disabled || element.hidden || isHiddenInput) return NodeFilter.FILTER_SKIP
+      return element.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP
+    },
+  })
+  while (walker.nextNode()) nodes.push(walker.currentNode as HTMLElement)
+  return nodes
+}
+
+export function focusFirst(candidates: HTMLElement[]) {
+  const previouslyFocusedElement = getActiveElement()
+  return candidates.some(candidate => {
+    if (candidate === previouslyFocusedElement) return true
+    candidate.focus()
+    return getActiveElement() !== previouslyFocusedElement
+  })
+}
+
+export function removeFromTabOrder(candidates: HTMLElement[]) {
+  candidates.forEach(candidate => {
+    candidate.dataset.tabindex = candidate.getAttribute('tabindex') || ''
+    candidate.setAttribute('tabindex', '-1')
+  })
+  return () => {
+    candidates.forEach(candidate => {
+      const prevTabIndex = candidate.dataset.tabindex
+      candidate.setAttribute('tabindex', prevTabIndex!)
+    })
+  }
+}
+
+export function whenMouse<E extends PointerEvent>(handler: (event: E) => void) {
+  return (event: E) => (event.pointerType === 'mouse' ? handler(event) : undefined)
+}
+
+export interface MotionState {
+  triggers: HTMLElement[]
+  dir: 'ltr' | 'rtl'
+  modelValue: string
+  previousValue: string
+  value: string
+}
+
+export function getMotionAttribute(state: MotionState) {
+  const values = state.triggers.map(node => node.id.split('trigger-')[1])
+  if (state.dir === 'rtl') values.reverse()
+  const index = values.indexOf(state.modelValue)
+  const prevIndex = values.indexOf(state.previousValue)
+  const isSelected = state.value === state.modelValue
+  const wasSelected = prevIndex === values.indexOf(state.value)
+  if (!isSelected && !wasSelected) return undefined
+  if (index !== prevIndex) {
+    if (isSelected && prevIndex !== -1) return index > prevIndex ? 'from-end' : 'from-start'
+    if (wasSelected && index !== -1) return index > prevIndex ? 'to-start' : 'to-end'
+  }
+  return null
+}
+
+export function getViewportPosition(
+  root: HTMLElement,
+  trigger: HTMLElement,
+  content: HTMLElement,
+  align: NavigationMenuAlign | string | undefined,
+) {
+  const bodyWidth = document.documentElement.offsetWidth
+  const bodyHeight = document.documentElement.offsetHeight
+  const rootRect = root.getBoundingClientRect()
+  const rect = trigger.getBoundingClientRect()
+  const { offsetWidth, offsetHeight } = content
+  const startPositionLeft = rect.left - rootRect.left
+  const startPositionTop = rect.top - rootRect.top
+  let posLeft: number
+  let posTop: number
+  switch (align) {
+    case 'start':
+      posLeft = startPositionLeft
+      posTop = startPositionTop
+      break
+    case 'end':
+      posLeft = startPositionLeft - offsetWidth + rect.width
+      posTop = startPositionTop - offsetHeight + rect.height
+      break
+    default:
+      posLeft = startPositionLeft - offsetWidth / 2 + rect.width / 2
+      posTop = startPositionTop - offsetHeight / 2 + rect.height / 2
+  }
+  const screenOffset = 10
+  if (posLeft + rootRect.left < screenOffset) posLeft = screenOffset - rootRect.left
+  const rightOffset = posLeft + rootRect.left + offsetWidth
+  if (rightOffset > bodyWidth - screenOffset) {
+    posLeft -= rightOffset - bodyWidth + screenOffset
+    if (posLeft < screenOffset - rootRect.left) posLeft = screenOffset - rootRect.left
+  }
+  if (posTop + rootRect.top < screenOffset) posTop = screenOffset - rootRect.top
+  const bottomOffset = posTop + rootRect.top + offsetHeight
+  if (bottomOffset > bodyHeight - screenOffset) {
+    posTop -= bottomOffset - bodyHeight + screenOffset
+    if (posTop < screenOffset - rootRect.top) posTop = screenOffset - rootRect.top
+  }
+  return { left: Math.round(posLeft), top: Math.round(posTop) }
+}

package/dist/shared/primitives/popper/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 UnoVue <https://github.com/unovue>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.