@rupe/v-datepicker 1.0.0-alpha.0

package/src/components/DismissableLayer/DismissableLayer.vue

@@ -0,0 +1,175 @@
+<script lang="ts">
+import type { FocusOutsideEvent, PointerDownOutsideEvent } from "./utils";
+
+import type { PrimitiveProps } from "../Primitive";
+import { computed, nextTick, reactive, watchEffect } from "vue";
+import { useForwardExpose } from "../../shared";
+
+export interface DismissableLayerProps extends PrimitiveProps {
+  /**
+   * When `true`, hover/focus/click interactions will be disabled on elements outside
+   * the `DismissableLayer`. Users will need to click twice on outside elements to
+   * interact with them: once to close the `DismissableLayer`, and again to trigger the element.
+   */
+  disableOutsidePointerEvents?: boolean;
+}
+
+export type DismissableLayerEmits = {
+  /**
+   * Event handler called when the escape key is down.
+   * Can be prevented.
+   */
+  escapeKeyDown: [event: KeyboardEvent];
+  /**
+   * Event handler called when a `pointerdown` event happens outside of the `DismissableLayer`.
+   * Can be prevented.
+   */
+  pointerDownOutside: [event: PointerDownOutsideEvent];
+  /**
+   * Event handler called when the focus moves outside of the `DismissableLayer`.
+   * Can be prevented.
+   */
+  focusOutside: [event: FocusOutsideEvent];
+  /**
+   * Event handler called when an interaction happens outside the `DismissableLayer`.
+   * Specifically, when a `pointerdown` event happens outside or focus moves outside of it.
+   * Can be prevented.
+   */
+  interactOutside: [event: PointerDownOutsideEvent | FocusOutsideEvent];
+};
+
+export type DismissableLayerPrivateEmits = DismissableLayerEmits & {
+  /**
+   * Handler called when the `DismissableLayer` should be dismissed
+   */
+  dismiss: [];
+};
+
+export const context = reactive({
+  layersRoot: new Set<HTMLElement>(),
+  layersWithOutsidePointerEventsDisabled: new Set<HTMLElement>(),
+  branches: new Set<HTMLElement>(),
+});
+</script>
+
+<script setup lang="ts">
+import { onKeyStroke } from "@vueuse/core";
+import { Primitive } from "../Primitive";
+import { useFocusOutside, usePointerDownOutside } from "./utils";
+
+const props = withDefaults(defineProps<DismissableLayerProps>(), {
+  disableOutsidePointerEvents: false,
+});
+
+const emits = defineEmits<DismissableLayerPrivateEmits>();
+
+const { forwardRef, currentElement: layerElement } = useForwardExpose();
+const ownerDocument = computed(
+  () => layerElement.value?.ownerDocument ?? globalThis.document,
+);
+
+const layers = computed(() => context.layersRoot);
+
+const index = computed(() => {
+  return layerElement.value
+    ? Array.from(layers.value).indexOf(layerElement.value)
+    : -1;
+});
+
+const isBodyPointerEventsDisabled = computed(() => {
+  return context.layersWithOutsidePointerEventsDisabled.size > 0;
+});
+
+const isPointerEventsEnabled = computed(() => {
+  const localLayers = Array.from(layers.value);
+  const [highestLayerWithOutsidePointerEventsDisabled] = [
+    ...context.layersWithOutsidePointerEventsDisabled,
+  ].slice(-1);
+  const highestLayerWithOutsidePointerEventsDisabledIndex = localLayers.indexOf(
+    highestLayerWithOutsidePointerEventsDisabled,
+  );
+
+  return index.value >= highestLayerWithOutsidePointerEventsDisabledIndex;
+});
+
+const pointerDownOutside = usePointerDownOutside(async (event) => {
+  const isPointerDownOnBranch = [...context.branches].some((branch) =>
+    branch?.contains(event.target as HTMLElement),
+  );
+
+  if (!isPointerEventsEnabled.value || isPointerDownOnBranch) return;
+  emits("pointerDownOutside", event);
+  emits("interactOutside", event);
+  await nextTick();
+  if (!event.defaultPrevented) emits("dismiss");
+}, layerElement);
+
+const focusOutside = useFocusOutside((event) => {
+  const isFocusInBranch = [...context.branches].some((branch) =>
+    branch?.contains(event.target as HTMLElement),
+  );
+
+  if (isFocusInBranch) return;
+  emits("focusOutside", event);
+  emits("interactOutside", event);
+  if (!event.defaultPrevented) emits("dismiss");
+}, layerElement);
+
+onKeyStroke("Escape", (event) => {
+  const isHighestLayer = index.value === layers.value.size - 1;
+  if (!isHighestLayer) return;
+  emits("escapeKeyDown", event);
+  if (!event.defaultPrevented) emits("dismiss");
+});
+
+let originalBodyPointerEvents: string;
+watchEffect((cleanupFn) => {
+  if (!layerElement.value) return;
+  if (props.disableOutsidePointerEvents) {
+    if (context.layersWithOutsidePointerEventsDisabled.size === 0) {
+      originalBodyPointerEvents = ownerDocument.value.body.style.pointerEvents;
+      ownerDocument.value.body.style.pointerEvents = "none";
+    }
+    context.layersWithOutsidePointerEventsDisabled.add(layerElement.value);
+  }
+  layers.value.add(layerElement.value);
+
+  cleanupFn(() => {
+    if (
+      props.disableOutsidePointerEvents &&
+      context.layersWithOutsidePointerEventsDisabled.size === 1
+    ) {
+      ownerDocument.value.body.style.pointerEvents = originalBodyPointerEvents;
+    }
+  });
+});
+
+watchEffect((cleanupFn) => {
+  cleanupFn(() => {
+    if (!layerElement.value) return;
+    layers.value.delete(layerElement.value);
+    context.layersWithOutsidePointerEventsDisabled.delete(layerElement.value);
+  });
+});
+</script>
+
+<template>
+  <Primitive
+    :ref="forwardRef"
+    :as-child="asChild"
+    :as="as"
+    data-dismissable-layer
+    :style="{
+      pointerEvents: isBodyPointerEventsDisabled
+        ? isPointerEventsEnabled
+          ? 'auto'
+          : 'none'
+        : undefined,
+    }"
+    @focus.capture="focusOutside.onFocusCapture"
+    @blur.capture="focusOutside.onBlurCapture"
+    @pointerdown.capture="pointerDownOutside.onPointerDownCapture"
+  >
+    <slot />
+  </Primitive>
+</template>

