@rupe/v-datepicker 1.0.0-alpha.0

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/useId.ts

@@ -0,0 +1,34 @@
+import * as vue from "vue";
+// Inspired from https://github.com/tailwindlabs/headlessui/issues/2913
+// as the alternative, and a fallback for Vue version < 3.5
+import { injectConfigProviderContext } from "../components/ConfigProvider/ConfigProvider.vue";
+
+let count = 0;
+/**
+ * The `useId` function generates a unique identifier using a provided deterministic ID or a default
+ * one prefixed with "reka-", or the provided one via `useId` props from `<ConfigProvider>`.
+ * @param {string | null | undefined} [deterministicId] - The `useId` function you provided takes an
+ * optional parameter `deterministicId`, which can be a string, null, or undefined. If
+ * `deterministicId` is provided, the function will return it. Otherwise, it will generate an id using
+ * the `useId` function obtained
+ */
+export function useId(
+  deterministicId?: string | null | undefined,
+  prefix = "reka",
+) {
+  if (deterministicId) return deterministicId;
+
+  if ("useId" in vue) {
+    return `${prefix}-${vue.useId?.()}`;
+  }
+
+  const configProviderContext = injectConfigProviderContext({
+    useId: undefined,
+  });
+
+  if (configProviderContext.useId) {
+    return `${prefix}-${configProviderContext.useId()}`;
+  }
+
+  return `${prefix}-${++count}`;
+}

package/src/shared/useIsUsingKeyboard.ts

@@ -0,0 +1,22 @@
+import { createSharedComposable, useEventListener } from '@vueuse/core'
+import { onMounted, ref } from 'vue'
+
+function useIsUsingKeyboardImpl() {
+  const isUsingKeyboard = ref(false)
+
+  onMounted(() => {
+    // Capture phase ensures we set the boolean before any side effects execute
+    // in response to the key or pointer event as they might depend on this value.
+    useEventListener('keydown', () => {
+      isUsingKeyboard.value = true
+    }, { capture: true, passive: true })
+
+    useEventListener(['pointerdown', 'pointermove'], () => {
+      isUsingKeyboard.value = false
+    }, { capture: true, passive: true })
+  })
+
+  return isUsingKeyboard
+}
+
+export const useIsUsingKeyboard = createSharedComposable(useIsUsingKeyboardImpl)

package/src/shared/useKbd.ts

@@ -0,0 +1,58 @@
+export function useKbd() {
+  return {
+    ALT: 'Alt',
+    ARROW_DOWN: 'ArrowDown',
+    ARROW_LEFT: 'ArrowLeft',
+    ARROW_RIGHT: 'ArrowRight',
+    ARROW_UP: 'ArrowUp',
+    BACKSPACE: 'Backspace',
+    CAPS_LOCK: 'CapsLock',
+    CONTROL: 'Control',
+    DELETE: 'Delete',
+    END: 'End',
+    ENTER: 'Enter',
+    ESCAPE: 'Escape',
+    F1: 'F1',
+    F10: 'F10',
+    F11: 'F11',
+    F12: 'F12',
+    F2: 'F2',
+    F3: 'F3',
+    F4: 'F4',
+    F5: 'F5',
+    F6: 'F6',
+    F7: 'F7',
+    F8: 'F8',
+    F9: 'F9',
+    HOME: 'Home',
+    META: 'Meta',
+    PAGE_DOWN: 'PageDown',
+    PAGE_UP: 'PageUp',
+    SHIFT: 'Shift',
+    SPACE: ' ',
+    TAB: 'Tab',
+    CTRL: 'Control',
+    ASTERISK: '*',
+    SPACE_CODE: 'Space',
+  }
+}
+
+/**
+ * A wrapper around the internal kbd object to make it easier to use in tests
+ * which require the key names to be wrapped in curly braces.
+ */
+export type KbdKeys = keyof ReturnType<typeof useKbd>
+
+export function useTestKbd() {
+  const kbd = useKbd()
+
+  const initTestKbd: Record<KbdKeys, string> = Object.entries(kbd).reduce((acc, [key, value]) => {
+    acc[key as KbdKeys] = `{${value}}`
+    return acc
+  }, {} as Record<KbdKeys, string>)
+
+  return {
+    ...initTestKbd,
+    SHIFT_TAB: `{Shift>}{${kbd.TAB}}`,
+  }
+}

