base-ui-vue 0.3.0 → 0.5.0

package/src/tabs/tab/TabsTab.vue

@@ -0,0 +1,274 @@
+<script setup lang="ts">
+import type { BaseUIChangeEventDetails } from '../../utils/createBaseUIEventDetails'
+import type { BaseUIComponentProps, NativeButtonProps, Orientation } from '../../utils/types'
+import type { TabsRootChangeEventReason } from '../root/TabsRoot.vue'
+import { computed, ref, useAttrs, watch } from 'vue'
+import { ACTIVE_COMPOSITE_ITEM } from '../../composite/constants'
+import { useCompositeItem } from '../../composite/item/useCompositeItem'
+import { activeElement, contains } from '../../floating-ui-vue/utils'
+import { mergeProps } from '../../merge-props/mergeProps'
+import { useButton } from '../../use-button'
+import { createChangeEventDetails } from '../../utils/createBaseUIEventDetails'
+import { ownerDocument } from '../../utils/owner'
+import { REASONS } from '../../utils/reasons'
+import { useBaseUiId } from '../../utils/useBaseUiId'
+import { useMergedRefs } from '../../utils/useMergedRefs'
+import { useRenderElement } from '../../utils/useRenderElement'
+import { useTabsListContext } from '../list/TabsListContext'
+import { tabsStateAttributesMapping } from '../root/stateAttributesMapping'
+import { useTabsRootContext } from '../root/TabsRootContext'
+import { areTabValuesEqual } from '../utils/areTabValuesEqual'
+
+export type TabsTabValue = unknown
+export type TabsTabActivationDirection = 'left' | 'right' | 'up' | 'down' | 'none'
+
+export interface TabsTabPosition {
+  left: number
+  right: number
+  top: number
+  bottom: number
+}
+
+export interface TabsTabSize {
+  width: number
+  height: number
+}
+
+export interface TabsTabMetadata {
+  disabled: boolean
+  id: string | undefined
+  value: TabsTabValue | undefined
+}
+
+export interface TabsTabState {
+  /**
+   * Whether the component should ignore user interaction.
+   */
+  disabled: boolean
+  /**
+   * Whether the component is active.
+   */
+  active: boolean
+  /**
+   * The component orientation.
+   */
+  orientation: Orientation
+  /**
+   * The direction used for tab activation.
+   */
+  tabActivationDirection: TabsTabActivationDirection
+}
+
+export interface TabsTabProps
+  extends NativeButtonProps, BaseUIComponentProps<TabsTabState> {
+  /**
+   * The value of the Tab.
+   */
+  value?: TabsTabValue
+  /**
+   * Whether the Tab is disabled.
+   */
+  disabled?: boolean
+  /**
+   * The id of the Tab element.
+   */
+  id?: string
+}
+
+/**
+ * An individual interactive tab button that toggles the corresponding panel.
+ * Renders a `<button>` element.
+ *
+ * Documentation: [Base UI Vue Tabs](https://baseui-vue.com/docs/components/tabs)
+ */
+defineOptions({
+  name: 'TabsTab',
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<TabsTabProps>(), {
+  as: 'button',
+  disabled: false,
+  nativeButton: true,
+})
+
+const attrs = useAttrs()
+const rootCtx = useTabsRootContext()
+const listCtx = useTabsListContext()
+
+const id = useBaseUiId(props.id)
+const tabMetadata = computed<TabsTabMetadata>(() => ({
+  disabled: props.disabled,
+  id,
+  value: props.value,
+}))
+
+const {
+  compositeProps,
+  compositeRef,
+  index,
+} = useCompositeItem<TabsTabMetadata>({
+  metadata: () => tabMetadata.value,
+})
+
+const value = computed<TabsTabValue>(() => props.value ?? index.value)
+const active = computed(() => areTabValuesEqual(value.value, rootCtx.value.value))
+const isNavigating = ref(false)
+const isPressing = ref(false)
+const isMainButton = ref(false)
+const tabElementRef = ref<HTMLElement | null>(null)
+
+watch(
+  tabElementRef,
+  (tabElement, _, onCleanup) => {
+    if (!tabElement) {
+      return
+    }
+    const cleanup = listCtx.registerTabResizeObserverElement(tabElement)
+    onCleanup(cleanup)
+  },
+  { flush: 'post' },
+)
+
+watch(
+  [active, index, listCtx.highlightedTabIndex, listCtx.tabsListElement],
+  () => {
+    if (isNavigating.value) {
+      isNavigating.value = false
+      return
+    }
+
+    if (!(active.value && index.value > -1 && listCtx.highlightedTabIndex.value !== index.value)) {
+      return
+    }
+
+    const listElement = listCtx.tabsListElement.value
+    if (listElement != null) {
+      const doc = ownerDocument(listElement)
+      const focusedElement = doc ? activeElement(doc) : null
+      if (focusedElement && contains(listElement, focusedElement)) {
+        return
+      }
+    }
+
+    if (!props.disabled) {
+      listCtx.setHighlightedTabIndex(index.value)
+    }
+  },
+  { flush: 'post' },
+)
+
+const { getButtonProps, buttonRef } = useButton({
+  disabled: () => props.disabled,
+  native: () => props.nativeButton ?? true,
+  focusableWhenDisabled: () => true,
+})
+
+const tabPanelId = computed(() => rootCtx.getTabPanelIdByValue(value.value))
+
+function createTabDetails(event?: Event) {
+  return createChangeEventDetails<TabsRootChangeEventReason, { activationDirection: TabsTabActivationDirection }>(
+    REASONS.none,
+    event,
+    undefined,
+    { activationDirection: 'none' },
+  ) as BaseUIChangeEventDetails<TabsRootChangeEventReason, { activationDirection: TabsTabActivationDirection }>
+}
+
+function handleClick(event: MouseEvent) {
+  if (event.button !== 0 || active.value || props.disabled) {
+    return
+  }
+
+  listCtx.onTabActivation(value.value, createTabDetails(event))
+}
+
+function handleFocus(event: FocusEvent) {
+  if (active.value) {
+    return
+  }
+
+  if (index.value > -1 && !props.disabled) {
+    listCtx.setHighlightedTabIndex(index.value)
+  }
+
+  if (props.disabled) {
+    return
+  }
+
+  if (
+    listCtx.activateOnFocus.value
+    && (!isPressing.value || (isPressing.value && isMainButton.value))
+  ) {
+    listCtx.onTabActivation(value.value, createTabDetails(event))
+  }
+}
+
+function handlePointerDown(event: PointerEvent) {
+  if (active.value || props.disabled) {
+    return
+  }
+
+  isPressing.value = true
+
+  function handlePointerUp() {
+    isPressing.value = false
+    isMainButton.value = false
+  }
+
+  if (!event.button || event.button === 0) {
+    isMainButton.value = true
+
+    const doc = ownerDocument(event.currentTarget as Element)
+    doc?.addEventListener('pointerup', handlePointerUp, { once: true })
+  }
+}
+
+const state = computed<TabsTabState>(() => ({
+  disabled: props.disabled,
+  active: active.value,
+  orientation: rootCtx.orientation.value,
+  tabActivationDirection: rootCtx.tabActivationDirection.value,
+}))
+
+function createTabProps() {
+  return getButtonProps(mergeProps(
+    compositeProps.value,
+    {
+      'role': 'tab',
+      'aria-controls': tabPanelId.value,
+      'aria-selected': active.value,
+      id,
+      [ACTIVE_COMPOSITE_ITEM]: active.value ? '' : undefined,
+      'onClick': handleClick,
+      'onFocus': handleFocus,
+      'onPointerdown': handlePointerDown,
+      onKeydownCapture() {
+        isNavigating.value = true
+      },
+    },
+    attrs as Record<string, any>,
+  ))
+}
+
+const {
+  tag,
+  mergedProps,
+  renderless,
+  ref: renderRef,
+} = useRenderElement({
+  componentProps: props,
+  state,
+  props: computed(() => createTabProps()),
+  stateAttributesMapping: tabsStateAttributesMapping,
+  defaultTagName: 'button',
+  ref: useMergedRefs(buttonRef, compositeRef, tabElementRef),
+})
+</script>
+
+<template>
+  <slot v-if="renderless" :ref="renderRef" :props="mergedProps" :state="state" />
+  <component :is="tag" v-else :ref="renderRef" v-bind="mergedProps">
+    <slot :state="state" />
+  </component>
+</template>

package/src/tabs/tab/TabsTabDataAttributes.ts

@@ -0,0 +1,20 @@
+export enum TabsTabDataAttributes {
+  /**
+   * Indicates the direction of the activation (based on the previous active tab).
+   * @type {'left' | 'right' | 'up' | 'down' | 'none'}
+   */
+  activationDirection = 'data-activation-direction',
+  /**
+   * Indicates the orientation of the tabs.
+   * @type {'horizontal' | 'vertical'}
+   */
+  orientation = 'data-orientation',
+  /**
+   * Present when the tab is disabled.
+   */
+  disabled = 'data-disabled',
+  /**
+   * Present when the tab is active.
+   */
+  active = 'data-active',
+}

package/src/tabs/utils/areTabValuesEqual.ts

@@ -0,0 +1,6 @@
+import type { TabsTabValue } from '../tab/TabsTab.vue'
+import { toRaw } from 'vue'
+
+export function areTabValuesEqual(a: TabsTabValue | undefined, b: TabsTabValue | undefined) {
+  return a === b || toRaw(a) === toRaw(b)
+}

package/src/tooltip/arrow/TooltipArrow.vue

@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import type { BaseUIComponentProps } from '../../utils/types'
+import type { Align, Side } from '../../utils/useAnchorPositioning'
+import type { TooltipInstantType } from '../root/TooltipRoot.vue'
+import { computed, useAttrs } from 'vue'
+import { popupStateMapping } from '../../utils/popupStateMapping'
+import { useRenderElement } from '../../utils/useRenderElement'
+import { useTooltipPositionerContext } from '../positioner/TooltipPositionerContext'
+import { useTooltipRootContext } from '../root/TooltipRootContext'
+import { TooltipArrowDataAttributes } from './TooltipArrowDataAttributes'
+
+/**
+ * Displays an element positioned against the tooltip anchor.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Vue Tooltip](https://baseui-vue.com/docs/components/tooltip)
+ */
+defineOptions({
+  name: 'TooltipArrow',
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<TooltipArrowProps>(), {
+  as: 'div',
+})
+
+const attrs = useAttrs()
+const ctx = useTooltipRootContext()
+const positioner = useTooltipPositionerContext()
+
+const state = computed<TooltipArrowState>(() => ({
+  open: ctx.open.value,
+  side: positioner.side.value,
+  align: positioner.align.value,
+  uncentered: positioner.arrowUncentered.value,
+  instant: ctx.instantType.value,
+}))
+
+const arrowStyle = computed(() => {
+  return positioner.arrowStyles.value
+})
+
+const arrowProps = computed(() => {
+  const resolvedStyle = typeof props.style === 'function'
+    ? props.style(state.value)
+    : props.style
+
+  return {
+    ...attrs,
+    'aria-hidden': 'true',
+    'style': [
+      arrowStyle.value,
+      resolvedStyle,
+    ],
+  }
+})
+
+const {
+  tag,
+  mergedProps,
+  renderless,
+  ref: renderRef,
+} = useRenderElement({
+  componentProps: {
+    as: props.as,
+    class: props.class,
+  },
+  state,
+  props: arrowProps,
+  stateAttributesMapping: {
+    ...popupStateMapping,
+    uncentered(value) {
+      return value ? { [TooltipArrowDataAttributes.uncentered]: '' } : null
+    },
+    instant(value) {
+      return value ? { [TooltipArrowDataAttributes.instant]: value } : null
+    },
+  },
+  defaultTagName: 'div',
+  ref: positioner.arrowRef,
+})
+</script>
+
+<script lang="ts">
+export interface TooltipArrowState {
+  /**
+   * Whether the tooltip is currently open.
+   */
+  open: boolean
+  /**
+   * The side of the anchor the component is placed on.
+   */
+  side: Side
+  /**
+   * The alignment of the component relative to the anchor.
+   */
+  align: Align
+  /**
+   * Whether the arrow cannot be centered on the anchor.
+   */
+  uncentered: boolean
+  /**
+   * Whether transitions should be skipped.
+   */
+  instant: TooltipInstantType
+}
+
+export interface TooltipArrowProps extends BaseUIComponentProps<TooltipArrowState> {}
+</script>
+
+<template>
+  <slot v-if="renderless" :ref="renderRef" :props="mergedProps" :state="state" />
+  <component :is="tag" v-else :ref="renderRef" v-bind="mergedProps">
+    <slot :state="state" />
+  </component>
+</template>

package/src/tooltip/arrow/TooltipArrowDataAttributes.ts

@@ -0,0 +1,31 @@
+import { CommonPopupDataAttributes } from '../../utils/popupStateMapping'
+
+export enum TooltipArrowDataAttributes {
+  /**
+   * Present when the tooltip is open.
+   */
+  open = CommonPopupDataAttributes.open,
+  /**
+   * Present when the tooltip is closed.
+   */
+  closed = CommonPopupDataAttributes.closed,
+  /**
+   * 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,
+  /**
+   * Present when the tooltip arrow is uncentered.
+   */
+  uncentered = 'data-uncentered',
+  /**
+   * Present if animations should be instant.
+   * @type {'delay' | 'dismiss' | 'focus'}
+   */
+  instant = 'data-instant',
+}

package/src/tooltip/index.ts

@@ -0,0 +1,54 @@
+export { default as TooltipArrow } from './arrow/TooltipArrow.vue'
+export type { TooltipArrowProps, TooltipArrowState } from './arrow/TooltipArrow.vue'
+export { TooltipArrowDataAttributes } from './arrow/TooltipArrowDataAttributes'
+export { default as TooltipPopup } from './popup/TooltipPopup.vue'
+export type { TooltipPopupProps, TooltipPopupState } from './popup/TooltipPopup.vue'
+export { TooltipPopupDataAttributes } from './popup/TooltipPopupDataAttributes'
+export { default as TooltipPortal } from './portal/TooltipPortal.vue'
+export type { TooltipPortalProps, TooltipPortalState } from './portal/TooltipPortal.vue'
+export { tooltipPortalContextKey, useTooltipPortalContext } from './portal/TooltipPortalContext'
+export { default as TooltipPositioner } from './positioner/TooltipPositioner.vue'
+export type {
+  TooltipAlign,
+  TooltipFloatingPlacement,
+  TooltipPositionerInstantType,
+  TooltipPositionerProps,
+  TooltipPositionerState,
+  TooltipSide,
+} from './positioner/TooltipPositioner.vue'
+export { tooltipPositionerContextKey, useTooltipPositionerContext } from './positioner/TooltipPositionerContext'
+export type { TooltipPositionerContext } from './positioner/TooltipPositionerContext'
+export { TooltipPositionerCssVars } from './positioner/TooltipPositionerCssVars'
+export { TooltipPositionerDataAttributes } from './positioner/TooltipPositionerDataAttributes'
+export { default as TooltipProvider } from './provider/TooltipProvider.vue'
+export type { TooltipProviderProps, TooltipProviderState } from './provider/TooltipProvider.vue'
+export { tooltipProviderContextKey, useTooltipProviderContext } from './provider/TooltipProviderContext'
+export type { TooltipProviderContext } from './provider/TooltipProviderContext'
+export { default as TooltipRoot } from './root/TooltipRoot.vue'
+export type {
+  TooltipInstantType,
+  TooltipRootActions,
+  TooltipRootChangeEventDetails,
+  TooltipRootChangeEventReason,
+  TooltipRootProps,
+  TooltipRootState,
+  TooltipTrackCursorAxis,
+} from './root/TooltipRoot.vue'
+export { tooltipRootContextKey, useTooltipRootContext } from './root/TooltipRootContext'
+export type { TooltipRootContext } from './root/TooltipRootContext'
+export {
+  createTooltipHandle,
+  TooltipHandle,
+  TooltipStore,
+} from './store/TooltipHandle'
+export type {
+  TooltipRootController,
+  TooltipTriggerRecord,
+} from './store/TooltipHandle'
+export { default as TooltipTrigger } from './trigger/TooltipTrigger.vue'
+export type { TooltipTriggerProps, TooltipTriggerState } from './trigger/TooltipTrigger.vue'
+export { TooltipTriggerDataAttributes } from './trigger/TooltipTriggerDataAttributes'
+export { default as TooltipViewport } from './viewport/TooltipViewport.vue'
+export type { TooltipViewportProps, TooltipViewportState } from './viewport/TooltipViewport.vue'
+export { TooltipViewportCssVars } from './viewport/TooltipViewportCssVars'
+export { TooltipViewportDataAttributes } from './viewport/TooltipViewportDataAttributes'

package/src/tooltip/popup/TooltipPopup.vue

@@ -0,0 +1,142 @@
+<script setup lang="ts">
+import type { StateAttributesMapping } from '../../utils/getStateAttributesProps'
+import type { BaseUIComponentProps } from '../../utils/types'
+import type { Align, Side } from '../../utils/useAnchorPositioning'
+import type { TransitionStatus } from '../../utils/useTransitionStatus'
+import type { TooltipInstantType } from '../root/TooltipRoot.vue'
+import { computed, shallowRef, useAttrs, watch } from 'vue'
+import { useHoverFloatingInteraction } from '../../floating-ui-vue'
+import { mergeProps } from '../../merge-props/mergeProps'
+import { getDisabledMountTransitionStyles } from '../../utils/getDisabledMountTransitionStyles'
+import { popupStateMapping } from '../../utils/popupStateMapping'
+import { transitionStatusMapping } from '../../utils/stateAttributesMapping'
+import { useBaseUiId } from '../../utils/useBaseUiId'
+import { useMergedRefs } from '../../utils/useMergedRefs'
+import { useOpenChangeComplete } from '../../utils/useOpenChangeComplete'
+import { useRenderElement } from '../../utils/useRenderElement'
+import { useTooltipPositionerContext } from '../positioner/TooltipPositionerContext'
+import { useTooltipRootContext } from '../root/TooltipRootContext'
+
+/**
+ * A container for the tooltip contents.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Tooltip](https://baseui-vue.com/docs/components/tooltip)
+ */
+defineOptions({
+  name: 'TooltipPopup',
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<TooltipPopupProps>(), {
+  as: 'div',
+})
+
+const stateAttributesMapping: StateAttributesMapping<TooltipPopupState> = {
+  ...popupStateMapping,
+  ...transitionStatusMapping,
+}
+
+const attrs = useAttrs()
+const ctx = useTooltipRootContext()
+const positioner = useTooltipPositionerContext()
+const generatedId = useBaseUiId(props.id)
+const localPopupRef = shallowRef<HTMLElement | null>(null)
+
+const state = computed<TooltipPopupState>(() => ({
+  open: ctx.open.value,
+  side: positioner.side.value,
+  align: positioner.align.value,
+  instant: ctx.instantType.value,
+  transitionStatus: ctx.transitionStatus.value,
+}))
+
+watch(
+  () => props.id,
+  () => ctx.setPopupId(generatedId),
+  { immediate: true },
+)
+
+useOpenChangeComplete({
+  open: () => ctx.open.value,
+  ref: localPopupRef,
+  onComplete() {
+    ctx.completeOpenChange()
+    ctx.instantType.value = undefined
+  },
+})
+
+useHoverFloatingInteraction(ctx.floatingRootContext, {
+  enabled: () => !ctx.disabled.value && !ctx.disableHoverablePopup.value,
+  closeDelay: () => ctx.getCloseDelay(ctx.activeTrigger.value?.closeDelay),
+})
+
+const popupProps = computed(() => {
+  return mergeProps(
+    getDisabledMountTransitionStyles(ctx.transitionStatus.value),
+    ctx.dismiss?.floating,
+    attrs,
+    {
+      id: generatedId,
+      role: 'tooltip',
+    },
+  )
+})
+
+const {
+  tag,
+  mergedProps,
+  renderless,
+  ref: renderRef,
+} = useRenderElement({
+  componentProps: {
+    as: props.as,
+    class: props.class,
+    style: props.style,
+  },
+  state,
+  props: popupProps,
+  stateAttributesMapping,
+  defaultTagName: 'div',
+  ref: useMergedRefs(localPopupRef, ctx.popupRef),
+})
+</script>
+
+<script lang="ts">
+export interface TooltipPopupState {
+  /**
+   * Whether the tooltip is currently open.
+   */
+  open: boolean
+  /**
+   * The side of the anchor the component is placed on.
+   */
+  side: Side
+  /**
+   * The alignment of the component relative to the anchor.
+   */
+  align: Align
+  /**
+   * Whether transitions should be skipped.
+   */
+  instant: TooltipInstantType
+  /**
+   * The transition status of the component.
+   */
+  transitionStatus: TransitionStatus
+}
+
+export interface TooltipPopupProps extends BaseUIComponentProps<TooltipPopupState> {
+  /**
+   * The popup id used by the trigger while open.
+   */
+  id?: string
+}
+</script>
+
+<template>
+  <slot v-if="renderless" :ref="renderRef" :props="mergedProps" :state="state" />
+  <component :is="tag" v-else :ref="renderRef" v-bind="mergedProps">
+    <slot :state="state" />
+  </component>
+</template>

package/src/tooltip/popup/TooltipPopupDataAttributes.ts

@@ -0,0 +1,35 @@
+import { CommonPopupDataAttributes } from '../../utils/popupStateMapping'
+
+export enum TooltipPopupDataAttributes {
+  /**
+   * Present when the tooltip is open.
+   */
+  open = CommonPopupDataAttributes.open,
+  /**
+   * Present when the tooltip is closed.
+   */
+  closed = CommonPopupDataAttributes.closed,
+  /**
+   * Present when the tooltip is animating in.
+   */
+  startingStyle = CommonPopupDataAttributes.startingStyle,
+  /**
+   * Present when the tooltip is animating out.
+   */
+  endingStyle = CommonPopupDataAttributes.endingStyle,
+  /**
+   * 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,
+  /**
+   * Present if animations should be instant.
+   * @type {'delay' | 'dismiss' | 'focus'}
+   */
+  instant = 'data-instant',
+}