@hina-ui/vue 1.7.5 → 1.7.7

package/dist/shared/primitives/splitter/pivot.ts

@@ -0,0 +1,10 @@
+import { getResizeHandleElementIndex } from './dom'
+
+export function determinePivotIndices(
+  groupId: string,
+  dragHandleId: string,
+  panelGroupElement: ParentNode,
+): [number, number] {
+  const index = getResizeHandleElementIndex(groupId, dragHandleId, panelGroupElement)
+  return index != null ? [index, index + 1] : [-1, -1]
+}

package/dist/shared/primitives/splitter/rects.ts

@@ -0,0 +1,24 @@
+export interface Rectangle {
+  x: number
+  y: number
+  width: number
+  height: number
+}
+
+export function intersects(rectOne: Rectangle, rectTwo: Rectangle, strict: boolean): boolean {
+  if (strict) {
+    return (
+      rectOne.x < rectTwo.x + rectTwo.width &&
+      rectOne.x + rectOne.width > rectTwo.x &&
+      rectOne.y < rectTwo.y + rectTwo.height &&
+      rectOne.y + rectOne.height > rectTwo.y
+    )
+  } else {
+    return (
+      rectOne.x <= rectTwo.x + rectTwo.width &&
+      rectOne.x + rectOne.width >= rectTwo.x &&
+      rectOne.y <= rectTwo.y + rectTwo.height &&
+      rectOne.y + rectOne.height >= rectTwo.y
+    )
+  }
+}

package/dist/shared/primitives/splitter/registry.ts

