@oneflowui/ui 0.5.7 → 0.5.8

package/dist/components/table/TableHeaderRow.vue2.js

@@ -1,17 +1,9 @@
-import { defineComponent as z, openBlock as o, createElementBlock as i, createElementVNode as r, createCommentVNode as f, Fragment as w, renderList as C, withModifiers as d, normalizeStyle as v, normalizeClass as B, toDisplayString as g, createBlock as u, unref as c, createVNode as D } from "vue";
-import { ChevronUp as K, ChevronDown as k, Plus as S } from "lucide-vue-next";
-const $ = {
-  class: "of-table-header",
-  role: "row"
-}, F = {
-  key: 0,
-  class: "of-th of-th-checkbox",
-  role: "columnheader",
-  "aria-label": "选择全部行"
-}, M = {
+import { defineComponent as M, computed as u, openBlock as a, createElementBlock as i, normalizeStyle as f, createElementVNode as r, createCommentVNode as k, Fragment as B, renderList as P, withModifiers as c, normalizeClass as W, toDisplayString as D, createBlock as b, unref as h, createVNode as K } from "vue";
+import { ChevronUp as H, ChevronDown as m, Plus as F } from "lucide-vue-next";
+const Y = {
   class: "of-th-checkbox__label",
   for: "of-table-select-all-checkbox"
-}, p = ["checked", "indeterminate"], O = ["aria-sort", "onClick", "onKeydown", "onContextmenu", "onDblclick"], R = { class: "of-th-label" }, E = { class: "of-th-sort-icon" }, N = ["onMousedown", "onDblclick"], H = /* @__PURE__ */ z({
+}, O = ["checked", "indeterminate"], E = ["aria-sort", "onClick", "onKeydown", "onContextmenu", "onDblclick"], N = { class: "of-th-label" }, R = { class: "of-th-sort-icon" }, T = ["onMousedown", "onDblclick"], V = /* @__PURE__ */ M({
   __name: "TableHeaderRow",
   props: {
     columns: {},
@@ -22,93 +14,137 @@ const $ = {
     indeterminate: { type: Boolean, default: !1 },
     enableResize: { type: Boolean, default: !1 },
     enableFieldMenu: { type: Boolean, default: !1 },
-    enableAddField: { type: Boolean, default: !1 }
+    enableAddField: { type: Boolean, default: !1 },
+    density: { default: "standard" }
   },
   emits: ["sort", "select-all", "resize-start", "resize-dblclick", "header-contextmenu", "header-dblclick", "add-field"],
-  setup(e, { emit: y }) {
-    const a = y;
-    function b(t) {
-      if (t.width === "fill") {
-        const n = `${t.minWidth ?? 220}px`;
-        return { flex: `1 1 ${n}`, minWidth: n };
+  setup(t, { emit: x }) {
+    const g = t, o = x, v = {
+      compact: {
+        headerHeight: 32,
+        cellPaddingX: 10,
+        cellPaddingY: 6,
+        addColumnWidth: 32,
+        fillMinWidth: 180
+      },
+      standard: {
+        headerHeight: 36,
+        cellPaddingX: 12,
+        cellPaddingY: 8,
+        addColumnWidth: 36,
+        fillMinWidth: 220
+      },
+      comfortable: {
+        headerHeight: 40,
+        cellPaddingX: 14,
+        cellPaddingY: 10,
+        addColumnWidth: 40,
+        fillMinWidth: 240
       }
-      return { width: `${t.width}px`, flexShrink: "0", flexGrow: "0" };
+    }, s = u(() => v[g.density]), C = u(() => ({
+      minHeight: `${s.value.headerHeight}px`
+    })), y = u(() => ({
+      padding: `${s.value.cellPaddingY}px ${s.value.cellPaddingX}px`
+    })), w = u(() => ({
+      ...y.value,
+      width: `${s.value.addColumnWidth}px`,
+      flexShrink: "0",
+      flexGrow: "0"
+    }));
+    function z(l) {
+      const n = y.value;
+      if (l.width === "fill") {
+        const e = `${l.minWidth ?? s.value.fillMinWidth}px`;
+        return { ...n, flex: `1 1 ${e}`, minWidth: e };
+      }
+      return { ...n, width: `${l.width}px`, flexShrink: "0", flexGrow: "0" };
     }
-    function h(t) {
-      a("sort", t);
+    function p(l) {
+      o("sort", l);
     }
-    function m(t, n) {
-      t.target === t.currentTarget && (t.key !== "Enter" && t.key !== " " || (t.preventDefault(), a("sort", n)));
+    function S(l, n) {
+      l.target === l.currentTarget && (l.key !== "Enter" && l.key !== " " || (l.preventDefault(), o("sort", n)));
     }
-    function x(t, n) {
-      t.stopPropagation(), a("resize-start", t, n);
+    function $(l, n) {
+      l.stopPropagation(), o("resize-start", l, n);
     }
-    return (t, n) => (o(), i("div", $, [
-      e.selectable ? (o(), i("div", F, [
-        r("label", M, [
+    return (l, n) => (a(), i("div", {
+      class: "of-table-header",
+      role: "row",
+      style: f(C.value)
+    }, [
+      t.selectable ? (a(), i("div", {
+        key: 0,
+        class: "of-th of-th-checkbox",
+        role: "columnheader",
+        "aria-label": "选择全部行",
+        style: f(y.value)
+      }, [
+        r("label", Y, [
           r("input", {
             id: "of-table-select-all-checkbox",
             type: "checkbox",
             class: "of-checkbox",
-            checked: e.allSelected,
-            indeterminate: e.indeterminate,
-            onChange: n[0] || (n[0] = (l) => a("select-all"))
-          }, null, 40, p),
+            checked: t.allSelected,
+            indeterminate: t.indeterminate,
+            onChange: n[0] || (n[0] = (e) => o("select-all"))
+          }, null, 40, O),
           n[3] || (n[3] = r("span", { class: "of-sr-only" }, "选择全部行", -1))
         ])
-      ])) : f("", !0),
-      (o(!0), i(w, null, C(e.columns, (l) => (o(), i("div", {
-        key: l.key,
+      ], 4)) : k("", !0),
+      (a(!0), i(B, null, P(t.columns, (e) => (a(), i("div", {
+        key: e.key,
         role: "columnheader",
         tabindex: "0",
-        class: B(["of-th", { "of-th--sortable": !0, "of-th--active": e.sortKey === l.key }]),
-        style: v(b(l)),
-        "aria-sort": e.sortKey === l.key ? e.sortOrder === "asc" ? "ascending" : "descending" : "none",
-        onClick: (s) => h(l.key),
-        onKeydown: (s) => m(s, l.key),
-        onContextmenu: d((s) => e.enableFieldMenu && a("header-contextmenu", s, l.key), ["prevent"]),
-        onDblclick: d((s) => e.enableFieldMenu && a("header-dblclick", l.key), ["stop"])
+        class: W(["of-th", { "of-th--sortable": !0, "of-th--active": t.sortKey === e.key }]),
+        style: f(z(e)),
+        "aria-sort": t.sortKey === e.key ? t.sortOrder === "asc" ? "ascending" : "descending" : "none",
+        onClick: (d) => p(e.key),
+        onKeydown: (d) => S(d, e.key),
+        onContextmenu: c((d) => t.enableFieldMenu && o("header-contextmenu", d, e.key), ["prevent"]),
+        onDblclick: c((d) => t.enableFieldMenu && o("header-dblclick", e.key), ["stop"])
       }, [
-        r("span", R, g(l.label), 1),
-        r("span", E, [
-          e.sortKey === l.key && e.sortOrder === "asc" ? (o(), u(c(K), {
+        r("span", N, D(e.label), 1),
+        r("span", R, [
+          t.sortKey === e.key && t.sortOrder === "asc" ? (a(), b(h(H), {
             key: 0,
             size: 12,
             class: "of-sort-icon-active"
-          })) : e.sortKey === l.key && e.sortOrder === "desc" ? (o(), u(c(k), {
+          })) : t.sortKey === e.key && t.sortOrder === "desc" ? (a(), b(h(m), {
             key: 1,
             size: 12,
             class: "of-sort-icon-active"
-          })) : (o(), u(c(k), {
+          })) : (a(), b(h(m), {
             key: 2,
             size: 12,
             class: "of-sort-icon-idle"
           }))
         ]),
-        e.enableResize ? (o(), i("button", {
+        t.enableResize ? (a(), i("button", {
           key: 0,
           type: "button",
           class: "of-th-resizer",
           "aria-label": "调整列宽",
-          onClick: n[1] || (n[1] = d(() => {
+          onClick: n[1] || (n[1] = c(() => {
           }, ["stop"])),
-          onMousedown: (s) => x(s, l.key),
-          onDblclick: d((s) => a("resize-dblclick", l.key), ["stop"])
-        }, null, 40, N)) : f("", !0)
-      ], 46, O))), 128)),
-      e.enableAddField ? (o(), i("button", {
+          onMousedown: (d) => $(d, e.key),
+          onDblclick: c((d) => o("resize-dblclick", e.key), ["stop"])
+        }, null, 40, T)) : k("", !0)
+      ], 46, E))), 128)),
+      t.enableAddField ? (a(), i("button", {
         key: 1,
         type: "button",
         class: "of-th of-th-add",
         tabindex: "0",
         "aria-label": "添加字段",
-        onClick: n[2] || (n[2] = d((l) => a("add-field"), ["stop"]))
+        style: f(w.value),
+        onClick: n[2] || (n[2] = c((e) => o("add-field"), ["stop"]))
       }, [
-        D(c(S), { size: 14 })
-      ])) : f("", !0)
-    ]));
+        K(h(F), { size: 14 })
+      ], 4)) : k("", !0)
+    ], 4));
   }
 });
 export {
-  H as default
+  V as default
 };

package/dist/composables/useColumnResize.d.ts

@@ -1,7 +1,10 @@
 import { Ref } from 'vue';
-import { TableColumn } from '../types';
+import { Density, TableColumn } from '../types';
 export interface UseColumnResizeOptions {
     columns: Ref<TableColumn[]>;
+    rows?: Ref<ReadonlyArray<Record<string, unknown>>>;
+    density?: Ref<Density>;
+    sampleSize?: number;
     /** Minimum column width in px (default 60) */
     minWidth?: number;
     /** Called on every mousemove during resize */

package/dist/composables/useColumnResize.js

@@ -1,58 +1,127 @@
-import { ref as o, onUnmounted as b, readonly as a } from "vue";
-function E(u) {
-  const d = u.minWidth ?? 60, m = o(!1), v = o(null), i = o(/* @__PURE__ */ new Map()), f = o(0), h = o(!1);
-  let n = null, y = "", W = "";
-  function X(e) {
+import { ref as g, onUnmounted as E, readonly as M } from "vue";
+const z = {
+  compact: {
+    fillMinWidth: 180,
+    basePadding: 18,
+    labelPadding: 22,
+    autoFitPadding: 18,
+    clampMax: 360
+  },
+  standard: {
+    fillMinWidth: 220,
+    basePadding: 24,
+    labelPadding: 26,
+    autoFitPadding: 24,
+    clampMax: 420
+  },
+  comfortable: {
+    fillMinWidth: 240,
+    basePadding: 28,
+    labelPadding: 30,
+    autoFitPadding: 30,
+    clampMax: 480
+  }
+}, F = {
+  string: 180,
+  number: 110,
+  date: 140,
+  status: 124,
+  priority: 124
+};
+function S(t) {
+  return t ?? "standard";
+}
+function k(t) {
+  if (t == null) return "";
+  if (typeof t == "string") return t;
+  if (typeof t == "number" || typeof t == "boolean" || typeof t == "bigint")
+    return String(t);
+  if (t instanceof Date) return t.toISOString();
+  if (Array.isArray(t)) return t.map((a) => k(a)).join(", ");
+  if (typeof t == "object")
+    try {
+      return JSON.stringify(t);
+    } catch {
+      return String(t);
+    }
+  return String(t);
+}
+function w(t) {
+  let a = 0;
+  for (const s of t)
+    a += s.charCodeAt(0) <= 127 ? 7 : 14;
+  return a;
+}
+function D(t, a, s, m) {
+  const i = z[s], h = t.type ? F[t.type] : 168, y = w(t.label) + i.labelPadding, r = a.slice(0, Math.max(1, m));
+  let c = 0;
+  for (const p of r) {
+    const f = k(p[t.key]);
+    f && (c = Math.max(c, w(f) + i.basePadding));
+  }
+  const W = t.key === "id" ? 120 : t.key === "title" ? 220 : t.key === "description" ? 260 : 0, b = Math.max(h, y, c, W, i.fillMinWidth);
+  return Math.min(Math.max(b, i.fillMinWidth), i.clampMax);
+}
+function T(t) {
+  const a = t.minWidth ?? 60, s = g(!1), m = g(null), i = g(/* @__PURE__ */ new Map()), h = g(0), y = g(!1);
+  let r = null, c = "", W = "";
+  function b(e) {
+    var u, d;
     if (i.value.has(e))
       return i.value.get(e);
-    const t = u.columns.value.find((s) => s.key === e);
-    return !t || t.width === "fill" ? 200 : t.width ?? 200;
+    const n = t.columns.value.find((x) => x.key === e), l = S((u = t.density) == null ? void 0 : u.value), o = z[l];
+    return n ? n.width === "fill" ? n.minWidth ?? o.fillMinWidth : typeof n.width == "number" ? n.width : D(
+      n,
+      ((d = t.rows) == null ? void 0 : d.value) ?? [],
+      l,
+      t.sampleSize ?? 8
+    ) : o.fillMinWidth;
   }
-  function w(e) {
-    var r;
-    if (!n) return;
-    const t = e.clientX - n.startX, s = Math.max(d, n.initialWidth + t), l = new Map(i.value);
-    l.set(n.colKey, s), i.value = l, f.value = e.clientX, (r = u.onResize) == null || r.call(u, n.colKey, s);
+  function p(e) {
+    var u;
+    if (!r) return;
+    const n = e.clientX - r.startX, l = Math.max(a, r.initialWidth + n), o = new Map(i.value);
+    o.set(r.colKey, l), i.value = o, h.value = e.clientX, (u = t.onResize) == null || u.call(t, r.colKey, l);
   }
-  function z() {
-    n && (document.body.style.cursor = y, document.body.style.userSelect = W, document.removeEventListener("mousemove", w), document.removeEventListener("mouseup", z), m.value = !1, v.value = null, h.value = !1, n = null);
+  function f() {
+    r && (document.body.style.cursor = c, document.body.style.userSelect = W, document.removeEventListener("mousemove", p), document.removeEventListener("mouseup", f), s.value = !1, m.value = null, y.value = !1, r = null);
   }
-  function R(e, t) {
-    e.preventDefault(), e.stopPropagation(), n = {
-      colKey: t,
+  function I(e, n) {
+    e.preventDefault(), e.stopPropagation(), r = {
+      colKey: n,
       startX: e.clientX,
-      initialWidth: X(t)
-    }, m.value = !0, v.value = t, f.value = e.clientX, h.value = !0, y = document.body.style.cursor, W = document.body.style.userSelect, document.body.style.cursor = "col-resize", document.body.style.userSelect = "none", document.addEventListener("mousemove", w), document.addEventListener("mouseup", z);
-  }
-  function g(e) {
-    return X(e);
-  }
-  function C(e, t) {
-    var r;
-    if (!t) return;
-    const s = t.querySelectorAll(`[data-col-key="${e}"]`);
-    let l = d;
-    if (s.forEach((c) => {
-      const M = c.firstElementChild;
-      M && (l = Math.max(l, M.scrollWidth + 24));
-    }), l > d) {
-      const c = new Map(i.value);
-      c.set(e, l), i.value = c, (r = u.onResize) == null || r.call(u, e, l);
+      initialWidth: b(n)
+    }, s.value = !0, m.value = n, h.value = e.clientX, y.value = !0, c = document.body.style.cursor, W = document.body.style.userSelect, document.body.style.cursor = "col-resize", document.body.style.userSelect = "none", document.addEventListener("mousemove", p), document.addEventListener("mouseup", f);
+  }
+  function X(e) {
+    return b(e);
+  }
+  function R(e, n) {
+    var x, C;
+    if (!n) return;
+    const l = S((x = t.density) == null ? void 0 : x.value), o = z[l].autoFitPadding, u = n.querySelectorAll(`[data-col-key="${e}"]`);
+    let d = a;
+    if (u.forEach((v) => {
+      const P = v.firstElementChild;
+      P && (d = Math.max(d, P.scrollWidth + o));
+    }), d > a) {
+      const v = new Map(i.value);
+      v.set(e, d), i.value = v, (C = t.onResize) == null || C.call(t, e, d);
     }
   }
-  return b(() => {
-    n && z();
+  return E(() => {
+    r && f();
   }), {
-    startResize: R,
-    isResizing: a(m),
-    resizingColumn: a(v),
-    columnWidthOverrides: a(i),
-    resolvedWidth: g,
-    autoFitColumn: C,
-    resizeIndicatorX: a(f),
-    showResizeIndicator: a(h)
+    startResize: I,
+    isResizing: M(s),
+    resizingColumn: M(m),
+    columnWidthOverrides: M(i),
+    resolvedWidth: X,
+    autoFitColumn: R,
+    resizeIndicatorX: M(h),
+    showResizeIndicator: M(y)
   };
 }
 export {
-  E as useColumnResize
+  T as useColumnResize
 };

package/dist/composables/useRowDrag.d.ts

@@ -22,7 +22,7 @@ export declare function useRowDrag<T extends Record<string, unknown>>(options: U
     isDragging: Readonly<Ref<boolean, boolean>>;
     draggedRowId: Readonly<Ref<string | null, string | null>>;
     dropTargetId: Readonly<Ref<string | null, string | null>>;
-    dropPosition: Readonly<Ref<"before" | "after" | "into-group", "before" | "after" | "into-group">>;
+    dropPosition: Readonly<Ref<"after" | "before" | "into-group", "after" | "before" | "into-group">>;
     handleDragStart: (e: DragEvent, item: RowDragItem<T>) => void;
     handleDragOver: (e: DragEvent, targetItem: RowDragItem<T>) => void;
     handleDrop: (e: DragEvent, targetItem: RowDragItem<T>, callbacks: {

package/dist/composables/useVirtualList.d.ts

@@ -4,6 +4,7 @@ export interface UseVirtualListOptions<T> {
     itemHeight: number | ((index: number) => number);
     overscan?: number;
     containerRef: Ref<HTMLElement | null>;
+    invalidateKey?: Ref<unknown>;
     /** Optional callback to measure actual row height after render. When provided, measured heights override itemHeight. */
     measureRow?: boolean;
 }

package/dist/composables/useVirtualList.js

@@ -1,135 +1,147 @@
-import { ref as w, computed as p, watch as L, getCurrentScope as Q, onScopeDispose as W } from "vue";
-function Z(I) {
-  var F;
-  const { items: n, itemHeight: c, overscan: V = 5, containerRef: B } = I, s = w(0), f = w(0), v = typeof c == "number", g = Math.max(0, V), a = /* @__PURE__ */ new Map(), T = w(0);
-  let d = null, h = null, r = null;
-  function A(e) {
-    return a.has(e) ? a.get(e) : v ? c : c(e);
+import { ref as T, computed as p, watch as z, getCurrentScope as W, onScopeDispose as X } from "vue";
+function _(x) {
+  var V;
+  const { items: n, itemHeight: c, overscan: B = 5, containerRef: A } = x, s = T(0), v = T(0), h = typeof c == "number", m = Math.max(0, B), a = /* @__PURE__ */ new Map(), b = T(0);
+  let d = null, f = null, l = null;
+  function D(e) {
+    return a.has(e) ? a.get(e) : h ? c : c(e);
   }
-  function D() {
-    !I.measureRow || typeof ResizeObserver > "u" || (h = new ResizeObserver((e) => {
+  function K() {
+    !x.measureRow || typeof ResizeObserver > "u" || (f = new ResizeObserver((e) => {
       let t = !1;
-      for (const l of e) {
-        const i = l.target.dataset.virtualIndex;
-        if (i == null) continue;
-        const u = parseInt(i, 10), m = l.contentRect.height;
-        a.get(u) !== m && (a.set(u, m), t = !0);
+      for (const i of e) {
+        const r = i.target.dataset.virtualIndex;
+        if (r == null) continue;
+        const u = parseInt(r, 10), g = i.contentRect.height;
+        a.get(u) !== g && (a.set(u, g), t = !0);
       }
-      t && T.value++;
+      t && b.value++;
     }));
   }
-  D();
+  K();
+  function C() {
+    a.size !== 0 && (a.clear(), b.value++, l && M(l));
+  }
   function P(e, t) {
-    !e || !h || (e.dataset.virtualIndex = String(t), h.observe(e));
+    !e || !f || (e.dataset.virtualIndex = String(t), f.observe(e));
   }
-  const M = p(() => {
-    if (T.value, v && a.size === 0) return [];
+  const w = p(() => {
+    if (b.value, h && a.size === 0) return [];
     const e = new Array(n.value.length + 1).fill(0);
     for (let t = 0; t < n.value.length; t += 1)
-      e[t + 1] = e[t] + Math.max(0, A(t));
+      e[t + 1] = e[t] + Math.max(0, D(t));
     return e;
-  }), x = p(() => v && a.size === 0 ? n.value.length * c : M.value[n.value.length] ?? 0);
-  function C(e) {
+  }), I = p(() => h && a.size === 0 ? n.value.length * c : w.value[n.value.length] ?? 0);
+  function H(e) {
     const t = Math.max(0, Math.min(e, n.value.length));
-    return v && a.size === 0 ? t * c : M.value[t] ?? 0;
+    return h && a.size === 0 ? t * c : w.value[t] ?? 0;
   }
-  function H(e) {
+  function R(e) {
     if (n.value.length === 0) return 0;
-    if (v && a.size === 0) {
-      const i = c;
+    if (h && a.size === 0) {
+      const r = c;
       return Math.max(
         0,
-        Math.min(n.value.length - 1, Math.floor(Math.max(0, e) / i))
+        Math.min(n.value.length - 1, Math.floor(Math.max(0, e) / r))
       );
     }
-    const t = M.value;
-    let l = 0, o = n.value.length;
-    for (; l < o; ) {
-      const i = Math.floor((l + o) / 2);
-      t[i + 1] <= e ? l = i + 1 : o = i;
+    const t = w.value;
+    let i = 0, o = n.value.length;
+    for (; i < o; ) {
+      const r = Math.floor((i + o) / 2);
+      t[r + 1] <= e ? i = r + 1 : o = r;
     }
-    return Math.max(0, Math.min(l, n.value.length - 1));
+    return Math.max(0, Math.min(i, n.value.length - 1));
   }
-  const R = p(() => {
+  const y = p(() => {
     const e = n.value.length;
     if (e === 0)
       return { start: 0, end: 0 };
-    if (f.value <= 0)
-      return { start: 0, end: Math.min(e, g * 2 + 1) };
-    if (v && a.size === 0) {
-      const u = c, m = Math.floor(s.value / u), J = Math.ceil(f.value / u), K = Math.max(0, m - g), N = Math.min(e, m + J + g);
-      return { start: K, end: N };
+    if (v.value <= 0)
+      return { start: 0, end: Math.min(e, m * 2 + 1) };
+    if (h && a.size === 0) {
+      const u = c, g = Math.floor(s.value / u), J = Math.ceil(v.value / u), N = Math.max(0, g - m), Q = Math.min(e, g + J + m);
+      return { start: N, end: Q };
     }
-    const t = Math.max(0, s.value), l = t + f.value, o = H(t), i = Math.min(e - 1, H(l));
+    const t = Math.max(0, s.value), i = t + v.value, o = R(t), r = Math.min(e - 1, R(i));
     return {
-      start: Math.max(0, o - g),
-      end: Math.min(e, i + g + 1)
+      start: Math.max(0, o - m),
+      end: Math.min(e, r + m + 1)
     };
-  }), U = p(() => C(R.value.start)), Y = p(() => {
-    const { start: e, end: t } = R.value;
-    return n.value.slice(e, t).map((l, o) => ({
-      data: l,
+  }), U = p(() => H(y.value.start)), Y = p(() => {
+    const { start: e, end: t } = y.value;
+    return n.value.slice(e, t).map((i, o) => ({
+      data: i,
       index: e + o
     }));
   });
-  function b(e) {
+  function M(e) {
     if (!e) {
-      s.value = 0, f.value = 0;
+      s.value = 0, v.value = 0;
       return;
     }
-    s.value = e.scrollTop, f.value = e.clientHeight;
-  }
-  function z() {
-    r && (s.value = r.scrollTop);
+    s.value = e.scrollTop, v.value = e.clientHeight;
   }
   function S() {
+    l && (s.value = l.scrollTop);
+  }
+  function O() {
     d == null || d.disconnect(), d = null;
   }
-  function y(e) {
-    e && e.removeEventListener("scroll", z);
+  function E(e) {
+    e && e.removeEventListener("scroll", S);
   }
   function j(e) {
     if (!e) {
-      r = null, b(null);
+      l = null, M(null);
       return;
     }
-    r = e, e.addEventListener("scroll", z, { passive: !0 }), b(e), typeof ResizeObserver < "u" && (d = new ResizeObserver(() => {
-      b(e);
+    l = e, e.addEventListener("scroll", S, { passive: !0 }), M(e), typeof ResizeObserver < "u" && (d = new ResizeObserver(() => {
+      M(e);
     }), d.observe(e));
   }
-  L(
-    B,
+  z(
+    A,
     (e, t) => {
-      y(t), S(), j(e);
+      E(t), O(), j(e);
+    },
+    { immediate: !0 }
+  ), z(
+    () => {
+      var e;
+      return (e = x.invalidateKey) == null ? void 0 : e.value;
+    },
+    () => {
+      C();
     },
     { immediate: !0 }
   );
-  let O = n.value.length, E = n.value.length > 0 ? (F = n.value[0]) == null ? void 0 : F.id : void 0;
-  L(n, (e) => {
+  let F = n.value.length, L = n.value.length > 0 ? (V = n.value[0]) == null ? void 0 : V.id : void 0;
+  z(n, (e) => {
     var u;
-    const t = e.length, l = t > 0 ? (u = e[0]) == null ? void 0 : u.id : void 0, o = t === O && l === E;
-    if (O = t, E = l, o)
+    const t = e.length, i = t > 0 ? (u = e[0]) == null ? void 0 : u.id : void 0, o = t === F && i === L;
+    if (F = t, L = i, o)
       return;
-    a.clear();
-    const i = Math.max(0, x.value - f.value);
-    s.value > i && (s.value = i, r && (r.scrollTop = i));
+    C();
+    const r = Math.max(0, I.value - v.value);
+    s.value > r && (s.value = r, l && (l.scrollTop = r));
   });
   function k(e) {
-    if (!r || n.value.length === 0) return;
-    const t = Math.max(0, Math.min(e, n.value.length - 1)), l = C(t);
-    r.scrollTop = l, s.value = l;
+    if (!l || n.value.length === 0) return;
+    const t = Math.max(0, Math.min(e, n.value.length - 1)), i = H(t);
+    l.scrollTop = i, s.value = i;
   }
   function q() {
-    if (!r) return;
-    const e = Math.max(0, x.value - r.clientHeight);
-    r.scrollTop = e, s.value = e;
+    if (!l) return;
+    const e = Math.max(0, I.value - l.clientHeight);
+    l.scrollTop = e, s.value = e;
   }
   const G = () => {
-    y(r), S(), h == null || h.disconnect(), h = null, r = null;
+    E(l), O(), f == null || f.disconnect(), f = null, l = null;
   };
-  return Q() && W(G), {
+  return W() && X(G), {
     visibleItems: Y,
-    totalHeight: x,
+    totalHeight: I,
     offsetY: U,
     scrollToIndex: k,
     scrollToBottom: q,
@@ -137,5 +149,5 @@ function Z(I) {
   };
 }
 export {
-  Z as useVirtualList
+  _ as useVirtualList
 };