reka-ui 2.3.2 → 2.4.0

package/src/Popper/PopperContent.vue

@@ -0,0 +1,410 @@
+<script lang="ts">
+import type {
+  Middleware,
+  Placement,
+  ReferenceElement,
+} from '@floating-ui/vue'
+import type { Ref } from 'vue'
+import type {
+  Align,
+  Side,
+} from './utils'
+import type { PrimitiveProps } from '@/Primitive'
+import { createContext, useForwardExpose, useSize } from '@/shared'
+
+export const PopperContentPropsDefaultValue = {
+  side: 'bottom' as Side,
+  sideOffset: 0,
+  sideFlip: true,
+  align: 'center' as Align,
+  alignOffset: 0,
+  alignFlip: true,
+  arrowPadding: 0,
+  avoidCollisions: true,
+  collisionBoundary: () => [],
+  collisionPadding: 0,
+  sticky: 'partial' as 'partial' | 'always',
+  hideWhenDetached: false,
+  positionStrategy: 'fixed' as 'absolute' | 'fixed',
+  updatePositionStrategy: 'optimized' as 'optimized' | 'always',
+  prioritizePosition: false,
+}
+
+export interface PopperContentProps extends PrimitiveProps {
+  /**
+   * The preferred side of the trigger to render against when open.
+   * Will be reversed when collisions occur and avoidCollisions
+   * is enabled.
+   *
+   * @defaultValue "top"
+   */
+  side?: Side
+
+  /**
+   * The distance in pixels from the trigger.
+   *
+   * @defaultValue 0
+   */
+  sideOffset?: number
+
+  /**
+   * Flip to the opposite side when colliding with boundary.
+   *
+   * @defaultValue true
+   */
+  sideFlip?: boolean
+
+  /**
+   * The preferred alignment against the trigger.
+   * May change when collisions occur.
+   *
+   * @defaultValue "center"
+   */
+  align?: Align
+
+  /**
+   * An offset in pixels from the `start` or `end` alignment options.
+   *
+   * @defaultValue 0
+   */
+  alignOffset?: number
+
+  /**
+   * Flip alignment when colliding with boundary.
+   * May only occur when `prioritizePosition` is true.
+   *
+   * @defaultValue true
+   */
+  alignFlip?: boolean
+
+  /**
+   * When `true`, overrides the side and align preferences
+   * to prevent collisions with boundary edges.
+   *
+   * @defaultValue true
+   */
+  avoidCollisions?: boolean
+
+  /**
+   * The element used as the collision boundary. By default
+   * this is the viewport, though you can provide additional
+   * element(s) to be included in this check.
+   *
+   * @defaultValue []
+   */
+  collisionBoundary?: Element | null | Array<Element | null>
+
+  /**
+   * The distance in pixels from the boundary edges where collision
+   * detection should occur. Accepts a number (same for all sides),
+   * or a partial padding object, for example: { top: 20, left: 20 }.
+   *
+   * @defaultValue 0
+   */
+  collisionPadding?: number | Partial<Record<Side, number>>
+
+  /**
+   * The padding between the arrow and the edges of the content.
+   * If your content has border-radius, this will prevent it from
+   * overflowing the corners.
+   *
+   * @defaultValue 0
+   */
+  arrowPadding?: number
+
+  /**
+   * The sticky behavior on the align axis. `partial` will keep the
+   * content in the boundary as long as the trigger is at least partially
+   * in the boundary whilst "always" will keep the content in the boundary
+   * regardless.
+   *
+   * @defaultValue "partial"
+   */
+  sticky?: 'partial' | 'always'
+
+  /**
+   * Whether to hide the content when the trigger becomes fully occluded.
+   *
+   * @defaultValue false
+   */
+  hideWhenDetached?: boolean
+
+  /**
+   *  The type of CSS position property to use.
+   */
+  positionStrategy?: 'absolute' | 'fixed'
+
+  /**
+   * Strategy to update the position of the floating element on every animation frame.
+   *
+   * @defaultValue 'optimized'
+   */
+  updatePositionStrategy?: 'optimized' | 'always'
+
+  /**
+   * Whether to disable the update position for the content when the layout shifted.
+   *
+   * @defaultValue false
+   */
+  disableUpdateOnLayoutShift?: boolean
+
+  /**
+   * Force content to be position within the viewport.
+   *
+   * Might overlap the reference element, which may not be desired.
+   *
+   * @defaultValue false
+   */
+  prioritizePosition?: boolean
+
+  /**
+   *  The custom element or virtual element that will be set as the reference
+   *  to position the floating element.
+   *
+   *  If provided, it will replace the default anchor element.
+   */
+  reference?: ReferenceElement
+}
+
+export interface PopperContentContext {
+  placedSide: Ref<Side>
+  onArrowChange: (arrow: HTMLElement | undefined) => void
+  arrowX?: Ref<number>
+  arrowY?: Ref<number>
+  shouldHideArrow: Ref<boolean>
+}
+
+export const [injectPopperContentContext, providePopperContentContext]
+  = createContext<PopperContentContext>('PopperContent')
+</script>
+
+<script setup lang="ts">
+import {
+  autoUpdate,
+  flip,
+  arrow as floatingUIarrow,
+  hide,
+  limitShift,
+  offset,
+  shift,
+  size,
+  useFloating,
+} from '@floating-ui/vue'
+import { computedEager } from '@vueuse/core'
+import { computed, ref, watchEffect, watchPostEffect } from 'vue'
+import {
+  Primitive,
+} from '@/Primitive'
+import { injectPopperRootContext } from './PopperRoot.vue'
+import {
+  getSideAndAlignFromPlacement,
+  isNotNull,
+  transformOrigin,
+} from './utils'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<PopperContentProps>(), {
+  ...PopperContentPropsDefaultValue,
+})
+const emits = defineEmits<{
+  placed: [void]
+}>()
+
+const rootContext = injectPopperRootContext()
+const { forwardRef, currentElement: contentElement } = useForwardExpose()
+
+const floatingRef = ref<HTMLElement>()
+
+const arrow = ref<HTMLElement>()
+const { width: arrowWidth, height: arrowHeight } = useSize(arrow)
+
+const desiredPlacement = computed(
+  () =>
+    (props.side
+      + (props.align !== 'center' ? `-${props.align}` : '')) as Placement,
+)
+
+const collisionPadding = computed(() => {
+  return typeof props.collisionPadding === 'number'
+    ? props.collisionPadding
+    : { top: 0, right: 0, bottom: 0, left: 0, ...props.collisionPadding }
+})
+
+const boundary = computed(() => {
+  return Array.isArray(props.collisionBoundary)
+    ? props.collisionBoundary
+    : [props.collisionBoundary]
+})
+
+const detectOverflowOptions = computed(() => {
+  return {
+    padding: collisionPadding.value,
+    boundary: boundary.value.filter(isNotNull),
+    // with `strategy: 'fixed'`, this is the only way to get it to respect boundaries
+    altBoundary: boundary.value.length > 0,
+  }
+})
+
+const flipOptions = computed(() => {
+  return {
+    mainAxis: props.sideFlip,
+    crossAxis: props.alignFlip,
+  }
+})
+
+const computedMiddleware = computedEager(() => {
+  return [
+    offset({
+      mainAxis: props.sideOffset + arrowHeight.value,
+      alignmentAxis: props.alignOffset,
+    }),
+    props.prioritizePosition
+    && props.avoidCollisions
+    && flip({
+      ...detectOverflowOptions.value,
+      ...flipOptions.value,
+    }),
+    props.avoidCollisions
+    && shift({
+      mainAxis: true,
+      crossAxis: !!props.prioritizePosition,
+      limiter: props.sticky === 'partial' ? limitShift() : undefined,
+      ...detectOverflowOptions.value,
+    }),
+    !props.prioritizePosition
+    && props.avoidCollisions
+    && flip({
+      ...detectOverflowOptions.value,
+      ...flipOptions.value,
+    }),
+    size({
+      ...detectOverflowOptions.value,
+      apply: ({ elements, rects, availableWidth, availableHeight }) => {
+        const { width: anchorWidth, height: anchorHeight } = rects.reference
+        const contentStyle = elements.floating.style
+        contentStyle.setProperty(
+          '--reka-popper-available-width',
+          `${availableWidth}px`,
+        )
+        contentStyle.setProperty(
+          '--reka-popper-available-height',
+          `${availableHeight}px`,
+        )
+        contentStyle.setProperty(
+          '--reka-popper-anchor-width',
+          `${anchorWidth}px`,
+        )
+        contentStyle.setProperty(
+          '--reka-popper-anchor-height',
+          `${anchorHeight}px`,
+        )
+      },
+    }),
+    arrow.value
+    && floatingUIarrow({ element: arrow.value, padding: props.arrowPadding }),
+    transformOrigin({
+      arrowWidth: arrowWidth.value,
+      arrowHeight: arrowHeight.value,
+    }),
+    props.hideWhenDetached
+    && hide({ strategy: 'referenceHidden', ...detectOverflowOptions.value }),
+  ] as Middleware[]
+})
+
+// If provided custom reference, it will overwrite the default anchor element
+const reference = computed(() => props.reference ?? rootContext.anchor.value)
+
+const { floatingStyles, placement, isPositioned, middlewareData, update } = useFloating(
+  reference,
+  floatingRef,
+  {
+    strategy: props.positionStrategy,
+    placement: desiredPlacement,
+    whileElementsMounted: (...args) => {
+      const cleanup = autoUpdate(...args, {
+        layoutShift: !props.disableUpdateOnLayoutShift,
+        animationFrame: props.updatePositionStrategy === 'always',
+      })
+      return cleanup
+    },
+    middleware: computedMiddleware,
+  },
+)
+
+const placedSide = computed(
+  () => getSideAndAlignFromPlacement(placement.value)[0],
+)
+const placedAlign = computed(
+  () => getSideAndAlignFromPlacement(placement.value)[1],
+)
+
+watchPostEffect(() => {
+  if (isPositioned.value)
+    emits('placed')
+})
+
+const cannotCenterArrow = computed(
+  () => middlewareData.value.arrow?.centerOffset !== 0,
+)
+
+const contentZIndex = ref('')
+watchEffect(() => {
+  if (contentElement.value)
+    contentZIndex.value = window.getComputedStyle(contentElement.value).zIndex
+})
+
+const arrowX = computed(() => middlewareData.value.arrow?.x ?? 0)
+const arrowY = computed(() => middlewareData.value.arrow?.y ?? 0)
+
+providePopperContentContext({
+  placedSide,
+  onArrowChange: element => arrow.value = element,
+  arrowX,
+  arrowY,
+  shouldHideArrow: cannotCenterArrow,
+})
+</script>
+
+<template>
+  <div
+    ref="floatingRef"
+    data-reka-popper-content-wrapper=""
+    :style="{
+      ...floatingStyles,
+      transform: isPositioned ? floatingStyles.transform : 'translate(0, -200%)', // keep off the page when measuring
+      minWidth: 'max-content',
+      zIndex: contentZIndex,
+      ['--reka-popper-transform-origin' as any]: [
+        middlewareData.transformOrigin?.x,
+        middlewareData.transformOrigin?.y,
+      ].join(' '),
+
+      // hide the content if using the hide middleware and should be hidden
+      // set visibility to hidden and disable pointer events so the UI behaves
+      // as if the PopperContent isn't there at all
+      ...(middlewareData.hide?.referenceHidden && {
+        visibility: 'hidden',
+        pointerEvents: 'none',
+      }),
+    }"
+  >
+    <Primitive
+      :ref="forwardRef"
+      v-bind="$attrs"
+      :as-child="props.asChild"
+      :as="as"
+      :data-side="placedSide"
+      :data-align="placedAlign"
+      :style="{
+        // if the PopperContent hasn't been placed yet (not all measurements done)
+        // we prevent animations so that users's animation don't kick in too early referring wrong sides
+        animation: !isPositioned ? 'none' : undefined,
+      }"
+    >
+      <slot />
+    </Primitive>
+  </div>
+</template>

