pxd 0.1.2 → 0.1.3

package/dist/composables/_internal/use-overlay-manager.js

@@ -1,21 +1,64 @@
-import { onScopeDispose } from "vue";
-import { cachedOff, cachedOn } from "../../utils/event.js";
+import { onScopeDispose, watch } from "vue";
+import {
+  cachedOff,
+  cachedOn,
+  isCompositionKeydown,
+  preventDefaultScroll
+} from "../../utils/event.js";
 import { toValue } from "../../utils/helper.js";
+const touchMoveOptions = { passive: false };
 let isKeydownListening = false;
+let rootInteractionLocks = 0;
+let addedPointerEventsNone = false;
 const overlayStack = [];
+function getEntryZIndex(entry) {
+  const value = Number(toValue(entry.zIndex));
+  return Number.isFinite(value) ? value : 0;
+}
 function getTopOverlay() {
-  return overlayStack.at(-1);
+  let top;
+  for (const entry of overlayStack) {
+    if (!top || getEntryZIndex(entry) >= getEntryZIndex(top)) {
+      top = entry;
+    }
+  }
+  return top;
+}
+function getOverlaysFromTop() {
+  return overlayStack.map((entry, index) => ({ entry, index })).sort((a, b) => getEntryZIndex(b.entry) - getEntryZIndex(a.entry) || b.index - a.index).map(({ entry }) => entry);
+}
+function lockRootInteraction() {
+  if (rootInteractionLocks++) {
+    return;
+  }
+  const rootEl = document.documentElement;
+  addedPointerEventsNone = !rootEl.classList.contains("pointer-events-none");
+  rootEl.classList.add("pointer-events-none");
+  cachedOn(document, "touchmove", preventDefaultScroll, touchMoveOptions);
+}
+function unlockRootInteraction() {
+  if (--rootInteractionLocks > 0) {
+    return;
+  }
+  cachedOff(document, "touchmove", preventDefaultScroll, touchMoveOptions);
+  if (addedPointerEventsNone) {
+    document.documentElement.classList.remove("pointer-events-none");
+    addedPointerEventsNone = false;
+  }
 }
 function onEscapeKeydown(ev) {
-  const entry = getTopOverlay();
-  if (!entry) {
+  if (!overlayStack.length || ev.defaultPrevented || ev.repeat || isCompositionKeydown(ev)) {
     return;
   }
   const { ctrlKey, metaKey, altKey, shiftKey, key } = ev;
   if (ctrlKey || metaKey || altKey || shiftKey || key !== "Escape") {
     return;
   }
-  entry?.onPressEscape?.(ev);
+  for (const entry of getOverlaysFromTop()) {
+    if (entry.onPressEscape?.(ev) !== false) {
+      return;
+    }
+  }
 }
 function ensureKeydownListener() {
   if (isKeydownListening) {
@@ -32,7 +75,7 @@ function removeKeydownListener() {
   isKeydownListening = false;
 }
 export function useOverlayManager(options) {
-  const { enabled, lockScrollOnVisible, lockScroll, unlockScroll, onPressEscape } = options;
+  const { enabled, lockScrollOnVisible, lockScroll, unlockScroll, onPressEscape, zIndex } = options;
   let isLockedScroll = false;
   const overlayId = Symbol("pxd-overlay-id");
   function isTopOverlay(entry) {
@@ -46,6 +89,7 @@ export function useOverlayManager(options) {
     const shouldLockScroll = toValue(lockScrollOnVisible);
     if (shouldLockScroll && !isLockedScroll) {
       lockScroll();
+      lockRootInteraction();
       isLockedScroll = true;
     }
     const idx = overlayStack.findIndex((item) => item.id === overlayId);
@@ -54,7 +98,8 @@ export function useOverlayManager(options) {
     }
     overlayStack.push({
       id: overlayId,
-      onPressEscape
+      onPressEscape,
+      zIndex
     });
     ensureKeydownListener();
   }
@@ -65,10 +110,24 @@ export function useOverlayManager(options) {
     }
     if (isLockedScroll) {
       unlockScroll();
+      unlockRootInteraction();
       isLockedScroll = false;
     }
     removeKeydownListener();
   }
+  watch(
+    () => toValue(enabled),
+    (isEnabled, wasEnabled) => {
+      if (isEnabled === wasEnabled) {
+        return;
+      }
+      if (isEnabled) {
+        registerOverlay();
+        return;
+      }
+      unregisterOverlay();
+    }
+  );
   onScopeDispose(() => {
     unregisterOverlay();
   });

package/dist/composables/_internal/use-swipe-gesture.d.ts

@@ -1,4 +1,4 @@
-import type { MaybeElementRef } from '../../types/shared';
+import type { MaybeElementRef } from '../../types/shared/utils';
 import type { MaybeRefOrGetter } from 'vue';
 export type SwipeDirection = 'left' | 'right' | 'top' | 'bottom';
 export interface SwipePressState {

package/dist/composables/_internal/use-tour-target.d.ts

@@ -0,0 +1,29 @@
+import type { TourStep } from '../../components/tour/types';
+import type { MaybeRefOrGetter } from 'vue';
+export interface TourRect {
+    top: number;
+    left: number;
+    width: number;
+    height: number;
+}
+export interface UseTourTargetOptions {
+    step: MaybeRefOrGetter<TourStep | undefined>;
+    motionReduced: MaybeRefOrGetter<boolean>;
+    onMissingTarget: (index: number) => void;
+    onError: (error: unknown, index: number) => void;
+    onResolved: () => void;
+}
+/**
+ * Resolves the rect of the current step target and keeps it in sync with scroll,
+ * resize, target size and target position changes. `beforeEnter` runs before the
+ * target is resolved, and the scroll into view happens once the element is known.
+ */
+export declare function useTourTarget(options: UseTourTargetOptions): {
+    rect: import("vue").ShallowRef<TourRect, TourRect>;
+    targetRadius: import("vue").ShallowRef<string, string>;
+    hasTarget: import("vue").ShallowRef<boolean, boolean>;
+    isCentered: import("vue").ComputedRef<boolean>;
+    isLoading: import("vue").ShallowRef<boolean, boolean>;
+    goTo: (index: number) => Promise<void>;
+    cancel: () => void;
+};

package/dist/composables/_internal/use-tour-target.js

@@ -0,0 +1,201 @@
+import { computed, onBeforeUnmount, shallowRef } from "vue";
+import { getElement, getStyle, resolveScrollBehavior } from "../../utils/dom.js";
+import { caf, cachedOff, cachedOn, raf, scheduleByRaf } from "../../utils/event.js";
+import { toValue } from "../../utils/helper.js";
+import { isServer } from "../../utils/is.js";
+const ZERO_RECT = { top: 0, left: 0, width: 0, height: 0 };
+function isSameRect(a, b) {
+  return a.top === b.top && a.left === b.left && a.width === b.width && a.height === b.height;
+}
+export function useTourTarget(options) {
+  const { step, motionReduced, onMissingTarget, onError, onResolved } = options;
+  const rect = shallowRef(ZERO_RECT);
+  const targetRadius = shallowRef("");
+  const hasTarget = shallowRef(false);
+  const isLoading = shallowRef(false);
+  let targetEl = null;
+  let token = 0;
+  let resizeObserver = null;
+  let isListening = false;
+  let positionFrame = 0;
+  const scheduleUpdate = scheduleByRaf(measure);
+  const isCentered = computed(() => !hasTarget.value);
+  function centeredRect() {
+    if (isServer()) {
+      return ZERO_RECT;
+    }
+    return {
+      top: window.innerHeight / 2,
+      left: window.innerWidth / 2,
+      width: 0,
+      height: 0
+    };
+  }
+  function measure() {
+    if (!targetEl) {
+      const nextRect2 = centeredRect();
+      if (!isSameRect(rect.value, nextRect2)) {
+        rect.value = nextRect2;
+      }
+      return;
+    }
+    const { top, left, width, height } = targetEl.getBoundingClientRect();
+    const nextRect = { top, left, width, height };
+    if (!isSameRect(rect.value, nextRect)) {
+      rect.value = nextRect;
+    }
+    const radius = getStyle(targetEl).borderRadius;
+    if (radius !== targetRadius.value) {
+      targetRadius.value = radius;
+    }
+  }
+  function observeTarget(el) {
+    resizeObserver?.disconnect();
+    resizeObserver = null;
+    if (!el || typeof ResizeObserver === "undefined") {
+      return;
+    }
+    resizeObserver = new ResizeObserver(scheduleUpdate);
+    resizeObserver.observe(el);
+  }
+  function startPositionTracking() {
+    if (isServer() || positionFrame) {
+      return;
+    }
+    positionFrame = raf(trackPosition);
+  }
+  function stopPositionTracking() {
+    if (!positionFrame) {
+      return;
+    }
+    caf(positionFrame);
+    positionFrame = 0;
+  }
+  function trackPosition() {
+    positionFrame = 0;
+    if (!targetEl) {
+      return;
+    }
+    const { top, left, width, height } = targetEl.getBoundingClientRect();
+    const nextRect = { top, left, width, height };
+    if (!isSameRect(rect.value, nextRect)) {
+      rect.value = nextRect;
+      targetRadius.value = getStyle(targetEl).borderRadius;
+    }
+    positionFrame = raf(trackPosition);
+  }
+  function startListening() {
+    if (isListening || isServer()) {
+      return;
+    }
+    cachedOn(window, "resize", scheduleUpdate);
+    cachedOn(window, "scroll", scheduleUpdate, { capture: true });
+    isListening = true;
+  }
+  function stopListening() {
+    if (!isListening || isServer()) {
+      return;
+    }
+    cachedOff(window, "resize", scheduleUpdate);
+    cachedOff(window, "scroll", scheduleUpdate, { capture: true });
+    isListening = false;
+  }
+  function detach() {
+    stopListening();
+    stopPositionTracking();
+    scheduleUpdate.cancel();
+    observeTarget(null);
+    targetEl = null;
+    targetRadius.value = "";
+    hasTarget.value = false;
+    rect.value = ZERO_RECT;
+  }
+  function center() {
+    observeTarget(null);
+    stopPositionTracking();
+    targetEl = null;
+    targetRadius.value = "";
+    hasTarget.value = false;
+    rect.value = centeredRect();
+    startListening();
+  }
+  function attachTarget(el, currentToken) {
+    if (currentToken !== token) {
+      return;
+    }
+    if (!el) {
+      center();
+      onResolved();
+      return;
+    }
+    targetEl = el;
+    hasTarget.value = true;
+    measure();
+    observeTarget(el);
+    startListening();
+    startPositionTracking();
+    onResolved();
+  }
+  async function goTo(index) {
+    const currentToken = ++token;
+    const currentStep = toValue(step);
+    isLoading.value = true;
+    if (currentStep?.beforeEnter) {
+      try {
+        await currentStep.beforeEnter({ index, step: currentStep });
+      } catch (error) {
+        if (currentToken !== token) {
+          return;
+        }
+        isLoading.value = false;
+        onError(error, index);
+        return;
+      }
+    }
+    if (currentToken !== token) {
+      return;
+    }
+    isLoading.value = false;
+    if (!currentStep?.target) {
+      attachTarget(null, currentToken);
+      return;
+    }
+    try {
+      const el = getElement(currentStep.target);
+      if (!el) {
+        onMissingTarget(index);
+        return;
+      }
+      attachTarget(el, currentToken);
+      if (currentToken !== token) {
+        return;
+      }
+      el.scrollIntoView({
+        block: "center",
+        behavior: resolveScrollBehavior("auto", motionReduced)
+      });
+      scheduleUpdate();
+    } catch (error) {
+      if (currentToken !== token) {
+        return;
+      }
+      isLoading.value = false;
+      onError(error, index);
+    }
+  }
+  function cancel() {
+    token++;
+    isLoading.value = false;
+    detach();
+  }
+  onBeforeUnmount(cancel);
+  return {
+    rect,
+    targetRadius,
+    hasTarget,
+    isCentered,
+    isLoading,
+    goTo,
+    cancel
+  };
+}

package/dist/composables/_internal/use-tree.d.ts

@@ -0,0 +1,103 @@
+import type { TreeDropPosition, TreeDropTarget, TreeFilterFn, TreeFlatNode, TreeMoveDetail, TreeModelValue, TreeOptions, TreeRemoteFilterFn, TreeSelectableFn } from '../../components/tree/types';
+import type { ComponentValue } from '../../types/shared/props';
+import type { MaybeElementRef } from '../../types/shared/utils';
+import type { ComputedRef, MaybeRefOrGetter, ShallowRef } from 'vue';
+export interface TreeNodeMeta {
+    node: TreeOptions[number];
+    children: TreeNodeMeta[];
+    parentValue?: ComponentValue;
+    depth: number;
+    /** Exclusive index in `list` right after this subtree. */
+    end: number;
+}
+export interface TreeIndex {
+    list: TreeNodeMeta[];
+    byValue: Map<ComponentValue, TreeNodeMeta>;
+}
+export declare function createTreeIndex(data: TreeOptions, childrenField: string): TreeIndex;
+export declare function useTreeIndex(data: MaybeRefOrGetter<TreeOptions>, childrenField: MaybeRefOrGetter<string>): ComputedRef<TreeIndex>;
+/** Children in `data` win over a cached request, and an untouched node keeps its identity. */
+export declare function graftLoadedChildren(data: TreeOptions, loaded: Map<ComponentValue, TreeOptions>, childrenField: string): TreeOptions;
+export interface TreeMatched {
+    /** Every hit plus its ancestors: ancestor-closed, so the row walk can prune whole subtrees. */
+    visible: ReadonlySet<ComponentValue>;
+    /** The hits alone. */
+    exact: ReadonlySet<ComponentValue>;
+}
+export declare function useTreeMatched(index: MaybeRefOrGetter<TreeIndex>, query: MaybeRefOrGetter<string>, filter: MaybeRefOrGetter<TreeFilterFn | undefined>): ComputedRef<TreeMatched>;
+export interface UseTreeSearchOptions {
+    query: MaybeRefOrGetter<string>;
+    remoteFilter?: MaybeRefOrGetter<TreeRemoteFilterFn | undefined>;
+}
+export interface UseTreeSearchReturn {
+    /** The forest the query last settled on, absent before the first answer. */
+    matches: ShallowRef<TreeOptions | undefined>;
+    remote: ComputedRef<boolean>;
+    /** Whether a request is in flight, the debounce window included. */
+    pending: ShallowRef<boolean>;
+    active: ComputedRef<boolean>;
+}
+export declare function useTreeSearch(options: UseTreeSearchOptions): UseTreeSearchReturn;
+export interface UseTreeRowsOptions {
+    query: MaybeRefOrGetter<string>;
+    expanded: MaybeRefOrGetter<ReadonlySet<ComponentValue>>;
+    matched: MaybeRefOrGetter<ReadonlySet<ComponentValue>>;
+    /** The hits without their ancestors; only read when `matchesOnly` is on. */
+    exactMatched?: MaybeRefOrGetter<ReadonlySet<ComponentValue> | undefined>;
+    matchesOnly?: MaybeRefOrGetter<boolean | undefined>;
+    canLoad?: MaybeRefOrGetter<((value: ComponentValue) => boolean) | undefined>;
+}
+/**
+ * Selection state is deliberately absent: it changes on every click, and putting it here would
+ * rebuild all N rows for a change that touches two of them. Read the sets at render time instead.
+ */
+export declare function useTreeRows(index: MaybeRefOrGetter<TreeIndex>, options: UseTreeRowsOptions): ComputedRef<TreeFlatNode[]>;
+export interface UseTreeSelectionOptions {
+    index: MaybeRefOrGetter<TreeIndex>;
+    modelValue: MaybeRefOrGetter<TreeModelValue | undefined>;
+    multiple: MaybeRefOrGetter<boolean>;
+    checkStrictly?: MaybeRefOrGetter<boolean | undefined>;
+    selectable?: MaybeRefOrGetter<TreeSelectableFn | undefined>;
+}
+export interface TreeToggleResult {
+    value: TreeModelValue;
+    halfCheckedValues: ComponentValue[];
+}
+export interface UseTreeSelectionReturn {
+    checked: ComputedRef<Set<ComponentValue>>;
+    indeterminate: ComputedRef<Set<ComponentValue>>;
+    toggle: (value: ComponentValue) => TreeToggleResult;
+    /** The span between the anchor and `value`, both ends included; toggles without an anchor. */
+    extend: (value: ComponentValue) => TreeToggleResult;
+    isSelectable: (value: ComponentValue) => boolean;
+}
+export declare function useTreeSelection(options: UseTreeSelectionOptions): UseTreeSelectionReturn;
+/** Walks up instead of scanning `index.list`: the hit test runs this on every pointer move. */
+export declare function isTreeDescendant(index: TreeIndex, ancestorValue: ComponentValue, value: ComponentValue): boolean;
+export interface TreeMoveResult {
+    data: TreeOptions;
+    detail: TreeMoveDetail;
+}
+/**
+ * The node is detached before the target is looked up, which rejects the whole family of invalid
+ * drops for free: it and its descendant are no longer in the tree to be found.
+ */
+export declare function moveTreeNode(data: TreeOptions, childrenField: string, value: ComponentValue, target: TreeDropTarget): TreeMoveResult | undefined;
+export interface UseTreeDragOptions {
+    container: MaybeElementRef<HTMLElement>;
+    rows: MaybeRefOrGetter<TreeFlatNode[]>;
+    enabled: MaybeRefOrGetter<boolean>;
+    dropInsideLeaf: MaybeRefOrGetter<boolean>;
+    /** Rejects a position the tree will refuse, so no indicator is ever painted for it. */
+    canDrop: (value: ComponentValue, targetValue: ComponentValue, position: TreeDropPosition) => boolean;
+    onExpand: (value: ComponentValue) => void;
+    onCommit: (value: ComponentValue, target: TreeDropTarget) => void;
+}
+export declare function useTreeDrag(options: UseTreeDragOptions): {
+    value: ShallowRef<ComponentValue | undefined, ComponentValue | undefined>;
+    target: ShallowRef<TreeDropTarget | undefined, TreeDropTarget | undefined>;
+    x: ShallowRef<number, number>;
+    y: ShallowRef<number, number>;
+    onPointerDown: (nodeValue: ComponentValue, event: PointerEvent) => void;
+    didDrag: () => boolean;
+};