base-ui-vue 0.1.0 → 0.2.0

package/src/toggle/Toggle.vue

@@ -0,0 +1,211 @@
+<script setup lang="ts" generic="Value extends string = string">
+import type { BaseUIChangeEventDetails } from '../utils/createBaseUIEventDetails'
+import type { BaseUIComponentProps, NativeButtonProps } from '../utils/types'
+import { computed, getCurrentInstance, useAttrs, watchEffect } from 'vue'
+import CompositeItem from '../composite/item/CompositeItem.vue'
+import { mergeProps } from '../merge-props'
+import { useToggleGroupContext } from '../toggle-group/ToggleGroupContext'
+import { useButton } from '../use-button'
+import { createChangeEventDetails } from '../utils/createBaseUIEventDetails'
+import { error } from '../utils/error'
+import { REASONS } from '../utils/reasons'
+import { useBaseUiId } from '../utils/useBaseUiId'
+import { useControllableState } from '../utils/useControllableState'
+import { useRenderElement } from '../utils/useRenderElement'
+
+export interface ToggleState {
+  /**
+   * Whether the toggle is currently pressed.
+   */
+  pressed: boolean
+  /**
+   * Whether the toggle should ignore user interaction.
+   */
+  disabled: boolean
+}
+
+export interface ToggleProps<Value extends string = string>
+  extends NativeButtonProps, BaseUIComponentProps<ToggleState> {
+  /**
+   * Whether the toggle button is currently pressed.
+   * This is the controlled counterpart of `defaultPressed`.
+   */
+  pressed?: boolean
+  /**
+   * Whether the toggle button is initially pressed.
+   * This is the uncontrolled counterpart of `pressed`.
+   * @default false
+   */
+  defaultPressed?: boolean
+  /**
+   * Whether the component should ignore user interaction.
+   * @default false
+   */
+  disabled?: boolean
+  /**
+   * A unique string that identifies the toggle when used inside a toggle group.
+   */
+  value?: Value | undefined
+}
+
+/**
+ * A two-state button that can be on or off.
+ * Renders a `<button>` element.
+ *
+ * Documentation: [Base UI Vue Toggle](https://baseui-vue.com/docs/components/toggle)
+ */
+defineOptions({
+  name: 'Toggle',
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<ToggleProps<Value>>(), {
+  as: 'button',
+  defaultPressed: false,
+  disabled: false,
+  nativeButton: true,
+})
+
+const emit = defineEmits<{
+  /**
+   * Event handler called when the pressed state changes.
+   */
+  pressedChange: [
+    pressed: boolean,
+    eventDetails: BaseUIChangeEventDetails<typeof REASONS.none>,
+  ]
+}>()
+
+const attrs = useAttrs()
+const instance = getCurrentInstance()
+const groupContext = useToggleGroupContext<Value>(true)
+
+const generatedValue = useBaseUiId()
+const toggleValue = computed(
+  () => (props.value || generatedValue) as Value | undefined,
+)
+const groupValue = computed(() => groupContext?.value.value ?? [])
+
+const disabled = computed(
+  () => props.disabled || (groupContext?.disabled.value ?? false),
+)
+
+if (process.env.NODE_ENV !== 'production') {
+  watchEffect(() => {
+    if (
+      groupContext
+      && props.value === undefined
+      && groupContext.isValueInitialized.value
+    ) {
+      error(
+        'A `<Toggle>` component rendered in a `<ToggleGroup>` has no explicit `value` prop.',
+        'This will cause issues between the Toggle Group and Toggle values.',
+        'Provide the `<Toggle>` with a `value` prop matching the `<ToggleGroup>` values prop type.',
+      )
+    }
+  })
+}
+
+const hasPressedProp = computed(() =>
+  Boolean(instance?.vnode.props && Object.prototype.hasOwnProperty.call(instance.vnode.props, 'pressed')),
+)
+
+const { value: pressed, setValue: setPressedState } = useControllableState<boolean>({
+  controlled: () => {
+    if (groupContext) {
+      return toggleValue.value !== undefined && groupValue.value.includes(toggleValue.value)
+    }
+
+    return hasPressedProp.value ? props.pressed : undefined
+  },
+  default: () => props.defaultPressed,
+  name: 'Toggle',
+  state: 'pressed',
+})
+
+function emitPressedChange(
+  nextPressed: boolean,
+  eventDetails: BaseUIChangeEventDetails<typeof REASONS.none>,
+) {
+  if (toggleValue.value !== undefined) {
+    groupContext?.setGroupValue(toggleValue.value, nextPressed, eventDetails)
+  }
+
+  emit('pressedChange', nextPressed, eventDetails)
+}
+
+const { getButtonProps, buttonRef } = useButton({
+  disabled,
+  native: () => props.nativeButton ?? true,
+})
+
+const state = computed<ToggleState>(() => ({
+  disabled: disabled.value,
+  pressed: pressed.value,
+}))
+
+const buttonAttrs = computed(() => {
+  const { form: _form, type: _type, ...rest } = attrs as Record<string, any>
+  return rest
+})
+
+function createToggleButtonProps() {
+  return mergeProps(
+    getButtonProps(mergeProps(
+      buttonAttrs.value,
+      {
+        'aria-pressed': pressed.value,
+        onClick(event: MouseEvent) {
+          const nextPressed = !pressed.value
+          const details = createChangeEventDetails(REASONS.none, event)
+
+          emitPressedChange(nextPressed, details)
+
+          if (details.isCanceled) {
+            return
+          }
+
+          setPressedState(nextPressed)
+        },
+      },
+    )),
+    groupContext
+      ? { 'aria-disabled': disabled.value ? 'true' : 'false' }
+      : undefined,
+  )
+}
+
+const {
+  tag,
+  mergedProps,
+  renderless,
+  ref: renderRef,
+} = useRenderElement({
+  componentProps: props,
+  state,
+  props: computed(() => createToggleButtonProps()),
+  defaultTagName: 'button',
+  ref: buttonRef,
+})
+
+const itemRefs = [buttonRef]
+</script>
+
+<template>
+  <CompositeItem
+    v-if="groupContext"
+    v-slot="slotProps"
+    :as="as"
+    :class="props.class"
+    :style="props.style"
+    :state="state"
+    :refs="itemRefs"
+    :props="[() => createToggleButtonProps()]"
+  >
+    <slot v-bind="slotProps" />
+  </CompositeItem>
+  <slot v-else-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/toggle/ToggleDataAttributes.ts

@@ -0,0 +1,6 @@
+export enum ToggleDataAttributes {
+  /**
+   * Present when the toggle button is pressed.
+   */
+  pressed = 'data-pressed',
+}

package/src/toggle/index.ts

@@ -0,0 +1,3 @@
+export { default as Toggle } from './Toggle.vue'
+export type { ToggleProps, ToggleState } from './Toggle.vue'
+export { ToggleDataAttributes } from './ToggleDataAttributes'

package/src/toggle-group/ToggleGroup.vue

@@ -0,0 +1,224 @@
+<script setup lang="ts" generic="Value extends string = string">
+import type { BaseUIChangeEventDetails } from '../utils/createBaseUIEventDetails'
+import type { StateAttributesMapping } from '../utils/getStateAttributesProps'
+import type { REASONS } from '../utils/reasons'
+import type { BaseUIComponentProps, HTMLProps, Orientation } from '../utils/types'
+import { computed, provide, useAttrs } from 'vue'
+import CompositeRoot from '../composite/root/CompositeRoot.vue'
+import { useToolbarRootContext } from '../toolbar/root/ToolbarRootContext'
+import { useControllableState } from '../utils/useControllableState'
+import { useRenderElement } from '../utils/useRenderElement'
+import { toggleGroupContextKey } from './ToggleGroupContext'
+import { ToggleGroupDataAttributes } from './ToggleGroupDataAttributes'
+
+export interface ToggleGroupState {
+  /**
+   * Whether the component should ignore user interaction.
+   */
+  disabled: boolean
+  /**
+   * When `false` only one item in the group can be pressed. If any item in
+   * the group becomes pressed, the others will become unpressed.
+   * When `true` multiple items can be pressed.
+   * @default false
+   */
+  multiple: boolean
+  /**
+   * The orientation of the toggle group.
+   */
+  orientation: Orientation
+}
+
+export interface ToggleGroupProps<Value extends string = string>
+  extends BaseUIComponentProps<ToggleGroupState> {
+  /**
+   * The pressed values of the toggle group.
+   * This is the controlled counterpart of `defaultValue`.
+   */
+  value?: Value[]
+  /**
+   * The pressed values of the toggle group.
+   * This is the uncontrolled counterpart of `value`.
+   */
+  defaultValue?: Value[]
+  /**
+   * Whether the toggle group should ignore user interaction.
+   * @default false
+   */
+  disabled?: boolean
+  /**
+   * The orientation of the toggle group.
+   * @default 'horizontal'
+   */
+  orientation?: Orientation
+  /**
+   * Whether to loop keyboard focus back to the first item when the end of the list is reached.
+   * @default true
+   */
+  loopFocus?: boolean
+  /**
+   * When `false` only one item in the group can be pressed. If any item in
+   * the group becomes pressed, the others will become unpressed.
+   * When `true` multiple items can be pressed.
+   * @default false
+   */
+  multiple?: boolean
+}
+
+/**
+ * Provides a shared state to a series of toggle buttons.
+ *
+ * Documentation: [Base UI Vue Toggle Group](https://baseui-vue.com/docs/components/toggle-group)
+ */
+defineOptions({
+  name: 'ToggleGroup',
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<ToggleGroupProps<Value>>(), {
+  as: 'div',
+  disabled: false,
+  orientation: 'horizontal',
+  loopFocus: true,
+  multiple: false,
+})
+
+const emit = defineEmits<{
+  /**
+   * Event handler called when the group value changes.
+   */
+  valueChange: [
+    value: Value[],
+    eventDetails: BaseUIChangeEventDetails<typeof REASONS.none>,
+  ]
+}>()
+
+const attrs = useAttrs()
+const attrsObject = attrs as Record<string, unknown>
+const toolbarContext = useToolbarRootContext(true)
+
+const disabled = computed(
+  () => (toolbarContext?.disabled.value ?? false) || props.disabled,
+)
+
+const isValueInitialized = computed(
+  () => props.value !== undefined || props.defaultValue !== undefined,
+)
+
+const { value: groupValue, setValue: setValueState } = useControllableState<Value[]>({
+  controlled: () => props.value,
+  default: () => (props.value === undefined ? (props.defaultValue ?? []) : []),
+  name: 'ToggleGroup',
+})
+
+function setGroupValue(
+  newValue: Value,
+  nextPressed: boolean,
+  eventDetails: BaseUIChangeEventDetails<typeof REASONS.none>,
+) {
+  let newGroupValue: Value[]
+
+  if (props.multiple) {
+    newGroupValue = groupValue.value.slice()
+
+    if (nextPressed) {
+      newGroupValue.push(newValue)
+    }
+    else {
+      const valueIndex = groupValue.value.indexOf(newValue)
+
+      if (valueIndex >= 0) {
+        newGroupValue.splice(valueIndex, 1)
+      }
+    }
+  }
+  else {
+    newGroupValue = nextPressed ? [newValue] : []
+  }
+
+  emit('valueChange', newGroupValue, eventDetails)
+
+  if (eventDetails.isCanceled) {
+    return
+  }
+
+  setValueState(newGroupValue)
+}
+
+provide(toggleGroupContextKey, {
+  disabled,
+  orientation: computed(() => props.orientation),
+  setGroupValue,
+  value: groupValue,
+  isValueInitialized,
+})
+
+const state = computed<ToggleGroupState>(() => ({
+  disabled: disabled.value,
+  multiple: props.multiple,
+  orientation: props.orientation,
+}))
+
+const stateAttributesMapping: StateAttributesMapping<ToggleGroupState> = {
+  multiple(value) {
+    if (value) {
+      return { [ToggleGroupDataAttributes.multiple]: '' }
+    }
+
+    return null
+  },
+}
+
+const forwardedAttrs = computed(() => {
+  const { class: _class, style: _style, ...rest } = attrsObject
+  return rest
+})
+
+const rootProps = computed<HTMLProps>(() => ({
+  'role': 'group',
+  ...forwardedAttrs.value,
+  'aria-orientation': props.orientation,
+}))
+
+const {
+  tag,
+  mergedProps,
+  renderless,
+  ref: renderRef,
+} = useRenderElement({
+  componentProps: props,
+  state,
+  props: rootProps,
+  stateAttributesMapping,
+  defaultTagName: 'div',
+})
+</script>
+
+<template>
+  <template v-if="toolbarContext">
+    <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>
+  <CompositeRoot
+    v-else
+    :as="as"
+    :class="props.class"
+    :style="props.style"
+    :orientation="props.orientation"
+    :state="state"
+    :state-attributes-mapping="stateAttributesMapping"
+    :loop-focus="props.loopFocus"
+    :enable-home-and-end-keys="true"
+    role="group"
+    v-bind="forwardedAttrs"
+  >
+    <template v-if="renderless" #default="{ ref, props: compositeProps, state: compositeState }">
+      <slot :ref="ref" :props="compositeProps" :state="compositeState" />
+    </template>
+    <template v-else #default="{ state: compositeState }">
+      <slot :state="compositeState" />
+    </template>
+  </CompositeRoot>
+</template>

package/src/toggle-group/ToggleGroupContext.ts

@@ -0,0 +1,45 @@
+import type { InjectionKey, Ref } from 'vue'
+import type { BaseUIChangeEventDetails } from '../utils/createBaseUIEventDetails'
+import type { REASONS } from '../utils/reasons'
+import type { Orientation } from '../utils/types'
+import { inject } from 'vue'
+
+export interface ToggleGroupContext<Value> {
+  value: Readonly<Ref<Value[]>>
+  setGroupValue: (
+    newValue: Value,
+    nextPressed: boolean,
+    eventDetails: BaseUIChangeEventDetails<typeof REASONS.none>,
+  ) => void
+  disabled: Readonly<Ref<boolean>>
+  orientation: Readonly<Ref<Orientation>>
+  /**
+   * Indicates whether the value has been initialized via `value` or `defaultValue` props.
+   * Used to determine if Toggle should warn users about data inconsistency problems.
+   */
+  isValueInitialized: Readonly<Ref<boolean>>
+}
+
+export const toggleGroupContextKey: InjectionKey<ToggleGroupContext<any>>
+  = Symbol('ToggleGroupContext')
+
+export function useToggleGroupContext<Value>(
+  optional: true,
+): ToggleGroupContext<Value> | undefined
+export function useToggleGroupContext<Value>(
+  optional?: false,
+): ToggleGroupContext<Value>
+export function useToggleGroupContext<Value>(optional = false) {
+  const context = inject<ToggleGroupContext<Value> | undefined>(
+    toggleGroupContextKey,
+    undefined,
+  )
+
+  if (context === undefined && !optional) {
+    throw new Error(
+      'Base UI Vue: ToggleGroupContext is missing. ToggleGroup parts must be placed within <ToggleGroup>.',
+    )
+  }
+
+  return context
+}

package/src/toggle-group/ToggleGroupDataAttributes.ts

@@ -0,0 +1,15 @@
+export enum ToggleGroupDataAttributes {
+  /**
+   * Present when the toggle group is disabled.
+   */
+  disabled = 'data-disabled',
+  /**
+   * Indicates the orientation of the toggle group.
+   * @type {'horizontal' | 'vertical'}
+   */
+  orientation = 'data-orientation',
+  /**
+   * Present when the toggle group allows multiple buttons to be in the pressed state at the same time.
+   */
+  multiple = 'data-multiple',
+}

package/src/toggle-group/index.ts

@@ -0,0 +1,5 @@
+export { default as ToggleGroup } from './ToggleGroup.vue'
+export type { ToggleGroupProps, ToggleGroupState } from './ToggleGroup.vue'
+export { toggleGroupContextKey, useToggleGroupContext } from './ToggleGroupContext'
+export type { ToggleGroupContext } from './ToggleGroupContext'
+export { ToggleGroupDataAttributes } from './ToggleGroupDataAttributes'

package/src/toolbar/button/ToolbarButton.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import type { BaseUIComponentProps, NativeButtonProps } from '../../utils/types'
+import type { ToolbarRootState } from '../root/ToolbarRoot.vue'
+import { computed, useAttrs } from 'vue'
+import CompositeItem from '../../composite/item/CompositeItem.vue'
+import { useButton } from '../../use-button'
+import { useToolbarGroupContext } from '../group/ToolbarGroupContext'
+import { useToolbarRootContext } from '../root/ToolbarRootContext'
+
+export interface ToolbarButtonState extends ToolbarRootState {
+  /**
+   * Whether the component is disabled.
+   */
+  disabled: boolean
+  /**
+   * Whether the component remains focusable when disabled.
+   */
+  focusable: boolean
+}
+
+export interface ToolbarButtonProps
+  extends NativeButtonProps,
+  BaseUIComponentProps<ToolbarButtonState> {
+  /**
+   * Whether the component is disabled.
+   * @default false
+   */
+  disabled?: boolean
+  /**
+   * Whether the component remains focusable when disabled.
+   * @default true
+   */
+  focusableWhenDisabled?: boolean
+}
+
+/**
+ * A button that can be used as-is or as a trigger for other components.
+ * Renders a `<button>` element.
+ *
+ * Documentation: [Base UI Vue Toolbar](https://baseui-vue.com/docs/components/toolbar)
+ */
+defineOptions({
+  name: 'ToolbarButton',
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<ToolbarButtonProps>(), {
+  as: 'button',
+  disabled: false,
+  focusableWhenDisabled: true,
+  nativeButton: true,
+})
+
+const attrs = useAttrs()
+const toolbarRootContext = useToolbarRootContext()
+const toolbarGroupContext = useToolbarGroupContext(true)
+
+const disabled = computed(() =>
+  toolbarRootContext.disabled.value
+  || (toolbarGroupContext?.disabled.value ?? false)
+  || props.disabled,
+)
+
+const { getButtonProps, buttonRef } = useButton({
+  disabled,
+  focusableWhenDisabled: () => props.focusableWhenDisabled,
+  native: () => props.nativeButton ?? true,
+})
+
+const state = computed<ToolbarButtonState>(() => ({
+  disabled: disabled.value,
+  orientation: toolbarRootContext.orientation.value,
+  focusable: props.focusableWhenDisabled,
+}))
+
+const itemRefs = [buttonRef]
+const componentProps = computed(() =>
+  typeof props.as === 'string'
+    ? {}
+    : { disabled: disabled.value },
+)
+</script>
+
+<template>
+  <CompositeItem
+    :as="as"
+    :class="props.class"
+    :style="props.style"
+    :metadata="{ focusableWhenDisabled }"
+    :state="state"
+    :refs="itemRefs"
+    :props="[
+      componentProps,
+      () => getButtonProps(attrs as Record<string, any>),
+    ]"
+  >
+    <slot :state="state" />
+  </CompositeItem>
+</template>

package/src/toolbar/button/ToolbarButtonDataAttributes.ts

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

package/src/toolbar/group/ToolbarGroup.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import type { BaseUIComponentProps } from '../../utils/types'
+import type { ToolbarRootState } from '../root/ToolbarRoot.vue'
+import { computed, provide, useAttrs } from 'vue'
+import { useRenderElement } from '../../utils/useRenderElement'
+import { useToolbarRootContext } from '../root/ToolbarRootContext'
+import { toolbarGroupContextKey } from './ToolbarGroupContext'
+
+export interface ToolbarGroupState extends ToolbarRootState {}
+
+export interface ToolbarGroupProps extends BaseUIComponentProps<ToolbarGroupState> {
+  /**
+   * Whether all toolbar items in the group are disabled.
+   * @default false
+   */
+  disabled?: boolean
+}
+
+/**
+ * Groups several toolbar items or toggles.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Vue Toolbar](https://baseui-vue.com/docs/components/toolbar)
+ */
+defineOptions({
+  name: 'ToolbarGroup',
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<ToolbarGroupProps>(), {
+  as: 'div',
+  disabled: false,
+})
+
+const attrs = useAttrs()
+const toolbarRootContext = useToolbarRootContext()
+
+const disabled = computed(() => toolbarRootContext.disabled.value || props.disabled)
+
+provide(toolbarGroupContextKey, {
+  disabled,
+})
+
+const state = computed<ToolbarGroupState>(() => ({
+  disabled: disabled.value,
+  orientation: toolbarRootContext.orientation.value,
+}))
+
+const {
+  tag,
+  mergedProps,
+  renderless,
+  ref: renderRef,
+} = useRenderElement({
+  componentProps: props,
+  state,
+  props: computed(() => ({
+    ...attrs,
+    role: 'group',
+  })),
+  defaultTagName: 'div',
+})
+</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>