package/src/Popper/PopperRoot.vue

@@ -0,0 +1,36 @@
+<script lang="ts">
+import type { ReferenceElement } from '@floating-ui/vue'
+import type { Ref } from 'vue'
+import { createContext } from '@/shared'
+
+export interface Measurable {
+  getBoundingClientRect: () => DOMRect
+}
+
+interface PopperRootContext {
+  anchor: Ref<ReferenceElement | undefined>
+  onAnchorChange: (element: ReferenceElement | undefined) => void
+}
+
+export const [injectPopperRootContext, providePopperRootContext]
+  = createContext<PopperRootContext>('PopperRoot')
+</script>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const anchor = ref<ReferenceElement>()
+
+providePopperRootContext({
+  anchor,
+  onAnchorChange: element => anchor.value = element,
+})
+</script>
+
+<template>
+  <slot />
+</template>

package/src/Popper/index.ts

@@ -0,0 +1,15 @@
+export {
+  default as PopperAnchor,
+  type PopperAnchorProps,
+} from './PopperAnchor.vue'
+export {
+  default as PopperArrow,
+  type PopperArrowProps,
+} from './PopperArrow.vue'
+export {
+  default as PopperContent,
+  type PopperContentProps,
+  PopperContentPropsDefaultValue,
+} from './PopperContent.vue'
+export { injectPopperRootContext, default as PopperRoot } from './PopperRoot.vue'
+export * from './utils'

