base-ui-vue 0.2.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/progress/index.ts

@@ -0,0 +1,23 @@
+export { default as ProgressIndicator } from './indicator/ProgressIndicator.vue'
+export type { ProgressIndicatorProps, ProgressIndicatorState } from './indicator/ProgressIndicator.vue'
+
+export { default as ProgressLabel } from './label/ProgressLabel.vue'
+export type { ProgressLabelProps, ProgressLabelState } from './label/ProgressLabel.vue'
+
+export { default as ProgressRoot } from './root/ProgressRoot.vue'
+export type { ProgressRootProps, ProgressRootState, ProgressStatus } from './root/ProgressRoot.vue'
+export { progressRootContextKey, useProgressRootContext } from './root/ProgressRootContext'
+export type { ProgressRootContext } from './root/ProgressRootContext'
+export { ProgressRootDataAttributes } from './root/ProgressRootDataAttributes'
+export { progressStateAttributesMapping } from './root/stateAttributesMapping'
+
+export { default as ProgressTrack } from './track/ProgressTrack.vue'
+export type { ProgressTrackProps, ProgressTrackState } from './track/ProgressTrack.vue'
+
+export { default as ProgressValue } from './value/ProgressValue.vue'
+export type {
+  ProgressValueProps,
+  ProgressValueRenderlessSlotProps,
+  ProgressValueSlotProps,
+  ProgressValueState,
+} from './value/ProgressValue.vue'

