pxd 0.0.64 → 0.1.3

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

@@ -0,0 +1,26 @@
+import { toValue } from "../../utils/helper.js";
+const DEFAULT_PREVENT_DEFAULT_KEYS = ["PageDown", "PageUp"];
+export function useListKeyboardController(options) {
+  function onKeydown(ev) {
+    if (toValue(options.enabled) === false || ev.isComposing || ev.key === "Process") {
+      return;
+    }
+    if (ev.ctrlKey || ev.metaKey || ev.altKey || ev.shiftKey) {
+      return;
+    }
+    const command = toValue(options.keymap)[ev.key];
+    if (command) {
+      if (!options.onCommand(command, ev)) {
+        return;
+      }
+      ev.preventDefault();
+      ev.stopPropagation();
+      return;
+    }
+    const preventDefaultKeys = toValue(options.preventDefaultKeys) ?? DEFAULT_PREVENT_DEFAULT_KEYS;
+    if (preventDefaultKeys.includes(ev.key)) {
+      ev.preventDefault();
+    }
+  }
+  return { onKeydown };
+}

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

@@ -0,0 +1,25 @@
+import type { MaybeRefOrGetter, ShallowRef } from 'vue';
+export interface UseListNavigationOptions {
+    loop?: MaybeRefOrGetter<boolean>;
+    defaultActiveIndex?: MaybeRefOrGetter<number>;
+    /** Number of navigable items (headers excluded). */
+    count: MaybeRefOrGetter<number>;
+    isDisabled?: (index: number) => boolean;
+    onActivateItem?: (index: number) => void;
+    onLeft?: () => void;
+    onRight?: (index: number) => void;
+    onActivate?: () => void;
+    scrollToIndex?: (index: number) => void;
+    /** Selector used by pointerover to find a list item. */
+    itemSelector?: MaybeRefOrGetter<string>;
+}
+export type ListNavigationCommand = 'first' | 'last' | 'next' | 'previous' | 'activate' | 'enter-child' | 'leave-parent';
+export interface UseListNavigationReturn {
+    activeIndex: ShallowRef<number>;
+    setActiveIndex: (index: number) => void;
+    dispatch: (command: ListNavigationCommand) => boolean;
+    onPointerOver: (ev: PointerEvent) => boolean;
+    setFirstAsActive: () => void;
+    isEmpty: () => boolean;
+}
+export declare function useListNavigation(options: UseListNavigationOptions): UseListNavigationReturn;

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