@@ -0,0 +1,231 @@
+import { getResizeEventCoordinates } from './events'
+import { intersects } from './rects'
+import { compare } from './stackingOrder'
+import { resetGlobalCursorStyle, setGlobalCursorStyle } from './style'
+import type {
+  Direction,
+  PointerHitAreaMargins,
+  ResizeEvent,
+  ResizeHandlerAction,
+  SetResizeHandlerState,
+} from './types'
+
+export {
+  EXCEEDED_HORIZONTAL_MAX,
+  EXCEEDED_HORIZONTAL_MIN,
+  EXCEEDED_VERTICAL_MAX,
+  EXCEEDED_VERTICAL_MIN,
+} from './flags'
+
+interface ResizeHandlerData {
+  direction: () => Direction
+  element: HTMLElement
+  hitAreaMargins: PointerHitAreaMargins
+  nonce: () => string | undefined
+  setResizeHandlerState: SetResizeHandlerState
+}
+
+function getInputType() {
+  if (typeof matchMedia === 'function')
+    return matchMedia('(pointer:coarse)').matches ? 'coarse' : 'fine'
+}
+
+const isCoarsePointer = getInputType() === 'coarse'
+const intersectingHandles: ResizeHandlerData[] = []
+let isPointerDown = false
+const ownerDocumentCounts = new Map<Document, number>()
+const panelConstraintFlags = new Map<string, number>()
+const registeredResizeHandlers = new Set<ResizeHandlerData>()
+
+export function registerResizeHandle(
+  resizeHandleId: string,
+  element: HTMLElement,
+  direction: () => Direction,
+  hitAreaMargins: PointerHitAreaMargins,
+  nonce: () => string | undefined,
+  setResizeHandlerState: SetResizeHandlerState,
+) {
+  const { ownerDocument } = element
+  const data: ResizeHandlerData = {
+    direction,
+    element,
+    hitAreaMargins,
+    nonce,
+    setResizeHandlerState,
+  }
+  const count = ownerDocumentCounts.get(ownerDocument) ?? 0
+  ownerDocumentCounts.set(ownerDocument, count + 1)
+  registeredResizeHandlers.add(data)
+  updateListeners()
+  return function unregisterResizeHandle() {
+    panelConstraintFlags.delete(resizeHandleId)
+    registeredResizeHandlers.delete(data)
+    const count = ownerDocumentCounts.get(ownerDocument) ?? 1
+    ownerDocumentCounts.set(ownerDocument, count - 1)
+    updateListeners()
+    resetGlobalCursorStyle()
+    if (count === 1) ownerDocumentCounts.delete(ownerDocument)
+  }
+}
+
+function handlePointerDown(event: ResizeEvent) {
+  const { target } = event
+  const { x, y } = getResizeEventCoordinates(event)
+  isPointerDown = true
+  recalculateIntersectingHandles({ target, x, y })
+  updateListeners()
+  if (intersectingHandles.length > 0) {
+    updateResizeHandlerStates('down', event)
+    event.preventDefault()
+  }
+}
+
+function handlePointerMove(event: ResizeEvent) {
+  const { x, y } = getResizeEventCoordinates(event)
+  if (!isPointerDown) {
+    const { target } = event
+    recalculateIntersectingHandles({ target, x, y })
+  }
+  updateResizeHandlerStates('move', event)
+  updateCursor()
+  if (intersectingHandles.length > 0) event.preventDefault()
+}
+
+function handlePointerUp(event: ResizeEvent) {
+  const { target } = event
+  const { x, y } = getResizeEventCoordinates(event)
+  panelConstraintFlags.clear()
+  isPointerDown = false
+  if (intersectingHandles.length > 0) event.preventDefault()
+  updateResizeHandlerStates('up', event)
+  recalculateIntersectingHandles({ target, x, y })
+  updateCursor()
+  updateListeners()
+}
+
+function recalculateIntersectingHandles({
+  target,
+  x,
+  y,
+}: {
+  target: EventTarget | null
+  x: number
+  y: number
+}) {
+  intersectingHandles.splice(0)
+  let targetElement: HTMLElement | null = null
+  if (target instanceof HTMLElement) targetElement = target
+  registeredResizeHandlers.forEach(data => {
+    const { element: dragHandleElement, hitAreaMargins } = data
+    const dragHandleRect = dragHandleElement.getBoundingClientRect()
+    const { bottom, left, right, top } = dragHandleRect
+    const margin = isCoarsePointer ? hitAreaMargins.coarse : hitAreaMargins.fine
+    const eventIntersects =
+      x >= left - margin && x <= right + margin && y >= top - margin && y <= bottom + margin
+    if (eventIntersects) {
+      if (
+        targetElement !== null &&
+        dragHandleElement !== targetElement &&
+        !dragHandleElement.contains(targetElement) &&
+        !targetElement.contains(dragHandleElement) &&
+        compare(targetElement, dragHandleElement) > 0
+      ) {
+        let currentElement: HTMLElement | null = targetElement
+        let didIntersect = false
+        while (currentElement) {
+          if (currentElement.contains(dragHandleElement)) {
+            break
+          } else if (intersects(currentElement.getBoundingClientRect(), dragHandleRect, true)) {
+            didIntersect = true
+            break
+          }
+          currentElement = currentElement.parentElement
+        }
+        if (didIntersect) return
+      }
+      intersectingHandles.push(data)
+    }
+  })
+}
+
+export function reportConstraintsViolation(resizeHandleId: string, flag: number) {
+  panelConstraintFlags.set(resizeHandleId, flag)
+}
+
+function updateCursor() {
+  let intersectsHorizontal = false
+  let intersectsVertical = false
+  let nonce: string | undefined
+  intersectingHandles.forEach(data => {
+    const { direction, nonce: getNonce } = data
+    if (direction() === 'horizontal') intersectsHorizontal = true
+    else intersectsVertical = true
+    nonce = getNonce()
+  })
+  let constraintFlags = 0
+  panelConstraintFlags.forEach(flag => {
+    constraintFlags |= flag
+  })
+  if (intersectsHorizontal && intersectsVertical)
+    setGlobalCursorStyle('intersection', constraintFlags, nonce)
+  else if (intersectsHorizontal) setGlobalCursorStyle('horizontal', constraintFlags, nonce)
+  else if (intersectsVertical) setGlobalCursorStyle('vertical', constraintFlags, nonce)
+  else resetGlobalCursorStyle()
+}
+
+const listener = {
+  down: handlePointerDown as EventListener,
+  move: handlePointerMove as EventListener,
+  up: handlePointerUp as EventListener,
+}
+
+function updateListeners() {
+  ownerDocumentCounts.forEach((_, ownerDocument) => {
+    const { body } = ownerDocument
+    body.removeEventListener('contextmenu', listener.up)
+    body.removeEventListener('mousedown', listener.down)
+    body.removeEventListener('mouseleave', listener.move)
+    body.removeEventListener('mousemove', listener.move)
+    body.removeEventListener('touchmove', listener.move)
+    body.removeEventListener('touchstart', listener.down)
+  })
+  window.removeEventListener('mouseup', listener.up)
+  window.removeEventListener('touchcancel', listener.up)
+  window.removeEventListener('touchend', listener.up)
+  if (registeredResizeHandlers.size > 0) {
+    if (isPointerDown) {
+      if (intersectingHandles.length > 0) {
+        ownerDocumentCounts.forEach((count, ownerDocument) => {
+          const { body } = ownerDocument
+          if (count > 0) {
+            body.addEventListener('contextmenu', listener.up)
+            body.addEventListener('mouseleave', listener.move)
+            body.addEventListener('mousemove', listener.move)
+            body.addEventListener('touchmove', listener.move, { passive: false })
+          }
+        })
+      }
+      window.addEventListener('mouseup', listener.up)
+      window.addEventListener('touchcancel', listener.up)
+      window.addEventListener('touchend', listener.up)
+    } else {
+      ownerDocumentCounts.forEach((count, ownerDocument) => {
+        const { body } = ownerDocument
+        if (count > 0) {
+          body.addEventListener('mousedown', listener.down)
+          body.addEventListener('mousemove', listener.move)
+          body.addEventListener('touchmove', listener.move, { passive: false })
+          body.addEventListener('touchstart', listener.down)
+        }
+      })
+    }
+  }
+}
+
+function updateResizeHandlerStates(action: ResizeHandlerAction, event: ResizeEvent) {
+  registeredResizeHandlers.forEach(data => {
+    const { setResizeHandlerState } = data
+    const isActive = intersectingHandles.includes(data)
+    setResizeHandlerState(action, isActive, event)
+  })
+}

