pxd 0.0.64 → 0.1.2

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

@@ -0,0 +1,508 @@
+import { onBeforeUnmount, shallowRef, watch } from "vue";
+import {
+  CARET_ANCHOR,
+  DEFAULT_TRIGGER,
+  MENTION_TAG_LOWER,
+  createCaretAnchor,
+  createMentionElement,
+  escapePlainTextAsHtml,
+  getMentionLabel,
+  isMentionElement,
+  queryMentionElements,
+  sanitizeMentionClipboardHtml,
+  serializeMentionHtml,
+  setMentionEditorContent
+} from "../../utils/mention-html.js";
+export function useMentionEditor({
+  editorRef,
+  getModelValue,
+  getTriggers,
+  isDisabled,
+  onUpdate,
+  onTrigger,
+  onSubmit,
+  onMentionClick
+}) {
+  const isComposing = shallowRef(false);
+  const isEmpty = shallowRef(true);
+  let triggerRange = null;
+  let triggerKeyword = DEFAULT_TRIGGER;
+  let restoreRange = null;
+  let restoreTimer = null;
+  let lastEmittedHtml = "";
+  let pendingAtInsert = false;
+  function syncEmptyState(html) {
+    isEmpty.value = html.trim() === "";
+  }
+  function ensureCaretAnchors() {
+    const editor = editorRef.value;
+    if (!editor) {
+      return;
+    }
+    for (const node of queryMentionElements(editor)) {
+      const next = node.nextSibling;
+      if (next?.nodeType === Node.TEXT_NODE) {
+        const text = next;
+        if (!text.data.includes(CARET_ANCHOR)) {
+          text.data = CARET_ANCHOR + text.data;
+        }
+      } else {
+        node.parentNode?.insertBefore(createCaretAnchor(), next ?? null);
+      }
+    }
+  }
+  function emitHTML() {
+    if (!editorRef.value) {
+      return;
+    }
+    const html = serializeMentionHtml(editorRef.value);
+    syncEmptyState(html);
+    lastEmittedHtml = html;
+    onUpdate(html);
+  }
+  function applyHTML(html) {
+    if (!editorRef.value) {
+      return;
+    }
+    clearTriggerRange();
+    cancelScheduledRestore();
+    setMentionEditorContent(editorRef.value, html);
+    const serialized = serializeMentionHtml(editorRef.value);
+    syncEmptyState(serialized);
+    lastEmittedHtml = serialized;
+  }
+  function clearTriggerRange() {
+    triggerRange = null;
+    triggerKeyword = DEFAULT_TRIGGER;
+    restoreRange = null;
+  }
+  function cancelScheduledRestore() {
+    if (restoreTimer != null) {
+      clearTimeout(restoreTimer);
+      restoreTimer = null;
+    }
+  }
+  function applyRestoreCaret() {
+    restoreTimer = null;
+    if (!editorRef.value) {
+      clearTriggerRange();
+      return;
+    }
+    const range = restoreRange;
+    clearTriggerRange();
+    editorRef.value.focus({ preventScroll: true });
+    if (!range) {
+      return;
+    }
+    try {
+      if (!editorRef.value.contains(range.startContainer)) {
+        return;
+      }
+      const selection = window.getSelection();
+      selection?.removeAllRanges();
+      selection?.addRange(range);
+    } catch {
+    }
+  }
+  function restoreCaret() {
+    cancelScheduledRestore();
+    restoreTimer = setTimeout(() => {
+      applyRestoreCaret();
+    }, 0);
+  }
+  function sortedTriggers() {
+    return getTriggers().slice().sort((a, b) => b.length - a.length);
+  }
+  function findTriggerBeforeCaret(caret) {
+    for (const keyword of sortedTriggers()) {
+      const start = caret.startOffset - keyword.length;
+      if (start < 0) {
+        continue;
+      }
+      const range = caret.cloneRange();
+      try {
+        range.setStart(range.startContainer, start);
+      } catch {
+        continue;
+      }
+      const candidate = { keyword, range };
+      if (range.toString() !== keyword) {
+        continue;
+      }
+      if (isTriggerBoundary(range)) {
+        return candidate;
+      }
+    }
+    return null;
+  }
+  function saveTriggerRangeFromSelection() {
+    const selection = window.getSelection();
+    if (!selection || selection.rangeCount === 0 || !selection.isCollapsed) {
+      return false;
+    }
+    const caret = selection.getRangeAt(0);
+    const found = findTriggerBeforeCaret(caret);
+    if (!found) {
+      return false;
+    }
+    restoreRange = caret.cloneRange();
+    triggerRange = found.range;
+    triggerKeyword = found.keyword;
+    return true;
+  }
+  function isTriggerBoundary(keywordRange) {
+    const before = boundaryBefore(keywordRange.startContainer, keywordRange.startOffset);
+    if (before === "start" || before === "mention") {
+      return true;
+    }
+    return /\s/.test(before) || before === CARET_ANCHOR;
+  }
+  function boundaryBefore(container, offset) {
+    if (container.nodeType === Node.TEXT_NODE) {
+      if (offset > 0) {
+        return (container.textContent ?? "").charAt(offset - 1);
+      }
+      container = container.previousSibling;
+    } else if (container.nodeType === Node.ELEMENT_NODE) {
+      container = offset > 0 ? container.childNodes[offset - 1] : container.previousSibling;
+    }
+    while (container?.nodeType === Node.TEXT_NODE) {
+      const text = container.textContent ?? "";
+      if (text.length) {
+        return text.charAt(text.length - 1);
+      }
+      container = container.previousSibling;
+    }
+    if (!container) {
+      return "start";
+    }
+    if (isMentionElement(container)) {
+      return "mention";
+    }
+    return container.nodeName === "BR" ? "\n" : "start";
+  }
+  function detectTriggerAfterInput() {
+    if (isComposing.value || isDisabled() || !pendingAtInsert) {
+      return;
+    }
+    pendingAtInsert = false;
+    if (saveTriggerRangeFromSelection()) {
+      onTrigger(triggerKeyword);
+    }
+  }
+  function isInsertInputType(inputType) {
+    return inputType === "insertText" || inputType === "insertCompositionText" || inputType === "insertReplacementText";
+  }
+  function notePendingAtInsert(ev) {
+    if (isInsertInputType(ev.inputType) && ev.data != null && getTriggers().some((keyword) => ev.data?.includes(keyword))) {
+      pendingAtInsert = true;
+      return;
+    }
+    pendingAtInsert = false;
+  }
+  function isBackwardDeleteInputType(inputType) {
+    return inputType === "deleteEntireSoftLine" || inputType.endsWith("Backward");
+  }
+  function insertMention(key, label) {
+    if (!editorRef.value || isDisabled()) {
+      return false;
+    }
+    const range = triggerRange;
+    if (!range || !editorRef.value.contains(range.startContainer)) {
+      return false;
+    }
+    range.deleteContents();
+    const mention = createMentionElement(key, label, triggerKeyword);
+    range.insertNode(mention);
+    const sibling = mention.nextSibling;
+    let anchor;
+    if (sibling?.nodeType === Node.TEXT_NODE) {
+      const text = sibling;
+      text.textContent = CARET_ANCHOR + (text.textContent ?? "");
+      anchor = text;
+    } else {
+      anchor = createCaretAnchor();
+      mention.parentNode?.insertBefore(anchor, sibling ?? null);
+    }
+    const caret = document.createRange();
+    caret.setStart(anchor, 1);
+    caret.collapse(true);
+    triggerRange = null;
+    restoreRange = caret;
+    emitHTML();
+    return true;
+  }
+  function closestMention(node) {
+    if (!node || !editorRef.value) {
+      return null;
+    }
+    if (isMentionElement(node)) {
+      return node;
+    }
+    const el = node.nodeType === Node.ELEMENT_NODE ? node : node.parentElement;
+    const mention = el?.closest?.(MENTION_TAG_LOWER);
+    if (!mention || !editorRef.value.contains(mention) || !isMentionElement(mention)) {
+      return null;
+    }
+    return mention;
+  }
+  function retainEditorFocus() {
+    editorRef.value?.focus({ preventScroll: true });
+  }
+  function placeCaret(node, offset) {
+    const selection = window.getSelection();
+    const range = document.createRange();
+    range.setStart(node, offset);
+    range.collapse(true);
+    selection?.removeAllRanges();
+    selection?.addRange(range);
+  }
+  function placeCaretAfter(node) {
+    const selection = window.getSelection();
+    const range = document.createRange();
+    range.setStartAfter(node);
+    range.collapse(true);
+    selection?.removeAllRanges();
+    selection?.addRange(range);
+  }
+  function deleteMentionElement(mention) {
+    const editor = editorRef.value;
+    const parent = mention.parentNode;
+    if (!editor || !parent || !editor.contains(mention)) {
+      return;
+    }
+    const before = mention.previousSibling;
+    const next = mention.nextSibling;
+    cancelScheduledRestore();
+    clearTriggerRange();
+    mention.remove();
+    retainEditorFocus();
+    if (before?.nodeType === Node.TEXT_NODE && editor.contains(before)) {
+      placeCaret(before, before.textContent?.length ?? 0);
+    } else if (before && editor.contains(before)) {
+      placeCaretAfter(before);
+    } else if (next && editor.contains(next)) {
+      placeCaret(next, 0);
+    }
+    emitHTML();
+  }
+  function tryDeleteBackward() {
+    if (!editorRef.value) {
+      return false;
+    }
+    const selection = window.getSelection();
+    if (!selection || selection.rangeCount === 0) {
+      return false;
+    }
+    const range = selection.getRangeAt(0);
+    let handled = false;
+    if (!selection.isCollapsed) {
+      const mention = closestMention(range.startContainer) || closestMention(range.endContainer) || mentionOwningAnchorDelete(range);
+      if (mention) {
+        deleteMentionElement(mention);
+        handled = true;
+      }
+    } else {
+      const { startContainer, startOffset } = range;
+      const insideMention = closestMention(startContainer);
+      if (insideMention && (insideMention === startContainer || insideMention.contains(startContainer))) {
+        deleteMentionElement(insideMention);
+        handled = true;
+      } else if (startContainer.nodeType === Node.TEXT_NODE) {
+        const textNode = startContainer;
+        const prev = textNode.previousSibling;
+        if (isMentionElement(prev) && startOffset === 0) {
+          deleteMentionElement(prev);
+          handled = true;
+        }
+      } else if (startContainer.nodeType === Node.ELEMENT_NODE) {
+        const prev = startContainer.childNodes[startOffset - 1];
+        if (isMentionElement(prev)) {
+          deleteMentionElement(prev);
+          handled = true;
+        }
+      }
+    }
+    return handled;
+  }
+  function mentionOwningAnchorDelete(range) {
+    const { startContainer, endContainer, startOffset } = range;
+    if (startContainer.nodeType !== Node.TEXT_NODE) {
+      return null;
+    }
+    const text = startContainer;
+    const anchorIndex = text.data.indexOf(CARET_ANCHOR);
+    if (anchorIndex < 0 || anchorIndex < startOffset) {
+      return null;
+    }
+    const to = endContainer === startContainer ? range.endOffset : text.data.length;
+    if (anchorIndex >= to) {
+      return null;
+    }
+    const prev = text.previousSibling;
+    return isMentionElement(prev) ? prev : null;
+  }
+  function resolvePasteRange(selection) {
+    if (selection.rangeCount > 0) {
+      return selection.getRangeAt(0);
+    }
+    const range = document.createRange();
+    range.selectNodeContents(editorRef.value);
+    return range;
+  }
+  function onPaste(ev) {
+    if (isDisabled()) {
+      return;
+    }
+    ev.preventDefault();
+    const clipboard = ev.clipboardData;
+    const html = clipboard?.getData("text/html");
+    const plain = clipboard?.getData("text/plain") ?? "";
+    const selection = window.getSelection();
+    if (!selection) {
+      return;
+    }
+    const range = resolvePasteRange(selection);
+    range.deleteContents();
+    const fragment = sanitizeMentionClipboardHtml(html || escapePlainTextAsHtml(plain));
+    range.insertNode(fragment);
+    range.collapse(false);
+    selection.removeAllRanges();
+    selection.addRange(range);
+    ensureCaretAnchors();
+    emitHTML();
+  }
+  function onBeforeInput(ev) {
+    if (isDisabled()) {
+      ev.preventDefault();
+      return;
+    }
+    notePendingAtInsert(ev);
+    if (!isBackwardDeleteInputType(ev.inputType)) {
+      return;
+    }
+    if (!isComposing.value && tryDeleteBackward()) {
+      ev.preventDefault();
+    }
+  }
+  function onKeydown(ev) {
+    if (isDisabled()) {
+      return;
+    }
+    if (ev.key === "Enter" && !ev.shiftKey && !ev.isComposing) {
+      ev.preventDefault();
+      if (editorRef.value) {
+        onSubmit(serializeMentionHtml(editorRef.value));
+      }
+      return;
+    }
+    if (ev.key === "Backspace" || ev.key === "Delete") {
+      pendingAtInsert = false;
+    } else if (!ev.isComposing && getTriggers().includes(ev.key)) {
+      pendingAtInsert = true;
+    }
+    if (ev.key === "Backspace" && !ev.isComposing) {
+      if (tryDeleteBackward()) {
+        ev.preventDefault();
+      }
+    }
+  }
+  function onInput() {
+    if (isComposing.value) {
+      return;
+    }
+    ensureCaretAnchors();
+    emitHTML();
+    detectTriggerAfterInput();
+  }
+  function onCompositionStart() {
+    isComposing.value = true;
+  }
+  function onCompositionEnd() {
+    isComposing.value = false;
+    ensureCaretAnchors();
+    emitHTML();
+    detectTriggerAfterInput();
+  }
+  function onCopyOrCut(ev) {
+    const editor = editorRef.value;
+    const clipboard = ev.clipboardData;
+    const selection = window.getSelection();
+    if (!editor || !clipboard || !selection || selection.rangeCount === 0) {
+      return;
+    }
+    const range = selection.getRangeAt(0);
+    const source = document.createElement("div");
+    if (range.collapsed) {
+      for (const child of Array.from(editor.childNodes)) {
+        source.appendChild(child.cloneNode(true));
+      }
+    } else {
+      source.appendChild(range.cloneContents());
+    }
+    clipboard.setData("text/html", `<meta charset="utf-8">${serializeMentionHtml(source)}`);
+    clipboard.setData("text/plain", (source.textContent ?? "").replace(/\u200B/g, ""));
+    ev.preventDefault();
+    if (ev.type === "cut") {
+      const selection2 = window.getSelection();
+      if (selection2 && selection2.rangeCount > 0) {
+        selection2.getRangeAt(0).deleteContents();
+        ensureCaretAnchors();
+        emitHTML();
+      }
+    }
+  }
+  function onClick(ev) {
+    const target = ev.target;
+    const mention = target?.closest?.(MENTION_TAG_LOWER);
+    if (!mention || !editorRef.value?.contains(mention) || !isMentionElement(mention)) {
+      return;
+    }
+    onMentionClick({
+      key: mention.getAttribute("key") ?? "",
+      label: getMentionLabel(mention),
+      trigger: mention.getAttribute("trigger") || DEFAULT_TRIGGER,
+      event: ev
+    });
+  }
+  function mount() {
+    applyHTML(getModelValue() ?? "");
+  }
+  watch(
+    () => getModelValue(),
+    (html) => {
+      if (!editorRef.value) {
+        return;
+      }
+      const next = html ?? "";
+      if (next === lastEmittedHtml) {
+        return;
+      }
+      const current = serializeMentionHtml(editorRef.value);
+      if (next === current) {
+        lastEmittedHtml = next;
+        return;
+      }
+      applyHTML(next);
+    }
+  );
+  onBeforeUnmount(() => {
+    cancelScheduledRestore();
+    clearTriggerRange();
+  });
+  return {
+    isEmpty,
+    isComposing,
+    insertMention,
+    restoreCaret,
+    onBeforeInput,
+    onInput,
+    onKeydown,
+    onPaste,
+    onClick,
+    onCopyOrCut,
+    onCompositionStart,
+    onCompositionEnd,
+    mount
+  };
+}

