reka-ui 2.3.2 → 2.4.0

package/src/shared/useBodyScrollLock.ts

@@ -0,0 +1,147 @@
+import type { Fn } from '@vueuse/shared'
+import {
+  createSharedComposable,
+  useEventListener,
+} from '@vueuse/core'
+import { isClient, isIOS, tryOnBeforeUnmount } from '@vueuse/shared'
+import { defu } from 'defu'
+import { computed, nextTick, ref, watch } from 'vue'
+import { injectConfigProviderContext } from '@/ConfigProvider/ConfigProvider.vue'
+
+const useBodyLockStackCount = createSharedComposable(() => {
+  const map = ref<Map<string, boolean>>(new Map())
+  const initialOverflow = ref<string | undefined>()
+
+  const locked = computed(() => {
+    for (const value of map.value.values()) {
+      if (value)
+        return true
+    }
+    return false
+  })
+
+  const context = injectConfigProviderContext({
+    scrollBody: ref(true),
+  })
+
+  let stopTouchMoveListener: Fn | null = null
+
+  const resetBodyStyle = () => {
+    document.body.style.paddingRight = ''
+    document.body.style.marginRight = ''
+    document.body.style.pointerEvents = ''
+    document.documentElement.style.removeProperty('--scrollbar-width')
+    document.body.style.overflow = initialOverflow.value ?? ''
+    isIOS && stopTouchMoveListener?.()
+
+    initialOverflow.value = undefined
+  }
+
+  watch(locked, (val, oldVal) => {
+    if (!isClient)
+      return
+
+    if (!val) {
+      if (oldVal)
+        resetBodyStyle()
+      return
+    }
+
+    if (initialOverflow.value === undefined)
+      initialOverflow.value = document.body.style.overflow
+
+    const verticalScrollbarWidth = window.innerWidth - document.documentElement.clientWidth
+    const defaultConfig = { padding: verticalScrollbarWidth, margin: 0 }
+
+    const config = context.scrollBody?.value
+      ? typeof context.scrollBody.value === 'object'
+        ? defu({
+            padding: context.scrollBody.value.padding === true ? verticalScrollbarWidth : context.scrollBody.value.padding,
+            margin: context.scrollBody.value.margin === true ? verticalScrollbarWidth : context.scrollBody.value.margin,
+          }, defaultConfig)
+        : defaultConfig
+      : ({ padding: 0, margin: 0 })
+
+    if (verticalScrollbarWidth > 0) {
+      document.body.style.paddingRight = typeof config.padding === 'number' ? `${config.padding}px` : String(config.padding)
+      document.body.style.marginRight = typeof config.margin === 'number' ? `${config.margin}px` : String(config.margin)
+      document.documentElement.style.setProperty('--scrollbar-width', `${verticalScrollbarWidth}px`)
+      document.body.style.overflow = 'hidden'
+    }
+
+    if (isIOS) {
+      stopTouchMoveListener = useEventListener(
+        document,
+        'touchmove',
+        (e: TouchEvent) => preventDefault(e),
+        { passive: false },
+      )
+    }
+
+    // let dismissibleLayer set previous pointerEvent first
+    nextTick(() => {
+      document.body.style.pointerEvents = 'none'
+      document.body.style.overflow = 'hidden'
+    })
+  }, { immediate: true, flush: 'sync' })
+
+  return map
+})
+
+export function useBodyScrollLock(initialState?: boolean | undefined) {
+  const id = Math.random().toString(36).substring(2, 7) // just simple random id, need not to be cryptographically secure
+  const map = useBodyLockStackCount()
+
+  map.value.set(id, initialState ?? false)
+
+  const locked = computed({
+    get: () => map.value.get(id) ?? false,
+    set: value => map.value.set(id, value),
+  })
+
+  tryOnBeforeUnmount(() => {
+    map.value.delete(id)
+  })
+
+  return locked
+}
+
+// Adapt from https://github.com/vueuse/vueuse/blob/main/packages/core/useScrollLock/index.ts#L28C10-L28C24
+function checkOverflowScroll(ele: Element): boolean {
+  const style = window.getComputedStyle(ele)
+  if (
+    style.overflowX === 'scroll'
+    || style.overflowY === 'scroll'
+    || (style.overflowX === 'auto' && ele.clientWidth < ele.scrollWidth)
+    || (style.overflowY === 'auto' && ele.clientHeight < ele.scrollHeight)
+  ) {
+    return true
+  }
+  else {
+    const parent = ele.parentNode
+
+    if (!(parent instanceof Element) || parent.tagName === 'BODY')
+      return false
+
+    return checkOverflowScroll(parent)
+  }
+}
+
+function preventDefault(rawEvent: TouchEvent): boolean {
+  const e = rawEvent || window.event
+
+  const _target = e.target
+
+  // Do not prevent if element or parentNodes have overflow: scroll set.
+  if (_target instanceof Element && checkOverflowScroll(_target))
+    return false
+
+  // Do not prevent if the event has more than one touch (usually meaning this is a multi touch gesture like pinch to zoom).
+  if (e.touches.length > 1)
+    return true
+
+  if (e.preventDefault && e.cancelable)
+    e.preventDefault()
+
+  return false
+}

