@rupe/v-datepicker 1.0.0-alpha.0

package/src/components/FocusScope/utils.ts

@@ -0,0 +1,108 @@
+import { getActiveElement } from "../../shared";
+
+export const AUTOFOCUS_ON_MOUNT = "focusScope.autoFocusOnMount";
+export const AUTOFOCUS_ON_UNMOUNT = "focusScope.autoFocusOnUnmount";
+export const EVENT_OPTIONS = { bubbles: false, cancelable: true };
+
+type FocusableTarget = HTMLElement | { focus: () => void };
+
+/**
+ * Attempts focusing the first element in a list of candidates.
+ * Stops when focus has actually moved.
+ */
+export function focusFirst(candidates: HTMLElement[], { select = false } = {}) {
+  const previouslyFocusedElement = getActiveElement();
+  for (const candidate of candidates) {
+    focus(candidate, { select });
+    if (getActiveElement() !== previouslyFocusedElement) return true;
+  }
+}
+
+/**
+ * Returns the first and last tabbable elements inside a container.
+ */
+export function getTabbableEdges(container: HTMLElement) {
+  const candidates = getTabbableCandidates(container);
+  const first = findVisible(candidates, container);
+  const last = findVisible(candidates.reverse(), container);
+  return [first, last] as const;
+}
+
+/**
+ * Returns a list of potential tabbable candidates.
+ *
+ * NOTE: This is only a close approximation. For example it doesn't take into account cases like when
+ * elements are not visible. This cannot be worked out easily by just reading a property, but rather
+ * necessitate runtime knowledge (computed styles, etc). We deal with these cases separately.
+ *
+ * See: https://developer.mozilla.org/en-US/docs/Web/API/TreeWalker
+ * Credit: https://github.com/discord/focus-layers/blob/master/src/util/wrapFocus.tsx#L1
+ */
+export function getTabbableCandidates(container: HTMLElement) {
+  const nodes: HTMLElement[] = [];
+  const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
+    acceptNode: (node: any) => {
+      const isHiddenInput = node.tagName === "INPUT" && node.type === "hidden";
+      if (node.disabled || node.hidden || isHiddenInput)
+        return NodeFilter.FILTER_SKIP;
+      // `.tabIndex` is not the same as the `tabindex` attribute. It works on the
+      // runtime's understanding of tabbability, so this automatically accounts
+      // for any kind of element that could be tabbed to.
+      return node.tabIndex >= 0
+        ? NodeFilter.FILTER_ACCEPT
+        : NodeFilter.FILTER_SKIP;
+    },
+  });
+  while (walker.nextNode()) nodes.push(walker.currentNode as HTMLElement);
+  // we do not take into account the order of nodes with positive `tabIndex` as it
+  // hinders accessibility to have tab order different from visual order.
+  return nodes;
+}
+
+/**
+ * Returns the first visible element in a list.
+ * NOTE: Only checks visibility up to the `container`.
+ */
+export function findVisible(elements: HTMLElement[], container: HTMLElement) {
+  for (const element of elements) {
+    // we stop checking if it's hidden at the `container` level (excluding)
+    if (!isHidden(element, { upTo: container })) return element;
+  }
+}
+
+export function isHidden(node: HTMLElement, { upTo }: { upTo?: HTMLElement }) {
+  if (getComputedStyle(node).visibility === "hidden") return true;
+  while (node) {
+    // we stop at `upTo` (excluding it)
+    if (upTo !== undefined && node === upTo) return false;
+    if (getComputedStyle(node).display === "none") return true;
+    node = node.parentElement as HTMLElement;
+  }
+  return false;
+}
+
+export function isSelectableInput(
+  element: any,
+): element is FocusableTarget & { select: () => void } {
+  return element instanceof HTMLInputElement && "select" in element;
+}
+
+export function focus(
+  element?: FocusableTarget | null,
+  { select = false } = {},
+) {
+  // only focus if that element is focusable
+  if (element && element.focus) {
+    const previouslyFocusedElement = getActiveElement();
+    // NOTE: we prevent scrolling on focus, to minimize jarring transitions for users
+    element.focus({ preventScroll: true });
+    // only select if its not the same element, it supports selection and we need to select
+    if (
+      element !== previouslyFocusedElement &&
+      isSelectableInput(element) &&
+      select
+    ) {
+      element.select();
+    }
+  }
+}

