pxd 0.1.2 → 0.1.3

package/dist/composables/_internal/use-tree.js

@@ -0,0 +1,676 @@
+import { computed, onScopeDispose, shallowRef, watch } from "vue";
+import { getElement } from "../../utils/dom.js";
+import { isCompositionKeydown } from "../../utils/event.js";
+import { isFuzzyMatch } from "../../utils/fuzzy-match.js";
+import { toValue } from "../../utils/helper.js";
+import { debounce } from "../../utils/timing.js";
+export function createTreeIndex(data, childrenField) {
+  const list = [];
+  const byValue = /* @__PURE__ */ new Map();
+  function visit(node, parentValue, depth) {
+    const meta = { node, children: [], parentValue, depth, end: 0 };
+    list.push(meta);
+    byValue.set(node.value, meta);
+    const children = node[childrenField];
+    if (Array.isArray(children)) {
+      for (const child of children) {
+        meta.children.push(visit(child, node.value, depth + 1));
+      }
+    }
+    meta.end = list.length;
+    return meta;
+  }
+  for (const node of data) {
+    visit(node, void 0, 0);
+  }
+  return { list, byValue };
+}
+export function useTreeIndex(data, childrenField) {
+  return computed(() => createTreeIndex(toValue(data) ?? [], toValue(childrenField) ?? "children"));
+}
+function graftNode(node, loaded, childrenField) {
+  const own = node[childrenField];
+  const fromData = Array.isArray(own) && own.length > 0;
+  const source = fromData ? own : loaded.get(node.value) ?? [];
+  const children = [];
+  let changed = !fromData && loaded.has(node.value);
+  for (const child of source) {
+    const grafted = graftNode(child, loaded, childrenField);
+    if (grafted !== child) {
+      changed = true;
+    }
+    children.push(grafted);
+  }
+  return changed ? { ...node, [childrenField]: children } : node;
+}
+export function graftLoadedChildren(data, loaded, childrenField) {
+  if (loaded.size === 0) {
+    return data;
+  }
+  let changed = false;
+  const next = data.map((node) => {
+    const grafted = graftNode(node, loaded, childrenField);
+    if (grafted !== node) {
+      changed = true;
+    }
+    return grafted;
+  });
+  return changed ? next : data;
+}
+function defaultFilter(node, query) {
+  return isFuzzyMatch(String(node.label ?? ""), query, node.keywords);
+}
+export function useTreeMatched(index, query, filter) {
+  return computed(() => {
+    const visible = /* @__PURE__ */ new Set();
+    const exact = /* @__PURE__ */ new Set();
+    const needle = (toValue(query) ?? "").trim();
+    if (!needle) {
+      return { visible, exact };
+    }
+    const match = toValue(filter) ?? defaultFilter;
+    const { list, byValue } = toValue(index);
+    for (const meta of list) {
+      if (!match(meta.node, needle)) {
+        continue;
+      }
+      exact.add(meta.node.value);
+      visible.add(meta.node.value);
+      let parentValue = meta.parentValue;
+      while (parentValue !== void 0 && !visible.has(parentValue)) {
+        visible.add(parentValue);
+        parentValue = byValue.get(parentValue)?.parentValue;
+      }
+    }
+    return { visible, exact };
+  });
+}
+const REMOTE_SEARCH_DEBOUNCE = 200;
+export function useTreeSearch(options) {
+  const matches = shallowRef();
+  const pending = shallowRef(false);
+  const remote = computed(() => typeof toValue(options.remoteFilter) === "function");
+  const needle = computed(() => (toValue(options.query) ?? "").trim());
+  const active = computed(() => remote.value && needle.value !== "" && matches.value !== void 0);
+  let requestId = 0;
+  function invalidate() {
+    requestId += 1;
+    runSearch.cancel();
+  }
+  async function run(query) {
+    const at = ++requestId;
+    const remoteFilter = toValue(options.remoteFilter);
+    if (!remoteFilter) {
+      return;
+    }
+    try {
+      const result = await remoteFilter(query);
+      if (at === requestId) {
+        matches.value = Array.isArray(result) ? result : [];
+      }
+    } catch {
+      if (at === requestId) {
+        matches.value = [];
+      }
+    } finally {
+      if (at === requestId) {
+        pending.value = false;
+      }
+    }
+  }
+  const runSearch = debounce((query) => {
+    void run(query);
+  }, REMOTE_SEARCH_DEBOUNCE);
+  watch(
+    [remote, needle],
+    ([isRemote, query]) => {
+      invalidate();
+      if (!isRemote || !query) {
+        matches.value = void 0;
+        pending.value = false;
+        return;
+      }
+      pending.value = true;
+      runSearch(query);
+    },
+    { immediate: true }
+  );
+  onScopeDispose(invalidate);
+  return { matches, remote, pending, active };
+}
+export function useTreeRows(index, options) {
+  return computed(() => {
+    const { list } = toValue(index);
+    const expanded = toValue(options.expanded);
+    const matched = toValue(options.matched);
+    const searching = (toValue(options.query) ?? "").trim().length > 0;
+    const matchesOnly = searching && toValue(options.matchesOnly) === true;
+    const exact = toValue(options.exactMatched) ?? matched;
+    const canLoad = toValue(options.canLoad);
+    const rows = [];
+    let cursor = 0;
+    while (cursor < list.length) {
+      const meta = list[cursor];
+      if (searching && !matched.has(meta.node.value)) {
+        cursor = meta.end;
+        continue;
+      }
+      const value = meta.node.value;
+      if (matchesOnly && !exact.has(value)) {
+        cursor++;
+        continue;
+      }
+      rows.push({
+        key: value,
+        node: meta.node,
+        depth: matchesOnly ? 0 : meta.depth,
+        index: rows.length,
+        parentValue: matchesOnly ? void 0 : meta.parentValue,
+        hasChildren: meta.children.length > 0 || canLoad?.(value) === true,
+        expanded: expanded.has(value)
+      });
+      cursor++;
+      if (meta.children.length > 0 && !searching && !expanded.has(value)) {
+        cursor = meta.end;
+      }
+    }
+    if (searching) {
+      for (let i = 0; i < rows.length - 1; i++) {
+        if (rows[i].hasChildren) {
+          rows[i].expanded = rows[i + 1].depth > rows[i].depth;
+        }
+      }
+    }
+    return rows;
+  });
+}
+function collect(modelValue) {
+  if (Array.isArray(modelValue)) {
+    return new Set(modelValue);
+  }
+  return modelValue == null ? /* @__PURE__ */ new Set() : /* @__PURE__ */ new Set([modelValue]);
+}
+function derive(list, selected, selectable) {
+  const checked = /* @__PURE__ */ new Set();
+  const indeterminate = /* @__PURE__ */ new Set();
+  const stats = /* @__PURE__ */ new Map();
+  for (let i = list.length - 1; i >= 0; i--) {
+    const meta = list[i];
+    let total = 0;
+    let hit = 0;
+    for (const child of meta.children) {
+      const childStat = stats.get(child);
+      total += childStat?.total ?? 0;
+      hit += childStat?.hit ?? 0;
+    }
+    const takes = selectable(meta);
+    const isChecked = total > 0 ? hit === total : selected.has(meta.node.value);
+    if (isChecked && (takes || selected.has(meta.node.value))) {
+      checked.add(meta.node.value);
+    } else if (hit > 0) {
+      indeterminate.add(meta.node.value);
+    }
+    stats.set(meta, {
+      total: total + (takes ? 1 : 0),
+      hit: hit + (isChecked && takes ? 1 : 0)
+    });
+  }
+  return { checked, indeterminate };
+}
+export function useTreeSelection(options) {
+  const selected = computed(() => collect(toValue(options.modelValue)));
+  let anchor;
+  let current;
+  function selectable(meta) {
+    return meta.node.disabled !== true && toValue(options.selectable)?.(meta.node) !== false;
+  }
+  function isSelectable(value) {
+    const meta = toValue(options.index).byValue.get(value);
+    return meta !== void 0 && selectable(meta);
+  }
+  const state = computed(() => {
+    if (!toValue(options.multiple) || toValue(options.checkStrictly)) {
+      return { checked: selected.value, indeterminate: /* @__PURE__ */ new Set() };
+    }
+    return derive(toValue(options.index).list, selected.value, selectable);
+  });
+  function toToggleResult(list, result) {
+    return {
+      value: list.filter((item) => result.checked.has(item.node.value)).map((item) => item.node.value),
+      halfCheckedValues: list.filter((item) => result.indeterminate.has(item.node.value)).map((item) => item.node.value)
+    };
+  }
+  function toggle(value) {
+    if (!toValue(options.multiple)) {
+      return { value: selected.value.has(value) ? null : value, halfCheckedValues: [] };
+    }
+    const { list, byValue } = toValue(options.index);
+    const meta = byValue.get(value);
+    if (!meta || !selectable(meta)) {
+      return toToggleResult(list, state.value);
+    }
+    const next = new Set(selected.value);
+    const willCheck = !state.value.checked.has(value);
+    if (willCheck) {
+      anchor = value;
+      current = value;
+    }
+    if (toValue(options.checkStrictly)) {
+      if (willCheck) {
+        next.add(value);
+      } else {
+        next.delete(value);
+      }
+      return toToggleResult(list, { checked: next, indeterminate: /* @__PURE__ */ new Set() });
+    }
+    for (let i = list.indexOf(meta); i < meta.end; i++) {
+      const item = list[i];
+      if (!selectable(item)) {
+        continue;
+      }
+      if (willCheck) {
+        next.add(item.node.value);
+      } else {
+        next.delete(item.node.value);
+      }
+    }
+    return toToggleResult(list, derive(list, next, selectable));
+  }
+  function span(from, to) {
+    const { list } = toValue(options.index);
+    const start = list.indexOf(from);
+    const end = list.indexOf(to);
+    return list.slice(Math.min(start, end), Math.max(start, end) + 1);
+  }
+  function extend(value) {
+    const { list, byValue } = toValue(options.index);
+    const to = byValue.get(value);
+    const from = anchor === void 0 ? void 0 : byValue.get(anchor);
+    const reached = current === void 0 ? void 0 : byValue.get(current);
+    if (!to || !from || !toValue(options.multiple)) {
+      return toggle(value);
+    }
+    const next = new Set(selected.value);
+    for (const item of span(from, reached ?? to)) {
+      next.delete(item.node.value);
+    }
+    for (const item of span(from, to)) {
+      if (selectable(item)) {
+        next.add(item.node.value);
+      }
+    }
+    current = value;
+    return toValue(options.checkStrictly) ? toToggleResult(list, { checked: next, indeterminate: /* @__PURE__ */ new Set() }) : toToggleResult(list, derive(list, next, selectable));
+  }
+  return {
+    checked: computed(() => state.value.checked),
+    indeterminate: computed(() => state.value.indeterminate),
+    toggle,
+    extend,
+    isSelectable
+  };
+}
+export function isTreeDescendant(index, ancestorValue, value) {
+  const ancestor = index.byValue.get(ancestorValue);
+  let current = index.byValue.get(value);
+  while (current && current.parentValue !== void 0) {
+    const parent = index.byValue.get(current.parentValue);
+    if (!parent) {
+      return false;
+    }
+    if (parent === ancestor) {
+      return true;
+    }
+    current = parent;
+  }
+  return false;
+}
+function removeNode(list, childrenField, value, parentValue) {
+  const at = list.findIndex((node) => node.value === value);
+  if (at !== -1) {
+    return {
+      list: [...list.slice(0, at), ...list.slice(at + 1)],
+      node: list[at],
+      parentValue,
+      index: at
+    };
+  }
+  for (let i = 0; i < list.length; i++) {
+    const children = list[i][childrenField];
+    if (!Array.isArray(children)) {
+      continue;
+    }
+    const result = removeNode(children, childrenField, value, list[i].value);
+    if (!result) {
+      continue;
+    }
+    const next = [...list];
+    next[i] = { ...list[i], [childrenField]: result.list };
+    return { ...result, list: next };
+  }
+  return void 0;
+}
+function insertNode(list, childrenField, target, node, parentValue) {
+  const at = list.findIndex((item) => item.value === target.targetValue);
+  if (at !== -1) {
+    const next = [...list];
+    if (target.position === "inside") {
+      const raw = next[at][childrenField];
+      const children = Array.isArray(raw) ? raw : [];
+      next[at] = { ...next[at], [childrenField]: [...children, node] };
+      return { list: next, parentValue: next[at].value, index: children.length };
+    }
+    const index = target.position === "after" ? at + 1 : at;
+    next.splice(index, 0, node);
+    return { list: next, parentValue, index };
+  }
+  for (let i = 0; i < list.length; i++) {
+    const children = list[i][childrenField];
+    if (!Array.isArray(children)) {
+      continue;
+    }
+    const result = insertNode(children, childrenField, target, node, list[i].value);
+    if (!result) {
+      continue;
+    }
+    const next = [...list];
+    next[i] = { ...list[i], [childrenField]: result.list };
+    return { ...result, list: next };
+  }
+  return void 0;
+}
+export function moveTreeNode(data, childrenField, value, target) {
+  const removal = removeNode(data, childrenField, value);
+  if (!removal) {
+    return void 0;
+  }
+  const insertion = insertNode(removal.list, childrenField, target, removal.node);
+  if (!insertion) {
+    return void 0;
+  }
+  if (removal.parentValue === insertion.parentValue && removal.index === insertion.index) {
+    return void 0;
+  }
+  return {
+    data: insertion.list,
+    detail: {
+      value,
+      node: removal.node,
+      from: { parentValue: removal.parentValue, index: removal.index },
+      to: {
+        parentValue: insertion.parentValue,
+        index: insertion.index,
+        targetValue: target.targetValue,
+        position: target.position
+      }
+    }
+  };
+}
+const DRAG_THRESHOLD = 5;
+const HOLD_DELAY = 300;
+const EXPAND_DELAY = 500;
+export function useTreeDrag(options) {
+  const value = shallowRef();
+  const target = shallowRef();
+  const x = shallowRef(0);
+  const y = shallowRef(0);
+  let armed;
+  let expandTimer;
+  let expandValue;
+  let cachedRects = [];
+  let contentOrigin = 0;
+  let captured;
+  let justDragged = false;
+  function measureRows(container, items) {
+    const rows = toValue(options.rows);
+    const origin = container.getBoundingClientRect().top - container.scrollTop;
+    const list = [];
+    for (const item of Array.from(items)) {
+      const row = rows[Number(item.dataset.index)];
+      if (!row) {
+        continue;
+      }
+      const rect = item.getBoundingClientRect();
+      list.push({ row, top: rect.top - origin, height: rect.height });
+    }
+    cachedRects = list;
+    contentOrigin = origin;
+  }
+  function isCacheStale(items) {
+    if (items.length !== cachedRects.length) {
+      return true;
+    }
+    return Number(items[0]?.dataset.index) !== cachedRects[0]?.row.index;
+  }
+  function refreshOrigin() {
+    const container = getElement(options.container);
+    if (container) {
+      contentOrigin = container.getBoundingClientRect().top - container.scrollTop;
+    }
+  }
+  function resolveTarget(clientY) {
+    const container = getElement(options.container);
+    if (!container) {
+      return void 0;
+    }
+    const items = container.querySelectorAll("[data-tree-item]");
+    if (isCacheStale(items)) {
+      measureRows(container, items);
+    }
+    if (cachedRects.length === 0) {
+      return void 0;
+    }
+    const y2 = clientY - contentOrigin;
+    for (let index = 0; index < cachedRects.length; index++) {
+      const entry = cachedRects[index];
+      if (y2 >= entry.top && y2 <= entry.top + entry.height) {
+        return toTarget(index, y2);
+      }
+    }
+    const last = cachedRects.length - 1;
+    return y2 < cachedRects[0].top ? toTarget(0, y2) : toTarget(last, y2);
+  }
+  function afterRow(index, row) {
+    for (let at = index + 1; at < cachedRects.length; at++) {
+      const depth = cachedRects[at].row.depth;
+      if (depth < row.depth) {
+        break;
+      }
+      if (depth === row.depth) {
+        return { targetValue: cachedRects[at].row.key, position: "before" };
+      }
+    }
+    return { targetValue: row.key, position: "after" };
+  }
+  function toTarget(index, y2) {
+    const dragged = value.value;
+    const entry = cachedRects[index];
+    if (dragged === void 0 || !entry) {
+      return void 0;
+    }
+    const row = entry.row;
+    const ratio = (y2 - entry.top) / (entry.height || 1);
+    let target2;
+    if ((row.hasChildren || toValue(options.dropInsideLeaf)) && ratio > 0.25 && ratio < 0.75) {
+      target2 = { targetValue: row.key, position: "inside" };
+    } else if (ratio < 0.5) {
+      target2 = { targetValue: row.key, position: "before" };
+    } else {
+      target2 = afterRow(index, row);
+    }
+    return options.canDrop(dragged, target2.targetValue, target2.position) ? target2 : void 0;
+  }
+  function scheduleExpand(next) {
+    if (!next || next.position !== "inside") {
+      clearExpand();
+      return;
+    }
+    if (expandValue === next.targetValue) {
+      return;
+    }
+    clearExpand();
+    expandValue = next.targetValue;
+    expandTimer = setTimeout(() => {
+      expandTimer = void 0;
+      if (expandValue !== void 0) {
+        options.onExpand(expandValue);
+      }
+    }, EXPAND_DELAY);
+  }
+  function clearExpand() {
+    if (expandTimer !== void 0) {
+      clearTimeout(expandTimer);
+      expandTimer = void 0;
+    }
+    expandValue = void 0;
+  }
+  function followScroll() {
+    if (value.value === void 0) {
+      return;
+    }
+    refreshOrigin();
+    target.value = resolveTarget(y.value);
+  }
+  function capturePointer(pointerId) {
+    const container = getElement(options.container);
+    if (!container) {
+      return;
+    }
+    container.addEventListener("lostpointercapture", onLostCapture);
+    container.setPointerCapture?.(pointerId);
+    captured = { el: container, pointerId };
+  }
+  function releasePointer() {
+    const held = captured;
+    captured = void 0;
+    if (!held) {
+      return;
+    }
+    held.el.removeEventListener("lostpointercapture", onLostCapture);
+    if (held.el.hasPointerCapture?.(held.pointerId)) {
+      held.el.releasePointerCapture(held.pointerId);
+    }
+  }
+  function onLostCapture() {
+    if (armed || value.value !== void 0) {
+      reset();
+    }
+  }
+  function onTouchMove(event) {
+    event.preventDefault();
+  }
+  function beginDrag(session) {
+    armed = void 0;
+    value.value = session.value;
+    x.value = session.x;
+    y.value = session.y;
+    const container = getElement(options.container);
+    if (container) {
+      container.addEventListener("scroll", followScroll, { passive: true });
+    }
+    window.addEventListener("scroll", followScroll, { passive: true });
+    if (session.hold) {
+      window.addEventListener("touchmove", onTouchMove, { passive: false });
+    }
+    capturePointer(session.pointerId);
+    target.value = resolveTarget(session.y);
+    scheduleExpand(target.value);
+  }
+  function detach() {
+    window.removeEventListener("pointermove", onPointerMove);
+    window.removeEventListener("pointerup", onPointerUp);
+    window.removeEventListener("pointercancel", onPointerCancel);
+    window.removeEventListener("keydown", onKeydown, true);
+    window.removeEventListener("touchmove", onTouchMove);
+    window.removeEventListener("scroll", followScroll);
+    getElement(options.container)?.removeEventListener("scroll", followScroll);
+    if (armed?.timer !== void 0) {
+      clearTimeout(armed.timer);
+    }
+    releasePointer();
+    armed = void 0;
+    cachedRects = [];
+    clearExpand();
+  }
+  function reset() {
+    value.value = void 0;
+    target.value = void 0;
+    detach();
+  }
+  function onHoldEnd(session) {
+    session.timer = void 0;
+    if (armed === session) {
+      beginDrag(session);
+    }
+  }
+  function onPointerMove(event) {
+    if (armed) {
+      const session = armed;
+      const moved = Math.abs(event.clientY - session.y) >= DRAG_THRESHOLD || Math.abs(event.clientX - session.x) >= DRAG_THRESHOLD;
+      if (!moved) {
+        return;
+      }
+      if (session.hold) {
+        if (session.timer !== void 0) {
+          clearTimeout(session.timer);
+        }
+        armed = void 0;
+        return;
+      }
+      beginDrag(session);
+    }
+    if (value.value === void 0) {
+      return;
+    }
+    x.value = event.clientX;
+    y.value = event.clientY;
+    target.value = resolveTarget(event.clientY);
+    scheduleExpand(target.value);
+  }
+  function onPointerUp() {
+    const source = value.value;
+    const dropped = target.value;
+    justDragged = source !== void 0;
+    reset();
+    if (source !== void 0 && dropped) {
+      options.onCommit(source, dropped);
+    }
+  }
+  function onPointerCancel() {
+    reset();
+  }
+  function onKeydown(event) {
+    if (event.key !== "Escape" || isCompositionKeydown(event)) {
+      return;
+    }
+    event.preventDefault();
+    reset();
+  }
+  function onPointerDown(nodeValue, event) {
+    if (armed || toValue(options.enabled) === false || event.button !== 0) {
+      return;
+    }
+    const session = {
+      value: nodeValue,
+      x: event.clientX,
+      y: event.clientY,
+      pointerId: event.pointerId,
+      // A finger or a stylus has to declare intent: a move that follows at once is a scroll.
+      hold: event.pointerType !== "mouse"
+    };
+    armed = session;
+    justDragged = false;
+    window.addEventListener("pointermove", onPointerMove);
+    window.addEventListener("pointerup", onPointerUp);
+    window.addEventListener("pointercancel", onPointerCancel);
+    window.addEventListener("keydown", onKeydown, true);
+    if (session.hold) {
+      session.timer = setTimeout(() => onHoldEnd(session), HOLD_DELAY);
+    }
+  }
+  function didDrag() {
+    return justDragged;
+  }
+  onScopeDispose(reset);
+  return { value, target, x, y, onPointerDown, didDrag };
+}

