tudou-waterfall 0.1.3 → 0.1.5

package/dist/index.cjs

@@ -5,7 +5,7 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
   __name: "Waterfall",
   props: {
     items: {},
-    cols: {},
+    cols: { default: 2 },
     gap: { default: 15 },
     estimatedHeight: { default: 220 },
     overscan: { default: 600 }
@@ -111,10 +111,13 @@ const _sfc_main = /* @__PURE__ */ vue.defineComponent({
       containerRo == null ? void 0 : containerRo.disconnect();
       itemRo.disconnect();
     });
-    vue.watch(() => props.items.length, (newLen, oldLen) => {
-      if (newLen < oldLen) measuredHeights.clear();
+    vue.watch(() => props.cols, () => {
       reflow();
     });
+    vue.watch(() => props.items, (newItems, oldItems) => {
+      if (newItems.length < ((oldItems == null ? void 0 : oldItems.length) ?? 0)) measuredHeights.clear();
+      reflow();
+    }, { deep: false });
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", {
         ref_key: "containerRef",
@@ -155,7 +158,7 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const Waterfall = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-b1d54a76"]]);
+const Waterfall = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-588fb5ba"]]);
 function install(app) {
   app.component("TdWaterfall", Waterfall);
 }

package/dist/index.cjs.map

@@ -1 +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 WaterfallProps {\n  items: any[]\n  /** Number of columns. Required when not using breakpoints externally. */\n  cols: number\n  gap?: number\n  estimatedHeight?: number\n  overscan?: number\n}\n\nconst props = withDefaults(defineProps<WaterfallProps>(), {\n  gap: 15,\n  estimatedHeight: 220,\n  overscan: 600,\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 = () => Math.max(1, props.cols)\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 } 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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"}
+{"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 WaterfallProps {\n  items: any[]\n  /** Number of columns. Required when not using breakpoints externally. */\n  cols: number\n  gap?: number\n  estimatedHeight?: number\n  overscan?: number\n}\n\nconst props = withDefaults(defineProps<WaterfallProps>(), {\n  cols: 2,\n  gap: 15,\n  estimatedHeight: 220,\n  overscan: 600,\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 = () => Math.max(1, props.cols)\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.cols, () => {\n  reflow()\n})\n\nwatch(() => props.items, (newItems, oldItems) => {\n  if (newItems.length < (oldItems?.length ?? 0)) measuredHeights.clear()\n  reflow()\n}, { deep: false })\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 } 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":";;;;;;;;;;;;;;AAYA,UAAM,QAAQ;AAOd,UAAM,OAAO;AAab,UAAM,eAAeA,IAAAA,IAAwB,IAAI;AACjD,UAAM,YAAYA,IAAAA,IAAI,CAAC;AACvB,UAAM,iBAAiBA,IAAAA,IAAI,CAAC;AAG5B,UAAM,eAAeA,IAAAA,IAAwB,EAAE;AAE/C,UAAM,kBAAkBA,IAAAA,IAAc,EAAE;AAGxC,UAAM,sCAAsB,IAAA;AAI5B,UAAM,cAAc,MAAM,KAAK,IAAI,GAAG,MAAM,IAAI;AAMhD,UAAM,SAAS,YAAY;AACzB,YAAMC,aAAA;AACN,YAAM,QAAQ,YAAA;AACd,YAAM,OAA2B,MAAM,KAAK,EAAE,QAAQ,MAAA,GAAS,MAAM,EAAE;AACvE,YAAM,OAAO,IAAI,MAAM,KAAK,EAAE,KAAK,CAAC;AAEpC,YAAM,MAAM,QAAQ,CAAC,MAAM,MAAM;AAC/B,cAAM,SAAS,KAAK,QAAQ,KAAK,IAAI,GAAG,IAAI,CAAC;AAC7C,cAAM,IAAI,gBAAgB,IAAI,CAAC,KAAK,MAAM;AAC1C,aAAK,MAAM,EAAE,KAAK,EAAE,MAAM,WAAW,GAAG,KAAK,KAAK,MAAM,GAAG,QAAQ,GAAG;AACtE,aAAK,MAAM,KAAK,IAAI,MAAM;AAAA,MAC5B,CAAC;AAED,mBAAa,QAAQ;AACrB,sBAAgB,QAAQ;AACxB,WAAK,QAAQ;AAAA,IACf;AAKA,UAAM,cAAc,CAAC,WAAmB,cAAsB;AAC5D,YAAM,MAAM,gBAAgB,IAAI,SAAS,KAAK,MAAM;AACpD,UAAI,KAAK,IAAI,MAAM,SAAS,IAAI,EAAG;AACnC,sBAAgB,IAAI,WAAW,SAAS;AAExC,eAAS,KAAK,GAAG,KAAK,aAAa,MAAM,QAAQ,MAAM;AACrD,cAAM,MAAM,aAAa,MAAM,EAAE;AACjC,cAAM,MAAM,IAAI,UAAU,CAAA,MAAK,EAAE,cAAc,SAAS;AACxD,YAAI,QAAQ,GAAI;AAEhB,cAAM,QAAQ,YAAY,IAAI,GAAG,EAAE;AACnC,YAAI,GAAG,EAAE,SAAS;AAElB,iBAAS,IAAI,MAAM,GAAG,IAAI,IAAI,QAAQ,KAAK;AACzC,cAAI,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,GAAG,KAAK,IAAI,CAAC,EAAE,MAAM,MAAA;AAAA,QAC1C;AAEA,wBAAgB,MAAM,EAAE,KAAK;AAC7B;AAAA,MACF;AAAA,IACF;AAIA,UAAM,eAAeC,IAAAA,SAAS,MAAM;AAClC,YAAM,MAAM,UAAU,QAAQ,MAAM;AACpC,YAAM,SAAS,UAAU,QAAQ,eAAe,QAAQ,MAAM;AAC9D,aAAO,aAAa,MAAM;AAAA,QAAI,CAAA,QAC5B,IAAI,OAAO,CAAA,MAAK,EAAE,MAAM,EAAE,UAAU,OAAO,EAAE,OAAO,MAAM;AAAA,MAAA;AAAA,IAE9D,CAAC;AAID,QAAI,WAA2B;AAE/B,UAAM,mBAAmB,CAAC,OAAyB;AACjD,UAAI,MAAsB,GAAG;AAC7B,aAAO,KAAK;AACV,cAAM,EAAE,UAAU,cAAc,iBAAiB,GAAG;AACpD,YAAI,cAAc,KAAK,WAAW,SAAS,EAAG,QAAO;AACrD,cAAM,IAAI;AAAA,MACZ;AACA,aAAO,SAAS;AAAA,IAClB;AAEA,UAAM,WAAW,CAAC,MAAa;AAC7B,YAAM,KAAM,EAAE,OAAmB;AACjC,YAAM,kBAAkB,aAAa,QAChC,aAAa,MAAsB,YACpC;AACJ,gBAAU,QAAQ,KAAK,IAAI,GAAG,KAAK,eAAe;AAAA,IACpD;AAMA,UAAM,gCAAgB,QAAA;AAEtB,UAAM,SAAS,IAAI,eAAe,CAAC,YAAY;AAC7C,iBAAW,SAAS,SAAS;AAC3B,cAAM,YAAY,UAAU,IAAI,MAAM,MAAM;AAC5C,YAAI,cAAc,OAAW;AAC7B,cAAM,IAAI,MAAM,YAAY;AAC5B,YAAI,IAAI,EAAG,aAAY,WAAW,CAAC;AAAA,MACrC;AAAA,IACF,CAAC;AAED,UAAM,cAAc,CAAC,IAAa,cAAsB;AACtD,gBAAU,IAAI,IAAI,SAAS;AAC3B,aAAO,QAAQ,EAAE;AAAA,IACnB;AAEA,UAAM,gBAAgB,CAAC,OAAgB;AACrC,aAAO,UAAU,EAAE;AACnB,gBAAU,OAAO,EAAE;AAAA,IACrB;AAIA,QAAI,cAAqC;AAIzCC,QAAAA,UAAU,YAAY;AACpB,YAAMF,aAAA;AACN,UAAI,CAAC,aAAa,MAAO;AAEzB,iBAAW,iBAAiB,aAAa,KAAK;AAC9C,eAAS,iBAAiB,UAAU,UAAU,EAAE,SAAS,MAAM;AAC/D,qBAAe,QAAQ,aAAa,SAAS,kBACzC,OAAO,cACN,SAAyB;AAE9B,oBAAc,IAAI,eAAe,MAAM;AACrC,uBAAe,QAAQ,aAAa,SAAS,kBACzC,OAAO,cACN,SAAyB;AAC9B,eAAA;AAAA,MACF,CAAC;AACD,kBAAY,QAAQ,aAAa,KAAK;AAEtC,aAAA;AAAA,IACF,CAAC;AAEDG,QAAAA,YAAY,MAAM;AAChB,2CAAU,oBAAoB,UAAU;AACxC,iDAAa;AACb,aAAO,WAAA;AAAA,IACT,CAAC;AAEDC,cAAM,MAAM,MAAM,MAAM,MAAM;AAC5B,aAAA;AAAA,IACF,CAAC;AAEDA,QAAAA,MAAM,MAAM,MAAM,OAAO,CAAC,UAAU,aAAa;AAC/C,UAAI,SAAS,WAAU,qCAAU,WAAU,oBAAoB,MAAA;AAC/D,aAAA;AAAA,IACF,GAAG,EAAE,MAAM,OAAO;;8BAIhBC,IAAAA,mBAkBM,OAAA;AAAA,iBAlBG;AAAA,QAAJ,KAAI;AAAA,QAAe,OAAM;AAAA,QAAW,oCAAiB,QAAA,GAAG,MAAA;AAAA,MAAA;SAC3DC,IAAAA,UAAA,IAAA,GAAAD,IAAAA,mBAgBME,cAAA,MAAAC,IAAAA,WAfiB,aAAA,OAAY,CAAzB,MAAM,OAAE;kCADlBH,IAAAA,mBAgBM,OAAA;AAAA,YAdH,KAAK;AAAA,YACN,OAAM;AAAA,YACL,OAAKI,IAAAA,eAAA,EAAA,QAAA,GAAe,gBAAA,MAAgB,EAAE,CAAA,KAAA,CAAA;AAAA,UAAA;kCAEvCJ,IAAAA,mBASME,IAAAA,UAAA,MAAAC,IAAAA,WAR+B,mBAAa,EAAE,MAAzC,MAAM,WAAW,UAAG;sCAD/BH,IAAAA,mBASM,OAAA;AAAA,gBAPH,KAAK;AAAA;gBACL,KAAG,CAAG,OAAE;AAAA,sBAAW,GAAI,aAAY,IAAe,SAAS;AAAA,gBAAA;AAAA,gBAC5D,OAAM;AAAA,gBACL,qDAAkC,GAAG,OAAA;AAAA,gBACrC,kBAAa,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,EAAK,GAAA,MAAc,cAAc,EAAE;AAAA,cAAA;gBAEjDK,IAAAA,WAAqB,KAAA,QAAA,WAAA,EAAd,KAAA,GAAU,QAAA,IAAA;AAAA,cAAA;;;;;;;;;;;;;;;;AC5MzB,SAAS,QAAQ,KAAgB;AAC/B,MAAI,UAAU,eAAe,SAAS;AACxC;AAEA,MAAM,iBAAyB;AAAA,EAC7B;AACF;;;;"}

package/dist/index.d.ts

@@ -7,18 +7,21 @@ 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;
 }>>, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 reflow: () => void;
 }, string, PublicProps, Readonly<ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<WaterfallProps>, {
+cols: number;
 gap: number;
 estimatedHeight: number;
 overscan: number;
 }>>> & Readonly<{
 onReflow?: (() => any) | undefined;
 }>, {
+cols: number;
 gap: number;
 estimatedHeight: number;
 overscan: number;

package/dist/index.mjs

@@ -3,7 +3,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "Waterfall",
   props: {
     items: {},
-    cols: {},
+    cols: { default: 2 },
     gap: { default: 15 },
     estimatedHeight: { default: 220 },
     overscan: { default: 600 }
@@ -109,10 +109,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       containerRo == null ? void 0 : containerRo.disconnect();
       itemRo.disconnect();
     });
-    watch(() => props.items.length, (newLen, oldLen) => {
-      if (newLen < oldLen) measuredHeights.clear();
+    watch(() => props.cols, () => {
       reflow();
     });
+    watch(() => props.items, (newItems, oldItems) => {
+      if (newItems.length < ((oldItems == null ? void 0 : oldItems.length) ?? 0)) measuredHeights.clear();
+      reflow();
+    }, { deep: false });
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
         ref_key: "containerRef",
@@ -153,7 +156,7 @@ const _export_sfc = (sfc, props) => {
   }
   return target;
 };
-const Waterfall = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-b1d54a76"]]);
+const Waterfall = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-588fb5ba"]]);
 function install(app) {
   app.component("TdWaterfall", Waterfall);
 }

package/dist/index.mjs.map

@@ -1 +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 WaterfallProps {\n  items: any[]\n  /** Number of columns. Required when not using breakpoints externally. */\n  cols: number\n  gap?: number\n  estimatedHeight?: number\n  overscan?: number\n}\n\nconst props = withDefaults(defineProps<WaterfallProps>(), {\n  gap: 15,\n  estimatedHeight: 220,\n  overscan: 600,\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 = () => Math.max(1, props.cols)\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 } 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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"}
+{"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 WaterfallProps {\n  items: any[]\n  /** Number of columns. Required when not using breakpoints externally. */\n  cols: number\n  gap?: number\n  estimatedHeight?: number\n  overscan?: number\n}\n\nconst props = withDefaults(defineProps<WaterfallProps>(), {\n  cols: 2,\n  gap: 15,\n  estimatedHeight: 220,\n  overscan: 600,\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 = () => Math.max(1, props.cols)\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.cols, () => {\n  reflow()\n})\n\nwatch(() => props.items, (newItems, oldItems) => {\n  if (newItems.length < (oldItems?.length ?? 0)) measuredHeights.clear()\n  reflow()\n}, { deep: false })\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 } 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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tudou-waterfall",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "A Vue 3 plugin with UI components, directives, and global methods",
   "type": "module",
   "main": "./dist/index.cjs",