base-ui-vue 0.3.0 → 0.5.0

package/src/utils/adaptiveOriginMiddleware.ts

@@ -0,0 +1,79 @@
+import type { Middleware } from '../floating-ui-vue'
+import { getSide } from '@floating-ui/utils'
+import { ownerDocument, ownerWindow } from './owner'
+
+export const DEFAULT_SIDES = {
+  sideX: 'left',
+  sideY: 'top',
+} as const
+
+export const adaptiveOrigin: Middleware = {
+  name: 'adaptiveOrigin',
+  async fn(state) {
+    const {
+      x: rawX,
+      y: rawY,
+      rects: { floating: floatRect },
+      elements: { floating },
+      platform,
+      strategy,
+      placement,
+    } = state
+
+    const win = ownerWindow(floating)
+    const styles = win.getComputedStyle(floating)
+    const hasTransition = styles.transitionDuration !== '0s' && styles.transitionDuration !== ''
+
+    if (!hasTransition) {
+      return {
+        x: rawX,
+        y: rawY,
+        data: DEFAULT_SIDES,
+      }
+    }
+
+    const offsetParent = await platform.getOffsetParent?.(floating)
+
+    let offsetDimensions = { width: 0, height: 0 }
+
+    if (strategy === 'fixed' && win.visualViewport) {
+      offsetDimensions = {
+        width: win.visualViewport.width,
+        height: win.visualViewport.height,
+      }
+    }
+    else if (offsetParent === win) {
+      const doc = ownerDocument(floating)
+      offsetDimensions = {
+        width: doc?.documentElement.clientWidth ?? 0,
+        height: doc?.documentElement.clientHeight ?? 0,
+      }
+    }
+    else if (await platform.isElement?.(offsetParent)) {
+      offsetDimensions = await platform.getDimensions(offsetParent as Element)
+    }
+
+    const currentSide = getSide(placement)
+    let x = rawX
+    let y = rawY
+
+    if (currentSide === 'left') {
+      x = offsetDimensions.width - (rawX + floatRect.width)
+    }
+    if (currentSide === 'top') {
+      y = offsetDimensions.height - (rawY + floatRect.height)
+    }
+
+    const sideX = currentSide === 'left' ? 'right' : DEFAULT_SIDES.sideX
+    const sideY = currentSide === 'top' ? 'bottom' : DEFAULT_SIDES.sideY
+
+    return {
+      x,
+      y,
+      data: {
+        sideX,
+        sideY,
+      },
+    }
+  },
+}

package/src/utils/addEventListener.ts

@@ -0,0 +1,16 @@
+export function addEventListener<K extends keyof HTMLElementEventMap>(
+  target: HTMLElement | SVGElement | Document | Window | null | undefined,
+  type: K,
+  listener: (event: HTMLElementEventMap[K]) => void,
+  options?: AddEventListenerOptions | boolean,
+) {
+  if (!target) {
+    return undefined
+  }
+
+  target.addEventListener(type, listener as EventListener, options)
+
+  return () => {
+    target.removeEventListener(type, listener as EventListener, options)
+  }
+}

package/src/utils/constants.ts

@@ -1 +1,12 @@
+import type { CSSProperties } from 'vue'
+
+export const DISABLED_TRANSITIONS_STYLE = { style: { transition: 'none' } } as const
+
+export const ownerVisuallyHidden: CSSProperties = {
+  clipPath: 'inset(50%)',
+  position: 'fixed',
+  top: 0,
+  left: 0,
+}
+
 export { EMPTY_ARRAY, EMPTY_OBJECT } from './empty'

package/src/utils/createBaseUIEventDetails.ts