@@ -0,0 +1,141 @@
+import { shallowRef, watch } from "vue";
+import { toValue } from "../../utils/helper.js";
+function findNextIndex(len, from, dir, loop, isDisabled) {
+  if (len === 0) {
+    return -1;
+  }
+  let i = from;
+  for (let step = 0; step < len; step++) {
+    i = i + dir;
+    if (loop) {
+      i = (i % len + len) % len;
+    } else if (i < 0 || i >= len) {
+      return -1;
+    }
+    if (!isDisabled?.(i)) {
+      return i;
+    }
+  }
+  return -1;
+}
+export function useListNavigation(options) {
+  const getLoop = () => toValue(options.loop) ?? true;
+  const getDefaultActiveIndex = () => toValue(options.defaultActiveIndex) ?? -1;
+  const getCount = () => toValue(options.count) ?? 0;
+  const getItemSelector = () => toValue(options.itemSelector) ?? "[data-list-item]";
+  const activeIndex = shallowRef(getDefaultActiveIndex());
+  let lastPointerX = -1;
+  let lastPointerY = -1;
+  function clampActiveIndex() {
+    const len = getCount();
+    const fallback = getDefaultActiveIndex();
+    if (len === 0) {
+      activeIndex.value = -1;
+      return;
+    }
+    if (activeIndex.value >= len) {
+      activeIndex.value = len - 1;
+    }
+    if (activeIndex.value === -1 && fallback >= 0 && fallback < len) {
+      if (!options.isDisabled?.(fallback)) {
+        activeIndex.value = fallback;
+      }
+    }
+    if (activeIndex.value >= 0 && options.isDisabled?.(activeIndex.value)) {
+      const next = findNextIndex(len, activeIndex.value - 1, 1, false, options.isDisabled);
+      activeIndex.value = next;
+    }
+  }
+  watch(() => getCount(), clampActiveIndex, { immediate: true });
+  function setActiveIndex(index) {
+    const len = getCount();
+    if (index < -1 || index >= len) {
+      return;
+    }
+    if (index >= 0 && options.isDisabled?.(index)) {
+      return;
+    }
+    activeIndex.value = index;
+  }
+  function setFirstAsActive() {
+    setActiveIndex(findNextIndex(getCount(), -1, 1, false, options.isDisabled));
+  }
+  function isEmpty() {
+    return getCount() === 0;
+  }
+  function onPointerOver(ev) {
+    if (ev.pageX === lastPointerX && ev.pageY === lastPointerY) {
+      return false;
+    }
+    lastPointerX = ev.pageX;
+    lastPointerY = ev.pageY;
+    const listItem = ev.target.closest(getItemSelector());
+    if (!listItem || listItem.dataset.disabled === "true") {
+      return false;
+    }
+    const raw = listItem.dataset.index;
+    if (raw === void 0) {
+      return false;
+    }
+    const index = Number(raw);
+    if (!Number.isFinite(index) || index < 0 || index >= getCount()) {
+      return false;
+    }
+    options.onActivate?.();
+    setActiveIndex(index);
+    return true;
+  }
+  function dispatch(command) {
+    if (isEmpty()) {
+      return false;
+    }
+    const len = getCount();
+    const current = activeIndex.value;
+    if (command === "activate") {
+      if (current < 0 || current >= len || options.isDisabled?.(current)) {
+        return false;
+      }
+      options.onActivateItem?.(current);
+      return true;
+    }
+    if (command === "leave-parent") {
+      if (typeof options.onLeft !== "function") {
+        return false;
+      }
+      options.onLeft();
+      return true;
+    }
+    if (command === "enter-child") {
+      if (current < 0 || current >= len || !options.onRight) {
+        return false;
+      }
+      options.onRight(current);
+      return true;
+    }
+    let next;
+    if (command === "first") {
+      next = findNextIndex(len, -1, 1, false, options.isDisabled);
+    } else if (command === "last") {
+      next = findNextIndex(len, len, -1, false, options.isDisabled);
+    } else {
+      const dir = command === "next" ? 1 : -1;
+      next = current === -1 ? findNextIndex(len, dir === 1 ? -1 : len, dir, false, options.isDisabled) : findNextIndex(len, current, dir, getLoop(), options.isDisabled);
+    }
+    if (next === -1) {
+      return false;
+    }
+    if (next !== current) {
+      setActiveIndex(next);
+      options.scrollToIndex?.(next);
+    }
+    return true;
+  }
+  return {
+    activeIndex,
+    setActiveIndex,
+    dispatch,
+    onPointerOver,
+    setFirstAsActive,
+    isEmpty
+  };
+}

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

@@ -0,0 +1,33 @@
+import type { ListOption, ListOptionEntry, ListOptionGroup } from '../../components/list/types';
+export interface ListHeaderRow {
+    type: 'header';
+    key: string;
+    label?: string;
+    group: ListOptionGroup;
+    groupIndex: number;
+}
+export interface ListItemRow {
+    type: 'item';
+    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;
+}
+export type ListRow = ListHeaderRow | ListItemRow;
+export interface FlattenListOptionsResult {
+    rows: ListRow[];
+    /** Item rows indexed by their dense `navIndex`. */
+    itemRows: ListItemRow[];
+    navigableCount: number;
+}
+/**
+ * Flatten grouped options into a linear row list for rendering / virtualization.
+ * Headers are not navigable; each item gets a dense `navIndex`.
+ */
+export declare function flattenListOptions(options: ListOptionEntry[]): FlattenListOptionsResult;
+export declare function resolveNavigableOption(rows: ListRow[], navIndex: number): ListItemRow | undefined;
+export declare function resolveRowIndexByNavIndex(rows: ListRow[], navIndex: number): number;

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