package/src/components/Popover/PopoverAnchor.vue

@@ -0,0 +1,30 @@
+<script lang="ts">
+import type { PopperAnchorProps } from "../Popper";
+import { useForwardExpose } from "../../shared";
+
+export type PopoverAnchorProps = PopperAnchorProps;
+</script>
+
+<script setup lang="ts">
+import { onBeforeMount, onUnmounted } from "vue";
+import { PopperAnchor } from "../Popper";
+import { injectPopoverRootContext } from "./PopoverRoot.vue";
+
+const props = defineProps<PopoverAnchorProps>();
+
+useForwardExpose();
+const rootContext = injectPopoverRootContext();
+
+onBeforeMount(() => {
+  rootContext.hasCustomAnchor.value = true;
+});
+onUnmounted(() => {
+  rootContext.hasCustomAnchor.value = false;
+});
+</script>
+
+<template>
+  <PopperAnchor v-bind="props">
+    <slot />
+  </PopperAnchor>
+</template>

package/src/components/Popover/PopoverArrow.vue

@@ -0,0 +1,23 @@
+<script lang="ts">
+import type { PopperArrowProps } from "../Popper";
+import { useForwardExpose } from "../../shared";
+
+export type PopoverArrowProps = PopperArrowProps;
+</script>
+
+<script setup lang="ts">
+import { PopperArrow } from "../Popper";
+
+const props = withDefaults(defineProps<PopoverArrowProps>(), {
+  width: 10,
+  height: 5,
+  as: "svg",
+});
+useForwardExpose();
+</script>
+
+<template>
+  <PopperArrow v-bind="props">
+    <slot />
+  </PopperArrow>
+</template>

package/src/components/Popover/PopoverClose.vue

@@ -0,0 +1,29 @@
+<script lang="ts">
+import type { PrimitiveProps } from "../Primitive";
+import { useForwardExpose } from "../../shared";
+
+export type PopoverCloseProps = PrimitiveProps;
+</script>
+
+<script setup lang="ts">
+import { Primitive } from "../Primitive";
+import { injectPopoverRootContext } from "./PopoverRoot.vue";
+
+const props = withDefaults(defineProps<PopoverCloseProps>(), {
+  as: "button",
+});
+
+useForwardExpose();
+const rootContext = injectPopoverRootContext();
+</script>
+
+<template>
+  <Primitive
+    :type="as === 'button' ? 'button' : undefined"
+    :as="as"
+    :as-child="props.asChild"
+    @click="rootContext.onOpenChange(false)"
+  >
+    <slot />
+  </Primitive>
+</template>

package/src/components/Popover/PopoverContent.vue

