@leavepulse/ui 0.36.1 → 0.37.1

package/dist/components/LpTable.vue.js

@@ -1,11 +1,13 @@
-import { defineComponent, ref, computed, watch, onBeforeUnmount, openBlock, createBlock, withCtx, createVNode, createElementVNode, normalizeClass, createElementBlock, createCommentVNode, Fragment, renderList, normalizeStyle, createTextVNode, toDisplayString, TransitionGroup, unref, mergeProps, withModifiers, renderSlot } from "vue";
+import { defineComponent, ref, computed, shallowRef, watch, onBeforeUnmount, openBlock, createElementBlock, createVNode, mergeProps, withCtx, createElementVNode, normalizeClass, createCommentVNode, Fragment, renderList, normalizeStyle, createBlock, createTextVNode, toDisplayString, TransitionGroup, unref, withModifiers, renderSlot, nextTick } from "vue";
 import { _ as _sfc_main$3 } from "../chunks/LpCheckbox-CVccKYaH.js";
 import { _ as _sfc_main$2 } from "../chunks/LpContextMenu-B6WBLleS.js";
 import { _ as _sfc_main$4 } from "../chunks/LpIcon-CCnX5_2j.js";
+import { _ as _sfc_main$5 } from "../chunks/LpPagination-5FxjmmB5.js";
 import { _ as _sfc_main$1 } from "../chunks/LpScrollArea-D8xyKXcF.js";
+import { useAsyncTask } from "../composables/useAsyncTask.js";
 import { useRovingFocus } from "../composables/useRovingFocus.js";
 import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper-1tPrXgE0.js";
