base-ui-vue 0.3.0 → 0.5.0

package/src/floating-ui-vue/utils/composite.ts

@@ -3,6 +3,7 @@ import type { Ref } from 'vue'
 import type { Dimensions } from '../types'
 
 import { floor } from '@floating-ui/utils'
+import { getComputedStyle } from '@floating-ui/utils/dom'
 import { ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP } from './constants'
 import { stopEvent } from './event'
 
@@ -473,3 +474,22 @@ export function isListIndexDisabled(
     || element.getAttribute('aria-disabled') === 'true'
   )
 }
+
+export function isHiddenByStyles(styles: CSSStyleDeclaration) {
+  return styles.visibility === 'hidden' || styles.visibility === 'collapse'
+}
+
+export function isElementVisible(
+  element: Element | null,
+  styles: CSSStyleDeclaration | null = element ? getComputedStyle(element) : null,
+) {
+  if (!element || !element.isConnected || !styles || isHiddenByStyles(styles)) {
+    return false
+  }
+
+  if (typeof element.checkVisibility === 'function') {
+    return element.checkVisibility()
+  }
+
+  return styles.display !== 'none' && styles.display !== 'contents'
+}

package/src/floating-ui-vue/utils/constants.ts

@@ -2,3 +2,5 @@ export const ARROW_LEFT = 'ArrowLeft'
 export const ARROW_RIGHT = 'ArrowRight'
 export const ARROW_UP = 'ArrowUp'
 export const ARROW_DOWN = 'ArrowDown'
+
+export const TYPEABLE_SELECTOR = 'input:not([type="hidden"]):not([disabled]),[contenteditable]:not([contenteditable="false"]),textarea:not([disabled])'

package/src/floating-ui-vue/utils/createAttribute.ts

@@ -0,0 +1,3 @@
+export function createAttribute(name: string): string {
+  return `data-base-ui-vue-${name}`
+}

package/src/floating-ui-vue/utils/createEventEmitter.ts

@@ -0,0 +1,20 @@
+import type { FloatingEvents } from '../types'
+
+export function createEventEmitter(): FloatingEvents {
+  const map = new Map<string, Set<(data: any) => void>>()
+
+  return {
+    emit(event: string, data?: any) {
+      map.get(event)?.forEach(listener => listener(data))
+    },
+    on(event: string, listener: (data: any) => void) {
+      if (!map.has(event)) {
+        map.set(event, new Set())
+      }
+      map.get(event)!.add(listener)
+    },
+    off(event: string, listener: (data: any) => void) {
+      map.get(event)?.delete(listener)
+    },
+  }
+}

package/src/floating-ui-vue/utils/element.ts