package/dist/shared/primitives/splitter/resizePanel.ts

@@ -0,0 +1,30 @@
+import { assert } from './assert'
+import { PRECISION } from './constants'
+import { fuzzyCompareNumbers } from './compare'
+import type { PanelConstraints } from './types'
+
+export function resizePanel({
+  panelConstraints: panelConstraintsArray,
+  panelIndex,
+  size,
+}: {
+  panelConstraints: PanelConstraints[]
+  panelIndex: number
+  size: number
+}) {
+  const panelConstraints = panelConstraintsArray[panelIndex]
+  assert(panelConstraints != null)
+  const { collapsedSize = 0, collapsible, maxSize = 100, minSize = 0 } = panelConstraints
+  if (fuzzyCompareNumbers(size, minSize) < 0) {
+    if (collapsible) {
+      const halfwayPoint = (collapsedSize + minSize) / 2
+      if (fuzzyCompareNumbers(size, halfwayPoint) < 0) size = collapsedSize
+      else size = minSize
+    } else {
+      size = minSize
+    }
+  }
+  size = Math.min(maxSize, size)
+  size = Number.parseFloat(size.toFixed(PRECISION))
+  return size
+}

package/dist/shared/primitives/splitter/stackingOrder.ts

@@ -0,0 +1,88 @@
+import { assert } from './assert'
+
+export function compare(a: HTMLElement, b: HTMLElement): number {
+  if (a === b) throw new Error('Cannot compare node with itself')
+  const ancestors = {
+    a: getAncestors(a),
+    b: getAncestors(b),
+  }
+  let commonAncestor: HTMLElement | undefined
+  while (ancestors.a.at(-1) === ancestors.b.at(-1)) {
+    a = ancestors.a.pop() as HTMLElement
+    b = ancestors.b.pop() as HTMLElement
+    commonAncestor = a
+  }
+  assert(commonAncestor)
+  const zIndexes = {
+    a: getZIndex(findStackingContext(ancestors.a)),
+    b: getZIndex(findStackingContext(ancestors.b)),
+  }
+  if (zIndexes.a === zIndexes.b) {
+    const children = commonAncestor.childNodes
+    const furthestAncestors = {
+      a: ancestors.a.at(-1),
+      b: ancestors.b.at(-1),
+    }
+    let i = children.length
+    while (i--) {
+      const child = children[i]
+      if (child === furthestAncestors.a) return 1
+      if (child === furthestAncestors.b) return -1
+    }
+  }
+  return Math.sign(zIndexes.a - zIndexes.b)
+}
+
+const props =
+  /\b(?:position|zIndex|opacity|transform|webkitTransform|mixBlendMode|filter|webkitFilter|isolation)\b/
+
+function isFlexItem(node: HTMLElement) {
+  const display = getComputedStyle(getParent(node) as HTMLElement).display
+  return display === 'flex' || display === 'inline-flex'
+}
+
+function createsStackingContext(node: HTMLElement) {
+  const style = getComputedStyle(node)
+  if (style.position === 'fixed') return true
+  if (style.zIndex !== 'auto' && (style.position !== 'static' || isFlexItem(node))) return true
+  if (+style.opacity < 1) return true
+  if ('transform' in style && style.transform !== 'none') return true
+  if ('webkitTransform' in style && style.webkitTransform !== 'none') return true
+  if ('mixBlendMode' in style && style.mixBlendMode !== 'normal') return true
+  if ('filter' in style && style.filter !== 'none') return true
+  if ('webkitFilter' in style && (style as { webkitFilter?: string }).webkitFilter !== 'none')
+    return true
+  if ('isolation' in style && style.isolation === 'isolate') return true
+  if (props.test(style.willChange)) return true
+  if ((style as { webkitOverflowScrolling?: string }).webkitOverflowScrolling === 'touch')
+    return true
+  return false
+}
+
+function findStackingContext(nodes: HTMLElement[]) {
+  let i = nodes.length
+  while (i--) {
+    const node = nodes[i]
+    assert(node)
+    if (createsStackingContext(node)) return node
+  }
+  return null
+}
+
+function getZIndex(node: HTMLElement | null) {
+  return (node && Number(getComputedStyle(node).zIndex)) || 0
+}
+
+function getAncestors(node: HTMLElement | null) {
+  const ancestors: HTMLElement[] = []
+  while (node) {
+    ancestors.push(node)
+    node = getParent(node)
+  }
+  return ancestors
+}
+
+function getParent(node: HTMLElement) {
+  return ((node.parentNode instanceof DocumentFragment && (node.parentNode as ShadowRoot)?.host) ||
+    node.parentNode) as HTMLElement | null
+}

