vane-waterfall 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (42) hide show
  1. package/README.md +370 -0
  2. package/dist/404.jpg +0 -0
  3. package/dist/components/WaterfallPlugin/core/WaterfallCore.d.ts +174 -0
  4. package/dist/components/WaterfallPlugin/custom-plugins/A11y/index.d.ts +16 -0
  5. package/dist/components/WaterfallPlugin/custom-plugins/Alignment/index.d.ts +12 -0
  6. package/dist/components/WaterfallPlugin/custom-plugins/AutoColumn/index.d.ts +17 -0
  7. package/dist/components/WaterfallPlugin/custom-plugins/Bookmark/index.d.ts +15 -0
  8. package/dist/components/WaterfallPlugin/custom-plugins/ClickAnalytics/index.d.ts +12 -0
  9. package/dist/components/WaterfallPlugin/custom-plugins/DebounceLayout/index.d.ts +10 -0
  10. package/dist/components/WaterfallPlugin/custom-plugins/DragReorder/index.d.ts +13 -0
  11. package/dist/components/WaterfallPlugin/custom-plugins/Filter/index.d.ts +15 -0
  12. package/dist/components/WaterfallPlugin/custom-plugins/FixedHeight/index.d.ts +11 -0
  13. package/dist/components/WaterfallPlugin/custom-plugins/Gap/index.d.ts +31 -0
  14. package/dist/components/WaterfallPlugin/custom-plugins/Grouping/index.d.ts +12 -0
  15. package/dist/components/WaterfallPlugin/custom-plugins/HeatmapAnalytics/index.d.ts +14 -0
  16. package/dist/components/WaterfallPlugin/custom-plugins/InfiniteScroll/index.d.ts +13 -0
  17. package/dist/components/WaterfallPlugin/custom-plugins/Pagination/index.d.ts +15 -0
  18. package/dist/components/WaterfallPlugin/custom-plugins/PinItem/index.d.ts +13 -0
  19. package/dist/components/WaterfallPlugin/custom-plugins/Recycle/index.d.ts +12 -0
  20. package/dist/components/WaterfallPlugin/custom-plugins/ReducedMotion/index.d.ts +13 -0
  21. package/dist/components/WaterfallPlugin/custom-plugins/ResponsiveColumns/index.d.ts +10 -0
  22. package/dist/components/WaterfallPlugin/custom-plugins/ScrollAnchor/index.d.ts +12 -0
  23. package/dist/components/WaterfallPlugin/custom-plugins/Search/index.d.ts +15 -0
  24. package/dist/components/WaterfallPlugin/custom-plugins/Sort/index.d.ts +15 -0
  25. package/dist/components/WaterfallPlugin/custom-plugins/StatePersistence/index.d.ts +16 -0
  26. package/dist/components/WaterfallPlugin/custom-plugins/StickyHeader/index.d.ts +11 -0
  27. package/dist/components/WaterfallPlugin/custom-plugins/Throttle/index.d.ts +12 -0
  28. package/dist/components/WaterfallPlugin/custom-plugins/Transition/index.d.ts +13 -0
  29. package/dist/components/WaterfallPlugin/custom-plugins/URLSync/index.d.ts +14 -0
  30. package/dist/components/WaterfallPlugin/custom-plugins/VirtualWaterfall/index.d.ts +12 -0
  31. package/dist/components/WaterfallPlugin/custom-plugins/index.d.ts +30 -0
  32. package/dist/components/WaterfallPlugin/index.d.ts +10 -0
  33. package/dist/components/WaterfallPlugin/plugins/PluginBus.d.ts +2 -0
  34. package/dist/components/WaterfallPlugin/plugins/PluginManager.d.ts +2 -0
  35. package/dist/components/WaterfallPlugin/plugins/index.d.ts +8 -0
  36. package/dist/components/WaterfallPlugin/plugins/types.d.ts +468 -0
  37. package/dist/components/WaterfallPlugin/plugins/withPlugins.d.ts +8 -0
  38. package/dist/index.d.ts +11 -0
  39. package/dist/index.es.js +2382 -0
  40. package/dist/index.umd.js +30 -0
  41. package/dist/vite.svg +1 -0
  42. package/package.json +82 -0
