base-ui-vue 0.1.0

package/src/composite/root/useCompositeRoot.ts

@@ -0,0 +1,418 @@
+import type { Ref } from 'vue'
+import type { TextDirection } from '../../direction-provider/DirectionContext'
+import type { HTMLProps } from '../../types'
+import type { Dimensions, ModifierKey } from '../composite'
+import type { CompositeMetadata } from '../list/CompositeList.vue'
+import { computed, ref } from 'vue'
+import { isElementDisabled } from '../../utils/isElementDisabled'
+import { useMergedRefs } from '../../utils/useMergedRefs'
+import {
+  ALL_KEYS,
+  ARROW_DOWN,
+  ARROW_KEYS,
+  ARROW_LEFT,
+  ARROW_RIGHT,
+  ARROW_UP,
+  createGridCellMap,
+  END,
+  findNonDisabledListIndex,
+  getGridCellIndexOfCorner,
+  getGridCellIndices,
+  getGridNavigatedIndex,
+  getMaxListIndex,
+  getMinListIndex,
+  HOME,
+  HORIZONTAL_KEYS,
+  HORIZONTAL_KEYS_WITH_EXTRA_KEYS,
+  isIndexOutOfListBounds,
+  isListIndexDisabled,
+  isNativeInput,
+  MODIFIER_KEYS,
+  scrollIntoViewIfNeeded,
+  VERTICAL_KEYS,
+  VERTICAL_KEYS_WITH_EXTRA_KEYS,
+} from '../composite'
+import { ACTIVE_COMPOSITE_ITEM } from '../constants'
+
+export interface UseCompositeRootParameters {
+  orientation?: () => 'horizontal' | 'vertical' | 'both' | undefined
+  cols?: () => number | undefined
+  loopFocus?: () => boolean | undefined
+  highlightedIndex?: () => number | undefined
+  defaultHighlightedIndex?: () => number | undefined
+  onHighlightedIndexChange?: (index: number) => void
+  dense?: () => boolean | undefined
+  direction: () => TextDirection
+  itemSizes?: () => Array<Dimensions> | undefined
+  rootRef?: Ref<HTMLElement | null>
+  /**
+   * When `true`, pressing the Home key moves focus to the first item,
+   * and pressing the End key moves focus to the last item.
+   * @default false
+   */
+  enableHomeAndEndKeys?: () => boolean | undefined
+  /**
+   * When `true`, keypress events on Composite's navigation keys
+   * be stopped with event.stopPropagation().
+   * @default false
+   */
+  stopEventPropagation?: () => boolean | undefined
+  /**
+   * Array of item indices to be considered disabled.
+   * Used for composite items that are focusable when disabled.
+   */
+  disabledIndices?: () => number[] | undefined
+  /**
+   * Array of [modifier key values](https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values#modifier_keys) that should allow normal keyboard actions
+   * when pressed. By default, all modifier keys prevent normal actions.
+   * @default []
+   */
+  modifierKeys?: () => ModifierKey[] | undefined
+}
+
+const EMPTY_ARRAY: never[] = []
+
+export function useCompositeRoot(params: UseCompositeRootParameters) {
+  const orientation = computed(() => params.orientation?.() ?? 'both')
+  const cols = computed(() => params.cols?.() ?? 1)
+  const loopFocus = computed(() => params.loopFocus?.() ?? true)
+  const dense = computed(() => params.dense?.() ?? false)
+  const itemSizes = computed(() => params.itemSizes?.())
+  const enableHomeAndEndKeys = computed(
+    () => params.enableHomeAndEndKeys?.() ?? false,
+  )
+  const stopEventPropagation = computed(
+    () => params.stopEventPropagation?.() ?? false,
+  )
+  const disabledIndices = computed(
+    () => params.disabledIndices?.() ?? EMPTY_ARRAY,
+  )
+  const modifierKeys = computed(
+    () => params.modifierKeys?.() ?? (EMPTY_ARRAY as ModifierKey[]),
+  )
+
+  const externalHighlightedIndex = computed(() => params.highlightedIndex?.())
+  const externalSetHighlightedIndex = params.onHighlightedIndexChange
+
+  const internalHighlightedIndex = ref(params.defaultHighlightedIndex?.() ?? 0)
+  const isGrid = computed(() => cols.value > 1)
+
+  const rootRef = ref<HTMLElement | null>(null)
+  const mergedRef = useMergedRefs(rootRef, params.rootRef)
+  const elementsRef = ref<Array<HTMLElement | null>>([])
+  let hasSetDefaultIndex = false
+
+  const highlightedIndex = computed(
+    () => externalHighlightedIndex.value ?? internalHighlightedIndex.value,
+  )
+
+  function onHighlightedIndexChange(
+    index: number,
+    shouldScrollIntoView = false,
+  ) {
+    if (externalHighlightedIndex.value !== undefined) {
+      if (externalSetHighlightedIndex) {
+        externalSetHighlightedIndex(index)
+      }
+    }
+    else {
+      internalHighlightedIndex.value = index
+      if (externalSetHighlightedIndex) {
+        externalSetHighlightedIndex(index)
+      }
+    }
+    if (shouldScrollIntoView) {
+      const newActiveItem = elementsRef.value[index]
+      scrollIntoViewIfNeeded(
+        rootRef.value,
+        newActiveItem,
+        params.direction(),
+        orientation.value,
+      )
+    }
+  }
+
+  function onMapChange(map: Map<Element, CompositeMetadata<any>>) {
+    if (map.size === 0 || hasSetDefaultIndex) {
+      return
+    }
+    hasSetDefaultIndex = true
+    const sortedElements = Array.from(map.keys())
+    const activeItem = (sortedElements.find(compositeElement =>
+      compositeElement?.hasAttribute(ACTIVE_COMPOSITE_ITEM),
+    ) ?? null) as HTMLElement | null
+    // Set the default highlighted index of an arbitrary composite item.
+    const activeIndex = activeItem ? sortedElements.indexOf(activeItem) : -1
+
+    if (activeIndex !== -1) {
+      onHighlightedIndexChange(activeIndex)
+    }
+
+    scrollIntoViewIfNeeded(
+      rootRef.value,
+      activeItem,
+      params.direction(),
+      orientation.value,
+    )
+  }
+
+  function handleFocus(event: FocusEvent) {
+    const element = rootRef.value
+    if (!element || !isNativeInput(event.target as EventTarget)) {
+      return
+    }
+    const target = event.target as HTMLInputElement
+    target.setSelectionRange(0, target.value.length ?? 0)
+  }
+
+  function handleKeydown(event: KeyboardEvent) {
+    const RELEVANT_KEYS = enableHomeAndEndKeys.value ? ALL_KEYS : ARROW_KEYS
+    if (!RELEVANT_KEYS.has(event.key)) {
+      return
+    }
+
+    if (isModifierKeySet(event, modifierKeys.value)) {
+      return
+    }
+
+    const element = rootRef.value
+    if (!element) {
+      return
+    }
+    const isRtl = params.direction() === 'rtl'
+
+    const horizontalForwardKey = isRtl ? ARROW_LEFT : ARROW_RIGHT
+    const forwardKey = {
+      horizontal: horizontalForwardKey,
+      vertical: ARROW_DOWN,
+      both: horizontalForwardKey,
+    }[orientation.value]
+
+    const horizontalBackwardKey = isRtl ? ARROW_RIGHT : ARROW_LEFT
+    const backwardKey = {
+      horizontal: horizontalBackwardKey,
+      vertical: ARROW_UP,
+      both: horizontalBackwardKey,
+    }[orientation.value]
+
+    if (
+      isNativeInput(event.target as EventTarget)
+      && !isElementDisabled(event.target as HTMLElement)
+    ) {
+      const target = event.target as HTMLInputElement
+      const selectionStart = target.selectionStart
+      const selectionEnd = target.selectionEnd
+      const textContent = target.value ?? ''
+      // return to native textbox behavior when
+      // 1 - Shift is held to make a text selection, or if there already is a text selection
+      if (
+        selectionStart == null
+        || event.shiftKey
+        || selectionStart !== selectionEnd
+      ) {
+        return
+      }
+      // 2 - arrow-ing forward and not in the last position of the text
+      if (event.key !== backwardKey && selectionStart < textContent.length) {
+        return
+      }
+      // 3 - arrow-ing backward and not in the first position of the text
+      if (event.key !== forwardKey && selectionStart > 0) {
+        return
+      }
+    }
+
+    let nextIndex = highlightedIndex.value
+    const minIndex = getMinListIndex(elementsRef, disabledIndices.value)
+    const maxIndex = getMaxListIndex(elementsRef, disabledIndices.value)
+
+    if (isGrid.value) {
+      const sizes
+        = itemSizes.value
+          || Array.from({ length: elementsRef.value.length }, () => ({
+            width: 1,
+            height: 1,
+          }))
+      // To calculate movements on the grid, we use hypothetical cell indices
+      // as if every item was 1x1, then convert back to real indices.
+      const cellMap = createGridCellMap(sizes, cols.value, dense.value)
+      const minGridIndex = cellMap.findIndex(
+        index =>
+          index != null
+          && !isListIndexDisabled(elementsRef, index, disabledIndices.value),
+      )
+      // last enabled index
+      const maxGridIndex = cellMap.reduce(
+        (foundIndex: number, index, cellIndex) =>
+          index != null
+          && !isListIndexDisabled(elementsRef, index, disabledIndices.value)
+            ? cellIndex
+            : foundIndex,
+        -1,
+      )
+
+      nextIndex = cellMap[
+        getGridNavigatedIndex(elementsRef, {
+          event,
+          orientation: orientation.value,
+          loopFocus: loopFocus.value,
+          cols: cols.value,
+          // treat undefined (empty grid spaces) as disabled indices so we
+          // don't end up in them
+          disabledIndices: getGridCellIndices(
+            [
+              ...((disabledIndices.value.length > 0
+                ? disabledIndices.value
+                : undefined)
+              || elementsRef.value.map((_, index) =>
+                isListIndexDisabled(elementsRef, index) ? index : undefined,
+              )),
+              undefined,
+            ],
+            cellMap,
+          ),
+          minIndex: minGridIndex,
+          maxIndex: maxGridIndex,
+          prevIndex: getGridCellIndexOfCorner(
+            highlightedIndex.value > maxIndex
+              ? minIndex
+              : highlightedIndex.value,
+            sizes,
+            cellMap,
+            cols.value,
+            // use a corner matching the edge closest to the direction we're
+            // moving in so we don't end up in the same item. Prefer
+            // top/left over bottom/right.
+
+            event.key === ARROW_DOWN
+              ? 'bl'
+              : event.key === ARROW_RIGHT
+                ? 'tr'
+                : 'tl',
+          ),
+          rtl: isRtl,
+        })
+      ] as number // navigated cell will never be nullish
+    }
+
+    const forwardKeys = {
+      horizontal: [horizontalForwardKey],
+      vertical: [ARROW_DOWN],
+      both: [horizontalForwardKey, ARROW_DOWN],
+    }[orientation.value]
+
+    const backwardKeys = {
+      horizontal: [horizontalBackwardKey],
+      vertical: [ARROW_UP],
+      both: [horizontalBackwardKey, ARROW_UP],
+    }[orientation.value]
+
+    const preventedKeys = isGrid.value
+      ? RELEVANT_KEYS
+      : ({
+          horizontal: enableHomeAndEndKeys.value
+            ? HORIZONTAL_KEYS_WITH_EXTRA_KEYS
+            : HORIZONTAL_KEYS,
+          vertical: enableHomeAndEndKeys.value
+            ? VERTICAL_KEYS_WITH_EXTRA_KEYS
+            : VERTICAL_KEYS,
+          both: RELEVANT_KEYS,
+        }[orientation.value] as typeof RELEVANT_KEYS)
+
+    if (enableHomeAndEndKeys.value) {
+      if (event.key === HOME) {
+        nextIndex = minIndex
+      }
+      else if (event.key === END) {
+        nextIndex = maxIndex
+      }
+    }
+
+    if (
+      nextIndex === highlightedIndex.value
+      && (forwardKeys.includes(event.key) || backwardKeys.includes(event.key))
+    ) {
+      if (
+        loopFocus.value
+        && nextIndex === maxIndex
+        && forwardKeys.includes(event.key)
+      ) {
+        nextIndex = minIndex
+      }
+      else if (
+        loopFocus.value
+        && nextIndex === minIndex
+        && backwardKeys.includes(event.key)
+      ) {
+        nextIndex = maxIndex
+      }
+      else {
+        nextIndex = findNonDisabledListIndex(elementsRef as any, {
+          startingIndex: nextIndex,
+          decrement: backwardKeys.includes(event.key),
+          disabledIndices: disabledIndices.value,
+        })
+      }
+    }
+
+    if (
+      nextIndex !== highlightedIndex.value
+      && !isIndexOutOfListBounds(elementsRef, nextIndex)
+    ) {
+      if (stopEventPropagation.value) {
+        event.stopPropagation()
+      }
+
+      if (preventedKeys.has(event.key)) {
+        event.preventDefault()
+      }
+      onHighlightedIndexChange(nextIndex, true)
+
+      // Wait for FocusManager `returnFocus` to execute.
+      queueMicrotask(() => {
+        elementsRef.value[nextIndex]?.focus()
+      })
+    }
+  }
+
+  return {
+    getRootProps: (externalProps: Record<string, any> = {}): HTMLProps => ({
+      ...externalProps,
+      'aria-orientation':
+        orientation.value === 'both' ? undefined : orientation.value,
+      onFocus(event: FocusEvent) {
+        externalProps.onFocus?.(event)
+        if (!event.defaultPrevented)
+          handleFocus(event)
+      },
+      onKeydown(event: KeyboardEvent) {
+        externalProps.onKeydown?.(event)
+        if (!event.defaultPrevented)
+          handleKeydown(event)
+      },
+    }),
+    rootRef,
+    mergedRef,
+    highlightedIndex,
+    onHighlightedIndexChange,
+    elementsRef,
+    disabledIndices,
+    onMapChange,
+    relayKeyboardEvent: handleKeydown,
+  }
+}
+
+function isModifierKeySet(
+  event: KeyboardEvent,
+  ignoredModifierKeys: ModifierKey[],
+) {
+  for (const key of MODIFIER_KEYS.values()) {
+    if (ignoredModifierKeys.includes(key as any)) {
+      continue
+    }
+    if (event.getModifierState(key)) {
+      return true
+    }
+  }
+  return false
+}

