base-ui-vue 0.1.0

package/src/avatar/root/AvatarRoot.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import type { BaseUIComponentProps } from '../../utils/types'
+import { computed, provide, ref, useAttrs } from 'vue'
+import { useRenderElement } from '../../utils/useRenderElement'
+import { AvatarRootContextKey } from './AvatarRootContext'
+import { avatarStateAttributesMapping } from './stateAttributesMapping'
+
+export type ImageLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error'
+
+export interface AvatarRootState {
+  imageLoadingStatus: ImageLoadingStatus
+}
+
+export interface AvatarRootProps extends BaseUIComponentProps<AvatarRootState> { }
+
+/**
+ * Displays a user's profile picture, initials, or fallback icon.
+ * Renders a \`<span>\` element.
+ *
+ * Documentation: [Base UI Avatar](https://base-ui-vue.com/components/avatar)
+ */
+defineOptions({
+  name: 'AvatarRoot',
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<AvatarRootProps>(), {
+  as: 'span',
+})
+
+const attrs = useAttrs()
+
+const imageLoadingStatus = ref<ImageLoadingStatus>('idle')
+
+provide(AvatarRootContextKey, {
+  imageLoadingStatus,
+  setImageLoadingStatus: (status: ImageLoadingStatus) => {
+    imageLoadingStatus.value = status
+  },
+})
+
+const state = computed<AvatarRootState>(() => ({
+  imageLoadingStatus: imageLoadingStatus.value,
+}))
+
+const { tag, mergedProps, renderless } = useRenderElement({
+  componentProps: props,
+  state,
+  props: computed(() => ({
+    ...attrs,
+  })),
+  stateAttributesMapping: avatarStateAttributesMapping,
+  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/avatar/root/AvatarRootContext.ts

@@ -0,0 +1,22 @@
+import type { InjectionKey, Ref } from 'vue'
+import type { ImageLoadingStatus } from './AvatarRoot.vue'
+import { inject } from 'vue'
+
+export interface AvatarRootContext {
+  imageLoadingStatus: Ref<ImageLoadingStatus>
+  setImageLoadingStatus: (status: ImageLoadingStatus) => void
+}
+
+export const AvatarRootContextKey: InjectionKey<AvatarRootContext>
+  = Symbol('AvatarRootContext')
+
+export function useAvatarRootContext() {
+  const context = inject(AvatarRootContextKey, undefined)
+  if (context === undefined) {
+    throw new Error(
+      'Base UI Vue: AvatarRootContext is missing. Avatar parts must be placed within <AvatarRoot>.',
+    )
+  }
+
+  return context
+}

package/src/avatar/root/stateAttributesMapping.ts

@@ -0,0 +1,7 @@
+import type { StateAttributesMapping } from '../../utils/getStateAttributesProps'
+import type { AvatarRootState } from './AvatarRoot.vue'
+
+export const avatarStateAttributesMapping: StateAttributesMapping<AvatarRootState>
+  = {
+    imageLoadingStatus: () => null,
+  }

package/src/button/Button.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import type { ButtonProps } from './button.types'
+import { computed, useAttrs } from 'vue'
+import { useButton } from '../use-button'
+import { useRenderElement } from '../utils/useRenderElement'
+
+defineOptions({
+  name: 'BaseUIButton',
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<ButtonProps>(), {
+  as: 'button',
+  disabled: false,
+  focusableWhenDisabled: false,
+  nativeButton: undefined,
+})
+
+const attrs = useAttrs()
+
+const isNativeButton = computed(() => {
+  if (props.nativeButton !== undefined) {
+    return props.nativeButton
+  }
+  return typeof props.as === 'string' && props.as.toLowerCase() === 'button'
+})
+
+const { getButtonProps, buttonRef } = useButton({
+  disabled: () => props.disabled,
+  focusableWhenDisabled: () => props.focusableWhenDisabled,
+  native: isNativeButton,
+})
+
+const state = computed(() => ({
+  disabled: props.disabled,
+}))
+
+const {
+  tag,
+  mergedProps,
+  renderless,
+  ref: renderRef,
+} = useRenderElement({
+  componentProps: props,
+  state,
+  props: computed(() => getButtonProps({
+    ...attrs,
+  })),
+  defaultTagName: 'button',
+  ref: buttonRef,
+})
+</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>

package/src/button/ButtonDataAttributes.ts

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

package/src/button/button.types.ts

@@ -0,0 +1,22 @@
+import type { BaseUIComponentProps, NativeButtonProps } from '../utils/types'
+
+export interface ButtonState {
+  /**
+   * Whether the button should ignore user interaction.
+   */
+  disabled: boolean
+}
+
+export interface ButtonProps
+  extends NativeButtonProps, BaseUIComponentProps<ButtonState> {
+  /**
+   * Whether the button should ignore user interaction.
+   * @default false
+   */
+  disabled?: boolean
+  /**
+   * Whether the button should be focusable when disabled.
+   * @default false
+   */
+  focusableWhenDisabled?: boolean
+}

package/src/button/index.ts

@@ -0,0 +1,2 @@
+export type * from './button.types'
+export { default as Button } from './Button.vue'

package/src/collapsible/collapsible.types.ts

@@ -0,0 +1,64 @@
+import type { BaseUIChangeEventDetails } from '../utils/createBaseUIEventDetails'
+import type { REASONS } from '../utils/reasons'
+import type { BaseUIComponentProps, NativeButtonProps } from '../utils/types'
+import type { TransitionStatus } from '../utils/useTransitionStatus'
+
+export type { TransitionStatus }
+
+export interface CollapsibleRootState {
+  open: boolean
+  disabled: boolean
+  transitionStatus: TransitionStatus
+}
+
+export type CollapsibleChangeEventReason = typeof REASONS.triggerPress | typeof REASONS.none
+export type CollapsibleChangeEventDetails = BaseUIChangeEventDetails<CollapsibleChangeEventReason>
+
+export interface CollapsibleRootProps extends BaseUIComponentProps<CollapsibleRootState> {
+  /**
+   * Whether the collapsible panel is currently open (controlled).
+   */
+  open?: boolean
+  /**
+   * Whether the collapsible panel is initially open (uncontrolled).
+   * @default false
+   */
+  defaultOpen?: boolean
+  /**
+   * Whether the component should ignore user interaction.
+   * @default false
+   */
+  disabled?: boolean
+}
+
+export interface CollapsibleTriggerProps
+  extends NativeButtonProps, BaseUIComponentProps<CollapsibleRootState> {
+  /**
+   * Whether the trigger should ignore user interaction.
+   * When undefined, inherits from CollapsibleRoot.
+   */
+  disabled?: boolean
+}
+
+export interface CollapsiblePanelState extends CollapsibleRootState {
+  transitionStatus: TransitionStatus
+}
+
+export interface CollapsiblePanelProps extends BaseUIComponentProps<CollapsiblePanelState> {
+  /**
+   * The `id` attribute of the panel element.
+   * When set, overrides the auto-generated panel id.
+   */
+  id?: string
+  /**
+   * Whether to keep the element in the DOM while the panel is hidden.
+   * @default false
+   */
+  keepMounted?: boolean
+  /**
+   * Allows the browser's built-in page search to find and expand the panel contents.
+   * Overrides the `keepMounted` prop and uses `hidden="until-found"`.
+   * @default false
+   */
+  hiddenUntilFound?: boolean
+}

package/src/collapsible/index.ts

@@ -0,0 +1,6 @@
+export type * from './collapsible.types'
+export { default as CollapsiblePanel } from './panel/CollapsiblePanel.vue'
+export { default as CollapsibleRoot } from './root/CollapsibleRoot.vue'
+export { collapsibleRootContextKey, useCollapsibleRootContext } from './root/CollapsibleRootContext'
+export type { CollapsibleRootContext } from './root/CollapsibleRootContext'
+export { default as CollapsibleTrigger } from './trigger/CollapsibleTrigger.vue'

package/src/collapsible/panel/CollapsiblePanel.vue

@@ -0,0 +1,145 @@
+<script setup lang="ts">
+import type { CollapsiblePanelProps, CollapsiblePanelState } from '../collapsible.types'
+import { computed, useAttrs, watch } from 'vue'
+import { useOpenChangeComplete } from '../../utils/useOpenChangeComplete'
+import { useRenderElement } from '../../utils/useRenderElement'
+import { warn } from '../../utils/warn'
+import { useCollapsibleRootContext } from '../root/CollapsibleRootContext'
+import { collapsibleStateAttributesMapping } from '../root/stateAttributesMapping'
+import { CollapsiblePanelCssVars } from './CollapsiblePanelCssVars'
+import { useCollapsiblePanel } from './useCollapsiblePanel'
+
+defineOptions({
+  name: 'CollapsiblePanel',
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<CollapsiblePanelProps>(), {
+  as: 'div',
+  keepMounted: false,
+  hiddenUntilFound: false,
+})
+
+const attrs = useAttrs()
+
+const ctx = useCollapsibleRootContext()
+
+watch(
+  () => props.hiddenUntilFound,
+  val => ctx.setHiddenUntilFound(val),
+  { immediate: true },
+)
+
+watch(
+  () => props.keepMounted,
+  val => ctx.setKeepMounted(val),
+  { immediate: true },
+)
+
+watch(
+  () => props.id,
+  id => ctx.setPanelIdState(id),
+  { immediate: true, flush: 'sync' },
+)
+
+if (process.env.NODE_ENV !== 'production') {
+  watch(
+    [() => props.hiddenUntilFound, () => props.keepMounted] as const,
+    ([hiddenUntilFound, keepMounted]) => {
+      if (hiddenUntilFound && keepMounted === false) {
+        warn(
+          'The `:keep-mounted="false"` prop on a Collapsible will be ignored when using `hidden-until-found` since it requires the Panel to remain mounted even when closed.',
+        )
+      }
+    },
+    { immediate: true },
+  )
+}
+
+const { hidden, panelRef } = useCollapsiblePanel({
+  abortControllerRef: ctx.abortControllerRef,
+  animationTypeRef: ctx.animationTypeRef,
+  height: ctx.height,
+  hiddenUntilFound: props.hiddenUntilFound,
+  id: ctx.panelId,
+  keepMounted: props.keepMounted,
+  mounted: ctx.mounted,
+  onOpenChange: ctx.onOpenChange,
+  open: ctx.open,
+  panelRef: ctx.panelRef,
+  runOnceAnimationsFinish: ctx.runOnceAnimationsFinish,
+  setDimensions: ctx.setDimensions,
+  setMounted: ctx.setMounted,
+  setOpen: ctx.setOpen,
+  setVisible: ctx.setVisible,
+  transitionDimensionRef: ctx.transitionDimensionRef,
+  visible: ctx.visible,
+  width: ctx.width,
+})
+
+useOpenChangeComplete({
+  open: computed(() => ctx.open.value && ctx.transitionStatus.value === 'idle'),
+  ref: ctx.panelRef,
+  onComplete() {
+    if (!ctx.open.value) {
+      return
+    }
+    ctx.setDimensions({ height: undefined, width: undefined })
+  },
+})
+
+const panelState = computed<CollapsiblePanelState>(() => ({
+  ...ctx.state.value,
+  transitionStatus: ctx.transitionStatus.value,
+}))
+
+const shouldRender = computed(() =>
+  props.keepMounted || props.hiddenUntilFound || ctx.mounted.value,
+)
+
+const panelProps = computed(() => {
+  const heightVal = ctx.height.value
+  const widthVal = ctx.width.value
+  const resolvedStyle
+    = typeof props.style === 'function'
+      ? props.style(panelState.value)
+      : props.style
+
+  return {
+    ...attrs,
+    id: ctx.panelId.value,
+    hidden: props.hiddenUntilFound ? undefined : (hidden.value ? true : undefined),
+    style: [
+      resolvedStyle,
+      {
+        [CollapsiblePanelCssVars.collapsiblePanelHeight]: heightVal === undefined ? 'auto' : `${heightVal}px`,
+        [CollapsiblePanelCssVars.collapsiblePanelWidth]: widthVal === undefined ? 'auto' : `${widthVal}px`,
+      },
+    ],
+  }
+})
+
+const {
+  tag,
+  mergedProps,
+  renderless,
+  ref: renderRef,
+} = useRenderElement({
+  componentProps: {
+    as: props.as,
+    class: props.class,
+  },
+  state: panelState,
+  props: panelProps,
+  stateAttributesMapping: collapsibleStateAttributesMapping,
+  defaultTagName: 'div',
+  ref: panelRef,
+})
+</script>
+
+<template>
+  <slot v-if="renderless && shouldRender" :ref="renderRef" :props="mergedProps" :state="panelState" />
+  <component :is="tag" v-else-if="shouldRender" :ref="renderRef" v-bind="mergedProps">
+    <slot :state="panelState" />
+  </component>
+</template>

package/src/collapsible/panel/CollapsiblePanelCssVars.ts

@@ -0,0 +1,12 @@
+export enum CollapsiblePanelCssVars {
+  /**
+   * The collapsible panel's height.
+   * @type {number}
+   */
+  collapsiblePanelHeight = '--collapsible-panel-height',
+  /**
+   * The collapsible panel's width.
+   * @type {number}
+   */
+  collapsiblePanelWidth = '--collapsible-panel-width',
+}

package/src/collapsible/panel/CollapsiblePanelDataAttributes.ts

@@ -0,0 +1,18 @@
+export enum CollapsiblePanelDataAttributes {
+  /**
+   * Present when the collapsible panel is open.
+   */
+  open = 'data-open',
+  /**
+   * Present when the collapsible panel is closed.
+   */
+  closed = 'data-closed',
+  /**
+   * Present when the panel is animating in.
+   */
+  startingStyle = 'data-starting-style',
+  /**
+   * Present when the panel is animating out.
+   */
+  endingStyle = 'data-ending-style',
+}