base-ui-vue 0.2.0 → 0.4.0

package/src/scroll-area/viewport/ScrollAreaViewport.vue

@@ -0,0 +1,379 @@
+<script setup lang="ts">
+import type { BaseUIComponentProps } from '../../utils/types'
+import type { HiddenState, ScrollAreaRootState } from '../root/ScrollAreaRootContext'
+import { computed, onBeforeUnmount, onMounted, provide, useAttrs, watch } from 'vue'
+import { useDirection } from '../../direction-provider/DirectionContext'
+import { mergeProps } from '../../merge-props/mergeProps'
+import { clamp } from '../../utils/clamp'
+import { normalizeScrollOffset } from '../../utils/scrollEdges'
+import { styleDisableScrollbar } from '../../utils/styles'
+import { useRenderElement } from '../../utils/useRenderElement'
+import { MIN_THUMB_SIZE } from '../constants'
+import { useScrollAreaRootContext } from '../root/ScrollAreaRootContext'
+import { scrollAreaStateAttributesMapping } from '../root/stateAttributes'
+import { getOffset } from '../utils/getOffset'
+import { scrollAreaViewportContextKey } from './ScrollAreaViewportContext'
+import { ScrollAreaViewportCssVars } from './ScrollAreaViewportCssVars'
+
+export type ScrollAreaViewportState = ScrollAreaRootState
+
+export interface ScrollAreaViewportProps extends BaseUIComponentProps<ScrollAreaViewportState> {}
+
+defineOptions({
+  name: 'ScrollAreaViewport',
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<ScrollAreaViewportProps>(), {
+  as: 'div',
+})
+
+const attrs = useAttrs()
+
+const {
+  viewportRef,
+  scrollbarYRef,
+  scrollbarXRef,
+  thumbYRef,
+  thumbXRef,
+  cornerRef,
+  cornerSize,
+  setCornerSize,
+  setThumbSize,
+  rootId,
+  setHiddenState,
+  hiddenState,
+  setHasMeasuredScrollbar,
+  handleScroll,
+  setHovering,
+  setOverflowEdges,
+  overflowEdges,
+  overflowEdgeThreshold,
+  scrollingX,
+  scrollingY,
+} = useScrollAreaRootContext()
+
+const direction = useDirection()
+
+let programmaticScroll = true
+const lastMeasuredViewportMetrics: [number, number, number, number] = [Number.NaN, Number.NaN, Number.NaN, Number.NaN]
+
+let scrollEndTimeoutId: ReturnType<typeof setTimeout> | undefined
+let waitForAnimationsTimeoutId: ReturnType<typeof setTimeout> | undefined
+let resizeObserver: ResizeObserver | undefined
+
+let scrollAreaOverflowVarsRegistered = false
+
+function removeCSSVariableInheritance() {
+  if (scrollAreaOverflowVarsRegistered)
+    return
+
+  const isWebKit = typeof navigator !== 'undefined' && /AppleWebKit/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent)
+  if (isWebKit)
+    return
+
+  if (typeof CSS !== 'undefined' && 'registerProperty' in CSS) {
+    const vars = [
+      ScrollAreaViewportCssVars.scrollAreaOverflowXStart,
+      ScrollAreaViewportCssVars.scrollAreaOverflowXEnd,
+      ScrollAreaViewportCssVars.scrollAreaOverflowYStart,
+      ScrollAreaViewportCssVars.scrollAreaOverflowYEnd,
+    ]
+    for (const name of vars) {
+      try {
+        CSS.registerProperty({ name, syntax: '<length>', inherits: false, initialValue: '0px' })
+      }
+      catch { /* already registered */ }
+    }
+  }
+
+  scrollAreaOverflowVarsRegistered = true
+}
+
+function computeThumbPosition() {
+  const viewportEl = viewportRef.value
+  const scrollbarYEl = scrollbarYRef.value
+  const scrollbarXEl = scrollbarXRef.value
+  const thumbYEl = thumbYRef.value
+  const thumbXEl = thumbXRef.value
+  const cornerEl = cornerRef.value
+
+  if (!viewportEl)
+    return
+
+  const scrollableContentHeight = viewportEl.scrollHeight
+  const scrollableContentWidth = viewportEl.scrollWidth
+  const viewportHeight = viewportEl.clientHeight
+  const viewportWidth = viewportEl.clientWidth
+  const scrollTop = viewportEl.scrollTop
+  const scrollLeft = viewportEl.scrollLeft
+  const isFirstMeasurement = Number.isNaN(lastMeasuredViewportMetrics[0])
+  lastMeasuredViewportMetrics[0] = viewportHeight
+  lastMeasuredViewportMetrics[1] = scrollableContentHeight
+  lastMeasuredViewportMetrics[2] = viewportWidth
+  lastMeasuredViewportMetrics[3] = scrollableContentWidth
+
+  if (isFirstMeasurement) {
+    setHasMeasuredScrollbar(true)
+  }
+
+  if (scrollableContentHeight === 0 || scrollableContentWidth === 0)
+    return
+
+  const nextHiddenState = getHiddenState(viewportEl)
+  const scrollbarYHidden = nextHiddenState.y
+  const scrollbarXHidden = nextHiddenState.x
+  const ratioX = viewportWidth / scrollableContentWidth
+  const ratioY = viewportHeight / scrollableContentHeight
+  const maxScrollLeft = Math.max(0, scrollableContentWidth - viewportWidth)
+  const maxScrollTop = Math.max(0, scrollableContentHeight - viewportHeight)
+
+  let scrollLeftFromStart = 0
+  let scrollLeftFromEnd = 0
+  if (!scrollbarXHidden) {
+    let rawScrollLeftFromStart = 0
+    if (direction.value === 'rtl') {
+      rawScrollLeftFromStart = scrollLeft < 0 ? -scrollLeft : maxScrollLeft - scrollLeft
+    }
+    else {
+      rawScrollLeftFromStart = scrollLeft
+    }
+    rawScrollLeftFromStart = clamp(rawScrollLeftFromStart, 0, maxScrollLeft)
+    scrollLeftFromStart = normalizeScrollOffset(rawScrollLeftFromStart, maxScrollLeft)
+    scrollLeftFromEnd = maxScrollLeft - scrollLeftFromStart
+  }
+
+  const rawScrollTopFromStart = !scrollbarYHidden ? clamp(scrollTop, 0, maxScrollTop) : 0
+  const scrollTopFromStart = !scrollbarYHidden ? normalizeScrollOffset(rawScrollTopFromStart, maxScrollTop) : 0
+  const scrollTopFromEnd = !scrollbarYHidden ? maxScrollTop - scrollTopFromStart : 0
+  const nextWidth = scrollbarXHidden ? 0 : viewportWidth
+  const nextHeight = scrollbarYHidden ? 0 : viewportHeight
+
+  let nextCornerWidth = 0
+  let nextCornerHeight = 0
+  if (!scrollbarXHidden && !scrollbarYHidden) {
+    nextCornerWidth = scrollbarYEl?.offsetWidth || 0
+    nextCornerHeight = scrollbarXEl?.offsetHeight || 0
+  }
+
+  const cornerNotYetSized = cornerSize.value.width === 0 && cornerSize.value.height === 0
+  const cornerWidthOffset = cornerNotYetSized ? nextCornerWidth : 0
+  const cornerHeightOffset = cornerNotYetSized ? nextCornerHeight : 0
+
+  const scrollbarXOffset = getOffset(scrollbarXEl, 'padding', 'x')
+  const scrollbarYOffset = getOffset(scrollbarYEl, 'padding', 'y')
+  const thumbXOffset = getOffset(thumbXEl, 'margin', 'x')
+  const thumbYOffset = getOffset(thumbYEl, 'margin', 'y')
+
+  const idealNextWidth = nextWidth - scrollbarXOffset - thumbXOffset
+  const idealNextHeight = nextHeight - scrollbarYOffset - thumbYOffset
+
+  const maxNextWidth = scrollbarXEl ? Math.min(scrollbarXEl.offsetWidth - cornerWidthOffset, idealNextWidth) : idealNextWidth
+  const maxNextHeight = scrollbarYEl ? Math.min(scrollbarYEl.offsetHeight - cornerHeightOffset, idealNextHeight) : idealNextHeight
+
+  const clampedNextWidth = Math.max(MIN_THUMB_SIZE, maxNextWidth * ratioX)
+  const clampedNextHeight = Math.max(MIN_THUMB_SIZE, maxNextHeight * ratioY)
+
+  setThumbSize({ width: clampedNextWidth, height: clampedNextHeight })
+
+  if (scrollbarYEl && thumbYEl) {
+    const maxThumbOffsetY = scrollbarYEl.offsetHeight - clampedNextHeight - scrollbarYOffset - thumbYOffset
+    const scrollRangeY = scrollableContentHeight - viewportHeight
+    const scrollRatioY = scrollRangeY === 0 ? 0 : scrollTop / scrollRangeY
+    const thumbOffsetY = Math.min(maxThumbOffsetY, Math.max(0, scrollRatioY * maxThumbOffsetY))
+    thumbYEl.style.transform = `translate3d(0,${thumbOffsetY}px,0)`
+  }
+
+  if (scrollbarXEl && thumbXEl) {
+    const maxThumbOffsetX = scrollbarXEl.offsetWidth - clampedNextWidth - scrollbarXOffset - thumbXOffset
+    const scrollRangeX = scrollableContentWidth - viewportWidth
+    const scrollRatioX = scrollRangeX === 0 ? 0 : scrollLeftFromStart / scrollRangeX
+    const thumbOffsetX = direction.value === 'rtl'
+      ? -clamp(scrollRatioX * maxThumbOffsetX, 0, maxThumbOffsetX)
+      : clamp(scrollRatioX * maxThumbOffsetX, 0, maxThumbOffsetX)
+    thumbXEl.style.transform = `translate3d(${thumbOffsetX}px,0,0)`
+  }
+
+  const overflowMetricsPx: Array<[string, number]> = [
+    [ScrollAreaViewportCssVars.scrollAreaOverflowXStart, scrollLeftFromStart],
+    [ScrollAreaViewportCssVars.scrollAreaOverflowXEnd, scrollLeftFromEnd],
+    [ScrollAreaViewportCssVars.scrollAreaOverflowYStart, scrollTopFromStart],
+    [ScrollAreaViewportCssVars.scrollAreaOverflowYEnd, scrollTopFromEnd],
+  ]
+
+  for (const [cssVar, value] of overflowMetricsPx) {
+    viewportEl.style.setProperty(cssVar, `${value}px`)
+  }
+
+  if (cornerEl) {
+    if (scrollbarXHidden || scrollbarYHidden) {
+      setCornerSize({ width: 0, height: 0 })
+    }
+    else {
+      setCornerSize({ width: nextCornerWidth, height: nextCornerHeight })
+    }
+  }
+
+  setHiddenState(mergeHiddenState(hiddenState.value, nextHiddenState))
+
+  const threshold = overflowEdgeThreshold.value
+  const nextOverflowEdges = {
+    xStart: !scrollbarXHidden && scrollLeftFromStart > threshold.xStart,
+    xEnd: !scrollbarXHidden && scrollLeftFromEnd > threshold.xEnd,
+    yStart: !scrollbarYHidden && scrollTopFromStart > threshold.yStart,
+    yEnd: !scrollbarYHidden && scrollTopFromEnd > threshold.yEnd,
+  }
+
+  const prev = overflowEdges.value
+  if (
+    prev.xStart !== nextOverflowEdges.xStart
+    || prev.xEnd !== nextOverflowEdges.xEnd
+    || prev.yStart !== nextOverflowEdges.yStart
+    || prev.yEnd !== nextOverflowEdges.yEnd
+  ) {
+    setOverflowEdges(nextOverflowEdges)
+  }
+}
+
+function handleUserInteraction() {
+  programmaticScroll = false
+}
+
+function onScroll() {
+  if (!viewportRef.value)
+    return
+
+  computeThumbPosition()
+
+  if (!programmaticScroll) {
+    handleScroll({
+      x: viewportRef.value.scrollLeft,
+      y: viewportRef.value.scrollTop,
+    })
+  }
+
+  clearTimeout(scrollEndTimeoutId)
+  scrollEndTimeoutId = setTimeout(() => {
+    programmaticScroll = true
+  }, 100)
+}
+
+const viewportState = computed<ScrollAreaViewportState>(() => ({
+  scrolling: scrollingX.value || scrollingY.value,
+  hasOverflowX: !hiddenState.value.x,
+  hasOverflowY: !hiddenState.value.y,
+  overflowXStart: overflowEdges.value.xStart,
+  overflowXEnd: overflowEdges.value.xEnd,
+  overflowYStart: overflowEdges.value.yStart,
+  overflowYEnd: overflowEdges.value.yEnd,
+  cornerHidden: hiddenState.value.corner,
+}))
+
+const elementProps = computed(() => mergeProps(
+  attrs as Record<string, any>,
+  {
+    role: 'presentation',
+    ...(rootId ? { 'data-id': `${rootId}-viewport` } : {}),
+    tabindex: hiddenState.value.x && hiddenState.value.y ? -1 : 0,
+    class: styleDisableScrollbar.className,
+    style: { overflow: 'scroll' },
+    onScroll,
+    onWheel: handleUserInteraction,
+    onTouchmove: handleUserInteraction,
+    onPointermove: handleUserInteraction,
+    onPointerenter: handleUserInteraction,
+    onKeydown: handleUserInteraction,
+  },
+))
+
+const {
+  tag,
+  mergedProps,
+  renderless,
+  ref: renderRef,
+} = useRenderElement({
+  componentProps: props,
+  state: viewportState,
+  props: elementProps,
+  stateAttributesMapping: scrollAreaStateAttributesMapping,
+  defaultTagName: 'div',
+  ref: viewportRef,
+})
+
+onMounted(() => {
+  removeCSSVariableInheritance()
+
+  if (viewportRef.value?.matches(':hover')) {
+    setHovering(true)
+  }
+
+  queueMicrotask(computeThumbPosition)
+
+  const viewport = viewportRef.value
+  if (typeof ResizeObserver !== 'undefined' && viewport) {
+    let hasInitialized = false
+    resizeObserver = new ResizeObserver(() => {
+      if (!hasInitialized) {
+        hasInitialized = true
+        if (
+          lastMeasuredViewportMetrics[0] === viewport.clientHeight
+          && lastMeasuredViewportMetrics[1] === viewport.scrollHeight
+          && lastMeasuredViewportMetrics[2] === viewport.clientWidth
+          && lastMeasuredViewportMetrics[3] === viewport.scrollWidth
+        ) {
+          return
+        }
+      }
+      computeThumbPosition()
+    })
+    resizeObserver.observe(viewport)
+
+    waitForAnimationsTimeoutId = setTimeout(() => {
+      const animations = viewport.getAnimations({ subtree: true })
+      if (animations.length === 0)
+        return
+      Promise.allSettled(animations.map(a => a.finished))
+        .then(computeThumbPosition)
+    }, 0)
+  }
+})
+
+watch([hiddenState, direction], () => {
+  queueMicrotask(computeThumbPosition)
+})
+
+watch(overflowEdgeThreshold, computeThumbPosition)
+
+onBeforeUnmount(() => {
+  resizeObserver?.disconnect()
+  clearTimeout(scrollEndTimeoutId)
+  clearTimeout(waitForAnimationsTimeoutId)
+})
+
+provide(scrollAreaViewportContextKey, { computeThumbPosition })
+
+function getHiddenState(viewport: HTMLElement): HiddenState {
+  const y = viewport.clientHeight >= viewport.scrollHeight
+  const x = viewport.clientWidth >= viewport.scrollWidth
+  return { y, x, corner: y || x }
+}
+
+function mergeHiddenState(prevState: HiddenState, nextState: HiddenState): HiddenState {
+  if (prevState.y === nextState.y && prevState.x === nextState.x && prevState.corner === nextState.corner) {
+    return prevState
+  }
+  return nextState
+}
+</script>
+
+<template>
+  <slot v-if="renderless" :ref="renderRef" :props="mergedProps" :state="viewportState" />
+  <component
+    :is="tag"
+    v-else
+    :ref="renderRef"
+    v-bind="mergedProps"
+  >
+    <slot />
+  </component>
+</template>

