base-ui-vue 0.3.0 → 0.5.0

package/src/tabs/indicator/TabsIndicatorCssVars.ts

@@ -0,0 +1,26 @@
+export enum TabsIndicatorCssVars {
+  /**
+   * Indicates the distance on the left side from the parent's container if the tab is active.
+   */
+  activeTabLeft = '--active-tab-left',
+  /**
+   * Indicates the distance on the right side from the parent's container if the tab is active.
+   */
+  activeTabRight = '--active-tab-right',
+  /**
+   * Indicates the distance on the top side from the parent's container if the tab is active.
+   */
+  activeTabTop = '--active-tab-top',
+  /**
+   * Indicates the distance on the bottom side from the parent's container if the tab is active.
+   */
+  activeTabBottom = '--active-tab-bottom',
+  /**
+   * Indicates the width of the tab if it is active.
+   */
+  activeTabWidth = '--active-tab-width',
+  /**
+   * Indicates the height of the tab if it is active.
+   */
+  activeTabHeight = '--active-tab-height',
+}

package/src/tabs/indicator/TabsIndicatorDataAttributes.ts

@@ -0,0 +1,12 @@
+export enum TabsIndicatorDataAttributes {
+  /**
+   * 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',
+}

package/src/tabs/indicator/prehydrationScript.min.ts

@@ -0,0 +1,5 @@
+// This file is autogenerated. Do not edit it directly.
+// To update it, modify the corresponding source file and run `pnpm inline-scripts`.
+
+// prettier-ignore
+export const script = "(function prehydration() {\n  const indicator = document.currentScript?.previousElementSibling\n  if (!indicator) {\n    return\n  }\n\n  const tabsList = indicator.closest('[role=\"tablist\"]')\n  if (!tabsList) {\n    return\n  }\n\n  const activeTab = tabsList.querySelector('[data-active]')\n  if (!activeTab) {\n    return\n  }\n\n  if (activeTab.offsetWidth === 0 || tabsList.offsetWidth === 0) {\n    return\n  }\n\n  let left = 0\n  let right = 0\n  let top = 0\n  let bottom = 0\n  let width = 0\n  let height = 0\n\n  function getCssDimensions(element) {\n    const css = getComputedStyle(element)\n    let cssWidth = Number.parseFloat(css.width) || 0\n    let cssHeight = Number.parseFloat(css.height) || 0\n    const shouldFallback\n      = Math.round(cssWidth) !== element.offsetWidth\n        || Math.round(cssHeight) !== element.offsetHeight\n\n    if (shouldFallback) {\n      cssWidth = element.offsetWidth\n      cssHeight = element.offsetHeight\n    }\n\n    return {\n      width: cssWidth,\n      height: cssHeight,\n    }\n  }\n\n  const { width: computedWidth, height: computedHeight } = getCssDimensions(activeTab)\n  const { width: tabsListWidth, height: tabsListHeight } = getCssDimensions(tabsList)\n  const tabRect = activeTab.getBoundingClientRect()\n  const tabsListRect = tabsList.getBoundingClientRect()\n  const scaleX = tabsListWidth > 0 ? tabsListRect.width / tabsListWidth : 1\n  const scaleY = tabsListHeight > 0 ? tabsListRect.height / tabsListHeight : 1\n  const hasNonZeroScale\n    = Math.abs(scaleX) > Number.EPSILON && Math.abs(scaleY) > Number.EPSILON\n\n  if (hasNonZeroScale) {\n    const tabLeftDelta = tabRect.left - tabsListRect.left\n    const tabTopDelta = tabRect.top - tabsListRect.top\n\n    left = tabLeftDelta / scaleX + tabsList.scrollLeft - tabsList.clientLeft\n    top = tabTopDelta / scaleY + tabsList.scrollTop - tabsList.clientTop\n  }\n  else {\n    left = activeTab.offsetLeft\n    top = activeTab.offsetTop\n  }\n\n  width = computedWidth\n  height = computedHeight\n  right = tabsList.scrollWidth - left - width\n  bottom = tabsList.scrollHeight - top - height\n\n  function setProp(name, value) {\n    indicator.style.setProperty(`--active-tab-${name}`, `${value}px`)\n  }\n\n  setProp('left', left)\n  setProp('right', right)\n  setProp('top', top)\n  setProp('bottom', bottom)\n  setProp('width', width)\n  setProp('height', height)\n\n  if (width > 0 && height > 0) {\n    indicator.removeAttribute('hidden')\n  }\n})()";

package/src/tabs/indicator/prehydrationScript.template.js

@@ -0,0 +1,87 @@
+(function prehydration() {
+  const indicator = document.currentScript?.previousElementSibling
+  if (!indicator) {
+    return
+  }
+
+  const tabsList = indicator.closest('[role="tablist"]')
+  if (!tabsList) {
+    return
+  }
+
+  const activeTab = tabsList.querySelector('[data-active]')
+  if (!activeTab) {
+    return
+  }
+
+  if (activeTab.offsetWidth === 0 || tabsList.offsetWidth === 0) {
+    return
+  }
+
+  let left = 0
+  let right = 0
+  let top = 0
+  let bottom = 0
+  let width = 0
+  let height = 0
+
+  function getCssDimensions(element) {
+    const css = getComputedStyle(element)
+    let cssWidth = Number.parseFloat(css.width) || 0
+    let cssHeight = Number.parseFloat(css.height) || 0
+    const shouldFallback
+      = Math.round(cssWidth) !== element.offsetWidth
+        || Math.round(cssHeight) !== element.offsetHeight
+
+    if (shouldFallback) {
+      cssWidth = element.offsetWidth
+      cssHeight = element.offsetHeight
+    }
+
+    return {
+      width: cssWidth,
+      height: cssHeight,
+    }
+  }
+
+  const { width: computedWidth, height: computedHeight } = getCssDimensions(activeTab)
+  const { width: tabsListWidth, height: tabsListHeight } = getCssDimensions(tabsList)
+  const tabRect = activeTab.getBoundingClientRect()
+  const tabsListRect = tabsList.getBoundingClientRect()
+  const scaleX = tabsListWidth > 0 ? tabsListRect.width / tabsListWidth : 1
+  const scaleY = tabsListHeight > 0 ? tabsListRect.height / tabsListHeight : 1
+  const hasNonZeroScale
+    = Math.abs(scaleX) > Number.EPSILON && Math.abs(scaleY) > Number.EPSILON
+
+  if (hasNonZeroScale) {
+    const tabLeftDelta = tabRect.left - tabsListRect.left
+    const tabTopDelta = tabRect.top - tabsListRect.top
+
+    left = tabLeftDelta / scaleX + tabsList.scrollLeft - tabsList.clientLeft
+    top = tabTopDelta / scaleY + tabsList.scrollTop - tabsList.clientTop
+  }
+  else {
+    left = activeTab.offsetLeft
+    top = activeTab.offsetTop
+  }
+
+  width = computedWidth
+  height = computedHeight
+  right = tabsList.scrollWidth - left - width
+  bottom = tabsList.scrollHeight - top - height
+
+  function setProp(name, value) {
+    indicator.style.setProperty(`--active-tab-${name}`, `${value}px`)
+  }
+
+  setProp('left', left)
+  setProp('right', right)
+  setProp('top', top)
+  setProp('bottom', bottom)
+  setProp('width', width)
+  setProp('height', height)
+
+  if (width > 0 && height > 0) {
+    indicator.removeAttribute('hidden')
+  }
+})()

package/src/tabs/list/TabsList.vue

@@ -0,0 +1,201 @@
+<script setup lang="ts">
+import type { CompositeMetadata } from '../../composite/list/CompositeList.vue'
+import type { BaseUIComponentProps, HTMLProps } from '../../utils/types'
+import type { TabsRootState } from '../root/TabsRoot.vue'
+import type { TabsTabMetadata, TabsTabValue } from '../tab/TabsTab.vue'
+import { computed, onBeforeUnmount, provide, reactive, ref, useAttrs, watch } from 'vue'
+import CompositeList from '../../composite/list/CompositeList.vue'
+import { compositeRootContextKey } from '../../composite/root/CompositeRootContext'
+import { useCompositeRoot } from '../../composite/root/useCompositeRoot'
+import { useDirection } from '../../direction-provider/DirectionContext'
+import { useRenderElement } from '../../utils/useRenderElement'
+import { tabsStateAttributesMapping } from '../root/stateAttributesMapping'
+import { useTabsRootContext } from '../root/TabsRootContext'
+import { areTabValuesEqual } from '../utils/areTabValuesEqual'
+import { tabsListContextKey } from './TabsListContext'
+
+export interface TabsListState extends TabsRootState {}
+
+export interface TabsListProps extends BaseUIComponentProps<TabsListState> {
+  /**
+   * Whether to automatically change the active tab on arrow key focus.
+   * Otherwise, tabs will be activated using Enter or Space key press.
+   * @default false
+   */
+  activateOnFocus?: boolean
+  /**
+   * Whether to loop keyboard focus back to the first item when the end of the list is reached.
+   * @default true
+   */
+  loopFocus?: boolean
+}
+
+/**
+ * Groups the individual tab buttons.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Vue Tabs](https://baseui-vue.com/docs/components/tabs)
+ */
+defineOptions({
+  name: 'TabsList',
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<TabsListProps>(), {
+  as: 'div',
+  activateOnFocus: false,
+  loopFocus: true,
+})
+
+const attrs = useAttrs()
+const rootCtx = useTabsRootContext()
+const direction = useDirection()
+const highlightedTabIndex = ref(0)
+const tabsListElement = ref<HTMLElement | null>(null)
+const indicatorUpdateListeners = new Set<() => void>()
+const tabResizeObserverElements = new Set<HTMLElement>()
+let resizeObserver: ResizeObserver | null = null
+
+const root = useCompositeRoot({
+  orientation: () => rootCtx.orientation.value,
+  loopFocus: () => props.loopFocus,
+  highlightedIndex: () => highlightedTabIndex.value,
+  onHighlightedIndexChange: index => setHighlightedTabIndex(index),
+  enableHomeAndEndKeys: () => true,
+  stopEventPropagation: () => true,
+  disabledIndices: () => [],
+  direction: () => direction.value,
+  rootRef: tabsListElement,
+})
+
+provide(
+  compositeRootContextKey,
+  reactive({
+    highlightedIndex: root.highlightedIndex,
+    onHighlightedIndexChange: root.onHighlightedIndexChange,
+    highlightItemOnHover: computed(() => false),
+    relayKeyboardEvent: root.relayKeyboardEvent,
+  }),
+)
+
+function notifyIndicatorUpdate() {
+  indicatorUpdateListeners.forEach(listener => listener())
+}
+
+function resetResizeObserver() {
+  resizeObserver?.disconnect()
+  resizeObserver = null
+
+  if (typeof ResizeObserver === 'undefined') {
+    return
+  }
+
+  resizeObserver = new ResizeObserver(notifyIndicatorUpdate)
+
+  if (tabsListElement.value) {
+    resizeObserver.observe(tabsListElement.value)
+  }
+
+  tabResizeObserverElements.forEach((element) => {
+    resizeObserver?.observe(element)
+  })
+}
+
+watch(tabsListElement, resetResizeObserver, { flush: 'post' })
+
+onBeforeUnmount(() => {
+  resizeObserver?.disconnect()
+  resizeObserver = null
+  indicatorUpdateListeners.clear()
+  tabResizeObserverElements.clear()
+})
+
+function registerIndicatorUpdateListener(listener: () => void) {
+  indicatorUpdateListeners.add(listener)
+  return () => {
+    indicatorUpdateListeners.delete(listener)
+  }
+}
+
+function registerTabResizeObserverElement(element: HTMLElement) {
+  tabResizeObserverElements.add(element)
+  resizeObserver?.observe(element)
+  notifyIndicatorUpdate()
+
+  return () => {
+    tabResizeObserverElements.delete(element)
+    resizeObserver?.unobserve(element)
+    notifyIndicatorUpdate()
+  }
+}
+
+function setHighlightedTabIndex(index: number) {
+  highlightedTabIndex.value = index
+}
+
+function onTabActivation(newValue: TabsTabValue, eventDetails: Parameters<typeof rootCtx.onValueChange>[1]) {
+  if (!areTabValuesEqual(newValue, rootCtx.value.value)) {
+    rootCtx.onValueChange(newValue, eventDetails)
+  }
+}
+
+provide(tabsListContextKey, {
+  activateOnFocus: computed(() => props.activateOnFocus),
+  highlightedTabIndex,
+  onTabActivation,
+  registerIndicatorUpdateListener,
+  registerTabResizeObserverElement,
+  setHighlightedTabIndex,
+  tabsListElement,
+})
+
+const state = computed<TabsListState>(() => ({
+  orientation: rootCtx.orientation.value,
+  tabActivationDirection: rootCtx.tabActivationDirection.value,
+}))
+
+const rootProps = computed<HTMLProps>(() => {
+  const externalProps = {
+    ...attrs,
+    role: 'tablist',
+  }
+  const compositeProps = root.getRootProps(externalProps)
+
+  compositeProps['aria-orientation']
+    = rootCtx.orientation.value === 'vertical' ? 'vertical' : undefined
+
+  return compositeProps
+})
+
+const {
+  tag,
+  mergedProps,
+  renderless,
+  ref: renderRef,
+} = useRenderElement({
+  componentProps: props,
+  state,
+  props: rootProps,
+  stateAttributesMapping: tabsStateAttributesMapping,
+  defaultTagName: 'div',
+  ref: root.mergedRef,
+})
+
+function handleMapChange(map: Map<Element, CompositeMetadata<TabsTabMetadata> | null>) {
+  rootCtx.setTabMap(map)
+  root.onMapChange(map)
+  notifyIndicatorUpdate()
+}
+</script>
+
+<template>
+  <CompositeList
+    :elements-ref="root.elementsRef"
+    :on-map-change="handleMapChange"
+  >
+    <slot v-if="renderless" :ref="renderRef" :props="mergedProps" :state="state" />
+    <component :is="tag" v-else :ref="renderRef" v-bind="mergedProps">
+      <slot :state="state" />
+    </component>
+  </CompositeList>
+</template>

package/src/tabs/list/TabsListContext.ts

@@ -0,0 +1,29 @@
+import type { InjectionKey, Ref } from 'vue'
+import type { TabsRootChangeEventDetails } from '../root/TabsRoot.vue'
+import type { TabsTabValue } from '../tab/TabsTab.vue'
+import { inject } from 'vue'
+
+export interface TabsListContext {
+  activateOnFocus: Ref<boolean>
+  highlightedTabIndex: Ref<number>
+  registerIndicatorUpdateListener: (listener: () => void) => () => void
+  registerTabResizeObserverElement: (element: HTMLElement) => () => void
+  onTabActivation: (newValue: TabsTabValue, eventDetails: TabsRootChangeEventDetails) => void
+  setHighlightedTabIndex: (index: number) => void
+  tabsListElement: Ref<HTMLElement | null>
+}
+
+export const tabsListContextKey: InjectionKey<TabsListContext> = Symbol('TabsListContext')
+
+export function useTabsListContext(optional: true): TabsListContext | undefined
+export function useTabsListContext(optional?: false): TabsListContext
+export function useTabsListContext(optional = false) {
+  const context = inject(tabsListContextKey, undefined)
+  if (!context && !optional) {
+    throw new Error(
+      'Base UI Vue: TabsListContext is missing. TabsList parts must be placed within <TabsList>.',
+    )
+  }
+
+  return context
+}

package/src/tabs/list/TabsListDataAttributes.ts

@@ -0,0 +1,12 @@
+export enum TabsListDataAttributes {
+  /**
+   * 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',
+}

package/src/tabs/panel/TabsPanel.vue

@@ -0,0 +1,167 @@
+<script setup lang="ts">
+import type { ComponentPublicInstance } from 'vue'
+import type { BaseUIComponentProps } from '../../utils/types'
+import type { TransitionStatus } from '../../utils/useTransitionStatus'
+import type { TabsRootState } from '../root/TabsRoot.vue'
+import type { TabsTabValue } from '../tab/TabsTab.vue'
+import { computed, ref, useAttrs, watch } from 'vue'
+import { useCompositeListItem } from '../../composite/list/useCompositeListItem'
+import { mergeProps } from '../../merge-props/mergeProps'
+import { transitionStatusMapping } from '../../utils/transitionStatusMapping'
+import { useBaseUiId } from '../../utils/useBaseUiId'
+import { useOpenChangeComplete } from '../../utils/useOpenChangeComplete'
+import { useRenderElement } from '../../utils/useRenderElement'
+import { useTransitionStatus } from '../../utils/useTransitionStatus'
+import { tabsStateAttributesMapping } from '../root/stateAttributesMapping'
+import { useTabsRootContext } from '../root/TabsRootContext'
+import { areTabValuesEqual } from '../utils/areTabValuesEqual'
+import { TabsPanelDataAttributes } from './TabsPanelDataAttributes'
+
+export interface TabsPanelMetadata {
+  id?: string | undefined
+  value: TabsTabValue
+}
+
+export interface TabsPanelState extends TabsRootState {
+  /**
+   * Whether the component is hidden.
+   */
+  hidden: boolean
+  /**
+   * The transition status of the component.
+   */
+  transitionStatus: TransitionStatus
+}
+
+export interface TabsPanelProps extends BaseUIComponentProps<TabsPanelState> {
+  /**
+   * The value of the TabPanel. It will be shown when the Tab with the corresponding value is active.
+   */
+  value: TabsTabValue
+  /**
+   * Whether to keep the HTML element in the DOM while the panel is hidden.
+   * @default false
+   */
+  keepMounted?: boolean
+  /**
+   * The id of the TabPanel element.
+   */
+  id?: string
+}
+
+/**
+ * A panel displayed when the corresponding tab is active.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Vue Tabs](https://baseui-vue.com/docs/components/tabs)
+ */
+defineOptions({
+  name: 'TabsPanel',
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<TabsPanelProps>(), {
+  as: 'div',
+  keepMounted: false,
+})
+
+const attrs = useAttrs()
+const rootCtx = useTabsRootContext()
+const id = useBaseUiId(props.id)
+const panelRef = ref<HTMLElement | null>(null)
+
+const metadata = computed<TabsPanelMetadata>(() => ({
+  id,
+  value: props.value,
+}))
+
+const { ref: listItemRef, index } = useCompositeListItem<TabsPanelMetadata>({
+  metadata: () => metadata.value,
+})
+
+const open = computed(() => areTabValuesEqual(props.value, rootCtx.value.value))
+const { mounted, transitionStatus, setMounted } = useTransitionStatus(open)
+const hidden = computed(() => !mounted.value)
+const correspondingTabId = computed(() => rootCtx.getTabIdByPanelValue(props.value))
+
+const state = computed<TabsPanelState>(() => ({
+  hidden: hidden.value,
+  orientation: rootCtx.orientation.value,
+  tabActivationDirection: rootCtx.tabActivationDirection.value,
+  transitionStatus: transitionStatus.value,
+}))
+
+useOpenChangeComplete({
+  open,
+  ref: panelRef,
+  onComplete() {
+    if (!open.value) {
+      setMounted(false)
+    }
+  },
+})
+
+watch(
+  [hidden, () => props.keepMounted, () => props.value],
+  (_value, _oldValue, onCleanup) => {
+    if (hidden.value && !props.keepMounted) {
+      return
+    }
+
+    if (id == null) {
+      return
+    }
+
+    rootCtx.registerMountedTabPanel(props.value, id)
+    onCleanup(() => {
+      rootCtx.unregisterMountedTabPanel(props.value, id)
+    })
+  },
+  { immediate: true },
+)
+
+const shouldRender = computed(() => props.keepMounted || mounted.value)
+
+const panelProps = computed(() => mergeProps(
+  {
+    'aria-labelledby': correspondingTabId.value,
+    'hidden': hidden.value ? true : undefined,
+    id,
+    'inert': !open.value ? '' : undefined,
+    'role': 'tabpanel',
+    'tabindex': open.value ? 0 : -1,
+    [TabsPanelDataAttributes.index]: index.value,
+  },
+  attrs as Record<string, unknown>,
+))
+
+const stateAttributesMapping = {
+  ...tabsStateAttributesMapping,
+  ...transitionStatusMapping,
+}
+
+const {
+  tag,
+  mergedProps,
+  renderless,
+  ref: renderRef,
+} = useRenderElement({
+  componentProps: props,
+  state,
+  props: panelProps,
+  stateAttributesMapping,
+  defaultTagName: 'div',
+  ref: (node: Element | ComponentPublicInstance | null) => {
+    const element = node instanceof HTMLElement ? node : null
+    panelRef.value = element
+    listItemRef(element)
+  },
+})
+</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/tabs/panel/TabsPanelDataAttributes.ts

@@ -0,0 +1,28 @@
+export enum TabsPanelDataAttributes {
+  /**
+   * Indicates the index of the tab panel.
+   */
+  index = 'data-index',
+  /**
+   * 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 panel is hidden.
+   */
+  hidden = 'data-hidden',
+  /**
+   * Present when the panel is animating in.
+   */
+  startingStyle = 'data-starting-style',
+  /**
+   * Present when the panel is animating out.
+   */
+  endingStyle = 'data-ending-style',
+}