package/dist/composables/_internal/use-mention-suggest.d.ts

@@ -0,0 +1,23 @@
+import type { ListOptions } from '../../components/list/types';
+import type { MentionFilterMethod } from '../../components/mention/types';
+import type { ComputedRef, Ref, ShallowRef } from 'vue';
+export interface UseMentionSuggestOptions {
+    getOptions: (trigger: string) => ListOptions;
+    getFilterMethod: () => MentionFilterMethod | undefined;
+    isDisabled: () => boolean;
+    visible: Ref<boolean>;
+    setVisible: (visible: boolean) => void;
+}
+export interface UseMentionSuggestReturn {
+    filterKeyword: ShallowRef<string>;
+    listOptions: ShallowRef<ListOptions>;
+    isPending: ShallowRef<boolean>;
+    isEmptyResult: ComputedRef<boolean>;
+    open: (trigger: string) => void;
+    close: () => void;
+    setKeyword: (query: string) => void;
+}
+/**
+ * Suggestion popover state: keyword, list options, and async filter races.
+ */
+export declare function useMentionSuggest({ getOptions, getFilterMethod, isDisabled, visible, setVisible, }: UseMentionSuggestOptions): UseMentionSuggestReturn;

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

@@ -0,0 +1,113 @@
+import { computed, shallowRef, watch } from "vue";
+import { debounce } from "../../utils/timing.js";
+import { filterListOptions } from "./use-list-filter.js";
+import { isListOptionGroup } from "./use-selected-list-item.js";
+const ASYNC_FILTER_DEBOUNCE = 200;
+function isOptionsEmpty(options) {
+  if (!options.length) {
+    return true;
+  }
+  return options.every((entry) => {
+    if (isListOptionGroup(entry)) {
+      return entry.options.length === 0;
+    }
+    return false;
+  });
+}
+export function useMentionSuggest({
+  getOptions,
+  getFilterMethod,
+  isDisabled,
+  visible,
+  setVisible
+}) {
+  const filterKeyword = shallowRef("");
+  const activeTrigger = shallowRef("");
+  const listOptions = shallowRef([]);
+  const isPending = shallowRef(false);
+  let filterRequestId = 0;
+  const isEmptyResult = computed(
+    () => !!filterKeyword.value.trim() && !isPending.value && isOptionsEmpty(listOptions.value)
+  );
+  function cancelPendingFilter() {
+    isPending.value = false;
+    filterRequestId += 1;
+    runFilterDebounced.cancel();
+  }
+  async function runFilter(query, trigger) {
+    const requestId = ++filterRequestId;
+    const trimmed = query.trim();
+    if (!trimmed) {
+      isPending.value = false;
+      listOptions.value = getOptions(trigger);
+      return;
+    }
+    const filterMethod = getFilterMethod();
+    if (!filterMethod) {
+      isPending.value = false;
+      listOptions.value = filterListOptions(getOptions(trigger), trimmed);
+      return;
+    }
+    isPending.value = true;
+    try {
+      const result = await filterMethod(trimmed, trigger);
+      if (requestId !== filterRequestId) {
+        return;
+      }
+      listOptions.value = Array.isArray(result) ? result : [];
+    } catch {
+      if (requestId !== filterRequestId) {
+        return;
+      }
+      listOptions.value = [];
+    } finally {
+      if (requestId === filterRequestId) {
+        isPending.value = false;
+      }
+    }
+  }
+  function open(trigger) {
+    if (isDisabled() || visible.value) {
+      return;
+    }
+    activeTrigger.value = trigger;
+    filterKeyword.value = "";
+    listOptions.value = getOptions(trigger);
+    setVisible(true);
+  }
+  function close() {
+    if (visible.value) {
+      setVisible(false);
+    } else {
+      cancelPendingFilter();
+    }
+  }
+  const runFilterDebounced = debounce((query, trigger) => {
+    void runFilter(query, trigger);
+  }, ASYNC_FILTER_DEBOUNCE);
+  function setKeyword(query) {
+    const trigger = activeTrigger.value;
+    filterKeyword.value = query;
+    if (!query.trim() || !getFilterMethod()) {
+      runFilterDebounced.cancel();
+      void runFilter(query, trigger);
+      return;
+    }
+    isPending.value = true;
+    runFilterDebounced(query, trigger);
+  }
+  watch(visible, (isVisible) => {
+    if (!isVisible) {
+      cancelPendingFilter();
+    }
+  });
+  return {
+    filterKeyword,
+    listOptions,
+    isPending,
+    isEmptyResult,
+    open,
+    close,
+    setKeyword
+  };
+}

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-motion-reduce.d.ts

