npm - base-ui-vue - Versions diffs - 0.4.0 → 0.5.0 - Mend

base-ui-vue 0.4.0 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (187) hide show

package/dist/arrow/TooltipArrow.cjs +609 -0
package/dist/arrow/TooltipArrow.cjs.map +1 -0
package/dist/arrow/TooltipArrow.js +478 -0
package/dist/arrow/TooltipArrow.js.map +1 -0
package/dist/button/Button.cjs +5 -317
package/dist/button/Button.cjs.map +1 -1
package/dist/button/Button.js +3 -249
package/dist/button/Button.js.map +1 -1
package/dist/button/ToolbarButton.cjs +13 -6
package/dist/button/ToolbarButton.cjs.map +1 -1
package/dist/button/ToolbarButton.js +3 -2
package/dist/button/ToolbarButton.js.map +1 -1
package/dist/checkbox/index.cjs +20 -9
package/dist/checkbox/index.cjs.map +1 -1
package/dist/checkbox/index.js +7 -2
package/dist/checkbox/index.js.map +1 -1
package/dist/checkbox-group/CheckboxGroup.cjs +14 -13
package/dist/checkbox-group/CheckboxGroup.cjs.map +1 -1
package/dist/checkbox-group/CheckboxGroup.js +2 -1
package/dist/checkbox-group/CheckboxGroup.js.map +1 -1
package/dist/components/FloatingPortal.cjs +66 -0
package/dist/components/FloatingPortal.cjs.map +1 -0
package/dist/components/FloatingPortal.js +55 -0
package/dist/components/FloatingPortal.js.map +1 -0
package/dist/components/FloatingRootStore.cjs +101 -0
package/dist/components/FloatingRootStore.cjs.map +1 -0
package/dist/components/FloatingRootStore.js +84 -0
package/dist/components/FloatingRootStore.js.map +1 -0
package/dist/components/FloatingTree.cjs +33 -0
package/dist/components/FloatingTree.cjs.map +1 -0
package/dist/components/FloatingTree.js +22 -0
package/dist/components/FloatingTree.js.map +1 -0
package/dist/composite/composite.cjs +6 -0
package/dist/composite/composite.js +1 -1
package/dist/content/ScrollAreaContent.cjs +3 -3
package/dist/content/ScrollAreaContent.cjs.map +1 -1
package/dist/content/ScrollAreaContent.js +1 -1
package/dist/control/FieldControl.cjs +3 -3
package/dist/control/FieldControl.cjs.map +1 -1
package/dist/control/FieldControl.js +1 -1
package/dist/control/SliderControl.cjs +3 -3
package/dist/control/SliderControl.cjs.map +1 -1
package/dist/control/SliderControl.js +1 -1
package/dist/corner/ScrollAreaCorner.cjs +3 -3
package/dist/corner/ScrollAreaCorner.cjs.map +1 -1
package/dist/corner/ScrollAreaCorner.js +1 -1
package/dist/decrement/NumberFieldDecrement.cjs +10 -3
package/dist/decrement/NumberFieldDecrement.cjs.map +1 -1
package/dist/decrement/NumberFieldDecrement.js +3 -2
package/dist/decrement/NumberFieldDecrement.js.map +1 -1
package/dist/description/FieldDescription.cjs +2 -2
package/dist/description/FieldDescription.cjs.map +1 -1
package/dist/description/FieldDescription.js +1 -1
package/dist/error/FieldError.cjs +2 -2
package/dist/error/FieldError.cjs.map +1 -1
package/dist/error/FieldError.js +1 -1
package/dist/fallback/AvatarFallback.cjs +2 -2
package/dist/fallback/AvatarFallback.cjs.map +1 -1
package/dist/fallback/AvatarFallback.js +1 -1
package/dist/floating-ui-vue/index.js +638 -0
package/dist/floating-ui-vue/index.js.map +1 -0
package/dist/form/Form.cjs +3 -3
package/dist/form/Form.cjs.map +1 -1
package/dist/form/Form.js +1 -1
package/dist/group/NumberFieldGroup.cjs +3 -3
package/dist/group/NumberFieldGroup.cjs.map +1 -1
package/dist/group/NumberFieldGroup.js +1 -1
package/dist/group/ToolbarGroup.cjs +2 -2
package/dist/group/ToolbarGroup.cjs.map +1 -1
package/dist/group/ToolbarGroup.js +1 -1
package/dist/header/AccordionHeader.cjs +2 -2
package/dist/header/AccordionHeader.cjs.map +1 -1
package/dist/header/AccordionHeader.js +1 -1
package/dist/hooks/useDismiss.cjs +502 -0
package/dist/hooks/useDismiss.cjs.map +1 -0
package/dist/hooks/useHoverFloatingInteraction.cjs +233 -0
package/dist/hooks/useHoverFloatingInteraction.cjs.map +1 -0
package/dist/image/AvatarImage.cjs +4 -4
package/dist/image/AvatarImage.cjs.map +1 -1
package/dist/image/AvatarImage.js +1 -1
package/dist/increment/NumberFieldIncrement.cjs +3 -2
package/dist/increment/NumberFieldIncrement.cjs.map +1 -1
package/dist/increment/NumberFieldIncrement.js +2 -1
package/dist/increment/NumberFieldIncrement.js.map +1 -1
package/dist/index.cjs +60 -7
package/dist/index.d.cts +3838 -1726
package/dist/index.d.cts.map +1 -1
package/dist/index.d.ts +3838 -1726
package/dist/index.d.ts.map +1 -1
package/dist/index.js +4 -3
package/dist/index2.cjs +7475 -3089
package/dist/index2.cjs.map +1 -1
package/dist/index2.js +7215 -3106
package/dist/index2.js.map +1 -1
package/dist/rolldown-runtime.js +36 -0
package/package.json +1 -1
package/src/floating-ui-vue/components/FloatingPortal.ts +171 -0
package/src/floating-ui-vue/components/FloatingPortal.vue +259 -0
package/src/floating-ui-vue/components/FloatingRootStore.ts +83 -0
package/src/floating-ui-vue/components/FloatingTree.ts +64 -0
package/src/floating-ui-vue/components/FloatingTreeStore.ts +21 -0
package/src/floating-ui-vue/hooks/useDismiss.ts +689 -0
package/src/floating-ui-vue/hooks/useHoverFloatingInteraction.ts +244 -0
package/src/floating-ui-vue/hooks/useHoverInteractionSharedState.ts +125 -0
package/src/floating-ui-vue/hooks/useHoverShared.ts +53 -0
package/src/floating-ui-vue/index.ts +48 -0
package/src/floating-ui-vue/middleware/arrow.ts +114 -0
package/src/floating-ui-vue/types.ts +117 -0
package/src/floating-ui-vue/utils/composite.ts +20 -0
package/src/floating-ui-vue/utils/constants.ts +2 -0
package/src/floating-ui-vue/utils/createAttribute.ts +3 -0
package/src/floating-ui-vue/utils/createEventEmitter.ts +20 -0
package/src/floating-ui-vue/utils/element.ts +59 -0
package/src/floating-ui-vue/utils/event.ts +15 -0
package/src/floating-ui-vue/utils/nodes.ts +14 -0
package/src/floating-ui-vue/utils/tabbable.ts +309 -0
package/src/index.ts +4 -0
package/src/radio/index.ts +28 -0
package/src/radio/indicator/RadioIndicator.vue +90 -0
package/src/radio/indicator/RadioIndicatorDataAttributes.ts +54 -0
package/src/radio/root/RadioRoot.vue +544 -0
package/src/radio/root/RadioRootContext.ts +18 -0
package/src/radio/root/RadioRootDataAttributes.ts +46 -0
package/src/radio/utils/stateAttributesMapping.ts +29 -0
package/src/radio-group/RadioGroup.vue +381 -0
package/src/radio-group/RadioGroupContext.ts +42 -0
package/src/radio-group/RadioGroupDataAttributes.ts +6 -0
package/src/radio-group/index.ts +10 -0
package/src/tabs/index.ts +38 -0
package/src/tabs/indicator/TabsIndicator.vue +201 -0
package/src/tabs/indicator/TabsIndicatorCssVars.ts +26 -0
package/src/tabs/indicator/TabsIndicatorDataAttributes.ts +12 -0
package/src/tabs/indicator/prehydrationScript.min.ts +5 -0
package/src/tabs/indicator/prehydrationScript.template.js +87 -0
package/src/tabs/list/TabsList.vue +201 -0
package/src/tabs/list/TabsListContext.ts +29 -0
package/src/tabs/list/TabsListDataAttributes.ts +12 -0
package/src/tabs/panel/TabsPanel.vue +167 -0
package/src/tabs/panel/TabsPanelDataAttributes.ts +28 -0
package/src/tabs/root/TabsRoot.vue +468 -0
package/src/tabs/root/TabsRootContext.ts +56 -0
package/src/tabs/root/TabsRootDataAttributes.ts +12 -0
package/src/tabs/root/stateAttributesMapping.ts +9 -0
package/src/tabs/tab/TabsTab.vue +274 -0
package/src/tabs/tab/TabsTabDataAttributes.ts +20 -0
package/src/tabs/utils/areTabValuesEqual.ts +6 -0
package/src/tooltip/arrow/TooltipArrow.vue +116 -0
package/src/tooltip/arrow/TooltipArrowDataAttributes.ts +31 -0
package/src/tooltip/index.ts +54 -0
package/src/tooltip/popup/TooltipPopup.vue +142 -0
package/src/tooltip/popup/TooltipPopupDataAttributes.ts +35 -0
package/src/tooltip/portal/TooltipPortal.vue +83 -0
package/src/tooltip/portal/TooltipPortalContext.ts +19 -0
package/src/tooltip/positioner/TooltipPositioner.vue +221 -0
package/src/tooltip/positioner/TooltipPositionerContext.ts +23 -0
package/src/tooltip/positioner/TooltipPositionerCssVars.ts +27 -0
package/src/tooltip/positioner/TooltipPositionerDataAttributes.ts +26 -0
package/src/tooltip/provider/TooltipProvider.vue +78 -0
package/src/tooltip/provider/TooltipProviderContext.ts +19 -0
package/src/tooltip/root/TooltipRoot.vue +401 -0
package/src/tooltip/root/TooltipRootContext.ts +71 -0
package/src/tooltip/store/TooltipHandle.ts +215 -0
package/src/tooltip/trigger/TooltipTrigger.vue +343 -0
package/src/tooltip/trigger/TooltipTriggerDataAttributes.ts +12 -0
package/src/tooltip/utils/constants.ts +2 -0
package/src/tooltip/viewport/TooltipViewport.vue +149 -0
package/src/tooltip/viewport/TooltipViewportCssVars.ts +14 -0
package/src/tooltip/viewport/TooltipViewportDataAttributes.ts +26 -0
package/src/utils/FloatingPortalLite.vue +66 -0
package/src/utils/FocusGuard.vue +36 -0
package/src/utils/adaptiveOriginMiddleware.ts +79 -0
package/src/utils/addEventListener.ts +16 -0
package/src/utils/constants.ts +11 -0
package/src/utils/createBaseUIEventDetails.ts +2 -0
package/src/utils/getCssDimensions.ts +19 -0
package/src/utils/getDisabledMountTransitionStyles.ts +9 -0
package/src/utils/hideMiddleware.ts +19 -0
package/src/utils/mergeCleanups.ts +7 -0
package/src/utils/platform.ts +18 -0
package/src/utils/popupStateMapping.ts +103 -0
package/src/utils/reasons.ts +4 -0
package/src/utils/serializeValue.ts +17 -0
package/src/utils/useAnchorPositioning.ts +644 -0
package/src/utils/usePopupAutoResize.ts +254 -0
package/src/utils/usePopupViewport.ts +398 -0
package/src/utils/usePositioner.ts +61 -0
package/src/utils/useRenderElement.ts +3 -0

