base-ui-vue 0.3.0 → 0.5.0

package/src/radio-group/RadioGroup.vue

@@ -0,0 +1,381 @@
+<script setup lang="ts" generic="Value = unknown">
+import type { InjectionKey, Ref } from 'vue'
+import type { FieldRootState } from '../field/root/FieldRoot.vue'
+import type { BaseUIChangeEventDetails } from '../utils/createBaseUIEventDetails'
+import type { REASONS } from '../utils/reasons'
+import type { BaseUIComponentProps } from '../utils/types'
+import type { RadioGroupContext } from './RadioGroupContext'
+import { computed, provide, ref, useAttrs, watch } from 'vue'
+import { SHIFT } from '../composite/composite'
+import CompositeRoot from '../composite/root/CompositeRoot.vue'
+import { useFieldRootContext } from '../field/root/FieldRootContext'
+import { useField } from '../field/useField'
+import { fieldValidityMapping } from '../field/utils/constants'
+import { useFieldsetRootContext } from '../fieldset/root/FieldsetRootContext'
+import { useFormContext } from '../form/FormContext'
+import { useLabelableContext } from '../labelable-provider/LabelableContext'
+import { mergeProps } from '../merge-props/mergeProps'
+import { Slot } from '../utils/slot'
+import { useBaseUiId } from '../utils/useBaseUiId'
+import { useControllableState } from '../utils/useControllableState'
+import { useMergedRefs } from '../utils/useMergedRefs'
+import { radioGroupContextKey } from './RadioGroupContext'
+
+export interface RadioGroupState extends FieldRootState {
+  /**
+   * Whether the component should ignore user interaction.
+   */
+  disabled: boolean
+  /**
+   * Whether the user should be unable to select a different radio button.
+   */
+  readOnly: boolean
+  /**
+   * Whether the user must choose a radio button before submitting a form.
+   */
+  required: boolean
+}
+
+export interface RadioGroupProps<Value = unknown> extends BaseUIComponentProps<RadioGroupState> {
+  /**
+   * Whether the component should ignore user interaction.
+   * @default false
+   */
+  disabled?: boolean
+  /**
+   * Whether the user should be unable to select a different radio button.
+   * @default false
+   */
+  readOnly?: boolean
+  /**
+   * Whether the user must choose a value before submitting a form.
+   * @default false
+   */
+  required?: boolean
+  /**
+   * Identifies the field when a form is submitted.
+   */
+  name?: string
+  /**
+   * Identifies the form that owns the radio inputs.
+   * Useful when the radio group is rendered outside the form.
+   */
+  form?: string
+  /**
+   * The controlled value of the radio item that should be selected.
+   *
+   * To render an uncontrolled radio group, use the `defaultValue` prop instead.
+   */
+  value?: Value
+  /**
+   * The uncontrolled value of the radio button that should be initially selected.
+   *
+   * To render a controlled radio group, use the `value` prop instead.
+   */
+  defaultValue?: Value
+  /**
+   * A ref to access the currently selected hidden input element.
+   */
+  inputRef?: Ref<HTMLInputElement | null> | ((element: HTMLInputElement | null) => void) | null
+  /**
+   * The id of the radio group element.
+   */
+  id?: string
+}
+
+export type RadioGroupChangeEventReason = typeof REASONS.none
+export type RadioGroupChangeEventDetails = BaseUIChangeEventDetails<RadioGroupChangeEventReason>
+
+/**
+ * Provides shared state to a series of radio buttons.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Vue Radio](https://baseui-vue.com/docs/components/radio)
+ */
+defineOptions({
+  name: 'RadioGroup',
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<RadioGroupProps<Value>>(), {
+  as: 'div',
+  disabled: false,
+  readOnly: false,
+  required: false,
+})
+
+const emit = defineEmits<{
+  /**
+   * Event handler called when the group value changes.
+   */
+  valueChange: [
+    value: Value,
+    eventDetails: BaseUIChangeEventDetails<typeof REASONS.none>,
+  ]
+}>()
+
+const MODIFIER_KEYS = [SHIFT]
+
+const attrs = useAttrs()
+const attrsObject = attrs as Record<string, unknown>
+
+const {
+  disabled: fieldDisabled,
+  name: fieldName,
+  state: fieldState,
+  validation,
+  setDirty,
+  setFilled,
+  setFocused,
+  setTouched: setFieldTouched,
+  validationMode,
+  shouldValidateOnChange,
+  validityData,
+} = useFieldRootContext()
+const fieldsetContext = useFieldsetRootContext(true)
+const labelableContext = useLabelableContext()
+const { clearErrors } = useFormContext()
+
+const disabled = computed(() =>
+  fieldDisabled.value
+  || Boolean(fieldsetContext?.disabled.value)
+  || props.disabled,
+)
+const name = computed(() => fieldName.value ?? props.name)
+const groupId = useBaseUiId(props.id)
+const id = computed(() => props.id ?? groupId)
+
+const { value: checkedValue, setValue: setCheckedValueState } = useControllableState<unknown>({
+  controlled: () => props.value,
+  default: () => props.defaultValue,
+  name: 'RadioGroup',
+  state: 'value',
+})
+
+const touched = ref(false)
+const controlRef = ref<HTMLElement | null>(null)
+const groupInputRef = ref<HTMLInputElement | null>(null)
+let currentInputElement: HTMLInputElement | null = null
+let firstEnabledInputElement: HTMLInputElement | null = null
+const setInputRef = useMergedRefs(
+  groupInputRef,
+  props.inputRef,
+  (element: HTMLInputElement | null) => {
+    validation.setInputRef(element)
+  },
+)
+
+function assignInputRef(element: HTMLInputElement | null) {
+  if (currentInputElement === element) {
+    return
+  }
+
+  currentInputElement = element
+  setInputRef?.(element)
+}
+
+function setCheckedValue(
+  value: Value,
+  eventDetails: BaseUIChangeEventDetails<typeof REASONS.none>,
+) {
+  emit('valueChange', value, eventDetails)
+
+  if (eventDetails.isCanceled) {
+    return
+  }
+
+  setCheckedValueState(value)
+}
+
+function registerControlRef(element: HTMLElement | null, isDisabled = false) {
+  if (!element) {
+    return
+  }
+
+  if (isDisabled) {
+    if (controlRef.value === element) {
+      controlRef.value = null
+    }
+    return
+  }
+
+  if (!controlRef.value) {
+    controlRef.value = element
+  }
+}
+
+function registerInputRef(input: HTMLInputElement | null, checked = Boolean(input?.checked)) {
+  if (!input || input.disabled) {
+    return
+  }
+
+  if (!firstEnabledInputElement) {
+    firstEnabledInputElement = input
+  }
+
+  if (checked || currentInputElement == null || currentInputElement.disabled) {
+    assignInputRef(input)
+  }
+}
+
+function getFormValue() {
+  const input = currentInputElement
+  if (!input || input.disabled || !input.checked) {
+    return null
+  }
+
+  return checkedValue.value ?? null
+}
+
+function combineDescriptionProps(
+  ...sources: object[]
+) {
+  const describedBy = Array.from(
+    new Set(
+      sources
+        .map(source => (source as { 'aria-describedby'?: unknown })['aria-describedby'])
+        .filter(Boolean)
+        .flatMap(value => String(value).split(/\s+/).filter(Boolean)),
+    ),
+  ).join(' ') || undefined
+
+  return {
+    ...Object.assign({}, ...sources),
+    'aria-describedby': describedBy,
+  }
+}
+
+useField({
+  enabled: computed(() => Boolean(name.value)),
+  id,
+  commit: (value: unknown) => validation.commit(value),
+  value: checkedValue as Ref<unknown>,
+  controlRef,
+  name,
+  getValue: getFormValue,
+})
+
+watch(
+  () => checkedValue.value,
+  (nextValue) => {
+    clearErrors(name.value)
+    setDirty(nextValue !== validityData.value.initialValue)
+    setFilled(nextValue != null)
+
+    if (shouldValidateOnChange()) {
+      void validation.commit(nextValue)
+    }
+    else {
+      void validation.commit(nextValue, true)
+    }
+
+    const fallbackInput = firstEnabledInputElement
+    if (nextValue == null && fallbackInput && !fallbackInput.disabled) {
+      assignInputRef(fallbackInput)
+    }
+  },
+)
+
+function handleFocusIn() {
+  setFocused(true)
+}
+
+function handleFocusOut(event: FocusEvent) {
+  const currentTarget = event.currentTarget as HTMLElement
+  const relatedTarget = event.relatedTarget as Node | null
+  if (relatedTarget && currentTarget.contains(relatedTarget)) {
+    return
+  }
+
+  setFieldTouched(true)
+  setFocused(false)
+
+  if (validationMode.value === 'onBlur') {
+    void validation.commit(checkedValue.value)
+  }
+}
+
+function handleKeydownCapture(event: KeyboardEvent) {
+  if (event.key.startsWith('Arrow')) {
+    touched.value = true
+    setFocused(true)
+  }
+}
+
+const state = computed<RadioGroupState>(() => ({
+  ...fieldState.value,
+  disabled: disabled.value,
+  readOnly: props.readOnly,
+  required: props.required,
+}))
+
+const contextValue: RadioGroupContext<Value> = {
+  disabled,
+  readOnly: computed(() => props.readOnly),
+  required: computed(() => props.required),
+  form: computed(() => props.form),
+  name,
+  checkedValue: checkedValue as Readonly<Ref<Value | undefined>>,
+  touched,
+  validation,
+  setCheckedValue,
+  setTouched(value) {
+    touched.value = value
+  },
+  registerControlRef,
+  registerInputRef,
+}
+
+provide(radioGroupContextKey as InjectionKey<RadioGroupContext<Value>>, contextValue)
+
+const forwardedAttrs = computed(() => {
+  const {
+    class: _class,
+    style: _style,
+    'aria-describedby': _ariaDescribedBy,
+    ...rest
+  } = attrsObject
+  return rest
+})
+
+const rootProps = computed(() => mergeProps(
+  combineDescriptionProps(
+    { 'aria-describedby': attrsObject['aria-describedby'] },
+    labelableContext.getDescriptionProps(),
+    validation.getValidationProps(),
+  ),
+  {
+    'id': id.value,
+    'role': 'radiogroup',
+    'aria-required': props.required || undefined,
+    'aria-disabled': disabled.value || undefined,
+    'aria-readonly': props.readOnly || undefined,
+    'aria-labelledby': attrsObject['aria-labelledby'] ?? labelableContext.labelId.value ?? fieldsetContext?.legendId.value,
+    'onFocusin': handleFocusIn,
+    'onFocusout': handleFocusOut,
+    'onKeydownCapture': handleKeydownCapture,
+  },
+  forwardedAttrs.value,
+))
+</script>
+
+<template>
+  <CompositeRoot
+    :as="as"
+    :class="props.class"
+    :style="props.style"
+    :state="state"
+    :state-attributes-mapping="fieldValidityMapping"
+    :enable-home-and-end-keys="false"
+    :modifier-keys="MODIFIER_KEYS"
+    role="radiogroup"
+    v-bind="rootProps"
+  >
+    <template v-if="as === Slot" #default="{ ref: rootRef, props: compositeProps, state: compositeState }">
+      <slot :ref="rootRef" :props="compositeProps" :state="compositeState" />
+    </template>
+    <template v-else #default="{ state: compositeState }">
+      <slot :state="compositeState" />
+    </template>
+  </CompositeRoot>
+</template>

package/src/radio-group/RadioGroupContext.ts

@@ -0,0 +1,42 @@
+import type { InjectionKey, Ref } from 'vue'
+import type { UseFieldValidationReturnValue } from '../field/root/useFieldValidation'
+import type { BaseUIChangeEventDetails } from '../utils/createBaseUIEventDetails'
+import type { REASONS } from '../utils/reasons'
+import { inject } from 'vue'
+
+export interface RadioGroupContext<Value = unknown> {
+  disabled: Readonly<Ref<boolean | undefined>>
+  readOnly: Readonly<Ref<boolean | undefined>>
+  required: Readonly<Ref<boolean | undefined>>
+  form: Readonly<Ref<string | undefined>>
+  name: Readonly<Ref<string | undefined>>
+  checkedValue: Readonly<Ref<Value | undefined>>
+  touched: Readonly<Ref<boolean>>
+  validation?: UseFieldValidationReturnValue
+  setCheckedValue: (
+    value: Value,
+    eventDetails: BaseUIChangeEventDetails<typeof REASONS.none>,
+  ) => void
+  setTouched: (value: boolean) => void
+  registerControlRef: (element: HTMLElement | null, disabled?: boolean) => void
+  registerInputRef: (element: HTMLInputElement | null, checked?: boolean) => void
+}
+
+export const radioGroupContextKey: InjectionKey<RadioGroupContext<unknown>> = Symbol(
+  'RadioGroupContext',
+)
+
+export function useRadioGroupContext<Value = unknown>(
+  optional: true,
+): RadioGroupContext<Value> | undefined
+export function useRadioGroupContext<Value = unknown>(optional?: false): RadioGroupContext<Value>
+export function useRadioGroupContext<Value = unknown>(optional = false) {
+  const context = inject(radioGroupContextKey, undefined) as RadioGroupContext<Value> | undefined
+  if (!context && !optional) {
+    throw new Error(
+      'Base UI Vue: RadioGroupContext is missing. Radio parts must be placed within a radio group.',
+    )
+  }
+
+  return context
+}

package/src/radio-group/RadioGroupDataAttributes.ts

@@ -0,0 +1,6 @@
+export enum RadioGroupDataAttributes {
+  /**
+   * Present when the radio group is disabled.
+   */
+  disabled = 'data-disabled',
+}

package/src/radio-group/index.ts

@@ -0,0 +1,10 @@
+export { default as RadioGroup } from './RadioGroup.vue'
+export type {
+  RadioGroupChangeEventDetails,
+  RadioGroupChangeEventReason,
+  RadioGroupProps,
+  RadioGroupState,
+} from './RadioGroup.vue'
+export { radioGroupContextKey, useRadioGroupContext } from './RadioGroupContext'
+export type { RadioGroupContext } from './RadioGroupContext'
+export { RadioGroupDataAttributes } from './RadioGroupDataAttributes'

package/src/tabs/index.ts

@@ -0,0 +1,38 @@
+export { default as TabsIndicator } from './indicator/TabsIndicator.vue'
+export type { TabsIndicatorProps, TabsIndicatorState } from './indicator/TabsIndicator.vue'
+export { TabsIndicatorCssVars } from './indicator/TabsIndicatorCssVars'
+export { TabsIndicatorDataAttributes } from './indicator/TabsIndicatorDataAttributes'
+
+export { default as TabsList } from './list/TabsList.vue'
+export type { TabsListProps, TabsListState } from './list/TabsList.vue'
+export { tabsListContextKey, useTabsListContext } from './list/TabsListContext'
+export type { TabsListContext } from './list/TabsListContext'
+export { TabsListDataAttributes } from './list/TabsListDataAttributes'
+
+export { default as TabsPanel } from './panel/TabsPanel.vue'
+export type { TabsPanelMetadata, TabsPanelProps, TabsPanelState } from './panel/TabsPanel.vue'
+export { TabsPanelDataAttributes } from './panel/TabsPanelDataAttributes'
+
+export { default as TabsRoot } from './root/TabsRoot.vue'
+export type {
+  TabsRootChangeEventDetails,
+  TabsRootChangeEventReason,
+  TabsRootOrientation,
+  TabsRootProps,
+  TabsRootState,
+} from './root/TabsRoot.vue'
+export { tabsRootContextKey, useTabsRootContext } from './root/TabsRootContext'
+export type { TabsRootContext } from './root/TabsRootContext'
+export { TabsRootDataAttributes } from './root/TabsRootDataAttributes'
+
+export { default as TabsTab } from './tab/TabsTab.vue'
+export type {
+  TabsTabActivationDirection,
+  TabsTabMetadata,
+  TabsTabPosition,
+  TabsTabProps,
+  TabsTabSize,
+  TabsTabState,
+  TabsTabValue,
+} from './tab/TabsTab.vue'
+export { TabsTabDataAttributes } from './tab/TabsTabDataAttributes'

package/src/tabs/indicator/TabsIndicator.vue

@@ -0,0 +1,201 @@
+<script setup lang="ts">
+import type { StyleValue } from 'vue'
+import type { BaseUIComponentProps, Orientation } from '../../utils/types'
+import type { TabsRootState } from '../root/TabsRoot.vue'
+import type { TabsTabActivationDirection, TabsTabPosition, TabsTabSize } from '../tab/TabsTab.vue'
+import { computed, onBeforeUnmount, onMounted, ref, useAttrs } from 'vue'
+import { useCSPContext } from '../../csp-provider/CSPContext'
+import { mergeProps } from '../../merge-props/mergeProps'
+import { getCssDimensions } from '../../utils/getCssDimensions'
+import { useRenderElement } from '../../utils/useRenderElement'
+import { useTabsListContext } from '../list/TabsListContext'
+import { tabsStateAttributesMapping } from '../root/stateAttributesMapping'
+import { useTabsRootContext } from '../root/TabsRootContext'
+import { script as prehydrationScript } from './prehydrationScript.min'
+import { TabsIndicatorCssVars } from './TabsIndicatorCssVars'
+
+export interface TabsIndicatorState extends TabsRootState {
+  /**
+   * The active tab position.
+   */
+  activeTabPosition: TabsTabPosition | null
+  /**
+   * The active tab size.
+   */
+  activeTabSize: TabsTabSize | null
+  /**
+   * The component orientation.
+   */
+  orientation: Orientation
+  /**
+   * The direction used for tab activation.
+   */
+  tabActivationDirection: TabsTabActivationDirection
+}
+
+export interface TabsIndicatorProps extends BaseUIComponentProps<TabsIndicatorState> {
+  /**
+   * Whether to render itself before Vue hydrates.
+   * This minimizes the time that the indicator isn't visible after server-side rendering.
+   * @default false
+   */
+  renderBeforeHydration?: boolean
+}
+
+/**
+ * A visual indicator that can be styled to match the position of the currently active tab.
+ * Renders a `<span>` element.
+ *
+ * Documentation: [Base UI Vue Tabs](https://baseui-vue.com/docs/components/tabs)
+ */
+defineOptions({
+  name: 'TabsIndicator',
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<TabsIndicatorProps>(), {
+  as: 'span',
+  renderBeforeHydration: false,
+})
+
+const attrs = useAttrs()
+const { nonce } = useCSPContext()
+const rootCtx = useTabsRootContext()
+const listCtx = useTabsListContext()
+const layoutTick = ref(0)
+const isMounted = ref(false)
+
+const cleanupIndicatorListener = listCtx.registerIndicatorUpdateListener(() => {
+  layoutTick.value += 1
+})
+
+onMounted(() => {
+  isMounted.value = true
+})
+
+onBeforeUnmount(() => {
+  cleanupIndicatorListener()
+})
+
+const measurement = computed(() => {
+  void layoutTick.value
+
+  const tabsListElement = listCtx.tabsListElement.value
+  const selectedValue = rootCtx.value.value
+
+  if (selectedValue == null || tabsListElement == null) {
+    return null
+  }
+
+  const activeTab = rootCtx.getTabElementBySelectedValue(selectedValue)
+
+  if (activeTab == null) {
+    return null
+  }
+
+  const { width, height } = getCssDimensions(activeTab)
+  const { width: tabListWidth, height: tabListHeight } = getCssDimensions(tabsListElement)
+  const tabRect = activeTab.getBoundingClientRect()
+  const tabsListRect = tabsListElement.getBoundingClientRect()
+  const scaleX = tabListWidth > 0 ? tabsListRect.width / tabListWidth : 1
+  const scaleY = tabListHeight > 0 ? tabsListRect.height / tabListHeight : 1
+  const hasNonZeroScale
+    = Math.abs(scaleX) > Number.EPSILON && Math.abs(scaleY) > Number.EPSILON
+
+  let left = 0
+  let top = 0
+
+  if (hasNonZeroScale) {
+    left = (tabRect.left - tabsListRect.left) / scaleX + tabsListElement.scrollLeft - tabsListElement.clientLeft
+    top = (tabRect.top - tabsListRect.top) / scaleY + tabsListElement.scrollTop - tabsListElement.clientTop
+  }
+  else {
+    left = activeTab.offsetLeft
+    top = activeTab.offsetTop
+  }
+
+  const right = tabsListElement.scrollWidth - left - width
+  const bottom = tabsListElement.scrollHeight - top - height
+
+  return {
+    position: { left, right, top, bottom },
+    size: { width, height },
+  }
+})
+
+const activeTabPosition = computed(() => measurement.value?.position ?? null)
+const activeTabSize = computed(() => measurement.value?.size ?? null)
+const displayIndicator = computed(() =>
+  activeTabSize.value != null && activeTabSize.value.width > 0 && activeTabSize.value.height > 0,
+)
+
+const state = computed<TabsIndicatorState>(() => ({
+  orientation: rootCtx.orientation.value,
+  activeTabPosition: activeTabPosition.value,
+  activeTabSize: activeTabSize.value,
+  tabActivationDirection: rootCtx.tabActivationDirection.value,
+}))
+
+const indicatorStyle = computed<StyleValue | undefined>(() => {
+  const position = activeTabPosition.value
+  const size = activeTabSize.value
+
+  if (position == null || size == null) {
+    return undefined
+  }
+
+  return {
+    [TabsIndicatorCssVars.activeTabLeft]: `${position.left}px`,
+    [TabsIndicatorCssVars.activeTabRight]: `${position.right}px`,
+    [TabsIndicatorCssVars.activeTabTop]: `${position.top}px`,
+    [TabsIndicatorCssVars.activeTabBottom]: `${position.bottom}px`,
+    [TabsIndicatorCssVars.activeTabWidth]: `${size.width}px`,
+    [TabsIndicatorCssVars.activeTabHeight]: `${size.height}px`,
+  } as StyleValue
+})
+
+const indicatorProps = computed(() => mergeProps(
+  {
+    role: 'presentation',
+    style: indicatorStyle.value,
+    hidden: !displayIndicator.value,
+    suppressHydrationWarning: props.renderBeforeHydration || undefined,
+  },
+  attrs as Record<string, unknown>,
+))
+
+const stateAttributesMapping = {
+  ...tabsStateAttributesMapping,
+  activeTabPosition: () => null,
+  activeTabSize: () => null,
+}
+
+const {
+  tag,
+  mergedProps,
+  renderless,
+  ref: renderRef,
+} = useRenderElement({
+  componentProps: props,
+  state,
+  props: indicatorProps,
+  stateAttributesMapping,
+  defaultTagName: 'span',
+})
+</script>
+
+<template>
+  <template v-if="rootCtx.value.value !== null">
+    <slot v-if="renderless" :ref="renderRef" :props="mergedProps" :state="state" />
+    <component :is="tag" v-else :ref="renderRef" v-bind="mergedProps" />
+    <!-- eslint-disable-next-line vue/require-component-is -->
+    <component
+      is="script"
+      v-if="props.renderBeforeHydration && !isMounted"
+      :nonce="nonce"
+      :suppress-hydration-warning="true"
+    >
+      {{ prehydrationScript }}
+    </component>
+  </template>
+</template>