vft 0.0.375 → 0.0.376

package/es/components/virtual-list/builders/build-grid.js

@@ -1,522 +1,426 @@
-import { defineComponent, getCurrentInstance, ref, computed, unref, onMounted, nextTick, resolveDynamicComponent, h, Fragment } from "vue";
-import { useEventListener } from "@vueuse/core";
-import { isNumber, isClient, isString, hasOwn } from "@vft/utils";
-import { getScrollBarWidth } from "../../../utils/dom/scroll.js";
+import { defineComponent as It, getCurrentInstance as Wt, ref as T, computed as m, unref as n, onMounted as Dt, nextTick as $, resolveDynamicComponent as P, h as L, Fragment as Ot } from "vue";
+import { useEventListener as $t } from "@vueuse/core";
+import { isNumber as E, isClient as kt, isString as X, hasOwn as Ft } from "@vft/utils";
+import { getScrollBarWidth as Gt } from "../../../utils/dom/scroll.js";
 import "../../config-provider/hooks/use-global-config.js";
 import "lodash-es";
-import { useNamespace } from "../../../hooks/use-namespace/index.js";
+import { useNamespace as Nt } from "../../../hooks/use-namespace/index.js";
 import "../../../hooks/use-model-toggle/index.js";
 import "@popperjs/core";
 import "../../../hooks/use-z-index/index.js";