package/src/direction-provider/DirectionContext.ts

@@ -0,0 +1,29 @@
+import type { ComputedRef, InjectionKey, Ref } from 'vue'
+import { computed, inject } from 'vue'
+
+export type TextDirection = 'ltr' | 'rtl'
+
+export interface DirectionContextValue {
+  direction: Ref<TextDirection>
+}
+
+/**
+ * @internal
+ */
+export const directionContextKey = Symbol(
+  'DirectionContext',
+) as InjectionKey<DirectionContextValue>
+
+export interface DirectionProviderProps {
+  /**
+   * The reading direction of the text
+   * @default 'ltr'
+   */
+  direction?: TextDirection
+}
+
+export function useDirection(): ComputedRef<TextDirection> {
+  const context = inject(directionContextKey, undefined)
+
+  return computed(() => context?.direction.value ?? 'ltr')
+}

package/src/direction-provider/DirectionProvider.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { DirectionProviderProps } from './DirectionContext'
+import { provide, toRef } from 'vue'
+import {
+  directionContextKey,
+
+} from './DirectionContext'
+
+/**
+ * Enables RTL behavior for Base UI Vue components.
+ *
+ * Documentation: [Base UI Vue Direction Provider](https://base-ui-vue.com/utils/direction-provider)
+ */
+defineOptions({
+  name: 'DirectionProvider',
+})
+
+const props = withDefaults(defineProps<DirectionProviderProps>(), {
+  direction: 'ltr',
+})
+
+const contextValue = {
+  direction: toRef(props, 'direction'),
+}
+
+provide(directionContextKey, contextValue)
+</script>
+
+<template>
+  <slot />
+</template>

