vft 0.0.374 → 0.0.375

package/lib/components/virtual-list/builders/build-grid.cjs

@@ -1 +1,522 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),ve=require("@vueuse/core"),T=require("@vft/utils"),ge=require("../../../utils/dom/scroll.cjs");require("../../config-provider/hooks/use-global-config.cjs");require("lodash-es");const xe=require("../../../hooks/use-namespace/index.cjs");require("../../../hooks/use-model-toggle/index.cjs");require("@popperjs/core");require("../../../hooks/use-z-index/index.cjs");const H=require("../components/scrollbar.cjs"),Re=require("../hooks/use-grid-wheel.cjs"),Le=require("../hooks/use-cache.cjs"),Ee=require("../props.cjs"),v=require("../utils.cjs"),f=require("../defaults.cjs"),be=({name:B,clearCache:A,getColumnPosition:W,getColumnStartIndexForOffset:U,getColumnStopIndexForStartIndex:K,getEstimatedTotalHeight:q,getEstimatedTotalWidth:O,getColumnOffset:P,getRowOffset:X,getRowPosition:Y,getRowStartIndexForOffset:j,getRowStopIndexForStartIndex:J,initCache:Q,injectToInstance:Z,validateProps:p})=>e.defineComponent({name:B??"ElVirtualList",props:Ee.virtualizedGridProps,emits:[f.ITEM_RENDER_EVT,f.SCROLL_EVT],setup(l,{emit:I,expose:ee,slots:te}){const b=xe.useNamespace("vl");p(l);const C=e.getCurrentInstance(),w=e.ref(Q(l,C));Z?.(C,w);const L=e.ref(),F=e.ref(),N=e.ref(),k=e.ref(null),u=e.ref({isScrolling:!1,scrollLeft:T.isNumber(l.initScrollLeft)?l.initScrollLeft:0,scrollTop:T.isNumber(l.initScrollTop)?l.initScrollTop:0,updateRequested:!1,xAxisScrollDir:f.FORWARD,yAxisScrollDir:f.FORWARD}),D=Le.useCache(),M=e.computed(()=>Number.parseInt(`${l.height}`,10)),y=e.computed(()=>Number.parseInt(`${l.width}`,10)),$=e.computed(()=>{const{totalColumn:r,totalRow:t,columnCache:n}=l,{isScrolling:o,xAxisScrollDir:c,scrollLeft:s}=e.unref(u);if(r===0||t===0)return[0,0,0,0];const i=U(l,s,e.unref(w)),a=K(l,i,s,e.unref(w)),d=!o||c===f.BACKWARD?Math.max(1,n):1,h=!o||c===f.FORWARD?Math.max(1,n):1;return[Math.max(0,i-d),Math.max(0,Math.min(r-1,a+h)),i,a]}),G=e.computed(()=>{const{totalColumn:r,totalRow:t,rowCache:n}=l,{isScrolling:o,yAxisScrollDir:c,scrollTop:s}=e.unref(u);if(r===0||t===0)return[0,0,0,0];const i=j(l,s,e.unref(w)),a=J(l,i,s,e.unref(w)),d=!o||c===f.BACKWARD?Math.max(1,n):1,h=!o||c===f.FORWARD?Math.max(1,n):1;return[Math.max(0,i-d),Math.max(0,Math.min(t-1,a+h)),i,a]}),x=e.computed(()=>q(l,e.unref(w))),R=e.computed(()=>O(l,e.unref(w))),le=e.computed(()=>[{position:"relative",overflow:"hidden",WebkitOverflowScrolling:"touch",willChange:"transform"},{direction:l.direction,height:T.isNumber(l.height)?`${l.height}px`:l.height,width:T.isNumber(l.width)?`${l.width}px`:l.width},l.style??{}]),re=e.computed(()=>{const r=`${e.unref(R)}px`;return{height:`${e.unref(x)}px`,pointerEvents:e.unref(u).isScrolling?"none":void 0,width:r}}),_=()=>{const{totalColumn:r,totalRow:t}=l;if(r>0&&t>0){const[a,d,h,m]=e.unref($),[S,g,we,Te]=e.unref(G);I(f.ITEM_RENDER_EVT,{columnCacheStart:a,columnCacheEnd:d,rowCacheStart:S,rowCacheEnd:g,columnVisibleStart:h,columnVisibleEnd:m,rowVisibleStart:we,rowVisibleEnd:Te})}const{scrollLeft:n,scrollTop:o,updateRequested:c,xAxisScrollDir:s,yAxisScrollDir:i}=e.unref(u);I(f.SCROLL_EVT,{xAxisScrollDir:s,scrollLeft:n,yAxisScrollDir:i,scrollTop:o,updateRequested:c})},ne=r=>{const{clientHeight:t,clientWidth:n,scrollHeight:o,scrollLeft:c,scrollTop:s,scrollWidth:i}=r.currentTarget,a=e.unref(u);if(a.scrollTop===s&&a.scrollLeft===c)return;let d=c;if(v.isRTL(l.direction))switch(v.getRTLOffsetType()){case f.RTL_OFFSET_NAG:d=-c;break;case f.RTL_OFFSET_POS_DESC:d=i-n-c;break}u.value={...a,isScrolling:!0,scrollLeft:d,scrollTop:Math.max(0,Math.min(s,o-t)),updateRequested:!0,xAxisScrollDir:v.getScrollDir(a.scrollLeft,d),yAxisScrollDir:v.getScrollDir(a.scrollTop,s)},e.nextTick(()=>V()),z(),_()},oe=(r,t)=>{const n=e.unref(M),o=(x.value-n)/t*r;E({scrollTop:Math.min(x.value-n,o)})},ce=(r,t)=>{const n=e.unref(y),o=(R.value-n)/t*r;E({scrollLeft:Math.min(R.value-n,o)})},{onWheel:se}=Re.useGridWheel({atXStartEdge:e.computed(()=>u.value.scrollLeft<=0),atXEndEdge:e.computed(()=>u.value.scrollLeft>=R.value-e.unref(y)),atYStartEdge:e.computed(()=>u.value.scrollTop<=0),atYEndEdge:e.computed(()=>u.value.scrollTop>=x.value-e.unref(M))},(r,t)=>{F.value?.onMouseUp?.(),N.value?.onMouseUp?.();const n=e.unref(y),o=e.unref(M);E({scrollLeft:Math.min(u.value.scrollLeft+r,R.value-n),scrollTop:Math.min(u.value.scrollTop+t,x.value-o)})});ve.useEventListener(L,"wheel",se,{passive:!1});const E=({scrollLeft:r=u.value.scrollLeft,scrollTop:t=u.value.scrollTop})=>{r=Math.max(r,0),t=Math.max(t,0);const n=e.unref(u);t===n.scrollTop&&r===n.scrollLeft||(u.value={...n,xAxisScrollDir:v.getScrollDir(n.scrollLeft,r),yAxisScrollDir:v.getScrollDir(n.scrollTop,t),scrollLeft:r,scrollTop:t,updateRequested:!0},e.nextTick(()=>V()),z(),_())},ie=(r=0,t=0,n=f.AUTO_ALIGNMENT)=>{const o=e.unref(u);t=Math.max(0,Math.min(t,l.totalColumn-1)),r=Math.max(0,Math.min(r,l.totalRow-1));const c=ge.getScrollBarWidth(b.namespace.value),s=e.unref(w),i=q(l,s),a=O(l,s);E({scrollLeft:P(l,t,n,o.scrollLeft,s,a>l.width?c:0),scrollTop:X(l,r,n,o.scrollTop,s,i>l.height?c:0)})},ae=(r,t)=>{const{columnWidth:n,direction:o,rowHeight:c}=l,s=D.value(A&&n,A&&c,A&&o),i=`${r},${t}`;if(T.hasOwn(s,i))return s[i];{const[,a]=W(l,t,e.unref(w)),d=e.unref(w),h=v.isRTL(o),[m,S]=Y(l,r,d),[g]=W(l,t,d);return s[i]={position:"absolute",left:h?void 0:`${a}px`,right:h?`${a}px`:void 0,top:`${S}px`,height:`${m}px`,width:`${g}px`},s[i]}},V=()=>{u.value.isScrolling=!1,e.nextTick(()=>{D.value(-1,null,null)})};e.onMounted(()=>{if(!T.isClient)return;const{initScrollLeft:r,initScrollTop:t}=l,n=e.unref(L);n&&(T.isNumber(r)&&(n.scrollLeft=r),T.isNumber(t)&&(n.scrollTop=t)),_()});const z=()=>{const{direction:r}=l,{scrollLeft:t,scrollTop:n,updateRequested:o}=e.unref(u),c=e.unref(L);if(o&&c){if(r===f.RTL)switch(v.getRTLOffsetType()){case f.RTL_OFFSET_NAG:{c.scrollLeft=-t;break}case f.RTL_OFFSET_POS_ASC:{c.scrollLeft=t;break}default:{const{clientWidth:s,scrollWidth:i}=c;c.scrollLeft=i-s-t;break}}else c.scrollLeft=Math.max(0,t);c.scrollTop=Math.max(0,n)}},{resetAfterColumnIndex:ue,resetAfterRowIndex:de,resetAfter:fe}=C.proxy;ee({windowRef:L,innerRef:k,getItemStyleCache:D,scrollTo:E,scrollToItem:ie,states:u,resetAfterColumnIndex:ue,resetAfterRowIndex:de,resetAfter:fe});const he=()=>{const{scrollbarAlwaysOn:r,scrollbarStartGap:t,scrollbarEndGap:n,totalColumn:o,totalRow:c}=l,s=e.unref(y),i=e.unref(M),a=e.unref(R),d=e.unref(x),{scrollLeft:h,scrollTop:m}=e.unref(u),S=e.h(H.default,{ref:F,alwaysOn:r,startGap:t,endGap:n,class:b.e("horizontal"),clientSize:s,layout:"horizontal",onScroll:ce,ratio:s*100/a,scrollFrom:h/(a-s),total:c,visible:!0}),g=e.h(H.default,{ref:N,alwaysOn:r,startGap:t,endGap:n,class:b.e("vertical"),clientSize:i,layout:"vertical",onScroll:oe,ratio:i*100/d,scrollFrom:m/(d-i),total:o,visible:!0});return{horizontalScrollbar:S,verticalScrollbar:g}},me=()=>{const[r,t]=e.unref($),[n,o]=e.unref(G),{data:c,totalColumn:s,totalRow:i,useIsScrolling:a,itemKey:d}=l,h=[];if(i>0&&s>0)for(let m=n;m<=o;m++)for(let S=r;S<=t;S++){const g=d({columnIndex:S,data:c,rowIndex:m});h.push(e.h(e.Fragment,{key:g},te.default?.({columnIndex:S,data:c,isScrolling:a?e.unref(u).isScrolling:void 0,style:ae(m,S),rowIndex:m})))}return h},Se=()=>{const r=e.resolveDynamicComponent(l.innerElement),t=me();return[e.h(r,{style:e.unref(re),ref:k},T.isString(r)?t:{default:()=>t})]};return()=>{const r=e.resolveDynamicComponent(l.containerElement),{horizontalScrollbar:t,verticalScrollbar:n}=he(),o=Se();return e.h("div",{key:0,class:b.e("wrapper"),role:l.role},[e.h(r,{class:l.className,style:e.unref(le),onScroll:ne,ref:L},T.isString(r)?o:{default:()=>o}),t,n])}}});exports.default=be;
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue = require("vue");
+const core = require("@vueuse/core");
+const utils = require("@vft/utils");
+const scroll = require("../../../utils/dom/scroll.cjs");
+require("../../config-provider/hooks/use-global-config.cjs");
+require("lodash-es");
+const index = require("../../../hooks/use-namespace/index.cjs");
+require("../../../hooks/use-model-toggle/index.cjs");
+require("@popperjs/core");
+require("../../../hooks/use-z-index/index.cjs");
+const scrollbar = require("../components/scrollbar.cjs");
+const useGridWheel = require("../hooks/use-grid-wheel.cjs");
+const useCache = require("../hooks/use-cache.cjs");
+const props = require("../props.cjs");
+const utils$1 = require("../utils.cjs");
+const defaults = require("../defaults.cjs");
+const createGrid = ({
+  name,
+  clearCache,
+  getColumnPosition,
+  getColumnStartIndexForOffset,
+  getColumnStopIndexForStartIndex,
+  getEstimatedTotalHeight,
+  getEstimatedTotalWidth,
+  getColumnOffset,
+  getRowOffset,
+  getRowPosition,
+  getRowStartIndexForOffset,
+  getRowStopIndexForStartIndex,
+  initCache,
+  injectToInstance,
+  validateProps
+}) => {
+  return vue.defineComponent({
+    name: name ?? "ElVirtualList",
+    props: props.virtualizedGridProps,
+    emits: [defaults.ITEM_RENDER_EVT, defaults.SCROLL_EVT],
+    setup(props2, { emit, expose, slots }) {
+      const ns = index.useNamespace("vl");
+      validateProps(props2);
+      const instance = vue.getCurrentInstance();
+      const cache = vue.ref(initCache(props2, instance));
+      injectToInstance?.(instance, cache);
+      const windowRef = vue.ref();
+      const hScrollbar = vue.ref();
+      const vScrollbar = vue.ref();
+      const innerRef = vue.ref(null);
+      const states = vue.ref({
+        isScrolling: false,
+        scrollLeft: utils.isNumber(props2.initScrollLeft) ? props2.initScrollLeft : 0,
+        scrollTop: utils.isNumber(props2.initScrollTop) ? props2.initScrollTop : 0,
+        updateRequested: false,
+        xAxisScrollDir: defaults.FORWARD,
+        yAxisScrollDir: defaults.FORWARD
+      });
+      const getItemStyleCache = useCache.useCache();
+      const parsedHeight = vue.computed(
+        () => Number.parseInt(`${props2.height}`, 10)
+      );
+      const parsedWidth = vue.computed(() => Number.parseInt(`${props2.width}`, 10));
+      const columnsToRender = vue.computed(() => {
+        const { totalColumn, totalRow, columnCache } = props2;
+        const { isScrolling, xAxisScrollDir, scrollLeft } = vue.unref(states);
+        if (totalColumn === 0 || totalRow === 0) {
+          return [0, 0, 0, 0];
+        }
+        const startIndex = getColumnStartIndexForOffset(
+          props2,
+          scrollLeft,
+          vue.unref(cache)
+        );
+        const stopIndex = getColumnStopIndexForStartIndex(
+          props2,
+          startIndex,
+          scrollLeft,
+          vue.unref(cache)
+        );
+        const cacheBackward = !isScrolling || xAxisScrollDir === defaults.BACKWARD ? Math.max(1, columnCache) : 1;
+        const cacheForward = !isScrolling || xAxisScrollDir === defaults.FORWARD ? Math.max(1, columnCache) : 1;
+        return [
+          Math.max(0, startIndex - cacheBackward),
+          Math.max(0, Math.min(totalColumn - 1, stopIndex + cacheForward)),
+          startIndex,
+          stopIndex
+        ];
+      });
+      const rowsToRender = vue.computed(() => {
+        const { totalColumn, totalRow, rowCache } = props2;
+        const { isScrolling, yAxisScrollDir, scrollTop } = vue.unref(states);
+        if (totalColumn === 0 || totalRow === 0) {
+          return [0, 0, 0, 0];
+        }
+        const startIndex = getRowStartIndexForOffset(
+          props2,
+          scrollTop,
+          vue.unref(cache)
+        );
+        const stopIndex = getRowStopIndexForStartIndex(
+          props2,
+          startIndex,
+          scrollTop,
+          vue.unref(cache)
+        );
+        const cacheBackward = !isScrolling || yAxisScrollDir === defaults.BACKWARD ? Math.max(1, rowCache) : 1;
+        const cacheForward = !isScrolling || yAxisScrollDir === defaults.FORWARD ? Math.max(1, rowCache) : 1;
+        return [
+          Math.max(0, startIndex - cacheBackward),
+          Math.max(0, Math.min(totalRow - 1, stopIndex + cacheForward)),
+          startIndex,
+          stopIndex
+        ];
+      });
+      const estimatedTotalHeight = vue.computed(
+        () => getEstimatedTotalHeight(props2, vue.unref(cache))
+      );
+      const estimatedTotalWidth = vue.computed(
+        () => getEstimatedTotalWidth(props2, vue.unref(cache))
+      );
+      const windowStyle = vue.computed(() => [
+        {
+          position: "relative",
+          overflow: "hidden",
+          WebkitOverflowScrolling: "touch",
+          willChange: "transform"
+        },
+        {
+          direction: props2.direction,
+          height: utils.isNumber(props2.height) ? `${props2.height}px` : props2.height,
+          width: utils.isNumber(props2.width) ? `${props2.width}px` : props2.width
+        },
+        props2.style ?? {}
+      ]);
+      const innerStyle = vue.computed(() => {
+        const width = `${vue.unref(estimatedTotalWidth)}px`;
+        const height = `${vue.unref(estimatedTotalHeight)}px`;
+        return {
+          height,
+          pointerEvents: vue.unref(states).isScrolling ? "none" : void 0,
+          width
+        };
+      });
+      const emitEvents = () => {
+        const { totalColumn, totalRow } = props2;
+        if (totalColumn > 0 && totalRow > 0) {
+          const [
+            columnCacheStart,
+            columnCacheEnd,
+            columnVisibleStart,
+            columnVisibleEnd
+          ] = vue.unref(columnsToRender);
+          const [rowCacheStart, rowCacheEnd, rowVisibleStart, rowVisibleEnd] = vue.unref(rowsToRender);
+          emit(defaults.ITEM_RENDER_EVT, {
+            columnCacheStart,
+            columnCacheEnd,
+            rowCacheStart,
+            rowCacheEnd,
+            columnVisibleStart,
+            columnVisibleEnd,
+            rowVisibleStart,
+            rowVisibleEnd
+          });
+        }
+        const {
+          scrollLeft,
+          scrollTop,
+          updateRequested,
+          xAxisScrollDir,
+          yAxisScrollDir
+        } = vue.unref(states);
+        emit(defaults.SCROLL_EVT, {
+          xAxisScrollDir,
+          scrollLeft,
+          yAxisScrollDir,
+          scrollTop,
+          updateRequested
+        });
+      };
+      const onScroll = (e) => {
+        const {
+          clientHeight,
+          clientWidth,
+          scrollHeight,
+          scrollLeft,
+          scrollTop,
+          scrollWidth
+        } = e.currentTarget;
+        const _states = vue.unref(states);
+        if (_states.scrollTop === scrollTop && _states.scrollLeft === scrollLeft) {
+          return;
+        }
+        let _scrollLeft = scrollLeft;
+        if (utils$1.isRTL(props2.direction)) {
+          switch (utils$1.getRTLOffsetType()) {
+            case defaults.RTL_OFFSET_NAG:
+              _scrollLeft = -scrollLeft;
+              break;
+            case defaults.RTL_OFFSET_POS_DESC:
+              _scrollLeft = scrollWidth - clientWidth - scrollLeft;
+              break;
+          }
+        }
+        states.value = {
+          ..._states,
+          isScrolling: true,
+          scrollLeft: _scrollLeft,
+          scrollTop: Math.max(
+            0,
+            Math.min(scrollTop, scrollHeight - clientHeight)
+          ),
+          updateRequested: true,
+          xAxisScrollDir: utils$1.getScrollDir(_states.scrollLeft, _scrollLeft),
+          yAxisScrollDir: utils$1.getScrollDir(_states.scrollTop, scrollTop)
+        };
+        vue.nextTick(() => resetIsScrolling());
+        onUpdated();
+        emitEvents();
+      };
+      const onVerticalScroll = (distance, totalSteps) => {
+        const height = vue.unref(parsedHeight);
+        const offset = (estimatedTotalHeight.value - height) / totalSteps * distance;
+        scrollTo({
+          scrollTop: Math.min(estimatedTotalHeight.value - height, offset)
+        });
+      };
+      const onHorizontalScroll = (distance, totalSteps) => {
+        const width = vue.unref(parsedWidth);
+        const offset = (estimatedTotalWidth.value - width) / totalSteps * distance;
+        scrollTo({
+          scrollLeft: Math.min(estimatedTotalWidth.value - width, offset)
+        });
+      };
+      const { onWheel } = useGridWheel.useGridWheel(
+        {
+          atXStartEdge: vue.computed(() => states.value.scrollLeft <= 0),
+          atXEndEdge: vue.computed(
+            () => states.value.scrollLeft >= estimatedTotalWidth.value - vue.unref(parsedWidth)
+          ),
+          atYStartEdge: vue.computed(() => states.value.scrollTop <= 0),
+          atYEndEdge: vue.computed(
+            () => states.value.scrollTop >= estimatedTotalHeight.value - vue.unref(parsedHeight)
+          )
+        },
+        (x, y) => {
+          hScrollbar.value?.onMouseUp?.();
+          vScrollbar.value?.onMouseUp?.();
+          const width = vue.unref(parsedWidth);
+          const height = vue.unref(parsedHeight);
+          scrollTo({
+            scrollLeft: Math.min(
+              states.value.scrollLeft + x,
+              estimatedTotalWidth.value - width
+            ),
+            scrollTop: Math.min(
+              states.value.scrollTop + y,
+              estimatedTotalHeight.value - height
+            )
+          });
+        }
+      );
+      core.useEventListener(windowRef, "wheel", onWheel, {
+        passive: false
+      });
+      const scrollTo = ({
+        scrollLeft = states.value.scrollLeft,
+        scrollTop = states.value.scrollTop
+      }) => {
+        scrollLeft = Math.max(scrollLeft, 0);
+        scrollTop = Math.max(scrollTop, 0);
+        const _states = vue.unref(states);
+        if (scrollTop === _states.scrollTop && scrollLeft === _states.scrollLeft) {
+          return;
+        }
+        states.value = {
+          ..._states,
+          xAxisScrollDir: utils$1.getScrollDir(_states.scrollLeft, scrollLeft),
+          yAxisScrollDir: utils$1.getScrollDir(_states.scrollTop, scrollTop),
+          scrollLeft,
+          scrollTop,
+          updateRequested: true
+        };
+        vue.nextTick(() => resetIsScrolling());
+        onUpdated();
+        emitEvents();
+      };
+      const scrollToItem = (rowIndex = 0, columnIdx = 0, alignment = defaults.AUTO_ALIGNMENT) => {
+        const _states = vue.unref(states);
+        columnIdx = Math.max(0, Math.min(columnIdx, props2.totalColumn - 1));
+        rowIndex = Math.max(0, Math.min(rowIndex, props2.totalRow - 1));
+        const scrollBarWidth = scroll.getScrollBarWidth(ns.namespace.value);
+        const _cache = vue.unref(cache);
+        const estimatedHeight = getEstimatedTotalHeight(props2, _cache);
+        const estimatedWidth = getEstimatedTotalWidth(props2, _cache);
+        scrollTo({
+          scrollLeft: getColumnOffset(
+            props2,
+            columnIdx,
+            alignment,
+            _states.scrollLeft,
+            _cache,
+            estimatedWidth > props2.width ? scrollBarWidth : 0
+          ),
+          scrollTop: getRowOffset(
+            props2,
+            rowIndex,
+            alignment,
+            _states.scrollTop,
+            _cache,
+            estimatedHeight > props2.height ? scrollBarWidth : 0
+          )
+        });
+      };
+      const getItemStyle = (rowIndex, columnIndex) => {
+        const { columnWidth, direction, rowHeight } = props2;
+        const itemStyleCache = getItemStyleCache.value(
+          clearCache && columnWidth,
+          clearCache && rowHeight,
+          clearCache && direction
+        );
+        const key = `${rowIndex},${columnIndex}`;
+        if (utils.hasOwn(itemStyleCache, key)) {
+          return itemStyleCache[key];
+        } else {
+          const [, left] = getColumnPosition(props2, columnIndex, vue.unref(cache));
+          const _cache = vue.unref(cache);
+          const rtl = utils$1.isRTL(direction);
+          const [height, top] = getRowPosition(props2, rowIndex, _cache);
+          const [width] = getColumnPosition(props2, columnIndex, _cache);
+          itemStyleCache[key] = {
+            position: "absolute",
+            left: rtl ? void 0 : `${left}px`,
+            right: rtl ? `${left}px` : void 0,
+            top: `${top}px`,
+            height: `${height}px`,
+            width: `${width}px`
+          };
+          return itemStyleCache[key];
+        }
+      };
+      const resetIsScrolling = () => {
+        states.value.isScrolling = false;
+        vue.nextTick(() => {
+          getItemStyleCache.value(-1, null, null);
+        });
+      };
+      vue.onMounted(() => {
+        if (!utils.isClient) return;
+        const { initScrollLeft, initScrollTop } = props2;
+        const windowElement = vue.unref(windowRef);
+        if (windowElement) {
+          if (utils.isNumber(initScrollLeft)) {
+            windowElement.scrollLeft = initScrollLeft;
+          }
+          if (utils.isNumber(initScrollTop)) {
+            windowElement.scrollTop = initScrollTop;
+          }
+        }
+        emitEvents();
+      });
+      const onUpdated = () => {
+        const { direction } = props2;
+        const { scrollLeft, scrollTop, updateRequested } = vue.unref(states);
+        const windowElement = vue.unref(windowRef);
+        if (updateRequested && windowElement) {
+          if (direction === defaults.RTL) {
+            switch (utils$1.getRTLOffsetType()) {
+              case defaults.RTL_OFFSET_NAG: {
+                windowElement.scrollLeft = -scrollLeft;
+                break;
+              }
+              case defaults.RTL_OFFSET_POS_ASC: {
+                windowElement.scrollLeft = scrollLeft;
+                break;
+              }
+              default: {
+                const { clientWidth, scrollWidth } = windowElement;
+                windowElement.scrollLeft = scrollWidth - clientWidth - scrollLeft;
+                break;
+              }
+            }
+          } else {
+            windowElement.scrollLeft = Math.max(0, scrollLeft);
+          }
+          windowElement.scrollTop = Math.max(0, scrollTop);
+        }
+      };
+      const { resetAfterColumnIndex, resetAfterRowIndex, resetAfter } = instance.proxy;
+      expose({
+        windowRef,
+        innerRef,
+        getItemStyleCache,
+        scrollTo,
+        scrollToItem,
+        states,
+        resetAfterColumnIndex,
+        resetAfterRowIndex,
+        resetAfter
+      });
+      const renderScrollbars = () => {
+        const {
+          scrollbarAlwaysOn,
+          scrollbarStartGap,
+          scrollbarEndGap,
+          totalColumn,
+          totalRow
+        } = props2;
+        const width = vue.unref(parsedWidth);
+        const height = vue.unref(parsedHeight);
+        const estimatedWidth = vue.unref(estimatedTotalWidth);
+        const estimatedHeight = vue.unref(estimatedTotalHeight);
+        const { scrollLeft, scrollTop } = vue.unref(states);
+        const horizontalScrollbar = vue.h(scrollbar.default, {
+          ref: hScrollbar,
+          alwaysOn: scrollbarAlwaysOn,
+          startGap: scrollbarStartGap,
+          endGap: scrollbarEndGap,
+          class: ns.e("horizontal"),
+          clientSize: width,
+          layout: "horizontal",
+          onScroll: onHorizontalScroll,
+          ratio: width * 100 / estimatedWidth,
+          scrollFrom: scrollLeft / (estimatedWidth - width),
+          total: totalRow,
+          visible: true
+        });
+        const verticalScrollbar = vue.h(scrollbar.default, {
+          ref: vScrollbar,
+          alwaysOn: scrollbarAlwaysOn,
+          startGap: scrollbarStartGap,
+          endGap: scrollbarEndGap,
+          class: ns.e("vertical"),
+          clientSize: height,
+          layout: "vertical",
+          onScroll: onVerticalScroll,
+          ratio: height * 100 / estimatedHeight,
+          scrollFrom: scrollTop / (estimatedHeight - height),
+          total: totalColumn,
+          visible: true
+        });
+        return {
+          horizontalScrollbar,
+          verticalScrollbar
+        };
+      };
+      const renderItems = () => {
+        const [columnStart, columnEnd] = vue.unref(columnsToRender);
+        const [rowStart, rowEnd] = vue.unref(rowsToRender);
+        const { data, totalColumn, totalRow, useIsScrolling, itemKey } = props2;
+        const children = [];
+        if (totalRow > 0 && totalColumn > 0) {
+          for (let row = rowStart; row <= rowEnd; row++) {
+            for (let column = columnStart; column <= columnEnd; column++) {
+              const key = itemKey({ columnIndex: column, data, rowIndex: row });
+              children.push(
+                vue.h(
+                  vue.Fragment,
+                  { key },
+                  slots.default?.({
+                    columnIndex: column,
+                    data,
+                    isScrolling: useIsScrolling ? vue.unref(states).isScrolling : void 0,
+                    style: getItemStyle(row, column),
+                    rowIndex: row
+                  })
+                )
+              );
+            }
+          }
+        }
+        return children;
+      };
+      const renderInner = () => {
+        const Inner = vue.resolveDynamicComponent(props2.innerElement);
+        const children = renderItems();
+        return [
+          vue.h(
+            Inner,
+            {
+              style: vue.unref(innerStyle),
+              ref: innerRef
+            },
+            !utils.isString(Inner) ? {
+              default: () => children
+            } : children
+          )
+        ];
+      };
+      const renderWindow = () => {
+        const Container = vue.resolveDynamicComponent(
+          props2.containerElement
+        );
+        const { horizontalScrollbar, verticalScrollbar } = renderScrollbars();
+        const Inner = renderInner();
+        return vue.h(
+          "div",
+          {
+            key: 0,
+            class: ns.e("wrapper"),
+            role: props2.role
+          },
+          [
+            vue.h(
+              Container,
+              {
+                class: props2.className,
+                style: vue.unref(windowStyle),
+                onScroll,
+                ref: windowRef
+              },
+              !utils.isString(Container) ? { default: () => Inner } : Inner
+            ),
+            horizontalScrollbar,
+            verticalScrollbar
+          ]
+        );
+      };
+      return renderWindow;
+    }
+  });
+};
+exports.default = createGrid;