base-ui-vue 0.1.0 → 0.3.0

package/src/toolbar/group/ToolbarGroupContext.ts

@@ -0,0 +1,23 @@
+import type { InjectionKey, Ref } from 'vue'
+import { inject } from 'vue'
+
+export interface ToolbarGroupContext {
+  disabled: Ref<boolean>
+}
+
+export const toolbarGroupContextKey: InjectionKey<ToolbarGroupContext>
+  = Symbol('ToolbarGroupContext')
+
+export function useToolbarGroupContext(): ToolbarGroupContext
+export function useToolbarGroupContext(optional: true): ToolbarGroupContext | undefined
+export function useToolbarGroupContext(optional = false) {
+  const context = inject(toolbarGroupContextKey, undefined)
+
+  if (context === undefined && !optional) {
+    throw new Error(
+      'Base UI Vue: ToolbarGroupContext is missing. ToolbarGroup parts must be placed within <ToolbarGroup>.',
+    )
+  }
+
+  return context
+}

package/src/toolbar/group/ToolbarGroupDataAttributes.ts

@@ -0,0 +1,11 @@
+export enum ToolbarGroupDataAttributes {
+  /**
+   * Present when the group is disabled.
+   */
+  disabled = 'data-disabled',
+  /**
+   * Indicates the orientation of the toolbar.
+   * @type {'horizontal' | 'vertical'}
+   */
+  orientation = 'data-orientation',
+}

package/src/toolbar/index.ts

@@ -0,0 +1,27 @@
+export { default as ToolbarButton } from './button/ToolbarButton.vue'
+export type { ToolbarButtonProps, ToolbarButtonState } from './button/ToolbarButton.vue'
+export { ToolbarButtonDataAttributes } from './button/ToolbarButtonDataAttributes'
+
+export { default as ToolbarGroup } from './group/ToolbarGroup.vue'
+export type { ToolbarGroupProps, ToolbarGroupState } from './group/ToolbarGroup.vue'
+export { toolbarGroupContextKey, useToolbarGroupContext } from './group/ToolbarGroupContext'
+export type { ToolbarGroupContext } from './group/ToolbarGroupContext'
+export { ToolbarGroupDataAttributes } from './group/ToolbarGroupDataAttributes'
+
+export { default as ToolbarInput } from './input/ToolbarInput.vue'
+export type { ToolbarInputProps, ToolbarInputState } from './input/ToolbarInput.vue'
+export { ToolbarInputDataAttributes } from './input/ToolbarInputDataAttributes'
+
+export { default as ToolbarLink } from './link/ToolbarLink.vue'
+export type { ToolbarLinkProps, ToolbarLinkState } from './link/ToolbarLink.vue'
+export { ToolbarLinkDataAttributes } from './link/ToolbarLinkDataAttributes'
+
+export { default as ToolbarRoot } from './root/ToolbarRoot.vue'
+export type { ToolbarRootProps, ToolbarRootState } from './root/ToolbarRoot.vue'
+export { toolbarRootContextKey, useToolbarRootContext } from './root/ToolbarRootContext'
+export type { ToolbarRootContext, ToolbarRootItemMetadata } from './root/ToolbarRootContext'
+export { ToolbarRootDataAttributes } from './root/ToolbarRootDataAttributes'
+
+export { default as ToolbarSeparator } from './separator/ToolbarSeparator.vue'
+export type { ToolbarSeparatorProps, ToolbarSeparatorState } from './separator/ToolbarSeparator.vue'
+export { ToolbarSeparatorDataAttributes } from './separator/ToolbarSeparatorDataAttributes'

package/src/toolbar/input/ToolbarInput.vue

