@hina-ui/vue 1.7.12 → 1.7.14

package/dist/shared/primitives/date/utils.ts

@@ -0,0 +1,169 @@
+import type { DateValue } from '@internationalized/date'
+import type { Granularity, HourCycle } from './comparators'
+
+export interface DateStep {
+  year?: number
+  month?: number
+  day?: number
+  hour?: number
+  minute?: number
+  second?: number
+  millisecond?: number
+}
+
+export function chunk<T>(arr: T[], size: number) {
+  const result: T[][] = []
+  for (let i = 0; i < arr.length; i += size) result.push(arr.slice(i, i + size))
+  return result
+}
+
+export function getOptsByGranularity(
+  granularity: Granularity,
+  hourCycle: HourCycle,
+  isTimeValue = false,
+) {
+  const opts: Intl.DateTimeFormatOptions = {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    timeZoneName: 'short',
+    hourCycle: normalizeHourCycle(hourCycle),
+    hour12: normalizeHour12(hourCycle),
+  }
+  if (isTimeValue) {
+    delete opts.year
+    delete opts.month
+    delete opts.day
+  }
+  if (granularity === 'day') {
+    delete opts.second
+    delete opts.hour
+    delete opts.minute
+    delete opts.timeZoneName
+  }
+  if (granularity === 'hour') {
+    delete opts.minute
+    delete opts.second
+  }
+  if (granularity === 'minute') delete opts.second
+  return opts
+}
+
+export function normalizeDateStep(step: DateStep | undefined): Required<DateStep> {
+  return {
+    year: 1,
+    month: 1,
+    day: 1,
+    hour: 1,
+    minute: 1,
+    second: 1,
+    millisecond: 1,
+    ...Object.fromEntries(Object.entries(step ?? {}).filter(([, value]) => value !== undefined)),
+  }
+}
+
+export function handleCalendarInitialFocus(calendar: HTMLElement | null) {
+  if (!calendar) return
+  const selectedDay = calendar.querySelector<HTMLElement>('[data-selected]')
+  if (selectedDay) return selectedDay.focus()
+  const today = calendar.querySelector<HTMLElement>('[data-today]')
+  if (today) return today.focus()
+  const firstDay = calendar.querySelector<HTMLElement>(
+    '[data-value]:not([data-outside-view]):not([data-disabled])',
+  )
+  if (firstDay) return firstDay.focus()
+}
+
+export function normalizeHourCycle(hourCycle: HourCycle) {
+  if (hourCycle === 24) return 'h23'
+  if (hourCycle === 12) return 'h11'
+  return undefined
+}
+
+export function normalizeHour12(hourCycle: HourCycle) {
+  if (hourCycle === 24) return false
+  if (hourCycle === 12) return true
+  return undefined
+}
+
+export function getInputType(granularity: Granularity) {
+  return granularity === 'day' ? 'date' : 'datetime-local'
+}
+
+export function normalizeInputValue(date: DateValue | undefined, granularity: Granularity) {
+  if (!date) return ''
+  const type = getInputType(granularity)
+  const year = String(date.year).padStart(4, '0')
+  const month = String(date.month).padStart(2, '0')
+  const day = String(date.day).padStart(2, '0')
+  if (type === 'date') return `${year}-${month}-${day}`
+  const hour = String('hour' in date ? date.hour : 0).padStart(2, '0')
+  const minute = String('minute' in date ? date.minute : 0).padStart(2, '0')
+  if (granularity === 'second') {
+    const second = String('second' in date ? date.second : 0).padStart(2, '0')
+    return `${year}-${month}-${day}T${hour}:${minute}:${second}`
+  }
+  return `${year}-${month}-${day}T${hour}:${minute}`
+}
+
+function roundToStepPrecision(value: number, step: number) {
+  let roundedValue = value
+  const stepString = step.toString()
+  const pointIndex = stepString.indexOf('.')
+  const precision = pointIndex >= 0 ? stepString.length - pointIndex : 0
+  if (precision > 0) {
+    const pow = 10 ** precision
+    roundedValue = Math.round(roundedValue * pow) / pow
+  }
+  return roundedValue
+}
+
+export function snapValueToStep(value: number, minValue: number, maxValue: number, step: number) {
+  const min = Number(minValue)
+  const max = Number(maxValue)
+  const remainder = (value - (Number.isNaN(min) ? 0 : min)) % step
+  let snappedValue = roundToStepPrecision(
+    Math.abs(remainder) * 2 >= step
+      ? value + Math.sign(remainder) * (step - Math.abs(remainder))
+      : value - remainder,
+    step,
+  )
+  if (!Number.isNaN(min)) {
+    if (snappedValue < min) snappedValue = min
+    else if (!Number.isNaN(max) && snappedValue > max)
+      snappedValue = min + Math.floor(roundToStepPrecision((max - min) / step, step)) * step
+  } else if (!Number.isNaN(max) && snappedValue > max)
+    snappedValue = Math.floor(roundToStepPrecision(max / step, step)) * step
+  return roundToStepPrecision(snappedValue, step)
+}
+
+export function getActiveElement() {
+  let activeElement = document.activeElement
+  if (activeElement == null) return null
+  while (
+    activeElement != null &&
+    activeElement.shadowRoot != null &&
+    activeElement.shadowRoot.activeElement != null
+  )
+    activeElement = activeElement.shadowRoot.activeElement
+  return activeElement
+}
+
+export const kbd = {
+  ARROW_DOWN: 'ArrowDown',
+  ARROW_LEFT: 'ArrowLeft',
+  ARROW_RIGHT: 'ArrowRight',
+  ARROW_UP: 'ArrowUp',
+  BACKSPACE: 'Backspace',
+  ENTER: 'Enter',
+  ESCAPE: 'Escape',
+  PAGE_DOWN: 'PageDown',
+  PAGE_UP: 'PageUp',
+  SHIFT: 'Shift',
+  SPACE: ' ',
+  TAB: 'Tab',
+  SPACE_CODE: 'Space',
+} as const