package/src/components/DismissableLayer/DismissableLayerBranch.vue

@@ -0,0 +1,28 @@
+<script lang="ts">
+import type { PrimitiveProps } from "../Primitive";
+import { useForwardExpose } from "../../shared";
+
+export type DismissableLayerBranchProps = PrimitiveProps;
+</script>
+
+<script setup lang="ts">
+import { onMounted, onUnmounted } from "vue";
+import { Primitive } from "../Primitive";
+import { context } from "./DismissableLayer.vue";
+
+const props = defineProps<DismissableLayerBranchProps>();
+
+const { forwardRef, currentElement } = useForwardExpose();
+onMounted(() => {
+  context.branches.add(currentElement.value);
+});
+onUnmounted(() => {
+  context.branches.delete(currentElement.value);
+});
+</script>
+
+<template>
+  <Primitive :ref="forwardRef" v-bind="props">
+    <slot />
+  </Primitive>
+</template>

package/src/components/DismissableLayer/index.ts

@@ -0,0 +1,7 @@
+export {
+  default as DismissableLayer,
+  type DismissableLayerEmits,
+  type DismissableLayerProps,
+} from './DismissableLayer.vue'
+export { default as DismissableLayerBranch } from './DismissableLayerBranch.vue'
+export { type FocusOutsideEvent, type PointerDownOutsideEvent, useFocusOutside, usePointerDownOutside } from './utils'

package/src/components/DismissableLayer/utils.ts

