pxd 0.0.64 → 0.1.3

package/dist/composables/_internal/use-message-group.js

@@ -0,0 +1,143 @@
+import { shallowRef, watchEffect } from "vue";
+import { toValue } from "../../utils/helper.js";
+import { isNil } from "../../utils/is.js";
+const TRANSITION_LOCK_MS = 250;
+const LEAVE_DEBOUNCE_MS = 200;
+const NEARLY_EXPIRED_MS = 100;
+export function useMessageGroup({ messages, expand, onTimeout }) {
+  const groupExpand = shallowRef(toValue(expand));
+  let leaveTimeoutId;
+  let isTransitioning = false;
+  function lockTransition() {
+    isTransitioning = true;
+    setTimeout(() => {
+      isTransitioning = false;
+    }, TRANSITION_LOCK_MS);
+  }
+  function onPointerEnter() {
+    clearTimeout(leaveTimeoutId);
+    if (groupExpand.value || isTransitioning) {
+      return;
+    }
+    lockTransition();
+    groupExpand.value = true;
+    pauseAll();
+  }
+  function onPointerLeave() {
+    clearTimeout(leaveTimeoutId);
+    if (isTransitioning) {
+      return;
+    }
+    leaveTimeoutId = setTimeout(() => {
+      resumeAll();
+      if (toValue(expand)) {
+        return;
+      }
+      groupExpand.value = false;
+      lockTransition();
+    }, LEAVE_DEBOUNCE_MS);
+  }
+  function collapse() {
+    groupExpand.value = false;
+  }
+  function clearTimer(message) {
+    if (message._timerId) {
+      clearTimeout(message._timerId);
+      message._timerId = void 0;
+    }
+  }
+  function startTimer(message) {
+    message._startedAtMs = Date.now();
+    if (isNil(message._remainingMs)) {
+      message._remainingMs = message.durations;
+    }
+    clearTimer(message);
+    message._timerId = setTimeout(() => {
+      onTimeout(message.id);
+    }, message._remainingMs);
+  }
+  function pauseMessage(message) {
+    if (!message.durations || message.durations <= 0) {
+      return;
+    }
+    if (!message._timerId) {
+      return;
+    }
+    clearTimer(message);
+    const elapsed = Date.now() - message._startedAtMs;
+    const remaining = message._remainingMs ?? message.durations;
+    message._remainingMs = Math.max(0, remaining - elapsed);
+  }
+  function resumeMessage(message) {
+    if (!message.durations || message.durations <= 0) {
+      return;
+    }
+    if (message._startedAtMs == null) {
+      return;
+    }
+    if ((message._remainingMs ?? 0) <= NEARLY_EXPIRED_MS) {
+      onTimeout(message.id);
+      return;
+    }
+    startTimer(message);
+  }
+  function applyHandlerMessage(message, handler, data) {
+    const content = typeof handler === "function" ? handler(data) : handler;
+    if (!isNil(content)) {
+      message.message = content;
+    }
+  }
+  async function handlePromiseMessage(message) {
+    if (!message.promise) {
+      return;
+    }
+    let result;
+    try {
+      result = await message.promise;
+      message.type = "success";
+      applyHandlerMessage(message, message.success, result);
+    } catch (err) {
+      result = err;
+      message.type = "error";
+      applyHandlerMessage(message, message.error, err);
+    } finally {
+      applyHandlerMessage(message, message.finally, result);
+      message.promise = void 0;
+      message.success = void 0;
+      message.error = void 0;
+      message.finally = void 0;
+      const isAlive = toValue(messages).includes(message);
+      if (isAlive && message.durations && message.durations > 0) {
+        message._remainingMs = message.durations;
+        startTimer(message);
+      }
+    }
+  }
+  function clearTimers() {
+    toValue(messages).forEach(clearTimer);
+  }
+  function pauseAll() {
+    toValue(messages).forEach(pauseMessage);
+  }
+  function resumeAll() {
+    const snapshot = [...toValue(messages)];
+    snapshot.forEach(resumeMessage);
+  }
+  watchEffect(() => {
+    groupExpand.value = toValue(expand);
+  });
+  return {
+    groupExpand,
+    collapse,
+    onPointerEnter,
+    onPointerLeave,
+    startTimer,
+    clearTimer,
+    clearTimers,
+    pauseMessage,
+    resumeMessage,
+    pauseAll,
+    resumeAll,
+    handlePromiseMessage
+  };
+}