@@ -0,0 +1,6 @@
+import type { Ref } from 'vue';
+/**
+ * Also reports reduced motion when the page opts out through `--duration: 0`
+ * on `:root`, which system settings alone would never reflect in JS.
+ */
+export declare function useMotionReduced(): Readonly<Ref<boolean>>;

package/dist/composables/_internal/use-motion-reduce.js

@@ -0,0 +1,40 @@
+import { computed, onScopeDispose, shallowRef } from "vue";
+import { isServer } from "../../utils/is.js";
+import { useMediaQuery } from "../use-media-query.js";
+let shared;
+function readRootDurationReduced() {
+  const unitValue = getComputedStyle(document.documentElement).getPropertyValue("--duration");
+  return Number.parseFloat(unitValue) === 0;
+}
+function createRootDurationState() {
+  const reduced = shallowRef(isServer() ? false : readRootDurationReduced());
+  const entry = { reduced, observer: void 0, count: 0 };
+  if (!isServer() && typeof globalThis.MutationObserver !== "undefined") {
+    const observer = new globalThis.MutationObserver(() => {
+      reduced.value = readRootDurationReduced();
+    });
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["style", "class"]
+    });
+    entry.observer = observer;
+  }
+  return entry;
+}
+function useRootDurationReduced() {
+  const entry = shared ??= createRootDurationState();
+  entry.count++;
+  onScopeDispose(() => {
+    if (--entry.count > 0) {
+      return;
+    }
+    entry.observer?.disconnect();
+    shared = void 0;
+  });
+  return entry.reduced;
+}
+export function useMotionReduced() {
+  const systemReduced = useMediaQuery("(prefers-reduced-motion: reduce)");
+  const rootReduced = useRootDurationReduced();
+  return computed(() => systemReduced.value || rootReduced.value);
+}