vue-layout-virtual 0.2.0 → 0.2.2

package/dist/index.js

@@ -1,2 +1,2 @@
-import{nextTick as e,defineComponent as r,ref as t,watch as s,onMounted as l,onUpdated as o,openBlock as n,createElementBlock as a,Fragment as i,unref as f,createBlock as c,resolveDynamicComponent as u,normalizeClass as y,createCommentVNode as d,Teleport as p,createElementVNode as v,renderList as h,renderSlot as _}from"vue";import{BaseRenderer as k,DynamicListLayout as m,LayoutVirtual as R}from"layout-virtual/core";class C extends k{t=[];l;o=[];constructor(e){super(e),this.l=e.itemsSetter}renderRange(e,r,t){const s=this.t,l=this.o,o=[];for(let n=e;n<=r;n++){const e=s[n];e&&o.push({data:e,index:n})}this.o="down"===t?l.concat(o):"up"===t?o.concat(l):this.o}removeRange(e,r,t){const s=super.removeRange(e,r),l=s.itemsToRemove.length;return l&&(this.o="down"===t?this.o.slice(l):"up"===t?this.o.slice(0,-l):this.o),s}clear(){super.clear(),this.o=[],this.l(this.o)}setData(e){this.t=e}setRenderItem(){}flush(){return this.l(this.o),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 S=/* @__PURE__ */r({i:"VueLayoutVirtual",props:{scrollerRef:{},overscanHeight:{},data:{},scrollerClass:{type:[Boolean,null,String,Object,Array]},viewportClass:{type:[Boolean,null,String,Object,Array]},contentLayerClass:{type:[Boolean,null,String,Object,Array]}},setup(e){const r=e,{overscanHeight:k=200,data:S,scrollerRef:g}=r,{scrollerClass:w,viewportClass:b,contentLayerClass:H}=r,x=t(),L=t(),I=t(),j=t(),A=t(),B=t(),F=t(),O=t(),V=/* @__PURE__ */new Map,z=e=>{console.log("setVisibleItems:",e),O.value=e},D=e=>V.get(e)||V.set(e,t()).get(e),M=t();let q;return s(M,()=>{const e=g?.value;e&&e.classList.add(M?.value?.className||"")}),l(()=>{q=new C({container:g?.value||x.value,scrollHeightFiller:L.value,viewportContainer:I.value,scrollCanvas:j.value,topSpacer:A.value,contentLayer:B.value,bottomSpacer:F.value,itemsSetter:z});const e=new m({overscanHeight:k,renderer:q});new R({layout:e}).setData(S)}),o(()=>{q?.commit(V)}),(e,r)=>(n(),a(i,null,[f(g)?(n(),c(u("template"),{key:0,ref_key:"externalScrollerClassHolder",ref:M,class:y(f(w))},null,8,["class"])):d("",!0),f(g)?(n(),c(p,{key:1,to:"scrollerRef"},[v("div",{ref_key:"scrollHeightFillerRef",ref:L},null,512),v("div",{ref_key:"viewportContainerRef",ref:I,class:y(f(b))},[v("div",{ref_key:"scrollCanvasRef",ref:j},[v("div",{ref_key:"topSpacerRef",ref:A},null,512),v("div",{ref_key:"contentLayerRef",ref:B,class:y(f(H))},[(n(!0),a(i,null,h(O.value,r=>_(e.$slots,"renderItem",{key:r.index,data:r.data,index:r.index,ref_for:!0,ref:D(r.index)})),128))],2),v("div",{ref_key:"bottomSpacerRef",ref:F},null,512)],512)],2)])):(n(),a("div",{key:2,ref_key:"containerRef",ref:x,class:y(f(w))},[v("div",{ref_key:"scrollHeightFillerRef",ref:L},null,512),v("div",{ref_key:"viewportContainerRef",ref:I,class:y(f(b))},[v("div",{ref_key:"scrollCanvasRef",ref:j},[v("div",{ref_key:"topSpacerRef",ref:A},null,512),v("div",{ref_key:"contentLayerRef",ref:B,class:y(f(H))},[(n(!0),a(i,null,h(O.value,r=>_(e.$slots,"renderItem",{key:r.index,data:r.data,index:r.index,ref_for:!0,ref:D(r.index)})),128))],2),v("div",{ref_key:"bottomSpacerRef",ref:F},null,512)],512)],2)],2))],64))}});export{S as default};
+import{nextTick as k,defineComponent as A,ref as B,watch as F,onMounted as O,onUpdated as V,openBlock as M,createElementBlock as q,Fragment as R,unref as E,createBlock as G,resolveDynamicComponent as J,normalizeClass as K,createCommentVNode as Q,Teleport as T,createElementVNode as U,renderList as W,renderSlot as X}from"vue";import{BaseRenderer as t,DynamicListLayout as b,LayoutVirtual as j}from"layout-virtual/core";class Y extends t{o=[];ee;re=[];constructor(e){super(e),this.ee=e.itemsSetter}renderRange(e,r,t){const l=this.o,s=this.re,n=[];for(let o=e;o<=r;o++){const e=l[o];e&&n.push({data:e,index:o})}this.re="down"===t?s.concat(n):"up"===t?n.concat(s):this.re}removeRange(e,r,t){const l=super.removeRange(e,r),s=l.itemsToRemove.length;return s&&(this.re="down"===t?this.re.slice(s):"up"===t?this.re.slice(0,-s):this.re),l}clear(){super.clear(),this.re=[],this.ee(this.re)}setData(e){this.o=e}setRenderItem(){}flush(){return this.ee(this.re),k()}commit(e){for(const[r,{value:t}]of e.entries())t&&this.registerElement(r,t);e.clear()}get dataSize(){return this.o.length}}const Z=/* @__PURE__ */A({le:"VueLayoutVirtual",props:{scrollerRef:{},overscanHeight:{},data:{},scrollerClass:{type:[Boolean,null,String,Object,Array]},viewportClass:{type:[Boolean,null,String,Object,Array]},contentLayerClass:{type:[Boolean,null,String,Object,Array]}},setup(e){const r=e,{overscanHeight:t=200,data:l,scrollerRef:s}=r,{scrollerClass:n,viewportClass:o,contentLayerClass:a}=r,i=B(),f=B(),c=B(),u=B(),y=B(),d=B(),p=B(),v=B(),h=/* @__PURE__ */new Map,_=e=>{v.value=e},k=e=>h.get(e)||h.set(e,B()).get(e),m=B();let C;return F(m,()=>{const e=s?.value;e&&e.classList.add(m?.value?.className||"")}),O(()=>{C=new Y({container:s?.value||i.value,scrollHeightFiller:f.value,viewportContainer:c.value,scrollCanvas:u.value,topSpacer:y.value,contentLayer:d.value,bottomSpacer:p.value,itemsSetter:_});const e=new b({overscanHeight:t,renderer:C});new j({layout:e}).setData(l)}),V(()=>{C?.commit(h)}),(e,r)=>(M(),q(R,null,[E(s)?(M(),G(J("template"),{key:0,ref_key:"externalScrollerClassHolder",ref:m,class:K(E(n))},null,8,["class"])):Q("",!0),E(s)?(M(),G(T,{key:1,to:"scrollerRef"},[U("div",{ref_key:"scrollHeightFillerRef",ref:f},null,512),U("div",{ref_key:"viewportContainerRef",ref:c,class:K(E(o))},[U("div",{ref_key:"scrollCanvasRef",ref:u},[U("div",{ref_key:"topSpacerRef",ref:y},null,512),U("div",{ref_key:"contentLayerRef",ref:d,class:K(E(a))},[(M(!0),q(R,null,W(v.value,r=>X(e.$slots,"renderItem",{key:r.index,data:r.data,index:r.index,ref_for:!0,ref:k(r.index)})),128))],2),U("div",{ref_key:"bottomSpacerRef",ref:p},null,512)],512)],2)])):(M(),q("div",{key:2,ref_key:"containerRef",ref:i,class:K(E(n))},[U("div",{ref_key:"scrollHeightFillerRef",ref:f},null,512),U("div",{ref_key:"viewportContainerRef",ref:c,class:K(E(o))},[U("div",{ref_key:"scrollCanvasRef",ref:u},[U("div",{ref_key:"topSpacerRef",ref:y},null,512),U("div",{ref_key:"contentLayerRef",ref:d,class:K(E(a))},[(M(!0),q(R,null,W(v.value,r=>X(e.$slots,"renderItem",{key:r.index,data:r.data,index:r.index,ref_for:!0,ref:k(r.index)})),128))],2),U("div",{ref_key:"bottomSpacerRef",ref:p},null,512)],512)],2)],2))],64))}});export{Z as default};
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +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 } from 'layout-virtual/types';\nimport type { ListItemProps, VueRendererOptions } from './types';\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, watch } from 'vue';\nimport { LayoutVirtual, DynamicListLayout } from 'layout-virtual/core';\nimport VueRenderer from './VueRenderer';\nimport type { VirtualizedListVueProps, ListItemProps } from './types';\n\nconst props = defineProps<VirtualizedListVueProps<T>>();\nconst { overscanHeight = 200, data, scrollerRef } = props;\nconst { scrollerClass, viewportClass, contentLayerClass } = props;\nconst containerRef = 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>>();\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);\nconst externalScrollerClassHolder = ref<HTMLElement>();\n\nwatch(externalScrollerClassHolder, () => {\n  const scroller = scrollerRef?.value;\n\n  if (scroller) {\n    scroller.classList.add(externalScrollerClassHolder?.value?.className || '');\n  }\n});\n\nlet renderer: VueRenderer<T> | undefined;\n\nonMounted(() => {\n  renderer = new VueRenderer({\n    container: scrollerRef?.value || 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  <component v-if=\"scrollerRef\" ref=\"externalScrollerClassHolder\" is=\"template\" :class=\"scrollerClass\"></component>\n  <Teleport v-if=\"scrollerRef\" to=\"scrollerRef\">\n    <div ref=\"scrollHeightFillerRef\"></div>\n    <div ref=\"viewportContainerRef\" :class=\"viewportClass\">\n      <div ref=\"scrollCanvasRef\">\n        <div ref=\"topSpacerRef\"></div>\n        <div ref=\"contentLayerRef\" :class=\"contentLayerClass\">\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\" :class=\"scrollerClass\">\n    <div ref=\"scrollHeightFillerRef\"></div>\n    <div ref=\"viewportContainerRef\" :class=\"viewportClass\">\n      <div ref=\"scrollCanvasRef\">\n        <div ref=\"topSpacerRef\"></div>\n        <div ref=\"contentLayerRef\" :class=\"contentLayerClass\">\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","scrollerClass","viewportClass","contentLayerClass","containerRef","ref","scrollHeightFillerRef","viewportContainerRef","scrollCanvasRef","topSpacerRef","contentLayerRef","bottomSpacerRef","visibleItems","renderedRangeRefPool","Map","setVisibleItems","items","console","log","getRef","get","set","externalScrollerClassHolder","renderer","watch","scroller","classList","add","className","onMounted","container","scrollHeightFiller","viewportContainer","scrollCanvas","topSpacer","contentLayer","bottomSpacer","layout","DynamicListLayout","LayoutVirtual","onUpdated","_unref","_createBlock","_resolveDynamicComponent","class","_Teleport","to","_createElementVNode","_createElementBlock","_Fragment","_renderList","item","_renderSlot","_ctx","$slots","key"],"mappings":"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"}
+{"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 } from 'layout-virtual/types';\nimport type { ListItemProps, VueRendererOptions } from './types';\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, watch } from 'vue';\nimport { LayoutVirtual, DynamicListLayout } from 'layout-virtual/core';\nimport VueRenderer from './VueRenderer';\nimport type { VirtualizedListVueProps, ListItemProps } from './types';\n\nconst props = defineProps<VirtualizedListVueProps<T>>();\nconst { overscanHeight = 200, data, scrollerRef } = props;\nconst { scrollerClass, viewportClass, contentLayerClass } = props;\nconst containerRef = 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>>();\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);\nconst externalScrollerClassHolder = ref<HTMLElement>();\n\nwatch(externalScrollerClassHolder, () => {\n  const scroller = scrollerRef?.value;\n\n  if (scroller) {\n    scroller.classList.add(externalScrollerClassHolder?.value?.className || '');\n  }\n});\n\nlet renderer: VueRenderer<T> | undefined;\n\nonMounted(() => {\n  renderer = new VueRenderer({\n    container: scrollerRef?.value || 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  <component v-if=\"scrollerRef\" ref=\"externalScrollerClassHolder\" is=\"template\" :class=\"scrollerClass\"></component>\n  <Teleport v-if=\"scrollerRef\" to=\"scrollerRef\">\n    <div ref=\"scrollHeightFillerRef\"></div>\n    <div ref=\"viewportContainerRef\" :class=\"viewportClass\">\n      <div ref=\"scrollCanvasRef\">\n        <div ref=\"topSpacerRef\"></div>\n        <div ref=\"contentLayerRef\" :class=\"contentLayerClass\">\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\" :class=\"scrollerClass\">\n    <div ref=\"scrollHeightFillerRef\"></div>\n    <div ref=\"viewportContainerRef\" :class=\"viewportClass\">\n      <div ref=\"scrollCanvasRef\">\n        <div ref=\"topSpacerRef\"></div>\n        <div ref=\"contentLayerRef\" :class=\"contentLayerClass\">\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","scrollerClass","viewportClass","contentLayerClass","containerRef","ref","scrollHeightFillerRef","viewportContainerRef","scrollCanvasRef","topSpacerRef","contentLayerRef","bottomSpacerRef","visibleItems","renderedRangeRefPool","Map","setVisibleItems","items","getRef","get","set","externalScrollerClassHolder","renderer","watch","scroller","classList","add","className","onMounted","container","scrollHeightFiller","viewportContainer","scrollCanvas","topSpacer","contentLayer","bottomSpacer","layout","DynamicListLayout","LayoutVirtual","onUpdated","_unref","_createBlock","_resolveDynamicComponent","class","_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.2.0",
+  "version": "0.2.2",
   "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.3.0"
+    "layout-virtual": "^0.3.2"
   },
   "peerDependencies": {
     "vue": "^3.5.34"