tudou-waterfall 0.1.0 → 0.1.2

package/dist/index.cjs

@@ -0,0 +1,182 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "Waterfall",
+  props: {
+    items: {},
+    cols: { default: 0 },
+    gap: { default: 15 },
+    estimatedHeight: { default: 220 },
+    overscan: { default: 600 },
+    breakpoints: { default: () => [
+      { minWidth: 1400, cols: 9 },
+      { minWidth: 1200, cols: 8 },
+      { minWidth: 900, cols: 7 },
+      { minWidth: 700, cols: 6 },
+      { minWidth: 500, cols: 5 }
+    ] },
+    defaultCols: { default: 2 }
+  },
+  emits: ["reflow"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const containerRef = vue.ref(null);
+    const scrollTop = vue.ref(0);
+    const viewportHeight = vue.ref(0);
+    const colPositions = vue.ref([]);
+    const colTotalHeights = vue.ref([]);
+    const measuredHeights = /* @__PURE__ */ new Map();
+    const getColCount = () => {
+      var _a, _b;
+      if (props.cols > 0) return props.cols;
+      const width = ((_a = containerRef.value) == null ? void 0 : _a.clientWidth) ?? window.innerWidth;
+      const sorted = [...props.breakpoints].sort((a, b) => b.minWidth - a.minWidth);
+      return ((_b = sorted.find((bp) => width >= bp.minWidth)) == null ? void 0 : _b.cols) ?? props.defaultCols;
+    };
+    const reflow = async () => {
+      await vue.nextTick();
+      const count = getColCount();
+      const cols = Array.from({ length: count }, () => []);
+      const colH = new Array(count).fill(0);
+      props.items.forEach((item, i) => {
+        const minIdx = colH.indexOf(Math.min(...colH));
+        const h = measuredHeights.get(i) ?? props.estimatedHeight;
+        cols[minIdx].push({ item, globalIdx: i, top: colH[minIdx], height: h });
+        colH[minIdx] += h + props.gap;
+      });
+      colPositions.value = cols;
+      colTotalHeights.value = colH;
+      emit("reflow");
+    };
+    const patchHeight = (globalIdx, newHeight) => {
+      const old = measuredHeights.get(globalIdx) ?? props.estimatedHeight;
+      if (Math.abs(old - newHeight) < 2) return;
+      measuredHeights.set(globalIdx, newHeight);
+      for (let ci = 0; ci < colPositions.value.length; ci++) {
+        const col = colPositions.value[ci];
+        const pos = col.findIndex((p) => p.globalIdx === globalIdx);
+        if (pos === -1) continue;
+        const delta = newHeight - col[pos].height;
+        col[pos].height = newHeight;
+        for (let j = pos + 1; j < col.length; j++) {
+          col[j] = { ...col[j], top: col[j].top + delta };
+        }
+        colTotalHeights.value[ci] += delta;
+        break;
+      }
+    };
+    const visibleItems = vue.computed(() => {
+      const top = scrollTop.value - props.overscan;
+      const bottom = scrollTop.value + viewportHeight.value + props.overscan;
+      return colPositions.value.map(
+        (col) => col.filter((p) => p.top + p.height >= top && p.top <= bottom)
+      );
+    });
+    let scrollEl = null;
+    const findScrollParent = (el) => {
+      let cur = el.parentElement;
+      while (cur) {
+        const { overflow, overflowY } = getComputedStyle(cur);
+        if (/auto|scroll/.test(overflow + overflowY)) return cur;
+        cur = cur.parentElement;
+      }
+      return document.documentElement;
+    };
+    const onScroll = (e) => {
+      const st = e.target.scrollTop;
+      const containerOffset = containerRef.value ? containerRef.value.offsetTop : 0;
+      scrollTop.value = Math.max(0, st - containerOffset);
+    };
+    const itemElMap = /* @__PURE__ */ new WeakMap();
+    const itemRo = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const globalIdx = itemElMap.get(entry.target);
+        if (globalIdx === void 0) continue;
+        const h = entry.contentRect.height;
+        if (h > 0) patchHeight(globalIdx, h);
+      }
+    });
+    const observeItem = (el, globalIdx) => {
+      itemElMap.set(el, globalIdx);
+      itemRo.observe(el);
+    };
+    const unobserveItem = (el) => {
+      itemRo.unobserve(el);
+      itemElMap.delete(el);
+    };
+    let containerRo = null;
+    vue.onMounted(async () => {
+      await vue.nextTick();
+      if (!containerRef.value) return;
+      scrollEl = findScrollParent(containerRef.value);
+      scrollEl.addEventListener("scroll", onScroll, { passive: true });
+      viewportHeight.value = scrollEl === document.documentElement ? window.innerHeight : scrollEl.clientHeight;
+      containerRo = new ResizeObserver(() => {
+        viewportHeight.value = scrollEl === document.documentElement ? window.innerHeight : scrollEl.clientHeight;
+        reflow();
+      });
+      containerRo.observe(containerRef.value);
+      reflow();
+    });
+    vue.onUnmounted(() => {
+      scrollEl == null ? void 0 : scrollEl.removeEventListener("scroll", onScroll);
+      containerRo == null ? void 0 : containerRo.disconnect();
+      itemRo.disconnect();
+    });
+    vue.watch(() => props.items.length, (newLen, oldLen) => {
+      if (newLen < oldLen) measuredHeights.clear();
+      reflow();
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        ref_key: "containerRef",
+        ref: containerRef,
+        class: "wf-root",
+        style: vue.normalizeStyle({ gap: `${__props.gap}px` })
+      }, [
+        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(colPositions.value, (_col, ci) => {
+          return vue.openBlock(), vue.createElementBlock("div", {
+            key: ci,
+            class: "wf-col",
+            style: vue.normalizeStyle({ height: `${colTotalHeights.value[ci]}px` })
+          }, [
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(visibleItems.value[ci], ({ item, globalIdx, top }) => {
+              return vue.openBlock(), vue.createElementBlock("div", {
+                key: globalIdx,
+                ref_for: true,
+                ref: (el) => {
+                  if (el) observeItem(el, globalIdx);
+                },
+                class: "wf-item",
+                style: vue.normalizeStyle({ transform: `translateY(${top}px)` }),
+                onVnodeUnmounted: _cache[0] || (_cache[0] = ({ el }) => unobserveItem(el))
+              }, [
+                vue.renderSlot(_ctx.$slots, "default", { item }, void 0, true)
+              ], 4);
+            }), 128))
+          ], 4);
+        }), 128))
+      ], 4);
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const Waterfall = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-946f6fbc"]]);
+function install(app) {
+  app.component("TdWaterfall", Waterfall);
+}
+const TudouWaterfall = {
+  install
+};
+exports.TudouWaterfall = TudouWaterfall;
+exports.Waterfall = Waterfall;
+exports.default = TudouWaterfall;
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../src/components/Waterfall.vue","../src/index.ts"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, computed, onMounted, onUnmounted, nextTick, watch } from 'vue'\n\nexport interface WaterfallBreakpoint {\n  minWidth: number\n  cols: number\n}\n\nexport interface WaterfallProps {\n  items: any[]\n  cols?: number\n  gap?: number\n  estimatedHeight?: number\n  overscan?: number\n  /**\n   * Responsive breakpoints. Sorted descending by minWidth at runtime.\n   * Example: [{ minWidth: 1400, cols: 5 }, { minWidth: 900, cols: 3 }]\n   * Falls back to defaultCols when no breakpoint matches.\n   */\n  breakpoints?: WaterfallBreakpoint[]\n  /** Column count when no breakpoint matches (default: 2) */\n  defaultCols?: number\n}\n\nconst props = withDefaults(defineProps<WaterfallProps>(), {\n  cols: 0,\n  gap: 15,\n  estimatedHeight: 220,\n  overscan: 600,\n  breakpoints: () => [\n    { minWidth: 1400, cols: 9 },\n    { minWidth: 1200, cols: 8 },\n    { minWidth: 900,  cols: 7 },\n    { minWidth: 700,  cols: 6 },\n    { minWidth: 500,  cols: 5 },\n  ],\n  defaultCols: 2,\n})\n\nconst emit = defineEmits<{ (e: 'reflow'): void }>()\n\n// ─── types ────────────────────────────────────────────────────────────────────\n\ninterface PositionedItem {\n  item: any\n  globalIdx: number\n  top: number\n  height: number\n}\n\n// ─── state ────────────────────────────────────────────────────────────────────\n\nconst containerRef = ref<HTMLElement | null>(null)\nconst scrollTop = ref(0)\nconst viewportHeight = ref(0)\n\n// colPositions[colIdx] = sorted array of positioned items\nconst colPositions = ref<PositionedItem[][]>([])\n// colTotalHeight[colIdx] = total height of that column (for the spacer div)\nconst colTotalHeights = ref<number[]>([])\n\n// globalIdx -> measured height (updated after image load)\nconst measuredHeights = new Map<number, number>()\n\n// ─── column count ─────────────────────────────────────────────────────────────\n\nconst getColCount = () => {\n  if (props.cols > 0) return props.cols\n  const width = containerRef.value?.clientWidth ?? window.innerWidth\n  const sorted = [...props.breakpoints].sort((a, b) => b.minWidth - a.minWidth)\n  return sorted.find(bp => width >= bp.minWidth)?.cols ?? props.defaultCols\n}\n\n// ─── full reflow: re-assign items to columns ──────────────────────────────────\n// Only called when items list changes or viewport width changes.\n// Does NOT re-assign on height updates to avoid item jumping between columns.\n\nconst reflow = async () => {\n  await nextTick()\n  const count = getColCount()\n  const cols: PositionedItem[][] = Array.from({ length: count }, () => [])\n  const colH = new Array(count).fill(0)\n\n  props.items.forEach((item, i) => {\n    const minIdx = colH.indexOf(Math.min(...colH))\n    const h = measuredHeights.get(i) ?? props.estimatedHeight\n    cols[minIdx].push({ item, globalIdx: i, top: colH[minIdx], height: h })\n    colH[minIdx] += h + props.gap\n  })\n\n  colPositions.value = cols\n  colTotalHeights.value = colH\n  emit('reflow')\n}\n\n// ─── patch: update one item's height in-place, shift subsequent items ─────────\n// Called after an image loads. Avoids full reflow to prevent column reassignment.\n\nconst patchHeight = (globalIdx: number, newHeight: number) => {\n  const old = measuredHeights.get(globalIdx) ?? props.estimatedHeight\n  if (Math.abs(old - newHeight) < 2) return\n  measuredHeights.set(globalIdx, newHeight)\n\n  for (let ci = 0; ci < colPositions.value.length; ci++) {\n    const col = colPositions.value[ci]\n    const pos = col.findIndex(p => p.globalIdx === globalIdx)\n    if (pos === -1) continue\n\n    const delta = newHeight - col[pos].height\n    col[pos].height = newHeight\n\n    for (let j = pos + 1; j < col.length; j++) {\n      col[j] = { ...col[j], top: col[j].top + delta }\n    }\n\n    colTotalHeights.value[ci] += delta\n    break\n  }\n}\n\n// ─── virtual visibility ───────────────────────────────────────────────────────\n\nconst visibleItems = computed(() => {\n  const top = scrollTop.value - props.overscan\n  const bottom = scrollTop.value + viewportHeight.value + props.overscan\n  return colPositions.value.map(col =>\n    col.filter(p => p.top + p.height >= top && p.top <= bottom)\n  )\n})\n\n// ─── scroll listener ──────────────────────────────────────────────────────────\n\nlet scrollEl: Element | null = null\n\nconst findScrollParent = (el: Element): Element => {\n  let cur: Element | null = el.parentElement\n  while (cur) {\n    const { overflow, overflowY } = getComputedStyle(cur)\n    if (/auto|scroll/.test(overflow + overflowY)) return cur\n    cur = cur.parentElement\n  }\n  return document.documentElement\n}\n\nconst onScroll = (e: Event) => {\n  const st = (e.target as Element).scrollTop\n  const containerOffset = containerRef.value\n    ? (containerRef.value as HTMLElement).offsetTop\n    : 0\n  scrollTop.value = Math.max(0, st - containerOffset)\n}\n\n// ─── item resize observer ─────────────────────────────────────────────────────\n// One shared RO watches every .wf-item element.\n// el -> globalIdx mapping is stored in a WeakMap so we never leak.\n\nconst itemElMap = new WeakMap<Element, number>()\n\nconst itemRo = new ResizeObserver((entries) => {\n  for (const entry of entries) {\n    const globalIdx = itemElMap.get(entry.target)\n    if (globalIdx === undefined) continue\n    const h = entry.contentRect.height\n    if (h > 0) patchHeight(globalIdx, h)\n  }\n})\n\nconst observeItem = (el: Element, globalIdx: number) => {\n  itemElMap.set(el, globalIdx)\n  itemRo.observe(el)\n}\n\nconst unobserveItem = (el: Element) => {\n  itemRo.unobserve(el)\n  itemElMap.delete(el)\n}\n\n// ─── resize observer (container) ─────────────────────────────────────────────\n\nlet containerRo: ResizeObserver | null = null\n\n// ─── lifecycle ────────────────────────────────────────────────────────────────\n\nonMounted(async () => {\n  await nextTick()\n  if (!containerRef.value) return\n\n  scrollEl = findScrollParent(containerRef.value)\n  scrollEl.addEventListener('scroll', onScroll, { passive: true })\n  viewportHeight.value = scrollEl === document.documentElement\n    ? window.innerHeight\n    : (scrollEl as HTMLElement).clientHeight\n\n  containerRo = new ResizeObserver(() => {\n    viewportHeight.value = scrollEl === document.documentElement\n      ? window.innerHeight\n      : (scrollEl as HTMLElement).clientHeight\n    reflow()\n  })\n  containerRo.observe(containerRef.value)\n\n  reflow()\n})\n\nonUnmounted(() => {\n  scrollEl?.removeEventListener('scroll', onScroll)\n  containerRo?.disconnect()\n  itemRo.disconnect()\n})\n\nwatch(() => props.items.length, (newLen, oldLen) => {\n  if (newLen < oldLen) measuredHeights.clear()\n  reflow()\n})\n</script>\n\n<template>\n  <div ref=\"containerRef\" class=\"wf-root\" :style=\"{ gap: `${gap}px` }\">\n    <div\n      v-for=\"(_col, ci) in colPositions\"\n      :key=\"ci\"\n      class=\"wf-col\"\n      :style=\"{ height: `${colTotalHeights[ci]}px` }\"\n    >\n      <div\n        v-for=\"{ item, globalIdx, top } in visibleItems[ci]\"\n        :key=\"globalIdx\"\n        :ref=\"(el) => { if (el) observeItem(el as Element, globalIdx) }\"\n        class=\"wf-item\"\n        :style=\"{ transform: `translateY(${top}px)` }\"\n        @vue:unmounted=\"({ el }: any) => unobserveItem(el)\"\n      >\n        <slot :item=\"item\" />\n      </div>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.wf-root {\n  display: flex;\n  align-items: flex-start;\n  width: 100%;\n}\n\n.wf-col {\n  flex: 1;\n  position: relative;\n  min-width: 0;\n}\n\n.wf-item {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n}\n</style>\n","import type { App, Plugin } from 'vue'\n\nimport Waterfall from './components/Waterfall.vue'\n\nexport { Waterfall }\nexport type { WaterfallProps, WaterfallBreakpoint } from './components/Waterfall.vue'\n\nfunction install(app: App): void {\n  app.component('TdWaterfall', Waterfall)\n}\n\nconst TudouWaterfall: Plugin = {\n  install,\n}\n\nexport default TudouWaterfall\nexport { TudouWaterfall }\n"],"names":["ref","nextTick","computed","onMounted","onUnmounted","watch","_createElementBlock","_openBlock","_Fragment","_renderList","_normalizeStyle","_renderSlot"],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,102 @@
+import { ComponentOptionsMixin } from 'vue';
+import { ComponentProvideOptions } from 'vue';
+import { DefineComponent } from 'vue';
+import { ExtractPropTypes } from 'vue';
+import { Plugin as Plugin_2 } from 'vue';
+import { PropType } from 'vue';
+import { PublicProps } from 'vue';
+
+declare const __VLS_component: DefineComponent<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<WaterfallProps>, {
+cols: number;
+gap: number;
+estimatedHeight: number;
+overscan: number;
+breakpoints: () => {
+minWidth: number;
+cols: number;
+}[];
+defaultCols: number;
+}>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+reflow: () => void;
+}, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<WaterfallProps>, {
+cols: number;
+gap: number;
+estimatedHeight: number;
+overscan: number;
+breakpoints: () => {
+minWidth: number;
+cols: number;
+}[];
+defaultCols: number;
+}>>> & Readonly<{
+onReflow?: (() => any) | undefined;
+}>, {
+cols: number;
+gap: number;
+estimatedHeight: number;
+overscan: number;
+breakpoints: WaterfallBreakpoint[];
+defaultCols: number;
+}, {}, {}, {}, string, ComponentProvideOptions, true, {}, any>;
+
+declare type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+
+declare type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+
+declare function __VLS_template(): {
+    default?(_: {
+        item: any;
+    }): any;
+};
+
+declare type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: PropType<T[K]>;
+        required: true;
+    };
+};
+
+declare type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+
+declare type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
+declare const TudouWaterfall: Plugin_2;
+export { TudouWaterfall }
+export default TudouWaterfall;
+
+export declare const Waterfall: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+
+export declare interface WaterfallBreakpoint {
+    minWidth: number;
+    cols: number;
+}
+
+export declare interface WaterfallProps {
+    items: any[];
+    cols?: number;
+    gap?: number;
+    estimatedHeight?: number;
+    overscan?: number;
+    /**
+     * Responsive breakpoints. Sorted descending by minWidth at runtime.
+     * Example: [{ minWidth: 1400, cols: 5 }, { minWidth: 900, cols: 3 }]
+     * Falls back to defaultCols when no breakpoint matches.
+     */
+    breakpoints?: WaterfallBreakpoint[];
+    /** Column count when no breakpoint matches (default: 2) */
+    defaultCols?: number;
+}
+
+export { }

