@rupe/v-datepicker 1.0.0-alpha.0

package/src/components/Presence/usePresence.ts

@@ -0,0 +1,175 @@
+import type { Ref } from "vue";
+import { useStateMachine } from "../../shared";
+import { defaultWindow } from "@vueuse/core";
+import { isClient } from "@vueuse/shared";
+import { computed, nextTick, onUnmounted, ref, watch } from "vue";
+
+export function usePresence(
+  present: Ref<boolean>,
+  node: Ref<HTMLElement | undefined>,
+) {
+  const stylesRef = ref<CSSStyleDeclaration>({} as any);
+  const prevAnimationNameRef = ref<string>("none");
+  const prevPresentRef = ref(present);
+  const initialState = present.value ? "mounted" : "unmounted";
+  let timeoutId: number | undefined;
+  const ownerWindow = node.value?.ownerDocument.defaultView ?? defaultWindow;
+
+  const { state, dispatch } = useStateMachine(initialState, {
+    mounted: {
+      UNMOUNT: "unmounted",
+      ANIMATION_OUT: "unmountSuspended",
+    },
+    unmountSuspended: {
+      MOUNT: "mounted",
+      ANIMATION_END: "unmounted",
+    },
+    unmounted: {
+      MOUNT: "mounted",
+    },
+  });
+
+  const dispatchCustomEvent = (
+    name: "enter" | "after-enter" | "leave" | "after-leave",
+  ) => {
+    // We only dispatch this event because CustomEvent is not available in Node18
+    // https://github.com/unovue/reka-ui/issues/930
+    if (isClient) {
+      const customEvent = new CustomEvent(name, {
+        bubbles: false,
+        cancelable: false,
+      });
+      node.value?.dispatchEvent(customEvent);
+    }
+  };
+
+  watch(
+    present,
+    async (currentPresent, prevPresent) => {
+      const hasPresentChanged = prevPresent !== currentPresent;
+      await nextTick();
+      if (hasPresentChanged) {
+        const prevAnimationName = prevAnimationNameRef.value;
+        const currentAnimationName = getAnimationName(node.value);
+
+        if (currentPresent) {
+          dispatch("MOUNT");
+          dispatchCustomEvent("enter");
+          if (currentAnimationName === "none")
+            dispatchCustomEvent("after-enter");
+        } else if (
+          currentAnimationName === "none" ||
+          currentAnimationName === "undefined" ||
+          stylesRef.value?.display === "none"
+        ) {
+          // If there is no exit animation or the element is hidden, animations won't run
+          // so we unmount instantly rv
+          dispatch("UNMOUNT");
+          dispatchCustomEvent("leave");
+          dispatchCustomEvent("after-leave");
+        } else {
+          /**
+           * When `present` changes to `false`, we check changes to animation-name to
+           * determine whether an animation has started. We chose this approach (reading
+           * computed styles) because there is no `animationrun` event and `animationstart`
+           * fires after `animation-delay` has expired which would be too late.
+           */
+          const isAnimating = prevAnimationName !== currentAnimationName;
+          if (prevPresent && isAnimating) {
+            dispatch("ANIMATION_OUT");
+            dispatchCustomEvent("leave");
+          } else {
+            dispatch("UNMOUNT");
+            dispatchCustomEvent("after-leave");
+          }
+        }
+      }
+    },
+    { immediate: true },
+  );
+
+  /**
+   * Triggering an ANIMATION_OUT during an ANIMATION_IN will fire an `animationcancel`
+   * event for ANIMATION_IN after we have entered `unmountSuspended` state. So, we
+   * make sure we only trigger ANIMATION_END for the currently active animation.
+   */
+  const handleAnimationEnd = (event: AnimationEvent) => {
+    const currentAnimationName = getAnimationName(node.value);
+    const isCurrentAnimation = currentAnimationName.includes(
+      CSS.escape(event.animationName),
+    );
+    const directionName = state.value === "mounted" ? "enter" : "leave";
+    if (event.target === node.value && isCurrentAnimation) {
+      dispatchCustomEvent(`after-${directionName}`);
+      dispatch("ANIMATION_END");
+
+      if (!prevPresentRef.value) {
+        const currentFillMode = node.value.style.animationFillMode;
+        node.value.style.animationFillMode = "forwards";
+        // Reset the style after the node had time to unmount (for cases
+        // where the component chooses not to unmount). Doing this any
+        // sooner than `setTimeout` (e.g. with `requestAnimationFrame`)
+        // still causes a flash.
+        timeoutId = ownerWindow?.setTimeout(() => {
+          if (node.value?.style.animationFillMode === "forwards") {
+            node.value.style.animationFillMode = currentFillMode;
+          }
+        });
+      }
+    }
+    // if no animation, immediately trigger 'ANIMATION_END'
+    if (event.target === node.value && currentAnimationName === "none")
+      dispatch("ANIMATION_END");
+  };
+  const handleAnimationStart = (event: AnimationEvent) => {
+    if (event.target === node.value) {
+      // if animation occurred, store its name as the previous animation.
+      prevAnimationNameRef.value = getAnimationName(node.value);
+    }
+  };
+
+  const watcher = watch(
+    node,
+    (newNode, oldNode) => {
+      if (newNode) {
+        stylesRef.value = getComputedStyle(newNode);
+        newNode.addEventListener("animationstart", handleAnimationStart);
+        newNode.addEventListener("animationcancel", handleAnimationEnd);
+        newNode.addEventListener("animationend", handleAnimationEnd);
+      } else {
+        // Transition to the unmounted state if the node is removed prematurely.
+        // We avoid doing so during cleanup as the node may change but still exist.
+        dispatch("ANIMATION_END");
+
+        if (timeoutId !== undefined) ownerWindow?.clearTimeout(timeoutId);
+        oldNode?.removeEventListener("animationstart", handleAnimationStart);
+        oldNode?.removeEventListener("animationcancel", handleAnimationEnd);
+        oldNode?.removeEventListener("animationend", handleAnimationEnd);
+      }
+    },
+    { immediate: true },
+  );
+
+  const stateWatcher = watch(state, () => {
+    const currentAnimationName = getAnimationName(node.value);
+    prevAnimationNameRef.value =
+      state.value === "mounted" ? currentAnimationName : "none";
+  });
+
+  onUnmounted(() => {
+    watcher();
+    stateWatcher();
+  });
+
+  const isPresent = computed(() =>
+    ["mounted", "unmountSuspended"].includes(state.value),
+  );
+
+  return {
+    isPresent,
+  };
+}
+
+function getAnimationName(node?: HTMLElement) {
+  return node ? getComputedStyle(node).animationName || "none" : "none";
+}

