vft 0.0.249 → 0.0.252

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

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