base-ui-vue 0.4.0 → 0.5.0

package/dist/rolldown-runtime.js

@@ -0,0 +1,36 @@
+//#region \0rolldown/runtime.js
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) {
+		__defProp(target, name, {
+			get: all[name],
+			enumerable: true
+		});
+	}
+	if (!no_symbols) {
+		__defProp(target, Symbol.toStringTag, { value: "Module" });
+	}
+	return target;
+};
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+			key = keys[i];
+			if (!__hasOwnProp.call(to, key) && key !== except) {
+				__defProp(to, key, {
+					get: ((k) => from[k]).bind(null, key),
+					enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+				});
+			}
+		}
+	}
+	return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+
+//#endregion
+export { __exportAll, __reExport };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "base-ui-vue",
   "type": "module",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Vue port of Base UI",
   "author": "vuepont",
   "license": "MIT",

package/src/floating-ui-vue/components/FloatingPortal.ts

@@ -0,0 +1,171 @@
+import type {
+  ComponentPublicInstance,
+  ComputedRef,
+  InjectionKey,
+  MaybeRefOrGetter,
+  Ref,
+  TeleportProps,
+} from 'vue'
+import type { BaseUIComponentProps } from '../../utils/types'
+import type {
+  RenderRef,
+  UseRenderElementComponentProps,
+  UseRenderElementReturn,
+} from '../../utils/useRenderElement'
+import { computed, inject, isRef, shallowRef, toValue } from 'vue'
+import { mergeProps } from '../../merge-props/mergeProps'
+import { EMPTY_OBJECT } from '../../utils/constants'
+import { useBaseUiId } from '../../utils/useBaseUiId'
+import { useMergedRefs } from '../../utils/useMergedRefs'
+import { useRenderElement } from '../../utils/useRenderElement'
+import { createAttribute } from '../utils/createAttribute'
+
+export interface FloatingPortalState {}
+
+export type FloatingPortalTarget = TeleportProps['to']
+
+export type FloatingPortalContainer = MaybeRefOrGetter<FloatingPortalTarget>
+
+export interface FloatingPortalProps<
+  State extends Record<string, any> = FloatingPortalState,
+> extends BaseUIComponentProps<State> {
+  /**
+   * A parent element to render the portal element into.
+   */
+  container?: FloatingPortalContainer
+}
+
+export interface FloatingPortal {}
+
+// eslint-disable-next-line ts/no-namespace
+export namespace FloatingPortal {
+  export type State = FloatingPortalState
+  export type Target = FloatingPortalTarget
+  export type Container = FloatingPortalContainer
+  export type Props<
+    State extends Record<string, any> = FloatingPortalState,
+  > = FloatingPortalProps<State>
+}
+
+export type FloatingPortalFocusManagerState = null | {
+  modal: boolean
+  open: boolean
+  onOpenChange: (
+    open: boolean,
+    data?: { reason?: string | undefined, event?: Event | undefined },
+  ) => void
+  domReference: Element | null
+  closeOnFocusOut: boolean
+}
+
+export interface FloatingPortalContext {
+  portalNode: Ref<HTMLElement | null>
+  setFocusManagerState: (
+    next:
+      | FloatingPortalFocusManagerState
+      | ((prev: FloatingPortalFocusManagerState) => FloatingPortalFocusManagerState),
+  ) => void
+  beforeInsideRef: Ref<HTMLSpanElement | null>
+  afterInsideRef: Ref<HTMLSpanElement | null>
+  beforeOutsideRef: Ref<HTMLSpanElement | null>
+  afterOutsideRef: Ref<HTMLSpanElement | null>
+}
+
+export const floatingPortalContextKey: InjectionKey<FloatingPortalContext>
+  = Symbol('FloatingPortalContext')
+
+export function usePortalContext() {
+  return inject(floatingPortalContextKey, null)
+}
+
+function resolvePortalTarget(
+  target: MaybeRefOrGetter<FloatingPortalTarget> | undefined,
+) {
+  if (target === undefined) {
+    return undefined
+  }
+
+  const resolvedTarget = toValue(target)
+
+  return isRef(resolvedTarget) ? resolvedTarget.value : resolvedTarget
+}
+
+export interface UseFloatingPortalNodeProps<
+  State extends Record<string, any> = FloatingPortalState,
+> {
+  ref?: RenderRef | undefined
+  container?: FloatingPortalContainer | undefined
+  to?: MaybeRefOrGetter<FloatingPortalTarget> | undefined
+  componentProps?: UseRenderElementComponentProps<State> | undefined
+  elementProps?: MaybeRefOrGetter<Record<string, any> | undefined>
+  state?: MaybeRefOrGetter<State | undefined>
+}
+
+export interface UseFloatingPortalNodeResult<
+  State extends Record<string, any> = FloatingPortalState,
+> extends UseRenderElementReturn<State> {
+  portalNode: Ref<HTMLElement | null>
+  portalTarget: ComputedRef<FloatingPortalTarget>
+  shouldRender: ComputedRef<boolean>
+}
+
+export function useFloatingPortalNode<
+  State extends Record<string, any> = FloatingPortalState,
+>(
+  props: UseFloatingPortalNodeProps<State> = {},
+): UseFloatingPortalNodeResult<State> {
+  const uniqueId = useBaseUiId()
+  const portalContext = usePortalContext()
+  const portalNode = shallowRef<HTMLElement | null>(null)
+  const portalAttribute = createAttribute('portal')
+
+  const state = computed(() =>
+    toValue(props.state) ?? (EMPTY_OBJECT as State),
+  )
+
+  const portalTarget = computed<FloatingPortalTarget>(() => {
+    const container = resolvePortalTarget(props.container)
+
+    if (container !== undefined) {
+      return container
+    }
+
+    const explicitTarget = resolvePortalTarget(props.to)
+
+    if (explicitTarget !== undefined) {
+      return explicitTarget
+    }
+
+    return portalContext?.portalNode.value ?? 'body'
+  })
+
+  const shouldRender = computed(() => uniqueId != null && portalTarget.value != null)
+
+  const portalProps = computed(() =>
+    mergeProps(
+      {
+        id: uniqueId,
+        [portalAttribute]: '',
+      },
+      toValue(props.elementProps),
+    ),
+  )
+
+  const renderElement = useRenderElement({
+    componentProps: props.componentProps ?? EMPTY_OBJECT,
+    state,
+    props: portalProps,
+    defaultTagName: 'div',
+    ref: useMergedRefs<HTMLElement | ComponentPublicInstance>(
+      portalNode,
+      props.ref,
+    ),
+  })
+
+  return {
+    ...renderElement,
+    portalNode,
+    portalTarget,
+    shouldRender,
+  }
+}