package/src/components/Primitive/Primitive.ts

@@ -0,0 +1,66 @@
+import type { Component, PropType } from 'vue'
+import { defineComponent, h } from 'vue'
+import { Slot } from './Slot'
+
+export type AsTag =
+  | 'a'
+  | 'button'
+  | 'div'
+  | 'form'
+  | 'h2'
+  | 'h3'
+  | 'img'
+  | 'input'
+  | 'label'
+  | 'li'
+  | 'nav'
+  | 'ol'
+  | 'p'
+  | 'span'
+  | 'svg'
+  | 'ul'
+  | 'template'
+  | ({} & string) // any other string
+
+export interface PrimitiveProps {
+  /**
+   * Change the default rendered element for the one passed as a child, merging their props and behavior.
+   *
+   * Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details.
+   */
+  asChild?: boolean
+  /**
+   * The element or component this component should render as. Can be overwritten by `asChild`.
+   * @defaultValue "div"
+   */
+  as?: AsTag | Component
+}
+
+// For self closing tags, don't provide default slots because of hydration issue
+const SELF_CLOSING_TAGS = ['area', 'img', 'input']
+
+export const Primitive = defineComponent({
+  name: 'Primitive',
+  inheritAttrs: false,
+  props: {
+    asChild: {
+      type: Boolean,
+      default: false,
+    },
+    as: {
+      type: [String, Object] as PropType<AsTag | Component>,
+      default: 'div',
+    },
+  },
+  setup(props, { attrs, slots }) {
+    const asTag = props.asChild ? 'template' : props.as
+
+    if (typeof asTag === 'string' && SELF_CLOSING_TAGS.includes(asTag))
+      return () => h(asTag, attrs)
+
+    if (asTag !== 'template')
+      return () => h(props.as, attrs, { default: slots.default })
+
+    return () => h(Slot, attrs, { default: slots.default })
+  },
+})

package/src/components/Primitive/Slot.ts

