base-ui-vue 0.3.0 → 0.5.0

package/src/tooltip/trigger/TooltipTrigger.vue

@@ -0,0 +1,343 @@
+<script setup lang="ts" generic="Payload = unknown">
+import type { BaseUIComponentProps, NativeButtonProps } from '../../utils/types'
+import type { TooltipRootChangeEventDetails } from '../root/TooltipRoot.vue'
+import type { TooltipHandle } from '../store/TooltipHandle'
+import { computed, shallowRef, useAttrs, watch } from 'vue'
+import { mergeProps } from '../../merge-props/mergeProps'
+import { useButton } from '../../use-button'
+import { triggerStateMapping } from '../../utils/popupStateMapping'
+import { REASONS } from '../../utils/reasons'
+import { useBaseUiId } from '../../utils/useBaseUiId'
+import { useMergedRefs } from '../../utils/useMergedRefs'
+import { useRenderElement } from '../../utils/useRenderElement'
+import { useTimeout } from '../../utils/useTimeout'
+import { useTooltipRootContext } from '../root/TooltipRootContext'
+import { createTooltipChangeEventDetails } from '../store/TooltipHandle'
+import { HOVERABLE_CLOSE_GRACE_DELAY } from '../utils/constants'
+import { TooltipTriggerDataAttributes } from './TooltipTriggerDataAttributes'
+
+/**
+ * An element to attach the tooltip to.
+ * Renders a `<button>` element.
+ *
+ * Documentation: [Base UI Vue Tooltip](https://baseui-vue.com/docs/components/tooltip)
+ */
+defineOptions({
+  name: 'TooltipTrigger',
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<TooltipTriggerProps<Payload>>(), {
+  as: 'button',
+  closeOnClick: true,
+  disabled: false,
+  nativeButton: true,
+})
+
+const attrs = useAttrs()
+const injectedRootContext = useTooltipRootContext(true)
+const store = props.handle?.store ?? injectedRootContext?.store
+
+if (!store) {
+  throw new Error(
+    'Base UI Vue: <TooltipTrigger> must be used within a <TooltipRoot> component or receive a tooltip handle.',
+  )
+}
+
+const triggerId = useBaseUiId(props.id)!
+const triggerRef = shallowRef<HTMLElement | null>(null)
+const openTimer = useTimeout()
+const pointerType = shallowRef<string | undefined>(undefined)
+
+const root = computed(() => store.controller.value)
+const disabled = computed(() => props.disabled || root.value?.disabled.value || false)
+const open = computed(() =>
+  Boolean(root.value?.open.value && root.value?.activeTriggerId.value === triggerId),
+)
+
+const { getButtonProps, buttonRef } = useButton({
+  disabled,
+  focusableWhenDisabled: () => true,
+  native: () => props.nativeButton ?? true,
+})
+
+const triggerState = computed<TooltipTriggerState>(() => ({
+  open: open.value,
+  disabled: disabled.value,
+}))
+
+function triggerElement() {
+  return triggerRef.value ?? undefined
+}
+
+function makeDetails(
+  reason: TooltipRootChangeEventDetails['reason'],
+  event?: MouseEvent | FocusEvent | KeyboardEvent | PointerEvent,
+) {
+  return createTooltipChangeEventDetails(reason, event, triggerElement())
+}
+
+function requestOpen(event: MouseEvent | FocusEvent) {
+  const context = root.value
+
+  if (!context) {
+    return
+  }
+
+  context.requestOpenChange(true, makeDetails(event.type === 'focus' ? REASONS.triggerFocus : REASONS.triggerHover, event), triggerId)
+}
+
+function requestClose(event: MouseEvent | FocusEvent | KeyboardEvent | PointerEvent) {
+  const context = root.value
+
+  if (!context) {
+    return
+  }
+
+  const reason = event.type === 'keydown'
+    ? REASONS.escapeKey
+    : event.type === 'click' || event.type === 'pointerdown'
+      ? REASONS.triggerPress
+      : event.type === 'blur'
+        ? REASONS.triggerFocus
+        : REASONS.triggerHover
+
+  context.requestOpenChange(false, makeDetails(reason, event), triggerId)
+}
+
+function handleMouseEnter(event: MouseEvent) {
+  const context = root.value
+
+  if (!context) {
+    return
+  }
+
+  if (pointerType.value === 'touch') {
+    return
+  }
+
+  context.clearCloseTimer()
+  openTimer.clear()
+
+  if (disabled.value) {
+    if (context.open.value) {
+      context.requestOpenChange(false, makeDetails(REASONS.triggerHover, event), triggerId)
+    }
+    return
+  }
+
+  if (context.open.value && context.activeTriggerId.value !== triggerId) {
+    requestOpen(event)
+    return
+  }
+
+  const { delay, instant } = context.getOpenDelay(props.delay)
+
+  if (instant) {
+    context.instantType.value = 'delay'
+  }
+
+  if (delay <= 0) {
+    requestOpen(event)
+    return
+  }
+
+  openTimer.start(delay, () => {
+    requestOpen(event)
+  })
+}
+
+function handleMouseLeave(event: MouseEvent) {
+  const context = root.value
+
+  openTimer.clear()
+
+  if (!context || context.activeTriggerId.value !== triggerId) {
+    return
+  }
+
+  const closeDelay = context.getCloseDelay(props.closeDelay)
+  const delay = closeDelay === 0 && !context.disableHoverablePopup.value && context.trackCursorAxis.value !== 'both'
+    ? HOVERABLE_CLOSE_GRACE_DELAY
+    : closeDelay
+
+  context.scheduleClose(delay, makeDetails(REASONS.triggerHover, event), triggerId)
+}
+
+function handleFocus(event: FocusEvent) {
+  const context = root.value
+
+  if (!context) {
+    return
+  }
+
+  openTimer.clear()
+  context.clearCloseTimer()
+
+  if (disabled.value) {
+    if (context.open.value) {
+      context.requestOpenChange(false, makeDetails(REASONS.triggerFocus, event), triggerId)
+    }
+    return
+  }
+
+  requestOpen(event)
+}
+
+function handleBlur(event: FocusEvent) {
+  openTimer.clear()
+  requestClose(event)
+}
+
+function handlePointerDown(event: PointerEvent) {
+  pointerType.value = event.pointerType
+
+  if (props.closeOnClick && !open.value) {
+    openTimer.clear()
+  }
+}
+
+function handleClick(event: MouseEvent) {
+  if (!props.closeOnClick) {
+    return
+  }
+
+  openTimer.clear()
+
+  if (open.value) {
+    requestClose(event)
+  }
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  if (event.key === 'Escape' && root.value?.open.value) {
+    requestClose(event)
+  }
+}
+
+watch(
+  [
+    triggerRef,
+    () => props.payload,
+    () => props.closeOnClick,
+    () => props.closeDelay,
+  ],
+  ([element], _previous, onCleanup) => {
+    if (!element) {
+      return
+    }
+
+    store.registerTrigger({
+      id: triggerId,
+      element,
+      payload: props.payload,
+      closeOnClick: props.closeOnClick ?? true,
+      closeDelay: props.closeDelay,
+    })
+
+    onCleanup(() => {
+      store.unregisterTrigger(triggerId, element)
+    })
+  },
+  { immediate: true },
+)
+
+const renderRef = useMergedRefs(buttonRef, triggerRef)
+
+const triggerProps = computed(() =>
+  getButtonProps(mergeProps(
+    attrs,
+    root.value?.dismiss.reference,
+    {
+      'id': triggerId,
+      'aria-describedby': open.value ? root.value?.popupId.value : undefined,
+      'data-base-ui-tooltip-trigger': disabled.value ? undefined : '',
+      onPointerenter(event: PointerEvent) {
+        pointerType.value = event.pointerType
+      },
+      'onPointerdown': handlePointerDown,
+      'onMouseenter': handleMouseEnter,
+      'onMouseleave': handleMouseLeave,
+      'onFocus': handleFocus,
+      'onBlur': handleBlur,
+      'onClick': handleClick,
+      'onKeydown': handleKeydown,
+    },
+  )),
+)
+
+const {
+  tag,
+  mergedProps,
+  renderless,
+} = useRenderElement({
+  componentProps: props,
+  state: triggerState,
+  props: triggerProps,
+  stateAttributesMapping: {
+    ...triggerStateMapping,
+    disabled(value) {
+      return value ? { [TooltipTriggerDataAttributes.triggerDisabled]: '' } : null
+    },
+  },
+  defaultTagName: 'button',
+  ref: renderRef,
+})
+</script>
+
+<script lang="ts">
+export interface TooltipTriggerState {
+  /**
+   * Whether the tooltip is currently open.
+   */
+  open: boolean
+  /**
+   * Whether this trigger should ignore interaction.
+   */
+  disabled: boolean
+}
+
+export interface TooltipTriggerProps<Payload = unknown>
+  extends NativeButtonProps, BaseUIComponentProps<TooltipTriggerState> {
+  /**
+   * A handle to associate the trigger with a tooltip.
+   */
+  handle?: TooltipHandle<Payload>
+  /**
+   * A payload to pass to the tooltip when it is opened.
+   */
+  payload?: Payload
+  /**
+   * How long to wait before opening the tooltip. Specified in milliseconds.
+   * @default 600
+   */
+  delay?: number
+  /**
+   * Whether the tooltip should close when this trigger is clicked.
+   * @default true
+   */
+  closeOnClick?: boolean
+  /**
+   * How long to wait before closing the tooltip. Specified in milliseconds.
+   * @default 0
+   */
+  closeDelay?: number
+  /**
+   * If `true`, the tooltip will not open when interacting with this trigger.
+   * Note that this doesn't apply the `disabled` attribute to the trigger element.
+   * @default false
+   */
+  disabled?: boolean
+  /**
+   * The trigger id.
+   */
+  id?: string
+}
+</script>
+
+<template>
+  <slot v-if="renderless" :ref="renderRef" :props="mergedProps" :state="triggerState" />
+  <component :is="tag" v-else :ref="renderRef" v-bind="mergedProps">
+    <slot :state="triggerState" />
+  </component>
+</template>

package/src/tooltip/trigger/TooltipTriggerDataAttributes.ts

@@ -0,0 +1,12 @@
+import { CommonTriggerDataAttributes } from '../../utils/popupStateMapping'
+
+export enum TooltipTriggerDataAttributes {
+  /**
+   * Present when the corresponding tooltip is open.
+   */
+  popupOpen = CommonTriggerDataAttributes.popupOpen,
+  /**
+   * Present when the trigger is disabled, either by the `disabled` prop or by a parent `<TooltipRoot>`.
+   */
+  triggerDisabled = CommonTriggerDataAttributes.triggerDisabled,
+}

package/src/tooltip/utils/constants.ts

@@ -0,0 +1,2 @@
+export const OPEN_DELAY = 600
+export const HOVERABLE_CLOSE_GRACE_DELAY = 100

package/src/tooltip/viewport/TooltipViewport.vue

@@ -0,0 +1,149 @@
+<script setup lang="ts">
+import type { BaseUIComponentProps } from '../../utils/types'
+import type { TooltipInstantType } from '../root/TooltipRoot.vue'
+import { computed, onBeforeUnmount, onMounted, useAttrs } from 'vue'
+import { useDirection } from '../../direction-provider/DirectionContext'
+import { usePopupViewport } from '../../utils/usePopupViewport'
+import { useRenderElement } from '../../utils/useRenderElement'
+import { useTooltipPositionerContext } from '../positioner/TooltipPositionerContext'
+import { useTooltipRootContext } from '../root/TooltipRootContext'
+import { TooltipViewportCssVars } from './TooltipViewportCssVars'
+import { TooltipViewportDataAttributes } from './TooltipViewportDataAttributes'
+
+/**
+ * A viewport for displaying content transitions.
+ * This component is only required if one popup can be opened by multiple triggers, its content
+ * changes based on the trigger, and switching between them is animated.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Vue Tooltip](https://baseui-vue.com/docs/components/tooltip)
+ */
+defineOptions({
+  name: 'TooltipViewport',
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<TooltipViewportProps>(), {
+  as: 'div',
+})
+
+const attrs = useAttrs()
+const ctx = useTooltipRootContext()
+const positioner = useTooltipPositionerContext()
+const direction = useDirection()
+
+onMounted(() => {
+  ctx.setHasViewport(true)
+})
+
+onBeforeUnmount(() => {
+  ctx.setHasViewport(false)
+})
+
+const viewport = usePopupViewport({
+  activeTriggerElement: () => ctx.activeTrigger.value?.element,
+  activeTriggerId: ctx.activeTriggerId,
+  open: ctx.open,
+  mounted: ctx.mounted,
+  popupElement: ctx.popupRef,
+  positionerElement: ctx.positionerRef,
+  side: positioner.side,
+  direction,
+  payload: ctx.payload,
+  cssVars: TooltipViewportCssVars,
+})
+
+const {
+  currentContainerRef,
+  previousContainerRef,
+  currentContentKey,
+  currentContainerProps,
+  previousContainerProps,
+  transitioning,
+} = viewport
+
+const state = computed<TooltipViewportState>(() => ({
+  activationDirection: viewport.state.value.activationDirection,
+  transitioning: viewport.state.value.transitioning,
+  instant: ctx.instantType.value,
+}))
+
+const viewportProps = computed(() => {
+  return {
+    ...attrs,
+  }
+})
+
+const {
+  tag,
+  mergedProps,
+  renderless,
+  ref: renderRef,
+} = useRenderElement({
+  componentProps: {
+    as: props.as,
+    class: props.class,
+    style: props.style,
+  },
+  state,
+  props: viewportProps,
+  stateAttributesMapping: {
+    activationDirection(value) {
+      return value ? { [TooltipViewportDataAttributes.activationDirection]: value } : null
+    },
+    transitioning(value) {
+      return value ? { [TooltipViewportDataAttributes.transitioning]: '' } : null
+    },
+    instant(value) {
+      return value ? { [TooltipViewportDataAttributes.instant]: value } : null
+    },
+  },
+  defaultTagName: 'div',
+})
+</script>
+
+<script lang="ts">
+export interface TooltipViewportState {
+  /**
+   * The activation direction of the transitioned content.
+   */
+  activationDirection: string | undefined
+  /**
+   * Whether the viewport is currently transitioning between contents.
+   */
+  transitioning: boolean
+  /**
+   * Present if animations should be instant.
+   */
+  instant: TooltipInstantType
+}
+
+export interface TooltipViewportProps extends BaseUIComponentProps<TooltipViewportState> {}
+</script>
+
+<template>
+  <slot v-if="renderless" :ref="renderRef" :props="mergedProps" :state="state" />
+  <component :is="tag" v-else :ref="renderRef" v-bind="mergedProps">
+    <template v-if="transitioning">
+      <div
+        ref="previousContainerRef"
+        v-bind="previousContainerProps"
+      />
+      <div
+        :key="currentContentKey"
+        ref="currentContainerRef"
+        v-bind="currentContainerProps"
+      >
+        <slot :state="state" />
+      </div>
+    </template>
+    <div
+      v-else
+      :key="currentContentKey"
+      ref="currentContainerRef"
+      v-bind="currentContainerProps"
+    >
+      <slot :state="state" />
+    </div>
+  </component>
+</template>

package/src/tooltip/viewport/TooltipViewportCssVars.ts

@@ -0,0 +1,14 @@
+export enum TooltipViewportCssVars {
+  /**
+   * The width of the parent popup.
+   * This variable is placed on the 'previous' container and stores the width of the popup when the previous content was rendered.
+   * It can be used to freeze the dimensions of the popup when animating between different content.
+   */
+  popupWidth = '--popup-width',
+  /**
+   * The height of the parent popup.
+   * This variable is placed on the 'previous' container and stores the height of the popup when the previous content was rendered.
+   * It can be used to freeze the dimensions of the popup when animating between different content.
+   */
+  popupHeight = '--popup-height',
+}

package/src/tooltip/viewport/TooltipViewportDataAttributes.ts

@@ -0,0 +1,26 @@
+export enum TooltipViewportDataAttributes {
+  /**
+   * Applied to the direct child of the viewport when no transitions are present or the new content when it's entering.
+   */
+  current = 'data-current',
+  /**
+   * Applied to the direct child of the viewport that contains the exiting content when transitions are present.
+   */
+  previous = 'data-previous',
+  /**
+   * Indicates the direction from which the popup was activated.
+   * This can be used to create directional animations based on how the popup was triggered.
+   * Contains space-separated values for both horizontal and vertical axes.
+   * @type {`${'left' | 'right' | ''} ${'down' | 'up' | ''}`}
+   */
+  activationDirection = 'data-activation-direction',
+  /**
+   * Indicates that the viewport is currently transitioning between old and new content.
+   */
+  transitioning = 'data-transitioning',
+  /**
+   * Present if animations should be instant.
+   * @type {'delay' | 'dismiss' | 'focus'}
+   */
+  instant = 'data-instant',
+}

package/src/utils/FloatingPortalLite.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import type { FloatingPortal } from '../floating-ui-vue'
+import { computed, useAttrs } from 'vue'
+import { useFloatingPortalNode } from '../floating-ui-vue'
+
+defineOptions({
+  name: 'FloatingPortalLite',
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<FloatingPortalLiteProps>(), {
+  as: 'div',
+  disabled: false,
+})
+
+const attrs = useAttrs()
+
+const state = computed<FloatingPortalLiteState>(() => ({}))
+
+const {
+  portalNode,
+  portalTarget,
+  shouldRender,
+  tag,
+  mergedProps,
+  renderless,
+  ref: renderRef,
+} = useFloatingPortalNode({
+  container: () => props.container,
+  to: () => props.to,
+  componentProps: props,
+  elementProps: computed(() => attrs),
+  state,
+})
+
+defineExpose({
+  element: portalNode,
+})
+</script>
+
+<script lang="ts">
+export interface FloatingPortalLiteState {}
+
+export interface FloatingPortalLiteProps
+  extends FloatingPortal.Props<FloatingPortalLiteState> {
+  /**
+   * Vue Teleport target. Prefer `container` for React API parity.
+   * @default 'body'
+   */
+  to?: FloatingPortal.Target
+  /**
+   * Disables Vue Teleport while preserving portal mounting behavior.
+   * @default false
+   */
+  disabled?: boolean
+}
+</script>
+
+<template>
+  <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>
+</template>

package/src/utils/FocusGuard.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { onMounted, shallowRef, useAttrs } from 'vue'
+import { platform } from './platform'
+import { visuallyHidden } from './visuallyHidden'
+
+defineOptions({
+  name: 'FocusGuard',
+  inheritAttrs: false,
+})
+
+const attrs = useAttrs()
+const element = shallowRef<HTMLSpanElement | null>(null)
+const role = shallowRef<'button' | undefined>(undefined)
+
+onMounted(() => {
+  if (platform.screenReader.voiceOver && platform.engine.webkit) {
+    role.value = 'button'
+  }
+})
+
+defineExpose({
+  element,
+})
+</script>
+
+<template>
+  <span
+    ref="element"
+    v-bind="attrs"
+    :style="visuallyHidden"
+    :tabindex="0"
+    :role="role"
+    :aria-hidden="role ? undefined : 'true'"
+    data-base-ui-vue-focus-guard=""
+  />
+</template>