package/dist/composables/_internal/use-word-limit.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentLabel } from '../../types/shared';
+import type { ComponentLabel } from '../../types/shared/props';
 import type { ComputedRef, MaybeRefOrGetter } from 'vue';
 interface WordLimitOptions {
     modelValue: MaybeRefOrGetter<ComponentLabel>;

package/dist/composables/index.d.ts

@@ -11,6 +11,7 @@ export * from './use-intersection-observer.js';
 export * from './use-loading-bar.js';
 export * from './use-media-query.js';
 export * from './use-message.js';
+export * from './use-motion-reduce.js';
 export * from './use-mutation-observer.js';
 export * from './use-outside-click.js';
 export * from './use-repeat-action.js';

package/dist/composables/index.js

@@ -11,6 +11,7 @@ export * from "./use-intersection-observer.js";
 export * from "./use-loading-bar.js";
 export * from "./use-media-query.js";
 export * from "./use-message.js";
+export * from "./use-motion-reduce.js";
 export * from "./use-mutation-observer.js";
 export * from "./use-outside-click.js";
 export * from "./use-repeat-action.js";

package/dist/composables/use-color-scheme.d.ts

@@ -6,6 +6,6 @@ interface Options {
 export declare function useColorScheme(options?: Options): {
     isDark: import("vue").ComputedRef<boolean>;
     colorScheme: import("vue").ShallowRef<ColorPreference, ColorPreference>;
-    toggleDarkMode: () => void;
+    toggleDarkMode: (mode?: ColorPreference) => void;
 };
 export {};