base-ui-vue 0.3.0 → 0.5.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/radio/index.ts

@@ -0,0 +1,28 @@
+import RadioIndicator from './indicator/RadioIndicator.vue'
+import RadioRoot from './root/RadioRoot.vue'
+
+export { radioGroupContextKey, useRadioGroupContext } from '../radio-group/RadioGroupContext'
+export type { RadioGroupContext } from '../radio-group/RadioGroupContext'
+export { default as RadioIndicator } from './indicator/RadioIndicator.vue'
+
+export type {
+  RadioIndicatorProps,
+  RadioIndicatorState,
+} from './indicator/RadioIndicator.vue'
+export { RadioIndicatorDataAttributes } from './indicator/RadioIndicatorDataAttributes'
+export { default as RadioRoot } from './root/RadioRoot.vue'
+export type {
+  RadioRootChangeEventDetails,
+  RadioRootChangeEventReason,
+  RadioRootProps,
+  RadioRootState,
+} from './root/RadioRoot.vue'
+export { radioRootContextKey, useRadioRootContext } from './root/RadioRootContext'
+
+export type { RadioRootContext } from './root/RadioRootContext'
+export { RadioRootDataAttributes } from './root/RadioRootDataAttributes'
+
+export const Radio = {
+  Root: RadioRoot,
+  Indicator: RadioIndicator,
+} as const

package/src/radio/indicator/RadioIndicator.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import type { BaseUIComponentProps } from '../../utils/types'
+import type { TransitionStatus } from '../../utils/useTransitionStatus'
+import type { RadioRootState } from '../root/RadioRoot.vue'
+import { computed, ref, useAttrs } from 'vue'
+import { useOpenChangeComplete } from '../../utils/useOpenChangeComplete'
+import { useRenderElement } from '../../utils/useRenderElement'
+import { useTransitionStatus } from '../../utils/useTransitionStatus'
+import { useRadioRootContext } from '../root/RadioRootContext'
+import { stateAttributesMapping } from '../utils/stateAttributesMapping'
+
+export interface RadioIndicatorState extends RadioRootState {
+  /**
+   * The transition status of the component.
+   */
+  transitionStatus: TransitionStatus
+}
+
+export interface RadioIndicatorProps extends BaseUIComponentProps<RadioIndicatorState> {
+  /**
+   * Whether to keep the HTML element in the DOM when the radio button is inactive.
+   * @default false
+   */
+  keepMounted?: boolean
+}
+
+/**
+ * Indicates whether the radio button is selected.
+ * Renders a `<span>` element.
+ *
+ * Documentation: [Base UI Vue Radio](https://baseui-vue.com/docs/components/radio)
+ */
+defineOptions({
+  name: 'RadioIndicator',
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<RadioIndicatorProps>(), {
+  as: 'span',
+  keepMounted: false,
+})
+
+const attrs = useAttrs()
+const attrsObject = attrs as Record<string, any>
+
+const rootState = useRadioRootContext()
+const rendered = computed(() => rootState.value.checked)
+const { mounted, transitionStatus, setMounted } = useTransitionStatus(rendered)
+const localIndicatorRef = ref<HTMLElement | null>(null)
+
+const state = computed<RadioIndicatorState>(() => ({
+  ...rootState.value,
+  transitionStatus: transitionStatus.value,
+}))
+
+useOpenChangeComplete({
+  open: rendered,
+  ref: localIndicatorRef,
+  onComplete() {
+    if (!rendered.value) {
+      setMounted(false)
+    }
+  },
+})
+
+const shouldRender = computed(() => props.keepMounted || mounted.value)
+
+const {
+  tag,
+  mergedProps,
+  renderless,
+  ref: renderRef,
+} = useRenderElement({
+  componentProps: props,
+  state,
+  props: computed(() => attrsObject),
+  stateAttributesMapping,
+  defaultTagName: 'span',
+  ref: localIndicatorRef,
+})
+</script>
+
+<template>
+  <template v-if="shouldRender">
+    <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>
+</template>

package/src/radio/indicator/RadioIndicatorDataAttributes.ts

@@ -0,0 +1,54 @@
+export enum RadioIndicatorDataAttributes {
+  /**
+   * Present when the radio is checked.
+   */
+  checked = 'data-checked',
+  /**
+   * Present when the radio is not checked.
+   */
+  unchecked = 'data-unchecked',
+  /**
+   * Present when the radio is disabled.
+   */
+  disabled = 'data-disabled',
+  /**
+   * Present when the radio is readonly.
+   */
+  readonly = 'data-readonly',
+  /**
+   * Present when the radio is required.
+   */
+  required = 'data-required',
+  /**
+   * Present when the radio indicator is animating in.
+   */
+  startingStyle = 'data-starting-style',
+  /**
+   * Present when the radio indicator is animating out.
+   */
+  endingStyle = 'data-ending-style',
+  /**
+   * Present when the radio is in a valid state.
+   */
+  valid = 'data-valid',
+  /**
+   * Present when the radio is in an invalid state.
+   */
+  invalid = 'data-invalid',
+  /**
+   * Present when the radio has been touched.
+   */
+  touched = 'data-touched',
+  /**
+   * Present when the radio's value has changed.
+   */
+  dirty = 'data-dirty',
+  /**
+   * Present when the radio is checked.
+   */
+  filled = 'data-filled',
+  /**
+   * Present when the radio is focused.
+   */
+  focused = 'data-focused',
+}