package/src/tooltip/portal/TooltipPortal.vue ADDED Viewed

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import type { FloatingPortal } from '../../floating-ui-vue'
+import type { BaseUIComponentProps } from '../../utils/types'
+import { computed, provide, shallowRef, toRef, unref, useAttrs } from 'vue'
+import FloatingPortalLite from '../../utils/FloatingPortalLite.vue'
+import { useTooltipRootContext } from '../root/TooltipRootContext'
+import { tooltipPortalContextKey } from './TooltipPortalContext'
+/**
+ * A portal element that moves the popup to a different part of the DOM.
+ * By default, the portal element is appended to `<body>`.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Vue Tooltip](https://baseui-vue.com/docs/components/tooltip)
+ */
+defineOptions({
+  name: 'TooltipPortal',
+  inheritAttrs: false,
+})
+const props = withDefaults(defineProps<TooltipPortalProps>(), {
+  keepMounted: false,
+  disabled: false,
+})
+const attrs = useAttrs()
+const ctx = useTooltipRootContext()
+const keepMounted = toRef(props, 'keepMounted')
+const shouldRender = computed(() => ctx.mounted.value || props.keepMounted)
+const portalRef = shallowRef<{
+  element?: HTMLElement | null
+} | null>(null)
+const element = computed(() => unref(portalRef.value?.element) ?? null)
+provide(tooltipPortalContextKey, keepMounted)
+defineExpose({
+  element,
+})
+</script>
+<script lang="ts">
+export interface TooltipPortalState {}
+export interface TooltipPortalProps
+  extends BaseUIComponentProps<TooltipPortalState> {
+  /**
+   * Whether to keep the portal mounted in the DOM while the popup is hidden.
+   * @default false
+   */
+  keepMounted?: boolean
+  /**
+   * A parent element to render the portal element into.
+   */
+  container?: FloatingPortal.Container
+  /**
+   * Teleport target.
+   * @default 'body'
+   */
+  to?: FloatingPortal.Target
+  /**
+   * Disables Vue Teleport while preserving tooltip mounting behavior.
+   * @default false
+   */
+  disabled?: boolean
+}
+</script>
+<template>
+  <FloatingPortalLite
+    v-if="shouldRender"
+    ref="portalRef"
+    :as="props.as"
+    :class="props.class"
+    :style="props.style"
+    :container="props.container"
+    :to="props.to"
+    :disabled="props.disabled"
+    v-bind="attrs"
+  >
+    <slot />
+  </FloatingPortalLite>
+</template>