package/src/Popper/utils.ts

@@ -0,0 +1,63 @@
+import type { Middleware, Placement } from '@floating-ui/vue'
+
+const SIDE_OPTIONS = ['top', 'right', 'bottom', 'left'] as const
+const ALIGN_OPTIONS = ['start', 'center', 'end'] as const
+
+export type Side = (typeof SIDE_OPTIONS)[number]
+export type Align = (typeof ALIGN_OPTIONS)[number]
+
+export function isNotNull<T>(value: T | null): value is T {
+  return value !== null
+}
+
+export function transformOrigin(options: {
+  arrowWidth: number
+  arrowHeight: number
+}): Middleware {
+  return {
+    name: 'transformOrigin',
+    options,
+    fn(data) {
+      const { placement, rects, middlewareData } = data
+
+      const cannotCenterArrow = middlewareData.arrow?.centerOffset !== 0
+      const isArrowHidden = cannotCenterArrow
+      const arrowWidth = isArrowHidden ? 0 : options.arrowWidth
+      const arrowHeight = isArrowHidden ? 0 : options.arrowHeight
+
+      const [placedSide, placedAlign] = getSideAndAlignFromPlacement(placement)
+      const noArrowAlign = { start: '0%', center: '50%', end: '100%' }[
+        placedAlign
+      ]
+
+      const arrowXCenter = (middlewareData.arrow?.x ?? 0) + arrowWidth / 2
+      const arrowYCenter = (middlewareData.arrow?.y ?? 0) + arrowHeight / 2
+
+      let x = ''
+      let y = ''
+
+      if (placedSide === 'bottom') {
+        x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`
+        y = `${-arrowHeight}px`
+      }
+      else if (placedSide === 'top') {
+        x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`
+        y = `${rects.floating.height + arrowHeight}px`
+      }
+      else if (placedSide === 'right') {
+        x = `${-arrowHeight}px`
+        y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`
+      }
+      else if (placedSide === 'left') {
+        x = `${rects.floating.width + arrowHeight}px`
+        y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`
+      }
+      return { data: { x, y } }
+    },
+  }
+}
+
+export function getSideAndAlignFromPlacement(placement: Placement) {
+  const [side, align = 'center'] = placement.split('-')
+  return [side as Side, align as Align] as const
+}