-import ScrollBar from "../components/scrollbar.js";
-import { useGridWheel } from "../hooks/use-grid-wheel.js";
-import { useCache } from "../hooks/use-cache.js";
-import { virtualizedGridProps } from "../props.js";
-import { getScrollDir, getRTLOffsetType, isRTL } from "../utils.js";
-import { ITEM_RENDER_EVT, SCROLL_EVT, FORWARD, AUTO_ALIGNMENT, BACKWARD, RTL, RTL_OFFSET_POS_ASC, RTL_OFFSET_NAG, RTL_OFFSET_POS_DESC } from "../defaults.js";
-const createGrid = ({
-  name,
-  clearCache,
-  getColumnPosition,
-  getColumnStartIndexForOffset,
-  getColumnStopIndexForStartIndex,
-  getEstimatedTotalHeight,
-  getEstimatedTotalWidth,
-  getColumnOffset,
-  getRowOffset,
-  getRowPosition,
-  getRowStartIndexForOffset,
-  getRowStopIndexForStartIndex,
-  initCache,
-  injectToInstance,
-  validateProps
-}) => {
-  return defineComponent({
-    name: name ?? "ElVirtualList",
-    props: virtualizedGridProps,
-    emits: [ITEM_RENDER_EVT, SCROLL_EVT],
-    setup(props, { emit, expose, slots }) {
-      const ns = useNamespace("vl");
-      validateProps(props);
-      const instance = getCurrentInstance();
-      const cache = ref(initCache(props, instance));
-      injectToInstance?.(instance, cache);
-      const windowRef = ref();
-      const hScrollbar = ref();
-      const vScrollbar = ref();
-      const innerRef = ref(null);
-      const states = ref({
-        isScrolling: false,
-        scrollLeft: isNumber(props.initScrollLeft) ? props.initScrollLeft : 0,
-        scrollTop: isNumber(props.initScrollTop) ? props.initScrollTop : 0,
-        updateRequested: false,
-        xAxisScrollDir: FORWARD,
-        yAxisScrollDir: FORWARD
-      });
-      const getItemStyleCache = useCache();
-      const parsedHeight = computed(
-        () => Number.parseInt(`${props.height}`, 10)
-      );
-      const parsedWidth = computed(() => Number.parseInt(`${props.width}`, 10));
-      const columnsToRender = computed(() => {
-        const { totalColumn, totalRow, columnCache } = props;
-        const { isScrolling, xAxisScrollDir, scrollLeft } = unref(states);
-        if (totalColumn === 0 || totalRow === 0) {
-          return [0, 0, 0, 0];
-        }
-        const startIndex = getColumnStartIndexForOffset(
-          props,
-          scrollLeft,
-          unref(cache)
-        );
-        const stopIndex = getColumnStopIndexForStartIndex(
-          props,
-          startIndex,
-          scrollLeft,
-          unref(cache)
-        );
-        const cacheBackward = !isScrolling || xAxisScrollDir === BACKWARD ? Math.max(1, columnCache) : 1;
-        const cacheForward = !isScrolling || xAxisScrollDir === 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 = computed(() => {
-        const { totalColumn, totalRow, rowCache } = props;
-        const { isScrolling, yAxisScrollDir, scrollTop } = unref(states);
-        if (totalColumn === 0 || totalRow === 0) {
-          return [0, 0, 0, 0];
-        }
-        const startIndex = getRowStartIndexForOffset(
-          props,
-          scrollTop,
-          unref(cache)
-        );
-        const stopIndex = getRowStopIndexForStartIndex(
-          props,
-          startIndex,
-          scrollTop,
-          unref(cache)
-        );
-        const cacheBackward = !isScrolling || yAxisScrollDir === BACKWARD ? Math.max(1, rowCache) : 1;
-        const cacheForward = !isScrolling || yAxisScrollDir === 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 = computed(
-        () => getEstimatedTotalHeight(props, unref(cache))
-      );
-      const estimatedTotalWidth = computed(
-        () => getEstimatedTotalWidth(props, unref(cache))
-      );
-      const windowStyle = computed(() => [
-        {
-          position: "relative",
-          overflow: "hidden",
-          WebkitOverflowScrolling: "touch",
-          willChange: "transform"
-        },
-        {
-          direction: props.direction,
-          height: isNumber(props.height) ? `${props.height}px` : props.height,
-          width: isNumber(props.width) ? `${props.width}px` : props.width
-        },
-        props.style ?? {}
-      ]);
-      const innerStyle = computed(() => {
-        const width = `${unref(estimatedTotalWidth)}px`;
-        const height = `${unref(estimatedTotalHeight)}px`;
-        return {
-          height,
-          pointerEvents: unref(states).isScrolling ? "none" : void 0,
-          width
-        };
-      });
-      const emitEvents = () => {
-        const { totalColumn, totalRow } = props;
-        if (totalColumn > 0 && totalRow > 0) {
-          const [
-            columnCacheStart,
-            columnCacheEnd,
-            columnVisibleStart,
-            columnVisibleEnd
-          ] = unref(columnsToRender);
-          const [rowCacheStart, rowCacheEnd, rowVisibleStart, rowVisibleEnd] = unref(rowsToRender);
-          emit(ITEM_RENDER_EVT, {
-            columnCacheStart,
-            columnCacheEnd,
-            rowCacheStart,
-            rowCacheEnd,
-            columnVisibleStart,
-            columnVisibleEnd,
-            rowVisibleStart,
-            rowVisibleEnd
-          });
-        }
-        const {
-          scrollLeft,
-          scrollTop,
-          updateRequested,
-          xAxisScrollDir,
-          yAxisScrollDir
-        } = unref(states);
-        emit(SCROLL_EVT, {
-          xAxisScrollDir,
-          scrollLeft,
-          yAxisScrollDir,
-          scrollTop,
-          updateRequested
-        });
-      };
-      const onScroll = (e) => {
-        const {
-          clientHeight,
-          clientWidth,
-          scrollHeight,
-          scrollLeft,
-          scrollTop,
-          scrollWidth
-        } = e.currentTarget;
-        const _states = unref(states);
-        if (_states.scrollTop === scrollTop && _states.scrollLeft === scrollLeft) {
-          return;
-        }
-        let _scrollLeft = scrollLeft;
-        if (isRTL(props.direction)) {
-          switch (getRTLOffsetType()) {
-            case RTL_OFFSET_NAG:
-              _scrollLeft = -scrollLeft;
-              break;
-            case 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: getScrollDir(_states.scrollLeft, _scrollLeft),
-          yAxisScrollDir: getScrollDir(_states.scrollTop, scrollTop)
-        };
-        nextTick(() => resetIsScrolling());
-        onUpdated();
-        emitEvents();
+import Y from "../components/scrollbar.js";
+import { useGridWheel as zt } from "../hooks/use-grid-wheel.js";
+import { useCache as Vt } from "../hooks/use-cache.js";
+import { virtualizedGridProps as Ht } from "../props.js";
+import { getScrollDir as A, getRTLOffsetType as j, isRTL as J } from "../utils.js";
+import { ITEM_RENDER_EVT as Q, SCROLL_EVT as Z, FORWARD as _, AUTO_ALIGNMENT as Bt, BACKWARD as p, RTL as qt, RTL_OFFSET_POS_ASC as Ut, RTL_OFFSET_NAG as tt, RTL_OFFSET_POS_DESC as Kt } from "../defaults.js";
+const ae = ({
+  name: et,
+  clearCache: I,
+  getColumnPosition: k,
+  getColumnStartIndexForOffset: lt,
+  getColumnStopIndexForStartIndex: ot,
+  getEstimatedTotalHeight: F,
+  getEstimatedTotalWidth: G,
+  getColumnOffset: nt,
+  getRowOffset: rt,
+  getRowPosition: ct,
+  getRowStartIndexForOffset: st,
+  getRowStopIndexForStartIndex: it,
+  initCache: at,
+  injectToInstance: ht,
+  validateProps: dt
+}) => It({
+  name: et ?? "ElVirtualList",
+  props: Ht,
+  emits: [Q, Z],
+  setup(e, { emit: N, expose: ut, slots: mt }) {
+    const b = Nt("vl");
+    dt(e);
+    const W = Wt(), w = T(at(e, W));
+    ht?.(W, w);
+    const M = T(), z = T(), V = T(), H = T(null), h = T({
+      isScrolling: !1,
+      scrollLeft: E(e.initScrollLeft) ? e.initScrollLeft : 0,
+      scrollTop: E(e.initScrollTop) ? e.initScrollTop : 0,
+      updateRequested: !1,
+      xAxisScrollDir: _,
+      yAxisScrollDir: _
+    }), D = Vt(), y = m(
+      () => Number.parseInt(`${e.height}`, 10)
+    ), C = m(() => Number.parseInt(`${e.width}`, 10)), B = m(() => {
+      const { totalColumn: l, totalRow: t, columnCache: o } = e, { isScrolling: r, xAxisScrollDir: c, scrollLeft: s } = n(h);
+      if (l === 0 || t === 0)
+        return [0, 0, 0, 0];
+      const i = lt(
+        e,
+        s,
+        n(w)
+      ), a = ot(
+        e,
+        i,
+        s,
+        n(w)
+      ), d = !r || c === p ? Math.max(1, o) : 1, u = !r || c === _ ? Math.max(1, o) : 1;
+      return [
+        Math.max(0, i - d),
+        Math.max(0, Math.min(l - 1, a + u)),
+        i,
+        a
+      ];
+    }), q = m(() => {
+      const { totalColumn: l, totalRow: t, rowCache: o } = e, { isScrolling: r, yAxisScrollDir: c, scrollTop: s } = n(h);
+      if (l === 0 || t === 0)
+        return [0, 0, 0, 0];
+      const i = st(
+        e,
+        s,
+        n(w)
+      ), a = it(
+        e,
+        i,
+        s,
+        n(w)
+      ), d = !r || c === p ? Math.max(1, o) : 1, u = !r || c === _ ? Math.max(1, o) : 1;
+      return [
+        Math.max(0, i - d),
+        Math.max(0, Math.min(t - 1, a + u)),
+        i,
+        a
+      ];
+    }), x = m(
+      () => F(e, n(w))
+    ), g = m(
+      () => G(e, n(w))
+    ), ft = m(() => [
+      {
+        position: "relative",
+        overflow: "hidden",
+        WebkitOverflowScrolling: "touch",
+        willChange: "transform"
+      },
+      {
+        direction: e.direction,
+        height: E(e.height) ? `${e.height}px` : e.height,
+        width: E(e.width) ? `${e.width}px` : e.width
+      },
+      e.style ?? {}
+    ]), St = m(() => {
+      const l = `${n(g)}px`;
+      return {
+        height: `${n(x)}px`,
+        pointerEvents: n(h).isScrolling ? "none" : void 0,
+        width: l
       };
-      const onVerticalScroll = (distance, totalSteps) => {
-        const height = unref(parsedHeight);
-        const offset = (estimatedTotalHeight.value - height) / totalSteps * distance;
-        scrollTo({
-          scrollTop: Math.min(estimatedTotalHeight.value - height, offset)
+    }), O = () => {
+      const { totalColumn: l, totalRow: t } = e;
+      if (l > 0 && t > 0) {
+        const [
+          a,
+          d,
+          u,
+          f
+        ] = n(B), [S, v, At, _t] = n(q);
+        N(Q, {
+          columnCacheStart: a,
+          columnCacheEnd: d,
+          rowCacheStart: S,
+          rowCacheEnd: v,
+          columnVisibleStart: u,
+          columnVisibleEnd: f,
+          rowVisibleStart: At,
+          rowVisibleEnd: _t
         });
-      };
-      const onHorizontalScroll = (distance, totalSteps) => {
-        const width = unref(parsedWidth);
-        const offset = (estimatedTotalWidth.value - width) / totalSteps * distance;
-        scrollTo({
-          scrollLeft: Math.min(estimatedTotalWidth.value - width, offset)
-        });
-      };
-      const { onWheel } = useGridWheel(
-        {
-          atXStartEdge: computed(() => states.value.scrollLeft <= 0),
-          atXEndEdge: computed(
-            () => states.value.scrollLeft >= estimatedTotalWidth.value - unref(parsedWidth)
-          ),
-          atYStartEdge: computed(() => states.value.scrollTop <= 0),
-          atYEndEdge: computed(
-            () => states.value.scrollTop >= estimatedTotalHeight.value - unref(parsedHeight)
-          )
-        },
-        (x, y) => {
-          hScrollbar.value?.onMouseUp?.();
-          vScrollbar.value?.onMouseUp?.();
-          const width = unref(parsedWidth);
-          const height = unref(parsedHeight);
-          scrollTo({
-            scrollLeft: Math.min(
-              states.value.scrollLeft + x,
-              estimatedTotalWidth.value - width
-            ),
-            scrollTop: Math.min(
-              states.value.scrollTop + y,
-              estimatedTotalHeight.value - height
-            )
-          });
-        }
-      );
-      useEventListener(windowRef, "wheel", onWheel, {
-        passive: false
+      }
+      const {
+        scrollLeft: o,
+        scrollTop: r,
+        updateRequested: c,
+        xAxisScrollDir: s,
+        yAxisScrollDir: i
+      } = n(h);
+      N(Z, {
+        xAxisScrollDir: s,
+        scrollLeft: o,
+        yAxisScrollDir: i,
+        scrollTop: r,
+        updateRequested: c
       });
-      const scrollTo = ({
-        scrollLeft = states.value.scrollLeft,
-        scrollTop = states.value.scrollTop
-      }) => {
-        scrollLeft = Math.max(scrollLeft, 0);
-        scrollTop = Math.max(scrollTop, 0);
-        const _states = unref(states);
-        if (scrollTop === _states.scrollTop && scrollLeft === _states.scrollLeft) {
-          return;
+    }, wt = (l) => {
+      const {
+        clientHeight: t,
+        clientWidth: o,
+        scrollHeight: r,
+        scrollLeft: c,
+        scrollTop: s,
+        scrollWidth: i
+      } = l.currentTarget, a = n(h);
+      if (a.scrollTop === s && a.scrollLeft === c)
+        return;
+      let d = c;
+      if (J(e.direction))
+        switch (j()) {
+          case tt:
+            d = -c;
+            break;
+          case Kt:
+            d = i - o - c;
+            break;
         }
-        states.value = {
-          ..._states,
-          xAxisScrollDir: getScrollDir(_states.scrollLeft, scrollLeft),
-          yAxisScrollDir: getScrollDir(_states.scrollTop, scrollTop),
-          scrollLeft,
-          scrollTop,
-          updateRequested: true
-        };
-        nextTick(() => resetIsScrolling());
-        onUpdated();
-        emitEvents();
-      };
-      const scrollToItem = (rowIndex = 0, columnIdx = 0, alignment = AUTO_ALIGNMENT) => {
-        const _states = unref(states);
-        columnIdx = Math.max(0, Math.min(columnIdx, props.totalColumn - 1));
-        rowIndex = Math.max(0, Math.min(rowIndex, props.totalRow - 1));
-        const scrollBarWidth = getScrollBarWidth(ns.namespace.value);
-        const _cache = unref(cache);
-        const estimatedHeight = getEstimatedTotalHeight(props, _cache);
-        const estimatedWidth = getEstimatedTotalWidth(props, _cache);
-        scrollTo({
-          scrollLeft: getColumnOffset(
-            props,
-            columnIdx,
-            alignment,
-            _states.scrollLeft,
-            _cache,
-            estimatedWidth > props.width ? scrollBarWidth : 0
+      h.value = {
+        ...a,
+        isScrolling: !0,
+        scrollLeft: d,
+        scrollTop: Math.max(
+          0,
+          Math.min(s, r - t)
+        ),
+        updateRequested: !0,
+        xAxisScrollDir: A(a.scrollLeft, d),
+        yAxisScrollDir: A(a.scrollTop, s)
+      }, $(() => U()), K(), O();
+    }, vt = (l, t) => {
+      const o = n(y), r = (x.value - o) / t * l;
+      R({
+        scrollTop: Math.min(x.value - o, r)
+      });
+    }, xt = (l, t) => {
+      const o = n(C), r = (g.value - o) / t * l;
+      R({
+        scrollLeft: Math.min(g.value - o, r)
+      });
+    }, { onWheel: gt } = zt(
+      {
+        atXStartEdge: m(() => h.value.scrollLeft <= 0),
+        atXEndEdge: m(
+          () => h.value.scrollLeft >= g.value - n(C)
+        ),
+        atYStartEdge: m(() => h.value.scrollTop <= 0),
+        atYEndEdge: m(
+          () => h.value.scrollTop >= x.value - n(y)
+        )
+      },
+      (l, t) => {
+        z.value?.onMouseUp?.(), V.value?.onMouseUp?.();
+        const o = n(C), r = n(y);
+        R({
+          scrollLeft: Math.min(
+            h.value.scrollLeft + l,
+            g.value - o
           ),
-          scrollTop: getRowOffset(
-            props,
-            rowIndex,
-            alignment,
-            _states.scrollTop,
-            _cache,
-            estimatedHeight > props.height ? scrollBarWidth : 0
+          scrollTop: Math.min(
+            h.value.scrollTop + t,
+            x.value - r
           )
         });
-      };
-      const getItemStyle = (rowIndex, columnIndex) => {
-        const { columnWidth, direction, rowHeight } = props;
-        const itemStyleCache = getItemStyleCache.value(
-          clearCache && columnWidth,
-          clearCache && rowHeight,
-          clearCache && direction
-        );
-        const key = `${rowIndex},${columnIndex}`;
-        if (hasOwn(itemStyleCache, key)) {
-          return itemStyleCache[key];
-        } else {
-          const [, left] = getColumnPosition(props, columnIndex, unref(cache));
-          const _cache = unref(cache);
-          const rtl = isRTL(direction);
-          const [height, top] = getRowPosition(props, rowIndex, _cache);
-          const [width] = getColumnPosition(props, 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;
-        nextTick(() => {
-          getItemStyleCache.value(-1, null, null);
-        });
-      };
-      onMounted(() => {
-        if (!isClient) return;
-        const { initScrollLeft, initScrollTop } = props;
-        const windowElement = unref(windowRef);
-        if (windowElement) {
-          if (isNumber(initScrollLeft)) {
-            windowElement.scrollLeft = initScrollLeft;
-          }
-          if (isNumber(initScrollTop)) {
-            windowElement.scrollTop = initScrollTop;
-          }
-        }
-        emitEvents();
+      }
+    );
+    $t(M, "wheel", gt, {
+      passive: !1
+    });
+    const R = ({
+      scrollLeft: l = h.value.scrollLeft,
+      scrollTop: t = h.value.scrollTop
+    }) => {
+      l = Math.max(l, 0), t = Math.max(t, 0);
+      const o = n(h);
+      t === o.scrollTop && l === o.scrollLeft || (h.value = {
+        ...o,
+        xAxisScrollDir: A(o.scrollLeft, l),
+        yAxisScrollDir: A(o.scrollTop, t),
+        scrollLeft: l,
+        scrollTop: t,
+        updateRequested: !0
+      }, $(() => U()), K(), O());
+    }, Tt = (l = 0, t = 0, o = Bt) => {
+      const r = n(h);
+      t = Math.max(0, Math.min(t, e.totalColumn - 1)), l = Math.max(0, Math.min(l, e.totalRow - 1));
+      const c = Gt(b.namespace.value), s = n(w), i = F(e, s), a = G(e, s);
+      R({
+        scrollLeft: nt(
+          e,
+          t,
+          o,
+          r.scrollLeft,
+          s,
+          a > e.width ? c : 0
+        ),
+        scrollTop: rt(
+          e,
+          l,
+          o,
+          r.scrollTop,
+          s,
+          i > e.height ? c : 0
+        )
+      });
+    }, Lt = (l, t) => {
+      const { columnWidth: o, direction: r, rowHeight: c } = e, s = D.value(
+        I && o,
+        I && c,
+        I && r
+      ), i = `${l},${t}`;
+      if (Ft(s, i))
+        return s[i];
+      {
+        const [, a] = k(e, t, n(w)), d = n(w), u = J(r), [f, S] = ct(e, l, d), [v] = k(e, t, d);
+        return s[i] = {
+          position: "absolute",
+          left: u ? void 0 : `${a}px`,
+          right: u ? `${a}px` : void 0,
+          top: `${S}px`,
+          height: `${f}px`,
+          width: `${v}px`
+        }, s[i];
+      }
+    }, U = () => {
+      h.value.isScrolling = !1, $(() => {
+        D.value(-1, null, null);
       });
-      const onUpdated = () => {
-        const { direction } = props;
-        const { scrollLeft, scrollTop, updateRequested } = unref(states);
-        const windowElement = unref(windowRef);
-        if (updateRequested && windowElement) {
-          if (direction === RTL) {
-            switch (getRTLOffsetType()) {
-              case RTL_OFFSET_NAG: {
-                windowElement.scrollLeft = -scrollLeft;
-                break;
-              }
-              case RTL_OFFSET_POS_ASC: {
-                windowElement.scrollLeft = scrollLeft;
-                break;
-              }
-              default: {
-                const { clientWidth, scrollWidth } = windowElement;
-                windowElement.scrollLeft = scrollWidth - clientWidth - scrollLeft;
-                break;
-              }
+    };
+    Dt(() => {
+      if (!kt) return;
+      const { initScrollLeft: l, initScrollTop: t } = e, o = n(M);
+      o && (E(l) && (o.scrollLeft = l), E(t) && (o.scrollTop = t)), O();
+    });
+    const K = () => {
+      const { direction: l } = e, { scrollLeft: t, scrollTop: o, updateRequested: r } = n(h), c = n(M);
+      if (r && c) {
+        if (l === qt)
+          switch (j()) {
+            case tt: {
+              c.scrollLeft = -t;
+              break;
+            }
+            case Ut: {
+              c.scrollLeft = t;
+              break;
+            }
+            default: {
+              const { clientWidth: s, scrollWidth: i } = c;
+              c.scrollLeft = i - s - t;
+              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
+        else
+          c.scrollLeft = Math.max(0, t);
+        c.scrollTop = Math.max(0, o);
+      }
+    }, { resetAfterColumnIndex: Et, resetAfterRowIndex: Mt, resetAfter: Rt } = W.proxy;
+    ut({
+      windowRef: M,
+      innerRef: H,
+      getItemStyleCache: D,
+      scrollTo: R,
+      scrollToItem: Tt,
+      states: h,
+      resetAfterColumnIndex: Et,
+      resetAfterRowIndex: Mt,
+      resetAfter: Rt
+    });
+    const bt = () => {
+      const {
+        scrollbarAlwaysOn: l,
+        scrollbarStartGap: t,
+        scrollbarEndGap: o,
+        totalColumn: r,
+        totalRow: c
+      } = e, s = n(C), i = n(y), a = n(g), d = n(x), { scrollLeft: u, scrollTop: f } = n(h), S = L(Y, {
+        ref: z,
+        alwaysOn: l,
+        startGap: t,
+        endGap: o,
+        class: b.e("horizontal"),
+        clientSize: s,
+        layout: "horizontal",
+        onScroll: xt,
+        ratio: s * 100 / a,
+        scrollFrom: u / (a - s),
+        total: c,
+        visible: !0
+      }), v = L(Y, {
+        ref: V,
+        alwaysOn: l,
+        startGap: t,
+        endGap: o,
+        class: b.e("vertical"),
+        clientSize: i,
+        layout: "vertical",
+        onScroll: vt,
+        ratio: i * 100 / d,
+        scrollFrom: f / (d - i),
+        total: r,
+        visible: !0
       });
-      const renderScrollbars = () => {
-        const {
-          scrollbarAlwaysOn,
-          scrollbarStartGap,
-          scrollbarEndGap,
-          totalColumn,
-          totalRow
-        } = props;
-        const width = unref(parsedWidth);
-        const height = unref(parsedHeight);
-        const estimatedWidth = unref(estimatedTotalWidth);
-        const estimatedHeight = unref(estimatedTotalHeight);
-        const { scrollLeft, scrollTop } = unref(states);
-        const horizontalScrollbar = h(ScrollBar, {
-          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 = h(ScrollBar, {
-          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
-        };
+      return {
+        horizontalScrollbar: S,
+        verticalScrollbar: v
       };
-      const renderItems = () => {
-        const [columnStart, columnEnd] = unref(columnsToRender);
-        const [rowStart, rowEnd] = unref(rowsToRender);
-        const { data, totalColumn, totalRow, useIsScrolling, itemKey } = props;
-        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(
-                h(
-                  Fragment,
-                  { key },
-                  slots.default?.({
-                    columnIndex: column,
-                    data,
-                    isScrolling: useIsScrolling ? unref(states).isScrolling : void 0,
-                    style: getItemStyle(row, column),
-                    rowIndex: row
-                  })
-                )
-              );
-            }
+    }, yt = () => {
+      const [l, t] = n(B), [o, r] = n(q), { data: c, totalColumn: s, totalRow: i, useIsScrolling: a, itemKey: d } = e, u = [];
+      if (i > 0 && s > 0)
+        for (let f = o; f <= r; f++)
+          for (let S = l; S <= t; S++) {
+            const v = d({ columnIndex: S, data: c, rowIndex: f });
+            u.push(
+              L(
+                Ot,
+                { key: v },
+                mt.default?.({
+                  columnIndex: S,
+                  data: c,
+                  isScrolling: a ? n(h).isScrolling : void 0,
+                  style: Lt(f, S),
+                  rowIndex: f
+                })
+              )
+            );
           }
-        }
-        return children;
-      };
-      const renderInner = () => {
-        const Inner = resolveDynamicComponent(props.innerElement);
-        const children = renderItems();
-        return [
-          h(
-            Inner,
-            {
-              style: unref(innerStyle),
-              ref: innerRef
-            },
-            !isString(Inner) ? {
-              default: () => children
-            } : children
-          )
-        ];
-      };
-      const renderWindow = () => {
-        const Container = resolveDynamicComponent(
-          props.containerElement
-        );
-        const { horizontalScrollbar, verticalScrollbar } = renderScrollbars();
-        const Inner = renderInner();
-        return h(
-          "div",
+      return u;
+    }, Ct = () => {
+      const l = P(e.innerElement), t = yt();
+      return [
+        L(
+          l,
           {
-            key: 0,
-            class: ns.e("wrapper"),
-            role: props.role
+            style: n(St),
+            ref: H
           },
-          [
-            h(
-              Container,
-              {
-                class: props.className,
-                style: unref(windowStyle),
-                onScroll,
-                ref: windowRef
-              },
-              !isString(Container) ? { default: () => Inner } : Inner
-            ),
-            horizontalScrollbar,
-            verticalScrollbar
-          ]
-        );
-      };
-      return renderWindow;
-    }
-  });
-};
+          X(l) ? t : {
+            default: () => t
+          }
+        )
+      ];
+    };
+    return () => {
+      const l = P(
+        e.containerElement
+      ), { horizontalScrollbar: t, verticalScrollbar: o } = bt(), r = Ct();
+      return L(
+        "div",
+        {
+          key: 0,
+          class: b.e("wrapper"),
+          role: e.role
+        },
+        [
+          L(
+            l,
+            {
+              class: e.className,
+              style: n(ft),
+              onScroll: wt,
+              ref: M
+            },
+            X(l) ? r : { default: () => r }
+          ),
+          t,
+          o
+        ]
+      );
+    };
+  }
+});
 export {
-  createGrid as default
+  ae as default
 };