package/src/scroll-area/viewport/ScrollAreaViewportContext.ts

@@ -0,0 +1,20 @@
+import type { InjectionKey } from 'vue'
+import { inject } from 'vue'
+
+export interface ScrollAreaViewportContext {
+  computeThumbPosition: () => void
+}
+
+export const scrollAreaViewportContextKey = Symbol(
+  'ScrollAreaViewportContext',
+) as InjectionKey<ScrollAreaViewportContext>
+
+export function useScrollAreaViewportContext(): ScrollAreaViewportContext {
+  const context = inject(scrollAreaViewportContextKey)
+  if (context === undefined) {
+    throw new Error(
+      'Base UI: ScrollAreaViewportContext is missing. ScrollArea.Content must be placed within <ScrollAreaViewport>.',
+    )
+  }
+  return context
+}

package/src/scroll-area/viewport/ScrollAreaViewportCssVars.ts

@@ -0,0 +1,6 @@
+export enum ScrollAreaViewportCssVars {
+  scrollAreaOverflowXStart = '--scroll-area-overflow-x-start',
+  scrollAreaOverflowXEnd = '--scroll-area-overflow-x-end',
+  scrollAreaOverflowYStart = '--scroll-area-overflow-y-start',
+  scrollAreaOverflowYEnd = '--scroll-area-overflow-y-end',
+}