package/src/shared/useDateFormatter.ts

@@ -0,0 +1,148 @@
+/*
+  * Implementation ported from https://github.com/melt-ui/melt-ui/blob/develop/src/lib/internal/helpers/date/formatter.ts
+*/
+
+import type { DateValue, ZonedDateTime } from '@internationalized/date'
+import { DateFormatter, getLocalTimeZone, today } from '@internationalized/date'
+import { ref } from 'vue'
+import { hasTime, isZonedDateTime, toDate } from '@/date'
+
+export interface DateFormatterOptions extends Intl.DateTimeFormatOptions {
+  calendar?: string
+}
+
+export type Formatter = {
+  getLocale: () => string
+  setLocale: (newLocale: string) => void
+  custom: (date: Date, options: DateFormatterOptions) => string
+  selectedDate: (date: DateValue, includeTime?: boolean) => string
+  dayOfWeek: (date: Date, length?: DateFormatterOptions['weekday']) => string
+  fullMonthAndYear: (date: Date, options?: DateFormatterOptions) => string
+  fullMonth: (date: Date, options?: DateFormatterOptions) => string
+  fullYear: (date: Date, options?: DateFormatterOptions) => string
+  dayPeriod: (date: Date) => string
+  part: (dateObj: DateValue, type: Intl.DateTimeFormatPartTypes, options?: DateFormatterOptions) => string
+  toParts: (date: DateValue, options?: DateFormatterOptions) => Intl.DateTimeFormatPart[]
+  getMonths: () => { label: string, value: number }[]
+}
+
+/**
+ * Creates a wrapper around the `DateFormatter`, which is
+ * an improved version of the {@link Intl.DateTimeFormat} API,
+ * that is used internally by the various date builders to
+ * easily format dates in a consistent way.
+ *
+ * @see [DateFormatter](https://react-spectrum.adobe.com/internationalized/date/DateFormatter.html)
+ */
+export function useDateFormatter(initialLocale: string, opts: DateFormatterOptions = {}): Formatter {
+  const locale = ref(initialLocale)
+
+  function getLocale() {
+    return locale.value
+  }
+
+  function setLocale(newLocale: string) {
+    locale.value = newLocale
+  }
+
+  function custom(date: Date, options: DateFormatterOptions) {
+    return new DateFormatter(locale.value, { ...opts, ...options }).format(date)
+  }
+
+  function selectedDate(date: DateValue, includeTime = true) {
+    if (hasTime(date) && includeTime) {
+      return custom(toDate(date), {
+        dateStyle: 'long',
+        timeStyle: 'long',
+      })
+    }
+    else {
+      return custom(toDate(date), {
+        dateStyle: 'long',
+      })
+    }
+  }
+
+  function fullMonthAndYear(date: Date, options: DateFormatterOptions = {}) {
+    return new DateFormatter(locale.value, { ...opts, month: 'long', year: 'numeric', ...options }).format(date)
+  }
+
+  function fullMonth(date: Date, options: DateFormatterOptions = {}) {
+    return new DateFormatter(locale.value, { ...opts, month: 'long', ...options }).format(date)
+  }
+
+  function getMonths() {
+    const defaultDate = today(getLocalTimeZone())
+    const months = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
+    return months.map(item => ({ label: fullMonth(toDate(defaultDate.set({ month: item }))), value: item }))
+  }
+
+  function fullYear(date: Date, options: DateFormatterOptions = {}) {
+    return new DateFormatter(locale.value, { ...opts, year: 'numeric', ...options }).format(date)
+  }
+
+  function toParts(date: DateValue, options?: DateFormatterOptions) {
+    if (isZonedDateTime(date)) {
+      return new DateFormatter(locale.value, {
+        ...opts,
+        ...options,
+        timeZone: (date as ZonedDateTime).timeZone,
+      }).formatToParts(toDate(date))
+    }
+    else {
+      return new DateFormatter(locale.value, { ...opts, ...options }).formatToParts(toDate(date))
+    }
+  }
+
+  function dayOfWeek(date: Date, length: DateFormatterOptions['weekday'] = 'narrow') {
+    return new DateFormatter(locale.value, { ...opts, weekday: length }).format(date)
+  }
+
+  function dayPeriod(date: Date) {
+    const parts = new DateFormatter(locale.value, {
+      ...opts,
+      hour: 'numeric',
+      minute: 'numeric',
+    }).formatToParts(date)
+    const value = parts.find(p => p.type === 'dayPeriod')?.value
+    if (value === 'PM')
+      return 'PM'
+
+    return 'AM'
+  }
+
+  const defaultPartOptions: DateFormatterOptions = {
+    year: 'numeric',
+    month: 'numeric',
+    day: 'numeric',
+    hour: 'numeric',
+    minute: 'numeric',
+    second: 'numeric',
+  }
+
+  function part(
+    dateObj: DateValue,
+    type: Intl.DateTimeFormatPartTypes,
+    options: DateFormatterOptions = {},
+  ) {
+    const opts = { ...defaultPartOptions, ...options }
+    const parts = toParts(dateObj, opts)
+    const part = parts.find(p => p.type === type)
+    return part ? part.value : ''
+  }
+
+  return {
+    setLocale,
+    getLocale,
+    fullMonth,
+    fullYear,
+    fullMonthAndYear,
+    toParts,
+    custom,
+    part,
+    dayPeriod,
+    selectedDate,
+    dayOfWeek,
+    getMonths,
+  }
+}

