base-ui-vue 0.2.0 → 0.3.0

package/src/meter/indicator/MeterIndicator.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import type { BaseUIComponentProps } from '../../utils/types'
+import type { MeterRootState } from '../root/MeterRoot.vue'
+import { computed, useAttrs } from 'vue'
+import { mergeProps } from '../../merge-props/mergeProps'
+import { useRenderElement } from '../../utils/useRenderElement'
+import { valueToPercent } from '../../utils/valueToPercent'
+import { useMeterRootContext } from '../root/MeterRootContext'
+
+export interface MeterIndicatorState extends MeterRootState {}
+export interface MeterIndicatorProps extends BaseUIComponentProps<MeterIndicatorState> {}
+
+/**
+ * Visualizes the position of the value along the range.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Vue Meter](https://baseui-vue.com/docs/components/meter)
+ */
+defineOptions({
+  name: 'MeterIndicator',
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<MeterIndicatorProps>(), {
+  as: 'div',
+})
+
+const attrs = useAttrs()
+const rootContext = useMeterRootContext()
+
+const percentageWidth = computed(() =>
+  valueToPercent(rootContext.value.value, rootContext.min.value, rootContext.max.value),
+)
+
+const state = computed<MeterIndicatorState>(() => ({}))
+
+const indicatorProps = computed(() => mergeProps(
+  {
+    style: {
+      insetInlineStart: 0,
+      height: 'inherit',
+      width: `${percentageWidth.value}%`,
+    },
+  },
+  attrs as Record<string, unknown>,
+))
+
+const {
+  tag,
+  mergedProps,
+  renderless,
+} = useRenderElement({
+  componentProps: props,
+  state,
+  props: indicatorProps,
+  defaultTagName: 'div',
+})
+</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/meter/label/MeterLabel.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import type { BaseUIComponentProps } from '../../utils/types'
+import type { MeterRootState } from '../root/MeterRoot.vue'
+import { computed, useAttrs } from 'vue'
+import { useRegisteredLabelId } from '../../utils/useRegisteredLabelId'
+import { useRenderElement } from '../../utils/useRenderElement'
+import { useMeterRootContext } from '../root/MeterRootContext'
+
+export interface MeterLabelState extends MeterRootState {}
+export interface MeterLabelProps extends BaseUIComponentProps<MeterLabelState> {
+  /**
+   * The id of the label element. When provided, it overrides the automatically
+   * generated one.
+   */
+  id?: string
+}
+
+/**
+ * An accessible label for the meter.
+ * Renders a `<span>` element.
+ *
+ * Documentation: [Base UI Vue Meter](https://baseui-vue.com/docs/components/meter)
+ */
+defineOptions({
+  name: 'MeterLabel',
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<MeterLabelProps>(), {
+  as: 'span',
+})
+
+const attrs = useAttrs()
+const { setLabelId } = useMeterRootContext()
+
+const id = useRegisteredLabelId(() => props.id, setLabelId)
+
+const state = computed<MeterLabelState>(() => ({}))
+
+const labelProps = computed(() => ({
+  ...attrs,
+  id: id.value,
+  role: 'presentation',
+}))
+
+const {
+  tag,
+  mergedProps,
+  renderless,
+} = useRenderElement({
+  componentProps: props,
+  state,
+  props: labelProps,
+  defaultTagName: 'span',
+})
+</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/meter/root/MeterRoot.vue

@@ -0,0 +1,131 @@
+<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 { meterRootContextKey } from './MeterRootContext'
+
+export interface MeterRootState {}
+
+export interface MeterRootProps extends BaseUIComponentProps<MeterRootState> {
+  /**
+   * A string value that provides a user-friendly name for `aria-valuenow`,
+   * the current value of the meter.
+   */
+  ariaValuetext?: string
+  /**
+   * Options to format the value.
+   */
+  format?: Intl.NumberFormatOptions
+  /**
+   * A function that returns a string value that provides a human-readable
+   * text alternative for `aria-valuenow`, the current value of the meter.
+   */
+  getAriaValueText?: (formattedValue: string, value: number) => 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.
+   */
+  value: number
+}
+
+/**
+ * Groups all parts of the meter and provides the value for screen readers.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Vue Meter](https://baseui-vue.com/docs/components/meter)
+ */
+defineOptions({
+  name: 'MeterRoot',
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<MeterRootProps>(), {
+  as: 'div',
+  max: 100,
+  min: 0,
+})
+
+const attrs = useAttrs()
+
+const labelId = ref<string | undefined>(undefined)
+
+const formattedValue = computed(() =>
+  formatNumberValue(props.value, props.locale, props.format),
+)
+
+const ariaValueText = computed(() => {
+  if (props.ariaValuetext !== undefined) {
+    return props.ariaValuetext
+  }
+
+  if (props.getAriaValueText) {
+    return props.getAriaValueText(formattedValue.value, props.value)
+  }
+
+  if (props.format) {
+    return formattedValue.value
+  }
+
+  return `${props.value}%`
+})
+
+provide(meterRootContextKey, {
+  formattedValue,
+  max: computed(() => props.max),
+  min: computed(() => props.min),
+  value: computed(() => props.value),
+  setLabelId(id) {
+    labelId.value = id
+  },
+})
+
+const state = computed<MeterRootState>(() => ({}))
+
+const rootProps = computed(() => ({
+  'role': 'meter',
+  'aria-labelledby': labelId.value,
+  'aria-valuemax': props.max,
+  'aria-valuemin': props.min,
+  'aria-valuenow': props.value,
+  'aria-valuetext': ariaValueText.value,
+  ...attrs,
+}))
+
+const {
+  tag,
+  mergedProps,
+  renderless,
+} = useRenderElement({
+  componentProps: props,
+  state,
+  props: rootProps,
+  defaultTagName: 'div',
+})
+
+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/meter/root/MeterRootContext.ts

@@ -0,0 +1,41 @@
+import type { InjectionKey, Ref } from 'vue'
+import { inject } from 'vue'
+
+export interface MeterRootContext {
+  /**
+   * The formatted current value of the meter.
+   */
+  formattedValue: Ref<string>
+  /**
+   * The maximum allowed value of the meter.
+   */
+  max: Ref<number>
+  /**
+   * The minimum allowed value of the meter.
+   */
+  min: Ref<number>
+  /**
+   * The raw current value of the meter.
+   */
+  value: Ref<number>
+  /**
+   * Registers the DOM id of the `<MeterLabel>` for `aria-labelledby`.
+   */
+  setLabelId: (id: string | undefined) => void
+}
+
+export const meterRootContextKey: InjectionKey<MeterRootContext>
+  = Symbol('MeterRootContext')
+
+export function useMeterRootContext(optional: true): MeterRootContext | undefined
+export function useMeterRootContext(optional?: false): MeterRootContext
+export function useMeterRootContext(optional = false) {
+  const context = inject(meterRootContextKey, undefined)
+  if (!context && !optional) {
+    throw new Error(
+      'Base UI Vue: MeterRootContext is missing. Meter parts must be placed within <MeterRoot>.',
+    )
+  }
+
+  return context
+}

package/src/meter/track/MeterTrack.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { BaseUIComponentProps } from '../../utils/types'
+import type { MeterRootState } from '../root/MeterRoot.vue'
+import { computed, useAttrs } from 'vue'
+import { useRenderElement } from '../../utils/useRenderElement'
+
+export interface MeterTrackState extends MeterRootState {}
+export interface MeterTrackProps extends BaseUIComponentProps<MeterTrackState> {}
+
+/**
+ * Contains the meter indicator and represents the entire range of the meter.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Vue Meter](https://baseui-vue.com/docs/components/meter)
+ */
+defineOptions({
+  name: 'MeterTrack',
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<MeterTrackProps>(), {
+  as: 'div',
+})
+
+const attrs = useAttrs()
+
+const state = computed<MeterTrackState>(() => ({}))
+
+const {
+  tag,
+  mergedProps,
+  renderless,
+} = useRenderElement({
+  componentProps: props,
+  state,
+  props: computed(() => ({ ...attrs })),
+  defaultTagName: 'div',
+})
+</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/meter/value/MeterValue.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import type { BaseUIComponentProps } from '../../utils/types'
+import type { MeterRootState } from '../root/MeterRoot.vue'
+import { computed, useAttrs } from 'vue'
+import { useRenderElement } from '../../utils/useRenderElement'
+import { useMeterRootContext } from '../root/MeterRootContext'
+
+export interface MeterValueState extends MeterRootState {}
+export interface MeterValueProps extends BaseUIComponentProps<MeterValueState> {}
+
+export interface MeterValueSlotProps {
+  formattedValue: string
+  value: number
+}
+
+export interface MeterValueRenderlessSlotProps extends MeterValueSlotProps {
+  props: Record<string, unknown>
+  state: MeterValueState
+}
+
+/**
+ * A text element displaying the current value.
+ * Renders a `<span>` element.
+ *
+ * Documentation: [Base UI Vue Meter](https://baseui-vue.com/docs/components/meter)
+ */
+defineOptions({
+  name: 'MeterValue',
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<MeterValueProps>(), {
+  as: 'span',
+})
+
+defineSlots<{
+  default?: (props: MeterValueSlotProps | MeterValueRenderlessSlotProps) => unknown
+}>()
+
+const attrs = useAttrs()
+const { value, formattedValue } = useMeterRootContext()
+
+const state = computed<MeterValueState>(() => ({}))
+
+const defaultDisplay = computed(() => {
+  if (formattedValue.value) {
+    return formattedValue.value
+  }
+  return value.value != null ? String(value.value) : ''
+})
+
+const valueProps = computed(() => ({
+  'aria-hidden': true,
+  ...attrs,
+}))
+
+const {
+  tag,
+  mergedProps,
+  renderless,
+} = useRenderElement({
+  componentProps: props,
+  state,
+  props: valueProps,
+  defaultTagName: 'span',
+})
+</script>
+
+<template>
+  <slot
+    v-if="renderless"
+    :props="mergedProps"
+    :state="state"
+    :formatted-value="formattedValue"
+    :value="value"
+  />
+  <component :is="tag" v-else v-bind="mergedProps">
+    <slot
+      :formatted-value="formattedValue"
+      :value="value"
+    >
+      {{ defaultDisplay }}
+    </slot>
+  </component>
+</template>

package/src/progress/index.ts

@@ -0,0 +1,23 @@
+export { default as ProgressIndicator } from './indicator/ProgressIndicator.vue'
+export type { ProgressIndicatorProps, ProgressIndicatorState } from './indicator/ProgressIndicator.vue'
+
+export { default as ProgressLabel } from './label/ProgressLabel.vue'
+export type { ProgressLabelProps, ProgressLabelState } from './label/ProgressLabel.vue'
+
+export { default as ProgressRoot } from './root/ProgressRoot.vue'
+export type { ProgressRootProps, ProgressRootState, ProgressStatus } from './root/ProgressRoot.vue'
+export { progressRootContextKey, useProgressRootContext } from './root/ProgressRootContext'
+export type { ProgressRootContext } from './root/ProgressRootContext'
+export { ProgressRootDataAttributes } from './root/ProgressRootDataAttributes'
+export { progressStateAttributesMapping } from './root/stateAttributesMapping'
+
+export { default as ProgressTrack } from './track/ProgressTrack.vue'
+export type { ProgressTrackProps, ProgressTrackState } from './track/ProgressTrack.vue'
+
+export { default as ProgressValue } from './value/ProgressValue.vue'
+export type {
+  ProgressValueProps,
+  ProgressValueRenderlessSlotProps,
+  ProgressValueSlotProps,
+  ProgressValueState,
+} from './value/ProgressValue.vue'

package/src/progress/indicator/ProgressIndicator.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import type { BaseUIComponentProps } from '../../utils/types'
+import type { ProgressRootState } from '../root/ProgressRoot.vue'
+import { computed, useAttrs } from 'vue'
+import { mergeProps } from '../../merge-props/mergeProps'
+import { useRenderElement } from '../../utils/useRenderElement'
+import { valueToPercent } from '../../utils/valueToPercent'
+import { useProgressRootContext } from '../root/ProgressRootContext'
+import { progressStateAttributesMapping } from '../root/stateAttributesMapping'
+
+export interface ProgressIndicatorState extends ProgressRootState {}
+export interface ProgressIndicatorProps extends BaseUIComponentProps<ProgressIndicatorState> {}
+
+/**
+ * Visualizes the completion status of the task.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Vue Progress](https://baseui-vue.com/docs/components/progress)
+ */
+defineOptions({
+  name: 'ProgressIndicator',
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<ProgressIndicatorProps>(), {
+  as: 'div',
+})
+
+const attrs = useAttrs()
+const { value, min, max, state } = useProgressRootContext()
+
+const percentage = computed(() => {
+  const v = value.value
+  if (v == null || !Number.isFinite(v)) {
+    return null
+  }
+  return valueToPercent(v, min.value, max.value)
+})
+
+const indicatorStyles = computed(() => {
+  if (percentage.value == null) {
+    return {}
+  }
+  return {
+    insetInlineStart: 0,
+    height: 'inherit',
+    width: `${percentage.value}%`,
+  }
+})
+
+const indicatorProps = computed(() => mergeProps(
+  { style: indicatorStyles.value },
+  attrs as Record<string, unknown>,
+))
+
+const {
+  tag,
+  mergedProps,
+  renderless,
+} = useRenderElement({
+  componentProps: props,
+  state,
+  props: indicatorProps,
+  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/label/ProgressLabel.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import type { BaseUIComponentProps } from '../../utils/types'
+import type { ProgressRootState } from '../root/ProgressRoot.vue'
+import { computed, useAttrs } from 'vue'
+import { useRegisteredLabelId } from '../../utils/useRegisteredLabelId'
+import { useRenderElement } from '../../utils/useRenderElement'
+import { useProgressRootContext } from '../root/ProgressRootContext'
+import { progressStateAttributesMapping } from '../root/stateAttributesMapping'
+
+export interface ProgressLabelState extends ProgressRootState {}
+export interface ProgressLabelProps extends BaseUIComponentProps<ProgressLabelState> {
+  /**
+   * The id of the label element. When provided, it overrides the
+   * automatically generated one.
+   */
+  id?: string
+}
+
+/**
+ * An accessible label for the progress bar.
+ * Renders a `<span>` element.
+ *
+ * Documentation: [Base UI Vue Progress](https://baseui-vue.com/docs/components/progress)
+ */
+defineOptions({
+  name: 'ProgressLabel',
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<ProgressLabelProps>(), {
+  as: 'span',
+})
+
+const attrs = useAttrs()
+const { setLabelId, state } = useProgressRootContext()
+
+const id = useRegisteredLabelId(() => props.id, setLabelId)
+
+const labelProps = computed(() => ({
+  ...attrs,
+  id: id.value,
+  role: 'presentation',
+}))
+
+const {
+  tag,
+  mergedProps,
+  renderless,
+} = useRenderElement({
+  componentProps: props,
+  state,
+  props: labelProps,
+  defaultTagName: 'span',
+  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>