pxd 0.1.2 → 0.1.3

package/dist/components/tree/types.d.ts

@@ -1,10 +1,12 @@
-import type { ComponentClass, ComponentLabel, ComponentValue } from '../../types/shared'
+import type { ComponentClass, ComponentLabel, ComponentValue } from '../../types/shared/props'
 
 export interface TreeOption {
   value: ComponentValue
   label?: ComponentLabel
   disabled?: boolean
   children?: TreeOption[]
+  /** Marks a leaf under `lazy`: no arrow, and never handed to `load`. */
+  isLeaf?: boolean
   keywords?: string[]
   [key: string]: any
 }
@@ -15,6 +17,30 @@ export type TreeModelValue = ComponentValue | ComponentValue[] | null
 
 export type TreeFilterFn = (node: TreeOption, query: string) => boolean
 
+/** Hands the tree the nodes a query matched, their ancestors included. */
+export type TreeRemoteFilterFn = (query: string) => TreeOptions | Promise<TreeOptions>
+
+/** Hands the children of a node to the tree. An empty array marks it a leaf. */
+export type TreeLoadResolve = (children: TreeOptions) => void
+
+/** Gives up on a node without children: the arrow stays, and the next expand asks again. */
+export type TreeLoadReject = () => void
+
+export interface TreeLoadDetail {
+  node: TreeOption
+  depth: number
+  parent?: TreeOption
+}
+
+export type TreeLoadFn = (
+  detail: TreeLoadDetail,
+  resolve: TreeLoadResolve,
+  reject: TreeLoadReject,
+) => void
+
+/** Keeps a node out of the model without the rest of `disabled`: it still expands and takes drops. */
+export type TreeSelectableFn = (node: TreeOption) => boolean
+
 export interface TreeNodeDetail {
   value: ComponentValue
   node: TreeOption
@@ -23,7 +49,6 @@ export interface TreeNodeDetail {
 export interface TreeChangeDetail extends TreeNodeDetail {
   checked: boolean
   checkedValues: ComponentValue[]
-  /** Partially checked parents of the new selection, empty without the cascade. */
   halfCheckedValues: ComponentValue[]
 }
 
@@ -40,25 +65,19 @@ export interface TreeDropTarget {
 }
 
 export interface TreeMoveLocation {
-  /** The parent the node sat in, `undefined` at the root level. */
   parentValue?: ComponentValue
-  /** Position inside that parent's children. */
   index: number
 }
 
 export interface TreeDropInfo {
   dragValue: ComponentValue
   dragNode: TreeOption
-  /** The row the drop is aimed at. */
   targetValue: ComponentValue
   targetNode: TreeOption
   position: TreeDropPosition
 }
 
-/**
- * Decides whether a drop may land. Supplying it takes over the policy rules; the structural
- * ones (a node never lands on itself or inside its own subtree) hold either way.
- */
+/** Decides whether a drop may land; the structural rules hold either way. */
 export type TreeAllowDropFn = (info: TreeDropInfo) => boolean
 
 export interface TreeMoveDetail {
@@ -66,7 +85,6 @@ export interface TreeMoveDetail {
   node: TreeOption
   from: TreeMoveLocation
   to: TreeMoveLocation & {
-    /** The row the drop was aimed at. */
     targetValue: ComponentValue
     position: TreeDropPosition
   }
@@ -80,7 +98,6 @@ export interface TreeFlatNode {
   parentValue?: ComponentValue
   hasChildren: boolean
   expanded: boolean
-  matched: boolean
 }
 
 export interface TreeProps {
@@ -89,10 +106,11 @@ export interface TreeProps {
   multiple?: boolean
   checkStrictly?: boolean
   disabled?: boolean
-  expandOnClick?: boolean
+  selectable?: TreeSelectableFn
+  expandOnly?: boolean
   draggable?: boolean
   allowDrop?: TreeAllowDropFn
-  showIcon?: boolean
+  dropInsideLeaf?: boolean
   virtual?: boolean
   itemSize?: number
   overScan?: number
@@ -101,8 +119,15 @@ export interface TreeProps {
   expandedKeys?: ComponentValue[]
   defaultExpandedKeys?: ComponentValue[]
   childrenField?: string
+  /** Fetch the children of a node when it first opens, instead of reading them from `data`. */
+  lazy?: boolean
+  /** Fetches the children of a node neither `data` nor an earlier request provided. */
+  load?: TreeLoadFn
+  loading?: boolean
   filterable?: boolean
   filter?: TreeFilterFn
+  /** Fetches the nodes a query matched, their ancestors included: giving it searches remotely. */
+  remoteFilter?: TreeRemoteFilterFn
   /** Render only the nodes the filter matched, instead of the hits plus their ancestors. */
   searchMatchesOnly?: boolean
   /** Highlights the query inside a label. Only a contiguous run of characters is marked: a

package/dist/components/virtual-list/index.d.vue.ts

@@ -1,13 +1,13 @@
 import type { VirtualListProps } from './types';
 import { type VirtualListItem } from '../../composables/use-virtual-list.js';
-declare var __VLS_1: {
+declare var __VLS_2: {
     item: any;
     virtualItem: VirtualListItem;
-}, __VLS_3: {};
+}, __VLS_4: {};
 type __VLS_Slots = {} & {
-    item?: (props: typeof __VLS_1) => any;
+    item?: (props: typeof __VLS_2) => any;
 } & {
-    message?: (props: typeof __VLS_3) => any;
+    message?: (props: typeof __VLS_4) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<VirtualListProps, {
     totalSize: import("vue").ComputedRef<number>;

package/dist/composables/_internal/use-list-keyboard-controller.js

@@ -5,23 +5,22 @@ export function useListKeyboardController(options) {
     if (toValue(options.enabled) === false || ev.isComposing || ev.key === "Process") {
       return;
     }
-    const preventDefaultKeys = toValue(options.preventDefaultKeys) ?? DEFAULT_PREVENT_DEFAULT_KEYS;
-    if (preventDefaultKeys.includes(ev.key)) {
-      ev.preventDefault();
-      return;
-    }
     if (ev.ctrlKey || ev.metaKey || ev.altKey || ev.shiftKey) {
       return;
     }
     const command = toValue(options.keymap)[ev.key];
-    if (!command) {
+    if (command) {
+      if (!options.onCommand(command, ev)) {
+        return;
+      }
+      ev.preventDefault();
+      ev.stopPropagation();
       return;
     }
-    if (!options.onCommand(command, ev)) {
-      return;
+    const preventDefaultKeys = toValue(options.preventDefaultKeys) ?? DEFAULT_PREVENT_DEFAULT_KEYS;
+    if (preventDefaultKeys.includes(ev.key)) {
+      ev.preventDefault();
     }
-    ev.preventDefault();
-    ev.stopPropagation();
   }
   return { onKeydown };
 }

package/dist/composables/_internal/use-list-rows.d.ts

@@ -11,6 +11,8 @@ export interface ListItemRow {
     key: string;
     option: ListOption;
     navIndex: number;
+    /** Index of this row in the flattened render/virtualizer row list. */
+    rowIndex: number;
     group?: ListOptionGroup;
     groupIndex?: number;
     itemIndex: number;
@@ -18,6 +20,8 @@ export interface ListItemRow {
 export type ListRow = ListHeaderRow | ListItemRow;
 export interface FlattenListOptionsResult {
     rows: ListRow[];
+    /** Item rows indexed by their dense `navIndex`. */
+    itemRows: ListItemRow[];
     navigableCount: number;
 }
 /**

package/dist/composables/_internal/use-list-rows.js

@@ -1,6 +1,7 @@
 import { isListOptionGroup } from "./use-selected-list-item.js";
 export function flattenListOptions(options) {
   const rows = [];
+  const itemRows = [];
   let navIndex = 0;
   for (let groupIndex = 0; groupIndex < options.length; groupIndex++) {
     const entry = options[groupIndex];
@@ -14,28 +15,35 @@ export function flattenListOptions(options) {
       });
       for (let itemIndex = 0; itemIndex < entry.options.length; itemIndex++) {
         const option = entry.options[itemIndex];
-        rows.push({
+        const row = {
           type: "item",
           key: String(option.value),
           option,
           navIndex: navIndex++,
+          rowIndex: rows.length,
           group: entry,
           groupIndex,
           itemIndex
-        });
+        };
+        rows.push(row);
+        itemRows.push(row);
       }
     } else {
-      rows.push({
+      const row = {
         type: "item",
         key: String(entry.value),
         option: entry,
         navIndex: navIndex++,
+        rowIndex: rows.length,
         itemIndex: groupIndex
-      });
+      };
+      rows.push(row);
+      itemRows.push(row);
     }
   }
   return {
     rows,
+    itemRows,
     navigableCount: navIndex
   };
 }

package/dist/composables/_internal/use-list-selection.d.ts

@@ -1,5 +1,5 @@
 import type { ListModelValue } from '../../components/list/types';
-import type { ComponentValue } from '../../types/shared';
+import type { ComponentValue } from '../../types/shared/props';
 interface ListSelectionProps {
     modelValue?: ListModelValue;
     multiple?: boolean;

package/dist/composables/_internal/use-lock-scroll.d.ts

@@ -1,5 +1,12 @@
-export declare function useLockScroll(): {
+import type { MaybeElementRef } from '../../types/shared/utils';
+interface LockScrollOptions {
+    /** Whether to keep looking up the ancestor chain when the anchor itself does not scroll. */
+    walkAncestors?: boolean;
+}
+/** Locks the scroll container that `target` sits in. */
+export declare function useLockScroll(target: MaybeElementRef, options?: LockScrollOptions): {
     isLocked: () => boolean;
     lockScroll: () => void;
     unlockScroll: () => void;
 };
+export {};

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

@@ -1,51 +1,72 @@
 import { onScopeDispose } from "vue";
-import { hasScrollbar, isScrollable } from "../../utils/dom.js";
-import { cachedOff, cachedOn, preventDefaultScroll } from "../../utils/event.js";
-const rootLockClassNames = ["pointer-events-none"];
-const touchMoveOptions = { passive: false };
-let rootTouchMoveLocks = 0;
-let rootAddedClassNames = [];
-function lockRootScroll() {
-  const rootEl = document.documentElement;
-  const classNames = [...rootLockClassNames];
-  cachedOn(document, "touchmove", preventDefaultScroll, touchMoveOptions);
-  const { x: xScrollbar, y: yScrollbar } = hasScrollbar(rootEl);
-  const { x: xScrollable, y: yScrollable } = isScrollable(rootEl);
-  if (xScrollbar && xScrollable || yScrollbar && yScrollable) {
-    classNames.push("scrollbar-gutter-stable", "scrollbar-disabled");
-  }
-  rootAddedClassNames = classNames.filter((className) => !rootEl.classList.contains(className));
-  rootEl.classList.add(...classNames);
+import { getElement, hasScrollbar, isScrollable } from "../../utils/dom.js";
+const elementLocks = /* @__PURE__ */ new WeakMap();
+function lockElementScroll(el) {
+  const locked = elementLocks.get(el);
+  if (locked) {
+    locked.count++;
+    return true;
+  }
+  const { x: xScrollable, y: yScrollable } = isScrollable(el);
+  if (!xScrollable && !yScrollable) {
+    return false;
+  }
+  const { y: yScrollbar } = hasScrollbar(el);
+  const styles = { "overflow-x": "hidden", "overflow-y": "hidden" };
+  if (yScrollbar && yScrollable) {
+    styles["scrollbar-gutter"] = "stable";
+  }
+  const lockedStyles = Object.entries(styles).map(([property, lockedValue]) => ({
+    property,
+    lockedValue,
+    prevValue: el.style.getPropertyValue(property),
+    prevPriority: el.style.getPropertyPriority(property)
+  }));
+  for (const { property, lockedValue } of lockedStyles) {
+    el.style.setProperty(property, lockedValue, "important");
+  }
+  elementLocks.set(el, { count: 1, styles: lockedStyles });
+  return true;
 }
-function unlockRootScroll() {
-  cachedOff(document, "touchmove", preventDefaultScroll, touchMoveOptions);
-  document.documentElement.classList.remove(...rootAddedClassNames);
-  rootAddedClassNames = [];
+function unlockElementScroll(el) {
+  const lock = elementLocks.get(el);
+  if (!lock || --lock.count > 0) {
+    return;
+  }
+  for (const { property, lockedValue, prevValue, prevPriority } of lock.styles) {
+    if (el.style.getPropertyValue(property) !== lockedValue) {
+      continue;
+    }
+    if (prevValue) {
+      el.style.setProperty(property, prevValue, prevPriority);
+    } else {
+      el.style.removeProperty(property);
+    }
+  }
+  elementLocks.delete(el);
 }
-export function useLockScroll() {
-  let instanceTouchMoveLocks = 0;
+export function useLockScroll(target, options = {}) {
+  const { walkAncestors = false } = options;
+  const lockedElements = [];
   function isLocked() {
-    return rootTouchMoveLocks > 0;
+    return lockedElements.length > 0;
   }
   function lockScroll() {
-    if (rootTouchMoveLocks === 0) {
-      lockRootScroll();
+    for (let el = getElement(target); el; el = walkAncestors ? el.parentElement : null) {
+      if (lockElementScroll(el)) {
+        lockedElements.push(el);
+        return;
+      }
     }
-    rootTouchMoveLocks++;
-    instanceTouchMoveLocks++;
   }
   function unlockScroll() {
-    if (instanceTouchMoveLocks <= 0) {
-      return;
-    }
-    instanceTouchMoveLocks--;
-    rootTouchMoveLocks--;
-    if (!rootTouchMoveLocks) {
-      unlockRootScroll();
+    const el = lockedElements.pop();
+    if (el) {
+      unlockElementScroll(el);
     }
   }
   onScopeDispose(() => {
-    while (instanceTouchMoveLocks > 0) {
+    while (lockedElements.length > 0) {
       unlockScroll();
     }
   });

package/dist/composables/_internal/use-mention-editor.js

@@ -12,7 +12,7 @@ import {
   sanitizeMentionClipboardHtml,
   serializeMentionHtml,
   setMentionEditorContent
-} from "../../utils/mention-html.js";
+} from "../../utils/_internal/mention-html.js";
 export function useMentionEditor({
   editorRef,
   getModelValue,

package/dist/composables/_internal/use-message-group.d.ts

@@ -0,0 +1,22 @@
+import type { MessageItemConfig } from '../use-message.js';
+import type { MaybeRefOrGetter } from 'vue';
+interface UseMessageGroupOptions {
+    messages: MaybeRefOrGetter<MessageItemConfig[]>;
+    expand: MaybeRefOrGetter<boolean | undefined>;
+    onTimeout: (id: MessageItemConfig['id']) => void;
+}
+export declare function useMessageGroup({ messages, expand, onTimeout }: UseMessageGroupOptions): {
+    groupExpand: import("vue").ShallowRef<boolean | undefined, boolean | undefined>;
+    collapse: () => void;
+    onPointerEnter: () => void;
+    onPointerLeave: () => void;
+    startTimer: (message: MessageItemConfig) => void;
+    clearTimer: (message: MessageItemConfig) => void;
+    clearTimers: () => void;
+    pauseMessage: (message: MessageItemConfig) => void;
+    resumeMessage: (message: MessageItemConfig) => void;
+    pauseAll: () => void;
+    resumeAll: () => void;
+    handlePromiseMessage: (message: MessageItemConfig) => Promise<void>;
+};
+export {};

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/_internal/use-overlay-dialog.js

@@ -3,9 +3,7 @@ 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,
-    escapeDeactivates: props.closeOnPressEscape,
-    clickOutsideDeactivates: props.closeOnClickOverlay
+    autoFocusElement: props.autoFocusElement
   }));
   useFocusTrap(elementRef, focusTrapOptions);
   function closeOverlayIfNeed() {

package/dist/composables/_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;