vue-layout-virtual 0.0.1 → 0.0.2

package/dist/index.js

@@ -1,180 +1 @@
-import { nextTick as M, defineComponent as H, ref as u, useSlots as B, onMounted as V, onUpdated as F, unref as T, openBlock as R, createBlock as E, Teleport as A, createElementVNode as d, createElementBlock as y, Fragment as S, renderList as C, renderSlot as w } from "vue";
-import $, { ScrollableContainer as z, ArrayItemStore as D, DynamicListLayout as N } from "layout-virtual";
-class P {
-  _store = null;
-  _scrollableContainer;
-  _renderedIndexRegistry = /* @__PURE__ */ new Map();
-  _renderedItemsRegistry = /* @__PURE__ */ new Map();
-  _itemsSetter;
-  _listItems = [];
-  _getRenderedBoundaryIndex(e) {
-    const a = e === "first" ? this._scrollableContainer.getFirstItem() : e === "last" ? this._scrollableContainer.getLastItem() : null;
-    if (a)
-      return this.getIndex(a);
-  }
-  constructor(e) {
-    this._scrollableContainer = new z({ ...e }), this._itemsSetter = e.itemsSetter;
-  }
-  render(e, a, s) {
-    const i = this._getRenderedBoundaryIndex("first"), o = this._getRenderedBoundaryIndex("last");
-    let n = e, t = a, r = i, l = o, c = 0;
-    return s === "down" ? r !== void 0 && o !== void 0 && (l = Math.min(n - 1, o), n = Math.max(o + 1, n), r <= l && (c = this.removeRange(r, l, s))) : s === "up" && l !== void 0 && i !== void 0 && (r = Math.max(t + 1, i), t = Math.min(i - 1, t), r <= l && (c = this.removeRange(r, l, s))), n < t && this.renderRange(n, t, s), c;
-  }
-  renderRange(e, a, s) {
-    console.log("_renderRange", e, a, s);
-    const i = this._store, o = this._listItems, n = [];
-    if (i) {
-      for (let t = e; t <= a; t++) {
-        const r = i.getByIndex(t);
-        r && n.push({ data: r.data, index: t });
-      }
-      this._listItems = s === "down" ? o.concat(n) : s === "up" ? n.concat(o) : this._listItems;
-    }
-  }
-  removeRange(e, a, s) {
-    const i = this._renderedIndexRegistry, o = this._renderedItemsRegistry;
-    let n = 0, t = 1 / 0, r = 0;
-    for (let l = e; l <= a; l++) {
-      const c = o.get(l);
-      if (c) {
-        const { offsetTop: _, offsetHeight: h } = c;
-        t = Math.min(t, _), r = Math.max(r, _ + h), o.delete(l), i.delete(c), n++;
-      }
-    }
-    return n && (this._listItems = s === "down" ? this._listItems.slice(n) : s === "up" ? this._listItems.slice(0, -n) : this._listItems), console.log("_removeItems startIndex:", e, "endIndex:", a, "removedHeight:", r > t ? r - t : 0, "removedItemsCount:", n), r > t ? r - t : 0;
-  }
-  clear() {
-    this._renderedIndexRegistry.clear(), this._renderedItemsRegistry.clear(), this._listItems = [], this._itemsSetter(this._listItems);
-  }
-  getIndex(e) {
-    return this._renderedIndexRegistry.get(e);
-  }
-  getItem(e) {
-    return this._renderedItemsRegistry.get(e);
-  }
-  get scrollableContainer() {
-    return this._scrollableContainer;
-  }
-  attach(e) {
-    this._store = e;
-  }
-  flush() {
-    return console.error("flush", this._listItems), this._itemsSetter(this._listItems), M();
-  }
-  commit(e) {
-    const a = this._renderedIndexRegistry, s = this._renderedItemsRegistry;
-    for (const [i, { value: o }] of e.entries())
-      o && (a.set(o, i), s.set(i, o));
-    e.clear();
-  }
-}
-const q = /* @__PURE__ */ H({
-  __name: "VueLayoutVirtual",
-  props: {
-    scrollerRef: {},
-    overscanHeight: {},
-    data: {}
-  },
-  setup(p) {
-    const e = p, { overscanHeight: a = 200, data: s, scrollerRef: i } = e, o = i || u(), n = u(), t = u(), r = u(), l = u(), c = u(), _ = u(), h = u(), v = /* @__PURE__ */ new Map();
-    let g;
-    const b = (f) => {
-      console.log("setVisibleItems:", f), h.value = f;
-    }, x = (f) => v.get(f) || v.set(f, u()).get(f), L = B().item;
-    return V(() => {
-      g = new P({
-        container: o.value,
-        scrollHeightFiller: n.value,
-        viewportContainer: t.value,
-        scrollCanvas: r.value,
-        topSpacer: l.value,
-        contentLayer: c.value,
-        bottomSpacer: _.value,
-        itemsSetter: b
-      });
-      const f = new D(), k = new N({ overscanHeight: a, renderer: g }), m = new $({ store: f, layout: k });
-      for (let I = 0; I < s.length; I++)
-        m.insert({ data: s[I], render: L }, I);
-    }), F(() => {
-      g?.commit(v);
-    }), (f, k) => T(i) ? (R(), E(A, {
-      key: 0,
-      to: "scrollerRef"
-    }, [
-      d("div", {
-        ref_key: "scrollHeightFillerRef",
-        ref: n
-      }, null, 512),
-      d("div", {
-        ref_key: "viewportContainerRef",
-        ref: t
-      }, [
-        d("div", {
-          ref_key: "scrollCanvasRef",
-          ref: r
-        }, [
-          d("div", {
-            ref_key: "topSpacerRef",
-            ref: l
-          }, null, 512),
-          d("div", {
-            ref_key: "contentLayerRef",
-            ref: c
-          }, [
-            (R(!0), y(S, null, C(h.value, (m) => w(f.$slots, "renderItem", {
-              key: m.index,
-              data: m.data,
-              index: m.index,
-              elRef: x(m.index)
-            })), 128))
-          ], 512),
-          d("div", {
-            ref_key: "bottomSpacerRef",
-            ref: _
-          }, null, 512)
-        ], 512)
-      ], 512)
-    ])) : (R(), y("div", {
-      key: 1,
-      ref_key: "containerRef",
-      ref: o
-    }, [
-      d("div", {
-        ref_key: "scrollHeightFillerRef",
-        ref: n
-      }, null, 512),
-      d("div", {
-        ref_key: "viewportContainerRef",
-        ref: t
-      }, [
-        d("div", {
-          ref_key: "scrollCanvasRef",
-          ref: r
-        }, [
-          d("div", {
-            ref_key: "topSpacerRef",
-            ref: l
-          }, null, 512),
-          d("div", {
-            ref_key: "contentLayerRef",
-            ref: c
-          }, [
-            (R(!0), y(S, null, C(h.value, (m) => w(f.$slots, "renderItem", {
-              key: m.index,
-              data: m.data,
-              index: m.index,
-              elRef: x(m.index)
-            })), 128))
-          ], 512),
-          d("div", {
-            ref_key: "bottomSpacerRef",
-            ref: _
-          }, null, 512)
-        ], 512)
-      ], 512)
-    ], 512));
-  }
-});
-export {
-  q as default
-};
+import{nextTick as e,defineComponent as t,ref as r,useSlots as n,onMounted as s,onUpdated as o,unref as i,openBlock as l,createBlock as a,Teleport as f,createElementVNode as d,createElementBlock as h,Fragment as c,renderList as u,renderSlot as v}from"vue";import y,{ScrollableContainer as p,ArrayItemStore as m,DynamicListLayout as R}from"layout-virtual";class _{t=null;o;i=/* @__PURE__ */new Map;l=/* @__PURE__ */new Map;h;u=[];v(e){const t="first"===e?this.o.getFirstItem():"last"===e?this.o.getLastItem():null;if(t)return this.getIndex(t)}constructor(e){this.o=new p({...e}),this.h=e.itemsSetter}render(e,t,r){const n=this.v("first"),s=this.v("last");let o=e,i=t,l=n,a=s,f=0;return"down"===r?void 0!==l&&void 0!==s&&(a=Math.min(o-1,s),o=Math.max(s+1,o),l<=a&&(f=this.removeRange(l,a,r))):"up"===r&&void 0!==a&&void 0!==n&&(l=Math.max(i+1,n),i=Math.min(n-1,i),l<=a&&(f=this.removeRange(l,a,r))),o<i&&this.renderRange(o,i,r),f}renderRange(e,t,r){console.log("_renderRange",e,t,r);const n=this.t,s=this.u,o=[];if(n){for(let r=e;r<=t;r++){const e=n.getByIndex(r);e&&o.push({data:e.data,index:r})}this.u="down"===r?s.concat(o):"up"===r?o.concat(s):this.u}}removeRange(e,t,r){const n=this.i,s=this.l;let o=0,i=1/0,l=0;for(let a=e;a<=t;a++){const e=s.get(a);if(e){const{offsetTop:t,offsetHeight:r}=e;i=Math.min(i,t),l=Math.max(l,t+r),s.delete(a),n.delete(e),o++}}return o&&(this.u="down"===r?this.u.slice(o):"up"===r?this.u.slice(0,-o):this.u),console.log("_removeItems startIndex:",e,"endIndex:",t,"removedHeight:",l>i?l-i:0,"removedItemsCount:",o),l>i?l-i:0}clear(){this.i.clear(),this.l.clear(),this.u=[],this.h(this.u)}getIndex(e){return this.i.get(e)}getItem(e){return this.l.get(e)}get scrollableContainer(){return this.o}attach(e){this.t=e}flush(){return console.error("flush",this.u),this.h(this.u),e()}commit(e){const t=this.i,r=this.l;for(const[n,{value:s}]of e.entries())s&&(t.set(s,n),r.set(n,s));e.clear()}}const g=/* @__PURE__ */t({p:"VueLayoutVirtual",props:{scrollerRef:{},overscanHeight:{},data:{}},setup(e){const t=e,{overscanHeight:p=200,data:g,scrollerRef:k}=t,w=k||r(),I=r(),x=r(),C=r(),M=r(),H=r(),S=r(),b=r(),L=/* @__PURE__ */new Map;let F;const V=e=>{console.log("setVisibleItems:",e),b.value=e},B=e=>L.get(e)||L.set(e,r()).get(e),T=n().item;return s(()=>{F=new _({container:w.value,scrollHeightFiller:I.value,viewportContainer:x.value,scrollCanvas:C.value,topSpacer:M.value,contentLayer:H.value,bottomSpacer:S.value,itemsSetter:V});const e=new m,t=new R({overscanHeight:p,renderer:F}),r=new y({store:e,layout:t});for(let n=0;n<g.length;n++)r.insert({data:g[n],render:T},n)}),o(()=>{F?.commit(L)}),(e,t)=>i(k)?(l(),a(f,{key:0,to:"scrollerRef"},[d("div",{ref_key:"scrollHeightFillerRef",ref:I},null,512),d("div",{ref_key:"viewportContainerRef",ref:x},[d("div",{ref_key:"scrollCanvasRef",ref:C},[d("div",{ref_key:"topSpacerRef",ref:M},null,512),d("div",{ref_key:"contentLayerRef",ref:H},[(l(!0),h(c,null,u(b.value,t=>v(e.$slots,"renderItem",{key:t.index,data:t.data,index:t.index,elRef:B(t.index)})),128))],512),d("div",{ref_key:"bottomSpacerRef",ref:S},null,512)],512)],512)])):(l(),h("div",{key:1,ref_key:"containerRef",ref:w},[d("div",{ref_key:"scrollHeightFillerRef",ref:I},null,512),d("div",{ref_key:"viewportContainerRef",ref:x},[d("div",{ref_key:"scrollCanvasRef",ref:C},[d("div",{ref_key:"topSpacerRef",ref:M},null,512),d("div",{ref_key:"contentLayerRef",ref:H},[(l(!0),h(c,null,u(b.value,t=>v(e.$slots,"renderItem",{key:t.index,data:t.data,index:t.index,elRef:B(t.index)})),128))],512),d("div",{ref_key:"bottomSpacerRef",ref:S},null,512)],512)],512)],512))}});export{g as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-layout-virtual",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Vue virtual scrolling component for responsive lists and grids with dynamic item sizes.",
   "keywords": [
     "virtual",
@@ -42,10 +42,9 @@
     "build:types": "tsc -p tsconfig.build.json --emitDeclarationOnly"
   },
   "dependencies": {
-    "layout-virtual": "0.0.1"
+    "layout-virtual": "^0.0.2"
   },
   "peerDependencies": {
     "vue": "^3.5.34"
-  },
-  "devDependencies": {}
+  }
 }