@rupe/v-datepicker 1.0.0-alpha.0

package/src/shared/date/utils.ts

@@ -0,0 +1,84 @@
+import type { Granularity } from './comparators'
+import type { DateStep, HourCycle } from './types'
+import { defu } from 'defu'
+
+export function getOptsByGranularity(granularity: Granularity, hourCycle: HourCycle, isTimeValue: boolean = false) {
+  const opts: Intl.DateTimeFormatOptions = {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    timeZoneName: 'short',
+    hourCycle: normalizeHourCycle(hourCycle),
+    hour12: normalizeHour12(hourCycle),
+  }
+  if (isTimeValue) {
+    delete opts.year
+    delete opts.month
+    delete opts.day
+  }
+
+  if (granularity === 'day') {
+    delete opts.second
+    delete opts.hour
+    delete opts.minute
+    delete opts.timeZoneName
+  }
+  if (granularity === 'hour') {
+    delete opts.minute
+    delete opts.second
+  }
+
+  if (granularity === 'minute')
+    delete opts.second
+
+  return opts
+}
+
+type GetDefaultDateStepProps = {
+  step?: DateStep
+}
+
+export function normalizeDateStep(props?: GetDefaultDateStepProps): DateStep {
+  return defu(props?.step, {
+    year: 1,
+    month: 1,
+    day: 1,
+    hour: 1,
+    minute: 1,
+    second: 1,
+    millisecond: 1,
+  } satisfies DateStep)
+}
+
+export function handleCalendarInitialFocus(calendar: HTMLElement) {
+  const selectedDay = calendar.querySelector<HTMLElement>('[data-selected]')
+  if (selectedDay)
+    return selectedDay.focus()
+
+  const today = calendar.querySelector<HTMLElement>('[data-today]')
+  if (today)
+    return today.focus()
+
+  const firstDay = calendar.querySelector<HTMLElement>('[data-reka-calendar-day]')
+  if (firstDay)
+    return firstDay.focus()
+}
+
+export function normalizeHourCycle(hourCycle: HourCycle) {
+  if (hourCycle === 24)
+    return 'h23'
+  if (hourCycle === 12)
+    return 'h11'
+  return undefined
+}
+
+export function normalizeHour12(hourCycle: HourCycle) {
+  if (hourCycle === 24)
+    return false
+  if (hourCycle === 12)
+    return true
+  return undefined
+}

package/src/shared/getActiveElement.ts

@@ -0,0 +1,12 @@
+export function getActiveElement(): Element | null {
+  let activeElement = document.activeElement
+  if (activeElement == null) {
+    return null
+  }
+
+  while (activeElement != null && activeElement.shadowRoot != null && activeElement.shadowRoot.activeElement != null) {
+    activeElement = activeElement.shadowRoot.activeElement
+  }
+
+  return activeElement
+}

package/src/shared/handleAndDispatchCustomEvent.ts

@@ -0,0 +1,21 @@
+export function handleAndDispatchCustomEvent<
+  E extends CustomEvent,
+  OriginalEvent extends Event,
+>(
+  name: string,
+  handler: ((event: E) => void) | undefined,
+  detail: { originalEvent: OriginalEvent } & (E extends CustomEvent<infer D>
+    ? D
+    : never),
+) {
+  const target = detail.originalEvent.target
+  const event = new CustomEvent(name, {
+    bubbles: false,
+    cancelable: true,
+    detail,
+  })
+  if (handler)
+    target.addEventListener(name, handler as EventListener, { once: true })
+
+  target.dispatchEvent(event)
+}

package/src/shared/index.ts

@@ -0,0 +1,27 @@
+export * from "./arrays";
+export { createContext } from "./createContext";
+export {
+  type DateRange,
+  type DateStep,
+  type DateValue,
+  type SegmentPart,
+} from "./date";
+export { getActiveElement } from "./getActiveElement";
+export { handleAndDispatchCustomEvent } from "./handleAndDispatchCustomEvent";
+export * from "./nullish";
+export { onFocusOutside } from "./onFocusOutside";
+export { renderSlotFragments } from "./renderSlotFragments";
+export { trapFocus } from "./trap-focus";
+export { type Formatter, useDateFormatter } from "./useDateFormatter";
+export { useDirection } from "./useDirection";
+export { useEmitAsProps } from "./useEmitAsProps";
+export { useFocusGuards } from "./useFocusGuards";
+export { useForwardExpose } from "./useForwardExpose";
+export { useForwardProps } from "./useForwardProps";
+export { useForwardPropsEmits } from "./useForwardPropsEmits";
+export { useId } from "./useId";
+export { useKbd, useTestKbd } from "./useKbd";
+export { useLocale } from "./useLocale";
+export { useSize } from "./useSize";
+export { useStateMachine } from "./useStateMachine";
+export { withDefault } from "./withDefault";

package/src/shared/nullish.ts

@@ -0,0 +1,3 @@
+export function isNullish(value: any): value is null | undefined {
+  return value === null || value === undefined
+}

package/src/shared/onFocusOutside.ts

@@ -0,0 +1,29 @@
+import type { MaybeElementRef } from '@vueuse/core'
+import { unrefElement } from '@vueuse/core'
+import { onMounted, onUnmounted } from 'vue'
+
+export function onFocusOutside(
+  element: MaybeElementRef,
+  handler: (event: FocusEvent) => void,
+) {
+  const handleFocusOut = (ev: FocusEvent) => {
+    const el = unrefElement(element)
+    if (!ev.relatedTarget)
+      return
+    const isFocusInsideElement = el?.contains(ev.relatedTarget as Node)
+
+    if (!isFocusInsideElement)
+      handler(ev)
+  }
+
+  onMounted(() => {
+    const el = unrefElement(element)
+    // @ts-expect-error focusout should received FocusEvent
+    el?.addEventListener('focusout', handleFocusOut)
+  })
+  onUnmounted(() => {
+    const el = unrefElement(element)
+    // @ts-expect-error focusout should received FocusEvent
+    el?.removeEventListener('focusout', handleFocusOut)
+  })
+}