@@ -0,0 +1,40 @@
+import { cloneVNode, Comment, defineComponent, mergeProps } from "vue";
+import { renderSlotFragments } from "../../shared";
+
+export const Slot = defineComponent({
+  name: "PrimitiveSlot",
+  inheritAttrs: false,
+  setup(_, { attrs, slots }) {
+    return () => {
+      if (!slots.default) return null;
+
+      const children = renderSlotFragments(slots.default());
+      const firstNonCommentChildrenIndex = children.findIndex(
+        (child) => child.type !== Comment,
+      );
+      if (firstNonCommentChildrenIndex === -1) return children;
+
+      const firstNonCommentChildren = children[firstNonCommentChildrenIndex];
+
+      // Remove props ref from being inferred
+      delete firstNonCommentChildren.props?.ref;
+
+      // Manually merge props to ensure `firstNonCommentChildren.props`
+      // has higher priority than `attrs` and can override `attrs`.
+      // Otherwise `cloneVNode(firstNonCommentChildren, attrs)` will
+      // prioritize `attrs` and override `firstNonCommentChildren.props`.
+      const mergedProps = firstNonCommentChildren.props
+        ? mergeProps(attrs, firstNonCommentChildren.props)
+        : attrs;
+      const cloned = cloneVNode(
+        { ...firstNonCommentChildren, props: {} },
+        mergedProps,
+      );
+
+      if (children.length === 1) return cloned;
+
+      children[firstNonCommentChildrenIndex] = cloned;
+      return children;
+    };
+  },
+});

package/src/components/Primitive/index.ts

@@ -0,0 +1,3 @@
+export { type AsTag, Primitive, type PrimitiveProps } from './Primitive'
+export { Slot } from './Slot'
+export { usePrimitiveElement } from './usePrimitiveElement'

package/src/components/Primitive/usePrimitiveElement.ts

@@ -0,0 +1,13 @@
+import type { ComponentPublicInstance } from 'vue'
+import { unrefElement } from '@vueuse/core'
+import { computed, ref } from 'vue'
+
+export function usePrimitiveElement<T extends ComponentPublicInstance>() {
+  const primitiveElement = ref<T>()
+  const currentElement = computed<HTMLElement>(() => ['#text', '#comment'].includes(primitiveElement.value?.$el.nodeName) ? primitiveElement.value?.$el.nextElementSibling : unrefElement(primitiveElement))
+
+  return {
+    primitiveElement,
+    currentElement,
+  }
+}

package/src/components/Teleport/Teleport.vue

@@ -0,0 +1,49 @@
+<script lang="ts">
+export interface TeleportProps {
+  /**
+   * Vue native teleport component prop `:to`
+   *
+   * {@link https://vuejs.org/guide/built-ins/teleport.html#basic-usage}
+   */
+  to?: string | HTMLElement
+  /**
+   * Disable teleport and render the component inline
+   *
+   * {@link https://vuejs.org/guide/built-ins/teleport.html#disabling-teleport}
+   */
+  disabled?: boolean
+  /**
+   * Defer the resolving of a Teleport target until other parts of the
+   * application have mounted (requires Vue 3.5.0+)
+   *
+   * {@link https://vuejs.org/guide/built-ins/teleport.html#deferred-teleport}
+   */
+  defer?: boolean
+  /**
+   * Used to force mounting when more control is needed. Useful when
+   * controlling animation with Vue animation libraries.
+   */
+  forceMount?: boolean
+}
+</script>
+
+<script setup lang="ts">
+import { useMounted } from '@vueuse/core'
+
+withDefaults(defineProps<TeleportProps>(), {
+  to: 'body',
+})
+
+const isMounted = useMounted()
+</script>
+
+<template>
+  <Teleport
+    v-if="isMounted || forceMount"
+    :to="to"
+    :disabled="disabled"
+    :defer="defer"
+  >
+    <slot />
+  </Teleport>
+</template>

package/src/components/Teleport/index.ts

@@ -0,0 +1 @@
+export { default as TeleportPrimitive, type TeleportProps } from './Teleport.vue'

package/src/components/VisuallyHidden/VisuallyHidden.vue

@@ -0,0 +1,47 @@
+<script lang="ts">
+import type { PrimitiveProps } from "../Primitive";
+
+export interface VisuallyHiddenProps extends PrimitiveProps {
+  feature?: "focusable" | "fully-hidden";
+}
+</script>
+
+<script setup lang="ts">
+import { Primitive } from "../Primitive";
+
+withDefaults(defineProps<VisuallyHiddenProps>(), {
+  as: "span",
+  feature: "focusable",
+});
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :as-child="asChild"
+    :aria-hidden="feature === 'focusable' ? 'true' : undefined"
+    :data-hidden="feature === 'fully-hidden' ? '' : undefined"
+    :tabindex="feature === 'fully-hidden' ? '-1' : undefined"
+    :style="{
+      // See: https://github.com/twbs/bootstrap/blob/a360960b8dfdb4bf48f87539c2243458fa0366f7/scss/mixins/_visually-hidden.scss
+      position: 'absolute',
+      border: 0,
+      width: '1px',
+      height: '1px',
+      padding: 0,
+      margin: '-1px',
+      overflow: 'hidden',
+      clip: 'rect(0, 0, 0, 0)',
+      clipPath: 'inset(50%)',
+      whiteSpace: 'nowrap',
+      wordWrap: 'normal',
+
+      // Prevent causing unnecessary container scroll
+      // @see https://github.com/unovue/reka-ui/issues/2127
+      top: '-1px',
+      left: '-1px',
+    }"
+  >
+    <slot />
+  </Primitive>
+</template>

