vue-layout-virtual 0.0.4 → 0.0.5

package/dist/VueRenderer.d.ts

@@ -4,7 +4,7 @@
  * @author Alexandr Kalabin
  */
 import { type Ref } from 'vue';
-import { BaseRenderer } from 'layout-virtual';
+import { BaseRenderer } from 'layout-virtual/core';
 import type { IRangeRenderer, ScrollDirection, VirtualScrollStructure } from 'layout-virtual/types';
 export interface ListItemProps<T = unknown> {
     data: T;

package/dist/index.js

@@ -1 +1,2 @@
-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};
+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/core";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};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/VueRenderer.ts","../src/VueLayoutVirtual.vue"],"sourcesContent":["/**\n * @fileoverview VueRenderer.\n * @license MIT\n * @author Alexandr Kalabin\n */\n\nimport { nextTick, type Ref } from 'vue';\nimport { BaseRenderer } from 'layout-virtual/core';\nimport type { IRangeRenderer, ScrollDirection, VirtualScrollStructure } from 'layout-virtual/types';\n\nexport interface ListItemProps<T = unknown> {\n  data: T;\n  index: number;\n}\n\ntype VueRendererOptions<T> = {\n  itemsSetter: (items: ListItemProps<T>[]) => void;\n} & VirtualScrollStructure;\n\nexport type IndexedRef = {\n  value: Element | null;\n  idx: number;\n};\n\nexport default class VueRenderer<DataType = unknown> extends BaseRenderer implements IRangeRenderer<DataType> {\n  private _store: DataType[] = [];\n  private _itemsSetter: (items: ListItemProps<DataType>[]) => void;\n  private _listItems: ListItemProps<DataType>[] = [];\n\n  constructor(opts: VueRendererOptions<DataType>) {\n    super(opts);\n    this._itemsSetter = opts.itemsSetter;\n  }\n\n  renderRange(startIndex: number, endIndex: number, direction: ScrollDirection) {\n    const store = this._store;\n    const listItems = this._listItems;\n    const itemsToAdd: ListItemProps<DataType>[] = [];\n\n    for (let index = startIndex; index <= endIndex; index++) {\n      const data = store[index];\n\n      if (data) {\n        itemsToAdd.push({ data, index });\n      }\n    }\n\n    this._listItems =\n      direction === 'down'\n        ? listItems.concat(itemsToAdd)\n        : direction === 'up'\n          ? itemsToAdd.concat(listItems)\n          : this._listItems;\n  }\n\n  removeRange(startIndex: number, endIndex: number, direction?: ScrollDirection) {\n    const removal = super.removeRange(startIndex, endIndex);\n    const removedItemsCount = removal.itemsToRemove.length;\n\n    if (removedItemsCount) {\n      this._listItems = direction === 'down'\n        ? this._listItems.slice(removedItemsCount)\n        : direction === 'up'\n          ? this._listItems.slice(0, -removedItemsCount)\n          : this._listItems;\n    }\n\n    return removal;\n  }\n\n  clear() {\n    super.clear();\n    this._listItems = [];\n    this._itemsSetter(this._listItems);\n  }\n\n  setData(store: DataType[]) {\n    this._store = store;\n  }\n\n  setRenderItem() {\n    /* not needed for Vue renderer */\n  }\n\n  flush() {\n    this._itemsSetter(this._listItems);\n    return nextTick();\n  }\n\n  commit(renderedRefs: Map<number, Ref<HTMLElement | undefined>>) {\n    for (const [idx, { value: element }] of renderedRefs.entries()) {\n      if (element) {\n        this.registerElement(idx, element);\n      }\n    }\n\n    renderedRefs.clear();\n  }\n\n  get dataSize() {\n    return this._store.length;\n  }\n}\n","/**\n * @fileoverview VirtualizedList Vue component.\n * @license MIT\n * @author Alexandr Kalabin\n */\n\n<script setup lang=\"ts\" generic=\"T\">\nimport { type Ref } from 'vue';\nimport { onMounted, onUpdated, ref } from 'vue';\nimport { LayoutVirtual, DynamicListLayout } from 'layout-virtual/core';\nimport VueRenderer, { type ListItemProps } from './VueRenderer';\n\nexport interface VirtualizedListVueProps<T> {\n  scrollerRef?: Ref<HTMLElement>;\n  overscanHeight?: number; \n  data: T[];\n}\n\n// const slots = defineSlots<{ renderItem(props: ListItemProps<T>): any; }>();\nconst props = defineProps<VirtualizedListVueProps<T>>();\nconst { overscanHeight = 200, data, scrollerRef } = props;\nconst containerRef = scrollerRef || ref<HTMLDivElement>();\nconst scrollHeightFillerRef = ref<HTMLDivElement>();\nconst viewportContainerRef = ref<HTMLDivElement>();\nconst scrollCanvasRef = ref<HTMLDivElement>();\nconst topSpacerRef = ref<HTMLDivElement>();\nconst contentLayerRef = ref<HTMLDivElement>();\nconst bottomSpacerRef = ref<HTMLDivElement>();\nconst visibleItems = ref<ListItemProps<T>[]>();\nconst renderedRangeRefPool = new Map<number, Ref<HTMLElement | undefined>>();\n// const renderer = ref<VueRenderer | undefined>();\nlet renderer: VueRenderer<T> | undefined;\nconst setVisibleItems = (items: ListItemProps<T>[]) => { console.log('setVisibleItems:', items); visibleItems.value = items; };\nconst getRef = (index: number) => renderedRangeRefPool.get(index) || renderedRangeRefPool.set(index, ref()).get(index);\n\nonMounted(() => {\n  // renderer.value = new VueRenderer({\n  renderer = new VueRenderer({\n    container: containerRef.value!,\n    scrollHeightFiller: scrollHeightFillerRef.value!,\n    viewportContainer: viewportContainerRef.value!,\n    scrollCanvas: scrollCanvasRef.value!,\n    topSpacer: topSpacerRef.value!,\n    contentLayer: contentLayerRef.value!,\n    bottomSpacer: bottomSpacerRef.value!,\n    itemsSetter: setVisibleItems,\n  });\n\n  const layout = new DynamicListLayout({ overscanHeight, renderer });\n  const list = new LayoutVirtual({ layout });\n\n  list.setData(data);\n});\n\nonUpdated(() => {\n  renderer?.commit(renderedRangeRefPool);\n});\n\n</script>\n\n<template>\n  <Teleport v-if=\"scrollerRef\" to=\"scrollerRef\">\n    <div ref=\"scrollHeightFillerRef\"></div>\n    <div ref=\"viewportContainerRef\">\n      <div ref=\"scrollCanvasRef\">\n        <div ref=\"topSpacerRef\"></div>\n        <div ref=\"contentLayerRef\">\n          <template v-for=\"item in visibleItems\" :key=\"item.index\" >\n            <slot name=\"renderItem\" :data=\"item.data\" :index=\"item.index\" :ref=\"getRef(item.index)\" />\n          </template>\n        </div>\n        <div ref=\"bottomSpacerRef\"></div>\n      </div>\n    </div>\n  </Teleport>\n\n  <div v-else ref=\"containerRef\">\n    <div ref=\"scrollHeightFillerRef\"></div>\n    <div ref=\"viewportContainerRef\">\n      <div ref=\"scrollCanvasRef\">\n        <div ref=\"topSpacerRef\"></div>\n        <div ref=\"contentLayerRef\">\n          <template v-for=\"item in visibleItems\" :key=\"item.index\" >\n            <slot name=\"renderItem\" :data=\"item.data\" :index=\"item.index\" :ref=\"getRef(item.index)\" />\n          </template>\n        </div>\n        <div ref=\"bottomSpacerRef\"></div>\n      </div>\n    </div>\n  </div>\n</template>\n\n"],"names":["VueRenderer","BaseRenderer","_store","_itemsSetter","_listItems","constructor","opts","super","this","itemsSetter","renderRange","startIndex","endIndex","direction","store","listItems","itemsToAdd","index","data","push","concat","removeRange","removal","removedItemsCount","itemsToRemove","length","slice","clear","setData","setRenderItem","flush","nextTick","commit","renderedRefs","idx","value","element","entries","registerElement","dataSize","props","__props","overscanHeight","scrollerRef","containerRef","ref","scrollHeightFillerRef","viewportContainerRef","scrollCanvasRef","topSpacerRef","contentLayerRef","bottomSpacerRef","visibleItems","renderedRangeRefPool","Map","renderer","setVisibleItems","items","console","log","getRef","get","set","onMounted","container","scrollHeightFiller","viewportContainer","scrollCanvas","topSpacer","contentLayer","bottomSpacer","layout","DynamicListLayout","LayoutVirtual","onUpdated","_unref","_createBlock","_Teleport","to","_createElementVNode","_createElementBlock","_Fragment","_renderList","item","_renderSlot","_ctx","$slots","key"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-layout-virtual",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "Vue virtual scrolling component for responsive lists and grids with dynamic item sizes.",
   "keywords": [
     "virtual",
@@ -43,7 +43,7 @@
     "prepublishOnly": "npm run build"
   },
   "dependencies": {
-    "layout-virtual": "^0.1.0"
+    "layout-virtual": "^0.1.1"
   },
   "peerDependencies": {
     "vue": "^3.5.34"