pxd 0.0.64 → 0.1.2

package/dist/composables/use-media-query.js

@@ -2,9 +2,6 @@ import { customRef, onScopeDispose } from "vue";
 import { cachedOn } from "../utils/event.js";
 import { isServer } from "../utils/is.js";
 export const PRESET_MEDIA_QUERIES = {
-  MOTION_NO_PREFERENCE: "(prefers-reduced-motion: no-preference)",
-  MOTION_NO_REDUCE: "(prefers-reduced-motion: no-reduce)",
-  MOTION_REDUCE: "(prefers-reduced-motion: reduce)",
   COLOR_SCHEME_DARK: "(prefers-color-scheme: dark)",
   COLOR_SCHEME_LIGHT: "(prefers-color-scheme: light)",
   COLOR_SCHEME_NO_PREFERENCE: "(prefers-color-scheme: no-preference)",
@@ -23,6 +20,7 @@ const CACHED_QUERIES = {};
 export function useMediaQuery(condition, callback) {
   let initialized = false;
   let mediaQuery;
+  let unbindChange;
   const matches = customRef((track, trigger) => ({
     get() {
       track();
@@ -30,24 +28,24 @@ export function useMediaQuery(condition, callback) {
         return false;
       }
       if (!initialized) {
-        mediaQuery = CACHED_QUERIES[condition];
-        if (mediaQuery) {
-          mediaQuery.count++;
+        let cached = CACHED_QUERIES[condition];
+        if (cached) {
+          cached.count++;
         } else {
-          const query = window.matchMedia(condition);
-          mediaQuery = CACHED_QUERIES[condition] = {
+          cached = CACHED_QUERIES[condition] = {
             count: 1,
-            query
+            query: window.matchMedia(condition),
+            cleanups: []
           };
         }
+        const entry = cached;
         const handler = () => {
-          callback?.(mediaQuery.query);
+          callback?.(entry.query);
           trigger();
         };
-        const unbindEvent = cachedOn(mediaQuery.query, "change", handler, { passive: true });
-        if (!mediaQuery.cleanup) {
-          mediaQuery.cleanup = unbindEvent;
-        }
+        unbindChange = cachedOn(entry.query, "change", handler, { passive: true });
+        entry.cleanups.push(unbindChange);
+        mediaQuery = entry;
         initialized = true;
       }
       return mediaQuery?.query.matches ?? false;
@@ -60,11 +58,13 @@ export function useMediaQuery(condition, callback) {
     if (!mediaQuery) {
       return;
     }
-    if (mediaQuery.cleanup) {
-      mediaQuery.cleanup();
-    }
-    mediaQuery.count--;
-    if (mediaQuery.count <= 0) {
+    const entry = mediaQuery;
+    unbindChange?.();
+    unbindChange = void 0;
+    entry.count--;
+    if (entry.count <= 0) {
+      entry.cleanups.forEach((unbind) => unbind());
+      entry.cleanups = [];
       delete CACHED_QUERIES[condition];
     }
     mediaQuery = void 0;

package/dist/composables/use-mutation-observer.d.ts

@@ -0,0 +1,6 @@
+import type { ObserverResults, TargetRef } from '../utils/observer.js';
+import type { MaybeRefOrGetter } from 'vue';
+export declare const useMutationObserver: (target: TargetRef, callback: (items: Array<{
+    entry: MutationRecord;
+    target: HTMLElement;
+}>) => void, options?: MaybeRefOrGetter<MutationObserverInit>) => ObserverResults<MutationObserver>;

package/dist/composables/use-mutation-observer.js

@@ -0,0 +1,42 @@
+import { isServer } from "../utils/is.js";
+import { createObserver } from "../utils/observer.js";
+function normalize(options) {
+  if (!options) {
+    return "";
+  }
+  const filter = options.attributeFilter ? [...options.attributeFilter].sort().join(",") : "";
+  return [
+    options.attributes ?? false,
+    filter,
+    options.attributeOldValue ?? false,
+    options.characterData ?? false,
+    options.characterDataOldValue ?? false,
+    options.childList ?? false,
+    options.subtree ?? false
+  ].join("|");
+}
+const spec = {
+  normalize,
+  create(callback) {
+    if (isServer() || typeof globalThis.MutationObserver === "undefined") {
+      return void 0;
+    }
+    return new globalThis.MutationObserver(callback);
+  },
+  // `MutationObserver` has no `unobserve` in the DOM spec, so a removal has to replay the
+  // whole set. Growing it still only observes the newcomers.
+  sync(observer, prev, next, options) {
+    if (prev.some((el) => !next.includes(el))) {
+      observer.disconnect();
+      next.forEach((el) => observer.observe(el, options));
+      return;
+    }
+    next.filter((el) => !prev.includes(el)).forEach((el) => observer.observe(el, options));
+  },
+  // A `subtree` observer reports descendants, so the owning element has to be looked up.
+  resolveTarget(record, observed) {
+    return observed.find((el) => el === record.target || el.contains(record.target));
+  }
+};
+const observerWrapper = createObserver(spec);
+export const useMutationObserver = (target, callback, options) => observerWrapper(target, callback, options);

package/dist/composables/use-outside-click.d.ts

@@ -1,10 +1,12 @@
 import type { MaybeElementRef } from '../types/shared/utils';
-interface Options {
+interface Options<E extends Event = PointerEvent> {
     allowList?: MaybeElementRef<HTMLElement>[];
-    isEnabled?: (ev: PointerEvent) => boolean;
-    onTrigger?: (ev: PointerEvent) => void;
+    eventName?: string;
+    listenerOptions?: AddEventListenerOptions;
+    enabled?: (ev: E) => boolean;
+    onTrigger?: (ev: E) => void;
 }
-export declare function useOutsideClick(container: MaybeElementRef<HTMLElement>, options?: Options): {
+export declare function useOutsideClick<E extends Event = PointerEvent>(container: MaybeElementRef<HTMLElement>, options?: Options<E>): {
     stop: () => void;
 };
 export {};

package/dist/composables/use-outside-click.js

@@ -1,10 +1,11 @@
 import { onScopeDispose, watch } from "vue";
 import { cachedOff, cachedOn } from "../utils/event.js";
-import { toValue } from "../utils/ref.js";
+import { toValue } from "../utils/helper.js";
+import { isServer } from "../utils/is.js";
 export function useOutsideClick(container, options = {}) {
   function onClick(ev) {
-    const { isEnabled } = options;
-    if (typeof isEnabled === "function" && !isEnabled(ev)) {
+    const { enabled } = options;
+    if (typeof enabled === "function" && !enabled(ev)) {
       return;
     }
     const { onTrigger, allowList = [container] } = options;
@@ -15,21 +16,28 @@ export function useOutsideClick(container, options = {}) {
     }
     onTrigger?.(ev);
   }
+  const event = options.eventName ?? "click";
+  const listenerOptions = options.listenerOptions;
+  const target = isServer() ? null : document;
+  function bind() {
+    cachedOn(target, event, onClick, listenerOptions);
+  }
+  function unbind() {
+    cachedOff(target, event, onClick, listenerOptions);
+  }
   const unwatch = watch(
     () => toValue(container),
-    (dom, _, onCleanup) => {
+    (dom) => {
+      unbind();
       if (dom) {
-        cachedOn(document, "click", onClick);
+        bind();
       }
-      onCleanup(() => {
-        cachedOff(document, "click", onClick);
-      });
     },
-    { immediate: true }
+    { immediate: true, flush: "post" }
   );
   function stop() {
     unwatch();
-    cachedOff(document, "click", onClick);
+    unbind();
   }
   onScopeDispose(() => {
     stop();

package/dist/composables/use-repeat-action.js

@@ -1,49 +1,60 @@
 import { onScopeDispose } from "vue";
 import { off, once } from "../utils/event.js";
-import { toValue } from "../utils/ref.js";
+import { toValue } from "../utils/helper.js";
 export function useRepeatAction(actionOrOptions) {
   const {
     action,
     disabled,
-    finalInterval = 1e3 / 16.6,
-    // 60fps
-    initialInterval = 680,
-    accelerationDuration = 1500
+    finalInterval = 30,
+    initialInterval = 500,
+    accelerationDuration = 1e3
   } = typeof actionOrOptions === "function" ? { action: actionOrOptions } : actionOrOptions;
+  let running = false;
   let timer = null;
-  let startTime = 0;
+  let elapsedTime = 0;
+  let nextInterval = initialInterval;
+  function intervalAt(elapsed) {
+    if (elapsed >= accelerationDuration) {
+      return finalInterval;
+    }
+    const progress = elapsed / accelerationDuration;
+    return initialInterval - (initialInterval - finalInterval) * progress;
+  }
   function step() {
+    if (!running || toValue(disabled)) {
+      stop();
+      return;
+    }
     action();
-    const elapsedTime = Date.now() - startTime;
-    let nextInterval;
-    if (elapsedTime >= accelerationDuration) {
-      nextInterval = finalInterval;
-    } else {
-      const progress = elapsedTime / accelerationDuration;
-      nextInterval = initialInterval - (initialInterval - finalInterval) * progress;
+    if (!running) {
+      return;
     }
+    elapsedTime += nextInterval;
+    nextInterval = intervalAt(elapsedTime);
     timer = setTimeout(step, nextInterval);
   }
   function stop() {
+    running = false;
     if (timer) {
       clearTimeout(timer);
       timer = null;
     }
+    off(document, "pointerup", stop);
+    off(document, "pointercancel", stop);
   }
   function start() {
-    if (timer || toValue(disabled)) {
+    if (running || toValue(disabled)) {
       return;
     }
-    startTime = Date.now();
+    running = true;
+    elapsedTime = 0;
+    nextInterval = initialInterval;
     action();
-    timer = setTimeout(step, initialInterval);
+    timer = setTimeout(step, nextInterval);
     once(document, "pointerup", stop);
     once(document, "pointercancel", stop);
   }
-  onScopeDispose(() => {
-    off(document, "pointerup", stop);
-    off(document, "pointercancel", stop);
-  });
+  onScopeDispose(stop);
   return {
     start,
     stop

package/dist/composables/use-resize-observer.d.ts

@@ -0,0 +1,6 @@
+import type { ObserverResults, TargetRef } from '../utils/observer.js';
+import type { MaybeRefOrGetter } from 'vue';
+export declare const useResizeObserver: (target: TargetRef, callback: (items: Array<{
+    entry: ResizeObserverEntry;
+    target: HTMLElement;
+}>) => void, options?: MaybeRefOrGetter<ResizeObserverOptions>) => ObserverResults<ResizeObserver>;

package/dist/composables/use-resize-observer.js

@@ -0,0 +1,22 @@
+import { isServer } from "../utils/is.js";
+import { createObserver } from "../utils/observer.js";
+function normalize(options) {
+  return options?.box ?? "";
+}
+const spec = {
+  normalize,
+  create(callback) {
+    if (isServer() || typeof globalThis.ResizeObserver === "undefined") {
+      return void 0;
+    }
+    return new globalThis.ResizeObserver(callback);
+  },
+  sync(observer, prev, next, options) {
+    prev.filter((el) => !next.includes(el)).forEach((el) => observer.unobserve(el));
+    next.filter((el) => !prev.includes(el)).forEach((el) => observer.observe(el, options));
+  },
+  resolveTarget: (entry) => entry.target,
+  pooled: true
+};
+const observerWrapper = createObserver(spec);
+export const useResizeObserver = (target, callback, options) => observerWrapper(target, callback, options);

package/dist/composables/use-scrollspy.d.ts

@@ -0,0 +1,15 @@
+import type { MaybeRefOrGetter, ShallowRef } from 'vue';
+export interface UseScrollspyOptions {
+    /** Scrollable container. @default window */
+    scrollTarget?: MaybeRefOrGetter<Window | HTMLElement | null>;
+    /** Pixels above the fold that count as passed; match a sticky header's height. @default 0 */
+    topOffset?: MaybeRefOrGetter<number>;
+}
+export interface UseScrollspyReturn {
+    activeIndex: ShallowRef<number>;
+    activeEl: ShallowRef<HTMLElement | null>;
+    /** Recompute from the current layout, e.g. after a route switch or async content. */
+    update: () => void;
+}
+/** `targets` must be in document order: the probe line is bisected against their offsets. */
+export declare function useScrollspy(targets: MaybeRefOrGetter<HTMLElement[]>, options?: UseScrollspyOptions): UseScrollspyReturn;

package/dist/composables/use-scrollspy.js

@@ -0,0 +1,98 @@
+import { computed, onMounted, onScopeDispose, shallowRef, watch } from "vue";
+import {
+  getScrollElement,
+  getScrollListener,
+  getScrollPosition,
+  isViewportScroll
+} from "../utils/dom.js";
+import { off, on, scheduleByRaf } from "../utils/event.js";
+import { toValue } from "../utils/helper.js";
+import { isServer } from "../utils/is.js";
+import { useResizeObserver } from "./use-resize-observer.js";
+const BOTTOM_TOLERANCE = 2;
+export function useScrollspy(targets, options = {}) {
+  const { scrollTarget } = options;
+  const topOffset = computed(() => toValue(options.topOffset ?? 0));
+  const activeIndex = shallowRef(-1);
+  const activeEl = shallowRef(null);
+  const targetItems = computed(() => toValue(targets));
+  function setActive(items, index) {
+    activeIndex.value = index;
+    activeEl.value = index >= 0 ? items[index] : null;
+  }
+  function locateProbe(items, origin) {
+    const probe = topOffset.value + BOTTOM_TOLERANCE;
+    let low = 0;
+    let high = items.length;
+    while (low < high) {
+      const mid = low + high >> 1;
+      if (items[mid].getBoundingClientRect().top - origin > probe) {
+        high = mid;
+      } else {
+        low = mid + 1;
+      }
+    }
+    return low - 1;
+  }
+  function isExhausted(scrollTop, scrollHeight, clientHeight) {
+    return scrollHeight - clientHeight > 1 && clientHeight + scrollTop >= scrollHeight - BOTTOM_TOLERANCE;
+  }
+  function update() {
+    const items = targetItems.value;
+    if (!items.length) {
+      setActive(items, -1);
+      return;
+    }
+    const metricsEl = getScrollElement(toValue(scrollTarget));
+    const { scrollTop, scrollHeight, clientHeight } = getScrollPosition(metricsEl);
+    if (isExhausted(scrollTop, scrollHeight, clientHeight)) {
+      setActive(items, items.length - 1);
+      return;
+    }
+    const origin = isViewportScroll(metricsEl) ? 0 : metricsEl.getBoundingClientRect().top;
+    setActive(items, Math.max(locateProbe(items, origin), 0));
+  }
+  if (!isServer()) {
+    let bindListeners = function() {
+      const listener = getScrollListener(toValue(scrollTarget));
+      if (listener === scrollListener) {
+        return;
+      }
+      off(scrollListener, "scroll", scheduleUpdate);
+      scrollListener = listener;
+      on(scrollListener, "scroll", scheduleUpdate, { passive: true });
+      const onWindow = listener === window ? window : null;
+      if (onWindow !== windowListener) {
+        off(windowListener, "resize", scheduleUpdate);
+        windowListener = onWindow;
+        on(windowListener, "resize", scheduleUpdate, { passive: true });
+      }
+      scheduleUpdate();
+    };
+    const scheduleUpdate = scheduleByRaf(update);
+    let scrollListener = null;
+    let windowListener = null;
+    const stopListener = watch(() => toValue(scrollTarget), bindListeners, { flush: "post" });
+    const { stop: stopResizeObserver } = useResizeObserver(
+      () => getScrollElement(toValue(scrollTarget)),
+      scheduleUpdate
+    );
+    const stopOffset = watch(topOffset, scheduleUpdate);
+    const stopTargets = watch(() => targetItems.value, scheduleUpdate);
+    onMounted(bindListeners);
+    onScopeDispose(() => {
+      scheduleUpdate.cancel();
+      off(scrollListener, "scroll", scheduleUpdate);
+      off(windowListener, "resize", scheduleUpdate);
+      stopListener();
+      stopResizeObserver();
+      stopTargets();
+      stopOffset();
+    });
+  }
+  return {
+    activeIndex,
+    activeEl,
+    update
+  };
+}

package/dist/composables/use-stick-to-bottom.d.ts

@@ -0,0 +1,32 @@
+import type { Nullable } from '../types/shared/utils';
+import type { MaybeRefOrGetter, ShallowRef } from 'vue';
+export interface UseStickToBottomOptions {
+    /**
+     * Pixel distance from the bottom considered "at bottom".
+     * @default 16
+     */
+    threshold?: MaybeRefOrGetter<number>;
+    /**
+     * Whether content updates should auto-scroll while at bottom.
+     * @default true
+     */
+    enabled?: MaybeRefOrGetter<boolean>;
+}
+export interface UseStickToBottomReturn {
+    isAtBottom: ShallowRef<boolean>;
+    scrollToBottom: () => void;
+    /** Scroll to bottom and re-enable auto-stick. */
+    forceStickToBottom: () => void;
+    /** Scroll to bottom only when currently at bottom and enabled. */
+    stickIfNeeded: () => void;
+    /** Re-measure whether the container is at the bottom. */
+    update: () => void;
+}
+/**
+ * Keep a scroll container pinned to the bottom while content changes,
+ * until the user scrolls away. Returning to the bottom re-enables follow.
+ *
+ * Auto-scroll is always instant to avoid smooth-animation races that
+ * break continuous follow in chat-style lists.
+ */
+export declare function useStickToBottom(container: MaybeRefOrGetter<Nullable<HTMLElement>>, content?: MaybeRefOrGetter<Nullable<HTMLElement>>, options?: UseStickToBottomOptions): UseStickToBottomReturn;

package/dist/composables/use-stick-to-bottom.js

@@ -0,0 +1,106 @@
+import { shallowRef, watch, onScopeDispose } from "vue";
+import { getElement } from "../utils/dom.js";
+import { cachedOff, cachedOn, throttleByRaf } from "../utils/event.js";
+import { toValue } from "../utils/helper.js";
+import { isServer } from "../utils/is.js";
+import { useMutationObserver } from "./use-mutation-observer.js";
+import { useResizeObserver } from "./use-resize-observer.js";
+export function useStickToBottom(container, content, options = {}) {
+  const { threshold = 16, enabled = true } = options;
+  const isAtBottom = shallowRef(true);
+  function getContainerEl() {
+    return getElement(toValue(container));
+  }
+  function getContentEl() {
+    return getElement(toValue(content)) ?? getContainerEl();
+  }
+  function getThreshold() {
+    return toValue(threshold);
+  }
+  function measureAtBottom(el) {
+    const distanceToBottom = el.scrollHeight - el.scrollTop - el.clientHeight;
+    return distanceToBottom <= getThreshold();
+  }
+  function update() {
+    const el = getContainerEl();
+    if (!el) {
+      return;
+    }
+    isAtBottom.value = measureAtBottom(el);
+  }
+  function scrollToBottom() {
+    const el = getContainerEl();
+    if (!el) {
+      return;
+    }
+    const top = Math.max(0, el.scrollHeight - el.clientHeight);
+    el.scrollTo({ top, behavior: "instant" });
+    isAtBottom.value = true;
+  }
+  function forceStickToBottom() {
+    isAtBottom.value = true;
+    scrollToBottom();
+  }
+  function stickIfNeeded() {
+    if (!toValue(enabled) || !isAtBottom.value) {
+      return;
+    }
+    scrollToBottom();
+  }
+  if (!isServer()) {
+    const scheduleUpdate = throttleByRaf(update);
+    const scheduleStick = throttleByRaf(stickIfNeeded);
+    useResizeObserver(
+      () => [getContentEl(), getContainerEl()],
+      () => {
+        scheduleStick();
+      }
+    );
+    useMutationObserver(
+      () => getContainerEl(),
+      () => {
+        scheduleStick();
+      },
+      {
+        childList: true,
+        subtree: true,
+        characterData: true
+      }
+    );
+    const stopWatch = watch(
+      () => getContainerEl(),
+      (el, oldEl) => {
+        if (oldEl) {
+          cachedOff(oldEl, "scroll", scheduleUpdate, { passive: true });
+          scheduleUpdate.cancel();
+          scheduleStick.cancel();
+        }
+        if (!el) {
+          return;
+        }
+        cachedOn(el, "scroll", scheduleUpdate, { passive: true });
+        update();
+      },
+      {
+        immediate: true,
+        flush: "post"
+      }
+    );
+    onScopeDispose(() => {
+      const el = getContainerEl();
+      if (el) {
+        cachedOff(el, "scroll", scheduleUpdate, { passive: true });
+      }
+      scheduleUpdate.cancel();
+      scheduleStick.cancel();
+      stopWatch();
+    });
+  }
+  return {
+    isAtBottom,
+    scrollToBottom,
+    forceStickToBottom,
+    stickIfNeeded,
+    update
+  };
+}

package/dist/composables/use-view-transition.d.ts

@@ -0,0 +1,20 @@
+import type { RouteLocationNormalized, Router } from 'vue-router';
+type ShouldTransition = (to: RouteLocationNormalized, from: RouteLocationNormalized) => boolean;
+interface Options {
+    shouldTransition?: ShouldTransition;
+}
+/**
+ * Wraps router navigations in the View Transitions API so route changes animate
+ * between the old and new view.
+ *
+ * Requires a browser with `document.startViewTransition` support and a router
+ * that supports the View Transitions lifecycle. Returns a disposer that removes
+ * the registered guards; it is a no-op when the API is unavailable. Calls for
+ * the same router share one registration, removed once every caller has disposed.
+ *
+ * @param router The vue-router instance to attach the guards to.
+ * @param options.shouldTransition Called with `(to, from)` before each navigation; `false` navigates without a transition. Each caller may pass one, and any of them declining skips the transition.
+ * @returns A function that removes the guards.
+ */
+export declare function useViewTransition(router: Router, options?: Options): () => void;
+export {};

package/dist/composables/use-view-transition.js

@@ -0,0 +1,79 @@
+import { nextTick } from "vue";
+import { NOOP } from "../utils/event.js";
+import { isServer } from "../utils/is.js";
+const registrations = /* @__PURE__ */ new WeakMap();
+function release(router, registration, shouldTransition) {
+  if (shouldTransition) {
+    const index = registration.shouldTransition.indexOf(shouldTransition);
+    if (index > -1) {
+      registration.shouldTransition.splice(index, 1);
+    }
+  }
+  if (--registration.count > 0) {
+    return;
+  }
+  registrations.delete(router);
+  registration.dispose();
+}
+export function useViewTransition(router, options = {}) {
+  if (isServer() || !document.startViewTransition) {
+    return NOOP;
+  }
+  const { shouldTransition } = options;
+  const registered = registrations.get(router);
+  if (registered) {
+    registered.count++;
+    if (shouldTransition) {
+      registered.shouldTransition.push(shouldTransition);
+    }
+    return () => release(router, registered, shouldTransition);
+  }
+  const registration = {
+    count: 1,
+    shouldTransition: shouldTransition ? [shouldTransition] : [],
+    dispose: NOOP
+  };
+  registrations.set(router, registration);
+  const startViewTransition = document.startViewTransition.bind(document);
+  let settle;
+  const stopBeforeResolve = router.beforeResolve((to, from) => {
+    settle?.();
+    for (const predicate of registration.shouldTransition) {
+      if (!predicate(to, from)) {
+        return;
+      }
+    }
+    let unblock;
+    let finish;
+    const blocked = new Promise((resolve) => {
+      unblock = resolve;
+    });
+    const rendered = new Promise((resolve) => {
+      finish = resolve;
+    });
+    settle = () => {
+      settle = void 0;
+      unblock();
+      void nextTick(finish);
+    };
+    const transition = startViewTransition(() => {
+      unblock();
+      return rendered;
+    });
+    void transition.finished.then(unblock, unblock);
+    return blocked;
+  });
+  const stopAfterEach = router.afterEach(() => {
+    settle?.();
+  });
+  const stopOnError = router.onError(() => {
+    settle?.();
+  });
+  registration.dispose = () => {
+    settle?.();
+    stopBeforeResolve();
+    stopAfterEach();
+    stopOnError();
+  };
+  return () => release(router, registration, shouldTransition);
+}