base-ui-vue 0.1.0 → 0.2.0

package/src/csp-provider/CSPProvider.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { CSPContextValue } from './CSPContext'
+import { computed, provide, toRef } from 'vue'
+import { cspContextKey } from './CSPContext'
+
+export interface CSPProviderProps {
+  /**
+   * The nonce value to apply to inline `<style>` and `<script>` tags.
+   */
+  nonce?: string
+  /**
+   * Whether inline `<style>` elements created by Base UI components should not be rendered.
+   * @default false
+   */
+  disableStyleElements?: boolean
+}
+
+/**
+ * Provides a default Content Security Policy (CSP) configuration for Base UI Vue components
+ * that require inline `<style>` or `<script>` tags.
+ */
+defineOptions({
+  name: 'CSPProvider',
+})
+
+const props = withDefaults(defineProps<CSPProviderProps>(), {
+  disableStyleElements: false,
+})
+
+const contextValue = computed<CSPContextValue>(() => ({
+  nonce: toRef(() => props.nonce),
+  disableStyleElements: toRef(() => props.disableStyleElements),
+}))
+
+provide(cspContextKey, contextValue.value)
+</script>
+
+<template>
+  <slot />
+</template>

package/src/csp-provider/index.ts

@@ -0,0 +1,5 @@
+export type { CSPContextValue } from './CSPContext'
+
+export { useCSPContext } from './CSPContext'
+export { default as CSPProvider } from './CSPProvider.vue'
+export type { CSPProviderProps } from './CSPProvider.vue'

package/src/field/item/FieldItem.vue

@@ -3,6 +3,7 @@ import type { BaseUIComponentProps } from '../../utils/types'
 import type { FieldRootState } from '../root/FieldRoot.vue'
 import type { FieldItemContext } from './FieldItemContext'
 import { computed, provide, useAttrs } from 'vue'
+import { useCheckboxGroupContext } from '../../checkbox-group/CheckboxGroupContext'
 import LabelableProvider from '../../labelable-provider/LabelableProvider.vue'
 import { useRenderElement } from '../../utils/useRenderElement'
 import { useFieldRootContext } from '../root/FieldRootContext'
@@ -35,6 +36,10 @@ const attrs = useAttrs()
 const { state, disabled: rootDisabled } = useFieldRootContext(false)
 
 const disabled = computed(() => rootDisabled.value || props.disabled)