package/src/tooltip/portal/TooltipPortalContext.ts ADDED Viewed

@@ -0,0 +1,19 @@
+import type { InjectionKey, Ref } from 'vue'
+import { inject } from 'vue'
+export type TooltipPortalContext = Ref<boolean>
+export const tooltipPortalContextKey: InjectionKey<TooltipPortalContext>
+  = Symbol('TooltipPortalContext')
+export function useTooltipPortalContext(): TooltipPortalContext {
+  const context = inject(tooltipPortalContextKey, undefined)
+  if (context === undefined) {
+    throw new Error(
+      'Base UI Vue: <TooltipPortal> is missing.',
+    )
+  }
+  return context
+}

package/src/tooltip/positioner/TooltipPositioner.vue ADDED Viewed

@@ -0,0 +1,221 @@
+<script setup lang="ts">
+import type {
+  Padding,
+  Placement,
+  Strategy,
+  VirtualElement,
+} from '../../floating-ui-vue'
+import type { BaseUIComponentProps } from '../../utils/types'
+import type {
+  Align,
+  Boundary,
+  CollisionAvoidance,
+  OffsetFunction,
+  Side,
+} from '../../utils/useAnchorPositioning'
+import type { TooltipInstantType } from '../root/TooltipRoot.vue'
+import { computed, provide, useAttrs } from 'vue'
+import { adaptiveOrigin } from '../../utils/adaptiveOriginMiddleware'
+import { POPUP_COLLISION_AVOIDANCE, useAnchorPositioning } from '../../utils/useAnchorPositioning'
+import { useMergedRefs } from '../../utils/useMergedRefs'
+import { usePositioner } from '../../utils/usePositioner'
+import { useTooltipPortalContext } from '../portal/TooltipPortalContext'
+import { useTooltipRootContext } from '../root/TooltipRootContext'
+import { tooltipPositionerContextKey } from './TooltipPositionerContext'
+/**
+ * Positions the tooltip against the trigger.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Vue Tooltip](https://baseui-vue.com/docs/components/tooltip)
+ */
+defineOptions({
+  name: 'TooltipPositioner',
+  inheritAttrs: false,
+})
+const props = withDefaults(defineProps<TooltipPositionerProps>(), {
+  as: 'div',
+  positionMethod: 'absolute',
+  side: 'top',
+  align: 'center',
+  sideOffset: 0,
+  alignOffset: 0,
+  collisionBoundary: 'clipping-ancestors',
+  collisionPadding: 5,
+  arrowPadding: 5,
+  sticky: false,
+  disableAnchorTracking: false,
+  collisionAvoidance: () => POPUP_COLLISION_AVOIDANCE,
+})
+const attrs = useAttrs()
+const ctx = useTooltipRootContext()
+const portalKeepMounted = useTooltipPortalContext()
+const reference = computed(() => props.anchor ?? ctx.activeTrigger.value?.element ?? null)
+const positioning = useAnchorPositioning({
+  anchor: reference,
+  positionMethod: () => props.positionMethod,
+  mounted: () => ctx.mounted.value,
+  keepMounted: () => portalKeepMounted.value,
+  side: () => props.side,
+  sideOffset: () => props.sideOffset,
+  align: () => props.align,
+  alignOffset: () => props.alignOffset,
+  collisionBoundary: () => props.collisionBoundary,
+  collisionPadding: () => props.collisionPadding,
+  sticky: () => props.sticky,
+  arrowPadding: () => props.arrowPadding,
+  disableAnchorTracking: () => props.disableAnchorTracking,
+  collisionAvoidance: () => props.collisionAvoidance,
+  adaptiveOrigin: () => ctx.hasViewport.value ? adaptiveOrigin : undefined,
+  positionerSizeVars: () => !ctx.hasViewport.value,
+  autoUpdateOptions: () => ({
+    animationFrame: ctx.trackCursorAxis.value === 'both',
+  }),
+})
+const shouldRender = computed(() => ctx.mounted.value || portalKeepMounted.value)
+const inert = computed(() =>
+  !ctx.open.value || ctx.trackCursorAxis.value === 'both' || ctx.disableHoverablePopup.value,
+)
+const state = computed<TooltipPositionerState>(() => ({
+  open: ctx.open.value,
+  side: positioning.side.value,
+  align: positioning.align.value,
+  anchorHidden: positioning.anchorHidden.value,
+  instant: ctx.trackCursorAxis.value !== 'none' ? 'tracking-cursor' : ctx.instantType.value,
+}))
+const positionerProps = computed(() => {
+  return attrs as Record<string, any>
+})
+const {
+  tag,
+  mergedProps,
+  renderless,
+  ref: renderRef,
+} = usePositioner({
+  as: props.as,
+  class: props.class,
+  style: props.style,
+}, state, {
+  styles: positioning.positionerStyles,
+  transitionStatus: ctx.transitionStatus,
+  props: positionerProps,
+  refs: useMergedRefs(positioning.positionerRef, ctx.positionerRef),
+  hidden: () => !ctx.mounted.value,
+  inert,
+})
+provide(tooltipPositionerContextKey, positioning)
+</script>
+<script lang="ts">
+export type TooltipSide = Side
+export type TooltipAlign = Align
+export type TooltipPositionerInstantType = TooltipInstantType | 'tracking-cursor'
+export type TooltipFloatingPlacement = Placement
+export interface TooltipPositionerState {
+  /**
+   * Whether the tooltip is currently open.
+   */
+  open: boolean
+  /**
+   * The side of the anchor the component is placed on.
+   */
+  side: TooltipSide
+  /**
+   * The alignment of the component relative to the anchor.
+   */
+  align: TooltipAlign
+  /**
+   * Whether the anchor element is hidden.
+   */
+  anchorHidden: boolean
+  /**
+   * Whether CSS transitions should be disabled.
+   */
+  instant: TooltipPositionerInstantType
+}
+export interface TooltipPositionerProps
+  extends BaseUIComponentProps<TooltipPositionerState> {
+  /**
+   * An element to position the popup against.
+   * By default, the popup will be positioned against the trigger.
+   */
+  anchor?: Element | VirtualElement | null
+  /**
+   * Determines which CSS `position` property to use.
+   * @default 'absolute'
+   */
+  positionMethod?: Strategy
+  /**
+   * Which side of the anchor element to align the popup against.
+   * May automatically change to avoid collisions.
+   * @default 'top'
+   */
+  side?: TooltipSide
+  /**
+   * How to align the popup relative to the specified side.
+   * @default 'center'
+   */
+  align?: TooltipAlign
+  /**
+   * Distance between the anchor and the popup in pixels.
+   * @default 0
+   */
+  sideOffset?: number | OffsetFunction
+  /**
+   * Additional offset along the alignment axis in pixels.
+   * @default 0
+   */
+  alignOffset?: number | OffsetFunction
+  /**
+   * An element or a rectangle that delimits the area that the popup is confined to.
+   * @default 'clipping-ancestors'
+   */
+  collisionBoundary?: Boundary
+  /**
+   * Additional space to maintain from the edge of the collision boundary.
+   * @default 5
+   */
+  collisionPadding?: Padding
+  /**
+   * Minimum distance to maintain between the arrow and the edges of the popup.
+   *
+   * Use it to prevent the arrow element from hanging out of the rounded corners of a popup.
+   * @default 5
+   */
+  arrowPadding?: Padding
+  /**
+   * Whether to maintain the popup in the viewport after
+   * the anchor element was scrolled out of view.
+   * @default false
+   */
+  sticky?: boolean
+  /**
+   * Whether to disable the popup from tracking any layout shift of its positioning anchor.
+   * @default false
+   */
+  disableAnchorTracking?: boolean
+  /**
+   * Determines how to handle collisions when positioning the popup.
+   * @default { fallbackAxisSide: 'end' }
+   */
+  collisionAvoidance?: CollisionAvoidance
+}
+</script>
+<template>
+  <slot v-if="renderless && shouldRender" :ref="renderRef" :props="mergedProps" :state="state" />
+  <component :is="tag" v-else-if="shouldRender" :ref="renderRef" v-bind="mergedProps">
+    <slot :state="state" />
+  </component>
+</template>

