pxd 0.0.64 → 0.1.2

package/dist/utils/helper.d.ts

@@ -0,0 +1,17 @@
+import type { ResponsiveValue } from '../types/shared/props';
+import type { Nullable } from '../types/shared/utils';
+import type { MaybeElement } from '../types/shared/utils';
+import type { ComponentPublicInstance, MaybeRefOrGetter } from 'vue';
+export declare function getUniqueId(prefix?: string): string;
+export declare function getFallbackValue<Variants extends Record<string, any>>(variant: Nullable<string>, variants: Variants, defaultVariant?: keyof Variants): any;
+export declare function getColorByThreshold(value: number, colors: Record<string, string>): string;
+export declare function getResponsiveValue<V extends string | number>(prop: ResponsiveValue<V> | undefined, xsValue: Nullable<V>, valueSetter: (acc: Record<string, V>, bp: any, v: V) => void): Record<string, V>;
+export type UnRefElementReturn<T extends MaybeElement = MaybeElement> = T extends ComponentPublicInstance ? Exclude<MaybeElement, ComponentPublicInstance> : T | undefined;
+export declare function toValue<T>(source: MaybeRefOrGetter<T>): T;
+type PromiseWithResolvers<T> = {
+    promise: Promise<T>;
+    resolve: (value: T | PromiseLike<T>) => void;
+    reject: (reason?: unknown) => void;
+};
+export declare function withResolvers<T>(): PromiseWithResolvers<T>;
+export {};

package/dist/utils/helper.js

@@ -0,0 +1,57 @@
+import { getCurrentInstance, unref } from "vue";
+import { isNil } from "./is.js";
+let fallbackId = 0;
+const uniqueIdMap = /* @__PURE__ */ new WeakMap();
+export function getUniqueId(prefix = "") {
+  const root = getCurrentInstance()?.proxy?.$root;
+  if (!root) {
+    return `${prefix}_pid_${fallbackId++}`;
+  }
+  const id = uniqueIdMap.get(root) ?? 0;
+  uniqueIdMap.set(root, id + 1);
+  return `${prefix}_pid_${id}`;
+}
+export function getFallbackValue(variant, variants, defaultVariant = "default") {
+  return (variant ? variants[variant] : null) ?? variants[defaultVariant];
+}
+export function getColorByThreshold(value, colors) {
+  const keys = Object.keys(colors).sort((a, b) => Number(a) - Number(b));
+  const keyLength = keys.length;
+  if (keyLength === 0) {
+    return "";
+  }
+  for (let i = 0; i < keyLength; i++) {
+    if (value < Number(keys[i])) {
+      return colors[keys[Math.max(0, i - 1)]];
+    }
+  }
+  return colors[keys.at(-1)];
+}
+export function getResponsiveValue(prop, xsValue, valueSetter) {
+  const formatted = Object.assign(
+    isNil(xsValue) ? {} : { xs: xsValue },
+    typeof prop === "object" ? prop : {}
+  );
+  return Object.entries(formatted).reduce(
+    (acc, [bp, value]) => {
+      valueSetter(acc, bp, value);
+      return acc;
+    },
+    {}
+  );
+}
+export function toValue(source) {
+  return typeof source === "function" ? source() : unref(source);
+}
+export function withResolvers() {
+  if (typeof Promise.withResolvers === "function") {
+    return Promise.withResolvers();
+  }
+  let resolve;
+  let reject;
+  const promise = new Promise((res, rej) => {
+    resolve = res;
+    reject = rej;
+  });
+  return { promise, resolve, reject };
+}

package/dist/utils/is.d.ts

@@ -1,4 +1,8 @@
 export declare const isVue3: () => boolean;
 export declare const isServer: () => boolean;
 export declare const isTouchDevice: () => boolean;
-export declare function isIOS(): boolean | "";
+export declare function isIOS(): boolean;
+export declare const isNil: (value: unknown) => value is null | undefined;
+export declare const isNotNil: <T>(value: T | null | undefined) => value is T;
+export declare const isUndefined: (value: unknown) => value is undefined;
+export declare const isNumber: (value: unknown) => value is number;

package/dist/utils/is.js

