vue-layout-virtual 0.0.2 → 0.0.4

package/dist/VueRenderer.d.ts

@@ -3,9 +3,9 @@
  * @license MIT
  * @author Alexandr Kalabin
  */
-import { type Ref, type VNodeChild } from 'vue';
-import { ScrollableContainer } from 'layout-virtual';
-import type { IItem, IItemStore, IRangeRenderer, ScrollDirection, VirtualScrollStructure } from 'layout-virtual/types';
+import { type Ref } from 'vue';
+import { BaseRenderer } from 'layout-virtual';
+import type { IRangeRenderer, ScrollDirection, VirtualScrollStructure } from 'layout-virtual/types';
 export interface ListItemProps<T = unknown> {
     data: T;
     index: number;
@@ -13,32 +13,25 @@ export interface ListItemProps<T = unknown> {
 type VueRendererOptions<T> = {
     itemsSetter: (items: ListItemProps<T>[]) => void;
 } & VirtualScrollStructure;
-export type VueListItem<T = unknown> = {
-    data: T;
-    render: (props: ListItemProps<T>) => VNodeChild;
-};
 export type IndexedRef = {
     value: Element | null;
     idx: number;
 };
-export default class VueRenderer<T> implements IRangeRenderer<T> {
+export default class VueRenderer<DataType = unknown> extends BaseRenderer implements IRangeRenderer<DataType> {
     private _store;
-    private _scrollableContainer;
-    private _renderedIndexRegistry;
-    private _renderedItemsRegistry;
     private _itemsSetter;
     private _listItems;
-    private _getRenderedBoundaryIndex;
-    constructor(opts: VueRendererOptions<T>);
-    render(startIndex: number, endIndex: number, direction: ScrollDirection): number;
+    constructor(opts: VueRendererOptions<DataType>);
     renderRange(startIndex: number, endIndex: number, direction: ScrollDirection): void;
-    removeRange(startIndex: number, endIndex: number, direction: ScrollDirection): number;
+    removeRange(startIndex: number, endIndex: number, direction?: ScrollDirection): {
+        itemsToRemove: Element[];
+        removedHeight: number;
+    };
     clear(): void;
-    getIndex(item: Element): number | undefined;
-    getItem(index: number): Element | undefined;
-    get scrollableContainer(): ScrollableContainer;
-    attach(store: IItemStore<IItem<T>>): void;
+    setData(store: DataType[]): void;
+    setRenderItem(): void;
     flush(): Promise<void>;
     commit(renderedRefs: Map<number, Ref<HTMLElement | undefined>>): void;
+    get dataSize(): number;
 }
 export {};

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 r,ref as t,onMounted as o,onUpdated as n,unref as s,openBlock as i,createBlock as f,Teleport as l,createElementVNode as a,createElementBlock as c,Fragment as d,renderList as u,renderSlot as v}from"vue";import{BaseRenderer as h,DynamicListLayout as p,LayoutVirtual as y}from"layout-virtual";class _ extends h{t=[];o;i=[];constructor(e){super(e),this.o=e.itemsSetter}renderRange(e,r,t){const o=this.t,n=this.i,s=[];for(let i=e;i<=r;i++){const e=o[i];e&&s.push({data:e,index:i})}this.i="down"===t?n.concat(s):"up"===t?s.concat(n):this.i}removeRange(e,r,t){const o=super.removeRange(e,r),n=o.itemsToRemove.length;return n&&(this.i="down"===t?this.i.slice(n):"up"===t?this.i.slice(0,-n):this.i),o}clear(){super.clear(),this.i=[],this.o(this.i)}setData(e){this.t=e}setRenderItem(){}flush(){return this.o(this.i),e()}commit(e){for(const[r,{value:t}]of e.entries())t&&this.registerElement(r,t);e.clear()}get dataSize(){return this.t.length}}const R=/* @__PURE__ */r({l:"VueLayoutVirtual",props:{scrollerRef:{},overscanHeight:{},data:{}},setup(e){const r=e,{overscanHeight:h=200,data:R,scrollerRef:m}=r,k=m||t(),g=t(),w=t(),S=t(),C=t(),H=t(),x=t(),I=t(),b=/* @__PURE__ */new Map;let L;const F=e=>{console.log("setVisibleItems:",e),I.value=e},V=e=>b.get(e)||b.set(e,t()).get(e);return o(()=>{L=new _({container:k.value,scrollHeightFiller:g.value,viewportContainer:w.value,scrollCanvas:S.value,topSpacer:C.value,contentLayer:H.value,bottomSpacer:x.value,itemsSetter:F});const e=new p({overscanHeight:h,renderer:L});new y({layout:e}).setData(R)}),n(()=>{L?.commit(b)}),(e,r)=>s(m)?(i(),f(l,{key:0,to:"scrollerRef"},[a("div",{ref_key:"scrollHeightFillerRef",ref:g},null,512),a("div",{ref_key:"viewportContainerRef",ref:w},[a("div",{ref_key:"scrollCanvasRef",ref:S},[a("div",{ref_key:"topSpacerRef",ref:C},null,512),a("div",{ref_key:"contentLayerRef",ref:H},[(i(!0),c(d,null,u(I.value,r=>v(e.$slots,"renderItem",{key:r.index,data:r.data,index:r.index,ref_for:!0,ref:V(r.index)})),128))],512),a("div",{ref_key:"bottomSpacerRef",ref:x},null,512)],512)],512)])):(i(),c("div",{key:1,ref_key:"containerRef",ref:k},[a("div",{ref_key:"scrollHeightFillerRef",ref:g},null,512),a("div",{ref_key:"viewportContainerRef",ref:w},[a("div",{ref_key:"scrollCanvasRef",ref:S},[a("div",{ref_key:"topSpacerRef",ref:C},null,512),a("div",{ref_key:"contentLayerRef",ref:H},[(i(!0),c(d,null,u(I.value,r=>v(e.$slots,"renderItem",{key:r.index,data:r.data,index:r.index,ref_for:!0,ref:V(r.index)})),128))],512),a("div",{ref_key:"bottomSpacerRef",ref:x},null,512)],512)],512)],512))}});export{R as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-layout-virtual",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "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.1.0"
   },
   "peerDependencies": {
     "vue": "^3.5.34"