@@ -1,3 +1,62 @@
+import type { FloatingTriggerMap } from '../types'
+import { isElement, isHTMLElement } from '@floating-ui/utils/dom'
+import { TYPEABLE_SELECTOR } from './constants'
+import { contains, getTarget } from './shadowDom'
+
+export { contains, getTarget }
+
+export function isTargetInsideEnabledTrigger(
+  target: EventTarget | null,
+  triggerElements: FloatingTriggerMap,
+) {
+  if (!isElement(target)) {
+    return false
+  }
+
+  const targetElement = target
+
+  if (triggerElements.hasElement(targetElement)) {
+    return !targetElement.hasAttribute('data-trigger-disabled')
+  }
+
+  for (const [, trigger] of triggerElements.entries()) {
+    if (contains(trigger, targetElement)) {
+      return !trigger.hasAttribute('data-trigger-disabled')
+    }
+  }
+
+  return false
+}
+
+export function isEventTargetWithin(event: Event, node: Node | null | undefined) {
+  if (node == null) {
+    return false
+  }
+
+  if ('composedPath' in event) {
+    return event.composedPath().includes(node)
+  }
+
+  const eventAgain = event as Event
+  return eventAgain.target != null && node.contains(eventAgain.target as Node)
+}
+
+export function isRootElement(element: Element): boolean {
+  return element.matches('html,body')
+}
+
+export function isTypeableElement(element: unknown): boolean {
+  return isHTMLElement(element) && element.matches(TYPEABLE_SELECTOR)
+}
+
+export function isInteractiveElement(element: Element | null) {
+  return (
+    element?.closest(
+      `button,a[href],[role="button"],select,[tabindex]:not([tabindex="-1"]),${TYPEABLE_SELECTOR}`,
+    ) != null
+  )
+}
+
 export function matchesFocusVisible(element: Element | null) {
   if (!element) {
     return true

package/src/floating-ui-vue/utils/event.ts

@@ -2,3 +2,18 @@ export function stopEvent(event: Event) {
   event.preventDefault()
   event.stopPropagation()
 }
+
+export function isMouseLikePointerType(pointerType: string | undefined, strict?: boolean) {
+  const values: Array<string | undefined> = ['mouse', 'pen']
+
+  if (!strict) {
+    values.push('', undefined)
+  }
+
+  return values.includes(pointerType)
+}
+
+export function isClickLikeEvent(event: Event) {
+  const type = event.type
+  return type === 'click' || type === 'mousedown' || type === 'keydown' || type === 'keyup'
+}

package/src/floating-ui-vue/utils/nodes.ts

@@ -0,0 +1,14 @@
+import type { FloatingNodeType } from '../types'
+
+export function getNodeChildren(
+  nodes: FloatingNodeType[],
+  id: string | undefined,
+  onlyOpenChildren = true,
+): FloatingNodeType[] {
+  const directChildren = nodes.filter(node => node.parentId === id)
+
+  return directChildren.flatMap(child => [
+    ...(!onlyOpenChildren || child.context?.open.value ? [child] : []),
+    ...getNodeChildren(nodes, child.id, onlyOpenChildren),
+  ])
+}

package/src/floating-ui-vue/utils/tabbable.ts

@@ -0,0 +1,309 @@
+import { getComputedStyle, getNodeName, isHTMLElement, isShadowRoot } from '@floating-ui/utils/dom'
+import { ownerDocument } from '../../utils/owner'
+import { isElementVisible } from './composite'
+import { activeElement, contains } from './shadowDom'
+
+export type FocusableElement = HTMLElement | SVGElement
+
+const CANDIDATE_SELECTOR
+  = 'a[href],button,input,select,textarea,summary,details,iframe,object,embed,[tabindex],[contenteditable]:not([contenteditable="false"]),audio[controls],video[controls]'
+
+function getParentElement(element: Element) {
+  const assignedSlot = (
+    element as Element & {
+      assignedSlot?: HTMLSlotElement | null | undefined
+    }
+  ).assignedSlot
+
+  if (assignedSlot) {
+    return assignedSlot
+  }
+
+  if (element.parentElement) {
+    return element.parentElement
+  }
+
+  const rootNode = element.getRootNode()
+  return isShadowRoot(rootNode) ? rootNode.host : null
+}
+
+function getDetailsSummary(details: Element) {
+  for (const child of Array.from(details.children)) {
+    if (getNodeName(child) === 'summary') {
+      return child
+    }
+  }
+
+  return null
+}
+
+function isWithinOpenDetailsSummary(element: Element, details: Element) {
+  const summary = getDetailsSummary(details)
+  return !!summary && (element === summary || contains(summary, element))
+}
+
+function isFocusableCandidate(element: Element | null): element is FocusableElement {
+  const nodeName = element ? getNodeName(element) : ''
+
+  return (
+    element != null
+    && element.matches(CANDIDATE_SELECTOR)
+    && (
+      nodeName !== 'summary'
+      || (
+        element.parentElement != null
+        && getNodeName(element.parentElement) === 'details'
+        && getDetailsSummary(element.parentElement) === element
+      )
+    )
+    && (nodeName !== 'details' || getDetailsSummary(element) == null)
+    && (nodeName !== 'input' || (element as HTMLInputElement).type !== 'hidden')
+  )
+}
+
+function isFocusableElement(element: Element | null): element is FocusableElement {
+  if (!isFocusableCandidate(element) || !element.isConnected || element.matches(':disabled')) {
+    return false
+  }
+
+  for (let current: Element | null = element; current; current = getParentElement(current)) {
+    const isAncestor = current !== element
+    const isSlot = getNodeName(current) === 'slot'
+
+    if (current.hasAttribute('inert')) {
+      return false
+    }
+
+    if (
+      (
+        isAncestor
+        && getNodeName(current) === 'details'
+        && !(current as HTMLDetailsElement).open
+        && !isWithinOpenDetailsSummary(element, current)
+      )
+      || current.hasAttribute('hidden')
+      || (!isSlot && !isVisibleInTabbableTree(current, isAncestor))
+    ) {
+      return false
+    }
+  }
+
+  return true
+}
+
+function isHTMLElementOrSVGElement(element: Element): element is FocusableElement {
+  return (
+    isHTMLElement(element)
+    || (typeof SVGElement !== 'undefined' && element instanceof SVGElement)
+  )
+}
+
+function isVisibleInTabbableTree(element: Element, isAncestor: boolean) {
+  const styles = getComputedStyle(element)
+
+  if (!isAncestor) {
+    return isElementVisible(element, styles)
+  }
+
+  return styles.display !== 'none'
+}
+
+function getTabIndex(element: FocusableElement) {
+  const tabIndex = element.tabIndex
+
+  if (tabIndex < 0) {
+    const nodeName = getNodeName(element)
+    if (
+      nodeName === 'details'
+      || nodeName === 'audio'
+      || nodeName === 'video'
+      || (isHTMLElement(element) && element.isContentEditable)
+    ) {
+      return 0
+    }
+  }
+
+  return tabIndex
+}
+
+function getNamedRadioInput(element: FocusableElement) {
+  if (getNodeName(element) !== 'input') {
+    return null
+  }
+
+  const input = element as HTMLInputElement
+  return input.type === 'radio' && input.name !== '' ? input : null
+}
+
+function isTabbableRadio(element: FocusableElement, candidates: FocusableElement[]) {
+  const input = getNamedRadioInput(element)
+
+  if (!input) {
+    return true
+  }
+
+  const checkedRadio = candidates.find((candidate) => {
+    const radio = getNamedRadioInput(candidate)
+    return radio?.name === input.name && radio.form === input.form && radio.checked
+  })
+
+  if (checkedRadio) {
+    return checkedRadio === input
+  }
+
+  return (
+    candidates.find((candidate) => {
+      const radio = getNamedRadioInput(candidate)
+      return radio?.name === input.name && radio.form === input.form
+    }) === input
+  )
+}
+
+function getComposedChildren(container: ParentNode): Element[] {
+  if (isHTMLElement(container) && getNodeName(container) === 'slot') {
+    const assignedElements = (container as HTMLSlotElement).assignedElements({ flatten: true })
+    if (assignedElements.length > 0) {
+      return assignedElements
+    }
+  }
+
+  if (isHTMLElement(container) && container.shadowRoot) {
+    return Array.from(container.shadowRoot.children)
+  }
+
+  return Array.from(container.children)
+}
+
+function appendCandidates(container: ParentNode, list: FocusableElement[]) {
+  getComposedChildren(container).forEach((child) => {
+    if (isFocusableCandidate(child)) {
+      list.push(child)
+    }
+
+    appendCandidates(child, list)
+  })
+}
+
+function appendMatchingElements(container: ParentNode, selector: string, list: FocusableElement[]) {
+  getComposedChildren(container).forEach((child) => {
+    if (isHTMLElementOrSVGElement(child) && child.matches(selector)) {
+      list.push(child)
+    }
+
+    appendMatchingElements(child, selector, list)
+  })
+}
+
+function getOwnerDocument(element: Element | null) {
+  return ownerDocument(element) ?? (typeof document !== 'undefined' ? document : null)
+}
+
+function getTabbableIn(container: HTMLElement, dir: 1 | -1): FocusableElement | undefined {
+  const list = tabbable(container)
+  const len = list.length
+
+  if (len === 0) {
+    return undefined
+  }
+
+  const doc = getOwnerDocument(container)
+  const active = doc ? activeElement(doc) as FocusableElement : null
+  const index = active ? list.indexOf(active) : -1
+  const nextIndex = index === -1 ? (dir === 1 ? 0 : len - 1) : index + dir
+
+  return list[nextIndex]
+}
+
+function getTabbableNearElement(referenceElement: Element | null, dir: 1 | -1) {
+  if (!referenceElement) {
+    return null
+  }
+
+  const body = getOwnerDocument(referenceElement)?.body
+  if (!body) {
+    return null
+  }
+
+  const list = tabbable(body)
+  const elementCount = list.length
+
+  if (elementCount === 0) {
+    return null
+  }
+
+  const index = list.indexOf(referenceElement as FocusableElement)
+
+  if (index === -1) {
+    return null
+  }
+
+  const nextIndex = (index + dir + elementCount) % elementCount
+  return list[nextIndex]
+}
+
+export function isTabbable(element: Element | null) {
+  return isFocusableElement(element) && getTabIndex(element) >= 0
+}
+
+export function focusable(container: Element) {
+  const candidates: FocusableElement[] = []
+  appendCandidates(container, candidates)
+  return candidates.filter(isFocusableElement)
+}
+
+export function tabbable(container: Element) {
+  const candidates = focusable(container)
+  return candidates.filter(
+    element => getTabIndex(element) >= 0 && isTabbableRadio(element, candidates),
+  )
+}
+
+export function getNextTabbable(referenceElement: Element | null): FocusableElement | null {
+  const body = getOwnerDocument(referenceElement)?.body
+  return (body && getTabbableIn(body, 1)) || (referenceElement as FocusableElement | null)
+}
+
+export function getPreviousTabbable(referenceElement: Element | null): FocusableElement | null {
+  const body = getOwnerDocument(referenceElement)?.body
+  return (body && getTabbableIn(body, -1)) || (referenceElement as FocusableElement | null)
+}
+
+export function getTabbableAfterElement(referenceElement: Element | null): FocusableElement | null {
+  return getTabbableNearElement(referenceElement, 1)
+}
+
+export function getTabbableBeforeElement(
+  referenceElement: Element | null,
+): FocusableElement | null {
+  return getTabbableNearElement(referenceElement, -1)
+}
+
+export function isOutsideEvent(event: FocusEvent, container?: Element) {
+  const containerElement = container || (event.currentTarget as Element)
+  const relatedTarget = event.relatedTarget as HTMLElement | null
+  return !relatedTarget || !contains(containerElement, relatedTarget)
+}
+
+export function disableFocusInside(container: HTMLElement) {
+  const tabbableElements = tabbable(container)
+  tabbableElements.forEach((element) => {
+    element.dataset.tabindex = element.getAttribute('tabindex') || ''
+    element.setAttribute('tabindex', '-1')
+  })
+}
+
+export function enableFocusInside(container: HTMLElement) {
+  const elements: FocusableElement[] = []
+  appendMatchingElements(container, '[data-tabindex]', elements)
+  elements.forEach((element) => {
+    const tabindex = element.getAttribute('data-tabindex')
+    element.removeAttribute('data-tabindex')
+
+    if (tabindex) {
+      element.setAttribute('tabindex', tabindex)
+    }
+    else {
+      element.removeAttribute('tabindex')
+    }
+  })
+}

package/src/index.ts

@@ -15,13 +15,19 @@ export * from './form'
 export * from './input'
 export * from './merge-props'
 export * from './meter'
+export * from './number-field'
+export * from './otp-field'
 export * from './progress'
+export * from './radio'
+export * from './radio-group'
+export * from './scroll-area'
 export * from './separator'
 export * from './slider'
 export * from './switch'
-export * from './scroll-area'
+export * from './tabs'
 export * from './toggle'
 export * from './toggle-group'
 export * from './toolbar'
+export * from './tooltip'
 export * from './use-render'
 export { Slot } from './utils/slot'

package/src/number-field/decrement/NumberFieldDecrement.vue

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import type { BaseUIComponentProps, NativeButtonProps } from '../../utils/types'
+import type { NumberFieldRootState } from '../root/NumberFieldRoot.vue'
+import { computed, useAttrs } from 'vue'
+import { mergeProps } from '../../merge-props/mergeProps'
+import { useButton } from '../../use-button/useButton'
+import { useRenderElement } from '../../utils/useRenderElement'
+import { useNumberFieldRootContext } from '../root/NumberFieldRootContext'
+import { useNumberFieldButton } from '../root/useNumberFieldButton'
+import { stateAttributesMapping } from '../utils/stateAttributesMapping'
+
+export type NumberFieldDecrementState = NumberFieldRootState
+
+export interface NumberFieldDecrementProps
+  extends NativeButtonProps, BaseUIComponentProps<NumberFieldDecrementState> {
+  disabled?: boolean
+}
+
+defineOptions({
+  name: 'NumberFieldDecrement',
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<NumberFieldDecrementProps>(), {
+  as: 'button',
+  disabled: false,
+  nativeButton: true,
+})
+
+const attrs = useAttrs()
+const attrsObject = attrs as Record<string, any>
+
+const {
+  allowInputSyncRef,
+  disabled: contextDisabled,
+  formatOptionsRef,
+  getStepAmount,
+  id,
+  incrementValue,
+  inputRef,
+  inputValue,
+  minWithDefault,
+  readOnly,
+  setValue,
+  state,
+  value,
+  valueRef,
+  locale,
+  lastChangedValueRef,
+  onValueCommitted,
+} = useNumberFieldRootContext()
+
+const isMin = computed(() => value.value != null && value.value <= minWithDefault.value)
+const disabled = computed(() => props.disabled || contextDisabled.value || isMin.value)
+
+const buttonProps = useNumberFieldButton({
+  isIncrement: false,
+  inputRef,
+  inputValue: () => inputValue.value,
+  disabled: () => disabled.value,
+  readOnly: () => readOnly.value,
+  id: () => id.value,
+  setValue,
+  getStepAmount,
+  incrementValue,
+  allowInputSyncRef,
+  formatOptionsRef,
+  valueRef,
+  locale: () => locale.value,
+  lastChangedValueRef,
+  onValueCommitted,
+})
+
+const { getButtonProps, buttonRef } = useButton({
+  disabled: () => disabled.value,
+  native: () => props.nativeButton,
+  focusableWhenDisabled: true,
+})
+
+const buttonState = computed<NumberFieldDecrementState>(() => ({
+  ...state.value,
+  disabled: disabled.value,
+}))
+
+const combinedProps = computed(() =>
+  mergeProps(buttonProps.value, attrsObject, getButtonProps()),
+)
+
+const {
+  tag,
+  mergedProps,
+  renderless,
+  ref: renderRef,
+} = useRenderElement({
+  componentProps: props,
+  state: buttonState,
+  props: combinedProps,
+  stateAttributesMapping,
+  defaultTagName: 'button',
+  ref: buttonRef,
+})
+</script>
+
+<template>
+  <slot v-if="renderless" :ref="renderRef" :props="mergedProps" :state="buttonState" />
+  <component :is="tag" v-else :ref="renderRef" v-bind="mergedProps">
+    <slot :state="buttonState" />
+  </component>
+</template>

package/src/number-field/group/NumberFieldGroup.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import type { BaseUIComponentProps } from '../../utils/types'
+import type { NumberFieldRootState } from '../root/NumberFieldRoot.vue'
+import { computed, useAttrs } from 'vue'
+import { mergeProps } from '../../merge-props/mergeProps'
+import { useRenderElement } from '../../utils/useRenderElement'
+import { useNumberFieldRootContext } from '../root/NumberFieldRootContext'
+import { stateAttributesMapping } from '../utils/stateAttributesMapping'
+
+export type NumberFieldGroupState = NumberFieldRootState
+
+export interface NumberFieldGroupProps extends BaseUIComponentProps<NumberFieldGroupState> {}
+
+defineOptions({
+  name: 'NumberFieldGroup',
+  inheritAttrs: false,
+})
+
+const props = defineProps<NumberFieldGroupProps>()
+
+const attrs = useAttrs()
+const attrsObject = attrs as Record<string, any>
+
+const { state } = useNumberFieldRootContext()
+
+const groupProps = computed(() => mergeProps(attrsObject, { role: 'group' }))
+
+const {
+  tag,
+  mergedProps,
+  renderless,
+  ref: renderRef,
+} = useRenderElement({
+  componentProps: props,
+  state,
+  props: groupProps,
+  stateAttributesMapping,
+  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>