@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import type { BaseUIComponentProps } from '../../utils/types'
+import type { ToolbarRootState } from '../root/ToolbarRoot.vue'
+import { computed, useAttrs } from 'vue'
+import { ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP, stopEvent } from '../../composite/composite'
+import CompositeItem from '../../composite/item/CompositeItem.vue'
+import { useFocusableWhenDisabled } from '../../utils/useFocusableWhenDisabled'
+import { useToolbarGroupContext } from '../group/ToolbarGroupContext'
+import { useToolbarRootContext } from '../root/ToolbarRootContext'
+
+export interface ToolbarInputState extends ToolbarRootState {
+  /**
+   * Whether the component is disabled.
+   */
+  disabled: boolean
+  /**
+   * Whether the component remains focusable when disabled.
+   */
+  focusable: boolean
+}
+
+export interface ToolbarInputProps extends BaseUIComponentProps<ToolbarInputState> {
+  /**
+   * Whether the component is disabled.
+   * @default false
+   */
+  disabled?: boolean
+  /**
+   * Whether the component remains focusable when disabled.
+   * @default true
+   */
+  focusableWhenDisabled?: boolean
+  defaultValue?: string | number
+}
+
+/**
+ * A native input element that integrates with Toolbar keyboard navigation.
+ * Renders an `<input>` element.
+ *
+ * Documentation: [Base UI Vue Toolbar](https://baseui-vue.com/docs/components/toolbar)
+ */
+defineOptions({
+  name: 'ToolbarInput',
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<ToolbarInputProps>(), {
+  as: 'input',
+  disabled: false,
+  focusableWhenDisabled: true,
+})
+
+const attrs = useAttrs()
+const toolbarRootContext = useToolbarRootContext()
+const toolbarGroupContext = useToolbarGroupContext(true)
+
+const disabled = computed(() =>
+  toolbarRootContext.disabled.value
+  || (toolbarGroupContext?.disabled.value ?? false)
+  || props.disabled,
+)
+
+const { props: focusableWhenDisabledProps } = useFocusableWhenDisabled({
+  composite: true,
+  disabled,
+  focusableWhenDisabled: () => props.focusableWhenDisabled,
+  isNativeButton: false,
+})
+
+const state = computed<ToolbarInputState>(() => ({
+  disabled: disabled.value,
+  orientation: toolbarRootContext.orientation.value,
+  focusable: props.focusableWhenDisabled,
+}))
+
+const allowedKeysWhenDisabled = computed(() =>
+  toolbarRootContext.orientation.value === 'vertical'
+    ? new Set([ARROW_UP, ARROW_DOWN])
+    : new Set([ARROW_LEFT, ARROW_RIGHT]),
+)
+
+const defaultProps = computed(() => ({
+  onClick(event: MouseEvent) {
+    if (disabled.value) {
+      event.preventDefault()
+    }
+  },
+  onKeydown(event: KeyboardEvent) {
+    if (disabled.value && !allowedKeysWhenDisabled.value.has(event.key)) {
+      stopEvent(event)
+    }
+  },
+  onPointerdown(event: PointerEvent) {
+    if (disabled.value) {
+      event.preventDefault()
+    }
+  },
+}))
+</script>
+
+<template>
+  <CompositeItem
+    :as="as"
+    :class="props.class"
+    :style="props.style"
+    :metadata="{ focusableWhenDisabled }"
+    :state="state"
+    :props="[
+      defaultProps,
+      attrs as Record<string, any>,
+      () => focusableWhenDisabledProps,
+    ]"
+  />
+</template>

package/src/toolbar/input/ToolbarInputDataAttributes.ts

@@ -0,0 +1,15 @@
+export enum ToolbarInputDataAttributes {
+  /**
+   * Present when the input is disabled.
+   */
+  disabled = 'data-disabled',
+  /**
+   * Indicates the orientation of the toolbar.
+   * @type {'horizontal' | 'vertical'}
+   */
+  orientation = 'data-orientation',
+  /**
+   * Present when the input remains focusable when disabled.
+   */
+  focusable = 'data-focusable',
+}