-import '../assets/LpTable-DfSwPCJ-.css';const _hoisted_1 = { class: "w-full border-collapse text-sm" };
+import '../assets/LpTable-BbOFmZfc.css';const _hoisted_1 = { class: "flex flex-col gap-3" };
 const _hoisted_2 = { class: "border-b border-line bg-surface-soft" };
 const _hoisted_3 = {
   key: 0,
@@ -19,11 +21,18 @@ const _hoisted_6 = {
 };
 const _hoisted_7 = ["colspan"];
 const _hoisted_8 = ["onContextmenu", "onClick"];
+const __default__ = { inheritAttrs: false };
 const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
   __name: "LpTable",
   props: {
     columns: {},
-    rows: {},
+    rows: { default: () => [] },
+    load: {},
+    pageSize: { default: 25 },
+    debounce: { default: 150 },
+    loadingLabel: { default: "Loading…" },
+    errorLabel: { default: "Could not load" },
     rowKey: {},
     emptyLabel: { default: "Nothing here yet" },
     emptyIcon: { default: "lucide:inbox" },
@@ -40,7 +49,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     columnsLabel: { default: "Columns" }
   },
   emits: ["update:selected", "update:sort", "rowClick"],
-  setup(__props, { emit: __emit }) {
+  setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const emit = __emit;
     function keyFor(row, index) {
@@ -66,14 +75,40 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     const ownSort = ref(null);
     const activeSort = computed(() => props.sort ?? ownSort.value);
+    const loaded = shallowRef([]);
+    const total = ref(0);
+    const facets = ref({});
+    const failed = ref(false);
+    const page = ref(1);
+    const task = useAsyncTask();
+    const loading = task.pending;
+    const sourceRows = computed(() => props.load ? loaded.value : props.rows);
+    const tableEl = ref(null);
+    const floor = ref(0);
+    async function holdHeight() {
+      await nextTick();
+      const height = tableEl.value?.offsetHeight ?? 0;
+      if (height > floor.value) floor.value = height;
+    }
     const hiddenValues = ref({});
+    const animating = ref(false);
+    let motionTimer;
+    function withMotion(change) {
+      if (!props.load) {
+        animating.value = true;
+        if (motionTimer) clearTimeout(motionTimer);
+        motionTimer = setTimeout(() => animating.value = false, 600);
+      }
+      change();
+    }
     const hiddenColumns = ref(/* @__PURE__ */ new Set());
     const visibleColumns = computed(
       () => props.columns.filter((c) => !hiddenColumns.value.has(c.key))
     );
     function valuesOf(col) {
+      if (props.load && facets.value[col.key]) return facets.value[col.key];
       const seen = [];
-      for (const row of props.rows) {
+      for (const row of sourceRows.value) {
         const v = row[col.key];
         if (!seen.includes(v)) seen.push(v);
       }
@@ -83,13 +118,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return hiddenValues.value[key]?.has(value) ?? false;
     }
     function toggleValue(key, value) {
+      withMotion(() => applyToggle(key, value));
+    }
+    function applyToggle(key, value) {
       const next = new Set(hiddenValues.value[key] ?? []);
       if (next.has(value)) next.delete(value);
       else next.add(value);
       hiddenValues.value = { ...hiddenValues.value, [key]: next };
     }
     function showAllValues(key) {
-      hiddenValues.value = { ...hiddenValues.value, [key]: /* @__PURE__ */ new Set() };
+      withMotion(() => hiddenValues.value = { ...hiddenValues.value, [key]: /* @__PURE__ */ new Set() });
     }
     function toggleColumn(key) {
       const next = new Set(hiddenColumns.value);
@@ -98,6 +136,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       hiddenColumns.value = next;
     }
     const filteredRows = computed(() => {
+      if (props.load) return sourceRows.value;
       const active = Object.entries(hiddenValues.value).filter(([, set]) => set.size);
       if (!active.length) return props.rows;
       return props.rows.filter(
@@ -106,7 +145,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     const displayRows = computed(() => {
       const s = activeSort.value;
-      if (!s) return filteredRows.value;
+      if (!s || props.load) return filteredRows.value;
       const col = props.columns.find((c) => c.key === s.key);
       if (!col?.sortable) return filteredRows.value;
       const factor = s.dir === "asc" ? 1 : -1;
@@ -126,8 +165,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (!s || s.key !== col.key) next = { key: col.key, dir: "asc" };
       else if (s.dir === "asc") next = { key: col.key, dir: "desc" };
       else next = null;
-      ownSort.value = next;
-      emit("update:sort", next);
+      withMotion(() => {
+        ownSort.value = next;
+        emit("update:sort", next);
+      });
     }
     function sortIcon(col) {
       const s = activeSort.value;
@@ -136,10 +177,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }
     function headerMenu(col) {
       const s = activeSort.value;
-      const set = (next) => () => {
+      const set = (next) => () => withMotion(() => {
         ownSort.value = next;
         emit("update:sort", next);
-      };
+      });
       const items = [];
       if (col.sortable) {
         items.push(
@@ -205,8 +246,37 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         }
       ];
     }
+    function fetchPage(delay = 0) {
+      const load = props.load;
+      if (!load) return;
+      const hidden = Object.fromEntries(
+        Object.entries(hiddenValues.value).filter(([, set]) => set.size).map(([key, set]) => [key, [...set]])
+      );
+      const query = { page: page.value, pageSize: props.pageSize, sort: activeSort.value, hidden };
+      task.run((signal) => load(query, signal), {
+        delay,
+        apply: (result) => {
+          loaded.value = result.rows;
+          total.value = result.total;
+          facets.value = result.facets ?? {};
+          failed.value = false;
+          holdHeight();
+        },
+        fail: () => {
+          failed.value = true;
+        }
+      });
+    }
+    watch([activeSort, hiddenValues], () => {
+      if (!props.load) return;
+      if (page.value !== 1) page.value = 1;
+      else fetchPage(props.debounce);
+    });
+    watch(page, () => fetchPage());
+    watch(() => props.load, () => fetchPage(), { immediate: true });
+    __expose({ reload: () => fetchPage() });
     const selectedSet = computed(() => new Set(props.selected));
-    const allKeys = computed(() => props.rows.map((r, i) => keyFor(r, i)));
+    const allKeys = computed(() => sourceRows.value.map((r, i) => keyFor(r, i)));
     const allChecked = computed(
       () => allKeys.value.length > 0 && allKeys.value.every((k) => selectedSet.value.has(k))
     );
@@ -273,143 +343,169 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       },
       { immediate: true, flush: "post" }
     );
-    onBeforeUnmount(() => ro?.disconnect());
+    onBeforeUnmount(() => {
+      ro?.disconnect();
+      if (motionTimer) clearTimeout(motionTimer);
+    });
     const barInsetTop = computed(
       () => props.stickyHeader && headHeight.value ? `${headHeight.value}px` : void 0
     );
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$1, {
-        fade: false,
-        class: "rounded-card border border-line",
-        "bar-inset-top": barInsetTop.value
-      }, {
-        default: withCtx(() => [
-          createVNode(_sfc_main$2, {
-            items: contextMenu.value,
-            always: ""
-          }, {
-            default: withCtx(() => [
-              createElementVNode("table", _hoisted_1, [
-                createElementVNode("thead", {
-                  ref_key: "headEl",
-                  ref: headEl,
-                  class: normalizeClass(__props.stickyHeader ? "sticky top-0 z-10 bg-surface-soft" : "")
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createVNode(_sfc_main$1, mergeProps(_ctx.$attrs, {
+          fade: false,
+          class: "rounded-card border border-line",
+          style: __props.load && floor.value ? { minHeight: `${floor.value + 2}px` } : void 0,
+          "bar-inset-top": barInsetTop.value
+        }), {
+          default: withCtx(() => [
+            createVNode(_sfc_main$2, {
+              items: contextMenu.value,
+              always: ""
+            }, {
+              default: withCtx(() => [
+                createElementVNode("table", {
+                  ref_key: "tableEl",
+                  ref: tableEl,
+                  class: "w-full border-collapse text-sm"
                 }, [
-                  createElementVNode("tr", _hoisted_2, [
-                    __props.selectable ? (openBlock(), createElementBlock("th", _hoisted_3, [
-                      createVNode(_sfc_main$3, {
-                        "model-value": allChecked.value,
-                        indeterminate: someChecked.value,
-                        "onUpdate:modelValue": toggleAll
-                      }, null, 8, ["model-value", "indeterminate"])
-                    ])) : createCommentVNode("", true),
-                    (openBlock(true), createElementBlock(Fragment, null, renderList(visibleColumns.value, (col) => {
-                      return openBlock(), createElementBlock("th", {
-                        key: col.key,
-                        style: normalizeStyle(col.width ? { width: col.width } : void 0),
-                        class: normalizeClass(["px-4 py-3 text-[11px] font-semibold uppercase tracking-[0.08em] text-muted", alignClass(col.align)]),
-                        "aria-sort": activeSort.value?.key === col.key ? activeSort.value.dir === "asc" ? "ascending" : "descending" : void 0
-                      }, [
-                        col.sortable ? (openBlock(), createBlock(_sfc_main$2, {
-                          key: 0,
-                          items: headerMenu(col)
-                        }, {
-                          default: withCtx(() => [
-                            createElementVNode("button", {
-                              type: "button",
-                              class: normalizeClass(["group/sort -mx-1 inline-flex items-center gap-1 rounded px-1 outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring", [
-                                col.align === "right" ? "flex-row-reverse" : "",
-                                activeSort.value?.key === col.key ? "text-ink" : ""
-                              ]]),
-                              onClick: ($event) => toggleSort(col)
-                            }, [
-                              createTextVNode(toDisplayString(col.label) + " ", 1),
-                              createVNode(_sfc_main$4, {
-                                name: sortIcon(col),
-                                size: 13,
-                                class: normalizeClass([
-                                  "shrink-0 transition-[transform,opacity] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)]",
-                                  activeSort.value?.key === col.key ? "opacity-100" : "opacity-40 group-hover/sort:opacity-70"
-                                ])
-                              }, null, 8, ["name", "class"])
-                            ], 10, _hoisted_5)
-                          ]),
-                          _: 2
-                        }, 1032, ["items"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-                          createTextVNode(toDisplayString(col.label), 1)
-                        ], 64))
-                      ], 14, _hoisted_4);
-                    }), 128))
-                  ])
-                ], 2),
-                createVNode(TransitionGroup, {
-                  tag: "tbody",
-                  name: "lp-row",
-                  ref: (el) => unref(roving).setContainer(el?.$el ?? null)
-                }, {
-                  default: withCtx(() => [
-                    displayRows.value.length === 0 ? (openBlock(), createElementBlock("tr", _hoisted_6, [
-                      createElementVNode("td", {
-                        colspan: colSpan.value,
-                        class: "px-4 py-10 text-center text-muted"
-                      }, [
-                        createVNode(_sfc_main$4, {
-                          name: __props.emptyIcon,
-                          size: 22,
-                          class: "mx-auto mb-2 opacity-60"
-                        }, null, 8, ["name"]),
-                        createElementVNode("div", null, toDisplayString(__props.emptyLabel), 1)
-                      ], 8, _hoisted_7)
-                    ])) : createCommentVNode("", true),
-                    (openBlock(true), createElementBlock(Fragment, null, renderList(displayRows.value, (row, index) => {
-                      return openBlock(), createElementBlock("tr", mergeProps({
-                        key: keyFor(row, index),
-                        onContextmenu: ($event) => onRowContextMenu(row),
-                        class: ["group border-b border-line/60 outline-none transition-colors last:border-0 hover:bg-surface-soft/60 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring data-[active]:bg-surface-soft/40", selectedSet.value.has(keyFor(row, index)) ? "bg-brand-soft/40" : ""]
-                      }, { ref_for: true }, unref(roving).itemProps(String(keyFor(row, index))), {
-                        onClick: ($event) => emit("rowClick", row),
-                        onKeydown: onRowKeydown
-                      }), [
-                        __props.selectable ? (openBlock(), createElementBlock("td", {
-                          key: 0,
-                          class: "w-px px-4 py-3",
-                          onClick: _cache[0] || (_cache[0] = withModifiers(() => {
-                          }, ["stop"]))
+                  createElementVNode("thead", {
+                    ref_key: "headEl",
+                    ref: headEl,
+                    class: normalizeClass(__props.stickyHeader ? "sticky top-0 z-10 bg-surface-soft" : "")
+                  }, [
+                    createElementVNode("tr", _hoisted_2, [
+                      __props.selectable ? (openBlock(), createElementBlock("th", _hoisted_3, [
+                        createVNode(_sfc_main$3, {
+                          "model-value": allChecked.value,
+                          indeterminate: someChecked.value,
+                          "onUpdate:modelValue": toggleAll
+                        }, null, 8, ["model-value", "indeterminate"])
+                      ])) : createCommentVNode("", true),
+                      (openBlock(true), createElementBlock(Fragment, null, renderList(visibleColumns.value, (col) => {
+                        return openBlock(), createElementBlock("th", {
+                          key: col.key,
+                          style: normalizeStyle(col.width ? { width: col.width } : void 0),
+                          class: normalizeClass(["px-4 py-3 text-[11px] font-semibold uppercase tracking-[0.08em] text-muted", alignClass(col.align)]),
+                          "aria-sort": activeSort.value?.key === col.key ? activeSort.value.dir === "asc" ? "ascending" : "descending" : void 0
+                        }, [
+                          col.sortable || col.filterable ? (openBlock(), createBlock(_sfc_main$2, {
+                            key: 0,
+                            items: headerMenu(col)
+                          }, {
+                            default: withCtx(() => [
+                              createElementVNode("button", {
+                                type: "button",
+                                class: normalizeClass(["group/sort -mx-1 inline-flex items-center gap-1 rounded px-1 outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink focus-visible:ring-2 focus-visible:ring-ring", [
+                                  col.align === "right" ? "flex-row-reverse" : "",
+                                  activeSort.value?.key === col.key ? "text-ink" : ""
+                                ]]),
+                                onClick: ($event) => toggleSort(col)
+                              }, [
+                                createTextVNode(toDisplayString(col.label) + " ", 1),
+                                !col.sortable ? (openBlock(), createBlock(_sfc_main$4, {
+                                  key: 0,
+                                  name: "lucide:filter",
+                                  size: 12,
+                                  class: normalizeClass(["shrink-0", hiddenValues.value[col.key]?.size ? "text-brand opacity-100" : "opacity-40 group-hover/sort:opacity-70"])
+                                }, null, 8, ["class"])) : (openBlock(), createBlock(_sfc_main$4, {
+                                  key: 1,
+                                  name: sortIcon(col),
+                                  size: 13,
+                                  class: normalizeClass([
+                                    "shrink-0 transition-[transform,opacity] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)]",
+                                    activeSort.value?.key === col.key ? "opacity-100" : "opacity-40 group-hover/sort:opacity-70"
+                                  ])
+                                }, null, 8, ["name", "class"]))
+                              ], 10, _hoisted_5)
+                            ]),
+                            _: 2
+                          }, 1032, ["items"])) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+                            createTextVNode(toDisplayString(col.label), 1)
+                          ], 64))
+                        ], 14, _hoisted_4);
+                      }), 128))
+                    ])
+                  ], 2),
+                  createVNode(TransitionGroup, {
+                    tag: "tbody",
+                    name: "lp-row",
+                    css: animating.value,
+                    class: normalizeClass(unref(loading) && displayRows.value.length ? "opacity-60 transition-opacity" : "transition-opacity"),
+                    ref: (el) => unref(roving).setContainer(el?.$el ?? null)
+                  }, {
+                    default: withCtx(() => [
+                      displayRows.value.length === 0 ? (openBlock(), createElementBlock("tr", _hoisted_6, [
+                        createElementVNode("td", {
+                          colspan: colSpan.value,
+                          class: "px-4 py-10 text-center text-muted"
                         }, [
-                          createVNode(_sfc_main$3, {
-                            "model-value": selectedSet.value.has(keyFor(row, index)),
-                            "onUpdate:modelValue": (v) => toggleRow(keyFor(row, index), v)
-                          }, null, 8, ["model-value", "onUpdate:modelValue"])
-                        ])) : createCommentVNode("", true),
-                        (openBlock(true), createElementBlock(Fragment, null, renderList(visibleColumns.value, (col) => {
-                          return openBlock(), createElementBlock("td", {
-                            key: col.key,
-                            class: normalizeClass(["px-4 py-3 text-ink", alignClass(col.align)])
+                          createVNode(_sfc_main$4, {
+                            name: unref(loading) ? "lucide:loader-circle" : failed.value ? "lucide:circle-alert" : __props.emptyIcon,
+                            size: 22,
+                            class: normalizeClass(["mx-auto mb-2 opacity-60", unref(loading) ? "animate-spin" : ""])
+                          }, null, 8, ["name", "class"]),
+                          createElementVNode("div", null, toDisplayString(unref(loading) ? __props.loadingLabel : failed.value ? __props.errorLabel : __props.emptyLabel), 1)
+                        ], 8, _hoisted_7)
+                      ])) : createCommentVNode("", true),
+                      (openBlock(true), createElementBlock(Fragment, null, renderList(displayRows.value, (row, index) => {
+                        return openBlock(), createElementBlock("tr", mergeProps({
+                          key: keyFor(row, index),
+                          onContextmenu: ($event) => onRowContextMenu(row),
+                          class: ["group border-b border-line/60 outline-none transition-colors last:border-0 hover:bg-surface-soft/60 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring data-[active]:bg-surface-soft/40", selectedSet.value.has(keyFor(row, index)) ? "bg-brand-soft/40" : ""]
+                        }, { ref_for: true }, unref(roving).itemProps(String(keyFor(row, index))), {
+                          onClick: ($event) => emit("rowClick", row),
+                          onKeydown: onRowKeydown
+                        }), [
+                          __props.selectable ? (openBlock(), createElementBlock("td", {
+                            key: 0,
+                            class: "w-px px-4 py-3",
+                            onClick: _cache[0] || (_cache[0] = withModifiers(() => {
+                            }, ["stop"]))
                           }, [
-                            renderSlot(_ctx.$slots, `cell-${col.key}`, {
-                              row,
-                              value: row[col.key]
-                            }, () => [
-                              createTextVNode(toDisplayString(row[col.key]), 1)
-                            ], true)
-                          ], 2);
-                        }), 128))
-                      ], 16, _hoisted_8);
-                    }), 128))
-                  ]),
-                  _: 3
-                }, 512)
-              ])
-            ]),
-            _: 3
-          }, 8, ["items"])
-        ]),
-        _: 3
-      }, 8, ["bar-inset-top"]);
+                            createVNode(_sfc_main$3, {
+                              "model-value": selectedSet.value.has(keyFor(row, index)),
+                              "onUpdate:modelValue": (v) => toggleRow(keyFor(row, index), v)
+                            }, null, 8, ["model-value", "onUpdate:modelValue"])
+                          ])) : createCommentVNode("", true),
+                          (openBlock(true), createElementBlock(Fragment, null, renderList(visibleColumns.value, (col) => {
+                            return openBlock(), createElementBlock("td", {
+                              key: col.key,
+                              class: normalizeClass(["px-4 py-3 text-ink", alignClass(col.align)])
+                            }, [
+                              renderSlot(_ctx.$slots, `cell-${col.key}`, {
+                                row,
+                                value: row[col.key]
+                              }, () => [
+                                createTextVNode(toDisplayString(row[col.key]), 1)
+                              ], true)
+                            ], 2);
+                          }), 128))
+                        ], 16, _hoisted_8);
+                      }), 128))
+                    ]),
+                    _: 3
+                  }, 8, ["css", "class"])
+                ], 512)
+              ]),
+              _: 3
+            }, 8, ["items"])
+          ]),
+          _: 3
+        }, 16, ["style", "bar-inset-top"]),
+        __props.load && total.value > __props.pageSize ? (openBlock(), createBlock(_sfc_main$5, {
+          key: 0,
+          page: page.value,
+          "onUpdate:page": _cache[1] || (_cache[1] = ($event) => page.value = $event),
+          total: total.value,
+          "page-size": __props.pageSize,
+          disabled: unref(loading)
+        }, null, 8, ["page", "total", "page-size", "disabled"])) : createCommentVNode("", true)
+      ]);
     };
   }
 });