package/src/scroll-area/viewport/ScrollAreaViewportDataAttributes.ts

@@ -0,0 +1,9 @@
+export enum ScrollAreaViewportDataAttributes {
+  scrolling = 'data-scrolling',
+  hasOverflowX = 'data-has-overflow-x',
+  hasOverflowY = 'data-has-overflow-y',
+  overflowXStart = 'data-overflow-x-start',
+  overflowXEnd = 'data-overflow-x-end',
+  overflowYStart = 'data-overflow-y-start',
+  overflowYEnd = 'data-overflow-y-end',
+}

package/src/utils/detectBrowser.ts

@@ -0,0 +1,15 @@
+const ua = typeof navigator !== 'undefined' ? navigator.userAgent : ''
+const platform = typeof navigator !== 'undefined' ? navigator.platform : ''
+const maxTouchPoints = typeof navigator !== 'undefined' ? navigator.maxTouchPoints : 0
+
+export const isWebKit
+  = typeof CSS !== 'undefined' && typeof CSS.supports === 'function'
+    ? CSS.supports('-webkit-backdrop-filter:none') && !/chrome|android/i.test(ua)
+    : /\b(?:iphone|ipad|ipod)\b/i.test(ua)
+
+export const isFirefox = /firefox/i.test(ua)
+
+export const isIOS
+  = /\b(?:iphone|ipad|ipod)\b/i.test(ua)
+    // iPadOS reports as "MacIntel" but exposes touch points.
+    || (platform === 'MacIntel' && maxTouchPoints > 1)