package/src/shared/useDirection.ts

@@ -0,0 +1,11 @@
+import type { Ref } from 'vue'
+import type { Direction } from './types'
+import { computed, ref } from 'vue'
+import { injectConfigProviderContext } from '@/ConfigProvider/ConfigProvider.vue'
+
+export function useDirection(dir?: Ref<Direction | undefined>) {
+  const context = injectConfigProviderContext({
+    dir: ref('ltr'),
+  })
+  return computed(() => dir?.value || context.dir?.value || 'ltr')
+}

package/src/shared/useEmitAsProps.ts

@@ -0,0 +1,32 @@
+import { camelize, getCurrentInstance, toHandlerKey } from 'vue'
+
+// Vue doesn't have emits forwarding, in order to bind the emits we have to convert events into `onXXX` handlers
+// issue: https://github.com/vuejs/core/issues/5917
+/**
+ * The `useEmitAsProps` function is a TypeScript utility that converts emitted events into props for a
+ * Vue component.
+ * @param emit - The `emit` parameter is a function that is used to emit events from a component. It
+ * takes two parameters: `name` which is the name of the event to be emitted, and `...args` which are
+ * the arguments to be passed along with the event.
+ * @returns The function `useEmitAsProps` returns an object that maps event names to functions that
+ * call the `emit` function with the corresponding event name and arguments.
+ */
+export function useEmitAsProps<Name extends string>(
+  emit: (name: Name, ...args: any[]) => void,
+) {
+  const vm = getCurrentInstance()
+
+  const events = vm?.type.emits as Name[]
+  const result: Record<string, any> = {}
+
+  if (!events?.length) {
+    console.warn(
+      `No emitted event found. Please check component: ${vm?.type.__name}`,
+    )
+  }
+
+  events?.forEach((ev) => {
+    result[toHandlerKey(camelize(ev))] = (...arg: any) => emit(ev, ...arg)
+  })
+  return result
+}

package/src/shared/useFilter.ts

