base-ui-vue 0.2.0 → 0.3.0

package/src/progress/root/ProgressRoot.vue

@@ -0,0 +1,160 @@
+<script setup lang="ts">
+import type { BaseUIComponentProps } from '../../utils/types'
+import { computed, provide, ref, useAttrs } from 'vue'
+import { formatNumberValue } from '../../utils/formatNumber'
+import { useRenderElement } from '../../utils/useRenderElement'
+import { visuallyHidden } from '../../utils/visuallyHidden'
+import { progressRootContextKey } from './ProgressRootContext'
+import { progressStateAttributesMapping } from './stateAttributesMapping'
+
+export type ProgressStatus = 'indeterminate' | 'progressing' | 'complete'
+
+export interface ProgressRootState {
+  /**
+   * The current status.
+   */
+  status: ProgressStatus
+}
+
+export interface ProgressRootProps extends BaseUIComponentProps<ProgressRootState> {
+  /**
+   * A string value that provides a user-friendly name for `aria-valuenow`.
+   * Takes precedence over `getAriaValueText`.
+   */
+  ariaValuetext?: string
+  /**
+   * Options to format the value.
+   */
+  format?: Intl.NumberFormatOptions
+  /**
+   * A function that returns a string value for `aria-valuetext`.
+   * Receives the formatted value (or `null` when indeterminate) and the raw
+   * value.
+   */
+  getAriaValueText?: (formattedValue: string | null, value: number | null) => string
+  /**
+   * The locale used by `Intl.NumberFormat` when formatting the value.
+   * Defaults to the user's runtime locale.
+   */
+  locale?: Intl.LocalesArgument
+  /**
+   * The maximum value.
+   * @default 100
+   */
+  max?: number
+  /**
+   * The minimum value.
+   * @default 0
+   */
+  min?: number
+  /**
+   * The current value. The component is indeterminate when value is `null`.
+   * @default null
+   */
+  value: number | null
+}
+
+/**
+ * Groups all parts of the progress bar and provides the task completion
+ * status to screen readers.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Vue Progress](https://baseui-vue.com/docs/components/progress)
+ */
+defineOptions({
+  name: 'ProgressRoot',
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<ProgressRootProps>(), {
+  as: 'div',
+  max: 100,
+  min: 0,
+})
+
+function getDefaultAriaValueText(formattedValue: string | null, value: number | null) {
+  if (value == null) {
+    return 'indeterminate progress'
+  }
+
+  return formattedValue || `${value}%`
+}
+
+const attrs = useAttrs()
+
+const labelId = ref<string | undefined>(undefined)
+
+const status = computed<ProgressStatus>(() => {
+  if (props.value == null || !Number.isFinite(props.value)) {
+    return 'indeterminate'
+  }
+  return props.value === props.max ? 'complete' : 'progressing'
+})
+
+const formattedValue = computed(() =>
+  formatNumberValue(props.value, props.locale, props.format),
+)
+
+const ariaValueText = computed(() => {
+  if (props.ariaValuetext !== undefined) {
+    return props.ariaValuetext
+  }
+
+  const formatted = props.value == null ? null : formattedValue.value
+
+  if (props.getAriaValueText) {
+    return props.getAriaValueText(formatted, props.value)
+  }
+
+  return getDefaultAriaValueText(formatted, props.value)
+})
+
+const state = computed<ProgressRootState>(() => ({
+  status: status.value,
+}))
+
+provide(progressRootContextKey, {
+  formattedValue,
+  max: computed(() => props.max),
+  min: computed(() => props.min),
+  value: computed(() => props.value),
+  status,
+  state,
+  setLabelId(id) {
+    labelId.value = id
+  },
+})
+
+const rootProps = computed(() => ({
+  'role': 'progressbar',
+  'aria-labelledby': labelId.value,
+  'aria-valuemax': props.max,
+  'aria-valuemin': props.min,
+  'aria-valuenow': props.value ?? undefined,
+  'aria-valuetext': ariaValueText.value,
+  ...attrs,
+}))
+
+const {
+  tag,
+  mergedProps,
+  renderless,
+} = useRenderElement({
+  componentProps: props,
+  state,
+  props: rootProps,
+  defaultTagName: 'div',
+  stateAttributesMapping: progressStateAttributesMapping,
+})
+
+const visuallyHiddenStyle = visuallyHidden
+</script>
+
+<template>
+  <slot v-if="renderless" :props="mergedProps" :state="state" />
+  <component :is="tag" v-else v-bind="mergedProps">
+    <slot :state="state" />
+    <!-- Force NVDA to read the label https://github.com/mui/base-ui/issues/4184 -->
+    <span role="presentation" :style="visuallyHiddenStyle">x</span>
+  </component>
+</template>

package/src/progress/root/ProgressRootContext.ts

@@ -0,0 +1,51 @@
+import type { ComputedRef, InjectionKey, Ref } from 'vue'
+import type { ProgressRootState, ProgressStatus } from './ProgressRoot.vue'
+import { inject } from 'vue'
+
+export interface ProgressRootContext {
+  /**
+   * The formatted current value of the progress bar.
+   * Empty string when the component is indeterminate.
+   */
+  formattedValue: Ref<string>
+  /**
+   * The maximum allowed value of the progress bar.
+   */
+  max: Ref<number>
+  /**
+   * The minimum allowed value of the progress bar.
+   */
+  min: Ref<number>
+  /**
+   * The raw current value, or `null` when indeterminate.
+   */
+  value: Ref<number | null>
+  /**
+   * Derived completion status. Used to produce `data-*` state attributes.
+   */
+  status: ComputedRef<ProgressStatus>
+  /**
+   * The state of the root component.
+   */
+  state: ComputedRef<ProgressRootState>
+  /**
+   * Registers the DOM id of the `<ProgressLabel>` for `aria-labelledby`.
+   */
+  setLabelId: (id: string | undefined) => void
+}
+
+export const progressRootContextKey: InjectionKey<ProgressRootContext>
+  = Symbol('ProgressRootContext')
+
+export function useProgressRootContext(optional: true): ProgressRootContext | undefined
+export function useProgressRootContext(optional?: false): ProgressRootContext
+export function useProgressRootContext(optional = false) {
+  const context = inject(progressRootContextKey, undefined)
+  if (!context && !optional) {
+    throw new Error(
+      'Base UI Vue: ProgressRootContext is missing. Progress parts must be placed within <ProgressRoot>.',
+    )
+  }
+
+  return context
+}

package/src/progress/root/ProgressRootDataAttributes.ts

@@ -0,0 +1,14 @@
+export enum ProgressRootDataAttributes {
+  /**
+   * Present when the progress has completed.
+   */
+  complete = 'data-complete',
+  /**
+   * Present when the progress is in indeterminate state.
+   */
+  indeterminate = 'data-indeterminate',
+  /**
+   * Present while the progress is progressing.
+   */
+  progressing = 'data-progressing',
+}

package/src/progress/root/stateAttributesMapping.ts

@@ -0,0 +1,18 @@
+import type { StateAttributesMapping } from '../../utils/getStateAttributesProps'
+import type { ProgressRootState } from './ProgressRoot.vue'
+import { ProgressRootDataAttributes } from './ProgressRootDataAttributes'
+
+export const progressStateAttributesMapping: StateAttributesMapping<ProgressRootState> = {
+  status(value): Record<string, string> | null {
+    if (value === 'progressing') {
+      return { [ProgressRootDataAttributes.progressing]: '' }
+    }
+    if (value === 'complete') {
+      return { [ProgressRootDataAttributes.complete]: '' }
+    }
+    if (value === 'indeterminate') {
+      return { [ProgressRootDataAttributes.indeterminate]: '' }
+    }
+    return null
+  },
+}

package/src/progress/track/ProgressTrack.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import type { BaseUIComponentProps } from '../../utils/types'
+import type { ProgressRootState } from '../root/ProgressRoot.vue'
+import { useAttrs } from 'vue'
+import { useRenderElement } from '../../utils/useRenderElement'
+import { useProgressRootContext } from '../root/ProgressRootContext'
+import { progressStateAttributesMapping } from '../root/stateAttributesMapping'
+
+export interface ProgressTrackState extends ProgressRootState {}
+export interface ProgressTrackProps extends BaseUIComponentProps<ProgressTrackState> {}
+
+/**
+ * Contains the progress bar indicator.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Vue Progress](https://baseui-vue.com/docs/components/progress)
+ */
+defineOptions({
+  name: 'ProgressTrack',
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<ProgressTrackProps>(), {
+  as: 'div',
+})
+
+const attrs = useAttrs()
+const { state } = useProgressRootContext()
+
+const {
+  tag,
+  mergedProps,
+  renderless,
+} = useRenderElement({
+  componentProps: props,
+  state,
+  props: attrs,
+  defaultTagName: 'div',
+  stateAttributesMapping: progressStateAttributesMapping,
+})
+</script>
+
+<template>
+  <slot v-if="renderless" :props="mergedProps" :state="state" />
+  <component :is="tag" v-else v-bind="mergedProps">
+    <slot :state="state" />
+  </component>
+</template>

package/src/progress/value/ProgressValue.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+import type { BaseUIComponentProps } from '../../utils/types'
+import type { ProgressRootState } from '../root/ProgressRoot.vue'
+import { computed, useAttrs } from 'vue'
+import { useRenderElement } from '../../utils/useRenderElement'
+import { useProgressRootContext } from '../root/ProgressRootContext'
+import { progressStateAttributesMapping } from '../root/stateAttributesMapping'
+
+export interface ProgressValueState extends ProgressRootState {}
+export interface ProgressValueProps extends BaseUIComponentProps<ProgressValueState> {}
+
+export interface ProgressValueSlotProps {
+  /**
+   * Formatted value. `"indeterminate"` when the root value is `null`.
+   */
+  formattedValue: string | 'indeterminate'
+  /**
+   * Raw numeric value, or `null` when indeterminate.
+   */
+  value: number | null
+}
+
+export interface ProgressValueRenderlessSlotProps extends ProgressValueSlotProps {
+  props: Record<string, unknown>
+  state: ProgressValueState
+}
+
+/**
+ * A text label displaying the current value.
+ * Renders a `<span>` element.
+ *
+ * Documentation: [Base UI Vue Progress](https://baseui-vue.com/docs/components/progress)
+ */
+defineOptions({
+  name: 'ProgressValue',
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<ProgressValueProps>(), {
+  as: 'span',
+})
+
+defineSlots<{
+  default?: (props: ProgressValueSlotProps | ProgressValueRenderlessSlotProps) => unknown
+}>()
+
+const attrs = useAttrs()
+const { value, formattedValue, state } = useProgressRootContext()
+
+const slotFormattedValue = computed<string | 'indeterminate'>(() =>
+  value.value == null ? 'indeterminate' : formattedValue.value,
+)
+
+const defaultDisplay = computed(() =>
+  value.value == null ? '' : formattedValue.value,
+)
+
+const valueProps = computed(() => ({
+  'aria-hidden': true,
+  ...attrs,
+}))
+
+const {
+  tag,
+  mergedProps,
+  renderless,
+} = useRenderElement({
+  componentProps: props,
+  state,
+  props: valueProps,
+  defaultTagName: 'span',
+  stateAttributesMapping: progressStateAttributesMapping,
+})
+</script>
+
+<template>
+  <slot
+    v-if="renderless"
+    :props="mergedProps"
+    :state="state"
+    :formatted-value="slotFormattedValue"
+    :value="value"
+  />
+  <component :is="tag" v-else v-bind="mergedProps">
+    <slot
+      :formatted-value="slotFormattedValue"
+      :value="value"
+    >
+      {{ defaultDisplay }}
+    </slot>
+  </component>
+</template>

package/src/scroll-area/constants.ts

@@ -0,0 +1,2 @@
+export const SCROLL_TIMEOUT = 500
+export const MIN_THUMB_SIZE = 16

package/src/scroll-area/content/ScrollAreaContent.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import type { BaseUIComponentProps } from '../../utils/types'
+import type { ScrollAreaRootState } from '../root/ScrollAreaRootContext'
+import { computed, onBeforeUnmount, onMounted, shallowRef, useAttrs } from 'vue'
+import { mergeProps } from '../../merge-props/mergeProps'
+import { useRenderElement } from '../../utils/useRenderElement'
+import { useScrollAreaRootContext } from '../root/ScrollAreaRootContext'
+import { scrollAreaStateAttributesMapping } from '../root/stateAttributes'
+import { useScrollAreaViewportContext } from '../viewport/ScrollAreaViewportContext'
+
+export type ScrollAreaContentState = ScrollAreaRootState
+
+export interface ScrollAreaContentProps extends BaseUIComponentProps<ScrollAreaContentState> {}
+
+defineOptions({
+  name: 'ScrollAreaContent',
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<ScrollAreaContentProps>(), {
+  as: 'div',
+})
+
+const attrs = useAttrs()
+
+const contentWrapperRef = shallowRef<HTMLDivElement | null>(null)
+const { computeThumbPosition } = useScrollAreaViewportContext()
+const { viewportState } = useScrollAreaRootContext()
+
+let resizeObserver: ResizeObserver | undefined
+
+onMounted(() => {
+  if (typeof ResizeObserver === 'undefined')
+    return
+
+  let hasInitialized = false
+  resizeObserver = new ResizeObserver(() => {
+    if (!hasInitialized) {
+      hasInitialized = true
+      return
+    }
+    computeThumbPosition()
+  })
+
+  if (contentWrapperRef.value) {
+    resizeObserver.observe(contentWrapperRef.value)
+  }
+})
+
+onBeforeUnmount(() => {
+  resizeObserver?.disconnect()
+})
+
+const elementProps = computed(() => mergeProps(
+  attrs as Record<string, any>,
+  {
+    role: 'presentation',
+    style: { minWidth: 'fit-content' },
+  },
+))
+
+const {
+  tag,
+  mergedProps,
+  renderless,
+  ref: renderRef,
+} = useRenderElement({
+  componentProps: props,
+  state: viewportState,
+  props: elementProps,
+  stateAttributesMapping: scrollAreaStateAttributesMapping,
+  defaultTagName: 'div',
+  ref: contentWrapperRef,
+})
+</script>
+
+<template>
+  <slot v-if="renderless" :ref="renderRef" :props="mergedProps" :state="viewportState" />
+  <component
+    :is="tag"
+    v-else
+    :ref="renderRef"
+    v-bind="mergedProps"
+  >
+    <slot />
+  </component>
+</template>

package/src/scroll-area/corner/ScrollAreaCorner.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import type { BaseUIComponentProps } from '../../utils/types'
+import { computed, useAttrs } from 'vue'
+import { mergeProps } from '../../merge-props/mergeProps'
+import { useRenderElement } from '../../utils/useRenderElement'
+import { useScrollAreaRootContext } from '../root/ScrollAreaRootContext'
+
+export interface ScrollAreaCornerState {}
+
+export interface ScrollAreaCornerProps extends BaseUIComponentProps<ScrollAreaCornerState> {}
+
+defineOptions({
+  name: 'ScrollAreaCorner',
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<ScrollAreaCornerProps>(), {
+  as: 'div',
+})
+
+const attrs = useAttrs()
+
+const { cornerRef, cornerSize, hiddenState } = useScrollAreaRootContext()
+
+const state = computed<ScrollAreaCornerState>(() => ({}))
+
+const elementProps = computed(() => mergeProps(
+  attrs as Record<string, any>,
+  {
+    style: {
+      position: 'absolute',
+      bottom: 0,
+      insetInlineEnd: 0,
+      width: cornerSize.value.width,
+      height: cornerSize.value.height,
+    },
+  },
+))
+
+const {
+  tag,
+  mergedProps,
+  renderless,
+  ref: renderRef,
+} = useRenderElement({
+  componentProps: props,
+  state,
+  props: elementProps,
+  defaultTagName: 'div',
+  ref: cornerRef,
+})
+</script>
+
+<template>
+  <template v-if="!hiddenState.corner">
+    <slot v-if="renderless" :ref="renderRef" :props="mergedProps" :state="state" />
+    <component
+      :is="tag"
+      v-else
+      :ref="renderRef"
+      v-bind="mergedProps"
+    />
+  </template>
+</template>

package/src/scroll-area/index.ts

@@ -0,0 +1,25 @@
+export { default as ScrollAreaContent } from './content/ScrollAreaContent.vue'
+export type { ScrollAreaContentProps, ScrollAreaContentState } from './content/ScrollAreaContent.vue'
+export { default as ScrollAreaCorner } from './corner/ScrollAreaCorner.vue'
+export type { ScrollAreaCornerProps, ScrollAreaCornerState } from './corner/ScrollAreaCorner.vue'
+export { default as ScrollAreaRoot } from './root/ScrollAreaRoot.vue'
+
+export type { ScrollAreaRootProps } from './root/ScrollAreaRoot.vue'
+export type { ScrollAreaRootState } from './root/ScrollAreaRootContext'
+export { ScrollAreaRootCssVars } from './root/ScrollAreaRootCssVars'
+export { ScrollAreaRootDataAttributes } from './root/ScrollAreaRootDataAttributes'
+
+export { default as ScrollAreaScrollbar } from './scrollbar/ScrollAreaScrollbar.vue'
+export type { ScrollAreaScrollbarProps, ScrollAreaScrollbarState } from './scrollbar/ScrollAreaScrollbar.vue'
+
+export { ScrollAreaScrollbarCssVars } from './scrollbar/ScrollAreaScrollbarCssVars'
+export { ScrollAreaScrollbarDataAttributes } from './scrollbar/ScrollAreaScrollbarDataAttributes'
+export { default as ScrollAreaThumb } from './thumb/ScrollAreaThumb.vue'
+export type { ScrollAreaThumbProps, ScrollAreaThumbState } from './thumb/ScrollAreaThumb.vue'
+
+export { ScrollAreaThumbDataAttributes } from './thumb/ScrollAreaThumbDataAttributes'
+export { default as ScrollAreaViewport } from './viewport/ScrollAreaViewport.vue'
+export type { ScrollAreaViewportProps, ScrollAreaViewportState } from './viewport/ScrollAreaViewport.vue'
+
+export { ScrollAreaViewportCssVars } from './viewport/ScrollAreaViewportCssVars'
+export { ScrollAreaViewportDataAttributes } from './viewport/ScrollAreaViewportDataAttributes'