package/src/shared/useLocale.ts

@@ -0,0 +1,15 @@
+import type { Ref } from "vue";
+import { computed, ref } from "vue";
+import { injectConfigProviderContext } from "../components/ConfigProvider/ConfigProvider.vue";
+
+/**
+ * The `useLocale` function provides a way to access the current locale in your application.
+ * @param {Ref<string | undefined>} [locale] - An optional ref containing the locale.
+ * @returns A computed ref holding the resolved locale.
+ */
+export function useLocale(locale?: Ref<string | undefined>) {
+  const context = injectConfigProviderContext({
+    locale: ref("en"),
+  });
+  return computed(() => locale?.value || context.locale?.value || "en");
+}

package/src/shared/useNonce.ts

@@ -0,0 +1,10 @@
+import type { Ref } from "vue";
+import { computed, ref } from "vue";
+import { injectConfigProviderContext } from "../components/ConfigProvider/ConfigProvider.vue";
+
+export function useNonce(nonce?: Ref<string | undefined>) {
+  const context = injectConfigProviderContext({
+    nonce: ref(),
+  });
+  return computed(() => nonce?.value || context.nonce?.value);
+}

package/src/shared/useSize.ts

@@ -0,0 +1,64 @@
+import type { MaybeElementRef } from '@vueuse/core'
+import { unrefElement } from '@vueuse/core'
+import { computed, onMounted, ref } from 'vue'
+
+export function useSize(element: MaybeElementRef) {
+  const size = ref<{ width: number, height: number }>()
+  const width = computed(() => size.value?.width ?? 0)
+  const height = computed(() => size.value?.height ?? 0)
+
+  onMounted(() => {
+    const el = unrefElement(element) as HTMLElement
+    if (el) {
+      // provide size as early as possible
+      size.value = { width: el.offsetWidth, height: el.offsetHeight }
+
+      const resizeObserver = new ResizeObserver((entries) => {
+        if (!Array.isArray(entries))
+          return
+
+        // Since we only observe the one element, we don't need to loop over the
+        // array
+        if (!entries.length)
+          return
+
+        const entry = entries[0]
+        let width: number
+        let height: number
+
+        if ('borderBoxSize' in entry) {
+          const borderSizeEntry = entry.borderBoxSize
+          // iron out differences between browsers
+          const borderSize = Array.isArray(borderSizeEntry)
+            ? borderSizeEntry[0]
+            : borderSizeEntry
+          width = borderSize.inlineSize
+          height = borderSize.blockSize
+        }
+        else {
+          // for browsers that don't support `borderBoxSize`
+          // we calculate it ourselves to get the correct border box.
+          width = el.offsetWidth
+          height = el.offsetHeight
+        }
+
+        // temporary disable width/height from resize observer. borderSizeEntry seems to be incorrect
+        size.value = { width, height }
+      })
+
+      resizeObserver.observe(el, { box: 'border-box' })
+
+      return () => resizeObserver.unobserve(el)
+    }
+    else {
+      // We only want to reset to `undefined` when the element becomes `null`,
+      // not if it changes to another element.
+      size.value = undefined
+    }
+  })
+
+  return {
+    width,
+    height,
+  }
+}

package/src/shared/useStateMachine.ts

