base-ui-vue 0.2.0 → 0.4.0

package/src/number-field/root/useNumberFieldButton.ts

@@ -0,0 +1,171 @@
+import type { ComputedRef, Ref } from 'vue'
+import type {
+  Direction,
+  EventWithOptionalKeyState,
+  IncrementValueParameters,
+} from '../utils/types'
+import type {
+  NumberFieldRootChangeEventDetails,
+  NumberFieldRootChangeEventReason,
+  NumberFieldRootCommitEventDetails,
+} from './NumberFieldRootContext'
+import { computed } from 'vue'
+import {
+  createChangeEventDetails,
+  createGenericEventDetails,
+} from '../../utils/createBaseUIEventDetails'
+import { REASONS } from '../../utils/reasons'
+import { usePressAndHold } from '../../utils/usePressAndHold'
+import {
+  CHANGE_VALUE_TICK_DELAY,
+  DEFAULT_STEP,
+  SCROLLING_POINTER_MOVE_DISTANCE,
+  START_AUTO_CHANGE_DELAY,
+} from '../utils/constants'
+import { parseNumber } from '../utils/parse'
+
+// Treat pen as touch-like to avoid forcing the software keyboard on stylus taps.
+function isTouchLikePointerType(pointerType: string) {
+  return pointerType === 'touch' || pointerType === 'pen'
+}
+
+export interface UseNumberFieldButtonParameters {
+  isIncrement: boolean
+  inputRef: Ref<HTMLInputElement | null>
+  inputValue: () => string
+  disabled: () => boolean
+  readOnly: () => boolean
+  id: () => string | undefined
+  setValue: (value: number | null, details: NumberFieldRootChangeEventDetails) => boolean
+  getStepAmount: (event?: EventWithOptionalKeyState) => number | undefined
+  incrementValue: (amount: number, params: IncrementValueParameters) => boolean
+  allowInputSyncRef: Ref<boolean>
+  formatOptionsRef: ComputedRef<Intl.NumberFormatOptions | undefined>
+  valueRef: Ref<number | null>
+  locale: () => Intl.LocalesArgument
+  lastChangedValueRef: Ref<number | null>
+  onValueCommitted: (value: number | null, eventDetails: NumberFieldRootCommitEventDetails) => void
+}
+
+export function useNumberFieldButton(
+  params: UseNumberFieldButtonParameters,
+): ComputedRef<Record<string, any>> {
+  const {
+    allowInputSyncRef,
+    formatOptionsRef,
+    getStepAmount,
+    incrementValue,
+    inputRef,
+    inputValue,
+    isIncrement,
+    locale,
+    setValue,
+    valueRef,
+    lastChangedValueRef,
+    onValueCommitted,
+  } = params
+
+  const disabled = () => params.disabled()
+  const readOnly = () => params.readOnly()
+
+  const pressReason: NumberFieldRootChangeEventReason = isIncrement
+    ? REASONS.incrementPress
+    : REASONS.decrementPress
+
+  function commitValue(nativeEvent: MouseEvent) {
+    allowInputSyncRef.value = true
+
+    // The input may be dirty but not yet blurred, so the value won't have been committed.
+    const parsedValue = parseNumber(inputValue(), locale(), formatOptionsRef.value)
+
+    if (parsedValue !== null) {
+      // The increment value function needs to know the current input value to increment it
+      // correctly.
+      valueRef.value = parsedValue
+      setValue(
+        parsedValue,
+        createChangeEventDetails<NumberFieldRootChangeEventReason, { direction?: Direction }>(
+          pressReason,
+          nativeEvent,
+          undefined,
+          { direction: isIncrement ? 1 : -1 },
+        ),
+      )
+    }
+  }
+
+  const { pointerHandlers, shouldSkipClick } = usePressAndHold({
+    disabled: () => disabled() || readOnly(),
+    elementRef: inputRef,
+    tickDelay: CHANGE_VALUE_TICK_DELAY,
+    startDelay: START_AUTO_CHANGE_DELAY,
+    scrollDistance: SCROLLING_POINTER_MOVE_DISTANCE,
+    tick(triggerEvent) {
+      const amount = getStepAmount(triggerEvent as EventWithOptionalKeyState) ?? DEFAULT_STEP
+      return incrementValue(amount, {
+        direction: isIncrement ? 1 : -1,
+        event: triggerEvent,
+        reason: pressReason,
+      })
+    },
+    onStop(nativeEvent: PointerEvent) {
+      const committed = lastChangedValueRef.value ?? valueRef.value
+      onValueCommitted(committed, createGenericEventDetails(pressReason, nativeEvent))
+    },
+  })
+
+  return computed<Record<string, any>>(() => ({
+    'disabled': disabled(),
+    'aria-readonly': readOnly() || undefined,
+    'aria-label': isIncrement ? 'Increase' : 'Decrease',
+    'aria-controls': params.id(),
+    // Keyboard users shouldn't have access to the buttons, since they can use the input element
+    // to change the value. On the other hand, `aria-hidden` is not applied because touch screen
+    // readers should be able to use the buttons.
+    'tabindex': -1,
+    'style': {
+      WebkitUserSelect: 'none',
+      userSelect: 'none',
+    },
+    ...pointerHandlers,
+    onClick(event: MouseEvent) {
+      const isDisabled = disabled() || readOnly()
+      if (event.defaultPrevented || isDisabled || shouldSkipClick(event)) {
+        return
+      }
+
+      commitValue(event)
+
+      const amount = getStepAmount(event as EventWithOptionalKeyState) ?? DEFAULT_STEP
+
+      const prev = valueRef.value
+
+      incrementValue(amount, {
+        direction: isIncrement ? 1 : -1,
+        event,
+        reason: pressReason,
+      })
+
+      const committed = lastChangedValueRef.value ?? valueRef.value
+      if (committed !== prev) {
+        onValueCommitted(committed, createGenericEventDetails(pressReason, event))
+      }
+    },
+    onPointerdown(event: PointerEvent) {
+      const isMainButton = !event.button || event.button === 0
+      if (event.defaultPrevented || readOnly() || !isMainButton || disabled()) {
+        return
+      }
+
+      // Sync dirty input value before starting the hold sequence.
+      commitValue(event)
+
+      if (!isTouchLikePointerType(event.pointerType)) {
+        // Focus the input so the user can continue with keyboard interactions.
+        inputRef.value?.focus()
+      }
+
+      pointerHandlers.onPointerdown(event)
+    },
+  }))
+}