@@ -3,6 +3,8 @@ import { EMPTY_OBJECT } from './empty'
 
 interface ReasonToEventMap {
   [REASONS.none]: Event
+  [REASONS.initial]: Event
+  [REASONS.missing]: Event
 
   [REASONS.triggerPress]: MouseEvent | PointerEvent | TouchEvent | KeyboardEvent
   [REASONS.triggerHover]: MouseEvent

package/src/utils/detectBrowser.ts

@@ -0,0 +1,15 @@
+const ua = typeof navigator !== 'undefined' ? navigator.userAgent : ''
+const platform = typeof navigator !== 'undefined' ? navigator.platform : ''
+const maxTouchPoints = typeof navigator !== 'undefined' ? navigator.maxTouchPoints : 0
+
+export const isWebKit
+  = typeof CSS !== 'undefined' && typeof CSS.supports === 'function'
+    ? CSS.supports('-webkit-backdrop-filter:none') && !/chrome|android/i.test(ua)
+    : /\b(?:iphone|ipad|ipod)\b/i.test(ua)
+
+export const isFirefox = /firefox/i.test(ua)
+
+export const isIOS
+  = /\b(?:iphone|ipad|ipod)\b/i.test(ua)
+    // iPadOS reports as "MacIntel" but exposes touch points.
+    || (platform === 'MacIntel' && maxTouchPoints > 1)

package/src/utils/formatNumber.ts

@@ -1,9 +1,42 @@
+const formatterCache = new Map<string, Intl.NumberFormat>()
+
+/**
+ * Returns a memoized `Intl.NumberFormat` for the given locale/options.
+ */
+export function getFormatter(locale?: Intl.LocalesArgument, options?: Intl.NumberFormatOptions) {
+  const optionsString = JSON.stringify({ locale, options })
+  const cachedFormatter = formatterCache.get(optionsString)
+
+  if (cachedFormatter) {
+    return cachedFormatter
+  }
+
+  const formatter = new Intl.NumberFormat(locale, options)
+  formatterCache.set(optionsString, formatter)
+
+  return formatter
+}
+
 export function formatNumber(
-  value: number,
+  value: number | null,
+  locale?: Intl.LocalesArgument,
+  options?: Intl.NumberFormatOptions,
+) {
+  if (value == null) {
+    return ''
+  }
+  return getFormatter(locale, options).format(value)
+}
+
+export function formatNumberMaxPrecision(
+  value: number | null,
   locale?: Intl.LocalesArgument,
   options?: Intl.NumberFormatOptions,
 ) {
-  return new Intl.NumberFormat(locale, options).format(value)
+  return formatNumber(value, locale, {
+    ...options,
+    maximumFractionDigits: 20,
+  })
 }
 
 /**

package/src/utils/getCssDimensions.ts

@@ -0,0 +1,19 @@
+import type { Dimensions } from '@floating-ui/utils'
+import { round } from '@floating-ui/utils'
+import { getComputedStyle, isHTMLElement } from '@floating-ui/utils/dom'
+
+export function getCssDimensions(element: Element): Dimensions {
+  const css = getComputedStyle(element)
+  let width = Number.parseFloat(css.width) || 0
+  let height = Number.parseFloat(css.height) || 0
+  const hasOffset = isHTMLElement(element)
+  const offsetWidth = hasOffset ? element.offsetWidth : width
+  const offsetHeight = hasOffset ? element.offsetHeight : height
+
+  if (round(width) !== offsetWidth || round(height) !== offsetHeight) {
+    width = offsetWidth
+    height = offsetHeight
+  }
+
+  return { width, height }
+}

package/src/utils/getDisabledMountTransitionStyles.ts

@@ -0,0 +1,9 @@
+import type { StyleValue } from 'vue'
+import type { TransitionStatus } from './useTransitionStatus'
+import { DISABLED_TRANSITIONS_STYLE, EMPTY_OBJECT } from './constants'
+
+export function getDisabledMountTransitionStyles(transitionStatus: TransitionStatus): {
+  style?: StyleValue
+} {
+  return transitionStatus === 'starting' ? DISABLED_TRANSITIONS_STYLE : EMPTY_OBJECT
+}

package/src/utils/hideMiddleware.ts

@@ -0,0 +1,19 @@
+import type { Middleware } from '@floating-ui/vue'
+import { hide as nativeHide } from '@floating-ui/vue'
+
+const nativeHideFn = nativeHide().fn
+
+export const hide: Middleware = {
+  name: 'hide',
+  async fn(state) {
+    const { width, height, x, y } = state.rects.reference
+    const anchorHidden = width === 0 && height === 0 && x === 0 && y === 0
+    const nativeHideResult = await nativeHideFn(state)
+
+    return {
+      data: {
+        referenceHidden: nativeHideResult.data?.referenceHidden || anchorHidden,
+      },
+    }
+  },
+}

package/src/utils/mergeCleanups.ts

@@ -0,0 +1,7 @@
+export function mergeCleanups(...cleanups: Array<(() => void) | undefined>) {
+  return () => {
+    for (const cleanup of cleanups) {
+      cleanup?.()
+    }
+  }
+}

package/src/utils/platform.ts

@@ -0,0 +1,18 @@
+import { isIOS, isWebKit } from './detectBrowser'
+
+const platformName = typeof navigator !== 'undefined' ? navigator.platform : ''
+const userAgent = typeof navigator !== 'undefined' ? navigator.userAgent : ''
+
+const isApplePlatform
+  = isIOS
+    || /mac/i.test(platformName)
+    || /\b(?:macintosh|iphone|ipad|ipod)\b/i.test(userAgent)
+
+export const platform = {
+  engine: {
+    webkit: isWebKit,
+  },
+  screenReader: {
+    voiceOver: isApplePlatform,
+  },
+} as const

package/src/utils/popupStateMapping.ts

@@ -0,0 +1,103 @@
+import type { StateAttributesMapping } from './getStateAttributesProps'
+
+export enum CommonPopupDataAttributes {
+  /**
+   * Present when the popup is open.
+   */
+  open = 'data-open',
+  /**
+   * Present when the popup is closed.
+   */
+  closed = 'data-closed',
+  /**
+   * Present when the popup is animating in.
+   */
+  startingStyle = 'data-starting-style',
+  /**
+   * Present when the popup is animating out.
+   */
+  endingStyle = 'data-ending-style',
+  /**
+   * Present when the anchor is hidden.
+   */
+  anchorHidden = 'data-anchor-hidden',
+  /**
+   * Indicates which side the popup is positioned relative to the trigger.
+   */
+  side = 'data-side',
+  /**
+   * Indicates how the popup is aligned relative to the specified side.
+   */
+  align = 'data-align',
+  /**
+   * Present when animations should be skipped.
+   */
+  instant = 'data-instant',
+}
+
+export enum CommonTriggerDataAttributes {
+  /**
+   * Present when the popup is open.
+   */
+  popupOpen = 'data-popup-open',
+  /**
+   * Present when the trigger is disabled.
+   */
+  triggerDisabled = 'data-trigger-disabled',
+}
+
+const POPUP_OPEN_HOOK = {
+  [CommonPopupDataAttributes.open]: '',
+}
+
+const POPUP_CLOSED_HOOK = {
+  [CommonPopupDataAttributes.closed]: '',
+}
+
+const ANCHOR_HIDDEN_HOOK = {
+  [CommonPopupDataAttributes.anchorHidden]: '',
+}
+
+const TRIGGER_OPEN_HOOK = {
+  [CommonTriggerDataAttributes.popupOpen]: '',
+}
+
+const TRIGGER_DISABLED_HOOK = {
+  [CommonTriggerDataAttributes.triggerDisabled]: '',
+}
+
+export const popupStateMapping = {
+  open(value) {
+    return value ? POPUP_OPEN_HOOK : POPUP_CLOSED_HOOK
+  },
+  anchorHidden(value) {
+    return value ? ANCHOR_HIDDEN_HOOK : null
+  },
+  side(value) {
+    return value ? { [CommonPopupDataAttributes.side]: value } : null
+  },
+  align(value) {
+    return value ? { [CommonPopupDataAttributes.align]: value } : null
+  },
+  instant(value) {
+    return value ? { [CommonPopupDataAttributes.instant]: value } : null
+  },
+} satisfies StateAttributesMapping<{
+  open: boolean
+  anchorHidden?: boolean
+  side?: string
+  align?: string
+  instant?: string
+}>
+
+export const triggerStateMapping = {
+  open(value) {
+    return value ? TRIGGER_OPEN_HOOK : null
+  },
+  disabled(value) {
+    return value ? TRIGGER_DISABLED_HOOK : null
+  },
+} satisfies StateAttributesMapping<{
+  open: boolean
+  disabled: boolean
+}>

package/src/utils/reasons.ts

@@ -1,4 +1,6 @@
 export const none = 'none' as const
+export const initial = 'initial' as const
+export const missing = 'missing' as const
 export const triggerPress = 'trigger-press' as const
 export const triggerHover = 'trigger-hover' as const
 export const triggerFocus = 'trigger-focus' as const
@@ -34,6 +36,8 @@ export const windowResize = 'window-resize' as const
 
 export const REASONS = {
   none,
+  initial,
+  missing,
   triggerPress,
   triggerHover,
   triggerFocus,

package/src/utils/serializeValue.ts

@@ -0,0 +1,17 @@
+export function serializeValue(value: unknown): string {
+  if (value == null) {
+    return ''
+  }
+
+  if (typeof value === 'string') {
+    return value
+  }
+
+  try {
+    const serializedValue = JSON.stringify(value)
+    return serializedValue === undefined ? 'null' : serializedValue
+  }
+  catch {
+    return String(value)
+  }
+}