vane-waterfall 2.0.0 → 2.0.2

package/dist/chunks/{doc-kTbJE7rY.js → doc-BCmEnh39.js}

@@ -1,37 +1,39 @@
-import { jsx as c } from "react/jsx-runtime";
-function R(n = {}) {
-  const i = n.containerRole ?? "list", s = n.itemRole ?? "listitem", o = n.enableTabIndex ?? !0, r = n.containerLabel ?? "Waterfall list", a = (e) => {
+import { jsx as d } from "react/jsx-runtime";
+function W(n = {}) {
+  const l = n.containerRole ?? "list", c = n.itemRole ?? "listitem", u = n.enableTabIndex ?? !0, b = n.containerLabel ?? "Waterfall list", a = /* @__PURE__ */ new WeakMap(), i = (e) => e.containerRef?.current ?? e.bus, s = (e) => a.get(i(e)) ?? 0, r = (e) => {
     const t = e.containerRef.current;
-    t && (t.setAttribute("role", i), t.setAttribute("aria-label", r), t.setAttribute("aria-busy", e.isLayouting ? "true" : "false"));
+    t && (t.setAttribute("role", l), t.setAttribute("aria-label", b), t.setAttribute("aria-busy", e.isLayouting ? "true" : "false"));
   };
   return {
     name: "A11yPlugin",
     enabled: !0,
     hooks: {
       onMount: (e) => {
-        a(e);
+        r(e);
       },
       onLayoutComplete: (e) => {
-        a(e);
+        r(e);
       },
-      renderItemWrapper: (e, t, l) => /* @__PURE__ */ c(
+      onItemClick: (e, t) => {
+        s(e) !== t && (a.set(i(e), t), e.forceUpdate?.());
+      },
+      renderItemWrapper: (e, t, o) => /* @__PURE__ */ d(
         "div",
         {
-          role: s,
-          "aria-posinset": l + 1,
+          role: c,
+          "aria-posinset": o + 1,
           "aria-setsize": e.itemCount,
-          tabIndex: o ? 0 : void 0,
-          style: { outline: "none" },
+          tabIndex: u ? o === s(e) ? 0 : -1 : void 0,
           children: t
         }
       )
     }
   };
 }
-const u = "A11yPlugin", d = "把瀑布流补成读屏可理解的列表：容器 `role=list` + `aria-label`，每项 `role=listitem` + `aria-posinset` / `aria-setsize`，并可选加 `tabIndex` 让键盘能逐项聚焦。", b = "2.0.0", m = [
+const m = "A11yPlugin", p = "把瀑布流补成读屏可理解的列表：容器 `role=list` + `aria-label`，每项 `role=listitem` + `aria-posinset` / `aria-setsize`，并可选加 `tabIndex` 让键盘能逐项聚焦。", f = "2.0.0", g = [
   "ui",
   "a11y"
-], p = [
+], y = [
   {
     name: "containerRole",
     type: "string",
@@ -56,7 +58,7 @@ const u = "A11yPlugin", d = "把瀑布流补成读屏可理解的列表：容器
     default: '"Waterfall list"',
     description: "容器 aria-label"
   }
-], f = `// 给容器与项补 ARIA role / label / posinset，支持键盘 Tab 遍历。
+], I = `// 给容器与项补 ARIA role / label / posinset，支持键盘 Tab 遍历。
 const Waterfall = withPlugins(WaterfallCore, [
   createA11yPlugin({
     containerRole: "list",
@@ -65,28 +67,28 @@ const Waterfall = withPlugins(WaterfallCore, [
   }),
 ]);
 
-<Waterfall items={items} renderItem={(item) => <Card data={item} />} />;`, y = [
+<Waterfall items={items} renderItem={(item) => <Card data={item} />} />;`, R = [
   "容器 / 项 role 成对补齐",
   "aria-posinset + aria-setsize 正确标注序号",
   "键盘可逐项聚焦"
-], g = [
+], A = [
   "政务 / 金融等合规站点",
   "读屏用户可用的信息流",
   "键盘操作优先的桌面端"
-], x = [
+], C = [
   "项数很多时 `tabIndex=0` 会让 Tab 变长，建议配合「跳转主内容」链接使用。"
-], A = {
-  name: u,
-  description: d,
-  since: b,
-  tags: m,
-  config: p,
-  example: f,
-  features: y,
-  useCases: g,
-  notes: x
+], x = {
+  name: m,
+  description: p,
+  since: f,
+  tags: g,
+  config: y,
+  example: I,
+  features: R,
+  useCases: A,
+  notes: C
 };
 export {
-  R as c,
-  A as d
+  W as c,
+  x as d
 };

package/dist/chunks/doc-BQQoKNto.js

@@ -0,0 +1,126 @@
+function $(u = {}) {
+  const p = u.mode || "hash", o = u.keys || ["pageIndex", "pageSize", "searchQuery"];
+  let h = null, d = !1;
+  const l = () => (h === null && (h = m()), h);
+  function m() {
+    try {
+      if (p === "hash") {
+        const a = window.location.hash || "", s = a.indexOf("?"), n = s >= 0 ? a.slice(s + 1) : a.replace(/^#/, ""), e = new URLSearchParams(n), t = {};
+        return o.forEach((c) => {
+          const r = e.get(c);
+          r !== null && (t[c] = r);
+        }), t;
+      } else {
+        const a = new URLSearchParams(window.location.search), s = {};
+        return o.forEach((n) => {
+          const e = a.get(n);
+          e !== null && (s[n] = e);
+        }), s;
+      }
+    } catch {
+      return {};
+    }
+  }
+  function g(a) {
+    try {
+      const s = new URLSearchParams();
+      o.forEach((e) => {
+        const t = a[e];
+        t != null && String(t).length > 0 && s.set(e, String(t));
+      });
+      const n = s.toString();
+      if (p === "hash") {
+        const e = window.location.hash || "", r = `#${e.replace(/^#/, "").split("?")[0] || ""}${n ? `?${n}` : ""}`;
+        e !== r && history.replaceState(
+          null,
+          "",
+          `${window.location.pathname}${window.location.search}${r}`
+        );
+      } else {
+        const t = window.location.pathname + (n ? `?${n}` : "") + (window.location.hash || "");
+        history.replaceState(null, "", t);
+      }
+    } catch {
+    }
+  }
+  return {
+    name: "URLSyncPlugin",
+    enabled: !0,
+    hooks: {
+      // 首次渲染就把 URL 里的值注入 props：旧实现只广播 `urlsync:init`，
+      // 页面不手动订阅时深链参数根本不会生效（「只写不读」，P2-6）
+      transformProps: (a) => {
+        if (d) return a;
+        const s = l(), n = { ...a };
+        let e = !1;
+        return o.forEach((t) => {
+          s[t] !== void 0 && (n[t] = s[t], e = !0);
+        }), e && (d = !0), n;
+      },
+      onMount: (a) => {
+        a.bus?.emit("urlsync:init", l());
+      },
+      onPropsChange: (a, s, n) => {
+        const e = {}, t = n ?? {};
+        o.forEach((i) => {
+          const f = t[i];
+          f !== void 0 && (e[i] = f);
+        });
+        const c = l();
+        o.some(
+          (i) => String(e[i] ?? "") !== String(c[i] ?? "")
+        ) && g(e);
+      }
+    }
+  };
+}
+const w = "URLSyncPlugin", S = "props 变化时把指定键写进 URL（hash 或 search），挂载时读出来广播 `urlsync:init`。刷新与分享都能还原筛选状态。", y = "2.0.0", R = [
+  "ui",
+  "URL",
+  "可分享"
+], L = [
+  {
+    name: "mode",
+    type: '"hash" | "search"',
+    default: '"hash"',
+    description: "写 hash 还是 search"
+  },
+  {
+    name: "keys",
+    type: "string[]",
+    default: '["pageIndex","pageSize","searchQuery"]',
+    description: "要同步的 props 键"
+  }
+], P = `// 把分页/搜索/排序同步进 URL（hash 或 search），链接可分享。
+const Waterfall = withPlugins(WaterfallCore, [
+  createURLSyncPlugin({
+    mode: "hash",
+    keys: ["pageIndex","pageSize","searchQuery"],
+  }),
+]);
+
+<Waterfall items={items} renderItem={(item) => <Card data={item} />} />;`, U = [
+  "hash 模式会保留已有路由路径",
+  "用 replaceState，不污染后退栈",
+  "SSR 安全：无 window 时直接跳过"
+], x = [
+  "搜索结果可分享",
+  "后台筛选状态可刷新",
+  "带参数的深链"
+], v = [
+  "只做单向同步（props → URL）与初始读取；URL 前进后退的监听请页面自己做。"
+], I = {
+  name: w,
+  description: S,
+  since: y,
+  tags: R,
+  config: L,
+  example: P,
+  features: U,
+  useCases: x,
+  notes: v
+};
+export {
+  $ as c,
+  I as d
+};

package/dist/chunks/{doc-j4W9SUrY.js → doc-BSnWbrkH.js}

@@ -1,30 +1,42 @@
-function r(o) {
-  const e = typeof window < "u" ? window.innerWidth : 1024, n = o.responsive || {};
-  return e >= 1200 && n.xl ? n.xl : e >= 992 && n.lg ? n.lg : e >= 768 && n.md ? n.md : e < 768 && n.sm ? n.sm : {};
+function p(o, t) {
+  const n = o.responsive || {};
+  return t >= 1200 && n.xl ? n.xl : t >= 992 && n.lg ? n.lg : t >= 768 && n.md ? n.md : t < 768 && n.sm ? n.sm : {};
 }
-function w(o) {
+function W(o) {
+  let t = 0, n = "";
+  const i = (e) => {
+    const r = e.containerRef?.current?.clientWidth ?? 0;
+    if (r <= 0) return;
+    const a = t;
+    t = r;
+    const s = JSON.stringify(p(o, r));
+    a > 0 && s !== n && e.bus?.emit("props:invalidate"), n = s;
+  };
   return {
     name: "GapPlugin",
     priority: 50,
     enabled: !0,
     hooks: {
       transformProps: (e) => {
-        const n = { columnGap: o.columnGap, rowGap: o.rowGap }, t = r(o), s = {
-          columnGap: t.columnGap ?? n.columnGap ?? e.columnGap,
-          rowGap: t.rowGap ?? n.rowGap ?? e.rowGap
+        const r = t > 0 ? t : typeof window < "u" ? window.innerWidth : 1024, a = { columnGap: o.columnGap, rowGap: o.rowGap }, s = p(o, r), c = {
+          columnGap: s.columnGap ?? a.columnGap ?? e.columnGap,
+          rowGap: s.rowGap ?? a.rowGap ?? e.rowGap
         };
-        return { ...e, ...s };
+        return { ...e, ...c };
+      },
+      onMount: (e) => {
+        i(e);
       },
       onResize: (e) => {
-        e.relayout?.();
+        i(e);
       }
     }
   };
 }
-const a = "GapPlugin", p = "把 rowGap / columnGap 收敛到一处配置，并支持按窗口宽度切换间距（窄屏 8px、宽屏 16px 这类）。", i = "2.0.0", c = [
+const u = "GapPlugin", l = "把 rowGap / columnGap 收敛到一处配置，并支持按窗口宽度切换间距（窄屏 8px、宽屏 16px 这类）。", m = "2.0.0", d = [
   "layout",
   "间距"
-], l = [
+], G = [
   {
     name: "columnGap",
     type: "number",
@@ -43,34 +55,34 @@ const a = "GapPlugin", p = "把 rowGap / columnGap 收敛到一处配置，并
     default: "—",
     description: "断点覆盖（按 window 宽度）"
   }
-], u = `// 统一控制行/列间距，支持按断点给不同间距。
+], f = `// 统一控制行/列间距，支持按断点给不同间距。
 const Waterfall = withPlugins(WaterfallCore, [
   createGapPlugin(),
 ]);
 
-<Waterfall items={items} renderItem={(item) => <Card data={item} />} />;`, m = [
+<Waterfall items={items} renderItem={(item) => <Card data={item} />} />;`, w = [
   "行列间距一处配置",
   "断点覆盖（sm/md/lg/xl）",
   "不填则回退到 props"
-], d = [
+], g = [
   "设计规范里间距随断点变化",
   "同一组件在不同页面用不同密度"
-], G = [
+], x = [
   "断点判断用的是 window.innerWidth（间距通常跟视口走，与列数按容器算不一样）。",
   "断点是「命中即覆盖」：桌面窗口 ≥1200 又配了 responsive.lg，那就一直是 lg 的值，config.columnGap/rowGap 在这档不起作用；想让手写值生效就别给该档位配 responsive。",
   "sm 只在小屏（<768）生效，不会被当成兜底档套到桌面端。"
-], f = {
-  name: a,
-  description: p,
-  since: i,
-  tags: c,
-  config: l,
-  example: u,
-  features: m,
-  useCases: d,
-  notes: G
+], v = {
+  name: u,
+  description: l,
+  since: m,
+  tags: d,
+  config: G,
+  example: f,
+  features: w,
+  useCases: g,
+  notes: x
 };
 export {
-  w as c,
-  f as d
+  W as c,
+  v as d
 };

package/dist/chunks/{doc-BCGQ8Cp5.js → doc-BXaJl1By.js}

@@ -1,32 +1,45 @@
-import { jsxs as a } from "react/jsx-runtime";
-const p = "GROUPS";
-function x(i = {}) {
-  const u = i.groupBy ?? ((e) => e?.category ?? "default"), l = i.showOverlay ?? !1, r = (e) => {
-    const t = /* @__PURE__ */ new Map();
-    return (e.props.items ?? []).forEach((s, n) => {
-      const o = u(s, n);
-      t.has(o) || t.set(o, []), t.get(o).push(n);
-    }), e.sharedData.set(p, t), t.size > 0 && e.bus.emit("grouping:change", { groups: t }), t;
+import { jsxs as u } from "react/jsx-runtime";
+const d = "GROUPS", y = "GROUP_INDEX";
+function B(c = {}) {
+  const g = c.groupBy ?? ((e) => e?.category ?? "default"), f = c.showOverlay ?? !1;
+  let p = null, o = null;
+  const m = (e, n) => {
+    if (e.size !== n.size) return !1;
+    for (const [t, s] of e) {
+      const r = n.get(t);
+      if (!r || r.length !== s.length) return !1;
+    }
+    return !0;
+  }, i = (e) => {
+    const n = e.items ?? [];
+    if (o && p === n) return o;
+    const t = /* @__PURE__ */ new Map(), s = /* @__PURE__ */ new Map();
+    n.forEach((h, l) => {
+      const a = g(h, l);
+      s.set(l, a), t.has(a) || t.set(a, []), t.get(a).push(l);
+    });
+    const r = o ? !m(t, o) : !0;
+    return p = n, o = t, e.sharedData.set(d, t), e.sharedData.set(y, s), r && t.size > 0 && e.bus.emit("grouping:change", { groups: t }), t;
   };
   return {
     name: "GroupingPlugin",
     enabled: !0,
     hooks: {
       onMount: (e) => {
-        r(e);
+        i(e);
       },
       onLayoutComplete: (e) => {
-        r(e);
+        i(e);
       },
       onPropsChange: (e) => {
-        r(e);
+        i(e);
       },
       renderOverlay: (e) => {
-        if (!l) return null;
-        const t = e.sharedData.get(p) ?? /* @__PURE__ */ new Map();
-        if (t.size === 0) return null;
-        const s = Array.from(t.entries()).slice(0, 3);
-        return /* @__PURE__ */ a(
+        if (!f) return null;
+        const n = e.sharedData.get(d) ?? /* @__PURE__ */ new Map();
+        if (n.size === 0) return null;
+        const t = Array.from(n.entries()).slice(0, 3);
+        return /* @__PURE__ */ u(
           "div",
           {
             style: {
@@ -45,17 +58,17 @@ function x(i = {}) {
               pointerEvents: "none"
             },
             children: [
-              /* @__PURE__ */ a("div", { style: { opacity: 0.85, marginBottom: 6 }, children: [
+              /* @__PURE__ */ u("div", { style: { opacity: 0.85, marginBottom: 6 }, children: [
                 "分组：",
-                t.size,
+                n.size,
                 " 组"
               ] }),
-              s.map(([n, o]) => /* @__PURE__ */ a("div", { children: [
-                String(n),
+              t.map(([s, r]) => /* @__PURE__ */ u("div", { children: [
+                String(s),
                 " · ",
-                o.length,
+                r.length,
                 " 项"
-              ] }, String(n)))
+              ] }, String(s)))
             ]
           }
         );
@@ -63,10 +76,10 @@ function x(i = {}) {
     }
   };
 }
-const c = "GroupingPlugin", d = "用 groupBy 把项按业务字段分组，结果放进 sharedData 的 `GROUPS`（Map<组键, 索引数组>），供 StickyHeaderPlugin、分组统计条等消费。挂载即算一次，之后 props 变化重算。", g = "2.0.0", f = [
+const P = "GroupingPlugin", b = "用 groupBy 把项按业务字段分组，结果放进 sharedData 的 `GROUPS`（Map<组键, 索引数组>），供 StickyHeaderPlugin、分组统计条等消费。挂载即算一次，之后 props 变化重算。", G = "2.0.0", v = [
   "ui",
   "分组"
-], m = [
+], w = [
   {
     name: "groupBy",
     type: "(item, index) => string | number",
@@ -79,7 +92,7 @@ const c = "GroupingPlugin", d = "用 groupBy 把项按业务字段分组，结
     default: "false",
     description: "是否显示分组统计角标"
   }
-], h = `// 按字段把项分组，结果写进 sharedData(GROUPS) 供吸顶条 / 统计用。
+], O = `// 按字段把项分组，结果写进 sharedData(GROUPS) 供吸顶条 / 统计用。
 const Waterfall = withPlugins(WaterfallCore, [
   createGroupingPlugin({
     groupBy: "item.category ?? \\"default\\"",
@@ -87,28 +100,28 @@ const Waterfall = withPlugins(WaterfallCore, [
   }),
 ]);
 
-<Waterfall items={items} renderItem={(item) => <Card data={item} />} />;`, y = [
+<Waterfall items={items} renderItem={(item) => <Card data={item} />} />;`, x = [
   "挂载即计算（旧版只在 props 变化时算，首屏永远拿不到分组）",
   "结果写 sharedData，跨插件可读",
   "统计角标默认关闭"
-], b = [
+], D = [
   "按分类分组的信息流",
   "按日期分组的时间线",
   "吸顶条显示当前分组"
-], P = [
+], S = [
   "分组只产出索引映射，不改变渲染顺序；要视觉分组请自己按分组建行。"
-], w = {
-  name: c,
-  description: d,
-  since: g,
-  tags: f,
-  config: m,
-  example: h,
-  features: y,
-  useCases: b,
-  notes: P
+], C = {
+  name: P,
+  description: b,
+  since: G,
+  tags: v,
+  config: w,
+  example: O,
+  features: x,
+  useCases: D,
+  notes: S
 };
 export {
-  x as c,
-  w as d
+  B as c,
+  C as d
 };

package/dist/chunks/{doc-CraXjOaA.js → doc-BindRMfO.js}

@@ -1,41 +1,45 @@
-function y(s) {
-  const e = /* @__PURE__ */ new Set(), o = () => {
-    if (e.size <= s.poolSize) return;
-    const t = e.values().next().value;
-    typeof t == "number" && e.delete(t);
+function v(s) {
+  const i = /* @__PURE__ */ new Set(), o = (n) => {
+    if (i.size <= s.poolSize) return;
+    const e = i.values().next().value;
+    if (typeof e == "number") {
+      i.delete(e);
+      const t = n.getItemRef(e);
+      t && (t.style.visibility = "hidden");
+    }
   };
   return {
     name: "RecyclePlugin",
     enabled: !0,
     hooks: {
-      onItemEnterViewport: (t, n) => {
-        const i = t.getItemRef(n);
-        i && (i.style.visibility = "visible"), e.add(n), o();
+      onItemEnterViewport: (n, e) => {
+        const t = n.getItemRef(e);
+        t && (t.style.visibility = "visible"), i.add(e), o(n);
       },
-      onItemLeaveViewport: (t, n) => {
-        const i = t.getItemRef(n);
-        i && (i.style.visibility = "hidden"), e.delete(n);
+      onItemLeaveViewport: (n, e) => {
+        const t = n.getItemRef(e);
+        t && (t.style.visibility = "hidden"), i.delete(e);
       },
-      onItemUnmount: (t, n) => {
-        e.delete(n);
+      onItemUnmount: (n, e) => {
+        i.delete(e);
       },
       onUnmount: () => {
-        e.clear();
+        i.clear();
       }
     }
   };
 }
-const c = "RecyclePlugin", l = "纯绘制层优化：项离开视口就 `visibility: hidden`，回来再显示。DOM 节点不销毁，滚动位置与已加载的图片都保留，适合「项里有视频/Canvas，重建代价高」的场景。", a = "2.0.0", r = [
+const l = "RecyclePlugin", c = "纯绘制层优化：项离开视口就 `visibility: hidden`，回来再显示。DOM 节点不销毁，滚动位置与已加载的图片都保留，适合「项里有视频/Canvas，重建代价高」的场景。", a = "2.0.0", r = [
   "interaction",
   "性能"
-], u = [
+], m = [
   {
     name: "poolSize",
     type: "number",
     default: "—",
     description: "同时保持可见的项数上限（超出则回收最早的）"
   }
-], m = `// 视口外的项设 \`visibility: hidden\`，降低长列表的绘制压力。
+], u = `// 视口外的项设 \`visibility: hidden\`，降低长列表的绘制压力。
 const Waterfall = withPlugins(WaterfallCore, [
   createRecyclePlugin(),
 ]);
@@ -48,21 +52,21 @@ const Waterfall = withPlugins(WaterfallCore, [
   "项内含视频 / canvas",
   "长列表滚动发虚",
   "低端设备省电"
-], v = [
+], y = [
   "与 Core 的 `virtualize` 同开会让项被卸载又隐藏，收益互相抵消，建议只选一个。",
   "只改 visibility 不改布局，所以不会引起重排。"
-], p = {
-  name: c,
-  description: l,
+], g = {
+  name: l,
+  description: c,
   since: a,
   tags: r,
-  config: u,
-  example: m,
+  config: m,
+  example: u,
   features: d,
   useCases: f,
-  notes: v
+  notes: y
 };
 export {
-  y as c,
-  p as d
+  v as c,
+  g as d
 };