@@ -0,0 +1,194 @@
+import type { MaybeRefOrGetter, Ref } from "vue";
+import { isClient } from "@vueuse/shared";
+import { nextTick, ref, toValue, watchEffect } from "vue";
+import { handleAndDispatchCustomEvent } from "../../shared";
+
+export type PointerDownOutsideEvent = CustomEvent<{
+  originalEvent: PointerEvent;
+}>;
+export type FocusOutsideEvent = CustomEvent<{ originalEvent: FocusEvent }>;
+
+export const DISMISSABLE_LAYER_NAME = "DismissableLayer";
+export const CONTEXT_UPDATE = "dismissableLayer.update";
+export const POINTER_DOWN_OUTSIDE = "dismissableLayer.pointerDownOutside";
+export const FOCUS_OUTSIDE = "dismissableLayer.focusOutside";
+
+function isLayerExist(layerElement: HTMLElement, targetElement: HTMLElement) {
+  const targetLayer = targetElement.closest("[data-dismissable-layer]");
+
+  const mainLayer =
+    layerElement.dataset.dismissableLayer === ""
+      ? layerElement
+      : (layerElement.querySelector("[data-dismissable-layer]") as HTMLElement);
+
+  const nodeList = Array.from(
+    layerElement.ownerDocument.querySelectorAll("[data-dismissable-layer]"),
+  );
+
+  if (
+    targetLayer &&
+    (mainLayer === targetLayer ||
+      nodeList.indexOf(mainLayer) < nodeList.indexOf(targetLayer))
+  ) {
+    return true;
+  } else {
+    return false;
+  }
+}
+
+/**
+ * Listens for `pointerdown` outside a DOM subtree. We use `pointerdown` rather than `pointerup`
+ * to mimic layer dismissing behaviour present in OS.
+ * Returns props to pass to the node we want to check for outside events.
+ */
+export function usePointerDownOutside(
+  onPointerDownOutside?: (event: PointerDownOutsideEvent) => void,
+  element?: Ref<HTMLElement | undefined>,
+  enabled: MaybeRefOrGetter<boolean> = true,
+) {
+  const ownerDocument: Document =
+    element?.value?.ownerDocument ?? globalThis?.document;
+
+  const isPointerInsideDOMTree = ref(false);
+  const handleClickRef = ref(() => {});
+
+  watchEffect((cleanupFn) => {
+    if (!isClient || !toValue(enabled)) return;
+    const handlePointerDown = async (event: PointerEvent) => {
+      const target = event.target as HTMLElement | undefined;
+
+      if (!element?.value || !target) return;
+
+      if (isLayerExist(element.value, target)) {
+        isPointerInsideDOMTree.value = false;
+        return;
+      }
+
+      if (event.target && !isPointerInsideDOMTree.value) {
+        const eventDetail = { originalEvent: event };
+
+        function handleAndDispatchPointerDownOutsideEvent() {
+          handleAndDispatchCustomEvent(
+            POINTER_DOWN_OUTSIDE,
+            onPointerDownOutside,
+            eventDetail,
+          );
+        }
+
+        /**
+         * On touch devices, we need to wait for a click event because browsers implement
+         * a ~350ms delay between the time the user stops touching the display and when the
+         * browser executes events. We need to ensure we don't reactivate pointer-events within
+         * this timeframe otherwise the browser may execute events that should have been prevented.
+         *
+         * Additionally, this also lets us deal automatically with cancellations when a click event
+         * isn't raised because the page was considered scrolled/drag-scrolled, long-pressed, etc.
+         *
+         * This is why we also continuously remove the previous listener, because we cannot be
+         * certain that it was raised, and therefore cleaned-up.
+         */
+        if (event.pointerType === "touch") {
+          ownerDocument.removeEventListener("click", handleClickRef.value);
+          handleClickRef.value = handleAndDispatchPointerDownOutsideEvent;
+          ownerDocument.addEventListener("click", handleClickRef.value, {
+            once: true,
+          });
+        } else {
+          handleAndDispatchPointerDownOutsideEvent();
+        }
+      } else {
+        // We need to remove the event listener in case the outside click has been canceled.
+        // See: https://github.com/radix-ui/primitives/issues/2171
+        ownerDocument.removeEventListener("click", handleClickRef.value);
+      }
+      isPointerInsideDOMTree.value = false;
+    };
+    /**
+     * if this hook executes in a component that mounts via a `pointerdown` event, the event
+     * would bubble up to the document and trigger a `pointerDownOutside` event. We avoid
+     * this by delaying the event listener registration on the document.
+     * This is how the DOM works, ie:
+     * ```
+     * button.addEventListener('pointerdown', () => {
+     *   console.log('I will log');
+     *   document.addEventListener('pointerdown', () => {
+     *     console.log('I will also log');
+     *   })
+     * });
+     */
+    const timerId = window.setTimeout(() => {
+      ownerDocument.addEventListener("pointerdown", handlePointerDown);
+    }, 0);
+
+    cleanupFn(() => {
+      window.clearTimeout(timerId);
+      ownerDocument.removeEventListener("pointerdown", handlePointerDown);
+      ownerDocument.removeEventListener("click", handleClickRef.value);
+    });
+  });
+
+  return {
+    onPointerDownCapture: () => {
+      if (!toValue(enabled)) return;
+      isPointerInsideDOMTree.value = true;
+    },
+  };
+}
+
+/**
+ * Listens for when focus happens outside a DOM subtree.
+ * Returns props to pass to the root (node) of the subtree we want to check.
+ */
+export function useFocusOutside(
+  onFocusOutside?: (event: FocusOutsideEvent) => void,
+  element?: Ref<HTMLElement | undefined>,
+  enabled: MaybeRefOrGetter<boolean> = true,
+) {
+  const ownerDocument: Document =
+    element?.value?.ownerDocument ?? globalThis?.document;
+
+  const isFocusInsideDOMTree = ref(false);
+  watchEffect((cleanupFn) => {
+    if (!isClient || !toValue(enabled)) return;
+    const handleFocus = async (event: FocusEvent) => {
+      if (!element?.value) return;
+
+      await nextTick();
+      await nextTick();
+      const target = event.target as HTMLElement | undefined;
+      if (!element.value || !target || isLayerExist(element.value, target))
+        return;
+
+      if (event.target && !isFocusInsideDOMTree.value) {
+        const eventDetail = { originalEvent: event };
+        handleAndDispatchCustomEvent(
+          FOCUS_OUTSIDE,
+          onFocusOutside,
+          eventDetail,
+        );
+      }
+    };
+
+    ownerDocument.addEventListener("focusin", handleFocus);
+
+    cleanupFn(() => ownerDocument.removeEventListener("focusin", handleFocus));
+  });
+
+  return {
+    onFocusCapture: () => {
+      if (!toValue(enabled)) return;
+
+      isFocusInsideDOMTree.value = true;
+    },
+    onBlurCapture: () => {
+      if (!toValue(enabled)) return;
+
+      isFocusInsideDOMTree.value = false;
+    },
+  };
+}
+
+export function dispatchUpdate() {
+  const event = new CustomEvent(CONTEXT_UPDATE);
+  document.dispatchEvent(event);
+}