+const checkboxGroupContext = useCheckboxGroupContext(true)
+const parentId = computed(() => checkboxGroupContext?.parent.id)
+const hasParentCheckbox = computed(() => checkboxGroupContext?.allValues.value !== undefined)
+const controlId = computed(() => (hasParentCheckbox.value ? parentId.value : undefined))
 
 const contextValue: FieldItemContext = {
   disabled,
@@ -54,7 +59,7 @@ const { tag, mergedProps, renderless } = useRenderElement({
 </script>
 
 <template>
-  <LabelableProvider>
+  <LabelableProvider :control-id="controlId">
     <slot v-if="renderless" :props="mergedProps" :state="state" />
     <component :is="tag" v-else v-bind="mergedProps">
       <slot :state="state" />

package/src/field/label/FieldLabel.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import type { BaseUIComponentProps } from '../../utils/types'
 import type { FieldRootState } from '../root/FieldRoot.vue'
-import { computed, useAttrs, watchEffect } from 'vue'
+import { computed, useAttrs } from 'vue'
 import { useLabelableContext } from '../../labelable-provider/LabelableContext'
-import { useBaseUiId } from '../../utils/useBaseUiId'
+import { useLabel } from '../../labelable-provider/useLabel'
 import { useRenderElement } from '../../utils/useRenderElement'
 import { useFieldRootContext } from '../root/FieldRootContext'
 import { fieldValidityMapping } from '../utils/constants'
@@ -35,60 +35,19 @@ const props = withDefaults(defineProps<FieldLabelProps>(), {
 const attrs = useAttrs()
 
 const fieldRootContext = useFieldRootContext(false)
-
-const { controlId, setLabelId, labelId: contextLabelId } = useLabelableContext()
-
-const generatedLabelId = useBaseUiId(props.id)
-const labelId = computed(() => props.id ?? contextLabelId.value ?? generatedLabelId)
-
-watchEffect((onCleanup) => {
-  const id = labelId.value
-  setLabelId(id)
-  onCleanup(() => setLabelId(undefined))
+const { labelId } = useLabelableContext()
+const label = useLabel({
+  id: computed(() => labelId.value ?? props.id),
+  native: computed(() => props.nativeLabel),
 })
 
-function handleInteraction(event: MouseEvent) {
-  const target = event.target as HTMLElement | null
-  if (target?.closest('button,input,select,textarea')) {
-    return
-  }
-
-  if (!event.defaultPrevented && event.detail > 1) {
-    event.preventDefault()
-  }
-
-  if (props.nativeLabel || !controlId.value) {
-    return
-  }
-
-  const controlElement = document.getElementById(controlId.value)
-  if (controlElement) {
-    controlElement.focus()
-  }
-}
-
 const { tag, mergedProps, renderless } = useRenderElement({
   componentProps: props,
   state: fieldRootContext.state,
-  props: computed(() => {
-    if (props.nativeLabel) {
-      return {
-        ...attrs,
-        id: labelId.value,
-        for: controlId.value ?? undefined,
-        onMousedown: handleInteraction,
-      }
-    }
-
-    return {
-      ...attrs,
-      id: labelId.value,
-      onClick: handleInteraction,
-      onPointerdown: (event: PointerEvent) => {
-        event.preventDefault()
-      },
-    }
-  }),
+  props: computed(() => ({
+    ...attrs,
+    ...label.props.value,
+  })),
   stateAttributesMapping: fieldValidityMapping,
   defaultTagName: 'label',
 })

package/src/field/root/FieldRoot.vue

@@ -125,9 +125,22 @@ const parentLabelable = useLabelableContext()
 const controlId = ref<string | null | undefined>(undefined)
 const labelId = ref<string | undefined>(undefined)
 const messageIds = ref<string[]>([])
+const controlIdRegistrations = new Map<symbol, string | null | undefined>()
 
-function setControlId(id: string | null | undefined) {
-  controlId.value = id
+function registerControlId(source: symbol, id: string | null | undefined) {
+  if (id === undefined) {
+    controlIdRegistrations.delete(source)
+  }
+  else {
+    controlIdRegistrations.set(source, id)
+  }
+
+  if (controlIdRegistrations.size === 0) {
+    controlId.value = undefined
+    return
+  }
+
+  controlId.value = controlIdRegistrations.values().next().value
 }
 
 function setLabelId(id: string | undefined) {
@@ -147,7 +160,7 @@ function getDescriptionProps() {
 
 const labelableContext: LabelableContext = {
   controlId,
-  setControlId,
+  registerControlId,
   labelId,
   setLabelId,
   messageIds,

package/src/floating-ui-vue/types.ts

@@ -1,4 +1 @@
-export interface Dimensions {
-  width: number
-  height: number
-}
+export type { Coords, Dimensions } from '@floating-ui/dom'

package/src/floating-ui-vue/utils/element.ts

@@ -0,0 +1,12 @@
+export function matchesFocusVisible(element: Element | null) {
+  if (!element) {
+    return true
+  }
+
+  try {
+    return element.matches(':focus-visible')
+  }
+  catch {
+    return true
+  }
+}

package/src/floating-ui-vue/utils/shadowDom.ts

@@ -0,0 +1,44 @@
+import { isShadowRoot } from '@floating-ui/utils/dom'
+
+export function activeElement(doc: Document) {
+  let element = doc.activeElement
+
+  while (element?.shadowRoot?.activeElement != null) {
+    element = element.shadowRoot.activeElement
+  }
+
+  return element
+}
+
+export function contains(parent?: Element | null, child?: Element | null) {
+  if (!parent || !child) {
+    return false
+  }
+
+  const rootNode = child.getRootNode?.()
+
+  if (parent.contains(child)) {
+    return true
+  }
+
+  if (rootNode && isShadowRoot(rootNode)) {
+    let next: Element | null = child
+    while (next) {
+      if (parent === next) {
+        return true
+      }
+
+      next = (next.parentNode as Element | null) ?? ((next as unknown as ShadowRoot).host ?? null)
+    }
+  }
+
+  return false
+}
+
+export function getTarget(event: Event) {
+  if ('composedPath' in event && typeof event.composedPath === 'function') {
+    return event.composedPath()[0]
+  }
+
+  return (event as Event).target
+}

package/src/floating-ui-vue/utils.ts

@@ -1,2 +1,5 @@
 export * from './utils/composite'
+export * from './utils/constants'
+export * from './utils/element'
 export * from './utils/event'
+export * from './utils/shadowDom'

package/src/form/Form.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { BaseUIComponentProps } from '../utils/types'
 import type { FormContext, FormErrors, FormField, FormValidationMode } from './FormContext'
-import { computed, provide, ref, shallowRef, useAttrs, watch } from 'vue'
+import { computed, nextTick, provide, ref, shallowRef, useAttrs, watch } from 'vue'
 import { EMPTY_OBJECT } from '../utils/empty'
 import { useRenderElement } from '../utils/useRenderElement'
 import { formContextKey } from './FormContext'
@@ -76,12 +76,14 @@ function focusControl(el: HTMLElement | null) {
   }
 }
 
-watch(internalErrors, () => {
+watch(internalErrors, async () => {
   if (!submittedRef.value)
     return
 
   submittedRef.value = false
 
+  await nextTick()
+
   const invalidFields = Array.from(formRef.value.fields.values()).filter(
     field => field.validityData.state.valid === false,
   )
@@ -90,7 +92,7 @@ watch(internalErrors, () => {
     const controlRef = invalidFields[0].controlRef
     focusControl(controlRef.value)
   }
-})
+}, { flush: 'post' })
 
 function handleImperativeValidate(fieldName?: string) {
   const values = Array.from(formRef.value.fields.values())

package/src/index.ts

@@ -4,11 +4,20 @@ export const version = '0.0.0'
 export * from './accordion'
 export * from './avatar'
 export * from './button'
+export * from './checkbox'
+export * from './checkbox-group'
 export * from './collapsible'
+export * from './csp-provider'
 export * from './direction-provider'
 export * from './field'
 export * from './fieldset'
 export * from './form'
 export * from './merge-props'
+export * from './separator'
+export * from './slider'
+export * from './switch'
+export * from './toggle'
+export * from './toggle-group'
+export * from './toolbar'
 export * from './use-render'
 export { Slot } from './utils/slot'

package/src/labelable-provider/LabelableContext.ts

@@ -8,7 +8,7 @@ export interface LabelableContext {
    * When `null` the association is implicit.
    */
   controlId: Readonly<Ref<string | null | undefined>>
-  setControlId: (id: string | null | undefined) => void
+  registerControlId: (source: symbol, id: string | null | undefined) => void
   labelId: Readonly<Ref<string | undefined>>
   setLabelId: (id: string | undefined) => void
   messageIds: Readonly<Ref<string[]>>
@@ -18,7 +18,7 @@ export interface LabelableContext {
 
 const defaultContext: LabelableContext = {
   controlId: shallowReadonly(shallowRef<string | null | undefined>(undefined)),
-  setControlId: NOOP,
+  registerControlId: NOOP,
   labelId: shallowReadonly(shallowRef<string | undefined>(undefined)),
   setLabelId: NOOP,
   messageIds: shallowReadonly(shallowRef<string[]>([])),

package/src/labelable-provider/LabelableProvider.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { LabelableContext } from './LabelableContext'
 import { provide, ref } from 'vue'
+import { useBaseUiId } from '../utils/useBaseUiId'
 import { labelableContextKey, useLabelableContext } from './LabelableContext'
 
 export interface LabelableProviderProps {
@@ -12,14 +13,30 @@ defineOptions({ name: 'LabelableProvider' })
 
 const props = defineProps<LabelableProviderProps>()
 
-const controlId = ref<string | null | undefined>(props.controlId)
+const defaultId = useBaseUiId()
+const initialControlId = props.controlId === undefined ? defaultId : props.controlId
+
+const controlId = ref<string | null | undefined>(initialControlId)
 const labelId = ref<string | undefined>(props.labelId)
 const messageIds = ref<string[]>([])
+const registrations = new Map<symbol, string | null | undefined>()
 
 const parent = useLabelableContext()
 
-function setControlId(id: string | null | undefined) {
-  controlId.value = id
+function registerControlId(source: symbol, id: string | null | undefined) {
+  if (id === undefined) {
+    registrations.delete(source)
+  }
+  else {
+    registrations.set(source, id)
+  }
+
+  if (registrations.size === 0) {
+    controlId.value = initialControlId
+    return
+  }
+
+  controlId.value = registrations.values().next().value
 }
 
 function setLabelId(id: string | undefined) {
@@ -39,7 +56,7 @@ function getDescriptionProps() {
 
 const contextValue: LabelableContext = {
   controlId,
-  setControlId,
+  registerControlId,
   labelId,
   setLabelId,
   messageIds,

package/src/labelable-provider/index.ts

@@ -2,5 +2,7 @@ export { labelableContextKey, useLabelableContext } from './LabelableContext'
 export type { LabelableContext } from './LabelableContext'
 export { default as LabelableProvider } from './LabelableProvider.vue'
 export type { LabelableProviderProps } from './LabelableProvider.vue'
+export { useLabel } from './useLabel'
+export type { UseLabelParameters } from './useLabel'
 export { useLabelableId } from './useLabelableId'
 export type { UseLabelableIdParameters } from './useLabelableId'

package/src/labelable-provider/useAriaLabelledBy.ts

@@ -1,6 +1,5 @@
-import type { Ref } from 'vue'
-import { computed, ref, watchEffect } from 'vue'
-import { useBaseUiId } from '../utils/useBaseUiId'
+import type { MaybeRefOrGetter, Ref } from 'vue'
+import { computed, ref, toValue, watchPostEffect } from 'vue'
 
 export interface UseAriaLabelledByParameters {
   /**
@@ -26,7 +25,7 @@ export interface UseAriaLabelledByParameters {
    * Optional base id used when generating an id
    * for an implicit label discovered in the DOM.
    */
-  labelSourceId?: string
+  labelSourceId?: MaybeRefOrGetter<string | undefined>
 }
 
 export function useAriaLabelledBy(params: UseAriaLabelledByParameters) {
@@ -34,23 +33,24 @@ export function useAriaLabelledBy(params: UseAriaLabelledByParameters) {
 
   const fallbackAriaLabelledBy = ref<string | undefined>(undefined)
 
-  const generatedLabelId = useBaseUiId(
-    labelSourceId ? `${labelSourceId}-label` : undefined,
-  )
+  const generatedLabelId = computed(() => {
+    const sourceId = toValue(labelSourceId)
+    return sourceId ? `${sourceId}-label` : undefined
+  })
 
   const resolvedAriaLabelledBy = computed(() => {
     const explicit = ariaLabelledBy?.value
     const fromContext = labelId?.value
     return explicit ?? fromContext ?? fallbackAriaLabelledBy.value
   })
-  watchEffect(() => {
+  watchPostEffect(() => {
     const explicitOrContext = ariaLabelledBy?.value || labelId?.value
     if (explicitOrContext || !enableFallback) {
       fallbackAriaLabelledBy.value = undefined
       return
     }
 
-    const next = getAriaLabelledBy(labelSourceRef.value, generatedLabelId)
+    const next = getAriaLabelledBy(labelSourceRef.value, generatedLabelId.value)
     if (fallbackAriaLabelledBy.value !== next) {
       fallbackAriaLabelledBy.value = next
     }

package/src/labelable-provider/useLabel.ts

@@ -0,0 +1,115 @@
+import type { MaybeRefOrGetter } from 'vue'
+import { isHTMLElement } from '@floating-ui/utils/dom'
+import { computed, toValue } from 'vue'
+import { getTarget } from '../floating-ui-vue/utils'
+import { ownerDocument } from '../utils/owner'
+import { useRegisteredLabelId } from '../utils/useRegisteredLabelId'
+import { useLabelableContext } from './LabelableContext'
+
+export interface UseLabelParameters {
+  id?: MaybeRefOrGetter<string | undefined>
+  /**
+   * Control id used when no labelable context control id exists.
+   */
+  fallbackControlId?: MaybeRefOrGetter<string | null | undefined>
+  /**
+   * Whether the rendered element is a native `<label>`.
+   * @default false
+   */
+  native?: MaybeRefOrGetter<boolean | undefined>
+  /**
+   * Additional callback to sync the current label id with local component state/store.
+   */
+  setLabelId?: ((nextLabelId: string | undefined) => void) | undefined
+  /**
+   * Custom focus handler for non-native labels.
+   * If omitted, focus behavior targets the resolved control id.
+   */
+  focusControl?:
+    | ((event: MouseEvent, controlId: string | null | undefined) => void)
+    | undefined
+}
+
+export function useLabel(params: UseLabelParameters = {}) {
+  const {
+    id: idProp,
+    fallbackControlId,
+    native,
+    setLabelId: setLabelIdProp,
+    focusControl: focusControlProp,
+  } = params
+
+  const { controlId: contextControlId, setLabelId: setContextLabelId } = useLabelableContext()
+
+  const syncLabelId = (nextLabelId: string | undefined) => {
+    setContextLabelId(nextLabelId)
+    setLabelIdProp?.(nextLabelId)
+  }
+
+  const labelId = useRegisteredLabelId(idProp, syncLabelId)
+  const resolvedControlId = computed(() => contextControlId.value ?? toValue(fallbackControlId))
+  const isNative = computed(() => toValue(native) ?? false)
+
+  function defaultFocusControl(event: MouseEvent, controlId: string | null | undefined) {
+    if (!controlId) {
+      return
+    }
+
+    const controlElement = ownerDocument(event.currentTarget as Element)?.getElementById(controlId)
+    if (isHTMLElement(controlElement)) {
+      focusElementWithVisible(controlElement)
+    }
+  }
+
+  function handleInteraction(event: MouseEvent) {
+    const target = getTarget(event) as HTMLElement | null
+    if (target?.closest('button,input,select,textarea')) {
+      return
+    }
+
+    if (!event.defaultPrevented && event.detail > 1) {
+      event.preventDefault()
+    }
+
+    if (isNative.value) {
+      return
+    }
+
+    if (focusControlProp) {
+      focusControlProp(event, resolvedControlId.value)
+      return
+    }
+
+    defaultFocusControl(event, resolvedControlId.value)
+  }
+
+  const labelProps = computed(() => {
+    if (isNative.value) {
+      return {
+        id: labelId.value,
+        for: resolvedControlId.value ?? undefined,
+        onMousedown: handleInteraction,
+      }
+    }
+
+    return {
+      id: labelId.value,
+      onClick: handleInteraction,
+      onPointerdown(event: PointerEvent) {
+        event.preventDefault()
+      },
+    }
+  })
+
+  return {
+    labelId,
+    props: labelProps,
+  }
+}
+
+export function focusElementWithVisible(element: HTMLElement) {
+  element.focus({
+    // @ts-expect-error not available in types yet
+    focusVisible: true,
+  })
+}

package/src/labelable-provider/useLabelableId.ts

@@ -1,30 +1,32 @@
-import { computed, watchEffect } from 'vue'
+import type { MaybeRefOrGetter } from 'vue'
+import { computed, toValue, watchEffect } from 'vue'
 import { useBaseUiId } from '../utils/useBaseUiId'
 import { useLabelableContext } from './LabelableContext'
 
 export interface UseLabelableIdParameters {
-  id?: string
+  id?: MaybeRefOrGetter<string | undefined>
 }
 
 export function useLabelableId(params: UseLabelableIdParameters = {}) {
   const { id } = params
-  const { controlId, setControlId } = useLabelableContext()
+  const { controlId, registerControlId } = useLabelableContext()
+  const source = Symbol('labelable-id')
 
-  const defaultId = useBaseUiId(id)
-  const resolvedId = id ?? defaultId
+  const defaultId = useBaseUiId()
+  const resolvedId = computed(() => toValue(id) ?? defaultId)
 
   watchEffect((onCleanup) => {
-    if (!resolvedId) {
-      setControlId(undefined)
+    if (!resolvedId.value) {
+      registerControlId(source, undefined)
       return
     }
 
-    setControlId(resolvedId)
+    registerControlId(source, resolvedId.value)
 
     onCleanup(() => {
-      setControlId(undefined)
+      registerControlId(source, undefined)
     })
   })
 
-  return computed(() => controlId.value ?? defaultId)
+  return computed(() => controlId.value ?? resolvedId.value)
 }

package/src/separator/Separator.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import type { BaseUIComponentProps, Orientation } from '../utils/types'
+import { computed, useAttrs } from 'vue'
+import { useRenderElement } from '../utils/useRenderElement'
+
+export interface SeparatorState {
+  /**
+   * The orientation of the separator.
+   */
+  orientation: Orientation
+}
+
+export interface SeparatorProps extends BaseUIComponentProps<SeparatorState> {
+  /**
+   * The orientation of the separator.
+   * @default 'horizontal'
+   */
+  orientation?: Orientation
+}
+
+/**
+ * A separator element accessible to screen readers.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Vue Separator](https://baseui-vue.com/docs/components/separator)
+ */
+defineOptions({
+  name: 'Separator',
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<SeparatorProps>(), {
+  as: 'div',
+  orientation: 'horizontal',
+})
+
+const attrs = useAttrs()
+
+const state = computed<SeparatorState>(() => ({
+  orientation: props.orientation,
+}))
+
+const {
+  tag,
+  mergedProps,
+  renderless,
+  ref: renderRef,
+} = useRenderElement({
+  componentProps: props,
+  state,
+  props: computed(() => ({
+    ...attrs,
+    'role': 'separator',
+    'aria-orientation': props.orientation,
+  })),
+  defaultTagName: 'div',
+})
+</script>
+
+<template>
+  <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>

package/src/separator/SeparatorDataAttributes.ts

@@ -0,0 +1,7 @@
+export enum SeparatorDataAttributes {
+  /**
+   * Indicates the orientation of the separator.
+   * @type {'horizontal' | 'vertical'}
+   */
+  orientation = 'data-orientation',
+}