pxd 0.0.64 → 0.1.2

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,29 @@
+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;
+    group?: ListOptionGroup;
+    groupIndex?: number;
+    itemIndex: number;
+}
+export type ListRow = ListHeaderRow | ListItemRow;
+export interface FlattenListOptionsResult {
+    rows: ListRow[];
+    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,58 @@
+import { isListOptionGroup } from "./use-selected-list-item.js";
+export function flattenListOptions(options) {
+  const rows = [];
+  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];
+        rows.push({
+          type: "item",
+          key: String(option.value),
+          option,
+          navIndex: navIndex++,
+          group: entry,
+          groupIndex,
+          itemIndex
+        });
+      }
+    } else {
+      rows.push({
+        type: "item",
+        key: String(entry.value),
+        option: entry,
+        navIndex: navIndex++,
+        itemIndex: groupIndex
+      });
+    }
+  }
+  return {
+    rows,
+    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';
+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.js

@@ -0,0 +1,57 @@
+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);
+}
+function unlockRootScroll() {
+  cachedOff(document, "touchmove", preventDefaultScroll, touchMoveOptions);
+  document.documentElement.classList.remove(...rootAddedClassNames);
+  rootAddedClassNames = [];
+}
+export function useLockScroll() {
+  let instanceTouchMoveLocks = 0;
+  function isLocked() {
+    return rootTouchMoveLocks > 0;
+  }
+  function lockScroll() {
+    if (rootTouchMoveLocks === 0) {
+      lockRootScroll();
+    }
+    rootTouchMoveLocks++;
+    instanceTouchMoveLocks++;
+  }
+  function unlockScroll() {
+    if (instanceTouchMoveLocks <= 0) {
+      return;
+    }
+    instanceTouchMoveLocks--;
+    rootTouchMoveLocks--;
+    if (!rootTouchMoveLocks) {
+      unlockRootScroll();
+    }
+  }
+  onScopeDispose(() => {
+    while (instanceTouchMoveLocks > 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;