package/src/progress/indicator/ProgressIndicator.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import type { BaseUIComponentProps } from '../../utils/types'
+import type { ProgressRootState } from '../root/ProgressRoot.vue'
+import { computed, useAttrs } from 'vue'
+import { mergeProps } from '../../merge-props/mergeProps'
+import { useRenderElement } from '../../utils/useRenderElement'
+import { valueToPercent } from '../../utils/valueToPercent'
+import { useProgressRootContext } from '../root/ProgressRootContext'
+import { progressStateAttributesMapping } from '../root/stateAttributesMapping'
+
+export interface ProgressIndicatorState extends ProgressRootState {}
+export interface ProgressIndicatorProps extends BaseUIComponentProps<ProgressIndicatorState> {}
+
+/**
+ * Visualizes the completion status of the task.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Vue Progress](https://baseui-vue.com/docs/components/progress)
+ */
+defineOptions({
+  name: 'ProgressIndicator',
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<ProgressIndicatorProps>(), {
+  as: 'div',
+})
+
+const attrs = useAttrs()
+const { value, min, max, state } = useProgressRootContext()
+
+const percentage = computed(() => {
+  const v = value.value
+  if (v == null || !Number.isFinite(v)) {
+    return null
+  }
+  return valueToPercent(v, min.value, max.value)
+})
+
+const indicatorStyles = computed(() => {
+  if (percentage.value == null) {
+    return {}
+  }
+  return {
+    insetInlineStart: 0,
+    height: 'inherit',
+    width: `${percentage.value}%`,
+  }
+})
+
+const indicatorProps = computed(() => mergeProps(
+  { style: indicatorStyles.value },
+  attrs as Record<string, unknown>,
+))
+
+const {
+  tag,
+  mergedProps,
+  renderless,
+} = useRenderElement({
+  componentProps: props,
+  state,
+  props: indicatorProps,
+  defaultTagName: 'div',
+  stateAttributesMapping: progressStateAttributesMapping,
+})
+</script>
+
+<template>
+  <slot v-if="renderless" :props="mergedProps" :state="state" />
+  <component :is="tag" v-else v-bind="mergedProps">
+    <slot :state="state" />
+  </component>
+</template>

package/src/progress/label/ProgressLabel.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import type { BaseUIComponentProps } from '../../utils/types'
+import type { ProgressRootState } from '../root/ProgressRoot.vue'
+import { computed, useAttrs } from 'vue'
+import { useRegisteredLabelId } from '../../utils/useRegisteredLabelId'
+import { useRenderElement } from '../../utils/useRenderElement'
+import { useProgressRootContext } from '../root/ProgressRootContext'
+import { progressStateAttributesMapping } from '../root/stateAttributesMapping'
+
+export interface ProgressLabelState extends ProgressRootState {}
+export interface ProgressLabelProps extends BaseUIComponentProps<ProgressLabelState> {
+  /**
+   * The id of the label element. When provided, it overrides the
+   * automatically generated one.
+   */
+  id?: string
+}
+
+/**
+ * An accessible label for the progress bar.
+ * Renders a `<span>` element.
+ *
+ * Documentation: [Base UI Vue Progress](https://baseui-vue.com/docs/components/progress)
+ */
+defineOptions({
+  name: 'ProgressLabel',
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<ProgressLabelProps>(), {
+  as: 'span',
+})
+
+const attrs = useAttrs()
+const { setLabelId, state } = useProgressRootContext()
+
+const id = useRegisteredLabelId(() => props.id, setLabelId)
+
+const labelProps = computed(() => ({
+  ...attrs,
+  id: id.value,
+  role: 'presentation',
+}))
+
+const {
+  tag,
+  mergedProps,
+  renderless,
+} = useRenderElement({
+  componentProps: props,
+  state,
+  props: labelProps,
+  defaultTagName: 'span',
+  stateAttributesMapping: progressStateAttributesMapping,
+})
+</script>
+
+<template>
+  <slot v-if="renderless" :props="mergedProps" :state="state" />
+  <component :is="tag" v-else v-bind="mergedProps">
+    <slot :state="state" />
+  </component>
+</template>

package/src/progress/root/ProgressRoot.vue

@@ -0,0 +1,160 @@
+<script setup lang="ts">
+import type { BaseUIComponentProps } from '../../utils/types'
+import { computed, provide, ref, useAttrs } from 'vue'
+import { formatNumberValue } from '../../utils/formatNumber'
+import { useRenderElement } from '../../utils/useRenderElement'
+import { visuallyHidden } from '../../utils/visuallyHidden'
+import { progressRootContextKey } from './ProgressRootContext'
+import { progressStateAttributesMapping } from './stateAttributesMapping'
+
+export type ProgressStatus = 'indeterminate' | 'progressing' | 'complete'
+
+export interface ProgressRootState {
+  /**
+   * The current status.
+   */
+  status: ProgressStatus
+}
+
+export interface ProgressRootProps extends BaseUIComponentProps<ProgressRootState> {
+  /**
+   * A string value that provides a user-friendly name for `aria-valuenow`.
+   * Takes precedence over `getAriaValueText`.
+   */
+  ariaValuetext?: string
+  /**
+   * Options to format the value.
+   */
+  format?: Intl.NumberFormatOptions
+  /**
+   * A function that returns a string value for `aria-valuetext`.
+   * Receives the formatted value (or `null` when indeterminate) and the raw
+   * value.
+   */
+  getAriaValueText?: (formattedValue: string | null, value: number | null) => string
+  /**
+   * The locale used by `Intl.NumberFormat` when formatting the value.
+   * Defaults to the user's runtime locale.
+   */
+  locale?: Intl.LocalesArgument
+  /**
+   * The maximum value.
+   * @default 100
+   */
+  max?: number
+  /**
+   * The minimum value.
+   * @default 0
+   */
+  min?: number
+  /**
+   * The current value. The component is indeterminate when value is `null`.
+   * @default null
+   */
+  value: number | null
+}
+
+/**
+ * Groups all parts of the progress bar and provides the task completion
+ * status to screen readers.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Vue Progress](https://baseui-vue.com/docs/components/progress)
+ */
+defineOptions({
+  name: 'ProgressRoot',
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<ProgressRootProps>(), {
+  as: 'div',
+  max: 100,
+  min: 0,
+})
+
+function getDefaultAriaValueText(formattedValue: string | null, value: number | null) {
+  if (value == null) {
+    return 'indeterminate progress'
+  }
+
+  return formattedValue || `${value}%`
+}
+
+const attrs = useAttrs()
+
+const labelId = ref<string | undefined>(undefined)
+
+const status = computed<ProgressStatus>(() => {
+  if (props.value == null || !Number.isFinite(props.value)) {
+    return 'indeterminate'
+  }
+  return props.value === props.max ? 'complete' : 'progressing'
+})
+
+const formattedValue = computed(() =>
+  formatNumberValue(props.value, props.locale, props.format),
+)
+
+const ariaValueText = computed(() => {
+  if (props.ariaValuetext !== undefined) {
+    return props.ariaValuetext
+  }
+
+  const formatted = props.value == null ? null : formattedValue.value
+
+  if (props.getAriaValueText) {
+    return props.getAriaValueText(formatted, props.value)
+  }
+
+  return getDefaultAriaValueText(formatted, props.value)
+})
+
+const state = computed<ProgressRootState>(() => ({
+  status: status.value,
+}))
+
+provide(progressRootContextKey, {
+  formattedValue,
+  max: computed(() => props.max),
+  min: computed(() => props.min),
+  value: computed(() => props.value),
+  status,
+  state,
+  setLabelId(id) {
+    labelId.value = id
+  },
+})
+
+const rootProps = computed(() => ({
+  'role': 'progressbar',
+  'aria-labelledby': labelId.value,
+  'aria-valuemax': props.max,
+  'aria-valuemin': props.min,
+  'aria-valuenow': props.value ?? undefined,
+  'aria-valuetext': ariaValueText.value,
+  ...attrs,
+}))
+
+const {
+  tag,
+  mergedProps,
+  renderless,
+} = useRenderElement({
+  componentProps: props,
+  state,
+  props: rootProps,
+  defaultTagName: 'div',
+  stateAttributesMapping: progressStateAttributesMapping,
+})
+
+const visuallyHiddenStyle = visuallyHidden
+</script>
+
+<template>
+  <slot v-if="renderless" :props="mergedProps" :state="state" />
+  <component :is="tag" v-else v-bind="mergedProps">
+    <slot :state="state" />
+    <!-- Force NVDA to read the label https://github.com/mui/base-ui/issues/4184 -->
+    <span role="presentation" :style="visuallyHiddenStyle">x</span>
+  </component>
+</template>

package/src/progress/root/ProgressRootContext.ts

@@ -0,0 +1,51 @@
+import type { ComputedRef, InjectionKey, Ref } from 'vue'
+import type { ProgressRootState, ProgressStatus } from './ProgressRoot.vue'
+import { inject } from 'vue'
+
+export interface ProgressRootContext {
+  /**
+   * The formatted current value of the progress bar.
+   * Empty string when the component is indeterminate.
+   */
+  formattedValue: Ref<string>
+  /**
+   * The maximum allowed value of the progress bar.
+   */
+  max: Ref<number>
+  /**
+   * The minimum allowed value of the progress bar.
+   */
+  min: Ref<number>
+  /**
+   * The raw current value, or `null` when indeterminate.
+   */
+  value: Ref<number | null>
+  /**
+   * Derived completion status. Used to produce `data-*` state attributes.
+   */
+  status: ComputedRef<ProgressStatus>
+  /**
+   * The state of the root component.
+   */
+  state: ComputedRef<ProgressRootState>
+  /**
+   * Registers the DOM id of the `<ProgressLabel>` for `aria-labelledby`.
+   */
+  setLabelId: (id: string | undefined) => void
+}
+
+export const progressRootContextKey: InjectionKey<ProgressRootContext>
+  = Symbol('ProgressRootContext')
+
+export function useProgressRootContext(optional: true): ProgressRootContext | undefined
+export function useProgressRootContext(optional?: false): ProgressRootContext
+export function useProgressRootContext(optional = false) {
+  const context = inject(progressRootContextKey, undefined)
+  if (!context && !optional) {
+    throw new Error(
+      'Base UI Vue: ProgressRootContext is missing. Progress parts must be placed within <ProgressRoot>.',
+    )
+  }
+
+  return context
+}

package/src/progress/root/ProgressRootDataAttributes.ts

@@ -0,0 +1,14 @@
+export enum ProgressRootDataAttributes {
+  /**
+   * Present when the progress has completed.
+   */
+  complete = 'data-complete',
+  /**
+   * Present when the progress is in indeterminate state.
+   */
+  indeterminate = 'data-indeterminate',
+  /**
+   * Present while the progress is progressing.
+   */
+  progressing = 'data-progressing',
+}

package/src/progress/root/stateAttributesMapping.ts

@@ -0,0 +1,18 @@
+import type { StateAttributesMapping } from '../../utils/getStateAttributesProps'
+import type { ProgressRootState } from './ProgressRoot.vue'
+import { ProgressRootDataAttributes } from './ProgressRootDataAttributes'
+
+export const progressStateAttributesMapping: StateAttributesMapping<ProgressRootState> = {
+  status(value): Record<string, string> | null {
+    if (value === 'progressing') {
+      return { [ProgressRootDataAttributes.progressing]: '' }
+    }
+    if (value === 'complete') {
+      return { [ProgressRootDataAttributes.complete]: '' }
+    }
+    if (value === 'indeterminate') {
+      return { [ProgressRootDataAttributes.indeterminate]: '' }
+    }
+    return null
+  },
+}

package/src/progress/track/ProgressTrack.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import type { BaseUIComponentProps } from '../../utils/types'
+import type { ProgressRootState } from '../root/ProgressRoot.vue'
+import { useAttrs } from 'vue'
+import { useRenderElement } from '../../utils/useRenderElement'
+import { useProgressRootContext } from '../root/ProgressRootContext'
+import { progressStateAttributesMapping } from '../root/stateAttributesMapping'
+
+export interface ProgressTrackState extends ProgressRootState {}
+export interface ProgressTrackProps extends BaseUIComponentProps<ProgressTrackState> {}
+
+/**
+ * Contains the progress bar indicator.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Vue Progress](https://baseui-vue.com/docs/components/progress)
+ */
+defineOptions({
+  name: 'ProgressTrack',
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<ProgressTrackProps>(), {
+  as: 'div',
+})
+
+const attrs = useAttrs()
+const { state } = useProgressRootContext()
+
+const {
+  tag,
+  mergedProps,
+  renderless,
+} = useRenderElement({
+  componentProps: props,
+  state,
+  props: attrs,
+  defaultTagName: 'div',
+  stateAttributesMapping: progressStateAttributesMapping,
+})
+</script>
+
+<template>
+  <slot v-if="renderless" :props="mergedProps" :state="state" />
+  <component :is="tag" v-else v-bind="mergedProps">
+    <slot :state="state" />
+  </component>
+</template>