package/dist/shared/primitives/dialog/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/dialog/index.ts

@@ -0,0 +1,73 @@
+import { hideOutsideLayers } from '../dismissable-layer'
+
+export function dialogWarnings({
+  titleName = 'DialogTitle',
+  contentName = 'DialogContent',
+  componentLink = 'dialog.html#title',
+}: {
+  titleName?: string
+  contentName?: string
+  componentLink?: string
+} = {}) {
+  return {
+    title: `Warning: \`${contentName}\` requires a \`${titleName}\` for the component to be accessible for screen reader users.
+
+If you want to hide the \`${titleName}\`, you can wrap it with our VisuallyHidden component.
+
+For more information, see https://www.reka-ui.com/docs/components/${componentLink}`,
+    description: `Warning: Missing \`Description\` or \`aria-describedby="undefined"\` for ${contentName}.`,
+  }
+}
+
+export function warnDialogAccessibility(
+  messages: { title: string; description: string },
+  titleId: string,
+  descriptionId: string,
+  contentElement: Element | null | undefined,
+) {
+  if (!document.getElementById(titleId)) console.warn(messages.title)
+  const describedById = contentElement?.getAttribute('aria-describedby')
+  if (descriptionId && describedById && !document.getElementById(descriptionId))
+    console.warn(messages.description)
+}
+
+export function isContextPointerDown(event: { button: number; ctrlKey: boolean }) {
+  return event.button === 2 || (event.button === 0 && event.ctrlKey === true)
+}
+
+export function hideOutside(element: Element) {
+  let insideClosedPopover = false
+  try {
+    insideClosedPopover = !!element.closest('[popover]:not(:popover-open)')
+  } catch {}
+  return insideClosedPopover ? undefined : hideOutsideLayers([element])
+}
+
+interface OutsideEvent {
+  defaultPrevented: boolean
+  target: EventTarget | null
+  detail: { originalEvent: Event }
+  preventDefault: () => void
+}
+
+export function createNonModalOutsideTracker() {
+  let interacted = false
+  let pointerDown = false
+  return {
+    get interacted() {
+      return interacted
+    },
+    interact(event: OutsideEvent, trigger: Element | null | undefined) {
+      if (!event.defaultPrevented) {
+        interacted = true
+        if (event.detail.originalEvent.type === 'pointerdown') pointerDown = true
+      }
+      if (trigger?.contains(event.target as Node)) event.preventDefault()
+      if (event.detail.originalEvent.type === 'focusin' && pointerDown) event.preventDefault()
+    },
+    reset() {
+      interacted = false
+      pointerDown = false
+    },
+  }
+}

package/dist/shared/primitives/dismissable-layer/index.ts

@@ -1,3 +1,5 @@
+import { hideOthers } from 'aria-hidden'
+
 export type PointerDownOutsideEvent = CustomEvent<{ originalEvent: PointerEvent }>
 export type FocusOutsideEvent = CustomEvent<{ originalEvent: FocusEvent }>
 