@@ -3,7 +3,15 @@ export const isVue3 = () => version.startsWith("3");
 export const isServer = () => typeof document === "undefined";
 export const isTouchDevice = () => isServer() ? false : "ontouchstart" in document;
 export function isIOS() {
-  return !isServer() && navigator?.userAgent && (/iP(?:ad|hone|od)/.test(navigator.userAgent) || // The new iPad Pro Gen3 does not identify itself as iPad, but as Macintosh.
+  if (isServer()) {
+    return false;
+  }
+  const userAgent = navigator?.userAgent || "";
+  return /iP(?:ad|hone|od)/.test(userAgent) || // The new iPad Pro Gen3 does not identify itself as iPad, but as Macintosh.
   // https://github.com/vueuse/vueuse/issues/3577
-  navigator?.maxTouchPoints > 2 && /iPad|Macintosh/.test(navigator.userAgent));
+  navigator?.maxTouchPoints > 2 && /iPad|Macintosh/.test(userAgent);
 }
+export const isNil = (value) => value == null;
+export const isNotNil = (value) => value != null;
+export const isUndefined = (value) => value === void 0;
+export const isNumber = (value) => typeof value === "number";

package/dist/utils/mention-html.d.ts

@@ -0,0 +1,33 @@
+export declare const MENTION_TAG = "MENTION";
+export declare const MENTION_TAG_LOWER: string;
+/** The trigger a chip falls back to when its markup carries no `trigger` attribute. */
+export declare const DEFAULT_TRIGGER = "@";
+/**
+ * A collapsed selection sitting right after a `contenteditable=false` element is
+ * not representable; Android resolves it *into* the element, the IME then finds
+ * no editable context and hides the keyboard. A zero-width space after every chip
+ * gives the caret a real text node to live in. It is stripped on serialize, so it
+ * never reaches the public HTML, the v-model or the server.
+ */
+export declare const CARET_ANCHOR = "\u200B";
+export declare function createCaretAnchor(): Text;
+export declare function isMentionElement(node: Node | null | undefined): boolean;
+/**
+ * Every chip in `root`. Pressing Enter nests content in block elements, so the
+ * editor's direct children are not enough.
+ */
+export declare function queryMentionElements(root: ParentNode): HTMLElement[];
+export declare function getMentionLabel(el: HTMLElement): string;
+export declare function createMentionElement(key: string, label: string, trigger?: string): HTMLElement;
+/** Escape plain text for paste fallback (newlines → `<br>`). */
+export declare function escapePlainTextAsHtml(text: string): string;
+/**
+ * Serialize an editor DOM tree into the public HTML contract:
+ * plain text + `<mention key="...">label</mention>` only.
+ */
+export declare function serializeMentionHtml(root: HTMLElement): string;
+/**
+ * Paste sanitizer: keep legal `<mention key>` nodes; everything else becomes text.
+ */
+export declare function sanitizeMentionClipboardHtml(html: string): DocumentFragment;
+export declare function setMentionEditorContent(root: HTMLElement, html: string): void;

package/dist/utils/mention-html.js