package/dist/index.mjs

@@ -0,0 +1,182 @@
+import { defineComponent, ref, computed, onMounted, nextTick, onUnmounted, watch, openBlock, createElementBlock, normalizeStyle, Fragment, renderList, renderSlot } from "vue";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "Waterfall",
+  props: {
+    items: {},
+    cols: { default: 0 },
+    gap: { default: 15 },
+    estimatedHeight: { default: 220 },
+    overscan: { default: 600 },
+    breakpoints: { default: () => [
+      { minWidth: 1400, cols: 9 },
+      { minWidth: 1200, cols: 8 },
+      { minWidth: 900, cols: 7 },
+      { minWidth: 700, cols: 6 },
+      { minWidth: 500, cols: 5 }
+    ] },
+    defaultCols: { default: 2 }
+  },
+  emits: ["reflow"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const containerRef = ref(null);
+    const scrollTop = ref(0);
+    const viewportHeight = ref(0);
+    const colPositions = ref([]);
+    const colTotalHeights = ref([]);
+    const measuredHeights = /* @__PURE__ */ new Map();
+    const getColCount = () => {
+      var _a, _b;
+      if (props.cols > 0) return props.cols;
+      const width = ((_a = containerRef.value) == null ? void 0 : _a.clientWidth) ?? window.innerWidth;
+      const sorted = [...props.breakpoints].sort((a, b) => b.minWidth - a.minWidth);
+      return ((_b = sorted.find((bp) => width >= bp.minWidth)) == null ? void 0 : _b.cols) ?? props.defaultCols;
+    };
+    const reflow = async () => {
+      await nextTick();
+      const count = getColCount();
+      const cols = Array.from({ length: count }, () => []);
+      const colH = new Array(count).fill(0);
+      props.items.forEach((item, i) => {
+        const minIdx = colH.indexOf(Math.min(...colH));
+        const h = measuredHeights.get(i) ?? props.estimatedHeight;
+        cols[minIdx].push({ item, globalIdx: i, top: colH[minIdx], height: h });
+        colH[minIdx] += h + props.gap;
+      });
+      colPositions.value = cols;
+      colTotalHeights.value = colH;
+      emit("reflow");
+    };
+    const patchHeight = (globalIdx, newHeight) => {
+      const old = measuredHeights.get(globalIdx) ?? props.estimatedHeight;
+      if (Math.abs(old - newHeight) < 2) return;
+      measuredHeights.set(globalIdx, newHeight);
+      for (let ci = 0; ci < colPositions.value.length; ci++) {
+        const col = colPositions.value[ci];
+        const pos = col.findIndex((p) => p.globalIdx === globalIdx);
+        if (pos === -1) continue;
+        const delta = newHeight - col[pos].height;
+        col[pos].height = newHeight;
+        for (let j = pos + 1; j < col.length; j++) {
+          col[j] = { ...col[j], top: col[j].top + delta };
+        }
+        colTotalHeights.value[ci] += delta;
+        break;
+      }
+    };
+    const visibleItems = computed(() => {
+      const top = scrollTop.value - props.overscan;
+      const bottom = scrollTop.value + viewportHeight.value + props.overscan;
+      return colPositions.value.map(
+        (col) => col.filter((p) => p.top + p.height >= top && p.top <= bottom)
+      );
+    });
+    let scrollEl = null;
+    const findScrollParent = (el) => {
+      let cur = el.parentElement;
+      while (cur) {
+        const { overflow, overflowY } = getComputedStyle(cur);
+        if (/auto|scroll/.test(overflow + overflowY)) return cur;
+        cur = cur.parentElement;
+      }
+      return document.documentElement;
+    };
+    const onScroll = (e) => {
+      const st = e.target.scrollTop;
+      const containerOffset = containerRef.value ? containerRef.value.offsetTop : 0;
+      scrollTop.value = Math.max(0, st - containerOffset);
+    };
+    const itemElMap = /* @__PURE__ */ new WeakMap();
+    const itemRo = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const globalIdx = itemElMap.get(entry.target);
+        if (globalIdx === void 0) continue;
+        const h = entry.contentRect.height;
+        if (h > 0) patchHeight(globalIdx, h);
+      }
+    });
+    const observeItem = (el, globalIdx) => {
+      itemElMap.set(el, globalIdx);
+      itemRo.observe(el);
+    };
+    const unobserveItem = (el) => {
+      itemRo.unobserve(el);
+      itemElMap.delete(el);
+    };
+    let containerRo = null;
+    onMounted(async () => {
+      await nextTick();
+      if (!containerRef.value) return;
+      scrollEl = findScrollParent(containerRef.value);
+      scrollEl.addEventListener("scroll", onScroll, { passive: true });
+      viewportHeight.value = scrollEl === document.documentElement ? window.innerHeight : scrollEl.clientHeight;
+      containerRo = new ResizeObserver(() => {
+        viewportHeight.value = scrollEl === document.documentElement ? window.innerHeight : scrollEl.clientHeight;
+        reflow();
+      });
+      containerRo.observe(containerRef.value);
+      reflow();
+    });
+    onUnmounted(() => {
+      scrollEl == null ? void 0 : scrollEl.removeEventListener("scroll", onScroll);
+      containerRo == null ? void 0 : containerRo.disconnect();
+      itemRo.disconnect();
+    });
+    watch(() => props.items.length, (newLen, oldLen) => {
+      if (newLen < oldLen) measuredHeights.clear();
+      reflow();
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "containerRef",
+        ref: containerRef,
+        class: "wf-root",
+        style: normalizeStyle({ gap: `${__props.gap}px` })
+      }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(colPositions.value, (_col, ci) => {
+          return openBlock(), createElementBlock("div", {
+            key: ci,
+            class: "wf-col",
+            style: normalizeStyle({ height: `${colTotalHeights.value[ci]}px` })
+          }, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(visibleItems.value[ci], ({ item, globalIdx, top }) => {
+              return openBlock(), createElementBlock("div", {
+                key: globalIdx,
+                ref_for: true,
+                ref: (el) => {
+                  if (el) observeItem(el, globalIdx);
+                },
+                class: "wf-item",
+                style: normalizeStyle({ transform: `translateY(${top}px)` }),
+                onVnodeUnmounted: _cache[0] || (_cache[0] = ({ el }) => unobserveItem(el))
+              }, [
+                renderSlot(_ctx.$slots, "default", { item }, void 0, true)
+              ], 4);
+            }), 128))
+          ], 4);
+        }), 128))
+      ], 4);
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const Waterfall = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-946f6fbc"]]);
+function install(app) {
+  app.component("TdWaterfall", Waterfall);
+}
+const TudouWaterfall = {
+  install
+};
+export {
+  TudouWaterfall,
+  Waterfall,
+  TudouWaterfall as default
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../src/components/Waterfall.vue","../src/index.ts"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, computed, onMounted, onUnmounted, nextTick, watch } from 'vue'\n\nexport interface WaterfallBreakpoint {\n  minWidth: number\n  cols: number\n}\n\nexport interface WaterfallProps {\n  items: any[]\n  cols?: number\n  gap?: number\n  estimatedHeight?: number\n  overscan?: number\n  /**\n   * Responsive breakpoints. Sorted descending by minWidth at runtime.\n   * Example: [{ minWidth: 1400, cols: 5 }, { minWidth: 900, cols: 3 }]\n   * Falls back to defaultCols when no breakpoint matches.\n   */\n  breakpoints?: WaterfallBreakpoint[]\n  /** Column count when no breakpoint matches (default: 2) */\n  defaultCols?: number\n}\n\nconst props = withDefaults(defineProps<WaterfallProps>(), {\n  cols: 0,\n  gap: 15,\n  estimatedHeight: 220,\n  overscan: 600,\n  breakpoints: () => [\n    { minWidth: 1400, cols: 9 },\n    { minWidth: 1200, cols: 8 },\n    { minWidth: 900,  cols: 7 },\n    { minWidth: 700,  cols: 6 },\n    { minWidth: 500,  cols: 5 },\n  ],\n  defaultCols: 2,\n})\n\nconst emit = defineEmits<{ (e: 'reflow'): void }>()\n\n// ─── types ────────────────────────────────────────────────────────────────────\n\ninterface PositionedItem {\n  item: any\n  globalIdx: number\n  top: number\n  height: number\n}\n\n// ─── state ────────────────────────────────────────────────────────────────────\n\nconst containerRef = ref<HTMLElement | null>(null)\nconst scrollTop = ref(0)\nconst viewportHeight = ref(0)\n\n// colPositions[colIdx] = sorted array of positioned items\nconst colPositions = ref<PositionedItem[][]>([])\n// colTotalHeight[colIdx] = total height of that column (for the spacer div)\nconst colTotalHeights = ref<number[]>([])\n\n// globalIdx -> measured height (updated after image load)\nconst measuredHeights = new Map<number, number>()\n\n// ─── column count ─────────────────────────────────────────────────────────────\n\nconst getColCount = () => {\n  if (props.cols > 0) return props.cols\n  const width = containerRef.value?.clientWidth ?? window.innerWidth\n  const sorted = [...props.breakpoints].sort((a, b) => b.minWidth - a.minWidth)\n  return sorted.find(bp => width >= bp.minWidth)?.cols ?? props.defaultCols\n}\n\n// ─── full reflow: re-assign items to columns ──────────────────────────────────\n// Only called when items list changes or viewport width changes.\n// Does NOT re-assign on height updates to avoid item jumping between columns.\n\nconst reflow = async () => {\n  await nextTick()\n  const count = getColCount()\n  const cols: PositionedItem[][] = Array.from({ length: count }, () => [])\n  const colH = new Array(count).fill(0)\n\n  props.items.forEach((item, i) => {\n    const minIdx = colH.indexOf(Math.min(...colH))\n    const h = measuredHeights.get(i) ?? props.estimatedHeight\n    cols[minIdx].push({ item, globalIdx: i, top: colH[minIdx], height: h })\n    colH[minIdx] += h + props.gap\n  })\n\n  colPositions.value = cols\n  colTotalHeights.value = colH\n  emit('reflow')\n}\n\n// ─── patch: update one item's height in-place, shift subsequent items ─────────\n// Called after an image loads. Avoids full reflow to prevent column reassignment.\n\nconst patchHeight = (globalIdx: number, newHeight: number) => {\n  const old = measuredHeights.get(globalIdx) ?? props.estimatedHeight\n  if (Math.abs(old - newHeight) < 2) return\n  measuredHeights.set(globalIdx, newHeight)\n\n  for (let ci = 0; ci < colPositions.value.length; ci++) {\n    const col = colPositions.value[ci]\n    const pos = col.findIndex(p => p.globalIdx === globalIdx)\n    if (pos === -1) continue\n\n    const delta = newHeight - col[pos].height\n    col[pos].height = newHeight\n\n    for (let j = pos + 1; j < col.length; j++) {\n      col[j] = { ...col[j], top: col[j].top + delta }\n    }\n\n    colTotalHeights.value[ci] += delta\n    break\n  }\n}\n\n// ─── virtual visibility ───────────────────────────────────────────────────────\n\nconst visibleItems = computed(() => {\n  const top = scrollTop.value - props.overscan\n  const bottom = scrollTop.value + viewportHeight.value + props.overscan\n  return colPositions.value.map(col =>\n    col.filter(p => p.top + p.height >= top && p.top <= bottom)\n  )\n})\n\n// ─── scroll listener ──────────────────────────────────────────────────────────\n\nlet scrollEl: Element | null = null\n\nconst findScrollParent = (el: Element): Element => {\n  let cur: Element | null = el.parentElement\n  while (cur) {\n    const { overflow, overflowY } = getComputedStyle(cur)\n    if (/auto|scroll/.test(overflow + overflowY)) return cur\n    cur = cur.parentElement\n  }\n  return document.documentElement\n}\n\nconst onScroll = (e: Event) => {\n  const st = (e.target as Element).scrollTop\n  const containerOffset = containerRef.value\n    ? (containerRef.value as HTMLElement).offsetTop\n    : 0\n  scrollTop.value = Math.max(0, st - containerOffset)\n}\n\n// ─── item resize observer ─────────────────────────────────────────────────────\n// One shared RO watches every .wf-item element.\n// el -> globalIdx mapping is stored in a WeakMap so we never leak.\n\nconst itemElMap = new WeakMap<Element, number>()\n\nconst itemRo = new ResizeObserver((entries) => {\n  for (const entry of entries) {\n    const globalIdx = itemElMap.get(entry.target)\n    if (globalIdx === undefined) continue\n    const h = entry.contentRect.height\n    if (h > 0) patchHeight(globalIdx, h)\n  }\n})\n\nconst observeItem = (el: Element, globalIdx: number) => {\n  itemElMap.set(el, globalIdx)\n  itemRo.observe(el)\n}\n\nconst unobserveItem = (el: Element) => {\n  itemRo.unobserve(el)\n  itemElMap.delete(el)\n}\n\n// ─── resize observer (container) ─────────────────────────────────────────────\n\nlet containerRo: ResizeObserver | null = null\n\n// ─── lifecycle ────────────────────────────────────────────────────────────────\n\nonMounted(async () => {\n  await nextTick()\n  if (!containerRef.value) return\n\n  scrollEl = findScrollParent(containerRef.value)\n  scrollEl.addEventListener('scroll', onScroll, { passive: true })\n  viewportHeight.value = scrollEl === document.documentElement\n    ? window.innerHeight\n    : (scrollEl as HTMLElement).clientHeight\n\n  containerRo = new ResizeObserver(() => {\n    viewportHeight.value = scrollEl === document.documentElement\n      ? window.innerHeight\n      : (scrollEl as HTMLElement).clientHeight\n    reflow()\n  })\n  containerRo.observe(containerRef.value)\n\n  reflow()\n})\n\nonUnmounted(() => {\n  scrollEl?.removeEventListener('scroll', onScroll)\n  containerRo?.disconnect()\n  itemRo.disconnect()\n})\n\nwatch(() => props.items.length, (newLen, oldLen) => {\n  if (newLen < oldLen) measuredHeights.clear()\n  reflow()\n})\n</script>\n\n<template>\n  <div ref=\"containerRef\" class=\"wf-root\" :style=\"{ gap: `${gap}px` }\">\n    <div\n      v-for=\"(_col, ci) in colPositions\"\n      :key=\"ci\"\n      class=\"wf-col\"\n      :style=\"{ height: `${colTotalHeights[ci]}px` }\"\n    >\n      <div\n        v-for=\"{ item, globalIdx, top } in visibleItems[ci]\"\n        :key=\"globalIdx\"\n        :ref=\"(el) => { if (el) observeItem(el as Element, globalIdx) }\"\n        class=\"wf-item\"\n        :style=\"{ transform: `translateY(${top}px)` }\"\n        @vue:unmounted=\"({ el }: any) => unobserveItem(el)\"\n      >\n        <slot :item=\"item\" />\n      </div>\n    </div>\n  </div>\n</template>\n\n<style scoped>\n.wf-root {\n  display: flex;\n  align-items: flex-start;\n  width: 100%;\n}\n\n.wf-col {\n  flex: 1;\n  position: relative;\n  min-width: 0;\n}\n\n.wf-item {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n}\n</style>\n","import type { App, Plugin } from 'vue'\n\nimport Waterfall from './components/Waterfall.vue'\n\nexport { Waterfall }\nexport type { WaterfallProps, WaterfallBreakpoint } from './components/Waterfall.vue'\n\nfunction install(app: App): void {\n  app.component('TdWaterfall', Waterfall)\n}\n\nconst TudouWaterfall: Plugin = {\n  install,\n}\n\nexport default TudouWaterfall\nexport { TudouWaterfall }\n"],"names":["_createElementBlock","_openBlock","_Fragment","_renderList","_normalizeStyle","_renderSlot"],"mappings":"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"}

package/dist/style.css

@@ -0,0 +1,17 @@
+
+.wf-root[data-v-946f6fbc] {
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+}
+.wf-col[data-v-946f6fbc] {
+  flex: 1;
+  position: relative;
+  min-width: 0;
+}
+.wf-item[data-v-946f6fbc] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tudou-waterfall",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "A Vue 3 plugin with UI components, directives, and global methods",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -20,7 +20,8 @@
     "dev": "vite",
     "build": "vue-tsc --noEmit && vite build",
     "preview": "vite preview",
-    "typecheck": "vue-tsc --noEmit"
+    "typecheck": "vue-tsc --noEmit",
+    "prepublishOnly": "npm run build"
   },
   "peerDependencies": {
     "vue": "^3.0.0"