base-ui-vue 0.3.0 → 0.4.0

package/src/otp-field/utils/otp.ts

@@ -0,0 +1,135 @@
+interface OTPValidationConfig {
+  slotPattern: string
+  getRootPattern: (length: number) => string
+  regexp: RegExp
+  inputMode: 'numeric' | 'text'
+}
+
+export type OtpValidationType = 'numeric' | 'alpha' | 'alphanumeric' | 'none'
+
+const OTP_VALIDATION_CONFIG: Record<Exclude<OtpValidationType, 'none'>, OTPValidationConfig> = {
+  numeric: {
+    slotPattern: '\\d{1}',
+    getRootPattern: length => `\\d{${length}}`,
+    regexp: /\D/g,
+    inputMode: 'numeric',
+  },
+  alpha: {
+    slotPattern: '[a-z]{1}',
+    getRootPattern: length => `[a-z]{${length}}`,
+    regexp: /[^a-z]/gi,
+    inputMode: 'text',
+  },
+  alphanumeric: {
+    slotPattern: '[a-z0-9]{1}',
+    getRootPattern: length => `[a-z0-9]{${length}}`,
+    regexp: /[^a-z0-9]/gi,
+    inputMode: 'text',
+  },
+}
+
+export function getOTPValidationConfig(validationType: OtpValidationType) {
+  if (validationType === 'none') {
+    return null
+  }
+
+  return OTP_VALIDATION_CONFIG[validationType]
+}
+
+export function stripOTPWhitespace(value: string | null | undefined) {
+  return (value ?? '').replace(/\s/g, '')
+}
+
+function applyOTPValidation(value: string, validation: OTPValidationConfig | null) {
+  return validation ? value.replace(validation.regexp, '') : value
+}
+
+/**
+ * Normalizes user-entered OTP text by stripping whitespace, applying validation and custom
+ * normalization, and clamping the final value to the configured slot count.
+ */
+export function normalizeOTPValueWithDetails(
+  value: string | null | undefined,
+  length: number,
+  validationType: OtpValidationType,
+  normalizeValue?: ((value: string) => string) | undefined,
+): readonly [value: string, didRejectCharacters: boolean] {
+  const strippedValue = stripOTPWhitespace(value)
+  const validation = getOTPValidationConfig(validationType)
+  let normalizedValue = applyOTPValidation(strippedValue, validation)
+  let didRejectCharacters = strippedValue.length > normalizedValue.length
+
+  if (normalizeValue) {
+    const customNormalizedValue = normalizeValue(normalizedValue)
+    didRejectCharacters ||= normalizedValue.length > customNormalizedValue.length
+    normalizedValue = applyOTPValidation(customNormalizedValue, validation)
+    didRejectCharacters ||= customNormalizedValue.length > normalizedValue.length
+  }
+
+  // Slice by Unicode code points so multi-byte characters do not split across OTP slots.
+  const maxLength = length < 0 ? 0 : length
+  const normalizedCharacters = Array.from(normalizedValue)
+
+  return [
+    normalizedCharacters.slice(0, maxLength).join(''),
+    didRejectCharacters || normalizedCharacters.length > maxLength,
+  ]
+}
+
+export function normalizeOTPValue(
+  value: string | null | undefined,
+  length: number,
+  validationType: OtpValidationType,
+  normalizeValue?: ((value: string) => string) | undefined,
+) {
+  return normalizeOTPValueWithDetails(value, length, validationType, normalizeValue)[0]
+}
+
+export function getOTPCharacters(value: string | null | undefined) {
+  return Array.from(value ?? '')
+}
+
+export function getOTPValueLength(value: string | null | undefined) {
+  return getOTPCharacters(value).length
+}
+
+export function getOTPCharacter(value: string | null | undefined, index: number) {
+  return getOTPCharacters(value)[index] ?? ''
+}
+
+/**
+ * Replaces characters starting at the provided slot index, then re-normalizes the final OTP value
+ * so paste and multi-character edits stay contiguous and length-bounded.
+ */
+export function replaceOTPValue(
+  currentValue: string,
+  index: number,
+  nextValue: string,
+  length: number,
+  validationType: OtpValidationType,
+  normalizeValue?: ((value: string) => string) | undefined,
+) {
+  const normalizedValue = normalizeOTPValue(nextValue, length, validationType, normalizeValue)
+  const characters = getOTPCharacters(currentValue)
+  const replacementLength = getOTPValueLength(normalizedValue)
+  const prefix = characters.slice(0, index).join('')
+  const suffix = characters.slice(index + replacementLength).join('')
+
+  return normalizeOTPValue(
+    `${prefix}${normalizedValue}${suffix}`,
+    length,
+    validationType,
+    normalizeValue,
+  )
+}
+
+export function removeOTPCharacter(currentValue: string, index: number) {
+  const characters = getOTPCharacters(currentValue)
+
+  if (index < 0 || index >= characters.length) {
+    return currentValue
+  }
+
+  characters.splice(index, 1)
+  return characters.join('')
+}

