vft 0.0.50 → 0.0.53

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

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