package/dist/shared/primitives/splitter/storage.ts

@@ -0,0 +1,95 @@
+import type { PanelData, PanelGroupStorage } from './types'
+
+interface SerializedPanelGroupState {
+  [panelKey: string]: {
+    expandToSizes: Record<string, number>
+    layout: number[]
+    sizeUnits?: Record<number, 'px'>
+  }
+}
+
+export function initializeDefaultStorage(storageObject: PanelGroupStorage) {
+  try {
+    if (typeof localStorage !== 'undefined') {
+      storageObject.getItem = (name: string) => {
+        return localStorage.getItem(name)
+      }
+      storageObject.setItem = (name: string, value: string) => {
+        localStorage.setItem(name, value)
+      }
+    } else {
+      throw new TypeError('localStorage not supported in this environment')
+    }
+  } catch (error) {
+    console.error(error)
+    storageObject.getItem = () => null
+    storageObject.setItem = () => {}
+  }
+}
+
+function getPanelGroupKey(autoSaveId: string): string {
+  return `reka:${autoSaveId}`
+}
+
+function getPanelKey(panels: PanelData[]): string {
+  return panels
+    .map(panel => {
+      const { constraints, id, idIsFromProps, order } = panel
+      if (idIsFromProps) return id
+      else return order ? `${order}:${JSON.stringify(constraints)}` : JSON.stringify(constraints)
+    })
+    .sort((a, b) => a.localeCompare(b))
+    .join(',')
+}
+
+function loadSerializedPanelGroupState(
+  autoSaveId: string,
+  storage: PanelGroupStorage,
+): SerializedPanelGroupState | null {
+  try {
+    const panelGroupKey = getPanelGroupKey(autoSaveId)
+    const serialized = storage.getItem(panelGroupKey)
+    if (serialized) {
+      const parsed = JSON.parse(serialized)
+      if (typeof parsed === 'object' && parsed != null) return parsed as SerializedPanelGroupState
+    }
+  } catch {}
+  return null
+}
+
+export function loadPanelGroupState(
+  autoSaveId: string,
+  panels: PanelData[],
+  storage: PanelGroupStorage,
+) {
+  const state = loadSerializedPanelGroupState(autoSaveId, storage) ?? {}
+  const panelKey = getPanelKey(panels)
+  return state[panelKey] ?? null
+}
+
+export function savePanelGroupState(
+  autoSaveId: string,
+  panels: PanelData[],
+  panelSizesBeforeCollapse: Map<string, number>,
+  sizes: number[],
+  storage: PanelGroupStorage,
+): void {
+  const panelGroupKey = getPanelGroupKey(autoSaveId)
+  const panelKey = getPanelKey(panels)
+  const state = loadSerializedPanelGroupState(autoSaveId, storage) ?? {}
+  const sizeUnits: Record<number, 'px'> = {}
+  panels.forEach((panel, index) => {
+    const unit = panel.constraints.sizeUnit ?? '%'
+    if (unit === 'px') sizeUnits[index] = 'px'
+  })
+  state[panelKey] = {
+    expandToSizes: Object.fromEntries(panelSizesBeforeCollapse.entries()),
+    layout: sizes,
+    ...(Object.keys(sizeUnits).length > 0 && { sizeUnits }),
+  }
+  try {
+    storage.setItem(panelGroupKey, JSON.stringify(state))
+  } catch (error) {
+    console.error(error)
+  }
+}