package/src/tooltip/positioner/TooltipPositionerContext.ts ADDED Viewed

@@ -0,0 +1,23 @@
+import type { InjectionKey } from 'vue'
+import type { UseAnchorPositioningReturnValue } from '../../utils/useAnchorPositioning'
+import { inject } from 'vue'
+export type TooltipPositionerContext = Pick<
+  UseAnchorPositioningReturnValue,
+  'side' | 'align' | 'arrowRef' | 'arrowUncentered' | 'arrowStyles'
+>
+export const tooltipPositionerContextKey: InjectionKey<TooltipPositionerContext>
+  = Symbol('TooltipPositionerContext')
+export function useTooltipPositionerContext(): TooltipPositionerContext {
+  const context = inject(tooltipPositionerContextKey, undefined)
+  if (context === undefined) {
+    throw new Error(
+      'Base UI Vue: TooltipPositionerContext is missing. Tooltip parts must be placed within <TooltipPositioner>.',
+    )
+  }
+  return context
+}

package/src/tooltip/positioner/TooltipPositionerCssVars.ts ADDED Viewed

@@ -0,0 +1,27 @@
+export enum TooltipPositionerCssVars {
+  /**
+   * The available width between the trigger and the edge of the viewport.
+   * @type {number}
+   */
+  availableWidth = '--available-width',
+  /**
+   * The available height between the trigger and the edge of the viewport.
+   * @type {number}
+   */
+  availableHeight = '--available-height',
+  /**
+   * The anchor's width.
+   * @type {number}
+   */
+  anchorWidth = '--anchor-width',
+  /**
+   * The anchor's height.
+   * @type {number}
+   */
+  anchorHeight = '--anchor-height',
+  /**
+   * The coordinates that this element is anchored to. Used for animations and transitions.
+   * @type {string}
+   */
+  transformOrigin = '--transform-origin',
+}