package/src/utils/formatNumber.ts

@@ -1,7 +1,65 @@
+const formatterCache = new Map<string, Intl.NumberFormat>()
+
+/**
+ * Returns a memoized `Intl.NumberFormat` for the given locale/options.
+ */
+export function getFormatter(locale?: Intl.LocalesArgument, options?: Intl.NumberFormatOptions) {
+  const optionsString = JSON.stringify({ locale, options })
+  const cachedFormatter = formatterCache.get(optionsString)
+
+  if (cachedFormatter) {
+    return cachedFormatter
+  }
+
+  const formatter = new Intl.NumberFormat(locale, options)
+  formatterCache.set(optionsString, formatter)
+
+  return formatter
+}
+
 export function formatNumber(
-  value: number,
+  value: number | null,
   locale?: Intl.LocalesArgument,
   options?: Intl.NumberFormatOptions,
 ) {
-  return new Intl.NumberFormat(locale, options).format(value)
+  if (value == null) {
+    return ''
+  }
+  return getFormatter(locale, options).format(value)
+}
+
+export function formatNumberMaxPrecision(
+  value: number | null,
+  locale?: Intl.LocalesArgument,
+  options?: Intl.NumberFormatOptions,
+) {
+  return formatNumber(value, locale, {
+    ...options,
+    maximumFractionDigits: 20,
+  })
+}
+
+/**
+ * Formats a numeric value for display inside Base UI Vue components.
+ *
+ * When no `format` is provided, the value is interpreted as a percentage
+ * in the 0-100 range (matching React's Base UI semantics for
+ * `<Meter.Root>` / `<Progress.Root>`).
+ *
+ * Returns an empty string when the value is `null`.
+ */
+export function formatNumberValue(
+  value: number | null,
+  locale?: Intl.LocalesArgument,
+  format?: Intl.NumberFormatOptions,
+): string {
+  if (value == null) {
+    return ''
+  }
+
+  if (!format) {
+    return formatNumber(value / 100, locale, { style: 'percent' })
+  }
+
+  return formatNumber(value, locale, format)
 }