package/src/components/VisuallyHidden/VisuallyHiddenInput.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts" generic="T">
+import type { VisuallyHiddenInputBubbleProps } from './VisuallyHiddenInputBubble.vue'
+import { computed } from 'vue'
+import VisuallyHiddenInputBubble from './VisuallyHiddenInputBubble.vue'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<VisuallyHiddenInputBubbleProps<T>>(), {
+  feature: 'fully-hidden',
+  checked: undefined,
+})
+
+const isFormArrayEmptyAndRequired = computed(() =>
+  typeof props.value === 'object'
+  && Array.isArray(props.value)
+  && props.value.length === 0
+  && props.required,
+)
+
+const parsedValue = computed(() => {
+  // if primitive value
+  if (typeof props.value === 'string' || typeof props.value === 'number' || typeof props.value === 'boolean' || props.value === null || props.value === undefined) {
+    return [{ name: props.name, value: props.value }]
+  }
+
+  // if array value
+  else if (typeof props.value === 'object' && Array.isArray(props.value)) {
+    return props.value.flatMap((obj, index) => {
+      // if item in array is object
+      if (typeof obj === 'object')
+        return Object.entries(obj).map(([key, value]) => ({ name: `${props.name}[${index}][${key}]`, value }))
+      // if item in array is not object, may be primitive
+      else
+        return ({ name: `${props.name}[${index}]`, value: obj })
+    })
+  }
+
+  // if object value
+  else if (props.value !== null && typeof props.value === 'object' && !Array.isArray(props.value)) {
+    return Object.entries(props.value as object).map(([key, value]) => ({ name: `${props.name}[${key}]`, value }))
+  }
+
+  return []
+})
+</script>
+
+<template>
+  <!-- We render single input if it's required -->
+  <VisuallyHiddenInputBubble
+    v-if="isFormArrayEmptyAndRequired"
+    :key="name"
+    v-bind="{ ...props, ...$attrs }"
+    :name="name"
+    :value="value"
+  />
+
+  <VisuallyHiddenInputBubble
+    v-for="parsed in parsedValue"
+    v-else
+    :key="parsed.name"
+    v-bind="{ ...props, ...$attrs }"
+    :name="parsed.name"
+    :value="parsed.value"
+  />
+</template>

package/src/components/VisuallyHidden/VisuallyHiddenInputBubble.vue

@@ -0,0 +1,56 @@
+<script lang="ts">
+export interface VisuallyHiddenInputBubbleProps<T> {
+  name: string;
+  value: T;
+  checked?: boolean;
+  required?: boolean;
+  disabled?: boolean;
+  feature?: VisuallyHiddenProps["feature"];
+}
+</script>
+
+<script setup lang="ts" generic="T">
+import type { VisuallyHiddenProps } from "./VisuallyHidden.vue";
+import { computed, watch } from "vue";
+import { usePrimitiveElement } from "../Primitive";
+import VisuallyHidden from "./VisuallyHidden.vue";
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = withDefaults(defineProps<VisuallyHiddenInputBubbleProps<T>>(), {
+  feature: "fully-hidden",
+  checked: undefined,
+});
+
+const { primitiveElement, currentElement } = usePrimitiveElement();
+const valueState = computed(() => props.checked ?? props.value);
+
+watch(valueState, (cur, prev) => {
+  if (!currentElement.value) return;
+
+  const input = currentElement.value as HTMLInputElement;
+  const inputProto = window.HTMLInputElement.prototype;
+  const descriptor = Object.getOwnPropertyDescriptor(
+    inputProto,
+    "value",
+  ) as PropertyDescriptor;
+  const setValue = descriptor.set;
+  if (setValue && cur !== prev) {
+    const inputEvent = new Event("input", { bubbles: true });
+    const changeEvent = new Event("change", { bubbles: true });
+    setValue.call(input, cur);
+    input.dispatchEvent(inputEvent);
+    input.dispatchEvent(changeEvent);
+  }
+});
+</script>
+
+<template>
+  <VisuallyHidden
+    ref="primitiveElement"
+    v-bind="{ ...props, ...$attrs }"
+    as="input"
+  />
+</template>

package/src/components/VisuallyHidden/index.ts

@@ -0,0 +1,2 @@
+export { default as VisuallyHidden, type VisuallyHiddenProps } from './VisuallyHidden.vue'
+export { default as VisuallyHiddenInput } from './VisuallyHiddenInput.vue'