package/src/direction-provider/index.ts

@@ -0,0 +1,8 @@
+export { useDirection } from './DirectionContext'
+
+export type {
+  DirectionProviderProps,
+  TextDirection,
+} from './DirectionContext'
+
+export { default as DirectionProvider } from './DirectionProvider.vue'

package/src/field/control/FieldControl.vue

@@ -0,0 +1,211 @@
+<script setup lang="ts">
+import type { BaseUIComponentProps } from '../../utils/types'
+import type { FieldRootState } from '../root/FieldRoot.vue'
+import { computed, ref, shallowRef, useAttrs, watchEffect } from 'vue'
+import { useLabelableContext } from '../../labelable-provider/LabelableContext'
+import { useAriaLabelledBy } from '../../labelable-provider/useAriaLabelledBy'
+import { useLabelableId } from '../../labelable-provider/useLabelableId'
+import { mergeProps } from '../../merge-props/mergeProps'
+import { useRenderElement } from '../../utils/useRenderElement'
+import { useFieldRootContext } from '../root/FieldRootContext'
+import { useField } from '../useField'
+import { fieldValidityMapping } from '../utils/constants'
+
+export type FieldControlState = FieldRootState
+
+export interface FieldControlProps extends BaseUIComponentProps<FieldControlState> {
+  id?: string
+  name?: string
+  disabled?: boolean
+  value?: string
+  defaultValue?: string
+  autofocus?: boolean
+  type?: string
+  required?: boolean
+  pattern?: string
+  minlength?: number
+  maxlength?: number
+  min?: string | number
+  max?: string | number
+  step?: string | number
+  placeholder?: string
+}
+
+defineOptions({
+  name: 'FieldControl',
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<FieldControlProps>(), {
+  as: 'input',
+  disabled: false,
+  autofocus: false,
+})
+
+const emit = defineEmits<{
+  valueChange: [value: string, event: Event]
+}>()
+
+const attrs = useAttrs()
+const attrsObject = attrs as Record<string, any>
+
+const fieldContext = useFieldRootContext()
+
+const {
+  state: fieldState,
+  name: fieldName,
+  disabled: fieldDisabled,
+  setTouched,
+  setDirty,
+  markedDirtyRef,
+  validityData,
+  setFocused,
+  setFilled,
+  validationMode,
+  validation,
+} = fieldContext
+
+const disabled = computed(() => fieldDisabled.value || props.disabled)
+const name = computed(() => fieldName.value ?? props.name)
+
+const state = computed<FieldControlState>(() => ({
+  ...fieldState.value,
+  disabled: disabled.value,
+}))
+
+const controlId = useLabelableId({ id: props.id })
+
+const isControlled = computed(() => props.value !== undefined)
+const internalValue = shallowRef(props.defaultValue ?? '')
+
+const currentValue = computed(() => {
+  if (isControlled.value)
+    return props.value!
+  return internalValue.value
+})
+
+const inputElementRef = ref<HTMLElement | null>(null)
+
+const { labelId } = useLabelableContext()
+const ariaLabelledByAttr = computed(() => attrs['aria-labelledby'] as string | undefined)
+const ariaLabelledBy = useAriaLabelledBy({
+  ariaLabelledBy: ariaLabelledByAttr,
+  labelId,
+  labelSourceRef: inputElementRef,
+  enableFallback: true,
+  labelSourceId: controlId.value ?? undefined,
+})
+
+watchEffect(() => {
+  validation.setInputRef(inputElementRef.value as HTMLInputElement | null)
+})
+
+useField({
+  id: controlId,
+  name,
+  commit: (v: unknown) => validation.commit(v),
+  value: currentValue,
+  getValue: () => (inputElementRef.value as HTMLInputElement)?.value ?? internalValue.value,
+  controlRef: inputElementRef,
+})
+
+watchEffect(() => {
+  const el = inputElementRef.value as HTMLInputElement | null
+  if (!el)
+    return
+
+  if (el.value || (isControlled.value && props.value !== '')) {
+    setFilled(true)
+  }
+  else if (isControlled.value && props.value === '') {
+    setFilled(false)
+  }
+})
+
+function handleInput(event: Event) {
+  const target = event.target as HTMLInputElement
+  internalValue.value = target.value
+  emit('valueChange', target.value, event)
+  setDirty(target.value !== validityData.value.initialValue)
+  setFilled(target.value !== '')
+}
+
+function handleInputCombined(event: Event) {
+  handleInput(event)
+  const inputValidationProps = validation.getInputValidationProps()
+  inputValidationProps.onInput?.(event)
+}
+
+function handleFocus() {
+  setFocused(true)
+}
+
+function handleBlur(event: Event) {
+  const target = event.target as HTMLInputElement
+  setTouched(true)
+  setFocused(false)
+
+  if (validationMode.value === 'onBlur') {
+    validation.commit(target.value)
+  }
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  const target = event.target as HTMLInputElement
+  if (target.tagName === 'INPUT' && event.key === 'Enter') {
+    setTouched(true)
+    markedDirtyRef.value = true
+    validation.commit(target.value)
+  }
+}
+
+const controlProps = computed(() => mergeProps(
+  attrsObject,
+  validation.getInputValidationProps(),
+  {
+    'id': controlId.value,
+    'disabled': disabled.value,
+    'name': name.value,
+    'aria-labelledby': ariaLabelledBy.value,
+    'autofocus': props.autofocus || undefined,
+    'type': props.type,
+    'required': props.required,
+    'pattern': props.pattern,
+    'minlength': props.minlength,
+    'maxlength': props.maxlength,
+    'min': props.min,
+    'max': props.max,
+    'step': props.step,
+    'placeholder': props.placeholder,
+    'value': isControlled.value ? props.value : internalValue.value,
+    'onInput': handleInputCombined,
+    'onFocus': handleFocus,
+    'onBlur': handleBlur,
+    'onKeydown': handleKeydown,
+  },
+))
+
+const {
+  tag,
+  mergedProps,
+  renderless,
+  ref: renderRef,
+} = useRenderElement({
+  componentProps: props,
+  state,
+  props: controlProps,
+  stateAttributesMapping: fieldValidityMapping,
+  defaultTagName: 'input',
+  ref: inputElementRef,
+})
+</script>
+
+<template>
+  <slot v-if="renderless" :ref="renderRef" :props="mergedProps" :state="state" />
+  <component
+    :is="tag"
+    v-else
+    :ref="renderRef"
+    v-bind="mergedProps"
+  />
+</template>