package/dist/composables/{use-model-value.d.ts → _internal/use-model-value.d.ts}

@@ -11,5 +11,5 @@ interface ModelValueOptions {
     set?: (value: any) => void;
     withChange?: boolean;
 }
-export declare function useModelValue<P extends BaseProps, E extends BaseEmits>(props: P, emits: E, options?: ModelValueOptions): WritableComputedRef<NonNullable<P['modelValue']>>;
+export declare function useModelValue<P extends BaseProps, E extends BaseEmits>(props: P, emits: E, { withChange, get, set }?: ModelValueOptions): WritableComputedRef<P['modelValue']>;
 export {};

package/dist/composables/_internal/use-model-value.js

@@ -0,0 +1,13 @@
+import { computed } from "vue";
+export function useModelValue(props, emits, { withChange = true, get, set } = {}) {
+  const modelValue = computed({
+    get: get || (() => props.modelValue),
+    set: set || ((value) => {
+      if (withChange) {
+        emits("change", value);
+      }
+      emits("update:modelValue", value);
+    })
+  });
+  return modelValue;
+}

package/dist/composables/_internal/use-overlay-dialog.d.ts

@@ -0,0 +1,25 @@
+import type { Ref } from 'vue';
+interface OverlayDialogProps {
+    autoFocusElement?: string | boolean;
+    closeOnPressEscape?: boolean;
+    closeOnClickOverlay?: boolean;
+    loading?: boolean;
+}
+interface OverlayDialogEmits {
+    (event: 'outside-click', ev: PointerEvent): void;
+}
+interface OverlayDialogOptions {
+    props: OverlayDialogProps;
+    emits: OverlayDialogEmits;
+    elementRef: Ref<HTMLElement | undefined>;
+    onClose: () => void;
+}
+/**
+ * Shared dialog (Modal/Drawer) behaviors: focus trap wiring and overlay
+ * click/escape close handlers.
+ */
+export declare function useOverlayDialog({ props, emits, elementRef, onClose }: OverlayDialogOptions): {
+    closeOverlayIfNeed: () => void;
+    onOverlayClick: (ev: PointerEvent) => void;
+};
+export {};

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

@@ -0,0 +1,23 @@
+import { computed } from "vue";
+import { isTruthyProp } from "../../utils/format.js";
+import { useFocusTrap } from "./use-focus-trap.js";
+export function useOverlayDialog({ props, emits, elementRef, onClose }) {
+  const focusTrapOptions = computed(() => ({
+    autoFocusElement: props.autoFocusElement
+  }));
+  useFocusTrap(elementRef, focusTrapOptions);
+  function closeOverlayIfNeed() {
+    if (isTruthyProp(props.loading)) {
+      return;
+    }
+    onClose();
+  }
+  function onOverlayClick(ev) {
+    emits("outside-click", ev);
+    if (!isTruthyProp(props.closeOnClickOverlay)) {
+      return;
+    }
+    closeOverlayIfNeed();
+  }
+  return { closeOverlayIfNeed, onOverlayClick };
+}

package/dist/composables/{use-overlay-manager.d.ts → _internal/use-overlay-manager.d.ts}