@@ -35,11 +37,30 @@ export function addLayer(element: HTMLElement) {
   }
 }
 
+const branchInline = new Map<HTMLElement, string>()
+
+function syncBranchPointerEvents() {
+  const list = [...branches]
+  for (const branch of list) branch.style.pointerEvents = branchInline.get(branch) ?? ''
+  if (blocking.size === 0 || list.length === 0) return
+  const body = list[0]!.ownerDocument.body
+  const blocked = body.style.pointerEvents
+  body.style.pointerEvents = originalBodyPointerEvents ?? ''
+  const natural = list.map(branch => getComputedStyle(branch).pointerEvents)
+  body.style.pointerEvents = blocked
+  list.forEach((branch, index) => (branch.style.pointerEvents = natural[index]!))
+}
+
 export function addBranch(element: HTMLElement) {
+  if (!branches.has(element)) branchInline.set(element, element.style.pointerEvents)
   branches.add(element)
+  syncBranchPointerEvents()
   changed()
   return () => {
-    if (branches.delete(element)) changed()
+    if (!branches.delete(element)) return
+    element.style.pointerEvents = branchInline.get(element) ?? ''
+    branchInline.delete(element)
+    changed()
   }
 }
 
@@ -50,11 +71,13 @@ export function blockOutsidePointerEvents(element: HTMLElement) {
     body.style.pointerEvents = 'none'
   }
   blocking.add(element)
+  syncBranchPointerEvents()
   changed()
   return () => {
     if (!blocking.delete(element)) return
     if (blocking.size === 0 && originalBodyPointerEvents != null)
       body.style.pointerEvents = originalBodyPointerEvents
+    syncBranchPointerEvents()
     changed()
   }
 }