package/src/otp-field/utils/stateAttributesMapping.ts

@@ -0,0 +1,16 @@
+import type { StateAttributesMapping } from '../../utils/getStateAttributesProps'
+import type { OtpFieldInputState } from '../input/OtpFieldInput.vue'
+import type { OtpFieldRootState } from '../root/OtpFieldRoot.vue'
+import { fieldValidityMapping } from '../../field/utils/constants'
+
+export const rootStateAttributesMapping: StateAttributesMapping<OtpFieldRootState> = {
+  value: () => null,
+  length: () => null,
+  ...fieldValidityMapping,
+}
+
+export const inputStateAttributesMapping: StateAttributesMapping<OtpFieldInputState> = {
+  value: () => null,
+  index: () => null,
+  ...fieldValidityMapping,
+}

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,9 +1,42 @@
+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,
+) {
+  if (value == null) {
+    return ''
+  }
+  return getFormatter(locale, options).format(value)
+}
+
+export function formatNumberMaxPrecision(
+  value: number | null,
   locale?: Intl.LocalesArgument,
   options?: Intl.NumberFormatOptions,
 ) {
-  return new Intl.NumberFormat(locale, options).format(value)
+  return formatNumber(value, locale, {
+    ...options,
+    maximumFractionDigits: 20,
+  })
 }
 
 /**

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

package/src/utils/usePressAndHold.ts

@@ -0,0 +1,260 @@
+import type { MaybeRefOrGetter, Ref } from 'vue'
+import { onUnmounted, toValue } from 'vue'
+import { ownerWindow } from './owner'
+import { useInterval } from './useInterval'
+import { useTimeout } from './useTimeout'
+
+const DEFAULT_TICK_DELAY = 60
+const DEFAULT_START_DELAY = 400
+const DEFAULT_SCROLL_DISTANCE = 8
+const TOUCH_TIMEOUT = 50
+const MAX_POINTER_MOVES_AFTER_TOUCH = 3
+
+// 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 UsePressAndHoldParameters {
+  disabled: MaybeRefOrGetter<boolean>
+  readOnly?: MaybeRefOrGetter<boolean>
+  /**
+   * Called on each tick during a hold. Return `false` to stop the auto-change sequence.
+   */
+  tick: (triggerEvent?: Event) => boolean
+  /**
+   * Called when the hold ends via the global `pointerup` event.
+   */
+  onStop?: (nativeEvent: PointerEvent) => void
+  /**
+   * Interval between ticks once the hold is active.
+   * @default 60
+   */
+  tickDelay?: number
+  /**
+   * Delay before the repeating ticks start after the initial hold.
+   * @default 400
+   */
+  startDelay?: number
+  /**
+   * Pointer movement distance (px) that cancels the hold and is treated as scrolling.
+   * @default 8
+   */
+  scrollDistance?: number
+  /**
+   * Ref to the anchor element used to resolve `ownerWindow`.
+   */
+  elementRef: Ref<HTMLElement | null>
+}
+
+export interface PressAndHoldPointerHandlers {
+  onTouchstart: (event: TouchEvent) => void
+  onTouchend: (event: TouchEvent) => void
+  onPointerdown: (event: PointerEvent) => void
+  onPointerup: (event: PointerEvent) => void
+  onPointermove: (event: PointerEvent) => void
+  onMouseenter: (event: MouseEvent) => void
+  onMouseleave: (event: MouseEvent) => void
+  onMouseup: (event: MouseEvent) => void
+}
+
+export interface UsePressAndHoldReturnValue {
+  pointerHandlers: PressAndHoldPointerHandlers
+  /**
+   * Returns `true` if the `onClick` handler should be skipped.
+   */
+  shouldSkipClick: (event: MouseEvent) => boolean
+}
+
+/**
+ * Adds press-and-hold behavior to a button element.
+ * On pointer down, performs one action immediately, then after a delay starts
+ * continuous repeated actions at a fixed interval. Handles mouse, touch, and pen inputs.
+ */
+export function usePressAndHold(params: UsePressAndHoldParameters): UsePressAndHoldReturnValue {
+  const {
+    tick,
+    onStop,
+    tickDelay = DEFAULT_TICK_DELAY,
+    startDelay = DEFAULT_START_DELAY,
+    scrollDistance = DEFAULT_SCROLL_DISTANCE,
+    elementRef,
+  } = params
+
+  const isDisabled = () => toValue(params.disabled)
+  const isReadOnly = () => toValue(params.readOnly ?? false)
+
+  const startTickTimeout = useTimeout()
+  const tickInterval = useInterval()
+  const intentionalTouchCheckTimeout = useTimeout()
+
+  let isPressed = false
+  let movesAfterTouch = 0
+  let downCoords = { x: 0, y: 0 }
+  let isTouchingButton = false
+  let ignoreClick = false
+  let pointerType = ''
+  let unsubscribeFromGlobalContextMenu: () => void = () => {}
+
+  function stopAutoChange() {
+    intentionalTouchCheckTimeout.clear()
+    startTickTimeout.clear()
+    tickInterval.clear()
+    unsubscribeFromGlobalContextMenu()
+    unsubscribeFromGlobalContextMenu = () => {}
+    movesAfterTouch = 0
+  }
+
+  function startAutoChange(triggerNativeEvent?: Event) {
+    stopAutoChange()
+
+    const element = elementRef.value
+    if (!element) {
+      return
+    }
+
+    const win = ownerWindow(element)
+
+    function handleContextMenu(event: Event) {
+      event.preventDefault()
+    }
+
+    // A global context menu listener prevents the context menu from appearing when
+    // the touch is slightly outside of the element's hit area.
+    win.addEventListener('contextmenu', handleContextMenu)
+    unsubscribeFromGlobalContextMenu = () => {
+      win.removeEventListener('contextmenu', handleContextMenu)
+    }
+
+    function handlePointerUp(event: PointerEvent) {
+      isPressed = false
+      stopAutoChange()
+      onStop?.(event)
+    }
+    win.addEventListener('pointerup', handlePointerUp, { once: true })
+
+    if (!tick(triggerNativeEvent)) {
+      stopAutoChange()
+      return
+    }
+
+    startTickTimeout.start(startDelay, () => {
+      tickInterval.start(tickDelay, () => {
+        if (!tick(triggerNativeEvent)) {
+          stopAutoChange()
+        }
+      })
+    })
+  }
+
+  onUnmounted(() => stopAutoChange())
+
+  const pointerHandlers: PressAndHoldPointerHandlers = {
+    onTouchstart() {
+      isTouchingButton = true
+    },
+    onTouchend() {
+      isTouchingButton = false
+    },
+    onPointerdown(event) {
+      const isMainButton = !event.button || event.button === 0
+      if (event.defaultPrevented || !isMainButton || isDisabled() || isReadOnly()) {
+        return
+      }
+
+      pointerType = event.pointerType
+      ignoreClick = false
+      isPressed = true
+      downCoords = { x: event.clientX, y: event.clientY }
+
+      const isTouchPointer = isTouchLikePointerType(event.pointerType)
+
+      if (!isTouchPointer) {
+        event.preventDefault()
+        startAutoChange(event)
+      }
+      else {
+        // Check if the pointerdown was intentional and not the result of a scroll or
+        // pinch-zoom. In that case, we don't want to start the auto-change sequence.
+        intentionalTouchCheckTimeout.start(TOUCH_TIMEOUT, () => {
+          const moves = movesAfterTouch
+          movesAfterTouch = 0
+          const stillPressed = isPressed
+          if (stillPressed && moves < MAX_POINTER_MOVES_AFTER_TOUCH) {
+            startAutoChange(event)
+            ignoreClick = true
+          }
+          else {
+            ignoreClick = false
+            stopAutoChange()
+          }
+        })
+      }
+    },
+    onPointerup(event) {
+      if (isTouchLikePointerType(event.pointerType)) {
+        isPressed = false
+      }
+    },
+    onPointermove(event) {
+      if (
+        isDisabled()
+        || isReadOnly()
+        || !isTouchLikePointerType(event.pointerType)
+        || !isPressed
+      ) {
+        return
+      }
+
+      movesAfterTouch += 1
+
+      const { x, y } = downCoords
+      const dx = x - event.clientX
+      const dy = y - event.clientY
+
+      if (dx ** 2 + dy ** 2 > scrollDistance ** 2) {
+        stopAutoChange()
+      }
+    },
+    onMouseenter(event) {
+      if (
+        event.defaultPrevented
+        || isDisabled()
+        || isReadOnly()
+        || !isPressed
+        || isTouchingButton
+        || isTouchLikePointerType(pointerType)
+      ) {
+        return
+      }
+
+      startAutoChange(event)
+    },
+    onMouseleave() {
+      if (isTouchingButton) {
+        return
+      }
+
+      stopAutoChange()
+    },
+    onMouseup() {
+      if (isTouchingButton) {
+        return
+      }
+
+      stopAutoChange()
+    },
+  }
+
+  function shouldSkipClick(event: MouseEvent): boolean {
+    if (event.defaultPrevented) {
+      return true
+    }
+    if (isTouchLikePointerType(pointerType)) {
+      return ignoreClick
+    }
+    return event.detail !== 0
+  }
+
+  return { pointerHandlers, shouldSkipClick }
+}

package/src/utils/useValueChanged.ts

@@ -0,0 +1,21 @@
+import type { WatchSource } from 'vue'
+import { watch } from 'vue'
+
+/**
+ * Runs `onChange` whenever the watched value changes, passing the previous value.
+ *
+ * Mirrors the React `useValueChanged` helper: the callback fires after the DOM has
+ * been updated (`flush: 'post'`), which makes it safe to read or move focus inside it.
+ */
+export function useValueChanged<T>(
+  source: WatchSource<T>,
+  onChange: (previousValue: T) => void,
+): void {
+  watch(
+    source,
+    (_newValue, previousValue) => {
+      onChange(previousValue)
+    },
+    { flush: 'post' },
+  )
+}