package/dist/shared/primitives/splitter/style.ts

@@ -0,0 +1,95 @@
+import {
+  EXCEEDED_HORIZONTAL_MAX,
+  EXCEEDED_HORIZONTAL_MIN,
+  EXCEEDED_VERTICAL_MAX,
+  EXCEEDED_VERTICAL_MIN,
+} from './flags'
+import type { DragState, PanelData } from './types'
+
+type CursorState = 'horizontal' | 'intersection' | 'vertical'
+
+let currentCursorStyle: string | null = null
+let styleElement: HTMLStyleElement | null = null
+
+export function getCursorStyle(state: CursorState, constraintFlags: number): string {
+  if (constraintFlags) {
+    const horizontalMin = (constraintFlags & EXCEEDED_HORIZONTAL_MIN) !== 0
+    const horizontalMax = (constraintFlags & EXCEEDED_HORIZONTAL_MAX) !== 0
+    const verticalMin = (constraintFlags & EXCEEDED_VERTICAL_MIN) !== 0
+    const verticalMax = (constraintFlags & EXCEEDED_VERTICAL_MAX) !== 0
+    if (horizontalMin) {
+      if (verticalMin) return 'se-resize'
+      else if (verticalMax) return 'ne-resize'
+      else return 'e-resize'
+    } else if (horizontalMax) {
+      if (verticalMin) return 'sw-resize'
+      else if (verticalMax) return 'nw-resize'
+      else return 'w-resize'
+    } else if (verticalMin) {
+      return 's-resize'
+    } else if (verticalMax) {
+      return 'n-resize'
+    }
+  }
+  switch (state) {
+    case 'horizontal':
+      return 'ew-resize'
+    case 'intersection':
+      return 'move'
+    case 'vertical':
+      return 'ns-resize'
+  }
+}
+
+export function resetGlobalCursorStyle() {
+  if (styleElement !== null) {
+    document.head.removeChild(styleElement)
+    currentCursorStyle = null
+    styleElement = null
+  }
+}
+
+export function setGlobalCursorStyle(
+  state: CursorState,
+  constraintFlags: number,
+  nonce: string | undefined,
+) {
+  const style = getCursorStyle(state, constraintFlags)
+  if (currentCursorStyle === style) return
+  currentCursorStyle = style
+  if (styleElement === null) {
+    styleElement = document.createElement('style')
+    if (nonce) styleElement.nonce = nonce
+    document.head.appendChild(styleElement)
+  }
+  styleElement.textContent = `*{cursor: ${style}!important;}`
+}
+
+export function computePanelFlexBoxStyle({
+  defaultSize,
+  dragState,
+  layout,
+  panelData,
+  panelIndex,
+  precision = 3,
+}: {
+  defaultSize: number | undefined
+  dragState: DragState | null
+  layout: number[]
+  panelData: PanelData[]
+  panelIndex: number
+  precision?: number
+}) {
+  const size = layout[panelIndex]
+  let flexGrow: string
+  if (size == null) flexGrow = defaultSize !== undefined ? defaultSize.toPrecision(precision) : '1'
+  else if (panelData.length === 1) flexGrow = '1'
+  else flexGrow = size.toPrecision(precision)
+  return {
+    flexBasis: 0,
+    flexGrow,
+    flexShrink: 1,
+    overflow: 'hidden',
+    pointerEvents: dragState !== null ? 'none' : undefined,
+  } as const
+}

