vft 0.0.524 → 0.0.525

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

@@ -1,427 +1,373 @@
-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 "../../form/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 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 he = ({
-  name: et,
-  clearCache: I,
-  getColumnPosition: k,
-  getColumnStartIndexForOffset: lt,
-  getColumnStopIndexForStartIndex: ot,
-  getEstimatedTotalHeight: F,
-  getEstimatedTotalWidth: G,
-  getColumnOffset: nt,
-  getRowOffset: rt,
-  getRowPosition: ct,
-  getRowStartIndexForOffset: it,
-  getRowStopIndexForStartIndex: st,
-  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: i } = n(h);
-      if (l === 0 || t === 0)
-        return [0, 0, 0, 0];
-      const s = lt(
-        e,
-        i,
-        n(w)
-      ), a = ot(
-        e,
-        s,
-        i,
-        n(w)
-      ), d = !r || c === p ? Math.max(1, o) : 1, u = !r || c === _ ? Math.max(1, o) : 1;
-      return [
-        Math.max(0, s - d),
-        Math.max(0, Math.min(l - 1, a + u)),
-        s,
-        a
-      ];
-    }), q = m(() => {
-      const { totalColumn: l, totalRow: t, rowCache: o } = e, { isScrolling: r, yAxisScrollDir: c, scrollTop: i } = n(h);
-      if (l === 0 || t === 0)
-        return [0, 0, 0, 0];
-      const s = it(
-        e,
-        i,
-        n(w)
-      ), a = st(
-        e,
-        s,
-        i,
-        n(w)
-      ), d = !r || c === p ? Math.max(1, o) : 1, u = !r || c === _ ? Math.max(1, o) : 1;
-      return [
-        Math.max(0, s - d),
-        Math.max(0, Math.min(t - 1, a + u)),
-        s,
-        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
-      };
-    }), 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 {
-        scrollLeft: o,
-        scrollTop: r,
-        updateRequested: c,
-        xAxisScrollDir: i,
-        yAxisScrollDir: s
-      } = n(h);
-      N(Z, {
-        xAxisScrollDir: i,
-        scrollLeft: o,
-        yAxisScrollDir: s,
-        scrollTop: r,
-        updateRequested: c
-      });
-    }, wt = (l) => {
-      const {
-        clientHeight: t,
-        clientWidth: o,
-        scrollHeight: r,
-        scrollLeft: c,
-        scrollTop: i,
-        scrollWidth: s
-      } = l.currentTarget, a = n(h);
-      if (a.scrollTop === i && a.scrollLeft === c)
-        return;
-      let d = c;
-      if (J(e.direction))
-        switch (j()) {
-          case tt:
-            d = -c;
-            break;
-          case Kt:
-            d = s - o - c;
-            break;
-        }
-      h.value = {
-        ...a,
-        isScrolling: !0,
-        scrollLeft: d,
-        scrollTop: Math.max(
-          0,
-          Math.min(i, r - t)
-        ),
-        updateRequested: !0,
-        xAxisScrollDir: A(a.scrollLeft, d),
-        yAxisScrollDir: A(a.scrollTop, i)
-      }, $(() => 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: Math.min(
-            h.value.scrollTop + t,
-            x.value - r
-          )
-        });
-      }
-    );
-    $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), i = n(w), s = F(e, i), a = G(e, i);
-      R({
-        scrollLeft: nt(
-          e,
-          t,
-          o,
-          r.scrollLeft,
-          i,
-          a > e.width ? c : 0
-        ),
-        scrollTop: rt(
-          e,
-          l,
-          o,
-          r.scrollTop,
-          i,
-          s > e.height ? c : 0
-        )
-      });
-    }, Lt = (l, t) => {
-      const { columnWidth: o, direction: r, rowHeight: c } = e, i = D.value(
-        I && o,
-        I && c,
-        I && r
-      ), s = `${l},${t}`;
-      if (Ft(i, s))
-        return i[s];
-      {
-        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 i[s] = {
-          position: "absolute",
-          left: u ? void 0 : `${a}px`,
-          right: u ? `${a}px` : void 0,
-          top: `${S}px`,
-          height: `${f}px`,
-          width: `${v}px`
-        }, i[s];
-      }
-    }, U = () => {
-      h.value.isScrolling = !1, $(() => {
-        D.value(-1, null, null);
-      });
-    };
-    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: i, scrollWidth: s } = c;
-              c.scrollLeft = s - i - t;
-              break;
-            }
-          }
-        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, i = n(C), s = 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: i,
-        layout: "horizontal",
-        onScroll: xt,
-        ratio: i * 100 / a,
-        scrollFrom: u / (a - i),
-        total: c,
-        visible: !0
-      }), v = L(Y, {
-        ref: V,
-        alwaysOn: l,
-        startGap: t,
-        endGap: o,
-        class: b.e("vertical"),
-        clientSize: s,
-        layout: "vertical",
-        onScroll: vt,
-        ratio: s * 100 / d,
-        scrollFrom: f / (d - s),
-        total: r,
-        visible: !0
-      });
-      return {
-        horizontalScrollbar: S,
-        verticalScrollbar: v
-      };
-    }, yt = () => {
-      const [l, t] = n(B), [o, r] = n(q), { data: c, totalColumn: i, totalRow: s, useIsScrolling: a, itemKey: d } = e, u = [];
-      if (s > 0 && i > 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 u;
-    }, Ct = () => {
-      const l = P(e.innerElement), t = yt();
-      return [
-        L(
-          l,
-          {
-            style: n(St),
-            ref: H
-          },
-          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 {
-  he as default
+import { getScrollBarWidth } from "../../../utils/dom/scroll.js";
+import { useNamespace } from "../../../hooks/use-namespace/index.js";
+import { useCache } from "../hooks/use-cache.js";
+import { AUTO_ALIGNMENT, FORWARD, ITEM_RENDER_EVT, RTL_OFFSET_NAG, RTL_OFFSET_POS_ASC, RTL_OFFSET_POS_DESC, SCROLL_EVT } from "../defaults.js";
+import { virtualizedGridProps } from "../props.js";
+import { getRTLOffsetType, getScrollDir, isRTL } from "../utils.js";
+import ScrollBar from "../components/scrollbar.js";
+import { useGridWheel } from "../hooks/use-grid-wheel.js";
+import { hasOwn, isClient, isNumber, isString } from "@vft/utils";
+import { useEventListener } from "@vueuse/core";
+import { Fragment, computed, defineComponent, getCurrentInstance, h, nextTick, onMounted, ref, resolveDynamicComponent, unref } from "vue";
+//#region ../../packages/components/virtual-list/builders/build-grid.ts
+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`;
+				return {
+					height: `${unref(estimatedTotalHeight)}px`,
+					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();
+			};
+			const onVerticalScroll = (distance, totalSteps) => {
+				const height = unref(parsedHeight);
+				const offset = (estimatedTotalHeight.value - height) / totalSteps * distance;
+				scrollTo({ scrollTop: Math.min(estimatedTotalHeight.value - height, offset) });
+			};
+			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 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;
+				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),
+					scrollTop: getRowOffset(props, rowIndex, alignment, _states.scrollTop, _cache, estimatedHeight > props.height ? scrollBarWidth : 0)
+				});
+			};
+			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();
+			});
+			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;
+						}
+					}
+					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 } = props;
+				const width = unref(parsedWidth);
+				const height = unref(parsedHeight);
+				const estimatedWidth = unref(estimatedTotalWidth);
+				const estimatedHeight = unref(estimatedTotalHeight);
+				const { scrollLeft, scrollTop } = unref(states);
+				return {
+					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
+					}),
+					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
+					})
+				};
+			};
+			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
+					})));
+				}
+				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", {
+					key: 0,
+					class: ns.e("wrapper"),
+					role: props.role
+				}, [
+					h(Container, {
+						class: props.className,
+						style: unref(windowStyle),
+						onScroll,
+						ref: windowRef
+					}, !isString(Container) ? { default: () => Inner } : Inner),
+					horizontalScrollbar,
+					verticalScrollbar
+				]);
+			};
+			return renderWindow;
+		}
+	});
 };
+//#endregion
+export { createGrid as default };