@@ -0,0 +1,64 @@
+import type { MaybeRef } from 'vue'
+import { computed, unref } from 'vue'
+
+/**
+ * Provides locale-aware string filtering functions.
+ * Uses `Intl.Collator` for comparison to ensure proper Unicode handling.
+ *
+ * @param options - Optional collator options to customize comparison behavior.
+ *   See [Intl.CollatorOptions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/Collator/Collator#options) for details.
+ * @returns An object with methods to check if a string starts with, ends with, or contains a substring.
+ *
+ * @example
+ * const { startsWith, endsWith, contains } = useFilter();
+ *
+ * startsWith('hello', 'he'); // true
+ * endsWith('hello', 'lo'); // true
+ * contains('hello', 'ell'); // true
+ */
+export function useFilter(options?: MaybeRef<Intl.CollatorOptions>) {
+  const computedOptions = computed(() => unref(options))
+  const collator = computed(() => new Intl.Collator('en', { usage: 'search', ...computedOptions.value }))
+
+  const startsWith = (string: string, substring: string) => {
+    if (substring.length === 0)
+      return true
+
+    string = string.normalize('NFC')
+    substring = substring.normalize('NFC')
+    return collator.value.compare(string.slice(0, substring.length), substring) === 0
+  }
+
+  const endsWith = (string: string, substring: string) => {
+    if (substring.length === 0)
+      return true
+
+    string = string.normalize('NFC')
+    substring = substring.normalize('NFC')
+    return collator.value.compare(string.slice(-substring.length), substring) === 0
+  }
+
+  const contains = (string: string, substring: string) => {
+    if (substring.length === 0)
+      return true
+
+    string = string.normalize('NFC')
+    substring = substring.normalize('NFC')
+
+    let scan = 0
+    const sliceLen = substring.length
+    for (; scan + sliceLen <= string.length; scan++) {
+      const slice = string.slice(scan, scan + sliceLen)
+      if (collator.value.compare(substring, slice) === 0)
+        return true
+    }
+
+    return false
+  }
+
+  return {
+    startsWith,
+    endsWith,
+    contains,
+  }
+}

package/src/shared/useFocusGuards.ts

@@ -0,0 +1,46 @@
+import { isClient } from '@vueuse/shared'
+import { watchEffect } from 'vue'
+
+/** Number of components which have requested interest to have focus guards */
+let count = 0
+
+/**
+ * Injects a pair of focus guards at the edges of the whole DOM tree
+ * to ensure `focusin` & `focusout` events can be caught consistently.
+ */
+export function useFocusGuards() {
+  watchEffect((cleanupFn) => {
+    if (!isClient)
+      return
+    const edgeGuards = document.querySelectorAll('[data-reka-focus-guard]')
+    document.body.insertAdjacentElement(
+      'afterbegin',
+      edgeGuards[0] ?? createFocusGuard(),
+    )
+    document.body.insertAdjacentElement(
+      'beforeend',
+      edgeGuards[1] ?? createFocusGuard(),
+    )
+    count++
+
+    cleanupFn(() => {
+      if (count === 1) {
+        document
+          .querySelectorAll('[data-reka-focus-guard]')
+          .forEach(node => node.remove())
+      }
+      count--
+    })
+  })
+}
+
+function createFocusGuard() {
+  const element = document.createElement('span')
+  element.setAttribute('data-reka-focus-guard', '')
+  element.tabIndex = 0
+  element.style.outline = 'none'
+  element.style.opacity = '0'
+  element.style.position = 'fixed'
+  element.style.pointerEvents = 'none'
+  return element
+}

package/src/shared/useFormControl.ts

@@ -0,0 +1,8 @@
+import type { MaybeElementRef } from '@vueuse/core'
+import { toValue, unrefElement } from '@vueuse/core'
+import { computed } from 'vue'
+
+export function useFormControl(el: MaybeElementRef) {
+  // We set this to true by default so that events bubble to forms without JS (SSR)
+  return computed(() => toValue(el) ? Boolean(unrefElement(el)?.closest('form')) : true)
+}

package/src/shared/useForwardExpose.ts

@@ -0,0 +1,66 @@
+import type { ComponentPublicInstance } from 'vue'
+// reference: https://github.com/vuejs/rfcs/issues/258#issuecomment-1068697672
+import { unrefElement } from '@vueuse/core'
+import { computed, getCurrentInstance, ref } from 'vue'
+
+export function useForwardExpose<T extends ComponentPublicInstance>() {
+  const instance = getCurrentInstance()!
+
+  const currentRef = ref<Element | T | null>()
+  const currentElement = computed<HTMLElement>(() => {
+    // $el could be text/comment for non-single root normal or text root, thus we retrieve the nextElementSibling
+    // @ts-expect-error ignore ts error
+    return ['#text', '#comment'].includes(currentRef.value?.$el.nodeName) ? currentRef.value?.$el.nextElementSibling : unrefElement(currentRef)
+  })
+
+  // Do give us credit if you reference our code :D
+  // localExpose should only be assigned once else will create infinite loop
+  const localExpose: Record<string, any> | null = Object.assign({}, instance.exposed)
+  const ret: Record<string, any> = {}
+
+  // retrieve props for current instance
+  for (const key in instance.props) {
+    Object.defineProperty(ret, key, {
+      enumerable: true,
+      configurable: true,
+      get: () => instance.props[key],
+    })
+  }
+
+  // retrieve default exposed value
+  if (Object.keys(localExpose).length > 0) {
+    for (const key in localExpose) {
+      Object.defineProperty(ret, key, {
+        enumerable: true,
+        configurable: true,
+        get: () => localExpose![key],
+      })
+    }
+  }
+
+  // retrieve original first root element
+  Object.defineProperty(ret, '$el', {
+    enumerable: true,
+    configurable: true,
+    get: () => instance.vnode.el,
+  })
+  instance.exposed = ret
+
+  function forwardRef(ref: Element | T | null) {
+    currentRef.value = ref
+
+    if (!ref)
+      return
+
+    // retrieve the forwarded element
+    Object.defineProperty(ret, '$el', {
+      enumerable: true,
+      configurable: true,
+      get: () => (ref instanceof Element ? ref : ref.$el),
+    })
+
+    instance.exposed = ret
+  }
+
+  return { forwardRef, currentRef, currentElement }
+}