@@ -0,0 +1,48 @@
+import type { Ref } from 'vue'
+import { ref } from 'vue'
+
+interface Machine<S> {
+  [k: string]: { [k: string]: S }
+}
+type MachineState<T> = keyof T
+type MachineEvent<T> = keyof UnionToIntersection<T[keyof T]>
+
+// 🤯 https://fettblog.eu/typescript-union-to-intersection/
+type UnionToIntersection<T> = (T extends any ? (x: T) => any : never) extends (
+  x: infer R
+) => any
+  ? R
+  : never
+
+/**
+ * The `useStateMachine` function is a TypeScript function that creates a state machine and returns the
+ * current state and a dispatch function to update the state based on events.
+ * @param initialState - The `initialState` parameter is the initial state of the state machine. It
+ * represents the starting point of the state machine's state.
+ * @param machine - The `machine` parameter is an object that represents a state machine. It should
+ * have keys that correspond to the possible states of the machine, and the values should be objects
+ * that represent the possible events and their corresponding next states.
+ * @returns The `useStateMachine` function returns an object with two properties: `state` and
+ * `dispatch`.
+ */
+export function useStateMachine<M>(
+  initialState: MachineState<M>,
+  machine: M & Machine<MachineState<M>>,
+) {
+  const state = ref(initialState) as Ref<MachineState<M>>
+
+  function reducer(event: MachineEvent<M>) {
+    // @ts-expect-error  state.value is keyof M
+    const nextState = machine[state.value][event]
+    return nextState ?? state.value
+  }
+
+  const dispatch = (event: MachineEvent<M>) => {
+    state.value = reducer(event)
+  }
+
+  return {
+    state,
+    dispatch,
+  }
+}

package/src/shared/withDefault.ts

@@ -0,0 +1,61 @@
+import type { ComponentOptionsBase, DefineComponent, VNodeProps } from 'vue'
+import type { ComponentProps } from 'vue-component-type-helpers'
+import { h, mergeProps } from 'vue'
+import { useForwardExpose } from './useForwardExpose'
+
+// TODO: TEST
+
+// From vue next
+// https://github.com/vuejs/core/blob/1f2a652a9d2e3bec472fb1786a4c16d6ccfa1fb1/packages/runtime-core/src/h.ts#L53-L58
+type RawProps = VNodeProps & {
+  // used to differ from a single VNode object as children
+  __v_isVNode?: never
+  // used to differ from Array children
+  [Symbol.iterator]?: never
+} & Record<string, any>
+
+// types inspired from vue-test-utils
+// https://github.com/vuejs/test-utils/blob/main/src/mount.ts#L36
+interface MountingOptions<Props> {
+  /**
+   * Default props for the component
+   */
+  props?: (RawProps & Props) | ({} extends Props ? null : never) | ((attrs: Record<string, any>) => (RawProps & Props))
+  /**
+   * Pass attributes into the component
+   */
+  attrs?: Record<string, unknown>
+}
+
+export function withDefault<
+  T,
+  C = T extends ((...args: any) => any) | (new (...args: any) => any)
+    ? T
+    : T extends { props?: infer Props }
+      ? DefineComponent<
+        Props extends Readonly<(infer PropNames)[]> | (infer PropNames)[]
+          ? { [key in PropNames extends string ? PropNames : string]?: any }
+          : Props
+      >
+      : DefineComponent,
+  P extends ComponentProps<C> = ComponentProps<C>,
+>(
+  originalComponent: T,
+  options?: MountingOptions<P>
+): T
+
+export function withDefault<T extends ComponentOptionsBase<{}, {}, {}, any, any, any, any, any>>(WrappedComponent: T, options?: MountingOptions<any>) {
+  return ({
+    inheritAttrs: false,
+    name: `${WrappedComponent.__name ?? ''}Wrapper`,
+    setup(_, ctx) {
+      return () => {
+        const optionProps = typeof options?.props === 'function' ? options?.props(ctx.attrs) : options?.props
+        const { forwardRef } = useForwardExpose()
+
+        const mergedProps = mergeProps(optionProps, ctx.attrs)
+        return h(WrappedComponent, { ...mergedProps, ref: forwardRef }, ctx.slots)
+      }
+    },
+  }) as T
+}