pxd 0.0.61 → 0.0.63

package/dist/composables/use-color-scheme.js

@@ -1,4 +1,4 @@
-import { computed, onBeforeUnmount, shallowRef, watchEffect } from "vue";
+import { computed, onScopeDispose, shallowRef, watchEffect } from "vue";
 import { cachedOn } from "../utils/event.js";
 import { isServer } from "../utils/is.js";
 import { PRESET_MEDIA_QUERIES, useMediaQuery } from "./use-media-query.js";
@@ -96,7 +96,7 @@ export function useColorScheme(options = {}) {
     if (options.syncStatus) {
       unbindSubscriber = cachedOn(window, EVENT_NAME, onToggleModeType);
     }
-    onBeforeUnmount(() => {
+    onScopeDispose(() => {
       stopEffect();
       unbindSubscriber();
       cleanupStyleElements();

package/dist/composables/use-countdown.js

@@ -1,4 +1,5 @@
 import { computed, shallowRef, watch } from "vue";
+import { raf } from "../utils/event.js";
 const UPDATE_INTERVAL = 100;
 export function useCountdown(props, emits) {
   let startTimestamp = -1;
@@ -80,7 +81,7 @@ export function useCountdown(props, emits) {
       }
     }
     if (now - previousFrameTime < UPDATE_INTERVAL && !isLastFrame) {
-      requestAnimationFrame(frame);
+      raf(frame);
       return;
     }
     previousFrameTime = now;
@@ -93,7 +94,7 @@ export function useCountdown(props, emits) {
     } else {
       timeRef.value = Math.max(0, current);
     }
-    requestAnimationFrame(frame);
+    raf(frame);
   }
   const unwatchActive = watch(
     () => props.active,

package/dist/composables/use-deferred-value.js

@@ -1,4 +1,4 @@
-import { onBeforeUnmount, ref, watch } from "vue";
+import { onScopeDispose, ref, watch } from "vue";
 import { toValue } from "../utils/ref.js";
 export function useDeferredValue(defaultValue, options = {}) {
   const { deep, delay = 300, valueChange } = options;
@@ -16,7 +16,7 @@ export function useDeferredValue(defaultValue, options = {}) {
     },
     { deep }
   );
-  onBeforeUnmount(() => {
+  onScopeDispose(() => {
     unwatch();
     clearTimeout(syncTimeoutId);
   });

package/dist/composables/use-delay-destroy.js

@@ -1,11 +1,12 @@
 import { shallowRef } from "vue";
+import { doubleRaf, caf } from "../utils/event.js";
 import { toValue } from "../utils/ref.js";
 export function useDelayDestroy(value, options = {}) {
   const { delay = 300, renderChange, visibleChange } = options;
   const render = shallowRef(toValue(value));
   const visible = shallowRef(toValue(value));
   let destroyTimeoutId;
-  let visibleTimeoutId;
+  let visibleRafId = 0;
   async function show() {
     return new Promise((resolve) => {
       clearTimeout(destroyTimeoutId);
@@ -13,19 +14,23 @@ export function useDelayDestroy(value, options = {}) {
         render.value = true;
         renderChange?.(render.value);
       }
-      if (!visible.value) {
-        clearTimeout(visibleTimeoutId);
-        visibleTimeoutId = setTimeout(() => {
+      if (visible.value) {
+        resolve(visible.value);
+      } else {
+        caf(visibleRafId);
+        visibleRafId = doubleRaf(() => {
+          visibleRafId = 0;
           visible.value = true;
           resolve(visible.value);
           visibleChange?.(visible.value);
-        }, 0);
+        });
       }
     });
   }
   function hide() {
     return new Promise((resolve) => {
-      clearTimeout(visibleTimeoutId);
+      caf(visibleRafId);
+      visibleRafId = 0;
       if (visible.value) {
         visible.value = false;
         visibleChange?.(visible.value);

package/dist/composables/use-document-hidden.js

@@ -1,4 +1,4 @@
-import { onBeforeUnmount, onMounted, shallowRef } from "vue";
+import { onScopeDispose, onMounted, shallowRef } from "vue";
 import { cachedOn } from "../utils/event.js";
 import { isServer } from "../utils/is.js";
 export function useDocumentHidden(callback) {
@@ -11,7 +11,7 @@ export function useDocumentHidden(callback) {
   onMounted(() => {
     cleanHidden = cachedOn(document, "visibilitychange", toggle);
   });
-  onBeforeUnmount(() => {
+  onScopeDispose(() => {
     cleanHidden?.();
   });
   return isHidden;

package/dist/composables/use-focus-trap.js

@@ -1,5 +1,5 @@
 import { createFocusTrap } from "focus-trap";
-import { onBeforeUnmount, watch } from "vue";
+import { onScopeDispose, watch } from "vue";
 import { toValue } from "../utils/ref.js";
 const focusTrapStack = [];
 const AUTO_FOCUS_FIRST_SELECTOR = [
@@ -45,7 +45,7 @@ export function useFocusTrap(container, userOptions = {}) {
     },
     { flush: "post" }
   );
-  onBeforeUnmount(() => {
+  onScopeDispose(() => {
     unwatch();
   });
   return {

package/dist/composables/use-list-filter.d.ts

@@ -0,0 +1,11 @@
+import type { ListFilterContext } from '../contexts/list';
+import type { ComputedRef, Ref } from 'vue';
+export type ListFilterFn = (text: string, search: string, keywords: string[]) => boolean;
+export interface UseListFilterOptions {
+    keyword: Ref<string>;
+    filter?: ListFilterFn;
+}
+export interface UseListFilterReturn extends ListFilterContext {
+    visibleCount: ComputedRef<number>;
+}
+export declare function useListFilter({ filter, keyword, }: UseListFilterOptions): UseListFilterReturn;

package/dist/composables/use-list-filter.js

@@ -0,0 +1,56 @@
+import { computed, shallowRef } from "vue";
+import { isMatch } from "../utils/fuzzy-search.js";
+export function useListFilter({
+  filter = isMatch,
+  keyword
+}) {
+  const items = /* @__PURE__ */ new Map();
+  const revision = shallowRef(0);
+  const filterState = computed(() => {
+    void revision.value;
+    let visibleCount2 = 0;
+    const search = keyword.value;
+    const visibleItems = /* @__PURE__ */ new Set();
+    const visibleGroupIds = /* @__PURE__ */ new Set();
+    for (const [id, item] of items) {
+      if (filter(item.getValue(), search, item.getKeywords())) {
+        visibleItems.add(id);
+        visibleCount2++;
+        if (item.groupId) {
+          visibleGroupIds.add(item.groupId);
+        }
+      }
+    }
+    return {
+      visibleItems,
+      visibleGroupIds,
+      visibleCount: visibleCount2
+    };
+  });
+  const visibleCount = computed(() => filterState.value.visibleCount);
+  function registerItem(id, payload) {
+    items.set(id, payload);
+    revision.value++;
+  }
+  function unregisterItem(id) {
+    if (!items.has(id)) {
+      return;
+    }
+    items.delete(id);
+    revision.value++;
+  }
+  function isItemVisible(id) {
+    return filterState.value.visibleItems.has(id);
+  }
+  function isGroupVisible(id) {
+    return filterState.value.visibleGroupIds.has(id);
+  }
+  return {
+    searchValue: keyword,
+    visibleCount,
+    registerItem,
+    isItemVisible,
+    isGroupVisible,
+    unregisterItem
+  };
+}

package/dist/composables/use-list-navigation.d.ts

@@ -0,0 +1,27 @@
+import type { MaybeRefOrGetter, ShallowRef } from 'vue';
+export interface UseListNavigationOptions {
+    loop?: MaybeRefOrGetter<boolean>;
+    itemSelector?: MaybeRefOrGetter<string>;
+    defaultActiveIndex?: MaybeRefOrGetter<number>;
+    toggleOnKeyPress?: MaybeRefOrGetter<boolean>;
+    onToggle?: (index: number) => void;
+    onEnter?: (el: HTMLElement) => void;
+}
+export interface UseListNavigationReturn {
+    activeIndex: ShallowRef<number>;
+    setActiveIndex: (index: number) => void;
+    registerItem: (el: HTMLElement, indexRef: ShallowRef<number>) => void;
+    unregisterItem: (el: HTMLElement) => void;
+    onKeydown: (ev: KeyboardEvent) => void;
+    onPointerOver: (ev: PointerEvent) => void;
+    /**
+     * Request a re-query of the DOM items. Multiple calls made within the same
+     * tick coalesce into a single refresh that runs after `nextTick`. `await`
+     * the returned promise when the caller needs `items` to be up-to-date
+     * before its next action (e.g. `setFirstAsActive` after a search change).
+     */
+    refreshItems: () => Promise<void>;
+    setFirstAsActive: () => void;
+    isEmpty: () => boolean;
+}
+export declare function useListNavigation(containerRef: MaybeRefOrGetter<HTMLElement | undefined>, options: UseListNavigationOptions): UseListNavigationReturn;

package/dist/composables/use-list-navigation.js

@@ -0,0 +1,159 @@
+import { nextTick, shallowRef } from "vue";
+import { toValue, unrefElement } from "../utils/ref.js";
+const DISABLED_KEYS = ["PageUp", "PageDown"];
+const KEY_DIRECTION = {
+  ArrowUp: -1,
+  ArrowLeft: -1,
+  ArrowDown: 1,
+  ArrowRight: 1
+};
+function findNextIndex(len, from, dir, loop) {
+  if (len === 0) {
+    return -1;
+  }
+  const i = from + dir;
+  if (loop) {
+    return (i % len + len) % len;
+  }
+  if (i < 0 || i >= len) {
+    return -1;
+  }
+  return i;
+}
+export function useListNavigation(containerRef, options) {
+  const getLoop = () => toValue(options.loop) ?? true;
+  const getToggleOnKeyPress = () => toValue(options.toggleOnKeyPress) ?? true;
+  const getDefaultActiveIndex = () => toValue(options.defaultActiveIndex) ?? -1;
+  const getItemSelector = () => toValue(options.itemSelector) ?? "[data-list-item]";
+  const activeIndex = shallowRef(getDefaultActiveIndex());
+  const itemIndexRefs = /* @__PURE__ */ new WeakMap();
+  let items = [];
+  let lastPointerX = -1;
+  let lastPointerY = -1;
+  let pendingRefresh = null;
+  function runRefresh() {
+    const container = unrefElement(containerRef);
+    items = container ? Array.from(container.querySelectorAll(getItemSelector())) : [];
+    items.forEach((el, i) => {
+      const ref = itemIndexRefs.get(el);
+      if (ref) {
+        ref.value = i;
+      }
+    });
+    if (activeIndex.value >= items.length) {
+      activeIndex.value = items.length - 1;
+    }
+    const fallback = getDefaultActiveIndex();
+    if (activeIndex.value === -1 && fallback >= 0 && fallback < items.length) {
+      activeIndex.value = fallback;
+    }
+  }
+  function refreshItems() {
+    if (pendingRefresh) {
+      return pendingRefresh;
+    }
+    pendingRefresh = nextTick().then(() => {
+      pendingRefresh = null;
+      runRefresh();
+    });
+    return pendingRefresh;
+  }
+  function setActiveIndex(index) {
+    activeIndex.value = index;
+  }
+  function setFirstAsActive() {
+    activeIndex.value = findNextIndex(items.length, -1, 1, false);
+  }
+  function isEmpty() {
+    return items.length === 0;
+  }
+  function registerItem(el, indexRef) {
+    itemIndexRefs.set(el, indexRef);
+    void refreshItems();
+  }
+  function unregisterItem(el) {
+    itemIndexRefs.delete(el);
+    void refreshItems();
+  }
+  function onPointerOver(ev) {
+    if (ev.pageX === lastPointerX && ev.pageY === lastPointerY) {
+      return;
+    }
+    lastPointerX = ev.pageX;
+    lastPointerY = ev.pageY;
+    const listItem = ev.target.closest(getItemSelector());
+    if (!listItem) {
+      return;
+    }
+    const index = itemIndexRefs.get(listItem)?.value ?? -1;
+    if (index !== -1) {
+      activeIndex.value = index;
+    }
+  }
+  function onKeydown(ev) {
+    if (!getToggleOnKeyPress() || isEmpty()) {
+      return;
+    }
+    const { key, ctrlKey, metaKey, altKey, shiftKey } = ev;
+    if (DISABLED_KEYS.includes(key)) {
+      ev.preventDefault();
+      ev.stopPropagation();
+      return;
+    }
+    if (ctrlKey || metaKey || altKey || shiftKey) {
+      return;
+    }
+    const len = items.length;
+    const current = activeIndex.value;
+    if (key === "Enter") {
+      if (current < 0 || current >= len) {
+        return;
+      }
+      const el = items[current];
+      if (!el) {
+        return;
+      }
+      ev.preventDefault();
+      ev.stopPropagation();
+      if (typeof options.onEnter === "function") {
+        options.onEnter(el);
+      } else {
+        el.click();
+      }
+      return;
+    }
+    let next;
+    if (key === "Home") {
+      next = findNextIndex(len, -1, 1, false);
+    } else if (key === "End") {
+      next = findNextIndex(len, len, -1, false);
+    } else {
+      const dir = KEY_DIRECTION[key];
+      if (!dir) {
+        return;
+      }
+      next = current === -1 ? findNextIndex(len, dir === 1 ? -1 : len, dir, false) : findNextIndex(len, current, dir, getLoop());
+    }
+    if (next === -1) {
+      return;
+    }
+    ev.preventDefault();
+    ev.stopPropagation();
+    if (next !== current) {
+      options.onToggle?.(next);
+      activeIndex.value = next;
+      items[next]?.scrollIntoView({ block: "nearest" });
+    }
+  }
+  return {
+    activeIndex,
+    setActiveIndex,
+    registerItem,
+    unregisterItem,
+    onKeydown,
+    onPointerOver,
+    refreshItems,
+    setFirstAsActive,
+    isEmpty
+  };
+}

package/dist/composables/use-lock-scroll.js

@@ -1,32 +1,32 @@
 import { hasScrollbar, isScrollable } from "../utils/dom.js";
 import { cachedOff, cachedOn, preventDefaultScroll } from "../utils/event.js";
-let documentTouchMoveLocks = 0;
+let rootTouchMoveLocks = 0;
 export function useLockScroll() {
-  const rootEl = document.documentElement;
+  const classList = ["pointer-events-none"];
   function isLocked() {
-    return documentTouchMoveLocks > 0;
+    return rootTouchMoveLocks > 0;
   }
   function lockScroll() {
     if (!isLocked()) {
+      const rootEl = document.documentElement;
       cachedOn(document, "touchmove", preventDefaultScroll, { passive: false });
-      const classList = ["pointer-events-none!"];
-      const { y: yScrollbar } = hasScrollbar(rootEl);
-      const { y: yScrollable } = isScrollable(rootEl);
-      if (yScrollbar && yScrollable) {
+      const { x: xScrollbar, y: yScrollbar } = hasScrollbar(rootEl);
+      const { x: xScrollable, y: yScrollable } = isScrollable(rootEl);
+      if (xScrollbar && xScrollable || yScrollbar && yScrollable) {
         classList.push("scrollbar-stable", "scrollbar-disabled");
       }
       rootEl.classList.add(...classList);
     }
-    documentTouchMoveLocks++;
+    rootTouchMoveLocks++;
   }
   function unlockScroll() {
-    if (documentTouchMoveLocks <= 0) {
+    if (rootTouchMoveLocks <= 0) {
       return;
     }
-    documentTouchMoveLocks = Math.max(documentTouchMoveLocks - 1, 0);
-    if (!documentTouchMoveLocks) {
+    rootTouchMoveLocks = Math.max(rootTouchMoveLocks - 1, 0);
+    if (!rootTouchMoveLocks) {
       cachedOff(document, "touchmove", preventDefaultScroll);
-      rootEl.classList.remove("pointer-events-none!", "scrollbar-stable", "scrollbar-disabled");
+      document.documentElement.classList.remove(...classList);
     }
   }
   return {

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

@@ -1,4 +1,4 @@
-import { customRef, onBeforeUnmount } from "vue";
+import { customRef, onScopeDispose } from "vue";
 import { cachedOn } from "../utils/event.js";
 import { isServer } from "../utils/is.js";
 export const PRESET_MEDIA_QUERIES = {
@@ -69,7 +69,7 @@ export function useMediaQuery(condition, callback) {
     }
     mediaQuery = void 0;
   }
-  onBeforeUnmount(() => {
+  onScopeDispose(() => {
     stop();
   });
   return matches;

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

@@ -1,7 +1,7 @@
 import type { MaybeElementRef } from '../types/shared/utils';
 interface Options {
+    allowList?: MaybeElementRef<HTMLElement>[];
     isEnabled?: (ev: PointerEvent) => boolean;
-    isOutside?: (ev: PointerEvent) => boolean;
     onTrigger?: (ev: PointerEvent) => void;
 }
 export declare function useOutsideClick(container: MaybeElementRef<HTMLElement>, options?: Options): {

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

@@ -1,20 +1,17 @@
-import { onBeforeUnmount, watch } from "vue";
+import { onScopeDispose, watch } from "vue";
 import { cachedOff, cachedOn } from "../utils/event.js";
 import { toValue } from "../utils/ref.js";
 export function useOutsideClick(container, options = {}) {
   function onClick(ev) {
-    const { isEnabled, isOutside, onTrigger } = options;
+    const { isEnabled } = options;
     if (typeof isEnabled === "function" && !isEnabled(ev)) {
       return;
     }
-    if (typeof isOutside === "function") {
-      if (!isOutside(ev)) {
-        return;
-      }
-    } else {
-      if (!toValue(container).contains(ev.target)) {
-        return;
-      }
+    const { onTrigger, allowList = [container] } = options;
+    const currentTarget = ev.target;
+    const isInside = allowList.some((el) => toValue(el)?.contains(currentTarget));
+    if (isInside) {
+      return;
     }
     onTrigger?.(ev);
   }
@@ -34,7 +31,7 @@ export function useOutsideClick(container, options = {}) {
     unwatch();
     cachedOff(document, "click", onClick);
   }
-  onBeforeUnmount(() => {
+  onScopeDispose(() => {
     stop();
   });
   return {

package/dist/composables/use-overlay-manager.d.ts

@@ -0,0 +1,18 @@
+import type { MaybeRefOrGetter } from 'vue';
+interface OverlayManagerOptions {
+    enabled?: MaybeRefOrGetter<boolean>;
+    lockScrollOnVisible?: MaybeRefOrGetter<boolean>;
+    lockScroll: () => void;
+    unlockScroll: () => void;
+    onPressEscape?: (ev: KeyboardEvent) => void;
+}
+interface OverlayManagerEntry {
+    id: symbol;
+    onPressEscape: OverlayManagerOptions['onPressEscape'];
+}
+export declare function useOverlayManager(options: OverlayManagerOptions): {
+    isTopOverlay: (entry?: OverlayManagerEntry) => boolean;
+    registerOverlay: () => void;
+    unregisterOverlay: () => void;
+};
+export {};

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

@@ -0,0 +1,80 @@
+import { onScopeDispose } from "vue";
+import { cachedOff, cachedOn } from "../utils/event.js";
+import { toValue } from "../utils/ref.js";
+let isKeydownListening = false;
+const overlayStack = [];
+function getTopOverlay() {
+  return overlayStack.at(-1);
+}
+function onEscapeKeydown(ev) {
+  const entry = getTopOverlay();
+  if (!entry) {
+    return;
+  }
+  const { ctrlKey, metaKey, altKey, shiftKey, key } = ev;
+  if (ctrlKey || metaKey || altKey || shiftKey || key !== "Escape") {
+    return;
+  }
+  entry?.onPressEscape?.(ev);
+}
+function ensureKeydownListener() {
+  if (isKeydownListening) {
+    return;
+  }
+  cachedOn(document, "keydown", onEscapeKeydown);
+  isKeydownListening = true;
+}
+function removeKeydownListener() {
+  if (!isKeydownListening || overlayStack.length > 0) {
+    return;
+  }
+  cachedOff(document, "keydown", onEscapeKeydown);
+  isKeydownListening = false;
+}
+export function useOverlayManager(options) {
+  const { enabled, lockScrollOnVisible, lockScroll, unlockScroll, onPressEscape } = options;
+  let isLockedScroll = false;
+  const overlayId = Symbol("pxd-overlay-id");
+  function isTopOverlay(entry) {
+    entry ??= getTopOverlay();
+    return entry?.id === overlayId;
+  }
+  function registerOverlay() {
+    if (!toValue(enabled)) {
+      return;
+    }
+    const shouldLockScroll = toValue(lockScrollOnVisible);
+    if (shouldLockScroll && !isLockedScroll) {
+      lockScroll();
+      isLockedScroll = true;
+    }
+    const idx = overlayStack.findIndex((item) => item.id === overlayId);
+    if (idx !== -1) {
+      overlayStack.splice(idx, 1);
+    }
+    overlayStack.push({
+      id: overlayId,
+      onPressEscape
+    });
+    ensureKeydownListener();
+  }
+  function unregisterOverlay() {
+    const idx = overlayStack.findIndex((item) => item.id === overlayId);
+    if (idx !== -1) {
+      overlayStack.splice(idx, 1);
+    }
+    if (isLockedScroll) {
+      unlockScroll();
+      isLockedScroll = false;
+    }
+    removeKeydownListener();
+  }
+  onScopeDispose(() => {
+    unregisterOverlay();
+  });
+  return {
+    isTopOverlay,
+    registerOverlay,
+    unregisterOverlay
+  };
+}

package/dist/composables/use-popover-responsive.d.ts

@@ -1,12 +1,10 @@
 export declare function usePopoverResponsive(): {
-    isXs: import("vue").Ref<boolean, boolean>;
-    attrs: import("vue").ComputedRef<{
-        readonly contentClass: "bg-background-100 border w-full rounded-tl-xl rounded-tr-xl";
-        readonly wrapperClass: "fixed w-screen h-screen items-end pointer-events-none pxd-container-mask";
-        readonly transitionType: "fade-slide";
+    isAdaptive: import("vue").Ref<boolean, boolean>;
+    responsiveClasses: import("vue").ComputedRef<{
+        readonly content: "bg-background-100 shadow-border-menu w-full rounded-tl-xl rounded-tr-xl";
+        readonly wrapper: "fixed w-full h-full items-end pointer-events-none";
     } | {
-        readonly contentClass: "bg-background-100 border rounded-xl";
-        readonly wrapperClass: "";
-        readonly transitionType: "fade-scale";
+        readonly content: "bg-background-100 shadow-border-menu rounded-xl";
+        readonly wrapper: "";
     }>;
 };

package/dist/composables/use-popover-responsive.js

@@ -1,24 +1,21 @@
 import { computed } from "vue";
 import { PRESET_MEDIA_QUERIES, useMediaQuery } from "./use-media-query.js";
 export function usePopoverResponsive() {
-  const isXs = useMediaQuery(PRESET_MEDIA_QUERIES.IS_XS);
-  const attrs = computed(() => {
-    const basicContentClass = "bg-background-100 border";
-    if (isXs.value) {
+  const isAdaptive = useMediaQuery(PRESET_MEDIA_QUERIES.IS_XS);
+  const responsiveClasses = computed(() => {
+    if (isAdaptive.value) {
       return {
-        contentClass: `${basicContentClass} w-full rounded-tl-xl rounded-tr-xl`,
-        wrapperClass: "fixed w-screen h-screen items-end pointer-events-none pxd-container-mask",
-        transitionType: "fade-slide"
+        content: `bg-background-100 shadow-border-menu w-full rounded-tl-xl rounded-tr-xl`,
+        wrapper: "fixed w-full h-full items-end pointer-events-none"
       };
     }
     return {
-      contentClass: `${basicContentClass} rounded-xl`,
-      wrapperClass: "",
-      transitionType: "fade-scale"
+      content: `bg-background-100 shadow-border-menu rounded-xl`,
+      wrapper: ""
     };
   });
   return {
-    isXs,
-    attrs
+    isAdaptive,
+    responsiveClasses
   };
 }

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

@@ -1,4 +1,4 @@
-import { onBeforeUnmount } from "vue";
+import { onScopeDispose } from "vue";
 import { off, once } from "../utils/event.js";
 import { toValue } from "../utils/ref.js";
 export function useRepeatAction(actionOrOptions) {
@@ -40,7 +40,7 @@ export function useRepeatAction(actionOrOptions) {
     once(document, "pointerup", stop);
     once(document, "pointercancel", stop);
   }
-  onBeforeUnmount(() => {
+  onScopeDispose(() => {
     off(document, "pointerup", stop);
     off(document, "pointercancel", stop);
   });