base-ui-vue 0.1.0

package/src/collapsible/root/useCollapsibleRoot.ts

@@ -0,0 +1,252 @@
+import type { Ref } from 'vue'
+import type { TransitionStatus } from '../../utils/useTransitionStatus'
+import type { CollapsibleChangeEventDetails, CollapsibleRootState } from '../collapsible.types'
+import { computed, ref, shallowRef, watch } from 'vue'
+import { createChangeEventDetails } from '../../utils/createBaseUIEventDetails'
+import { REASONS } from '../../utils/reasons'
+import { useAnimationsFinished } from '../../utils/useAnimationsFinished'
+import { useBaseUiId } from '../../utils/useBaseUiId'
+import { useControllableState } from '../../utils/useControllableState'
+import { useTransitionStatus } from '../../utils/useTransitionStatus'
+
+export type AnimationType = 'css-transition' | 'css-animation' | 'none' | null
+
+export interface Dimensions {
+  height: number | undefined
+  width: number | undefined
+}
+
+export interface UseCollapsibleRootReturnValue {
+  abortControllerRef: Ref<AbortController | null>
+  animationTypeRef: Ref<AnimationType>
+  disabled: Ref<boolean>
+  handleTrigger: (event: MouseEvent | KeyboardEvent) => void
+  /**
+   * The height of the panel.
+   */
+  height: Ref<number | undefined>
+  /**
+   * Whether the collapsible panel is currently mounted.
+   */
+  mounted: Ref<boolean>
+  /**
+   * Whether the collapsible panel is currently open.
+   */
+  open: Ref<boolean>
+  panelId: Ref<string | undefined>
+  panelRef: Ref<HTMLElement | null>
+  runOnceAnimationsFinish: (
+    fn: () => void,
+    signal?: AbortSignal | null,
+  ) => void
+  setDimensions: (dims: Dimensions) => void
+  setHiddenUntilFound: (next: boolean) => void
+  setKeepMounted: (next: boolean) => void
+  setMounted: (next: boolean) => void
+  setOpen: (next: boolean) => void
+  setPanelIdState: (id: string | undefined) => void
+  setVisible: (next: boolean) => void
+  transitionDimensionRef: Ref<'width' | 'height' | null>
+  transitionStatus: Ref<TransitionStatus>
+  /**
+   * The visible state of the panel used to determine the `[hidden]` attribute
+   * only when CSS keyframe animations are used.
+   */
+  visible: Ref<boolean>
+  /**
+   * The width of the panel.
+   */
+  width: Ref<number | undefined>
+
+  keepMounted: Ref<boolean>
+  hiddenUntilFound: Ref<boolean>
+  state: Ref<CollapsibleRootState>
+  onOpenChange: (open: boolean, details: CollapsibleChangeEventDetails) => void
+}
+
+export interface UseCollapsibleRootParameters {
+  /**
+   * Whether the collapsible panel is currently open.
+   *
+   * To render an uncontrolled collapsible, use the `defaultOpen` prop instead.
+   */
+  open?: () => boolean | undefined
+  isOpenControlled?: () => boolean
+  /**
+   * Whether the collapsible panel is initially open.
+   *
+   * To render a controlled collapsible, use the `open` prop instead.
+   * @default false
+   */
+  defaultOpen?: boolean
+  /**
+   * Event handler called when the panel is opened or closed.
+   */
+  onOpenChange: (open: boolean, details: CollapsibleChangeEventDetails) => void
+  /**
+   * Whether the component should ignore user interaction.
+   * @default false
+   */
+  disabled: () => boolean
+}
+
+export function useCollapsibleRoot(
+  parameters: UseCollapsibleRootParameters,
+): UseCollapsibleRootReturnValue {
+  const {
+    open: openParam,
+    defaultOpen = false,
+    onOpenChange,
+    disabled: disabledGetter,
+  } = parameters
+
+  const isControlled = computed(() => {
+    if (parameters.isOpenControlled) {
+      return parameters.isOpenControlled()
+    }
+    return openParam?.() !== undefined
+  })
+
+  const { value: open, setValue: setOpen } = useControllableState<boolean>({
+    controlled: () => (isControlled.value ? openParam?.() : undefined),
+    default: defaultOpen,
+  })
+
+  const { mounted, setMounted, transitionStatus } = useTransitionStatus(
+    open as Ref<boolean>,
+    true,
+    true,
+  )
+  const visible = ref(open.value)
+  const height = ref<number | undefined>(undefined)
+  const width = ref<number | undefined>(undefined)
+
+  const defaultPanelId = useBaseUiId()
+  const panelIdState = ref<string | undefined>(undefined)
+  const panelId = computed(() => panelIdState.value ?? defaultPanelId)
+
+  const hiddenUntilFound = ref(false)
+  const keepMounted = ref(false)
+
+  const abortControllerRef = shallowRef<AbortController | null>(null)
+  const animationTypeRef = ref<AnimationType>(null)
+  const transitionDimensionRef = ref<'width' | 'height' | null>(null)
+  const panelRef = ref<HTMLElement | null>(null)
+
+  const runOnceAnimationsFinish = useAnimationsFinished(panelRef, false)
+
+  const disabled = computed(() => disabledGetter())
+
+  function handleTrigger(event: MouseEvent | KeyboardEvent) {
+    if (disabled.value) {
+      return
+    }
+
+    const nextOpen = !open.value
+    const eventDetails = createChangeEventDetails(REASONS.triggerPress, event)
+
+    onOpenChange(nextOpen, eventDetails)
+
+    if (eventDetails.isCanceled) {
+      return
+    }
+
+    const panel = panelRef.value
+
+    if (nextOpen && !mounted.value) {
+      // Ensure first open always mounts panel immediately.
+      setMounted(true)
+    }
+
+    if (animationTypeRef.value === 'css-animation' && panel != null) {
+      panel.style.removeProperty('animation-name')
+    }
+
+    if (!hiddenUntilFound.value && !keepMounted.value) {
+      if (
+        animationTypeRef.value != null
+        && animationTypeRef.value !== 'css-animation'
+      ) {
+        if (!mounted.value && nextOpen) {
+          setMounted(true)
+        }
+      }
+
+      if (animationTypeRef.value === 'css-animation') {
+        if (!visible.value && nextOpen) {
+          visible.value = true
+        }
+        if (!mounted.value && nextOpen) {
+          setMounted(true)
+        }
+      }
+    }
+
+    setOpen(nextOpen)
+
+    if (animationTypeRef.value === 'none' && mounted.value && !nextOpen) {
+      setMounted(false)
+    }
+  }
+
+  // Unmount immediately for controlled mode with no animations
+  watch(
+    open,
+    (isOpen) => {
+      if (
+        isControlled.value
+        && animationTypeRef.value === 'none'
+        && !keepMounted.value
+        && !isOpen
+      ) {
+        setMounted(false)
+      }
+    },
+    { flush: 'sync' },
+  )
+
+  const state = computed<CollapsibleRootState>(() => ({
+    open: open.value,
+    disabled: disabled.value,
+    transitionStatus: transitionStatus.value,
+  }))
+
+  return {
+    open: open as Ref<boolean>,
+    disabled,
+    panelId,
+    state,
+    handleTrigger,
+    mounted,
+    setMounted,
+    transitionStatus,
+    height,
+    width,
+    setDimensions(dims: Dimensions) {
+      height.value = dims.height
+      width.value = dims.width
+    },
+    setOpen,
+    visible,
+    setVisible(next: boolean) {
+      visible.value = next
+    },
+    keepMounted,
+    setKeepMounted(next: boolean) {
+      keepMounted.value = next
+    },
+    hiddenUntilFound,
+    setHiddenUntilFound(next: boolean) {
+      hiddenUntilFound.value = next
+    },
+    setPanelIdState(id: string | undefined) {
+      panelIdState.value = id
+    },
+    animationTypeRef,
+    panelRef,
+    abortControllerRef,
+    transitionDimensionRef,
+    runOnceAnimationsFinish,
+    onOpenChange,
+  }
+}