-const LpTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-1fada8e7"]]);
+const LpTable = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-63738e53"]]);
 export {
   LpTable as default
 };

package/dist/components/modalDepth.js

@@ -1,5 +1,5 @@
 import { ref, computed } from "vue";
-const STEP = 10;
+const STEP = 20;
 const stack = ref([]);
 let nextId = 0;
 function useModalLayer() {

package/dist/composables/useAsyncTask.d.ts

@@ -0,0 +1,18 @@
+/**
+ * One debounced, abortable request at a time — the shape every "fetch on input"
+ * control in the kit needs: the command palette's `search`, the table's `load`.
+ *
+ * Two races are lost silently without it: a stale response overwriting a
+ * fresher one, and a response landing after the control moved on. The token
+ * guards both — the abort signal only asks the consumer to stop, it cannot
+ * promise they did.
+ */
+export declare function useAsyncTask<T>(): {
+    pending: import('vue').Ref<boolean, boolean>;
+    run: (task: (signal: AbortSignal) => T | Promise<T>, options: {
+        delay?: number;
+        apply: (value: T) => void;
+        fail?: (error: unknown) => void;
+    }) => void;
+    cancel: () => void;
+};

package/dist/composables/useAsyncTask.js

@@ -0,0 +1,36 @@
+import { ref, getCurrentScope, onScopeDispose } from "vue";
+function useAsyncTask() {
+  const pending = ref(false);
+  let timer;
+  let controller;
+  let token = 0;
+  function cancel() {
+    if (timer) clearTimeout(timer);
+    timer = void 0;
+    controller?.abort();
+    controller = void 0;
+    token += 1;
+    pending.value = false;
+  }
+  function run(task, options) {
+    cancel();
+    pending.value = true;
+    const mine = ++token;
+    timer = setTimeout(async () => {
+      controller = new AbortController();
+      try {
+        const value = await task(controller.signal);
+        if (mine === token) options.apply(value);
+      } catch (error) {
+        if (mine === token) options.fail?.(error);
+      } finally {
+        if (mine === token) pending.value = false;
+      }
+    }, options.delay ?? 0);
+  }
+  if (getCurrentScope()) onScopeDispose(cancel);
+  return { pending, run, cancel };
+}
+export {
+  useAsyncTask
+};

package/dist/index.d.ts

@@ -101,7 +101,7 @@ export { default as LpStepper } from './components/LpStepper.vue';
 export type { Step } from './components/LpStepper.vue';
 export { default as LpSwitch } from './components/LpSwitch.vue';
 export { default as LpTable } from './components/LpTable.vue';
-export type { SortState, TableColumn } from './components/LpTable.vue';
+export type { SortState, TableColumn, TablePage, TableQuery } from './components/LpTable.vue';
 export { default as LpTableOfContents } from './components/LpTableOfContents.vue';
 export type { TocLink } from './components/LpTableOfContents.vue';
 export { default as LpTabs } from './components/LpTabs.vue';
@@ -142,6 +142,7 @@ export type { UseInputFilterOptions } from './composables/useInputFilter';
 export { easeOut, easeTravel, easingToken, prefersReducedMotion } from './composables/easing';
 export { useReveal } from './composables/useReveal';
 export type { UseReveal, UseRevealOptions } from './composables/useReveal';
+export { useAsyncTask } from './composables/useAsyncTask';
 export { useRovingFocus } from './composables/useRovingFocus';
 export type { RovingItem, UseRovingFocusOptions } from './composables/useRovingFocus';
 export { useFormDraft } from './composables/useFormDraft';

package/dist/index.js

@@ -91,6 +91,7 @@ import { mergeClass, useMergedAttrs, useMergedClass } from "./composables/useMer
 import { useInputFilter } from "./composables/useInputFilter.js";
 import { easeOut, easeTravel, easingToken, prefersReducedMotion } from "./composables/easing.js";
 import { useReveal } from "./composables/useReveal.js";
+import { useAsyncTask } from "./composables/useAsyncTask.js";
 import { useRovingFocus } from "./composables/useRovingFocus.js";
 import { useFormDraft } from "./composables/useFormDraft.js";
 import { useSettled } from "./composables/useSettled.js";
@@ -290,6 +291,7 @@ export {
   m as themeToCssVars,
   tileUrl,
   unproject,
+  useAsyncTask,
   useClipboard,
   useFormDraft,
   useHotkeys,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leavepulse/ui",
-  "version": "0.36.1",
+  "version": "0.37.1",
   "type": "module",
   "description": "LeavePulse token-driven Vue component kit.",
   "repository": {