@@ -62,6 +85,7 @@ export function blockOutsidePointerEvents(element: HTMLElement) {
 export function releaseLayer(element: HTMLElement) {
   const removed = layers.delete(element)
   const unblocked = blocking.delete(element)
+  if (unblocked) syncBranchPointerEvents()
   if (removed || unblocked) changed()
 }
 
@@ -82,6 +106,7 @@ export function bodyPointerEventsDisabled() {
 }
 
 export function pointerEventsEnabled(element: HTMLElement | null | undefined) {
+  if (inBranch(element ?? null)) return true
   const highest = [...blocking].at(-1)
   return layerIndex(element) >= (highest ? [...layers].indexOf(highest) : -1)
 }
@@ -95,6 +120,28 @@ export function inBranch(target: EventTarget | null) {
   return [...branches].some(branch => branch.contains(target as Node | null))
 }
 
+export function hideOutsideLayers(targets: Element[]) {
+  const connected = () => [...branches].filter(branch => branch.isConnected)
+  let kept = connected()
+  const hide = () => {
+    const visible = [...targets.filter(target => target.isConnected), ...kept]
+    return visible.length ? hideOthers(visible) : () => {}
+  }
+  let undo = hide()
+  const stop = subscribeLayers(() => {
+    const next = connected()
+    if (next.length === kept.length && next.every((branch, index) => branch === kept[index])) return
+    kept = next
+    const previous = undo
+    undo = hide()
+    previous()
+  })
+  return () => {
+    stop()
+    undo()
+  }
+}
+
 export function isLayerExist(layer: HTMLElement, target: EventTarget | null) {
   if (!(target instanceof Element)) return false
   const targetLayer = target.closest('[data-dismissable-layer]')

package/dist/shared/primitives/focus-scope/index.ts

@@ -1,3 +1,5 @@
+import { inBranch } from '../dismissable-layer'
+
 export const AUTOFOCUS_ON_MOUNT = 'focusScope.autoFocusOnMount'
 export const AUTOFOCUS_ON_UNMOUNT = 'focusScope.autoFocusOnUnmount'
 const EVENT_OPTIONS = { bubbles: false, cancelable: true }
@@ -118,21 +120,21 @@ export function trapFocus(container: HTMLElement, scope: FocusScopeAPI) {
     if (scope.paused) return
     const target = event.target as HTMLElement | null
     if (container.contains(target)) lastFocused = target
-    else focus(lastFocused, { select: true })
+    else if (!inBranch(target)) focus(lastFocused, { select: true })
   }
 
   const handleFocusOut = (event: FocusEvent) => {
     if (scope.paused) return
     const related = event.relatedTarget as HTMLElement | null
     if (related === null) return
-    if (!container.contains(related)) focus(lastFocused, { select: true })
+    if (!container.contains(related) && !inBranch(related)) focus(lastFocused, { select: true })
   }
 
   const handleMutations = (mutations: MutationRecord[]) => {
     if (lastFocused === null) return
     if (!mutations.some(mutation => mutation.removedNodes.length > 0)) return
     const active = getActiveElement()
-    if (active && container.contains(active)) return
+    if (active && (container.contains(active) || inBranch(active))) return
     if (!container.contains(lastFocused)) focus(container)
   }
 

package/dist/shared/primitives/grace-area/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/grace-area/index.ts

@@ -0,0 +1,112 @@
+export interface Point {
+  x: number
+  y: number
+}
+
+export type Polygon = Point[]
+
+type Side = 'top' | 'right' | 'bottom' | 'left'
+
+export function exitSideFromRect(point: Point, rect: DOMRect): Side {
+  const top = Math.abs(rect.top - point.y)
+  const bottom = Math.abs(rect.bottom - point.y)
+  const right = Math.abs(rect.right - point.x)
+  const left = Math.abs(rect.left - point.x)
+  switch (Math.min(top, bottom, right, left)) {
+    case left:
+      return 'left'
+    case right:
+      return 'right'
+    case top:
+      return 'top'
+    default:
+      return 'bottom'
+  }
+}
+
+export function paddedExitPoints(exitPoint: Point, exitSide: Side, padding = 5): Point[] {
+  switch (exitSide) {
+    case 'top':
+      return [
+        { x: exitPoint.x - padding, y: exitPoint.y + padding },
+        { x: exitPoint.x + padding, y: exitPoint.y + padding },
+      ]
+    case 'bottom':
+      return [
+        { x: exitPoint.x - padding, y: exitPoint.y - padding },
+        { x: exitPoint.x + padding, y: exitPoint.y - padding },
+      ]
+    case 'left':
+      return [
+        { x: exitPoint.x + padding, y: exitPoint.y - padding },
+        { x: exitPoint.x + padding, y: exitPoint.y + padding },
+      ]
+    case 'right':
+      return [
+        { x: exitPoint.x - padding, y: exitPoint.y - padding },
+        { x: exitPoint.x - padding, y: exitPoint.y + padding },
+      ]
+  }
+}
+
+export function pointsFromRect(rect: DOMRect): Point[] {
+  const { top, right, bottom, left } = rect
+  return [
+    { x: left, y: top },
+    { x: right, y: top },
+    { x: right, y: bottom },
+    { x: left, y: bottom },
+  ]
+}
+
+export function isPointInPolygon(point: Point, polygon: Polygon) {
+  const { x, y } = point
+  let inside = false
+  for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
+    const a = polygon[i]!
+    const b = polygon[j]!
+    const intersect = a.y > y !== b.y > y && x < ((b.x - a.x) * (y - a.y)) / (b.y - a.y) + a.x
+    if (intersect) inside = !inside
+  }
+  return inside
+}
+
+function hullPresorted(points: Point[]): Point[] {
+  if (points.length <= 1) return points.slice()
+  const upper: Point[] = []
+  for (const p of points) {
+    while (upper.length >= 2) {
+      const q = upper[upper.length - 1]!
+      const r = upper[upper.length - 2]!
+      if ((q.x - r.x) * (p.y - r.y) >= (q.y - r.y) * (p.x - r.x)) upper.pop()
+      else break
+    }
+    upper.push(p)
+  }
+  upper.pop()
+  const lower: Point[] = []
+  for (let i = points.length - 1; i >= 0; i--) {
+    const p = points[i]!
+    while (lower.length >= 2) {
+      const q = lower[lower.length - 1]!
+      const r = lower[lower.length - 2]!
+      if ((q.x - r.x) * (p.y - r.y) >= (q.y - r.y) * (p.x - r.x)) lower.pop()
+      else break
+    }
+    lower.push(p)
+  }
+  lower.pop()
+  if (
+    upper.length === 1 &&
+    lower.length === 1 &&
+    upper[0]!.x === lower[0]!.x &&
+    upper[0]!.y === lower[0]!.y
+  )
+    return upper
+  return upper.concat(lower)
+}
+
+export function hull(points: Point[]) {
+  const sorted = points.slice().sort((a, b) => (a.x !== b.x ? a.x - b.x : a.y - b.y))
+  return hullPresorted(sorted)
+}

package/dist/shared/primitives/listbox/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.