package/src/components/FocusScope/FocusScope.vue

@@ -0,0 +1,220 @@
+<script lang="ts">
+import type { PrimitiveProps } from "../Primitive";
+import { getActiveElement, useForwardExpose } from "../../shared";
+
+export type FocusScopeEmits = {
+  /**
+   * Event handler called when auto-focusing on mount.
+   * Can be prevented.
+   */
+  mountAutoFocus: [event: Event];
+
+  /**
+   * Event handler called when auto-focusing on unmount.
+   * Can be prevented.
+   */
+  unmountAutoFocus: [event: Event];
+};
+
+export interface FocusScopeProps extends PrimitiveProps {
+  /**
+   * When `true`, tabbing from last item will focus first tabbable
+   * and shift+tab from first item will focus last tababble.
+   * @defaultValue false
+   */
+  loop?: boolean;
+
+  /**
+   * When `true`, focus cannot escape the focus scope via keyboard,
+   * pointer, or a programmatic focus.
+   * @defaultValue false
+   */
+  trapped?: boolean;
+}
+</script>
+
+<script setup lang="ts">
+import { isClient } from "@vueuse/shared";
+import { nextTick, reactive, ref, watchEffect } from "vue";
+import { Primitive } from "../Primitive";
+import { createFocusScopesStack, removeLinks } from "./stack";
+import {
+  AUTOFOCUS_ON_MOUNT,
+  AUTOFOCUS_ON_UNMOUNT,
+  EVENT_OPTIONS,
+  focus,
+  focusFirst,
+  getTabbableCandidates,
+  getTabbableEdges,
+} from "./utils";
+
+const props = withDefaults(defineProps<FocusScopeProps>(), {
+  loop: false,
+  trapped: false,
+});
+const emits = defineEmits<FocusScopeEmits>();
+
+const { currentRef, currentElement } = useForwardExpose();
+const lastFocusedElementRef = ref<HTMLElement | null>(null);
+const focusScopesStack = createFocusScopesStack();
+
+const focusScope = reactive({
+  paused: false,
+  pause() {
+    this.paused = true;
+  },
+  resume() {
+    this.paused = false;
+  },
+});
+
+watchEffect((cleanupFn) => {
+  if (!isClient) return;
+  const container = currentElement.value;
+  if (!props.trapped) return;
+
+  function handleFocusIn(event: FocusEvent) {
+    if (focusScope.paused || !container) return;
+    const target = event.target as HTMLElement | null;
+    if (container.contains(target)) lastFocusedElementRef.value = target;
+    else focus(lastFocusedElementRef.value, { select: true });
+  }
+
+  function handleFocusOut(event: FocusEvent) {
+    if (focusScope.paused || !container) return;
+    const relatedTarget = event.relatedTarget as HTMLElement | null;
+
+    // A `focusout` event with a `null` `relatedTarget` will happen in at least two cases:
+    //
+    // 1. When the user switches app/tabs/windows/the browser itself loses focus.
+    // 2. In Google Chrome, when the focused element is removed from the DOM.
+    //
+    // We let the browser do its thing here because:
+    //
+    // 1. The browser already keeps a memory of what's focused for when the page gets refocused.
+    // 2. In Google Chrome, if we try to focus the deleted focused element (as per below), it
+    //    throws the CPU to 100%, so we avoid doing anything for this reason here too.
+    if (relatedTarget === null) return;
+
+    // If the focus has moved to an actual legitimate element (`relatedTarget !== null`)
+    // that is outside the container, we move focus to the last valid focused element inside.
+    if (!container.contains(relatedTarget))
+      focus(lastFocusedElementRef.value, { select: true });
+  }
+
+  // When the focused element gets removed from the DOM, browsers move focus
+  // back to the document.body. In this case, we move focus to the container
+  // to keep focus trapped correctly.
+  // -- related: https://github.com/unovue/reka-ui/issues/518
+  // Reka UI tentative solution:
+  // instead of leaning on document.activeElement, we use lastFocusedElementRef.value to check
+  // if the element still exist inside the container,
+  // if not then we focus to the container
+  function handleMutations(mutations: MutationRecord[]) {
+    const isLastFocusedElementExist = container.contains(
+      lastFocusedElementRef.value,
+    );
+    if (!isLastFocusedElementExist) focus(container);
+  }
+
+  document.addEventListener("focusin", handleFocusIn);
+  document.addEventListener("focusout", handleFocusOut);
+  const mutationObserver = new MutationObserver(handleMutations);
+  if (container)
+    mutationObserver.observe(container, { childList: true, subtree: true });
+
+  cleanupFn(() => {
+    document.removeEventListener("focusin", handleFocusIn);
+    document.removeEventListener("focusout", handleFocusOut);
+    mutationObserver.disconnect();
+  });
+});
+
+watchEffect(async (cleanupFn) => {
+  const container = currentElement.value;
+
+  await nextTick();
+  if (!container) return;
+  focusScopesStack.add(focusScope);
+  const previouslyFocusedElement = getActiveElement() as HTMLElement | null;
+  const hasFocusedCandidate = container.contains(previouslyFocusedElement);
+
+  if (!hasFocusedCandidate) {
+    const mountEvent = new CustomEvent(AUTOFOCUS_ON_MOUNT, EVENT_OPTIONS);
+    container.addEventListener(AUTOFOCUS_ON_MOUNT, (ev: Event) =>
+      emits("mountAutoFocus", ev),
+    );
+    container.dispatchEvent(mountEvent);
+
+    if (!mountEvent.defaultPrevented) {
+      focusFirst(removeLinks(getTabbableCandidates(container)), {
+        select: true,
+      });
+      if (getActiveElement() === previouslyFocusedElement) focus(container);
+    }
+  }
+
+  cleanupFn(() => {
+    container.removeEventListener(AUTOFOCUS_ON_MOUNT, (ev: Event) =>
+      emits("mountAutoFocus", ev),
+    );
+
+    const unmountEvent = new CustomEvent(AUTOFOCUS_ON_UNMOUNT, EVENT_OPTIONS);
+    const unmountEventHandler = (ev: Event) => {
+      emits("unmountAutoFocus", ev);
+    };
+    container.addEventListener(AUTOFOCUS_ON_UNMOUNT, unmountEventHandler);
+    container.dispatchEvent(unmountEvent);
+
+    setTimeout(() => {
+      if (!unmountEvent.defaultPrevented)
+        focus(previouslyFocusedElement ?? document.body, { select: true });
+
+      // we need to remove the listener after we `dispatchEvent`
+      container.removeEventListener(AUTOFOCUS_ON_UNMOUNT, unmountEventHandler);
+
+      focusScopesStack.remove(focusScope);
+    }, 0);
+  });
+});
+
+function handleKeyDown(event: KeyboardEvent) {
+  if (!props.loop && !props.trapped) return;
+  if (focusScope.paused) return;
+
+  const isTabKey =
+    event.key === "Tab" && !event.altKey && !event.ctrlKey && !event.metaKey;
+  const focusedElement = getActiveElement() as HTMLElement | null;
+
+  if (isTabKey && focusedElement) {
+    const container = event.currentTarget as HTMLElement;
+    const [first, last] = getTabbableEdges(container);
+    const hasTabbableElementsInside = first && last;
+
+    // we can only wrap focus if we have tabbable edges
+    if (!hasTabbableElementsInside) {
+      if (focusedElement === container) event.preventDefault();
+    } else {
+      if (!event.shiftKey && focusedElement === last) {
+        event.preventDefault();
+        if (props.loop) focus(first, { select: true });
+      } else if (event.shiftKey && focusedElement === first) {
+        event.preventDefault();
+        if (props.loop) focus(last, { select: true });
+      }
+    }
+  }
+}
+</script>
+
+<template>
+  <Primitive
+    ref="currentRef"
+    tabindex="-1"
+    :as-child="asChild"
+    :as="as"
+    @keydown="handleKeyDown"
+  >
+    <slot />
+  </Primitive>
+</template>