package/src/collapsible/trigger/CollapsibleTrigger.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import type { StateAttributesMapping } from '../../utils/getStateAttributesProps'
+import type { CollapsibleRootState, CollapsibleTriggerProps } from '../collapsible.types'
+import { computed, useAttrs } from 'vue'
+import { useButton } from '../../use-button'
+import { triggerOpenStateMapping } from '../../utils/collapsibleOpenStateMapping'
+import { transitionStatusMapping } from '../../utils/stateAttributesMapping'
+import { useRenderElement } from '../../utils/useRenderElement'
+import { useCollapsibleRootContext } from '../root/CollapsibleRootContext'
+
+defineOptions({
+  name: 'CollapsibleTrigger',
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<CollapsibleTriggerProps>(), {
+  as: 'button',
+  nativeButton: true,
+})
+
+const triggerStateAttributesMapping: StateAttributesMapping<CollapsibleRootState> = {
+  ...triggerOpenStateMapping,
+  ...transitionStatusMapping,
+}
+
+const attrs = useAttrs()
+
+const ctx = useCollapsibleRootContext()
+
+const disabled = computed(() => props.disabled ?? ctx.disabled.value)
+
+const { getButtonProps, buttonRef } = useButton({
+  disabled: () => disabled.value,
+  focusableWhenDisabled: () => true,
+  native: () => props.nativeButton ?? true,
+})
+
+const {
+  tag,
+  mergedProps,
+  renderless,
+  ref: renderRef,
+} = useRenderElement({
+  componentProps: props,
+  state: ctx.state,
+  props: computed(() => getButtonProps({
+    ...attrs as Record<string, any>,
+    'aria-controls': ctx.open.value ? ctx.panelId.value : undefined,
+    'aria-expanded': ctx.open.value,
+    'onClick': ctx.handleTrigger,
+  })),
+  stateAttributesMapping: triggerStateAttributesMapping,
+  defaultTagName: 'button',
+  ref: buttonRef,
+})
+</script>
+
+<template>
+  <slot v-if="renderless" :ref="renderRef" :props="mergedProps" :state="ctx.state" />
+  <component :is="tag" v-else :ref="renderRef" v-bind="mergedProps">
+    <slot :state="ctx.state" />
+  </component>
+</template>

package/src/collapsible/trigger/CollapsibleTriggerDataAttributes.ts

@@ -0,0 +1,6 @@
+export enum CollapsibleTriggerDataAttributes {
+  /**
+   * Present when the collapsible panel is open.
+   */
+  panelOpen = 'data-panel-open',
+}

package/src/composite/composite.ts

@@ -0,0 +1,232 @@
+import type { TextDirection } from '../direction-provider/DirectionContext'
+import { isHTMLElement } from '@floating-ui/utils/dom'
+
+export {
+  createGridCellMap,
+  findNonDisabledListIndex,
+  getGridCellIndexOfCorner,
+  getGridCellIndices,
+  getGridNavigatedIndex,
+  getMaxListIndex,
+  getMinListIndex,
+  isIndexOutOfListBounds,
+  isListIndexDisabled,
+  stopEvent,
+} from '../floating-ui-vue/utils'
+
+export interface Dimensions {
+  width: number
+  height: number
+}
+
+export const ARROW_UP = 'ArrowUp'
+export const ARROW_DOWN = 'ArrowDown'
+export const ARROW_LEFT = 'ArrowLeft'
+export const ARROW_RIGHT = 'ArrowRight'
+export const HOME = 'Home'
+export const END = 'End'
+
+export const HORIZONTAL_KEYS = new Set([ARROW_LEFT, ARROW_RIGHT])
+export const HORIZONTAL_KEYS_WITH_EXTRA_KEYS = new Set([
+  ARROW_LEFT,
+  ARROW_RIGHT,
+  HOME,
+  END,
+])
+export const VERTICAL_KEYS = new Set([ARROW_UP, ARROW_DOWN])
+export const VERTICAL_KEYS_WITH_EXTRA_KEYS = new Set([
+  ARROW_UP,
+  ARROW_DOWN,
+  HOME,
+  END,
+])
+export const ARROW_KEYS = new Set([...HORIZONTAL_KEYS, ...VERTICAL_KEYS])
+export const ALL_KEYS = new Set([...ARROW_KEYS, HOME, END])
+export const COMPOSITE_KEYS = new Set([
+  ARROW_UP,
+  ARROW_DOWN,
+  ARROW_LEFT,
+  ARROW_RIGHT,
+  HOME,
+  END,
+])
+
+export const SHIFT = 'Shift' as const
+export const CONTROL = 'Control' as const
+export const ALT = 'Alt' as const
+export const META = 'Meta' as const
+export const MODIFIER_KEYS = new Set([SHIFT, CONTROL, ALT, META] as const)
+export type ModifierKey
+  = typeof MODIFIER_KEYS extends Set<infer Keys> ? Keys : never
+
+function isInputElement(element: EventTarget): element is HTMLInputElement {
+  return isHTMLElement(element) && element.tagName === 'INPUT'
+}
+
+export function isNativeInput(
+  element: EventTarget,
+): element is HTMLElement & (HTMLInputElement | HTMLTextAreaElement) {
+  if (isInputElement(element) && element.selectionStart != null) {
+    return true
+  }
+  if (isHTMLElement(element) && element.tagName === 'TEXTAREA') {
+    return true
+  }
+  return false
+}
+
+export function scrollIntoViewIfNeeded(
+  scrollContainer: HTMLElement | null,
+  element: HTMLElement | null,
+  direction: TextDirection,
+  orientation: 'horizontal' | 'vertical' | 'both',
+) {
+  if (!scrollContainer || !element || !element.scrollTo) {
+    return
+  }
+
+  let targetX = scrollContainer.scrollLeft
+  let targetY = scrollContainer.scrollTop
+
+  const isOverflowingX
+    = scrollContainer.clientWidth < scrollContainer.scrollWidth
+  const isOverflowingY
+    = scrollContainer.clientHeight < scrollContainer.scrollHeight
+
+  if (isOverflowingX && orientation !== 'vertical') {
+    const elementOffsetLeft = getOffset(scrollContainer, element, 'left')
+    const containerStyles = getStyles(scrollContainer)
+    const elementStyles = getStyles(element)
+
+    if (direction === 'ltr') {
+      if (
+        elementOffsetLeft
+        + element.offsetWidth
+        + elementStyles.scrollMarginRight
+        > scrollContainer.scrollLeft
+        + scrollContainer.clientWidth
+        - containerStyles.scrollPaddingRight
+      ) {
+        // overflow to the right, scroll to align right edges
+        targetX
+          = elementOffsetLeft
+            + element.offsetWidth
+            + elementStyles.scrollMarginRight
+            - scrollContainer.clientWidth
+            + containerStyles.scrollPaddingRight
+      }
+      else if (
+        elementOffsetLeft - elementStyles.scrollMarginLeft
+        < scrollContainer.scrollLeft + containerStyles.scrollPaddingLeft
+      ) {
+        // overflow to the left, scroll to align left edges
+        targetX
+          = elementOffsetLeft
+            - elementStyles.scrollMarginLeft
+            - containerStyles.scrollPaddingLeft
+      }
+    }
+
+    if (direction === 'rtl') {
+      if (
+        elementOffsetLeft - elementStyles.scrollMarginRight
+        < scrollContainer.scrollLeft + containerStyles.scrollPaddingLeft
+      ) {
+        // overflow to the left, scroll to align left edges
+        targetX
+          = elementOffsetLeft
+            - elementStyles.scrollMarginLeft
+            - containerStyles.scrollPaddingLeft
+      }
+      else if (
+        elementOffsetLeft
+        + element.offsetWidth
+        + elementStyles.scrollMarginRight
+        > scrollContainer.scrollLeft
+        + scrollContainer.clientWidth
+        - containerStyles.scrollPaddingRight
+      ) {
+        // overflow to the right, scroll to align right edges
+        targetX
+          = elementOffsetLeft
+            + element.offsetWidth
+            + elementStyles.scrollMarginRight
+            - scrollContainer.clientWidth
+            + containerStyles.scrollPaddingRight
+      }
+    }
+  }
+
+  if (isOverflowingY && orientation !== 'horizontal') {
+    const elementOffsetTop = getOffset(scrollContainer, element, 'top')
+    const containerStyles = getStyles(scrollContainer)
+    const elementStyles = getStyles(element)
+
+    if (
+      elementOffsetTop - elementStyles.scrollMarginTop
+      < scrollContainer.scrollTop + containerStyles.scrollPaddingTop
+    ) {
+      // overflow upwards, align top edges
+      targetY
+        = elementOffsetTop
+          - elementStyles.scrollMarginTop
+          - containerStyles.scrollPaddingTop
+    }
+    else if (
+      elementOffsetTop
+      + element.offsetHeight
+      + elementStyles.scrollMarginBottom
+      > scrollContainer.scrollTop
+      + scrollContainer.clientHeight
+      - containerStyles.scrollPaddingBottom
+    ) {
+      // overflow downwards, align bottom edges
+      targetY
+        = elementOffsetTop
+          + element.offsetHeight
+          + elementStyles.scrollMarginBottom
+          - scrollContainer.clientHeight
+          + containerStyles.scrollPaddingBottom
+    }
+  }
+
+  scrollContainer.scrollTo({
+    left: targetX,
+    top: targetY,
+    behavior: 'auto',
+  })
+}
+
+function getOffset(
+  ancestor: HTMLElement,
+  element: HTMLElement,
+  side: 'left' | 'top',
+) {
+  const propName = side === 'left' ? 'offsetLeft' : 'offsetTop'
+
+  let result = 0
+
+  while (element.offsetParent) {
+    result += element[propName as keyof HTMLElement] as number
+    if (element.offsetParent === ancestor) {
+      break
+    }
+    element = element.offsetParent as HTMLElement
+  }
+
+  return result
+}
+
+function getStyles(element: HTMLElement) {
+  const styles = getComputedStyle(element)
+  return {
+    scrollMarginTop: Number.parseFloat(styles.scrollMarginTop) || 0,
+    scrollMarginRight: Number.parseFloat(styles.scrollMarginRight) || 0,
+    scrollMarginBottom: Number.parseFloat(styles.scrollMarginBottom) || 0,
+    scrollMarginLeft: Number.parseFloat(styles.scrollMarginLeft) || 0,
+    scrollPaddingTop: Number.parseFloat(styles.scrollPaddingTop) || 0,
+    scrollPaddingRight: Number.parseFloat(styles.scrollPaddingRight) || 0,
+    scrollPaddingBottom: Number.parseFloat(styles.scrollPaddingBottom) || 0,
+    scrollPaddingLeft: Number.parseFloat(styles.scrollPaddingLeft) || 0,
+  }
+}

package/src/composite/constants.ts

@@ -0,0 +1 @@
+export const ACTIVE_COMPOSITE_ITEM = 'data-composite-item-active'

package/src/composite/item/CompositeItem.vue

@@ -0,0 +1,75 @@
+<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 { computed, useAttrs } from 'vue'
+import { EMPTY_OBJECT } from '../../utils/constants'
+import { useRenderElement } from '../../utils/useRenderElement'
+import { useCompositeItem } from './useCompositeItem'
+
+export interface CompositeItemProps<Metadata, State extends Record<string, any>> extends Pick<
+  BaseUIComponentProps<State>,
+  'class'
+> {
+  as?: string | any
+  style?: BaseUIComponentProps<State>['style']
+  metadata?: Metadata
+  refs?: Array<HTMLElement | null>
+  props?: Array<Record<string, any> | (() => Record<string, any>)>
+  stateAttributesMapping?: StateAttributesMapping<State>
+  state?: State
+}
+
+defineOptions({
+  name: 'BaseUICompositeItem',
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<CompositeItemProps<Metadata, State>>(), {
+  as: 'div',
+  state: () => EMPTY_OBJECT as State,
+})
+
+const attrs = useAttrs()
+
+const { compositeProps, compositeRef } = useCompositeItem({
+  metadata: () => props.metadata,
+})
+
+const externalProps = computed(() => {
+  let externalProps = {}
+
+  if (props.props) {
+    props.props.forEach((prop) => {
+      const p = typeof prop === 'function' ? prop() : prop
+      externalProps = { ...externalProps, ...p }
+    })
+  }
+
+  return {
+    ...attrs,
+    ...externalProps,
+    ...compositeProps.value,
+  }
+})
+
+const {
+  tag,
+  mergedProps,
+  renderless,
+  ref: renderRef,
+} = useRenderElement({
+  componentProps: props,
+  state: computed(() => props.state),
+  props: externalProps,
+  stateAttributesMapping: props.stateAttributesMapping,
+  defaultTagName: 'div',
+  ref: compositeRef,
+})
+</script>
+
+<template>
+  <slot v-if="renderless" :ref="renderRef" :props="mergedProps" :state="props.state" />
+  <component :is="tag" v-else :ref="renderRef" v-bind="mergedProps">
+    <slot :state="props.state" />
+  </component>
+</template>

package/src/composite/item/useCompositeItem.ts

@@ -0,0 +1,63 @@
+import type { HTMLProps } from '../../utils/types'
+import type { UseCompositeListItemParameters } from '../list/useCompositeListItem'
+import { computed, ref, watch } from 'vue'
+import { useMergedRefs } from '../../utils/useMergedRefs'
+import { useCompositeListItem } from '../list/useCompositeListItem'
+import { useCompositeRootContext } from '../root/CompositeRootContext'
+
+export interface UseCompositeItemParameters<Metadata> extends Pick<
+  UseCompositeListItemParameters<Metadata>,
+  'metadata' | 'indexGuessBehavior'
+> {}
+
+export function useCompositeItem<Metadata>(
+  params: UseCompositeItemParameters<Metadata> = {},
+) {
+  const context = useCompositeRootContext()
+
+  const { ref: listItemRef, index } = useCompositeListItem(params)
+
+  const isHighlighted = computed(
+    () => context.highlightedIndex === index.value,
+  )
+
+  const itemRef = ref<HTMLElement | null>(null)
+  const mergedRef = useMergedRefs(listItemRef, itemRef)
+
+  // When the index changes from -1 to a valid value, if this item
+  // currently has DOM focus, update the highlighted index.
+  // This handles the case where focus() is called before items are registered.
+  watch(index, (newIndex, oldIndex) => {
+    if (oldIndex === -1 && newIndex !== -1 && itemRef.value) {
+      if (document.activeElement === itemRef.value) {
+        context.onHighlightedIndexChange(newIndex)
+      }
+    }
+  })
+
+  const compositeProps = computed<HTMLProps>(() => ({
+    tabindex: isHighlighted.value ? 0 : -1,
+    onFocus() {
+      context.onHighlightedIndexChange(index.value)
+    },
+    onMousemove() {
+      const item = itemRef.value
+      if (!context.highlightItemOnHover || !item) {
+        return
+      }
+
+      const disabled
+        = item.hasAttribute('disabled')
+          || item.getAttribute('aria-disabled') === 'true'
+      if (!isHighlighted.value && !disabled) {
+        item.focus()
+      }
+    },
+  }))
+
+  return {
+    compositeProps,
+    compositeRef: mergedRef,
+    index,
+  }
+}