package/src/tooltip/positioner/TooltipPositionerDataAttributes.ts ADDED Viewed

@@ -0,0 +1,26 @@
+import { CommonPopupDataAttributes } from '../../utils/popupStateMapping'
+export enum TooltipPositionerDataAttributes {
+  /**
+   * Present when the tooltip is open.
+   */
+  open = CommonPopupDataAttributes.open,
+  /**
+   * Present when the tooltip is closed.
+   */
+  closed = CommonPopupDataAttributes.closed,
+  /**
+   * Present when the anchor is hidden.
+   */
+  anchorHidden = CommonPopupDataAttributes.anchorHidden,
+  /**
+   * Indicates which side the popup is positioned relative to the trigger.
+   * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
+   */
+  side = CommonPopupDataAttributes.side,
+  /**
+   * Indicates how the popup is aligned relative to specified side.
+   * @type {'start' | 'center' | 'end'}
+   */
+  align = CommonPopupDataAttributes.align,
+}

package/src/tooltip/provider/TooltipProvider.vue ADDED Viewed

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import { computed, provide, shallowRef, toRef } from 'vue'
+import { OPEN_DELAY } from '../utils/constants'
+import { tooltipProviderContextKey } from './TooltipProviderContext'
+/**
+ * Provides a shared delay for multiple tooltips. The grouping logic ensures that
+ * once a tooltip becomes visible, the adjacent tooltips will be shown instantly.
+ *
+ * Documentation: [Base UI Vue Tooltip](https://baseui-vue.com/docs/components/tooltip)
+ */
+defineOptions({
+  name: 'TooltipProvider',
+})
+const props = withDefaults(defineProps<TooltipProviderProps>(), {
+  timeout: 400,
+})
+const lastCloseTime = shallowRef<number | null>(null)
+const delay = toRef(props, 'delay')
+const closeDelay = toRef(props, 'closeDelay')
+const timeout = computed(() => props.timeout)
+provide(tooltipProviderContextKey, {
+  delay,
+  closeDelay,
+  timeout,
+  getOpenDelay(triggerDelay) {
+    const now = Date.now()
+    const instant = lastCloseTime.value != null && now - lastCloseTime.value <= timeout.value
+    if (instant) {
+      return { delay: 0, instant: true }
+    }
+    return {
+      delay: triggerDelay ?? delay.value ?? OPEN_DELAY,
+      instant: false,
+    }
+  },
+  getCloseDelay(triggerCloseDelay) {
+    return triggerCloseDelay ?? closeDelay.value ?? 0
+  },
+  notifyOpen() {
+    lastCloseTime.value = null
+  },
+  notifyClose() {
+    lastCloseTime.value = Date.now()
+  },
+})
+</script>
+<script lang="ts">
+export interface TooltipProviderState {}
+export interface TooltipProviderProps {
+  /**
+   * How long to wait before opening a tooltip. Specified in milliseconds.
+   */
+  delay?: number
+  /**
+   * How long to wait before closing a tooltip. Specified in milliseconds.
+   */
+  closeDelay?: number
+  /**
+   * Another tooltip will open instantly if the previous tooltip
+   * is closed within this timeout. Specified in milliseconds.
+   * @default 400
+   */
+  timeout?: number
+}
+</script>
+<template>
+  <slot />
+</template>

package/src/tooltip/provider/TooltipProviderContext.ts ADDED Viewed

@@ -0,0 +1,19 @@
+import type { InjectionKey, Ref } from 'vue'
+import { inject } from 'vue'
+export interface TooltipProviderContext {
+  delay: Ref<number | undefined>
+  closeDelay: Ref<number | undefined>
+  timeout: Readonly<Ref<number>>
+  getOpenDelay: (triggerDelay: number | undefined) => { delay: number, instant: boolean }
+  getCloseDelay: (triggerCloseDelay: number | undefined) => number
+  notifyOpen: () => void
+  notifyClose: () => void
+}
+export const tooltipProviderContextKey: InjectionKey<TooltipProviderContext>
+  = Symbol('TooltipProviderContext')
+export function useTooltipProviderContext(): TooltipProviderContext | undefined {
+  return inject(tooltipProviderContextKey, undefined)
+}