@@ -0,0 +1,41 @@
+<script lang="ts">
+import type {
+  PopoverContentImplEmits,
+  PopoverContentImplProps,
+} from "./PopoverContentImpl.vue";
+
+export type PopoverContentEmits = PopoverContentImplEmits;
+
+export interface PopoverContentProps extends PopoverContentImplProps {
+  /**
+   * 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 { Presence } from "../Presence";
+import { useForwardExpose, useForwardPropsEmits, useId } from "../../shared";
+import PopoverContentNonModal from "./PopoverContentNonModal.vue";
+import { injectPopoverRootContext } from "./PopoverRoot.vue";
+
+const props = defineProps<PopoverContentProps>();
+const emits = defineEmits<PopoverContentEmits>();
+
+const rootContext = injectPopoverRootContext();
+
+const forwarded = useForwardPropsEmits(props, emits);
+const { forwardRef } = useForwardExpose();
+
+rootContext.contentId ||= useId(undefined, "reka-popover-content");
+</script>
+
+<template>
+  <Presence :present="forceMount || rootContext.open.value">
+    <PopoverContentNonModal v-bind="forwarded" :ref="forwardRef">
+      <slot />
+    </PopoverContentNonModal>
+  </Presence>
+</template>

package/src/components/Popover/PopoverContentImpl.vue

@@ -0,0 +1,97 @@
+<script lang="ts">
+import type {
+  DismissableLayerEmits,
+  DismissableLayerProps,
+} from "../DismissableLayer";
+import type { FocusScopeProps } from "../FocusScope";
+import type { PopperContentProps } from "../Popper";
+import { reactiveOmit } from "@vueuse/shared";
+
+export type PopoverContentImplEmits = DismissableLayerEmits & {
+  /**
+   * Event handler called when auto-focusing on open.
+   * Can be prevented.
+   */
+  openAutoFocus: [event: Event];
+  /**
+   * Event handler called when auto-focusing on close.
+   * Can be prevented.
+   */
+  closeAutoFocus: [event: Event];
+};
+
+export interface PopoverContentImplProps
+  extends PopperContentProps, DismissableLayerProps {}
+
+interface PopoverContentImplPrivateProps extends PopoverContentImplProps {
+  /**
+   * Whether focus should be trapped within the `MenuContent`
+   * @defaultValue false
+   */
+  trapFocus?: FocusScopeProps["trapped"];
+}
+</script>
+
+<script setup lang="ts">
+import { DismissableLayer } from "../DismissableLayer";
+import { FocusScope } from "../FocusScope";
+import { PopperContent } from "../Popper";
+import {
+  useFocusGuards,
+  useForwardExpose,
+  useForwardProps,
+} from "../../shared";
+import { injectPopoverRootContext } from "./PopoverRoot.vue";
+
+const props = defineProps<PopoverContentImplPrivateProps>();
+const emits = defineEmits<PopoverContentImplEmits>();
+
+const forwarded = useForwardProps(
+  reactiveOmit(props, "trapFocus", "disableOutsidePointerEvents"),
+);
+const { forwardRef } = useForwardExpose();
+
+const rootContext = injectPopoverRootContext();
+useFocusGuards();
+</script>
+
+<template>
+  <FocusScope
+    as-child
+    loop
+    :trapped="trapFocus"
+    @mount-auto-focus="emits('openAutoFocus', $event)"
+    @unmount-auto-focus="emits('closeAutoFocus', $event)"
+  >
+    <DismissableLayer
+      as-child
+      :disable-outside-pointer-events="disableOutsidePointerEvents"
+      @pointer-down-outside="emits('pointerDownOutside', $event)"
+      @interact-outside="emits('interactOutside', $event)"
+      @escape-key-down="emits('escapeKeyDown', $event)"
+      @focus-outside="emits('focusOutside', $event)"
+      @dismiss="rootContext.onOpenChange(false)"
+    >
+      <PopperContent
+        v-bind="forwarded"
+        :id="rootContext.contentId"
+        :ref="forwardRef"
+        :data-state="rootContext.open.value ? 'open' : 'closed'"
+        :aria-labelledby="rootContext.triggerId"
+        :style="{
+          '--reka-popover-content-transform-origin':
+            'var(--reka-popper-transform-origin)',
+          '--reka-popover-content-available-width':
+            'var(--reka-popper-available-width)',
+          '--reka-popover-content-available-height':
+            'var(--reka-popper-available-height)',
+          '--reka-popover-trigger-width': 'var(--reka-popper-anchor-width)',
+          '--reka-popover-trigger-height': 'var(--reka-popper-anchor-height)',
+        }"
+        role="dialog"
+      >
+        <slot />
+      </PopperContent>
+    </DismissableLayer>
+  </FocusScope>
+</template>