package/src/Presence/Presence.ts

@@ -0,0 +1,101 @@
+import type {
+  SlotsType,
+  VNode,
+} from 'vue'
+import { unrefElement } from '@vueuse/core'
+import {
+  defineComponent,
+  getCurrentInstance,
+  h,
+  ref,
+  toRefs,
+} from 'vue'
+import { renderSlotFragments } from '@/shared'
+import { usePresence } from './usePresence'
+
+export interface PresenceProps {
+  /**
+   * Conditional to mount or unmount the child element. Similar to `v-if`
+   *
+   * @required true
+   */
+  present: boolean
+  /**
+   * Force the element to render all the time.
+   *
+   * Useful for programmatically render grandchild component with the exposed `present`
+   *
+   * @defaultValue false
+   */
+  forceMount?: boolean
+}
+
+export default defineComponent({
+  name: 'Presence',
+  props: {
+    present: {
+      type: Boolean,
+      required: true,
+    },
+    forceMount: {
+      type: Boolean,
+    },
+  },
+  slots: {} as SlotsType<{
+    default: (opts: { present: boolean }) => any
+  }>,
+  setup(props, { slots, expose }) {
+    const { present, forceMount } = toRefs(props)
+
+    const node = ref<HTMLElement>()
+    // Mount composables once to prevent duplicated eventListener
+    const { isPresent } = usePresence(present, node)
+    expose({ present: isPresent })
+
+    let children = slots.default({ present: isPresent.value })
+    children = renderSlotFragments(children || [])
+    const instance = getCurrentInstance()
+
+    if (children && children?.length > 1) {
+      const componentName = instance?.parent?.type.name
+        ? `<${instance.parent.type.name} />`
+        : 'component'
+
+      throw new Error(
+        [
+          `Detected an invalid children for \`${componentName}\` for  \`Presence\` component.`,
+          '',
+          'Note: Presence works similarly to `v-if` directly, but it waits for animation/transition to finished before unmounting. So it expect only one direct child of valid VNode type.',
+          'You can apply a few solutions:',
+          [
+            'Provide a single child element so that `presence` directive attach correctly.',
+            'Ensure the first child is an actual element instead of a raw text node or comment node.',
+          ]
+            .map(line => `  - ${line}`)
+            .join('\n'),
+        ].join('\n'),
+      )
+    }
+
+    return () => {
+      if (forceMount.value || present.value || isPresent.value) {
+        return h(slots.default({ present: isPresent.value })[0] as VNode, {
+          ref: (v) => {
+            const el = unrefElement(v as HTMLElement)
+            if (typeof el?.hasAttribute === 'undefined')
+              return el
+
+            // special case to handle animation for PopperContent
+            if (el?.hasAttribute('data-reka-popper-content-wrapper'))
+              node.value = el.firstElementChild as HTMLElement
+            else
+              node.value = el
+
+            return el
+          },
+        })
+      }
+      else { return null }
+    }
+  },
+})

package/src/Presence/index.ts

@@ -0,0 +1 @@
+export { default as Presence, type PresenceProps } from './Presence'