base-ui-vue 0.1.0 → 0.2.0

package/src/checkbox/utils/useStateAttributesMapping.ts

@@ -0,0 +1,30 @@
+import type { StateAttributesMapping } from '../../utils/getStateAttributesProps'
+import type { CheckboxRootState } from '../root/CheckboxRoot.vue'
+import { fieldValidityMapping } from '../../field/utils/constants'
+import { CheckboxRootDataAttributes } from '../root/CheckboxRootDataAttributes'
+
+const CHECKED_ATTRS: Record<string, string> = {
+  [CheckboxRootDataAttributes.checked]: '',
+}
+const UNCHECKED_ATTRS: Record<string, string> = {
+  [CheckboxRootDataAttributes.unchecked]: '',
+}
+
+export function useCheckboxStateAttributesMapping(
+  state: Readonly<{ value: CheckboxRootState }>,
+): StateAttributesMapping<CheckboxRootState> {
+  return {
+    checked(value) {
+      if (state.value.indeterminate) {
+        return null
+      }
+
+      if (value) {
+        return CHECKED_ATTRS
+      }
+
+      return UNCHECKED_ATTRS
+    },
+    ...fieldValidityMapping,
+  }
+}

package/src/checkbox-group/CheckboxGroup.vue

@@ -0,0 +1,241 @@
+<script setup lang="ts">
+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 { computed, provide, ref, useAttrs, watch, watchEffect } from 'vue'
+import { useFieldRootContext } from '../field/root/FieldRootContext'
+import { useField } from '../field/useField'
+import { fieldValidityMapping } from '../field/utils/constants'
+import { useFormContext } from '../form/FormContext'
+import { useLabelableContext } from '../labelable-provider/LabelableContext'
+import { mergeProps } from '../merge-props/mergeProps'
+import { EMPTY_ARRAY } from '../utils/constants'
+import { useBaseUiId } from '../utils/useBaseUiId'
+import { useControllableState } from '../utils/useControllableState'
+import { useRenderElement } from '../utils/useRenderElement'
+import { checkboxGroupContextKey } from './CheckboxGroupContext'
+import { useCheckboxGroupParent } from './useCheckboxGroupParent'
+
+export interface CheckboxGroupState extends FieldRootState {
+  /**
+   * Whether the component should ignore user interaction.
+   */
+  disabled: boolean
+}
+
+export interface CheckboxGroupProps extends BaseUIComponentProps<CheckboxGroupState> {
+  /**
+   * Names of the checkboxes in the group that should be ticked.
+   *
+   * To render an uncontrolled checkbox group, use the `defaultValue` prop instead.
+   */
+  value?: string[]
+  /**
+   * Names of the checkboxes in the group that should be initially ticked.
+   *
+   * To render a controlled checkbox group, use the `value` prop instead.
+   */
+  defaultValue?: string[]
+  /**
+   * Names of all checkboxes in the group. Use this when creating a parent checkbox.
+   */
+  allValues?: string[]
+  /**
+   * Whether the component should ignore user interaction.
+   * @default false
+   */
+  disabled?: boolean
+  id?: string
+}
+
+/**
+ * Provides a shared state to a series of checkboxes.
+ *
+ * Documentation: [Base UI Vue Checkbox Group](https://baseui-vue.com/docs/components/checkbox-group)
+ */
+defineOptions({
+  name: 'CheckboxGroup',
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<CheckboxGroupProps>(), {
+  as: 'div',
+  disabled: false,
+  defaultValue: () => [],
+})
+
+const emit = defineEmits<{
+  /**
+   * Event handler called when a checkbox in the group is ticked or unticked.
+   * Provides the new value as an argument.
+   */
+  valueChange: [
+    value: string[],
+    eventDetails: BaseUIChangeEventDetails<typeof REASONS.none>,
+  ]
+}>()
+
+const attrs = useAttrs()
+const attrsObject = attrs as Record<string, any>
+
+const {
+  disabled: fieldDisabled,
+  name: fieldName,
+  state: fieldState,
+  validation,
+  setFilled,
+  setDirty,
+  shouldValidateOnChange,
+  validityData,
+} = useFieldRootContext()
+const labelableContext = useLabelableContext()
+const { labelId, getDescriptionProps } = labelableContext
+const { clearErrors } = useFormContext()
+const controlSource = Symbol('checkbox-group-control')
+
+const disabled = computed(() => fieldDisabled.value || props.disabled)
+
+const { value, setValue: setValueUnwrapped } = useControllableState<string[]>({
+  controlled: () => props.value,
+  default: () => props.defaultValue,
+  name: 'CheckboxGroup',
+})
+
+const generatedId = useBaseUiId()
+const defaultValue = computed(() => props.defaultValue ?? [])
+const allValues = computed(() => props.allValues)
+const id = computed(() => props.id ?? generatedId)
+
+watchEffect((onCleanup) => {
+  labelableContext.registerControlId(controlSource, id.value)
+
+  onCleanup(() => {
+    labelableContext.registerControlId(controlSource, undefined)
+  })
+})
+
+function setValue(
+  nextValue: string[],
+  eventDetails: BaseUIChangeEventDetails<typeof REASONS.none>,
+) {
+  emit('valueChange', nextValue, eventDetails)
+
+  if (eventDetails.isCanceled) {
+    return
+  }
+
+  setValueUnwrapped(nextValue)
+}
+
+const parent = useCheckboxGroupParent({
+  allValues,
+  value,
+  onValueChange: setValue,
+})
+
+const controlRef = ref<HTMLElement | null>(null)
+
+function registerControlRef(element: HTMLElement | null) {
+  if (controlRef.value == null && element != null && !element.hasAttribute('data-parent')) {
+    controlRef.value = element
+  }
+}
+
+useField({
+  enabled: computed(() => Boolean(fieldName.value)),
+  id,
+  commit: (value: unknown) => validation.commit(value),
+  value,
+  controlRef,
+  name: fieldName,
+  getValue: () => value.value,
+})
+
+watch(
+  () => value.value.slice(),
+  (nextValue) => {
+    if (fieldName.value) {
+      clearErrors(fieldName.value)
+    }
+
+    const initialValue = Array.isArray(validityData.value.initialValue)
+      ? validityData.value.initialValue as string[]
+      : EMPTY_ARRAY as string[]
+    const normalizedNextValue = normalizeSelection(nextValue)
+    const normalizedInitialValue = normalizeSelection(initialValue)
+
+    setFilled(nextValue.length > 0)
+    setDirty(!areArraysEqual(normalizedNextValue, normalizedInitialValue))
+
+    if (shouldValidateOnChange()) {
+      void validation.commit(nextValue)
+    }
+    else {
+      void validation.commit(nextValue, true)
+    }
+  },
+  { flush: 'sync' },
+)
+
+const state = computed<CheckboxGroupState>(() => ({
+  ...fieldState.value,
+  disabled: disabled.value,
+}))
+
+provide(checkboxGroupContextKey, {
+  value,
+  defaultValue,
+  allValues,
+  disabled,
+  validation,
+  parent,
+  setValue,
+  registerControlRef,
+})
+
+const rootProps = computed(() => mergeProps(
+  attrsObject,
+  getDescriptionProps(),
+  {
+    'role': 'group',
+    'aria-labelledby': labelId.value,
+  },
+))
+
+const {
+  tag,
+  mergedProps,
+  renderless,
+  ref: renderRef,
+} = useRenderElement({
+  componentProps: props,
+  state,
+  props: rootProps,
+  stateAttributesMapping: fieldValidityMapping,
+  defaultTagName: 'div',
+})
+
+function areArraysEqual(a: readonly string[], b: readonly string[]) {
+  if (a === b) {
+    return true
+  }
+
+  if (a.length !== b.length) {
+    return false
+  }
+
+  return a.every((item, index) => item === b[index])
+}
+
+function normalizeSelection(values: readonly string[]) {
+  return values.slice().sort()
+}
+</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/checkbox-group/CheckboxGroupContext.ts

@@ -0,0 +1,39 @@
+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 type { UseCheckboxGroupParentReturnValue } from './useCheckboxGroupParent'
+import { inject } from 'vue'
+
+export interface CheckboxGroupContext {
+  value: Readonly<Ref<string[]>>
+  defaultValue: Readonly<Ref<string[]>>
+  allValues: Readonly<Ref<string[] | undefined>>
+  disabled: Readonly<Ref<boolean>>
+  validation: UseFieldValidationReturnValue
+  parent: UseCheckboxGroupParentReturnValue
+  setValue: (
+    value: string[],
+    eventDetails: BaseUIChangeEventDetails<typeof REASONS.none>,
+  ) => void
+  registerControlRef: (element: HTMLElement | null) => void
+}
+
+export const checkboxGroupContextKey: InjectionKey<CheckboxGroupContext> = Symbol(
+  'CheckboxGroupContext',
+)
+
+export function useCheckboxGroupContext(
+  optional: true,
+): CheckboxGroupContext | undefined
+export function useCheckboxGroupContext(optional?: false): CheckboxGroupContext
+export function useCheckboxGroupContext(optional = false) {
+  const context = inject(checkboxGroupContextKey, undefined)
+  if (!context && !optional) {
+    throw new Error(
+      'Base UI Vue: CheckboxGroupContext is missing. CheckboxGroup parts must be placed within <CheckboxGroup>.',
+    )
+  }
+
+  return context
+}

package/src/checkbox-group/CheckboxGroupDataAttributes.ts

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

package/src/checkbox-group/index.ts

@@ -0,0 +1,11 @@
+export { default as CheckboxGroup } from './CheckboxGroup.vue'
+export type { CheckboxGroupProps, CheckboxGroupState } from './CheckboxGroup.vue'
+export { checkboxGroupContextKey, useCheckboxGroupContext } from './CheckboxGroupContext'
+
+export type { CheckboxGroupContext } from './CheckboxGroupContext'
+export { CheckboxGroupDataAttributes } from './CheckboxGroupDataAttributes'
+
+export type {
+  UseCheckboxGroupParentParameters,
+  UseCheckboxGroupParentReturnValue,
+} from './useCheckboxGroupParent'

package/src/checkbox-group/useCheckboxGroupParent.ts

@@ -0,0 +1,173 @@
+import type { Ref } from 'vue'
+import type { BaseUIChangeEventDetails } from '../utils/createBaseUIEventDetails'
+import type { REASONS } from '../utils/reasons'
+import { computed, ref, watch } from 'vue'
+import { useBaseUiId } from '../utils/useBaseUiId'
+
+export interface UseCheckboxGroupParentParameters {
+  allValues: Readonly<Ref<string[] | undefined>>
+  value: Readonly<Ref<string[]>>
+  onValueChange: (
+    value: string[],
+    eventDetails: BaseUIChangeEventDetails<typeof REASONS.none>,
+  ) => void
+}
+
+export interface UseCheckboxGroupParentReturnValue {
+  id: string | undefined
+  indeterminate: Readonly<Ref<boolean>>
+  disabledStatesRef: Ref<Map<string, boolean>>
+  registeredControlIdsRef: Ref<Map<string, string>>
+  getParentProps: () => {
+    'id': string | undefined
+    'indeterminate': boolean
+    'checked': boolean
+    'aria-controls': string
+    'onCheckedChange': (
+      checked: boolean,
+      eventDetails: BaseUIChangeEventDetails<typeof REASONS.none>,
+    ) => void
+  }
+  getChildProps: (value: string) => {
+    checked: boolean
+    onCheckedChange: (
+      checked: boolean,
+      eventDetails: BaseUIChangeEventDetails<typeof REASONS.none>,
+    ) => void
+  }
+  registerChildControlId: (value: string, id: string | undefined) => void
+}
+
+export function useCheckboxGroupParent(
+  params: UseCheckboxGroupParentParameters,
+): UseCheckboxGroupParentReturnValue {
+  const { allValues, value, onValueChange } = params
+  const resolvedAllValues = computed(() => allValues.value ?? [])
+
+  const uncontrolledStateRef = ref<string[]>(value.value)
+  const disabledStatesRef = ref(new Map<string, boolean>())
+  const registeredControlIdsRef = ref(new Map<string, string>())
+  const status = ref<'on' | 'off' | 'mixed'>('mixed')
+
+  const id = useBaseUiId()
+  const checked = computed(() => value.value.length === resolvedAllValues.value.length)
+  const indeterminate = computed(() =>
+    value.value.length !== resolvedAllValues.value.length && value.value.length > 0,
+  )
+
+  watch(
+    () => value.value.slice(),
+    (nextValue) => {
+      if (nextValue.length > 0 && nextValue.length < resolvedAllValues.value.length) {
+        uncontrolledStateRef.value = nextValue
+      }
+    },
+    { flush: 'sync' },
+  )
+
+  function getParentProps() {
+    return {
+      id,
+      'indeterminate': indeterminate.value,
+      'checked': checked.value,
+      'aria-controls': resolvedAllValues.value
+        .map(item => registeredControlIdsRef.value.get(item))
+        .filter((item): item is string => Boolean(item))
+        .join(' '),
+      onCheckedChange(
+        _nextChecked: boolean,
+        eventDetails: BaseUIChangeEventDetails<typeof REASONS.none>,
+      ) {
+        const uncontrolledState = uncontrolledStateRef.value
+
+        const none = resolvedAllValues.value.filter(
+          (item: string) =>
+            disabledStatesRef.value.get(item) && uncontrolledState.includes(item),
+        )
+
+        const all = resolvedAllValues.value.filter(
+          (item: string) =>
+            !disabledStatesRef.value.get(item)
+            || (disabledStatesRef.value.get(item) && uncontrolledState.includes(item)),
+        )
+
+        const allOnOrOff
+          = uncontrolledState.length === all.length || uncontrolledState.length === 0
+
+        if (allOnOrOff) {
+          if (value.value.length === all.length) {
+            onValueChange(none, eventDetails)
+          }
+          else {
+            onValueChange(all, eventDetails)
+          }
+          return
+        }
+
+        if (status.value === 'mixed') {
+          onValueChange(all, eventDetails)
+          status.value = 'on'
+        }
+        else if (status.value === 'on') {
+          onValueChange(none, eventDetails)
+          status.value = 'off'
+        }
+        else {
+          onValueChange(uncontrolledState, eventDetails)
+          status.value = 'mixed'
+        }
+      },
+    }
+  }
+
+  function getChildProps(childValue: string) {
+    return {
+      checked: value.value.includes(childValue),
+      onCheckedChange(
+        nextChecked: boolean,
+        eventDetails: BaseUIChangeEventDetails<typeof REASONS.none>,
+      ) {
+        const newValue = value.value.slice()
+
+        if (nextChecked) {
+          if (!newValue.includes(childValue)) {
+            newValue.push(childValue)
+          }
+        }
+        else {
+          const index = newValue.indexOf(childValue)
+          if (index !== -1) {
+            newValue.splice(index, 1)
+          }
+        }
+
+        uncontrolledStateRef.value = newValue
+        onValueChange(newValue, eventDetails)
+        status.value = 'mixed'
+      },
+    }
+  }
+
+  function registerChildControlId(value: string, id: string | undefined) {
+    const nextRegisteredControlIds = new Map(registeredControlIdsRef.value)
+
+    if (id === undefined) {
+      nextRegisteredControlIds.delete(value)
+      registeredControlIdsRef.value = nextRegisteredControlIds
+      return
+    }
+
+    nextRegisteredControlIds.set(value, id)
+    registeredControlIdsRef.value = nextRegisteredControlIds
+  }
+
+  return {
+    id,
+    indeterminate,
+    disabledStatesRef,
+    registeredControlIdsRef,
+    getParentProps,
+    getChildProps,
+    registerChildControlId,
+  }
+}

package/src/collapsible/panel/useCollapsiblePanel.ts

@@ -3,6 +3,7 @@ import type { Ref } from 'vue'
 import type { CollapsibleChangeEventDetails } from '../collapsible.types'
 import type { AnimationType, Dimensions } from '../root/useCollapsibleRoot'
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { AccordionRootDataAttributes } from '../../accordion/root/AccordionRootDataAttributes'
 import { createChangeEventDetails } from '../../utils/createBaseUIEventDetails'
 import { REASONS } from '../../utils/reasons'
 import {
@@ -167,7 +168,7 @@ export function useCollapsiblePanel(
        * Setting both to `0px` will break layout.
        */
       if (
-        element.getAttribute('data-orientation') === 'horizontal' // TODO: type AccordionRootDataAttributes.orientation
+        element.getAttribute(AccordionRootDataAttributes.orientation) === 'horizontal'
         || panelStyles.transitionProperty.includes('width')
       ) {
         transitionDimensionRef.value = 'width'

package/src/collapsible/root/useCollapsibleRoot.ts

@@ -109,7 +109,9 @@ export function useCollapsibleRoot(
 
   const { value: open, setValue: setOpen } = useControllableState<boolean>({
     controlled: () => (isControlled.value ? openParam?.() : undefined),
-    default: defaultOpen,
+    default: () => defaultOpen,
+    name: 'CollapsibleRoot',
+    state: 'open',
   })
 
   const { mounted, setMounted, transitionStatus } = useTransitionStatus(

package/src/composite/composite.ts

@@ -25,6 +25,8 @@ export const ARROW_LEFT = 'ArrowLeft'
 export const ARROW_RIGHT = 'ArrowRight'
 export const HOME = 'Home'
 export const END = 'End'
+export const PAGE_UP = 'PageUp'
+export const PAGE_DOWN = 'PageDown'
 
 export const HORIZONTAL_KEYS = new Set([ARROW_LEFT, ARROW_RIGHT])
 export const HORIZONTAL_KEYS_WITH_EXTRA_KEYS = new Set([

package/src/composite/item/CompositeItem.vue

@@ -1,8 +1,11 @@
 <script setup lang="ts" generic="Metadata, State extends Record<string, any> = Record<string, any>">
 import type { StateAttributesMapping } from '../../utils/getStateAttributesProps'
 import type { BaseUIComponentProps } from '../../utils/types'
+import type { RenderRef } from '../../utils/useRenderElement'
 import { computed, useAttrs } from 'vue'
+import { mergeProps } from '../../merge-props/mergeProps'
 import { EMPTY_OBJECT } from '../../utils/constants'
+import { useMergedRefs } from '../../utils/useMergedRefs'
 import { useRenderElement } from '../../utils/useRenderElement'
 import { useCompositeItem } from './useCompositeItem'
 
@@ -13,7 +16,7 @@ export interface CompositeItemProps<Metadata, State extends Record<string, any>>
   as?: string | any
   style?: BaseUIComponentProps<State>['style']
   metadata?: Metadata
-  refs?: Array<HTMLElement | null>
+  refs?: RenderRef[]
   props?: Array<Record<string, any> | (() => Record<string, any>)>
   stateAttributesMapping?: StateAttributesMapping<State>
   state?: State
@@ -41,15 +44,11 @@ const externalProps = computed(() => {
   if (props.props) {
     props.props.forEach((prop) => {
       const p = typeof prop === 'function' ? prop() : prop
-      externalProps = { ...externalProps, ...p }
+      externalProps = mergeProps(externalProps, p)
     })
   }
 
-  return {
-    ...attrs,
-    ...externalProps,
-    ...compositeProps.value,
-  }
+  return mergeProps(attrs, externalProps, compositeProps.value)
 })
 
 const {
@@ -63,7 +62,7 @@ const {
   props: externalProps,
   stateAttributesMapping: props.stateAttributesMapping,
   defaultTagName: 'div',
-  ref: compositeRef,
+  ref: props.refs?.length ? useMergedRefs(...props.refs, compositeRef) : compositeRef,
 })
 </script>
 

package/src/composite/root/CompositeRoot.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { StateAttributesMapping } from '../../utils/getStateAttributesProps'
 import type { BaseUIComponentProps } from '../../utils/types'
 import type { Dimensions, ModifierKey } from '../composite'
 import type { CompositeMetadata } from '../list/CompositeList.vue'
@@ -10,6 +11,8 @@ import { compositeRootContextKey } from './CompositeRootContext'
 import { useCompositeRoot } from './useCompositeRoot'
 
 export interface CompositeRootProps extends BaseUIComponentProps<any> {
+  state?: Record<string, any>
+  stateAttributesMapping?: StateAttributesMapping<any>
   orientation?: 'horizontal' | 'vertical' | 'both'
   cols?: number
   loopFocus?: boolean
@@ -46,6 +49,13 @@ const props = withDefaults(defineProps<CompositeRootProps>(), {
 })
 
 const emit = defineEmits<CompositeRootEmits>()
+defineSlots<{
+  default?: (props: {
+    ref?: ((el: Element | null) => void)
+    props?: Record<string, any>
+    state: Record<string, any>
+  }) => any
+}>()
 const attrs = useAttrs()
 const direction = useDirection()
 
@@ -77,7 +87,7 @@ provide(
   }),
 )
 
-const state = computed(() => ({}))
+const state = computed(() => props.state ?? {})
 
 const {
   tag,
@@ -88,6 +98,7 @@ const {
   componentProps: props,
   state,
   props: computed(() => root.getRootProps(attrs)),
+  stateAttributesMapping: props.stateAttributesMapping,
   defaultTagName: 'div',
   ref: root.mergedRef,
 })

package/src/csp-provider/CSPContext.ts

@@ -0,0 +1,26 @@
+import type { InjectionKey, Ref } from 'vue'
+import { computed, inject } from 'vue'
+
+export interface CSPContextValue {
+  nonce: Readonly<Ref<string | undefined>>
+  disableStyleElements: Readonly<Ref<boolean>>
+}
+
+/**
+ * @internal
+ */
+export const cspContextKey = Symbol(
+  'CSPContext',
+) as InjectionKey<CSPContextValue>
+
+const DEFAULT_CSP_CONTEXT_VALUE: CSPContextValue = {
+  nonce: computed(() => undefined),
+  disableStyleElements: computed(() => false),
+}
+
+/**
+ * @internal
+ */
+export function useCSPContext(): CSPContextValue {
+  return inject(cspContextKey, DEFAULT_CSP_CONTEXT_VALUE)
+}