package/src/components/FocusScope/index.ts

@@ -0,0 +1,5 @@
+export {
+  default as FocusScope,
+  type FocusScopeEmits,
+  type FocusScopeProps,
+} from './FocusScope.vue'

package/src/components/FocusScope/stack.ts

@@ -0,0 +1,49 @@
+import { createGlobalState } from '@vueuse/core'
+import { ref } from 'vue'
+
+interface FocusScopeAPI {
+  paused: boolean
+  pause: () => void
+  resume: () => void
+}
+
+const useFocusStackState = createGlobalState(() => {
+  const stack = ref<FocusScopeAPI[]>([])
+  return stack
+})
+
+export function createFocusScopesStack() {
+  /** A stack of focus scopes, with the active one at the top */
+  const stack = useFocusStackState()
+
+  return {
+    add(focusScope: FocusScopeAPI) {
+      // pause the currently active focus scope (at the top of the stack)
+      const activeFocusScope = stack.value[0]
+      if (focusScope !== activeFocusScope)
+        activeFocusScope?.pause()
+
+      // remove in case it already exists (because we'll re-add it at the top of the stack)
+      stack.value = arrayRemove(stack.value, focusScope)
+      stack.value.unshift(focusScope)
+    },
+
+    remove(focusScope: FocusScopeAPI) {
+      stack.value = arrayRemove(stack.value, focusScope)
+      stack.value[0]?.resume()
+    },
+  }
+}
+
+export function arrayRemove<T>(array: T[], item: T) {
+  const updatedArray = [...array]
+  const index = updatedArray.indexOf(item)
+  if (index !== -1)
+    updatedArray.splice(index, 1)
+
+  return updatedArray
+}
+
+export function removeLinks(items: HTMLElement[]) {
+  return items.filter(item => item.tagName !== 'A')
+}