package/src/shared/renderSlotFragments.ts

@@ -0,0 +1,13 @@
+import type { VNode } from 'vue'
+import { Fragment } from 'vue'
+
+export function renderSlotFragments(children?: VNode[]): VNode[] {
+  if (!children)
+    return []
+  return children.flatMap((child) => {
+    if (child.type === Fragment)
+      return renderSlotFragments(child.children as VNode[])
+
+    return [child]
+  })
+}

package/src/shared/trap-focus.ts

@@ -0,0 +1,45 @@
+import { getActiveElement } from './getActiveElement'
+
+export function trapFocus(element: HTMLElement) {
+  if (element) {
+    const focusableEls = [
+      ...Array.from(
+        element.querySelectorAll(
+          'a[href], button, input, textarea, select, details,[tabindex]:not([tabindex="-1"])',
+        ),
+      ),
+    ].filter(
+      el => !el.hasAttribute('disabled') && !el.getAttribute('aria-hidden'),
+    )
+    const firstFocusableEl = focusableEls[0] as HTMLElement
+    const lastFocusableEl = focusableEls[
+      focusableEls.length - 1
+    ] as HTMLElement
+    const KEYCODE_TAB = 9
+
+    if (firstFocusableEl)
+      firstFocusableEl.focus()
+
+    element.addEventListener('keydown', (e) => {
+      const isTabPressed = e.key === 'Tab' || e.keyCode === KEYCODE_TAB
+
+      if (!isTabPressed)
+        return
+
+      if (e.shiftKey) {
+        /* shift + tab */ if (getActiveElement() === firstFocusableEl) {
+          lastFocusableEl.focus()
+          e.preventDefault()
+        }
+      }
+      else {
+      /* tab */
+        if (getActiveElement() === lastFocusableEl) {
+          firstFocusableEl.focus()
+          e.preventDefault()
+        }
+      }
+    })
+    return firstFocusableEl
+  }
+}

package/src/shared/types.ts

@@ -0,0 +1,64 @@
+type DataOrientation = 'vertical' | 'horizontal'
+type Direction = 'ltr' | 'rtl'
+type SingleOrMultipleType = 'single' | 'multiple'
+
+interface SingleOrMultipleProps<T = AcceptableValue | AcceptableValue[]> {
+  /**
+   * Determines whether a "single" or "multiple" items can be selected at a time.
+   *
+   * This prop will overwrite the inferred type from `modelValue` and `defaultValue`.
+   */
+  type?: SingleOrMultipleType
+
+  /**
+   * The controlled value of the active item(s).
+   *
+   * Use this when you need to control the state of the items. Can be binded with `v-model`
+   */
+  modelValue?: T
+
+  /**
+   * The default active value of the item(s).
+   *
+   * Use when you do not need to control the state of the item(s).
+   */
+  defaultValue?: T
+}
+
+/**
+ * if padding or margin is number, it will be in px
+ * if padding or margin is true, it will be var(--scrollbar-width)
+ * otherwise, it will be passed string
+ */
+type ScrollBodyOption = {
+  padding?: boolean | number | string
+  margin?: boolean | number | string
+}
+
+// Exclude `boolean` type to prevent type casting
+// reference: https://vuejs.org/guide/components/props.html#boolean-casting
+type AcceptableValue = string | number | bigint | Record<string, any> | null
+type ArrayOrWrapped<T> = T extends any[] ? T : Array<T>
+type StringOrNumber = string | number
+
+// Temporary solution for InstanceType complains about generic components. Reference: https://github.com/vuejs/language-tools/issues/3206#issuecomment-2188687250
+import type { DefineComponent } from 'vue'
+
+type GenericComponentInstance<T> = T extends new (...args: any[]) => infer R
+  ? R
+  : T extends (...args: any[]) => infer R
+    ? R extends { __ctx?: infer K }
+      ? Exclude<K, void> extends { expose: (...args: infer Y) => void }
+        ? Y[0] & InstanceType<DefineComponent>
+        : any
+      : any
+    : any
+
+interface FormFieldProps {
+  /** The name of the field. Submitted with its owning form as part of a name/value pair. */
+  name?: string
+  /** When `true`, indicates that the user must set the value before the owning form can be submitted. */
+  required?: boolean
+}
+
+export type { AcceptableValue, ArrayOrWrapped, DataOrientation, Direction, FormFieldProps, GenericComponentInstance, ScrollBodyOption, SingleOrMultipleProps, SingleOrMultipleType, StringOrNumber }

package/src/shared/useDateFormatter.ts

@@ -0,0 +1,186 @@
+/*
+ * 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;
+    // Day period can be "AM"/"PM" or "a.m."/"p.m." in some locales
+    if (value === "PM" || value === "p.m.") 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,16 @@
+import type { Ref } from "vue";
+import type { Direction } from "./types";
+import { computed, ref } from "vue";
+import { injectConfigProviderContext } from "../components/ConfigProvider/ConfigProvider.vue";
+
+/**
+ * The `useDirection` function provides a way to access the current direction in your application.
+ * @param {Ref<Direction | undefined>} [dir] - An optional ref containing the direction (ltr or rtl).
+ * @returns  computed value that combines with the resolved direction.
+ */
+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/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/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 }
+}