package/src/utils/scrollEdges.ts

@@ -0,0 +1,33 @@
+import { clamp } from './clamp'
+
+export const SCROLL_EDGE_TOLERANCE_PX = 1
+
+export function getMaxScrollOffset(scrollSize: number, clientSize: number) {
+  return Math.max(0, scrollSize - clientSize)
+}
+
+export function normalizeScrollOffset(value: number, max: number) {
+  if (max <= 0) {
+    return 0
+  }
+
+  const clamped = clamp(value, 0, max)
+  const startDistance = clamped
+  const endDistance = max - clamped
+  const withinStartTolerance = startDistance <= SCROLL_EDGE_TOLERANCE_PX
+  const withinEndTolerance = endDistance <= SCROLL_EDGE_TOLERANCE_PX
+
+  if (withinStartTolerance && withinEndTolerance) {
+    return startDistance <= endDistance ? 0 : max
+  }
+
+  if (withinStartTolerance) {
+    return 0
+  }
+
+  if (withinEndTolerance) {
+    return max
+  }
+
+  return clamped
+}

package/src/utils/styles.ts

@@ -0,0 +1,28 @@
+const DISABLE_SCROLLBAR_CLASS_NAME = 'base-ui-disable-scrollbar'
+const STYLE_ELEMENT_ID = `style-${DISABLE_SCROLLBAR_CLASS_NAME}`
+
+export const styleDisableScrollbar = {
+  className: DISABLE_SCROLLBAR_CLASS_NAME,
+
+  inject(nonce?: string, disableStyleElements?: boolean) {
+    if (disableStyleElements) {
+      return
+    }
+
+    if (typeof document === 'undefined') {
+      return
+    }
+
+    if (document.getElementById(STYLE_ELEMENT_ID)) {
+      return
+    }
+
+    const style = document.createElement('style')
+    style.id = STYLE_ELEMENT_ID
+    if (nonce) {
+      style.nonce = nonce
+    }
+    style.textContent = `.${DISABLE_SCROLLBAR_CLASS_NAME}{scrollbar-width:none}.${DISABLE_SCROLLBAR_CLASS_NAME}::-webkit-scrollbar{display:none}`
+    document.head.appendChild(style)
+  },
+}

package/src/utils/useInterval.ts

@@ -0,0 +1,45 @@
+import { onUnmounted } from 'vue'
+
+type IntervalId = number
+
+const EMPTY = 0 as IntervalId
+
+export class Interval {
+  currentId: IntervalId = EMPTY
+
+  static create() {
+    return new Interval()
+  }
+
+  /**
+   * Repeatedly executes `fn` every `delay` ms, clearing any previously scheduled interval.
+   */
+  start(delay: number, fn: () => void) {
+    this.clear()
+    this.currentId = setInterval(fn, delay) as unknown as IntervalId
+  }
+
+  isStarted() {
+    return this.currentId !== EMPTY
+  }
+
+  clear = () => {
+    if (this.currentId !== EMPTY) {
+      clearInterval(this.currentId)
+      this.currentId = EMPTY
+    }
+  }
+}
+
+/**
+ * A `setInterval` with automatic cleanup on unmount.
+ */
+export function useInterval() {
+  const interval = Interval.create()
+
+  onUnmounted(() => {
+    interval.clear()
+  })
+
+  return interval
+}