@hina-ui/vue 1.7.11 → 1.7.13

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) }
+}