package/src/floating-ui-vue/components/FloatingPortal.vue

@@ -0,0 +1,259 @@
+<script lang="ts">
+import type { ComponentPublicInstance } from 'vue'
+import type {
+  FloatingPortalFocusManagerState,
+  FloatingPortal as FloatingPortalTypes,
+} from './FloatingPortal'
+</script>
+
+<script setup lang="ts">
+import {
+  computed,
+  provide,
+  shallowRef,
+  unref,
+  useAttrs,
+  watch,
+} from 'vue'
+import { addEventListener } from '../../utils/addEventListener'
+import { ownerVisuallyHidden } from '../../utils/constants'
+import { createChangeEventDetails } from '../../utils/createBaseUIEventDetails'
+import FocusGuard from '../../utils/FocusGuard.vue'
+import { mergeCleanups } from '../../utils/mergeCleanups'
+import { REASONS } from '../../utils/reasons'
+import {
+  disableFocusInside,
+  enableFocusInside,
+  getNextTabbable,
+  getPreviousTabbable,
+  isOutsideEvent,
+} from '../utils/tabbable'
+import {
+  floatingPortalContextKey,
+  useFloatingPortalNode,
+} from './FloatingPortal'
+
+export interface FloatingPortalState {}
+
+export interface FloatingPortalProps
+  extends FloatingPortalTypes.Props<FloatingPortalState> {
+  /**
+   * Vue Teleport target. Prefer `container` for React API parity.
+   */
+  to?: FloatingPortalTypes.Target
+  /**
+   * Whether to render focus guards around the portal.
+   */
+  renderGuards?: boolean
+  /**
+   * Disables Vue Teleport while preserving portal mounting behavior.
+   * @default false
+   */
+  disabled?: boolean
+}
+
+type FocusGuardTemplateRef
+  = | Element
+    | ComponentPublicInstance
+    | { element?: HTMLSpanElement | null }
+    | null
+
+defineOptions({
+  name: 'FloatingPortal',
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<FloatingPortalProps>(), {
+  as: 'div',
+  disabled: false,
+})
+
+const attrs = useAttrs()
+
+const state = computed<FloatingPortalState>(() => ({}))
+const focusManagerState = shallowRef<FloatingPortalFocusManagerState>(null)
+const focusInsideDisabled = shallowRef(false)
+
+const beforeOutsideRef = shallowRef<HTMLSpanElement | null>(null)
+const afterOutsideRef = shallowRef<HTMLSpanElement | null>(null)
+const beforeInsideRef = shallowRef<HTMLSpanElement | null>(null)
+const afterInsideRef = shallowRef<HTMLSpanElement | null>(null)
+
+const {
+  portalNode,
+  portalTarget,
+  shouldRender,
+  tag,
+  mergedProps,
+  renderless,
+  ref: renderRef,
+} = useFloatingPortalNode({
+  container: () => props.container,
+  to: () => props.to,
+  componentProps: props,
+  elementProps: computed(() => attrs),
+  state,
+})
+
+const shouldRenderGuards = computed(() => {
+  if (typeof props.renderGuards === 'boolean') {
+    return props.renderGuards
+  }
+
+  const manager = focusManagerState.value
+
+  return !!manager && !manager.modal && manager.open && !!portalNode.value
+})
+
+function setFocusManagerState(
+  next:
+    | FloatingPortalFocusManagerState
+    | ((prev: FloatingPortalFocusManagerState) => FloatingPortalFocusManagerState),
+) {
+  focusManagerState.value = typeof next === 'function'
+    ? next(focusManagerState.value)
+    : next
+}
+
+watch(
+  [portalNode, () => focusManagerState.value?.modal],
+  ([node, modal], _previous, onCleanup) => {
+    if (!node || modal) {
+      return
+    }
+
+    function onFocus(event: FocusEvent) {
+      if (!node || !event.relatedTarget || !isOutsideEvent(event)) {
+        return
+      }
+
+      if (event.type === 'focusin') {
+        if (focusInsideDisabled.value) {
+          enableFocusInside(node)
+          focusInsideDisabled.value = false
+        }
+      }
+      else {
+        disableFocusInside(node)
+        focusInsideDisabled.value = true
+      }
+    }
+
+    onCleanup(mergeCleanups(
+      addEventListener(node, 'focusin', onFocus, true),
+      addEventListener(node, 'focusout', onFocus, true),
+    ))
+  },
+  { immediate: true },
+)
+
+watch(
+  [portalNode, () => focusManagerState.value?.open],
+  ([node, open]) => {
+    if (!node || open !== true || !focusInsideDisabled.value) {
+      return
+    }
+
+    enableFocusInside(node)
+    focusInsideDisabled.value = false
+  },
+  { immediate: true, flush: 'post' },
+)
+
+provide(floatingPortalContextKey, {
+  beforeOutsideRef,
+  afterOutsideRef,
+  beforeInsideRef,
+  afterInsideRef,
+  portalNode,
+  setFocusManagerState,
+})
+
+function handleBeforeOutsideFocus(event: FocusEvent) {
+  if (portalNode.value && isOutsideEvent(event, portalNode.value)) {
+    beforeInsideRef.value?.focus()
+    return
+  }
+
+  const domReference = focusManagerState.value?.domReference ?? null
+  getPreviousTabbable(domReference)?.focus()
+}
+
+function handleAfterOutsideFocus(event: FocusEvent) {
+  if (portalNode.value && isOutsideEvent(event, portalNode.value)) {
+    afterInsideRef.value?.focus()
+    return
+  }
+
+  const manager = focusManagerState.value
+  const domReference = manager?.domReference ?? null
+
+  getNextTabbable(domReference)?.focus()
+
+  if (manager?.closeOnFocusOut) {
+    manager.onOpenChange(
+      false,
+      createChangeEventDetails(REASONS.focusOut, event),
+    )
+  }
+}
+
+function setBeforeOutsideRef(value: FocusGuardTemplateRef) {
+  beforeOutsideRef.value = resolveFocusGuardElement(value)
+}
+
+function setAfterOutsideRef(value: FocusGuardTemplateRef) {
+  afterOutsideRef.value = resolveFocusGuardElement(value)
+}
+
+function resolveFocusGuardElement(value: FocusGuardTemplateRef) {
+  if (!value) {
+    return null
+  }
+
+  if (value instanceof HTMLSpanElement) {
+    return value
+  }
+
+  if ('element' in value) {
+    const element = unref(value.element)
+    return element instanceof HTMLSpanElement ? element : null
+  }
+
+  if ('$el' in value && value.$el instanceof HTMLSpanElement) {
+    return value.$el
+  }
+
+  return null
+}
+
+defineExpose({
+  element: portalNode,
+})
+</script>
+
+<template>
+  <FocusGuard
+    v-if="shouldRenderGuards && portalNode"
+    :ref="setBeforeOutsideRef"
+    data-type="outside"
+    @focus="handleBeforeOutsideFocus"
+  />
+  <span
+    v-if="shouldRenderGuards && portalNode"
+    :aria-owns="portalNode.id"
+    :style="ownerVisuallyHidden"
+  />
+  <Teleport v-if="shouldRender" :to="portalTarget" :disabled="disabled">
+    <slot v-if="renderless" :ref="renderRef" :props="mergedProps" :state="state" />
+    <component :is="tag" v-else :ref="renderRef" v-bind="mergedProps">
+      <slot :state="state" />
+    </component>
+  </Teleport>
+  <FocusGuard
+    v-if="shouldRenderGuards && portalNode"
+    :ref="setAfterOutsideRef"
+    data-type="outside"
+    @focus="handleAfterOutsideFocus"
+  />
+</template>

package/src/floating-ui-vue/components/FloatingRootStore.ts

@@ -0,0 +1,83 @@
+import type { ComputedRef, MaybeRefOrGetter } from 'vue'
+import type { BaseUIChangeEventDetails } from '../../utils/createBaseUIEventDetails'
+import type { TransitionStatus } from '../../utils/useTransitionStatus'
+import type {
+  ContextData,
+  FloatingRootContext,
+  FloatingRootState,
+  FloatingTriggerMap,
+  ReferenceType,
+} from '../types'
+import { computed, shallowRef, toValue } from 'vue'
+import { createEventEmitter } from '../utils/createEventEmitter'
+import { isClickLikeEvent } from '../utils/event'
+
+export interface CreateFloatingRootContextOptions {
+  open: MaybeRefOrGetter<boolean>
+  transitionStatus: MaybeRefOrGetter<TransitionStatus>
+  domReferenceElement: MaybeRefOrGetter<Element | null>
+  referenceElement: MaybeRefOrGetter<ReferenceType | null>
+  floatingElement: MaybeRefOrGetter<HTMLElement | null>
+  floatingId: MaybeRefOrGetter<string | undefined>
+  triggerElements: FloatingTriggerMap
+  nested?: boolean
+  onOpenChange?: (open: boolean, eventDetails: BaseUIChangeEventDetails<string, any>) => void
+  clearCloseTimer?: () => void
+}
+
+export function createFloatingRootContext(
+  options: CreateFloatingRootContextOptions,
+): FloatingRootContext {
+  const state: { [K in keyof FloatingRootState]: ComputedRef<FloatingRootState[K]> } = {
+    open: computed(() => toValue(options.open)),
+    transitionStatus: computed(() => toValue(options.transitionStatus)),
+    domReferenceElement: computed(() => toValue(options.domReferenceElement)),
+    referenceElement: computed(() => toValue(options.referenceElement)),
+    floatingElement: computed(() => toValue(options.floatingElement)),
+    floatingId: computed(() => toValue(options.floatingId)),
+  }
+
+  const context = {
+    dataRef: shallowRef<ContextData>({}),
+    events: createEventEmitter(),
+    nested: options.nested ?? false,
+    triggerElements: options.triggerElements,
+    clearCloseTimer: options.clearCloseTimer,
+  }
+
+  const rootContext: FloatingRootContext = {
+    context,
+    useState(key) {
+      return state[key]
+    },
+    select<K extends keyof FloatingRootState>(key: K) {
+      return state[key].value
+    },
+    setOpen(open, eventDetails) {
+      options.onOpenChange?.(open, eventDetails)
+    },
+    dispatchOpenChange(open, eventDetails) {
+      syncOpenEvent(open, eventDetails.event)
+
+      context.events.emit('openchange', {
+        open,
+        reason: eventDetails.reason,
+        nativeEvent: eventDetails.event,
+        nested: context.nested,
+        triggerElement: eventDetails.trigger,
+      })
+    },
+  }
+
+  function syncOpenEvent(open: boolean, event: Event | undefined) {
+    if (
+      !open
+      || !state.open.value
+      || (event != null && isClickLikeEvent(event))
+    ) {
+      context.dataRef.value.openEvent = open ? event : undefined
+    }
+  }
+
+  return rootContext
+}

package/src/floating-ui-vue/components/FloatingTree.ts

@@ -0,0 +1,64 @@
+import type { InjectionKey } from 'vue'
+import type { FloatingNodeType, FloatingTreeType } from '../types'
+import { inject, onScopeDispose, provide } from 'vue'
+import { useBaseUiId } from '../../utils/useBaseUiId'
+import { FloatingTreeStore } from './FloatingTreeStore'
+
+const floatingNodeContextKey: InjectionKey<FloatingNodeType | null>
+  = Symbol('FloatingNodeContext')
+const floatingTreeContextKey: InjectionKey<FloatingTreeType | null>
+  = Symbol('FloatingTreeContext')
+
+/**
+ * Returns the parent node id for nested floating elements, if available.
+ */
+export function useFloatingParentNodeId() {
+  return inject(floatingNodeContextKey, null)?.id ?? null
+}
+
+/**
+ * Returns the nearest floating tree context, if available.
+ */
+export function useFloatingTree(externalTree?: FloatingTreeStore) {
+  const contextTree = inject(floatingTreeContextKey, null)
+  return externalTree ?? contextTree
+}
+
+/**
+ * Registers a node into the nearest floating tree, returning its id.
+ */
+export function useFloatingNodeId(externalTree?: FloatingTreeStore) {
+  const id = useBaseUiId()
+  const tree = useFloatingTree(externalTree)
+  const parentId = useFloatingParentNodeId()
+
+  if (id) {
+    const node = { id, parentId }
+    tree?.addNode(node)
+    onScopeDispose(() => {
+      tree?.removeNode(node)
+    })
+  }
+
+  return id
+}
+
+/**
+ * Provides the current floating node id and parent id to nested floating elements.
+ */
+export function provideFloatingNode(id: string | undefined) {
+  const parentId = useFloatingParentNodeId()
+  provide(floatingNodeContextKey, {
+    id,
+    parentId,
+  })
+}
+
+/**
+ * Provides a floating tree store to descendants, creating one when needed.
+ */
+export function provideFloatingTree(externalTree?: FloatingTreeStore) {
+  const tree = externalTree ?? new FloatingTreeStore()
+  provide(floatingTreeContextKey, tree)
+  return tree
+}

package/src/floating-ui-vue/components/FloatingTreeStore.ts

@@ -0,0 +1,21 @@
+import type { Ref } from 'vue'
+import type { FloatingEvents, FloatingNodeType } from '../types'
+import { shallowRef } from 'vue'
+import { createEventEmitter } from '../utils/createEventEmitter'
+
+/**
+ * Stores and manages floating elements in a tree structure.
+ */
+export class FloatingTreeStore {
+  readonly nodesRef: Ref<FloatingNodeType[]> = shallowRef([])
+
+  readonly events: FloatingEvents = createEventEmitter()
+
+  addNode(node: FloatingNodeType) {
+    this.nodesRef.value = [...this.nodesRef.value, node]
+  }
+
+  removeNode(node: FloatingNodeType) {
+    this.nodesRef.value = this.nodesRef.value.filter(item => item !== node)
+  }
+}