@@ -4,11 +4,14 @@ interface OverlayManagerOptions {
     lockScrollOnVisible?: MaybeRefOrGetter<boolean>;
     lockScroll: () => void;
     unlockScroll: () => void;
-    onPressEscape?: (ev: KeyboardEvent) => void;
+    /** Return `false` to let the next overlay below handle the event. */
+    onPressEscape?: (ev: KeyboardEvent) => boolean | void;
+    zIndex?: MaybeRefOrGetter<number | undefined>;
 }
 interface OverlayManagerEntry {
     id: symbol;
     onPressEscape: OverlayManagerOptions['onPressEscape'];
+    zIndex: OverlayManagerOptions['zIndex'];
 }
 export declare function useOverlayManager(options: OverlayManagerOptions): {
     isTopOverlay: (entry?: OverlayManagerEntry) => boolean;

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

@@ -0,0 +1,139 @@
+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() {
+  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) {
+  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;
+  }
+  for (const entry of getOverlaysFromTop()) {
+    if (entry.onPressEscape?.(ev) !== false) {
+      return;
+    }
+  }
+}
+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, zIndex } = 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();
+      lockRootInteraction();
+      isLockedScroll = true;
+    }
+    const idx = overlayStack.findIndex((item) => item.id === overlayId);
+    if (idx !== -1) {
+      overlayStack.splice(idx, 1);
+    }
+    overlayStack.push({
+      id: overlayId,
+      onPressEscape,
+      zIndex
+    });
+    ensureKeydownListener();
+  }
+  function unregisterOverlay() {
+    const idx = overlayStack.findIndex((item) => item.id === overlayId);
+    if (idx !== -1) {
+      overlayStack.splice(idx, 1);
+    }
+    if (isLockedScroll) {
+      unlockScroll();
+      unlockRootInteraction();
+      isLockedScroll = false;
+    }
+    removeKeydownListener();
+  }
+  watch(
+    () => toValue(enabled),
+    (isEnabled, wasEnabled) => {
+      if (isEnabled === wasEnabled) {
+        return;
+      }
+      if (isEnabled) {
+        registerOverlay();
+        return;
+      }
+      unregisterOverlay();
+    }
+  );
+  onScopeDispose(() => {
+    unregisterOverlay();
+  });
+  return {
+    isTopOverlay,
+    registerOverlay,
+    unregisterOverlay
+  };
+}

package/dist/composables/{use-popover-responsive.js → _internal/use-popover-responsive.js}

@@ -1,5 +1,5 @@
 import { computed } from "vue";