@@ -0,0 +1,31 @@
1
+ import { WaterfallPlugin } from '../../plugins/types';
2
+ type GapConfig = {
3
+ /** 列间距(像素) */
4
+ columnGap?: number;
5
+ /** 行间距(像素) */
6
+ rowGap?: number;
7
+ /** 响应式:根据窗口宽度覆盖间距 */
8
+ responsive?: {
9
+ sm?: {
10
+ columnGap?: number;
11
+ rowGap?: number;
12
+ };
13
+ md?: {
14
+ columnGap?: number;
15
+ rowGap?: number;
16
+ };
17
+ lg?: {
18
+ columnGap?: number;
19
+ rowGap?: number;
20
+ };
21
+ xl?: {
22
+ columnGap?: number;
23
+ rowGap?: number;
24
+ };
25
+ };
26
+ };
27
+ /**
28
+ * GapPlugin - 控制瀑布流的列间距和行间距,支持响应式
29
+ */
30
+ export declare function createGapPlugin<T = any>(config: GapConfig): WaterfallPlugin<T>;
31
+ export {};
@@ -0,0 +1,12 @@
1
+ import { WaterfallPlugin } from '../../plugins/types';
2
+ type GroupingConfig<T = any> = {
3
+ /** 分组函数,返回组键 */
4
+ groupBy?: (item: T, index: number) => string | number;
5
+ };
6
+ /**
7
+ * GroupingPlugin - 按组聚合(实验版)
8
+ * - 计算分组信息,写入 sharedData(GROUPS)
9
+ * - 仅提供覆盖层标签展示当前分组数量
10
+ */
11
+ export declare function createGroupingPlugin<T = any>(config?: GroupingConfig<T>): WaterfallPlugin<T>;
12
+ export {};
@@ -0,0 +1,14 @@
1
+ import { WaterfallPlugin } from '../../plugins/types';
2
+ type HeatmapAnalyticsConfig = {
3
+ /** 是否显示简单统计叠层 */
4
+ showOverlay?: boolean;
5
+ /** 别名:示例页使用的 showOverlaySummary */
6
+ showOverlaySummary?: boolean;
7
+ };
8
+ /**
9
+ * HeatmapAnalyticsPlugin - 点击/曝光热力分析(基础版)
10
+ * - 统计每项进入视口次数与点击次数
11
+ * - 可选在顶部显示统计摘要叠层
12
+ */
13
+ export declare function createHeatmapAnalyticsPlugin<T = any>(config?: HeatmapAnalyticsConfig): WaterfallPlugin<T>;
14
+ export {};
@@ -0,0 +1,13 @@
1
+ import { WaterfallPlugin } from '../../plugins/types';
2
+ type InfiniteScrollConfig = {
3
+ /** 触发加载的距离阈值(像素) */
4
+ threshold?: number;
5
+ /** 加载更多的回调,由页面传入 */
6
+ onLoadMore?: () => Promise<void> | void;
7
+ };
8
+ /**
9
+ * InfiniteScrollPlugin - 到达底部触发加载更多
10
+ * 通过 transformProps 包装 onReachBottom,实现基于阈值的加载触发
11
+ */
12
+ export declare function createInfiniteScrollPlugin<T = any>(config?: InfiniteScrollConfig): WaterfallPlugin<T>;
13
+ export {};
@@ -0,0 +1,15 @@
1
+ import { WaterfallPlugin } from '../../plugins/types';
2
+ type PaginationConfig = {
3
+ /** 每页数量 */
4
+ pageSize?: number;
5
+ /** 翻页后自动滚动到顶部 */
6
+ scrollToTop?: boolean;
7
+ /** 滚动行为(auto/smooth),仅在启用 scrollToTop 时生效 */
8
+ scrollBehavior?: "auto" | "smooth";
9
+ };
10
+ /**
11
+ * PaginationPlugin - 基于 props 中的 pageIndex/pageSize 对 items 进行分页切片
12
+ * 支持通过 config.pageSize 设定默认每页数量
13
+ */
14
+ export declare function createPaginationPlugin<T = any>(config?: PaginationConfig): WaterfallPlugin<T>;
15
+ export {};
@@ -0,0 +1,13 @@
1
+ import { WaterfallPlugin } from '../../plugins/types';
2
+ type PinItemConfig = {
3
+ /** 置顶的项索引列表 */
4
+ pinnedIndices: number[];
5
+ /** 固定到的列(默认 0) */
6
+ column?: number;
7
+ };
8
+ /**
9
+ * PinItemPlugin - 将指定索引的项固定在顶部某列
10
+ * - 通过 calculateItemPosition 覆盖其位置,使其始终位于顶部
11
+ */
12
+ export declare function createPinItemPlugin<T = any>(config: PinItemConfig): WaterfallPlugin<T>;
13
+ export {};
@@ -0,0 +1,12 @@
1
+ import { WaterfallPlugin } from '../../plugins/types';
2
+ type RecycleConfig = {
3
+ /** 视口外隐藏项以降低渲染压力(最大可见项数,近似控制) */
4
+ poolSize: number;
5
+ };
6
+ /**
7
+ * RecyclePlugin - 简化版 DOM 回收:
8
+ * - 当项离开视口时,设置其元素为 `visibility:hidden`,减少绘制压力
9
+ * - 当项进入视口时,恢复为 `visibility:visible`
10
+ */
11
+ export declare function createRecyclePlugin<T = any>(config: RecycleConfig): WaterfallPlugin<T>;
12
+ export {};
@@ -0,0 +1,13 @@
1
+ import { WaterfallPlugin } from '../../plugins/types';
2
+ type ReducedMotionConfig = {
3
+ /** 当用户偏好减少动画时,是否禁用 transform 定位 */
4
+ disableTransform?: boolean;
5
+ /** 当用户偏好减少动画时,是否移除项过渡效果 */
6
+ removeTransitions?: boolean;
7
+ };
8
+ /**
9
+ * ReducedMotionPlugin - 尊重系统的减少动画偏好
10
+ * - 通过 transformProps 调整核心配置与项样式
11
+ */
12
+ export declare function createReducedMotionPlugin<T = any>(config?: ReducedMotionConfig): WaterfallPlugin<T>;
13
+ export {};
@@ -0,0 +1,10 @@
1
+ import { WaterfallPlugin } from '../../plugins/types';
2
+ type Breakpoint = {
3
+ width: number;
4
+ columns: number;
5
+ };
6
+ type Breakpoints = Record<string, Breakpoint>;
7
+ export declare function createResponsiveColumnsPlugin<T = any>(config: {
8
+ breakpoints: Breakpoints;
9
+ }): WaterfallPlugin<T>;
10
+ export {};
@@ -0,0 +1,12 @@
1
+ import { WaterfallPlugin } from '../../plugins/types';
2
+ type ScrollAnchorConfig<T = any> = {
3
+ /** 通过此函数提取锚点 id(默认使用 item.id) */
4
+ getAnchorId?: (item: T, index: number) => string | number | undefined;
5
+ };
6
+ /**
7
+ * ScrollAnchorPlugin - 滚动锚点(实验版)
8
+ * - 渲染一个简单的锚点跳转控件
9
+ * - 支持通过 bus 事件 anchor:scrollToId 跳转
10
+ */
11
+ export declare function createScrollAnchorPlugin<T = any>(config?: ScrollAnchorConfig<T>): WaterfallPlugin<T>;
12
+ export {};
@@ -0,0 +1,15 @@
1
+ import { WaterfallPlugin } from '../../plugins/types';
2
+ type SearchConfig<T = any> = {
3
+ /** 要搜索的字段名列表(仅用于对象项) */
4
+ fields?: (keyof T)[];
5
+ /** 条件变化后自动滚动到顶部 */
6
+ scrollToTop?: boolean;
7
+ /** 滚动行为(auto/smooth),仅在启用 scrollToTop 时生效 */
8
+ scrollBehavior?: "auto" | "smooth";
9
+ };
10
+ /**
11
+ * SearchPlugin - 基于 props.searchQuery 对 items 执行包含匹配过滤
12
+ * 仅在对象项中按指定字段进行大小写不敏感的包含匹配
13
+ */
14
+ export declare function createSearchPlugin<T = any>(config?: SearchConfig<T>): WaterfallPlugin<T>;
15
+ export {};
@@ -0,0 +1,15 @@
1
+ import { WaterfallPlugin } from '../../plugins/types';
2
+ type SortConfig<T = any> = {
3
+ /** 初始比较函数,可被 props.sortComparator 覆盖 */
4
+ comparator?: (a: T, b: T) => number;
5
+ /** 条件变化后自动滚动到顶部 */
6
+ scrollToTop?: boolean;
7
+ /** 滚动行为(auto/smooth),仅在启用 scrollToTop 时生效 */
8
+ scrollBehavior?: "auto" | "smooth";
9
+ };
10
+ /**
11
+ * SortPlugin - 基于比较函数对 items 排序
12
+ * 优先使用 props.sortComparator,其次使用创建插件时传入的 comparator
13
+ */
14
+ export declare function createSortPlugin<T = any>(config?: SortConfig<T>): WaterfallPlugin<T>;
15
+ export {};
@@ -0,0 +1,16 @@
1
+ import { WaterfallPlugin } from '../../plugins/types';
2
+ type StatePersistenceConfig = {
3
+ /** 存储键(localStorage) */
4
+ storageKey?: string;
5
+ /** 是否持久化滚动位置 */
6
+ persistScroll?: boolean;
7
+ /** 是否持久化分页与查询(从 props 读取) */
8
+ persistKeys?: string[];
9
+ };
10
+ /**
11
+ * StatePersistencePlugin - 状态快照与恢复(基础版)
12
+ * - 挂载时尝试恢复快照;卸载时写入快照
13
+ * - 快照包含:scrollTop(可选)与部分 props 键
14
+ */
15
+ export declare function createStatePersistencePlugin<T = any>(config?: StatePersistenceConfig): WaterfallPlugin<T>;
16
+ export {};
@@ -0,0 +1,11 @@
1
+ import { WaterfallPlugin } from '../../plugins/types';
2
+ type StickyHeaderConfig = {
3
+ /** 标题文本(默认:当前分组) */
4
+ title?: string;
5
+ };
6
+ /**
7
+ * StickyHeaderPlugin - 吸顶标题(实验版)
8
+ * - 简化实现:始终显示一个吸顶条,可与 GroupingPlugin 联动
9
+ */
10
+ export declare function createStickyHeaderPlugin<T = any>(config?: StickyHeaderConfig): WaterfallPlugin<T>;
11
+ export {};
@@ -0,0 +1,12 @@
1
+ import { WaterfallPlugin } from '../../plugins/types';
2
+ type ThrottleConfig = {
3
+ /** 滚动节流(ms) */
4
+ scroll: number;
5
+ /** 尺寸变化防抖(ms),用于容器 Resize 相关 */
6
+ resize?: number;
7
+ };
8
+ /**
9
+ * ThrottlePlugin - 通过 transformProps 调整核心的滚动节流与尺寸变化防抖
10
+ */
11
+ export declare function createThrottlePlugin<T = any>(config: ThrottleConfig): WaterfallPlugin<T>;
12
+ export {};
@@ -0,0 +1,13 @@
1
+ import { WaterfallPlugin } from '../../plugins/types';
2
+ type TransitionConfig = {
3
+ /** 过渡时长(ms) */
4
+ duration?: number;
5
+ /** 过渡缓动 */
6
+ easing?: string;
7
+ };
8
+ /**
9
+ * TransitionPlugin - 布局变化过渡
10
+ * - 为项元素应用 transform/opacity 的过渡,提升布局更新的视觉平滑度
11
+ */
12
+ export declare function createTransitionPlugin<T = any>(config?: TransitionConfig): WaterfallPlugin<T>;
13
+ export {};
@@ -0,0 +1,14 @@
1
+ import { WaterfallPlugin } from '../../plugins/types';
2
+ type URLSyncConfig = {
3
+ /** URL 同步使用 hash 还是 search(默认 hash) */
4
+ mode?: "hash" | "search";
5
+ /** 需要同步的键列表(从 props 读取) */
6
+ keys?: string[];
7
+ };
8
+ /**
9
+ * URLSyncPlugin - 将部分状态同步到 URL(基础版)
10
+ * - 监听 props 变化,更新 URL
11
+ * - 初次挂载时读取 URL 并向 bus 广播(页面可据此设置状态)
12
+ */
13
+ export declare function createURLSyncPlugin<T = any>(config?: URLSyncConfig): WaterfallPlugin<T>;
14
+ export {};
@@ -0,0 +1,12 @@
1
+ import { WaterfallPlugin } from '../../plugins/types';
2
+ export type VirtualWaterfallConfig<T = any> = {
3
+ /** 视口上下额外渲染的像素范围(overscan) */
4
+ overscanPx?: number;
5
+ /** 获取项高度(可选;不可预测时走测量) */
6
+ getItemHeight?: (item: T, index: number) => number;
7
+ /** 动态高度测量模式:开启后使用 ResizeObserver 实时测量 */
8
+ dynamicHeights?: boolean;
9
+ /** 初始估算高度(用于首屏布局与未测量项) */
10
+ estimateItemHeight?: number;
11
+ };
12
+ export declare function createVirtualWaterfallPlugin<T = any>(config: VirtualWaterfallConfig<T>): WaterfallPlugin<T>;
@@ -0,0 +1,30 @@
1
+ /**
2
+ * WaterfallPlugin 自定义插件导出
3
+ */
4
+ export { createResponsiveColumnsPlugin } from './ResponsiveColumns';
5
+ export { createAutoColumnPlugin } from './AutoColumn';
6
+ export { createAlignmentPlugin } from './Alignment';
7
+ export { createGapPlugin } from './Gap';
8
+ export { createFixedHeightPlugin } from './FixedHeight';
9
+ export { createVirtualWaterfallPlugin } from './VirtualWaterfall';
10
+ export { createThrottlePlugin } from './Throttle';
11
+ export { createDebounceLayoutPlugin } from './DebounceLayout';
12
+ export { createRecyclePlugin } from './Recycle';
13
+ export { createInfiniteScrollPlugin } from './InfiniteScroll';
14
+ export { createPaginationPlugin } from './Pagination';
15
+ export { createFilterPlugin } from './Filter';
16
+ export { createSortPlugin } from './Sort';
17
+ export { createSearchPlugin } from './Search';
18
+ export { createClickAnalyticsPlugin } from './ClickAnalytics/index.tsx';
19
+ export { createBookmarkPlugin } from './Bookmark/index.tsx';
20
+ export { createURLSyncPlugin } from './URLSync';
21
+ export { createA11yPlugin } from './A11y';
22
+ export { createReducedMotionPlugin } from './ReducedMotion';
23
+ export { createTransitionPlugin } from './Transition';
24
+ export { createPinItemPlugin } from './PinItem';
25
+ export { createHeatmapAnalyticsPlugin } from './HeatmapAnalytics';
26
+ export { createStatePersistencePlugin } from './StatePersistence';
27
+ export { createGroupingPlugin } from './Grouping/index.tsx';
28
+ export { createStickyHeaderPlugin } from './StickyHeader/index.tsx';
29
+ export { createScrollAnchorPlugin } from './ScrollAnchor/index.tsx';
30
+ export { createDragReorderPlugin } from './DragReorder/index.tsx';
@@ -0,0 +1,10 @@
1
+ /**
2
+ * WaterfallPlugin 系统入口
3
+ */
4
+ export { default as WaterfallCore } from './core/WaterfallCore';
5
+ export type { WaterfallCoreProps, WaterfallCoreRef, ScrollToOptions, ScrollToItemOptions, } from './core/WaterfallCore';
6
+ export type { WaterfallPlugin, PluginManager, PluginBus, WaterfallPluginContext, WaterfallPluginHooks, PluginCreator, WithPluginsConfig, ItemPosition, LayoutInfo, ViewportInfo, ItemVisibility, PerformanceMetrics, DeviceInfo, NetworkInfo, AnimationConfig, DragInfo, ItemRenderer, ItemKeyExtractor, } from './plugins';
7
+ export { createPluginBus } from './plugins';
8
+ export { createPluginManager } from './plugins';
9
+ export { withPlugins } from './plugins';
10
+ export * from './custom-plugins';
@@ -0,0 +1,2 @@
1
+ import { PluginBus } from './types';
2
+ export declare function createPluginBus(): PluginBus;
@@ -0,0 +1,2 @@
1
+ import { PluginManager } from './types';
2
+ export declare function createPluginManager<T = any>(): PluginManager<T>;
@@ -0,0 +1,8 @@
1
+ /**
2
+ * WaterfallPlugin 插件系统导出
3
+ */
4
+ export type { WaterfallPlugin, PluginManager, PluginBus, WaterfallPluginContext, WaterfallPluginHooks, PluginCreator, ItemPosition, LayoutInfo, ViewportInfo, ItemVisibility, PerformanceMetrics, DeviceInfo, NetworkInfo, AnimationConfig, DragInfo, ItemRenderer, ItemKeyExtractor, ScrollToOptions, } from './types';
5
+ export type { WithPluginsConfig } from './withPlugins';
6
+ export { createPluginBus } from './PluginBus';
7
+ export { createPluginManager } from './PluginManager';
8
+ export { withPlugins } from './withPlugins';