package/src/toolbar/link/ToolbarLink.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import type { BaseUIComponentProps } from '../../utils/types'
+import { computed, useAttrs } from 'vue'
+import CompositeItem from '../../composite/item/CompositeItem.vue'
+import { useToolbarRootContext } from '../root/ToolbarRootContext'
+
+/**
+ * A link component.
+ * Renders an `<a>` element.
+ *
+ * Documentation: [Base UI Vue Toolbar](https://baseui-vue.com/docs/components/toolbar)
+ */
+defineOptions({
+  name: 'ToolbarLink',
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<ToolbarLinkProps>(), {
+  as: 'a',
+})
+
+const TOOLBAR_LINK_METADATA = {
+  focusableWhenDisabled: true,
+}
+
+export interface ToolbarLinkState {
+  /**
+   * The component orientation.
+   */
+  orientation: 'horizontal' | 'vertical'
+}
+
+export interface ToolbarLinkProps extends BaseUIComponentProps<ToolbarLinkState> {}
+
+const attrs = useAttrs()
+const toolbarRootContext = useToolbarRootContext()
+
+const state = computed<ToolbarLinkState>(() => ({
+  orientation: toolbarRootContext.orientation.value,
+}))
+</script>
+
+<template>
+  <CompositeItem
+    :as="as"
+    :class="props.class"
+    :style="props.style"
+    :metadata="TOOLBAR_LINK_METADATA"
+    :state="state"
+    :props="[attrs]"
+  >
+    <slot :state="state" />
+  </CompositeItem>
+</template>

package/src/toolbar/link/ToolbarLinkDataAttributes.ts

@@ -0,0 +1,7 @@
+export enum ToolbarLinkDataAttributes {
+  /**
+   * Indicates the orientation of the toolbar.
+   * @type {'horizontal' | 'vertical'}
+   */
+  orientation = 'data-orientation',
+}

package/src/toolbar/root/ToolbarRoot.vue

@@ -0,0 +1,144 @@
+<script setup lang="ts">
+import type { CompositeMetadata } from '../../composite/list/CompositeList.vue'
+import type { BaseUIComponentProps, Orientation } from '../../utils/types'
+import type { ToolbarRootItemMetadata } from './ToolbarRootContext'
+import { computed, provide, reactive, ref, useAttrs } 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 { isElementDisabled } from '../../utils/isElementDisabled'
+import { useRenderElement } from '../../utils/useRenderElement'
+import { toolbarRootContextKey } from './ToolbarRootContext'
+
+export interface ToolbarRootState {
+  /**
+   * Whether the component is disabled.
+   */
+  disabled: boolean
+  /**
+   * The component orientation.
+   */
+  orientation: Orientation
+}
+
+export interface ToolbarRootProps extends BaseUIComponentProps<ToolbarRootState> {
+  /**
+   * Whether the component is disabled.
+   * @default false
+   */
+  disabled?: boolean
+  /**
+   * The orientation of the toolbar.
+   * @default 'horizontal'
+   */
+  orientation?: Orientation
+  /**
+   * If `true`, using keyboard navigation will wrap focus to the other end of
+   * the toolbar once the end is reached.
+   * @default true
+   */
+  loopFocus?: boolean
+}
+
+/**
+ * A container for grouping a set of controls, such as buttons, toggle groups, or menus.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Vue Toolbar](https://baseui-vue.com/docs/components/toolbar)
+ */
+defineOptions({
+  name: 'ToolbarRoot',
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<ToolbarRootProps>(), {
+  as: 'div',
+  disabled: false,
+  orientation: 'horizontal',
+  loopFocus: true,
+})
+
+const attrs = useAttrs()
+const direction = useDirection()
+
+const itemMap = ref(new Map<Element, CompositeMetadata<ToolbarRootItemMetadata> | null>())
+
+const disabledIndices = computed(() => {
+  const output: number[] = []
+
+  itemMap.value.forEach((itemMetadata, element) => {
+    if (
+      itemMetadata?.index != null
+      && !itemMetadata.focusableWhenDisabled
+      && isElementDisabled(element as HTMLElement)
+    ) {
+      output.push(itemMetadata.index)
+    }
+  })
+
+  return output
+})
+
+const state = computed<ToolbarRootState>(() => ({
+  disabled: props.disabled,
+  orientation: props.orientation,
+}))
+
+const root = useCompositeRoot({
+  orientation: () => props.orientation,
+  loopFocus: () => props.loopFocus,
+  direction: () => direction.value,
+  disabledIndices: () => disabledIndices.value,
+})
+
+provide(toolbarRootContextKey, {
+  disabled: computed(() => props.disabled),
+  orientation: computed(() => props.orientation),
+})
+
+provide(
+  compositeRootContextKey,
+  reactive({
+    highlightedIndex: root.highlightedIndex,
+    onHighlightedIndexChange: root.onHighlightedIndexChange,
+    highlightItemOnHover: computed(() => false),
+    relayKeyboardEvent: root.relayKeyboardEvent,
+  }),
+)
+
+const {
+  tag,
+  mergedProps,
+  renderless,
+  ref: renderRef,
+} = useRenderElement({
+  componentProps: props,
+  state,
+  props: computed(() => ({
+    ...root.getRootProps(attrs),
+    'role': 'toolbar',
+    'aria-orientation': props.orientation,
+  })),
+  defaultTagName: 'div',
+  ref: root.mergedRef,
+})
+
+function handleMapChange(newMap: Map<Element, { index?: number | null | undefined } | null>) {
+  const typedMap = newMap as Map<Element, CompositeMetadata<ToolbarRootItemMetadata> | null>
+  itemMap.value = typedMap
+  root.onMapChange(typedMap)
+}
+</script>
+
+<template>
+  <CompositeList
+    :elements-ref="root.elementsRef"
+    @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/toolbar/root/ToolbarRootContext.ts

@@ -0,0 +1,29 @@
+import type { InjectionKey, Ref } from 'vue'
+import type { Orientation } from '../../utils/types'
+import { inject } from 'vue'
+
+export interface ToolbarRootItemMetadata {
+  focusableWhenDisabled: boolean
+}
+
+export interface ToolbarRootContext {
+  disabled: Ref<boolean>
+  orientation: Ref<Orientation>
+}
+
+export const toolbarRootContextKey: InjectionKey<ToolbarRootContext>
+  = Symbol('ToolbarRootContext')
+
+export function useToolbarRootContext(optional: true): ToolbarRootContext | undefined
+export function useToolbarRootContext(optional?: false): ToolbarRootContext
+export function useToolbarRootContext(optional = false) {
+  const context = inject(toolbarRootContextKey, undefined)
+
+  if (context === undefined && !optional) {
+    throw new Error(
+      'Base UI Vue: ToolbarRootContext is missing. Toolbar parts must be placed within <ToolbarRoot>.',
+    )
+  }
+
+  return context
+}

package/src/toolbar/root/ToolbarRootDataAttributes.ts

@@ -0,0 +1,11 @@
+export enum ToolbarRootDataAttributes {
+  /**
+   * Present when the toolbar is disabled.
+   */
+  disabled = 'data-disabled',
+  /**
+   * Indicates the orientation of the toolbar.
+   * @type {'horizontal' | 'vertical'}
+   */
+  orientation = 'data-orientation',
+}

package/src/toolbar/separator/ToolbarSeparator.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { SeparatorProps, SeparatorState } from '../../separator/Separator.vue'
+import { computed, useAttrs } from 'vue'
+import Separator from '../../separator/Separator.vue'
+import { useToolbarRootContext } from '../root/ToolbarRootContext'
+
+export interface ToolbarSeparatorState extends SeparatorState {}
+
+export interface ToolbarSeparatorProps extends SeparatorProps {}
+
+/**
+ * A separator element accessible to screen readers.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Vue Toolbar](https://baseui-vue.com/docs/components/toolbar)
+ */
+defineOptions({
+  name: 'ToolbarSeparator',
+  inheritAttrs: false,
+})
+
+const props = defineProps<ToolbarSeparatorProps>()
+const attrs = useAttrs()
+const toolbarRootContext = useToolbarRootContext()
+
+const orientation = computed(() => props.orientation
+  ?? (toolbarRootContext.orientation.value === 'vertical' ? 'horizontal' : 'vertical'))
+</script>
+
+<template>
+  <Separator
+    v-slot="slotProps"
+    :as="props.as"
+    :class="props.class"
+    :style="props.style"
+    :orientation="orientation"
+    v-bind="attrs"
+  >
+    <slot v-bind="slotProps" />
+  </Separator>
+</template>

package/src/toolbar/separator/ToolbarSeparatorDataAttributes.ts

@@ -0,0 +1,7 @@
+export enum ToolbarSeparatorDataAttributes {
+  /**
+   * Indicates the orientation of the toolbar.
+   * @type {'horizontal' | 'vertical'}
+   */
+  orientation = 'data-orientation',
+}

package/src/use-button/useButton.ts

@@ -61,11 +61,13 @@ export function useButton(
   parameters: UseButtonParameters = {},
 ): UseButtonReturnValue {
   const buttonRef = ref<HTMLElement | null>(null)
+  const isCompositeItem = useCompositeRootContext(true) !== undefined
 
   const { props: focusableWhenDisabledProps } = useFocusableWhenDisabled({
     focusableWhenDisabled: () =>
       toValue(parameters.focusableWhenDisabled) ?? false,
     disabled: () => toValue(parameters.disabled) ?? false,
+    composite: () => isCompositeItem,
     isNativeButton: () => toValue(parameters.native) ?? true,
     tabIndex: () => toValue(parameters.tabIndex) ?? 0,
   })
@@ -105,7 +107,6 @@ export function useButton(
   // <Toolbar.Button disabled as={<Menu.Trigger />} />
   // the `disabled` prop needs to pass through 2 `useButton`s then finally
   // delete the `disabled` attribute from DOM
-  const isCompositeItem = useCompositeRootContext(true) !== undefined
   const updateDisabled = () => {
     const element = buttonRef.value
     if (!isButtonElement(element))

package/src/utils/areArraysEqual.ts

@@ -0,0 +1,12 @@
+type ItemComparer<Item> = (a: Item, b: Item) => boolean
+
+export function areArraysEqual<Item>(
+  array1: readonly Item[],
+  array2: readonly Item[],
+  itemComparer: ItemComparer<Item> = (a, b) => a === b,
+): boolean {
+  return (
+    array1.length === array2.length
+    && array1.every((value, index) => itemComparer(value, array2[index]))
+  )
+}

package/src/utils/clamp.ts

@@ -0,0 +1,7 @@
+export function clamp(
+  value: number,
+  min: number = Number.MIN_SAFE_INTEGER,
+  max: number = Number.MAX_SAFE_INTEGER,
+): number {
+  return Math.min(Math.max(value, min), max)
+}

package/src/utils/createBaseUIEventDetails.ts

@@ -86,6 +86,7 @@ type BaseUIChangeEventDetail<Reason extends string, CustomProperties extends obj
 } & CustomProperties
 
 export type BaseUIChangeEventDetails<Reason extends string, CustomProperties extends object = Record<string, never>> = Reason extends string ? BaseUIChangeEventDetail<Reason, CustomProperties> : never
+export type BaseUIGenericEventDetails<Reason extends string> = BaseUIChangeEventDetails<Reason>
 
 /**
  * Creates a Base UI event details object with the given reason and utilities
@@ -125,3 +126,11 @@ export function createChangeEventDetails<
 
   return details
 }
+
+export function createGenericEventDetails<Reason extends string>(
+  reason: Reason,
+  event?: ReasonToEvent<Reason>,
+  trigger?: HTMLElement,
+): BaseUIGenericEventDetails<Reason> {
+  return createChangeEventDetails(reason, event, trigger)
+}

package/src/utils/formatNumber.ts

@@ -0,0 +1,32 @@
+export function formatNumber(
+  value: number,
+  locale?: Intl.LocalesArgument,
+  options?: Intl.NumberFormatOptions,
+) {
+  return new Intl.NumberFormat(locale, options).format(value)
+}
+
+/**
+ * Formats a numeric value for display inside Base UI Vue components.
+ *
+ * When no `format` is provided, the value is interpreted as a percentage
+ * in the 0-100 range (matching React's Base UI semantics for
+ * `<Meter.Root>` / `<Progress.Root>`).
+ *
+ * Returns an empty string when the value is `null`.
+ */
+export function formatNumberValue(
+  value: number | null,
+  locale?: Intl.LocalesArgument,
+  format?: Intl.NumberFormatOptions,
+): string {
+  if (value == null) {
+    return ''
+  }
+
+  if (!format) {
+    return formatNumber(value / 100, locale, { style: 'percent' })
+  }
+
+  return formatNumber(value, locale, format)
+}

package/src/utils/owner.ts

@@ -0,0 +1,5 @@
+export { getWindow as ownerWindow } from '@floating-ui/utils/dom'
+
+export function ownerDocument(node: Element | null): Document | null {
+  return node?.ownerDocument || (typeof document !== 'undefined' ? document : null)
+}

package/src/utils/resolveAriaLabelledBy.ts

@@ -0,0 +1,10 @@
+export function getDefaultLabelId(id: string | null | undefined) {
+  return id == null ? undefined : `${id}-label`
+}
+
+export function resolveAriaLabelledBy(
+  fieldLabelId: string | undefined,
+  localLabelId: string | undefined,
+) {
+  return fieldLabelId ?? localLabelId
+}

package/src/utils/scrollEdges.ts

@@ -0,0 +1,33 @@
+import { clamp } from './clamp'
+
+export const SCROLL_EDGE_TOLERANCE_PX = 1
+
+export function getMaxScrollOffset(scrollSize: number, clientSize: number) {
+  return Math.max(0, scrollSize - clientSize)
+}
+
+export function normalizeScrollOffset(value: number, max: number) {
+  if (max <= 0) {
+    return 0
+  }
+
+  const clamped = clamp(value, 0, max)
+  const startDistance = clamped
+  const endDistance = max - clamped
+  const withinStartTolerance = startDistance <= SCROLL_EDGE_TOLERANCE_PX
+  const withinEndTolerance = endDistance <= SCROLL_EDGE_TOLERANCE_PX
+
+  if (withinStartTolerance && withinEndTolerance) {
+    return startDistance <= endDistance ? 0 : max
+  }
+
+  if (withinStartTolerance) {
+    return 0
+  }
+
+  if (withinEndTolerance) {
+    return max
+  }
+
+  return clamped
+}

package/src/utils/styles.ts

@@ -0,0 +1,28 @@
+const DISABLE_SCROLLBAR_CLASS_NAME = 'base-ui-disable-scrollbar'
+const STYLE_ELEMENT_ID = `style-${DISABLE_SCROLLBAR_CLASS_NAME}`
+
+export const styleDisableScrollbar = {
+  className: DISABLE_SCROLLBAR_CLASS_NAME,
+
+  inject(nonce?: string, disableStyleElements?: boolean) {
+    if (disableStyleElements) {
+      return
+    }
+
+    if (typeof document === 'undefined') {
+      return
+    }
+
+    if (document.getElementById(STYLE_ELEMENT_ID)) {
+      return
+    }
+
+    const style = document.createElement('style')
+    style.id = STYLE_ELEMENT_ID
+    if (nonce) {
+      style.nonce = nonce
+    }
+    style.textContent = `.${DISABLE_SCROLLBAR_CLASS_NAME}{scrollbar-width:none}.${DISABLE_SCROLLBAR_CLASS_NAME}::-webkit-scrollbar{display:none}`
+    document.head.appendChild(style)
+  },
+}