-import { PRESET_MEDIA_QUERIES, useMediaQuery } from "./use-media-query.js";
+import { PRESET_MEDIA_QUERIES, useMediaQuery } from "../use-media-query.js";
 export function usePopoverResponsive() {
   const isAdaptive = useMediaQuery(PRESET_MEDIA_QUERIES.IS_XS);
   const responsiveClasses = computed(() => {

package/dist/composables/_internal/use-selected-list-item.d.ts

@@ -0,0 +1,6 @@
+import type { ListOption, ListOptionEntry, ListOptionGroup, ListOptions, ListOptionSelected } from '../../components/list/types';
+import type { MaybeRefOrGetter } from 'vue';
+export declare function isListOptionGroup(option: ListOptionEntry): option is ListOptionGroup;
+export declare function resolveOptionByValue(options: ListOptionEntry[], value: ListOptionSelected['value']): ListOption | null;
+export declare function useSelectedListItems(options: MaybeRefOrGetter<ListOptions>, modelValue: MaybeRefOrGetter<unknown>): import("vue").ComputedRef<ListOption[]>;
+export declare function useSelectedListItem(options: MaybeRefOrGetter<ListOptions>, modelValue: MaybeRefOrGetter<unknown>): import("vue").ComputedRef<ListOption>;

package/dist/composables/_internal/use-selected-list-item.js

@@ -0,0 +1,36 @@
+import { computed } from "vue";
+import { toArray } from "../../utils/format.js";
+import { toValue } from "../../utils/helper.js";
+export function isListOptionGroup(option) {
+  return option.type === "group";
+}
+export function resolveOptionByValue(options, value) {
+  for (const entry of options) {
+    if (isListOptionGroup(entry)) {
+      const matchedOption = resolveOptionByValue(entry.options, value);
+      if (matchedOption) {
+        return matchedOption;
+      }
+    } else if (entry.value === value) {
+      return entry;
+    }
+  }
+  return null;
+}
+function resolveSelectedListItems(options, modelValue) {
+  const selectedOptions = [];
+  for (const value of toArray(modelValue)) {
+    const matchedOption = resolveOptionByValue(options, value);
+    if (matchedOption) {
+      selectedOptions.push(matchedOption);
+    }
+  }
+  return selectedOptions;
+}
+export function useSelectedListItems(options, modelValue) {
+  return computed(() => resolveSelectedListItems(toValue(options) ?? [], toValue(modelValue)));
+}
+export function useSelectedListItem(options, modelValue) {
+  const selectedItems = useSelectedListItems(options, modelValue);
+  return computed(() => selectedItems.value[0] ?? null);
+}

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

@@ -0,0 +1,88 @@
+import type { MaybeElementRef } from '../../types/shared/utils';
+import type { MaybeRefOrGetter } from 'vue';
+export type SwipeDirection = 'left' | 'right' | 'top' | 'bottom';
+export interface SwipePressState {
+    size: number;
+    /** The pointerdown event that opened the gesture. */
+    event: PointerEvent;
+}
+export interface SwipeFollowState {
+    /** Movement since the previous event along the active axis (px). */
+    delta: number;
+    /** Signed velocity (px / ms) since the previous event along the active axis. */
+    velocity: number;
+    /** `displacement / containerSize` signed ratio, typically in the range of -1 to 1. */
+    offset: number;
+    /** Signed displacement from the start point along the active axis (px). */
+    displacement: number;
+    /** The pointermove event that produced this sample. */
+    event: PointerEvent;
+}
+export interface SwipeReleaseState {
+    /** Whether the gesture qualified as a successful swipe (by velocity or distance). */
+    swiped: boolean;
+    /** Physical swipe direction. `undefined` when `swiped` is `false`. */
+    direction?: SwipeDirection;
+    /** Signed displacement at release along the active axis (px). */
+    displacement: number;
+    /** Signed velocity at release (px / ms). */
+    velocity: number;
+    /** Whether the gesture stayed on the target axis from the moment it was locked. */
+    axisLocked: boolean;
+    /** The pointerup or pointercancel event that ended the gesture. */
+    event: PointerEvent;
+}
+export interface SwipeTapState {
+    /** The pointerup event that ended the interaction. */
+    event: PointerEvent;
+    /**
+     * The pointerdown event that started it. A release that never became a pan can
+     * land on a different element, so hit-testing should use what the user pressed.
+     */
+    startEvent: PointerEvent | null;
+    /**
+     * `true` when `beforeStart` discarded the gesture, `false` when the pointer
+     * simply never travelled far enough to be recognized.
+     */
+    vetoed: boolean;
+}
+export interface SwipeGestureOptions {
+    disabled?: MaybeRefOrGetter<boolean>;
+    /** CSS selector for the drag handle element within the container. */
+    handleSelector?: string;
+    /** Swipe axis. Reactive; accepts a ref or getter. */
+    axis?: MaybeRefOrGetter<'horizontal' | 'vertical'>;
+    /** Minimum movement (px) before locking the gesture axis. */
+    axisLockThreshold?: number;
+    /** Main-axis movement must be at least this multiple of cross-axis movement. */
+    axisLockRatio?: number;
+    /** Minimum swipe distance (px) before movement events start. */
+    swipeThreshold?: number;
+    /** Fraction of the container size the finger must travel for a slow-drag swipe. */
+    distanceThreshold?: number;
+    /** Minimum absolute velocity (px / ms) for a quick-flick swipe. */
+    velocityThreshold?: number;
+    /**
+     * Gate evaluated once the gesture is recognized. Resolving `false` discards the
+     * gesture: `onFollow` never fires and the release is reported through `onTap`
+     * with `vetoed: true`. Movement arriving while a promise is pending is dropped,
+     * and a release inside that window waits for the verdict.
+     */
+    beforeStart?: (state: SwipePressState) => boolean | Promise<boolean>;
+    onPress?: (state: SwipePressState) => void;
+    onFollow?: (state: SwipeFollowState) => void;
+    /**
+     * Receives the raw release metrics. `swiped` and `direction` follow
+     * `distanceThreshold` / `velocityThreshold` against the container size; consumers
+     * that measure against something else decide from `displacement` themselves.
+     */
+    onRelease?: (state: SwipeReleaseState) => void;
+    /**
+     * Called on release when no swipe was ever recognized: the pointer travelled less
+     * than `swipeThreshold`, or `beforeStart` discarded it.
+     */
+    onTap?: (state: SwipeTapState) => void;
+}
+export declare function useSwipeGesture(containerRef: MaybeElementRef<HTMLElement>, options?: SwipeGestureOptions): {
+    stop: () => void;
+};