package/src/components/Popover/PopoverContentNonModal.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import type {
+  PopoverContentImplEmits,
+  PopoverContentImplProps,
+} from "./PopoverContentImpl.vue";
+import { ref } from "vue";
+import { useForwardPropsEmits } from "../../shared";
+import PopoverContentImpl from "./PopoverContentImpl.vue";
+import { injectPopoverRootContext } from "./PopoverRoot.vue";
+
+const props = defineProps<PopoverContentImplProps>();
+const emits = defineEmits<PopoverContentImplEmits>();
+const rootContext = injectPopoverRootContext();
+const hasInteractedOutsideRef = ref(false);
+const hasPointerDownOutsideRef = ref(false);
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <PopoverContentImpl
+    v-bind="forwarded"
+    :trap-focus="false"
+    :disable-outside-pointer-events="false"
+    @close-auto-focus="
+      (event) => {
+        emits('closeAutoFocus', event);
+
+        if (!event.defaultPrevented) {
+          if (!hasInteractedOutsideRef)
+            rootContext.triggerElement.value?.focus();
+          // Always prevent auto focus because we either focus manually or want user agent focus
+          event.preventDefault();
+        }
+
+        hasInteractedOutsideRef = false;
+        hasPointerDownOutsideRef = false;
+      }
+    "
+    @interact-outside="
+      async (event) => {
+        emits('interactOutside', event);
+
+        if (!event.defaultPrevented) {
+          hasInteractedOutsideRef = true;
+          if (event.detail.originalEvent.type === 'pointerdown') {
+            hasPointerDownOutsideRef = true;
+          }
+        }
+
+        // Prevent dismissing when clicking the trigger.
+        // As the trigger is already setup to close, without doing so would
+        // cause it to close and immediately open.
+        const target = event.target as HTMLElement;
+        const targetIsTrigger =
+          rootContext.triggerElement.value?.contains(target);
+        if (targetIsTrigger) event.preventDefault();
+
+        // On Safari if the trigger is inside a container with tabIndex={0}, when clicked
+        // we will get the pointer down outside event on the trigger, but then a subsequent
+        // focus outside event on the container, we ignore any focus outside event when we've
+        // already had a pointer down outside event.
+        if (
+          event.detail.originalEvent.type === 'focusin' &&
+          hasPointerDownOutsideRef
+        ) {
+          event.preventDefault();
+        }
+      }
+    "
+  >
+    <slot />
+  </PopoverContentImpl>
+</template>

package/src/components/Popover/PopoverPortal.vue

@@ -0,0 +1,17 @@
+<script lang="ts">
+import type { TeleportProps } from "../Teleport";
+
+export type PopoverPortalProps = TeleportProps;
+</script>
+
+<script setup lang="ts">
+import { TeleportPrimitive } from "../Teleport";
+
+const props = defineProps<PopoverPortalProps>();
+</script>
+
+<template>
+  <TeleportPrimitive v-bind="props">
+    <slot />
+  </TeleportPrimitive>
+</template>

package/src/components/Popover/PopoverRoot.vue

@@ -0,0 +1,83 @@
+<script lang="ts">
+import type { Ref } from "vue";
+import { createContext } from "../../shared";
+
+export interface PopoverRootProps {
+  /**
+   * The open state of the popover when it is initially rendered. Use when you do not need to control its open state.
+   */
+  defaultOpen?: boolean;
+  /**
+   * The controlled open state of the popover.
+   */
+  open?: boolean;
+}
+export type PopoverRootEmits = {
+  /**
+   * Event handler called when the open state of the popover changes.
+   */
+  "update:open": [value: boolean];
+};
+
+export interface PopoverRootContext {
+  triggerElement: Ref<HTMLElement | undefined>;
+  triggerId: string;
+  contentId: string;
+  open: Ref<boolean>;
+  onOpenChange: (value: boolean) => void;
+  onOpenToggle: () => void;
+  hasCustomAnchor: Ref<boolean>;
+}
+
+export const [injectPopoverRootContext, providePopoverRootContext] =
+  createContext<PopoverRootContext>("PopoverRoot");
+</script>
+
+<script setup lang="ts">
+import { useVModel } from "@vueuse/core";
+import { ref, toRefs } from "vue";
+import { PopperRoot } from "../Popper";
+
+const props = withDefaults(defineProps<PopoverRootProps>(), {
+  defaultOpen: false,
+  open: undefined,
+});
+const emit = defineEmits<PopoverRootEmits>();
+
+defineSlots<{
+  default?: (props: {
+    /** Current open state */
+    open: typeof open.value;
+    /** Close the popover */
+    close: () => void;
+  }) => any;
+}>();
+
+const open = useVModel(props, "open", emit, {
+  defaultValue: props.defaultOpen,
+  passive: (props.open === undefined) as false,
+}) as Ref<boolean>;
+
+const triggerElement = ref<HTMLElement>();
+const hasCustomAnchor = ref(false);
+
+providePopoverRootContext({
+  contentId: "",
+  triggerId: "",
+  open,
+  onOpenChange: (value) => {
+    open.value = value;
+  },
+  onOpenToggle: () => {
+    open.value = !open.value;
+  },
+  triggerElement,
+  hasCustomAnchor,
+});
+</script>
+
+<template>
+  <PopperRoot>
+    <slot :open="open" :close="() => (open = false)" />
+  </PopperRoot>
+</template>