package/src/shared/useForwardProps.ts

@@ -0,0 +1,43 @@
+import type { MaybeRefOrGetter } from 'vue'
+import { camelize, computed, getCurrentInstance, toRef } from 'vue'
+
+interface PropOptions {
+  type?: any
+  required?: boolean
+  default?: any
+}
+
+/**
+ * The `useForwardProps` function in TypeScript takes in a set of props and returns a computed value
+ * that combines default props with assigned props from the current instance.
+ * @param {T} props - The `props` parameter is an object that represents the props passed to a
+ * component.
+ * @returns computed value that combines the default props, preserved props, and assigned props.
+ */
+export function useForwardProps<T extends Record<string, any>>(props: MaybeRefOrGetter<T>) {
+  const vm = getCurrentInstance()
+  // Default value for declared props
+  const defaultProps = Object.keys(vm?.type.props ?? {}).reduce((prev, curr) => {
+    const defaultValue = (vm?.type.props[curr] as PropOptions).default
+    if (defaultValue !== undefined)
+      prev[curr as keyof T] = defaultValue
+    return prev
+  }, {} as T)
+
+  const refProps = toRef(props)
+  return computed(() => {
+    const preservedProps = {} as T
+    const assignedProps = vm?.vnode.props ?? {}
+
+    Object.keys(assignedProps).forEach((key) => {
+      preservedProps[camelize(key) as keyof T] = assignedProps[key]
+    })
+
+    // Only return value from the props parameter
+    return Object.keys({ ...defaultProps, ...preservedProps }).reduce((prev, curr) => {
+      if (refProps.value[curr] !== undefined)
+        prev[curr as keyof T] = refProps.value[curr]
+      return prev
+    }, {} as T)
+  })
+}

package/src/shared/useForwardPropsEmits.ts

@@ -0,0 +1,26 @@
+import type { MaybeRefOrGetter } from 'vue'
+import { computed } from 'vue'
+import { useEmitAsProps } from './useEmitAsProps'
+import { useForwardProps } from './useForwardProps'
+
+/**
+ * The function `useForwardPropsEmits` takes in props and an optional emit function, and returns a
+ * computed object that combines the parsed props and emits as props.
+ * @param {T} props - The `props` parameter is of type `T`, which is a generic type that extends the
+ * parameters of the `useForwardProps` function. It represents the props object that is passed to the
+ * `useForwardProps` function.
+ * @param [emit] - The `emit` parameter is a function that can be used to emit events. It takes two
+ * arguments: `name`, which is the name of the event to be emitted, and `args`, which are the arguments
+ * to be passed along with the event.
+ * @returns a computed property that combines the parsed
+ * props and emits as props.
+ */
+export function useForwardPropsEmits<T extends Record<string, any>, Name extends string>(props: MaybeRefOrGetter<T>, emit?: (name: Name, ...args: any[]) => void) {
+  const parsedProps = useForwardProps(props)
+  const emitsAsProps = emit ? useEmitAsProps(emit) : {}
+
+  return computed(() => ({
+    ...parsedProps.value,
+    ...emitsAsProps,
+  }))
+}

package/src/shared/useForwardRef.ts

@@ -0,0 +1,14 @@
+import type { ComponentPublicInstance } from 'vue'
+// reference: https://github.com/vuejs/rfcs/issues/258#issuecomment-1068697672
+import { getCurrentInstance } from 'vue'
+
+export function useForwardRef() {
+  const instance = getCurrentInstance()!
+  function handleRefChange(ref: Element | ComponentPublicInstance | null) {
+    if (typeof ref === 'object') {
+      instance.exposed = ref
+      instance.exposeProxy = ref
+    }
+  }
+  return handleRefChange
+}