@@ -0,0 +1,66 @@
+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];
+    if (isListOptionGroup(entry)) {
+      rows.push({
+        type: "header",
+        key: `group-${entry.label ?? groupIndex}`,
+        label: entry.label,
+        group: entry,
+        groupIndex
+      });
+      for (let itemIndex = 0; itemIndex < entry.options.length; itemIndex++) {
+        const option = entry.options[itemIndex];
+        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 {
+      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
+  };
+}
+export function resolveNavigableOption(rows, navIndex) {
+  for (const row of rows) {
+    if (row.type === "item" && row.navIndex === navIndex) {
+      return row;
+    }
+  }
+  return void 0;
+}
+export function resolveRowIndexByNavIndex(rows, navIndex) {
+  for (let i = 0; i < rows.length; i++) {
+    const row = rows[i];
+    if (row.type === "item" && row.navIndex === navIndex) {
+      return i;
+    }
+  }
+  return -1;
+}

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

@@ -0,0 +1,23 @@
+import type { ListModelValue } from '../../components/list/types';
+import type { ComponentValue } from '../../types/shared/props';
+interface ListSelectionProps {
+    modelValue?: ListModelValue;
+    multiple?: boolean;
+}
+interface ListSelectionEmits {
+    (event: 'change', value: NonNullable<ListModelValue>): void;
+    (event: 'update:modelValue', value: NonNullable<ListModelValue>): void;
+}
+/** Next model value after an option click. Used by List; Menu only applies the result. */
+export declare function resolveNextListValue(current: ListModelValue | undefined, clicked: ComponentValue, multiple?: boolean): ListModelValue;
+/**
+ * Menu selection session. `apply(next)` accepts the value already computed by List —
+ * do not toggle again here.
+ */
+export declare function useListSelection(props: ListSelectionProps, emits: ListSelectionEmits): {
+    selected: import("vue").ShallowRef<ListModelValue, ListModelValue>;
+    apply: (nextValue: NonNullable<ListModelValue>) => boolean;
+    reset: () => void;
+    commit: () => void;
+};
+export {};

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

@@ -0,0 +1,41 @@
+import { shallowRef } from "vue";
+import { toArray } from "../../utils/format.js";
+function readSelection(props) {
+  return props.multiple ? toArray(props.modelValue) : props.modelValue ?? null;
+}
+function toggleSelected(selected, value) {
+  return selected.includes(value) ? selected.filter((item) => item !== value) : [...selected, value];
+}
+export function resolveNextListValue(current, clicked, multiple) {
+  if (multiple) {
+    return toggleSelected(toArray(current), clicked);
+  }
+  return clicked;
+}
+export function useListSelection(props, emits) {
+  const selected = shallowRef(readSelection(props));
+  let dirty = false;
+  function reset() {
+    dirty = false;
+    selected.value = readSelection(props);
+  }
+  function apply(nextValue) {
+    selected.value = nextValue;
+    if (props.multiple) {
+      dirty = true;
+      emits("update:modelValue", nextValue);
+      return false;
+    }
+    emits("update:modelValue", nextValue);
+    emits("change", nextValue);
+    return true;
+  }
+  function commit() {
+    if (!props.multiple || !dirty) {
+      return;
+    }
+    dirty = false;
+    emits("change", selected.value ?? []);
+  }
+  return { selected, apply, reset, commit };
+}

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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,78 @@
+import { onScopeDispose } from "vue";
+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 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(target, options = {}) {
+  const { walkAncestors = false } = options;
+  const lockedElements = [];
+  function isLocked() {
+    return lockedElements.length > 0;
+  }
+  function lockScroll() {
+    for (let el = getElement(target); el; el = walkAncestors ? el.parentElement : null) {
+      if (lockElementScroll(el)) {
+        lockedElements.push(el);
+        return;
+      }
+    }
+  }
+  function unlockScroll() {
+    const el = lockedElements.pop();
+    if (el) {
+      unlockElementScroll(el);
+    }
+  }
+  onScopeDispose(() => {
+    while (lockedElements.length > 0) {
+      unlockScroll();
+    }
+  });
+  return {
+    isLocked,
+    lockScroll,
+    unlockScroll
+  };
+}

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

@@ -0,0 +1,35 @@
+import type { Ref, ShallowRef } from 'vue';
+export interface UseMentionEditorOptions {
+    editorRef: Ref<HTMLElement | undefined>;
+    getModelValue: () => string;
+    getTriggers: () => string[];
+    isDisabled: () => boolean;
+    onUpdate: (html: string) => void;
+    onTrigger: (trigger: string) => void;
+    onSubmit: (html: string) => void;
+    onMentionClick: (payload: {
+        key: string;
+        label: string;
+        trigger: string;
+        event: MouseEvent;
+    }) => void;
+}
+export interface UseMentionEditorReturn {
+    isEmpty: ShallowRef<boolean>;
+    isComposing: ShallowRef<boolean>;
+    insertMention: (key: string, label: string) => boolean;
+    restoreCaret: () => void;
+    onBeforeInput: (ev: InputEvent) => void;
+    onInput: () => void;
+    onKeydown: (ev: KeyboardEvent) => void;
+    onPaste: (ev: ClipboardEvent) => void;
+    onClick: (ev: MouseEvent) => void;
+    onCopyOrCut: (ev: ClipboardEvent) => void;
+    onCompositionStart: () => void;
+    onCompositionEnd: () => void;
+    mount: () => void;
+}
+/**
+ * Contenteditable mention editor: HTML sync, trigger ranges, insert/delete chips, paste.
+ */
+export declare function useMentionEditor({ editorRef, getModelValue, getTriggers, isDisabled, onUpdate, onTrigger, onSubmit, onMentionClick, }: UseMentionEditorOptions): UseMentionEditorReturn;