package/dist/shared/primitives/splitter/types.ts

@@ -0,0 +1,48 @@
+export type Direction = 'horizontal' | 'vertical'
+export type SizeUnit = '%' | 'px'
+
+export interface PanelConstraints {
+  collapsedSize?: number
+  collapsible?: boolean
+  defaultSize?: number
+  maxSize?: number
+  minSize?: number
+  sizeUnit?: SizeUnit
+}
+
+export interface PanelCallbacks {
+  onCollapse?: () => void
+  onExpand?: () => void
+  onResize?: (size: number, prevSize: number | undefined) => void
+}
+
+export interface PanelData {
+  callbacks: PanelCallbacks
+  constraints: PanelConstraints
+  id: string
+  idIsFromProps: boolean
+  order: number | undefined
+}
+
+export interface DragState {
+  dragHandleId: string
+  dragHandleRect: DOMRect
+  initialCursorPosition: number
+  initialLayout: number[]
+}
+
+export type ResizeEvent = KeyboardEvent | MouseEvent | TouchEvent
+export type ResizeHandler = (event: ResizeEvent) => void
+export type ResizeHandlerAction = 'down' | 'move' | 'up'
+export type ResizeHandlerState = 'drag' | 'hover' | 'inactive'
+export type SetResizeHandlerState = (
+  action: ResizeHandlerAction,
+  isActive: boolean,
+  event: ResizeEvent,
+) => void
+export type PointerHitAreaMargins = { coarse: number; fine: number }
+
+export interface PanelGroupStorage {
+  getItem: (name: string) => string | null
+  setItem: (name: string, value: string) => void
+}