package/src/number-field/scrub-area/NumberFieldScrubArea.vue

@@ -0,0 +1,359 @@
+<script setup lang="ts">
+import type { BaseUIComponentProps } from '../../utils/types'
+import type { NumberFieldRootState } from '../root/NumberFieldRoot.vue'
+import { computed, onMounted, provide, ref, useAttrs, watch } from 'vue'
+import { getTarget } from '../../floating-ui-vue/utils'
+import { mergeProps } from '../../merge-props/mergeProps'
+import { createGenericEventDetails } from '../../utils/createBaseUIEventDetails'
+import { isFirefox, isWebKit } from '../../utils/detectBrowser'
+import { ownerDocument, ownerWindow } from '../../utils/owner'
+import { REASONS } from '../../utils/reasons'
+import { useRenderElement } from '../../utils/useRenderElement'
+import { useTimeout } from '../../utils/useTimeout'
+import { useNumberFieldRootContext } from '../root/NumberFieldRootContext'
+import { DEFAULT_STEP } from '../utils/constants'
+import { getViewportRect } from '../utils/getViewportRect'
+import { stateAttributesMapping } from '../utils/stateAttributesMapping'
+import { subscribeToVisualViewportResize } from '../utils/subscribeToVisualViewportResize'
+import { numberFieldScrubAreaContextKey } from './NumberFieldScrubAreaContext'
+
+export type NumberFieldScrubAreaState = NumberFieldRootState
+
+export interface NumberFieldScrubAreaProps extends BaseUIComponentProps<NumberFieldScrubAreaState> {
+  /**
+   * Cursor movement direction in the scrub area.
+   * @default 'horizontal'
+   */
+  direction?: 'horizontal' | 'vertical'
+  /**
+   * Determines how many pixels the cursor must move before the value changes.
+   * A higher value will make scrubbing less sensitive.
+   * @default 2
+   */
+  pixelSensitivity?: number
+  /**
+   * If specified, determines the distance that the cursor may move from the center
+   * of the scrub area before it will loop back around.
+   */
+  teleportDistance?: number
+}
+
+defineOptions({
+  name: 'NumberFieldScrubArea',
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<NumberFieldScrubAreaProps>(), {
+  as: 'span',
+  direction: 'horizontal',
+  pixelSensitivity: 2,
+})
+
+const attrs = useAttrs()
+const attrsObject = attrs as Record<string, any>
+
+const {
+  state,
+  setIsScrubbing: setRootScrubbing,
+  disabled,
+  readOnly,
+  inputRef,
+  incrementValue,
+  allowInputSyncRef,
+  getStepAmount,
+  onValueCommitted,
+  lastChangedValueRef,
+  valueRef,
+} = useNumberFieldRootContext()
+
+const direction = computed(() => props.direction)
+const pixelSensitivity = computed(() => props.pixelSensitivity)
+const teleportDistance = computed(() => props.teleportDistance)
+
+const scrubAreaRef = ref<HTMLElement | null>(null)
+const scrubAreaCursorRef = ref<HTMLElement | null>(null)
+
+let isScrubbingInternal = false
+let didMove = false
+let pointerDownTarget: EventTarget | null = null
+let virtualCursorCoords = { x: 0, y: 0 }
+const visualScaleRef = ref(1)
+
+const exitPointerLockTimeout = useTimeout()
+
+const isTouchInput = ref(false)
+const isPointerLockDenied = ref(false)
+const isScrubbing = ref(false)
+
+watch(
+  isScrubbing,
+  (scrubbing, _prev, onCleanup) => {
+    if (!scrubbing || !scrubAreaCursorRef.value) {
+      return
+    }
+
+    const unsubscribe = subscribeToVisualViewportResize(scrubAreaCursorRef.value, visualScaleRef)
+    onCleanup(unsubscribe)
+  },
+  { flush: 'post' },
+)
+
+function updateCursorTransform(x: number, y: number) {
+  if (scrubAreaCursorRef.value) {
+    scrubAreaCursorRef.value.style.transform = `translate3d(${x}px,${y}px,0) scale(${1 / visualScaleRef.value})`
+  }
+}
+
+function onScrub({ movementX, movementY }: PointerEvent) {
+  const virtualCursor = scrubAreaCursorRef.value
+  const scrubAreaEl = scrubAreaRef.value
+
+  if (!virtualCursor || !scrubAreaEl) {
+    return
+  }
+
+  const rect = getViewportRect(teleportDistance.value, scrubAreaEl)
+
+  const coords = virtualCursorCoords
+  const newCoords = {
+    x: Math.round(coords.x + movementX),
+    y: Math.round(coords.y + movementY),
+  }
+
+  const cursorWidth = virtualCursor.offsetWidth
+  const cursorHeight = virtualCursor.offsetHeight
+
+  if (newCoords.x + cursorWidth / 2 < rect.x) {
+    newCoords.x = rect.width - cursorWidth / 2
+  }
+  else if (newCoords.x + cursorWidth / 2 > rect.width) {
+    newCoords.x = rect.x - cursorWidth / 2
+  }
+
+  if (newCoords.y + cursorHeight / 2 < rect.y) {
+    newCoords.y = rect.height - cursorHeight / 2
+  }
+  else if (newCoords.y + cursorHeight / 2 > rect.height) {
+    newCoords.y = rect.y - cursorHeight / 2
+  }
+
+  virtualCursorCoords = newCoords
+
+  updateCursorTransform(newCoords.x, newCoords.y)
+}
+
+function onScrubbingChange(scrubbingValue: boolean, { clientX, clientY }: PointerEvent) {
+  isScrubbing.value = scrubbingValue
+  setRootScrubbing(scrubbingValue)
+
+  const virtualCursor = scrubAreaCursorRef.value
+  if (!virtualCursor || !scrubbingValue) {
+    return
+  }
+
+  const initialCoords = {
+    x: clientX - virtualCursor.offsetWidth / 2,
+    y: clientY - virtualCursor.offsetHeight / 2,
+  }
+
+  virtualCursorCoords = initialCoords
+
+  updateCursorTransform(initialCoords.x, initialCoords.y)
+}
+
+// Register global scrubbing listeners only while actively scrubbing.
+watch(
+  [isScrubbing, disabled, readOnly],
+  (_value, _prev, onCleanup) => {
+    if (!inputRef.value || disabled.value || readOnly.value || !isScrubbing.value) {
+      return
+    }
+
+    let cumulativeDelta = 0
+
+    function handleScrubPointerUp(event: PointerEvent) {
+      function handler() {
+        try {
+          ownerDocument(scrubAreaRef.value)?.exitPointerLock()
+        }
+        catch {
+          // Ignore errors.
+        }
+        finally {
+          isScrubbingInternal = false
+          onScrubbingChange(false, event)
+          onValueCommitted(
+            lastChangedValueRef.value ?? valueRef.value,
+            createGenericEventDetails(REASONS.scrub, event),
+          )
+
+          // Manually dispatch a click event if no movement happened, since
+          // preventDefault on pointerdown prevents the browser click event.
+          const target = pointerDownTarget
+          const input = inputRef.value
+          if (!didMove && target != null && input) {
+            target.dispatchEvent(
+              new (ownerWindow(input).MouseEvent)('click', {
+                bubbles: true,
+                cancelable: true,
+              }),
+            )
+          }
+
+          didMove = false
+          pointerDownTarget = null
+        }
+      }
+
+      if (isFirefox) {
+        // Firefox needs a small delay here when soft-clicking as the pointer
+        // lock will not release otherwise.
+        exitPointerLockTimeout.start(20, handler)
+      }
+      else {
+        handler()
+      }
+    }
+
+    function handleScrubPointerMove(event: PointerEvent) {
+      if (!isScrubbingInternal) {
+        return
+      }
+
+      // Prevent text selection.
+      event.preventDefault()
+
+      onScrub(event)
+
+      const { movementX, movementY } = event
+
+      cumulativeDelta += direction.value === 'vertical' ? movementY : movementX
+
+      if (Math.abs(cumulativeDelta) >= pixelSensitivity.value) {
+        cumulativeDelta = 0
+        didMove = true
+        const dValue = direction.value === 'vertical' ? -movementY : movementX
+        const stepAmount = getStepAmount(event) ?? DEFAULT_STEP
+        const rawAmount = dValue * stepAmount
+
+        if (rawAmount !== 0) {
+          allowInputSyncRef.value = true
+          incrementValue(Math.abs(rawAmount), {
+            direction: rawAmount >= 0 ? 1 : -1,
+            event,
+            reason: REASONS.scrub,
+          })
+        }
+      }
+    }
+
+    const win = ownerWindow(inputRef.value)
+    win.addEventListener('pointerup', handleScrubPointerUp, true)
+    win.addEventListener('pointermove', handleScrubPointerMove, true)
+
+    onCleanup(() => {
+      exitPointerLockTimeout.clear()
+      win.removeEventListener('pointerup', handleScrubPointerUp, true)
+      win.removeEventListener('pointermove', handleScrubPointerMove, true)
+    })
+  },
+  { flush: 'post' },
+)
+
+// Prevent scrolling using touch input when scrubbing.
+onMounted(() => {
+  const element = scrubAreaRef.value
+  if (!element || disabled.value || readOnly.value) {
+    return
+  }
+
+  function handleTouchStart(event: TouchEvent) {
+    if (event.touches.length === 1) {
+      event.preventDefault()
+    }
+  }
+
+  element.addEventListener('touchstart', handleTouchStart, { passive: false })
+})
+
+async function onPointerdown(event: PointerEvent) {
+  const isMainButton = !event.button || event.button === 0
+  if (event.defaultPrevented || readOnly.value || !isMainButton || disabled.value) {
+    return
+  }
+
+  const isTouch = event.pointerType === 'touch'
+  isTouchInput.value = isTouch
+
+  if (event.pointerType === 'mouse') {
+    event.preventDefault()
+    inputRef.value?.focus()
+  }
+
+  isScrubbingInternal = true
+  didMove = false
+  pointerDownTarget = getTarget(event)
+  onScrubbingChange(true, event)
+
+  // WebKit causes significant layout shift with the native message, so we can't use it.
+  if (!isTouch && !isWebKit) {
+    try {
+      // Avoid non-deterministic errors in testing environments.
+      await ownerDocument(scrubAreaRef.value)?.body.requestPointerLock()
+      isPointerLockDenied.value = false
+    }
+    catch {
+      isPointerLockDenied.value = true
+    }
+    finally {
+      if (isScrubbingInternal) {
+        onScrubbingChange(true, event)
+      }
+    }
+  }
+}
+
+const defaultProps = computed(() => ({
+  role: 'presentation',
+  style: {
+    touchAction: 'none',
+    WebkitUserSelect: 'none',
+    userSelect: 'none',
+  },
+  onPointerdown,
+}))
+
+const scrubAreaProps = computed(() => mergeProps(defaultProps.value, attrsObject))
+
+provide(numberFieldScrubAreaContextKey, {
+  isScrubbing,
+  isTouchInput,
+  isPointerLockDenied,
+  scrubAreaCursorRef,
+  scrubAreaRef,
+  direction,
+  pixelSensitivity,
+  teleportDistance,
+})
+
+const {
+  tag,
+  mergedProps,
+  renderless,
+  ref: renderRef,
+} = useRenderElement({
+  componentProps: props,
+  state,
+  props: scrubAreaProps,
+  stateAttributesMapping,
+  defaultTagName: 'span',
+  ref: scrubAreaRef,
+})
+</script>
+
+<template>
+  <slot v-if="renderless" :ref="renderRef" :props="mergedProps" :state="state" />
+  <component :is="tag" v-else :ref="renderRef" v-bind="mergedProps">
+    <slot :state="state" />
+  </component>
+</template>

package/src/number-field/scrub-area/NumberFieldScrubAreaContext.ts

@@ -0,0 +1,26 @@
+import type { ComputedRef, InjectionKey, Ref } from 'vue'
+import { inject } from 'vue'
+
+export interface NumberFieldScrubAreaContext {
+  isScrubbing: Readonly<Ref<boolean>>
+  isTouchInput: Readonly<Ref<boolean>>
+  isPointerLockDenied: Readonly<Ref<boolean>>
+  scrubAreaCursorRef: Ref<HTMLElement | null>
+  scrubAreaRef: Ref<HTMLElement | null>
+  direction: ComputedRef<'horizontal' | 'vertical'>
+  pixelSensitivity: ComputedRef<number>
+  teleportDistance: ComputedRef<number | undefined>
+}
+
+export const numberFieldScrubAreaContextKey: InjectionKey<NumberFieldScrubAreaContext>
+  = Symbol('NumberFieldScrubAreaContext')
+
+export function useNumberFieldScrubAreaContext() {
+  const context = inject(numberFieldScrubAreaContextKey, undefined)
+  if (context === undefined) {
+    throw new Error(
+      'Base UI Vue: NumberFieldScrubAreaContext is missing. NumberFieldScrubArea parts must be placed within <NumberFieldScrubArea>.',
+    )
+  }
+  return context
+}

package/src/number-field/scrub-area-cursor/NumberFieldScrubAreaCursor.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import type { ComponentPublicInstance } from 'vue'
+import type { BaseUIComponentProps } from '../../utils/types'
+import type { NumberFieldRootState } from '../root/NumberFieldRoot.vue'
+import { computed, useAttrs } from 'vue'
+import { mergeProps } from '../../merge-props/mergeProps'
+import { isWebKit } from '../../utils/detectBrowser'
+import { useRenderElement } from '../../utils/useRenderElement'
+import { useNumberFieldRootContext } from '../root/NumberFieldRootContext'
+import { useNumberFieldScrubAreaContext } from '../scrub-area/NumberFieldScrubAreaContext'
+import { stateAttributesMapping } from '../utils/stateAttributesMapping'
+
+export type NumberFieldScrubAreaCursorState = NumberFieldRootState
+
+export interface NumberFieldScrubAreaCursorProps
+  extends BaseUIComponentProps<NumberFieldScrubAreaCursorState> {}
+
+defineOptions({
+  name: 'NumberFieldScrubAreaCursor',
+  inheritAttrs: false,
+})
+
+const props = defineProps<NumberFieldScrubAreaCursorProps>()
+
+const attrs = useAttrs()
+const attrsObject = attrs as Record<string, any>
+
+const { state } = useNumberFieldRootContext()
+const { isScrubbing, isTouchInput, isPointerLockDenied, scrubAreaCursorRef }
+  = useNumberFieldScrubAreaContext()
+
+const shouldRender = computed(
+  () => isScrubbing.value && !isWebKit && !isTouchInput.value && !isPointerLockDenied.value,
+)
+
+function setCursorRef(el: Element | ComponentPublicInstance | null) {
+  scrubAreaCursorRef.value = el as HTMLElement | null
+}
+
+const cursorProps = computed(() => mergeProps(
+  {
+    role: 'presentation',
+    style: {
+      position: 'fixed',
+      top: 0,
+      left: 0,
+      pointerEvents: 'none',
+    },
+  },
+  attrsObject,
+))
+
+const {
+  tag,
+  mergedProps,
+  renderless,
+  ref: renderRef,
+} = useRenderElement({
+  componentProps: props,
+  state,
+  props: cursorProps,
+  stateAttributesMapping,
+  defaultTagName: 'span',
+  ref: setCursorRef,
+})
+</script>
+
+<template>
+  <Teleport v-if="shouldRender" to="body">
+    <slot v-if="renderless" :ref="renderRef" :props="mergedProps" :state="state" />
+    <component :is="tag" v-else :ref="renderRef" v-bind="mergedProps">
+      <slot :state="state" />
+    </component>
+  </Teleport>
+</template>

package/src/number-field/utils/constants.ts

@@ -0,0 +1,4 @@
+export const CHANGE_VALUE_TICK_DELAY = 60
+export const START_AUTO_CHANGE_DELAY = 400
+export const SCROLLING_POINTER_MOVE_DISTANCE = 8
+export const DEFAULT_STEP = 1

package/src/number-field/utils/getViewportRect.ts

@@ -0,0 +1,34 @@
+import { ownerWindow } from '../../utils/owner'
+
+// Calculates the viewport rect for the virtual cursor.
+export function getViewportRect(teleportDistance: number | undefined, scrubAreaEl: HTMLElement) {
+  const win = ownerWindow(scrubAreaEl)
+  const rect = scrubAreaEl.getBoundingClientRect()
+
+  if (rect && teleportDistance != null) {
+    return {
+      x: rect.left - teleportDistance / 2,
+      y: rect.top - teleportDistance / 2,
+      width: rect.right + teleportDistance / 2,
+      height: rect.bottom + teleportDistance / 2,
+    }
+  }
+
+  const vV = win.visualViewport
+
+  if (vV) {
+    return {
+      x: vV.offsetLeft,
+      y: vV.offsetTop,
+      width: vV.offsetLeft + vV.width,
+      height: vV.offsetTop + vV.height,
+    }
+  }
+
+  return {
+    x: 0,
+    y: 0,
+    width: win.document.documentElement.clientWidth,
+    height: win.document.documentElement.clientHeight,
+  }
+}