package/src/components/Popover/PopoverTrigger.vue

@@ -0,0 +1,48 @@
+<script lang="ts">
+import type { PrimitiveProps } from "../Primitive";
+import { useForwardExpose, useId } from "../../shared";
+
+export type PopoverTriggerProps = PrimitiveProps;
+</script>
+
+<script setup lang="ts">
+import { onMounted } from "vue";
+import { PopperAnchor } from "../Popper";
+import { Primitive } from "../Primitive";
+import { injectPopoverRootContext } from "./PopoverRoot.vue";
+
+const props = withDefaults(defineProps<PopoverTriggerProps>(), {
+  as: "button",
+});
+
+const rootContext = injectPopoverRootContext();
+
+const { forwardRef, currentElement: triggerElement } = useForwardExpose();
+
+rootContext.triggerId ||= useId(undefined, "reka-popover-trigger");
+onMounted(() => {
+  rootContext.triggerElement.value = triggerElement.value;
+});
+</script>
+
+<template>
+  <component
+    :is="rootContext.hasCustomAnchor.value ? Primitive : PopperAnchor"
+    as-child
+  >
+    <Primitive
+      :id="rootContext.triggerId"
+      :ref="forwardRef"
+      :type="as === 'button' ? 'button' : undefined"
+      aria-haspopup="dialog"
+      :aria-expanded="rootContext.open.value"
+      :aria-controls="rootContext.contentId"
+      :data-state="rootContext.open.value ? 'open' : 'closed'"
+      :as="as"
+      :as-child="props.asChild"
+      @click="rootContext.onOpenToggle"
+    >
+      <slot />
+    </Primitive>
+  </component>
+</template>

package/src/components/Popover/index.ts

@@ -0,0 +1,31 @@
+export {
+  default as PopoverAnchor,
+  type PopoverAnchorProps,
+} from './PopoverAnchor.vue'
+export {
+  default as PopoverArrow,
+  type PopoverArrowProps,
+} from './PopoverArrow.vue'
+export {
+  default as PopoverClose,
+  type PopoverCloseProps,
+} from './PopoverClose.vue'
+export {
+  default as PopoverContent,
+  type PopoverContentEmits,
+  type PopoverContentProps,
+} from './PopoverContent.vue'
+export {
+  default as PopoverPortal,
+  type PopoverPortalProps,
+} from './PopoverPortal.vue'
+export {
+  injectPopoverRootContext,
+  default as PopoverRoot,
+  type PopoverRootEmits,
+  type PopoverRootProps,
+} from './PopoverRoot.vue'
+export {
+  default as PopoverTrigger,
+  type PopoverTriggerProps,
+} from './PopoverTrigger.vue'

package/src/components/Popper/PopperAnchor.vue

@@ -0,0 +1,36 @@
+<script lang="ts">
+import type { ReferenceElement } from "@floating-ui/vue";
+import type { PrimitiveProps } from "../Primitive";
+import { useForwardExpose } from "../../shared";
+
+export interface PopperAnchorProps extends PrimitiveProps {
+  /**
+   *  The reference (or anchor) element that is being referred to for positioning.
+   *
+   *  If not provided will use the current component as anchor.
+   */
+  reference?: ReferenceElement;
+}
+</script>
+
+<script setup lang="ts">
+import { watchPostEffect } from "vue";
+import { Primitive } from "../Primitive";
+import { injectPopperRootContext } from "./PopperRoot.vue";
+
+const props = defineProps<PopperAnchorProps>();
+
+const { forwardRef, currentElement } = useForwardExpose();
+
+const rootContext = injectPopperRootContext();
+
+watchPostEffect(() => {
+  rootContext.onAnchorChange(props.reference ?? currentElement.value);
+});
+</script>
+
+<template>
+  <Primitive :ref="forwardRef" :as="as" :as-child="asChild">
+    <slot />
+  </Primitive>
+</template>