base-ui-vue 0.2.0 → 0.4.0

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

@@ -0,0 +1,248 @@
+import { getFormatter } from '../../utils/formatNumber'
+
+export const HAN_NUMERALS = ['零', '〇', '一', '二', '三', '四', '五', '六', '七', '八', '九']
+// Map Han numeral characters to ASCII digits. Includes both forms of zero.
+export const HAN_NUMERAL_TO_DIGIT: Record<string, string> = {
+  零: '0',
+  〇: '0',
+  一: '1',
+  二: '2',
+  三: '3',
+  四: '4',
+  五: '5',
+  六: '6',
+  七: '7',
+  八: '8',
+  九: '9',
+}
+export const ARABIC_NUMERALS = ['٠', '١', '٢', '٣', '٤', '٥', '٦', '٧', '٨', '٩']
+export const PERSIAN_NUMERALS = ['۰', '۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹']
+export const FULLWIDTH_NUMERALS = ['０', '１', '２', '３', '４', '５', '６', '７', '８', '９']
+
+export const PERCENTAGES = ['%', '٪', '％', '﹪']
+export const PERMILLE = ['‰', '؉']
+
+export const UNICODE_MINUS_SIGNS = ['−', '－', '‒', '–', '—', '﹣']
+export const UNICODE_PLUS_SIGNS = ['＋', '﹢']
+
+// Fullwidth punctuation common in CJK inputs
+export const FULLWIDTH_DECIMAL = '．' // U+FF0E
+export const FULLWIDTH_GROUP = '，' // U+FF0C
+
+export const ARABIC_RE = new RegExp(`[${ARABIC_NUMERALS.join('')}]`, 'g')
+export const PERSIAN_RE = new RegExp(`[${PERSIAN_NUMERALS.join('')}]`, 'g')
+export const FULLWIDTH_RE = new RegExp(`[${FULLWIDTH_NUMERALS.join('')}]`, 'g')
+export const HAN_RE = new RegExp(`[${HAN_NUMERALS.join('')}]`, 'g')
+export const PERCENT_RE = new RegExp(`[${PERCENTAGES.join('')}]`)
+export const PERMILLE_RE = new RegExp(`[${PERMILLE.join('')}]`)
+const PERCENT_GLOBAL_RE = new RegExp(PERCENT_RE.source, 'g')
+const PERMILLE_GLOBAL_RE = new RegExp(PERMILLE_RE.source, 'g')
+
+// Detection regexes (non-global to avoid lastIndex side effects)
+export const ARABIC_DETECT_RE = /[٠١٢٣٤٥٦٧٨٩]/
+export const PERSIAN_DETECT_RE = /[۰۱۲۳۴۵۶۷۸۹]/
+export const HAN_DETECT_RE = /[零〇一二三四五六七八九]/
+export const FULLWIDTH_DETECT_RE = new RegExp(`[${FULLWIDTH_NUMERALS.join('')}]`)
+
+export const BASE_NON_NUMERIC_SYMBOLS = [
+  '.',
+  ',',
+  FULLWIDTH_DECIMAL,
+  FULLWIDTH_GROUP,
+  '٫',
+  '٬',
+] as const
+export const SPACE_SEPARATOR_RE = /\p{Zs}/u
+export const PLUS_SIGNS_WITH_ASCII = ['+', ...UNICODE_PLUS_SIGNS]
+export const MINUS_SIGNS_WITH_ASCII = ['-', ...UNICODE_MINUS_SIGNS]
+
+function escapeRegExp(s: string) {
+  return s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+}
+function escapeClassChar(s: string) {
+  return s.replace(/[-\\\]^]/g, m => `\\${m}`) // escape for use inside [...]
+}
+
+function shiftDecimal(value: number, exponentDelta: number) {
+  const [coefficient, exponent = '0'] = String(value).split('e')
+  return Number(`${coefficient}e${Number(exponent) + exponentDelta}`)
+}
+
+function charClassFrom(chars: string[]) {
+  return `[${chars.map(escapeClassChar).join('')}]`
+}
+
+const ANY_MINUS_CLASS = charClassFrom(['-'].concat(UNICODE_MINUS_SIGNS))
+const ANY_PLUS_CLASS = charClassFrom(['+'].concat(UNICODE_PLUS_SIGNS))
+
+export const ANY_MINUS_RE = new RegExp(ANY_MINUS_CLASS, 'gu')
+export const ANY_PLUS_RE = new RegExp(ANY_PLUS_CLASS, 'gu')
+export const ANY_MINUS_DETECT_RE = new RegExp(ANY_MINUS_CLASS)
+export const ANY_PLUS_DETECT_RE = new RegExp(ANY_PLUS_CLASS)
+
+export function getNumberLocaleDetails(
+  locale?: Intl.LocalesArgument,
+  options?: Intl.NumberFormatOptions,
+) {
+  const parts = getFormatter(locale, options).formatToParts(11111.1)
+  const result: Partial<Record<Intl.NumberFormatPartTypes, string | undefined>> = {}
+
+  parts.forEach((part) => {
+    result[part.type] = part.value
+  })
+
+  // The formatting options may result in not returning a decimal.
+  getFormatter(locale)
+    .formatToParts(0.1)
+    .forEach((part) => {
+      if (part.type === 'decimal') {
+        result[part.type] = part.value
+      }
+    })
+
+  return result
+}
+
+export function parseNumber(
+  formattedNumber: string,
+  locale?: Intl.LocalesArgument,
+  options?: Intl.NumberFormatOptions,
+) {
+  if (formattedNumber == null) {
+    return null
+  }
+
+  // Normalize control characters and whitespace; remove bidi/format controls
+  let input = String(formattedNumber)
+    .replace(/\p{Cf}/gu, '')
+    .trim()
+
+  // Normalize unicode minus/plus to ASCII, handle leading/trailing signs
+  input = input.replace(ANY_MINUS_RE, '-').replace(ANY_PLUS_RE, '+')
+
+  let isNegative = false
+
+  // Trailing sign, e.g. "1234-" / "1234+"
+  const trailing = input.match(/([+-])\s*$/)
+  if (trailing) {
+    if (trailing[1] === '-') {
+      isNegative = true
+    }
+    input = input.replace(/([+-])\s*$/, '')
+  }
+  // Leading sign
+  const leading = input.match(/^\s*([+-])/)
+  if (leading) {
+    if (leading[1] === '-') {
+      isNegative = true
+    }
+    input = input.replace(/^\s*[+-]/, '')
+  }
+
+  // Heuristic locale detection
+  let computedLocale = locale
+  if (computedLocale === undefined) {
+    if (ARABIC_DETECT_RE.test(input) || PERSIAN_DETECT_RE.test(input)) {
+      computedLocale = 'ar'
+    }
+    else if (HAN_DETECT_RE.test(input)) {
+      computedLocale = 'zh'
+    }
+  }
+
+  const { group, decimal, currency, exponentSeparator } = getNumberLocaleDetails(
+    computedLocale,
+    options,
+  )
+
+  // Build robust unit regex from all unit parts (such as "km/h")
+  const unitParts = getFormatter(computedLocale, options)
+    .formatToParts(1)
+    .filter(p => p.type === 'unit')
+    .map(p => escapeRegExp(p.value))
+  const unitRegex = unitParts.length ? new RegExp(unitParts.join('|'), 'g') : null
+
+  let groupRegex: RegExp | null = null
+  if (group) {
+    const isSpaceGroup = /\p{Zs}/u.test(group)
+    const isApostropheGroup = group === '\'' || group === '’'
+
+    // Check if the group separator is a space-like character.
+    // If so, we'll replace all such characters with an empty string.
+    if (isSpaceGroup) {
+      groupRegex = /\p{Zs}/gu
+    }
+    else if (isApostropheGroup) {
+      // Some environments format numbers with ASCII apostrophe and others with a curly apostrophe.
+      groupRegex = /['’]/g
+    }
+    else {
+      groupRegex = new RegExp(escapeRegExp(group), 'g')
+    }
+  }
+
+  const replacements: Array<{
+    regex: RegExp | null
+    replacement: string | ((m: string) => string)
+  }> = [
+    { regex: group ? groupRegex : null, replacement: '' },
+    { regex: decimal ? new RegExp(escapeRegExp(decimal), 'g') : null, replacement: '.' },
+    // Fullwidth punctuation
+    { regex: /．/g, replacement: '.' }, // FULLWIDTH_DECIMAL
+    { regex: /，/g, replacement: '' }, // FULLWIDTH_GROUP
+    // Arabic punctuation
+    { regex: /٫/g, replacement: '.' }, // ARABIC DECIMAL SEPARATOR (U+066B)
+    { regex: /٬/g, replacement: '' }, // ARABIC THOUSANDS SEPARATOR (U+066C)
+    // Currency & unit labels
+    { regex: currency ? new RegExp(escapeRegExp(currency), 'g') : null, replacement: '' },
+    { regex: unitRegex, replacement: '' },
+    { regex: PERCENT_GLOBAL_RE, replacement: '' },
+    { regex: PERMILLE_GLOBAL_RE, replacement: '' },
+    {
+      regex: exponentSeparator ? new RegExp(escapeRegExp(exponentSeparator), 'g') : null,
+      replacement: 'e',
+    },
+    // Numeral systems to ASCII digits
+    { regex: ARABIC_RE, replacement: ch => String(ARABIC_NUMERALS.indexOf(ch)) },
+    { regex: PERSIAN_RE, replacement: ch => String(PERSIAN_NUMERALS.indexOf(ch)) },
+    { regex: FULLWIDTH_RE, replacement: ch => String(FULLWIDTH_NUMERALS.indexOf(ch)) },
+    { regex: HAN_RE, replacement: ch => HAN_NUMERAL_TO_DIGIT[ch] },
+  ]
+
+  let unformatted = replacements.reduce((acc, { regex, replacement }) => {
+    return regex ? acc.replace(regex, replacement as any) : acc
+  }, input)
+
+  // Mixed-locale safety: keep only the last '.' as decimal
+  const lastDot = unformatted.lastIndexOf('.')
+  if (lastDot !== -1) {
+    unformatted = `${unformatted.slice(0, lastDot).replace(/\./g, '')}.${unformatted.slice(lastDot + 1).replace(/\./g, '')}`
+  }
+
+  // Guard against Infinity inputs (ASCII and symbol)
+  if (/^[+-]?Infinity$/i.test(input) || /∞/.test(input)) {
+    return null
+  }
+
+  const parseTarget = (isNegative ? '-' : '') + unformatted
+
+  let num = Number.parseFloat(parseTarget)
+
+  const style = options?.style
+  const isUnitPercent = style === 'unit' && options?.unit === 'percent'
+  const hasPercentSymbol = PERCENT_RE.test(formattedNumber) || style === 'percent'
+  const hasPermilleSymbol = PERMILLE_RE.test(formattedNumber)
+
+  if (hasPermilleSymbol) {
+    num = shiftDecimal(num, -3)
+  }
+  else if (!isUnitPercent && hasPercentSymbol) {
+    num = shiftDecimal(num, -2)
+  }
+
+  if (!Number.isFinite(num)) {
+    return null
+  }
+
+  return num
+}

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

@@ -0,0 +1,9 @@
+import type { StateAttributesMapping } from '../../utils/getStateAttributesProps'
+import type { NumberFieldRootState } from '../root/NumberFieldRoot.vue'
+import { fieldValidityMapping } from '../../field/utils/constants'
+
+export const stateAttributesMapping: StateAttributesMapping<NumberFieldRootState> = {
+  inputValue: () => null,
+  value: () => null,
+  ...fieldValidityMapping,
+}

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

@@ -0,0 +1,27 @@
+import type { Ref } from 'vue'
+import { ownerWindow } from '../../utils/owner'
+
+// This lets us invert the scale of the cursor to match the OS scale, in which the cursor doesn't
+// scale with the content on pinch-zoom.
+export function subscribeToVisualViewportResize(
+  element: Element,
+  visualScaleRef: Ref<number>,
+) {
+  const vV = ownerWindow(element).visualViewport
+
+  if (!vV) {
+    return () => {}
+  }
+
+  function handleVisualResize() {
+    if (vV) {
+      visualScaleRef.value = vV.scale
+    }
+  }
+
+  handleVisualResize()
+  vV.addEventListener('resize', handleVisualResize)
+  return () => {
+    vV.removeEventListener('resize', handleVisualResize)
+  }
+}

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

@@ -0,0 +1,24 @@
+export type Direction = -1 | 1
+
+export type DirectionalChangeReason
+  = | 'increment-press'
+    | 'decrement-press'
+    | 'wheel'
+    | 'scrub'
+    | 'keyboard'
+
+export interface ChangeEventCustomProperties {
+  direction?: Direction | undefined
+}
+
+export interface IncrementValueParameters {
+  direction: Direction
+  event?: Event | undefined
+  reason: DirectionalChangeReason
+  currentValue?: number | null | undefined
+}
+
+export interface EventWithOptionalKeyState {
+  altKey?: boolean | undefined
+  shiftKey?: boolean | undefined
+}

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

@@ -0,0 +1,120 @@
+import { clamp } from '../../utils/clamp'
+import { getFormatter } from '../../utils/formatNumber'
+import { parseNumber } from './parse'
+
+const STEP_EPSILON_FACTOR = 1e-10
+// Matches Intl.NumberFormat's decimal maximumFractionDigits default.
+const DEFAULT_DIGITS = 3
+
+// The repo compiles against es2022 Intl types, so model NumberFormat v3 options locally.
+// Delete this once tsconfig includes es2023.
+type NumberFormatOptionsWithRounding = Intl.NumberFormatOptions & {
+  roundingIncrement?: number | undefined
+  roundingMode?: string | undefined
+  roundingPriority?: string | undefined
+}
+
+export function hasNumberFormatRoundingOptions(
+  format?: NumberFormatOptionsWithRounding,
+): format is NumberFormatOptionsWithRounding {
+  return (
+    format?.maximumFractionDigits != null
+    || format?.minimumFractionDigits != null
+    || format?.maximumSignificantDigits != null
+    || format?.minimumSignificantDigits != null
+    || format?.roundingIncrement != null
+    || format?.roundingMode != null
+    || format?.roundingPriority != null
+  )
+}
+
+export function removeFloatingPointErrors(value: number, format?: NumberFormatOptionsWithRounding) {
+  if (!Number.isFinite(value)) {
+    return value
+  }
+
+  if (!hasNumberFormatRoundingOptions(format)) {
+    return Number(value.toFixed(DEFAULT_DIGITS))
+  }
+
+  const formatter = getFormatter('en-US', {
+    ...format,
+    // These options alter only display decoration, not numeric rounding.
+    signDisplay: 'auto',
+    currencySign: 'standard',
+    notation: format.notation === 'compact' ? 'standard' : format.notation,
+    useGrouping: false,
+  } as NumberFormatOptionsWithRounding)
+  const roundedText = formatter.format(value)
+  const roundedValue = parseNumber(roundedText, 'en-US', format)
+
+  if (roundedValue === null) {
+    return value
+  }
+
+  return formatter.format(roundedValue) === roundedText ? roundedValue : value
+}
+
+function snapToStep(
+  value: number,
+  base: number,
+  step: number,
+  mode: 'directional' | 'nearest' = 'directional',
+) {
+  const stepSize = Math.abs(step)
+  const direction = Math.sign(step)
+  const tolerance = stepSize * STEP_EPSILON_FACTOR * direction
+  const rawSteps = value - base + tolerance
+
+  if (mode === 'nearest') {
+    return base + Math.round(rawSteps / step) * step
+  }
+
+  const snappedSteps
+    = direction > 0 ? Math.floor(rawSteps / stepSize) : Math.ceil(rawSteps / stepSize)
+  return base + snappedSteps * stepSize
+}
+
+export function toValidatedNumber(
+  value: number | null,
+  {
+    step,
+    minWithDefault,
+    maxWithDefault,
+    minWithZeroDefault,
+    format,
+    snapOnStep,
+    small,
+    clamp: shouldClamp,
+  }: {
+    step: number | undefined
+    minWithDefault: number
+    maxWithDefault: number
+    minWithZeroDefault: number
+    format: NumberFormatOptionsWithRounding | undefined
+    snapOnStep: boolean
+    small: boolean
+    clamp: boolean
+  },
+) {
+  if (value === null) {
+    return value
+  }
+
+  let nextValue = value
+
+  if (step != null && snapOnStep && step !== 0) {
+    const base
+      = small || minWithDefault === Number.MIN_SAFE_INTEGER ? minWithZeroDefault : minWithDefault
+
+    // Snap before clamping so non-step-aligned boundaries stay reachable.
+    nextValue = snapToStep(nextValue, base, step, small ? 'nearest' : 'directional')
+  }
+
+  if (shouldClamp) {
+    nextValue = clamp(nextValue, minWithDefault, maxWithDefault)
+  }
+
+  const roundedValue = removeFloatingPointErrors(nextValue, format)
+  return shouldClamp ? clamp(roundedValue, minWithDefault, maxWithDefault) : roundedValue
+}

package/src/otp-field/index.ts

@@ -0,0 +1,22 @@
+export { default as OtpFieldInput } from './input/OtpFieldInput.vue'
+export type { OtpFieldInputProps, OtpFieldInputState } from './input/OtpFieldInput.vue'
+
+export { default as OtpFieldRoot } from './root/OtpFieldRoot.vue'
+export type { OtpFieldRootProps, OtpFieldRootState } from './root/OtpFieldRoot.vue'
+
+export {
+  getOtpFieldInputState,
+  otpFieldRootContextKey,
+  useOtpFieldRootContext,
+} from './root/OtpFieldRootContext'
+export type {
+  OtpFieldRootChangeEventDetails,
+  OtpFieldRootChangeEventReason,
+  OtpFieldRootCompleteEventDetails,
+  OtpFieldRootCompleteEventReason,
+  OtpFieldRootContext,
+  OtpFieldRootInvalidEventDetails,
+  OtpFieldRootInvalidEventReason,
+} from './root/OtpFieldRootContext'
+
+export type { OtpValidationType } from './utils/otp'