vue-layout-virtual 0.0.2 → 0.0.3

package/dist/index.js

@@ -1 +1 @@
-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};
+import{nextTick as e,defineComponent as t,ref as r,useSlots as s,onMounted as n,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 p,{ScrollableContainer as y,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 y({...e}),this.h=e.itemsSetter}render(e,t,r){const s=this.v("first"),n=this.v("last");let o=e,i=t,l=s,a=n,f=0;return"down"===r?void 0!==l&&void 0!==n&&(a=Math.min(o-1,n),o=Math.max(n+1,o),l<=a&&(f=this.removeRange(l,a,r))):"up"===r&&void 0!==a&&void 0!==s&&(l=Math.max(i+1,s),i=Math.min(s-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 s=this.t,n=this.u,o=[];if(s){for(let r=e;r<=t;r++){const e=s.getByIndex(r);e&&o.push({data:e.data,index:r})}this.u="down"===r?n.concat(o):"up"===r?o.concat(n):this.u}}removeRange(e,t,r){const s=this.i,n=this.l;let o=0,i=1/0,l=0;for(let a=e;a<=t;a++){const e=n.get(a);if(e){const{offsetTop:t,offsetHeight:r}=e,f=getComputedStyle(e),d=parseFloat(f.marginTop),h=parseFloat(f.marginBottom);i=Math.min(i,t-d),l=Math.max(l,t+r+h),n.delete(a),s.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[s,{value:n}]of e.entries())n&&(t.set(n,s),r.set(s,n));e.clear()}}const g=/* @__PURE__ */t({p:"VueLayoutVirtual",props:{scrollerRef:{},overscanHeight:{},data:{}},setup(e){const t=e,{overscanHeight:y=200,data:g,scrollerRef:k}=t,w=k||r(),I=r(),C=r(),x=r(),M=r(),S=r(),H=r(),b=r(),F=/* @__PURE__ */new Map;let L;const V=e=>{console.log("setVisibleItems:",e),b.value=e},B=e=>F.get(e)||F.set(e,r()).get(e),T=s().item;return n(()=>{L=new _({container:w.value,scrollHeightFiller:I.value,viewportContainer:C.value,scrollCanvas:x.value,topSpacer:M.value,contentLayer:S.value,bottomSpacer:H.value,itemsSetter:V});const e=new m,t=new R({overscanHeight:y,renderer:L}),r=new p({store:e,layout:t});for(let s=0;s<g.length;s++)r.insert({data:g[s],render:T},s)}),o(()=>{L?.commit(F)}),(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:C},[d("div",{ref_key:"scrollCanvasRef",ref:x},[d("div",{ref_key:"topSpacerRef",ref:M},null,512),d("div",{ref_key:"contentLayerRef",ref:S},[(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:H},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:C},[d("div",{ref_key:"scrollCanvasRef",ref:x},[d("div",{ref_key:"topSpacerRef",ref:M},null,512),d("div",{ref_key:"contentLayerRef",ref:S},[(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:H},null,512)],512)],512)],512))}});export{g as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-layout-virtual",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Vue virtual scrolling component for responsive lists and grids with dynamic item sizes.",
   "keywords": [
     "virtual",
@@ -39,10 +39,11 @@
     "test": "test",
     "build": "npm run build:bundle && npm run build:types",
     "build:bundle": "vite build",
-    "build:types": "tsc -p tsconfig.build.json --emitDeclarationOnly"
+    "build:types": "tsc -p tsconfig.build.json --emitDeclarationOnly",
+    "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "layout-virtual": "^0.0.2"
+    "layout-virtual": "^0.0.3"
   },
   "peerDependencies": {
     "vue": "^3.5.34"