@@ -0,0 +1,146 @@
+export const MENTION_TAG = "MENTION";
+export const MENTION_TAG_LOWER = MENTION_TAG.toLowerCase();
+const BLOCK_TAGS = /* @__PURE__ */ new Set(["DIV", "P", "LI", "PRE"]);
+export const DEFAULT_TRIGGER = "@";
+export const CARET_ANCHOR = "\u200B";
+export function createCaretAnchor() {
+  return document.createTextNode(CARET_ANCHOR);
+}
+export function isMentionElement(node) {
+  return !!node && node.nodeType === Node.ELEMENT_NODE && node.tagName === MENTION_TAG;
+}
+export function queryMentionElements(root) {
+  return Array.from(root.querySelectorAll(MENTION_TAG_LOWER));
+}
+export function getMentionLabel(el) {
+  const trigger = el.getAttribute("trigger") || DEFAULT_TRIGGER;
+  const text = el.textContent ?? "";
+  return text.startsWith(trigger) ? text.slice(trigger.length) : text;
+}
+export function createMentionElement(key, label, trigger = DEFAULT_TRIGGER) {
+  const el = document.createElement(MENTION_TAG_LOWER);
+  el.setAttribute("key", key);
+  if (trigger !== DEFAULT_TRIGGER) {
+    el.setAttribute("trigger", trigger);
+  }
+  el.setAttribute("contenteditable", "false");
+  el.className = "pxd-mention--chip";
+  el.textContent = `${trigger}${label}`;
+  return el;
+}
+function escapeMentionText(text) {
+  return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function escapeMentionAttr(text) {
+  return escapeMentionText(text).replace(/"/g, "&quot;");
+}
+export function escapePlainTextAsHtml(text) {
+  return escapeMentionText(text).replace(/\n/g, "<br>");
+}
+export function serializeMentionHtml(root) {
+  let result = "";
+  function startLine() {
+    if (result && !result.endsWith("\n")) {
+      result += "\n";
+    }
+  }
+  function walk(node) {
+    if (node.nodeType === Node.TEXT_NODE) {
+      result += (node.textContent ?? "").replace(/\u00A0/g, " ").replace(/\u200B/g, "");
+      return;
+    }
+    if (node.nodeType !== Node.ELEMENT_NODE) {
+      return;
+    }
+    const el = node;
+    if (isMentionElement(el)) {
+      const key = el.getAttribute("key") ?? "";
+      const label = getMentionLabel(el);
+      const trigger = el.getAttribute("trigger");
+      const triggerAttr = trigger ? ` trigger="${escapeMentionAttr(trigger)}"` : "";
+      result += `<${MENTION_TAG_LOWER} key="${escapeMentionAttr(key)}"${triggerAttr}>${escapeMentionText(label)}</${MENTION_TAG_LOWER}>`;
+      return;
+    }
+    if (el.tagName === "BR") {
+      result += "\n";
+      return;
+    }
+    if (BLOCK_TAGS.has(el.tagName) && (el.textContent || el.querySelector(MENTION_TAG_LOWER))) {
+      startLine();
+    }
+    for (const child of Array.from(el.childNodes)) {
+      walk(child);
+    }
+  }
+  for (const child of Array.from(root.childNodes)) {
+    walk(child);
+  }
+  return result === "\n" ? "" : result;
+}
+function parseMentionHtml(html) {
+  const fragment = document.createDocumentFragment();
+  if (!html) {
+    return fragment;
+  }
+  const doc = new DOMParser().parseFromString(`<body>${html}</body>`, "text/html");
+  appendSanitizedChildren(doc.body, fragment);
+  return fragment;
+}
+export function sanitizeMentionClipboardHtml(html) {
+  const fragment = document.createDocumentFragment();
+  const doc = new DOMParser().parseFromString(html, "text/html");
+  appendSanitizedChildren(doc.body, fragment);
+  return fragment;
+}
+function appendSanitizedChildren(source, target) {
+  for (const child of Array.from(source.childNodes)) {
+    if (child.nodeType === Node.TEXT_NODE) {
+      const text = child.textContent ?? "";
+      if (text) {
+        appendPlainText(target, text);
+      }
+      continue;
+    }
+    if (child.nodeType !== Node.ELEMENT_NODE) {
+      continue;
+    }
+    const el = child;
+    if (isMentionElement(el)) {
+      const key = el.getAttribute("key");
+      if (key != null && key !== "") {
+        const trigger = el.getAttribute("trigger") || DEFAULT_TRIGGER;
+        target.appendChild(createMentionElement(key, getMentionLabel(el), trigger));
+        target.appendChild(createCaretAnchor());
+        continue;
+      }
+    }
+    if (el.tagName === "BR") {
+      target.appendChild(document.createElement("br"));
+      continue;
+    }
+    appendSanitizedChildren(el, target);
+  }
+}
+function appendPlainText(target, text) {
+  const parts = text.split("\n");
+  for (let i = 0; i < parts.length; i++) {
+    if (parts[i]) {
+      const last = target.lastChild;
+      if (last?.nodeType === Node.TEXT_NODE) {
+        last.textContent = (last.textContent ?? "") + parts[i];
+      } else {
+        target.appendChild(document.createTextNode(parts[i]));
+      }
+    }
+    if (i < parts.length - 1) {
+      target.appendChild(document.createElement("br"));
+    }
+  }
+}
+export function setMentionEditorContent(root, html) {
+  root.replaceChildren();
+  root.appendChild(parseMentionHtml(html));
+  if (!root.childNodes.length) {
+    root.appendChild(document.createElement("br"));
+  }
+}

package/dist/utils/merge.d.ts

@@ -0,0 +1 @@
+export declare function mergeDeep<T extends object>(target: T, source: object): T;

package/dist/utils/merge.js

@@ -0,0 +1,19 @@
+import { isUndefined } from "./is.js";
+function isMergeable(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function mergeObjects(target, source) {
+  const merged = { ...target };
+  for (const key of Object.keys(source)) {
+    const sourceValue = source[key];
+    if (isUndefined(sourceValue)) {
+      continue;
+    }
+    const targetValue = merged[key];
+    merged[key] = isMergeable(targetValue) && isMergeable(sourceValue) ? mergeObjects(targetValue, sourceValue) : sourceValue;
+  }
+  return merged;
+}
+export function mergeDeep(target, source) {
+  return mergeObjects(target, source);
+}

package/dist/utils/observer.d.ts

@@ -0,0 +1,42 @@
+import type { Nullable } from '../types/shared/utils';
+import type { MaybeRefOrGetter, Ref } from 'vue';
+export type TargetRef = MaybeRefOrGetter<Nullable<HTMLElement>> | MaybeRefOrGetter<Nullable<HTMLElement>>[] | MaybeRefOrGetter<Nullable<HTMLElement>[]>;
+/**
+ * The only native method this factory calls itself. Target bookkeeping goes through
+ * `ObserverSpec.sync`, because `MutationObserver` has no `unobserve`.
+ */
+export interface AnyObserver {
+    disconnect(): void;
+}
+/** Every native entry reports the node it was produced for. */
+export interface AnyObserverEntry {
+    target: Node;
+}
+export interface ObservedItem<TItem> {
+    /** The native entry. A `MutationRecord` for mutation observers. */
+    entry: TItem;
+    /** The registered element this entry belongs to. */
+    target: HTMLElement;
+}
+export interface ObserverResults<TObserver> {
+    observer: Ref<TObserver | undefined>;
+    stop: () => void;
+}
+export interface ObserverSpec<TObserver extends AnyObserver, TOptions, TItem extends AnyObserverEntry> {
+    /** Options reduced to a stable string, so an equal setup shares one observer. */
+    normalize: (options: TOptions | undefined) => string;
+    create: (callback: (items: TItem[], observer: TObserver) => void, options: TOptions | undefined) => TObserver | undefined;
+    /**
+     * Applies the move from `prev` to `next` on an existing observer. Pooled specs are
+     * driven one element at a time (`[]` to `[el]` adds, `[el]` to `[]` removes).
+     */
+    sync: (observer: TObserver, prev: HTMLElement[], next: HTMLElement[], options: TOptions | undefined) => void;
+    /** Attributes a native item to the registered element it was reported for. */
+    resolveTarget: (item: TItem, observed: readonly HTMLElement[]) => HTMLElement | undefined;
+    /**
+     * Share one native instance across every caller using equal options. Only valid when
+     * items carry their own target, which rules out mutation observers.
+     */
+    pooled?: boolean;
+}
+export declare function createObserver<TObserver extends AnyObserver, TOptions, TItem extends AnyObserverEntry>(spec: ObserverSpec<TObserver, TOptions, TItem>): (target: TargetRef, callback: (items: ObservedItem<TItem>[]) => void, options?: MaybeRefOrGetter<TOptions>) => ObserverResults<TObserver>;

package/dist/utils/observer.js

@@ -0,0 +1,173 @@
+import { onScopeDispose, shallowRef, watch } from "vue";
+import { getElement } from "./dom.js";
+import { toArray } from "./format.js";
+import { toValue } from "./helper.js";
+import { isNotNil, isServer } from "./is.js";
+function resolveTargets(source) {
+  return [
+    ...new Set(
+      toArray(toValue(source)).map((i) => getElement(i)).filter(isNotNil)
+    )
+  ];
+}
+function isSameElements(a, b) {
+  return a.length === b.length && a.every((el, i) => el === b[i]);
+}
+export function createObserver(spec) {
+  const pools = /* @__PURE__ */ new Map();
+  return function observerWrapper(target, callback, options) {
+    const observer = shallowRef();
+    const subscription = { callback };
+    let pool;
+    let observed = [];
+    let activeKey;
+    function attach(el) {
+      let subs = pool.targets.get(el);
+      if (!subs) {
+        pool.targets.set(el, subs = /* @__PURE__ */ new Set());
+        spec.sync(pool.observer, [], [el], pool.options);
+      }
+      subs.add(subscription);
+    }
+    function detach(el) {
+      const subs = pool.targets.get(el);
+      subs?.delete(subscription);
+      if (subs && !subs.size) {
+        pool.targets.delete(el);
+        spec.sync(pool.observer, [el], [], pool.options);
+      }
+    }
+    function dispatch(items) {
+      const batches = /* @__PURE__ */ new Map();
+      for (const entry of items) {
+        const subs = pool?.targets.get(entry.target);
+        if (!subs) {
+          continue;
+        }
+        for (const sub of subs) {
+          const batch = batches.get(sub);
+          if (batch) {
+            batch.push(entry);
+          } else {
+            batches.set(sub, [entry]);
+          }
+        }
+      }
+      for (const [sub, batch] of batches) {
+        sub.callback(batch.map((entry) => ({ entry, target: entry.target })));
+      }
+    }
+    function acquire(key, value) {
+      let entry = pools.get(key);
+      if (!entry) {
+        const created = spec.create(dispatch, value);
+        if (!created) {
+          return void 0;
+        }
+        entry = { observer: created, options: value, count: 0, targets: /* @__PURE__ */ new Map() };
+        pools.set(key, entry);
+      }
+      entry.count++;
+      return entry;
+    }
+    function cleanup() {
+      if (pool) {
+        observed.forEach(detach);
+        pool.count--;
+        if (pool.count <= 0) {
+          pool.observer.disconnect();
+          pools.delete(activeKey);
+        }
+      } else {
+        observer.value?.disconnect();
+      }
+      pool = void 0;
+      observer.value = void 0;
+      observed = [];
+    }
+    function emitDirectly(items) {
+      const payload = items.map((entry) => {
+        const target2 = spec.resolveTarget(entry, observed);
+        return target2 ? { entry, target: target2 } : void 0;
+      }).filter(isNotNil);
+      if (payload.length) {
+        subscription.callback(payload);
+      }
+    }
+    const unwatch = watch(
+      [() => resolveTargets(target), () => spec.normalize(toValue(options))],
+      ([newTargets, optionKey]) => {
+        if (isServer()) {
+          return;
+        }
+        let targetsChanged = !isSameElements(observed, newTargets);
+        if (optionKey !== activeKey) {
+          activeKey = optionKey;
+          cleanup();
+          targetsChanged = true;
+        }
+        if (!targetsChanged) {
+          return;
+        }
+        if (spec.pooled) {
+          if (!newTargets.length) {
+            observed.forEach(detach);
+            observed = [];
+            return;
+          }
+          if (!pool) {
+            pool = acquire(optionKey, toValue(options));
+            if (!pool) {
+              return;
+            }
+            observer.value = pool.observer;
+            observed = [];
+          }
+          observed.forEach((el) => {
+            if (!newTargets.includes(el)) {
+              detach(el);
+            }
+          });
+          newTargets.forEach((el) => {
+            if (!observed.includes(el)) {
+              attach(el);
+            }
+          });
+          observed = newTargets;
+          return;
+        }
+        if (!newTargets.length) {
+          if (observer.value) {
+            spec.sync(observer.value, observed, newTargets, toValue(options));
+            observed = [];
+          }
+          return;
+        }
+        if (!observer.value) {
+          observer.value = spec.create(emitDirectly, toValue(options));
+          if (!observer.value) {
+            return;
+          }
+          observed = [];
+        }
+        spec.sync(observer.value, observed, newTargets, toValue(options));
+        observed = newTargets;
+      },
+      {
+        immediate: true,
+        flush: "post"
+      }
+    );
+    function stop() {
+      cleanup();
+      unwatch();
+    }
+    onScopeDispose(() => {
+      stop();
+    });
+    return {
+      observer,
+      stop
+    };
+  };
+}

package/dist/utils/timing.d.ts

@@ -1,8 +1,21 @@
-import type { Callback } from '../types/shared';
-export { debounce } from 'es-toolkit/function';
-export { throttle } from 'es-toolkit/function';
-interface ThrottleByRafReturnType<T extends Callback> {
-    (...args: Parameters<T>): void;
+export interface DebounceOptions {
+    signal?: AbortSignal;
+    edges?: Array<'leading' | 'trailing'>;
+}
+export interface DebouncedFunction<F extends (...args: any[]) => void> {
+    (...args: Parameters<F>): void;
+    schedule: () => void;
+    cancel: () => void;
+    flush: () => void;
+}
+export interface ThrottleOptions {
+    signal?: AbortSignal;
+    edges?: Array<'leading' | 'trailing'>;
+}
+export interface ThrottledFunction<F extends (...args: any[]) => void> {
+    (...args: Parameters<F>): void;
     cancel: () => void;
+    flush: () => void;
 }
-export declare function throttleByRaf<T extends Callback>(callback: T): ThrottleByRafReturnType<T>;
+export declare function debounce<F extends (...args: any[]) => void>(func: F, debounceMs: number, { signal, edges }?: DebounceOptions): DebouncedFunction<F>;
+export declare function throttle<F extends (...args: any[]) => void>(func: F, throttleMs: number, { signal, edges }?: ThrottleOptions): ThrottledFunction<F>;

package/dist/utils/timing.js

@@ -1,22 +1,80 @@
-import { raf, caf } from "./event.js";
-export { debounce } from "es-toolkit/function";
-export { throttle } from "es-toolkit/function";
-export function throttleByRaf(callback) {
-  let animationFrameId = 0;
-  const throttle2 = (...args) => {
-    if (animationFrameId) {
+export function debounce(func, debounceMs, { signal, edges } = {}) {
+  let pendingInvoke = null;
+  let timeoutId = null;
+  const leading = edges?.includes("leading") ?? false;
+  const trailing = edges?.includes("trailing") ?? true;
+  const invoke = () => {
+    if (!pendingInvoke) {
       return;
     }
-    animationFrameId = raf(() => {
-      animationFrameId = 0;
-      callback(...args);
-    });
+    pendingInvoke();
+    pendingInvoke = null;
   };
-  throttle2.cancel = () => {
-    if (animationFrameId) {
-      caf(animationFrameId);
-      animationFrameId = 0;
+  const cancelTimer = () => {
+    if (timeoutId === null) {
+      return;
+    }
+    clearTimeout(timeoutId);
+    timeoutId = null;
+  };
+  const cancel = () => {
+    cancelTimer();
+    pendingInvoke = null;
+  };
+  const schedule = () => {
+    cancelTimer();
+    timeoutId = setTimeout(() => {
+      timeoutId = null;
+      if (trailing) {
+        invoke();
+      }
+      cancel();
+    }, debounceMs);
+  };
+  const debounced = function(...args) {
+    if (signal?.aborted) {
+      return;
+    }
+    pendingInvoke = () => func.apply(this, args);
+    const isFirstCall = !timeoutId;
+    schedule();
+    if (leading && isFirstCall) {
+      invoke();
+    }
+  };
+  debounced.schedule = schedule;
+  debounced.cancel = cancel;
+  debounced.flush = invoke;
+  signal?.addEventListener("abort", cancel, { once: true });
+  return debounced;
+}
+export function throttle(func, throttleMs, { signal, edges = ["leading", "trailing"] } = {}) {
+  let pendingAt = null;
+  const debounced = debounce(
+    function(...args) {
+      pendingAt = Date.now();
+      func.apply(this, args);
+    },
+    throttleMs,
+    { signal, edges }
+  );
+  const throttled = function(...args) {
+    if (signal?.aborted) {
+      return;
+    }
+    if (pendingAt === null) {
+      pendingAt = Date.now();
+    }
+    if (Date.now() - pendingAt >= throttleMs) {
+      pendingAt = Date.now();
+      func.apply(this, args);
+      debounced.cancel();
+      debounced.schedule();
+      return;
     }
+    debounced.apply(this, args);
   };
-  return throttle2;
+  throttled.cancel = debounced.cancel;
+  throttled.flush = debounced.flush;
+  return throttled;
 }