vft 0.0.48 → 0.0.50

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

@@ -0,0 +1,342 @@
+import { defineComponent as ft, getCurrentInstance as ut, ref as _, computed as u, unref as n, onMounted as dt, onUpdated as mt, resolveDynamicComponent as J, h as A, nextTick as W } from "vue";
+import { isClient as ht } from "@vueuse/core";
+import { isNumber as F, isString as Q, hasOwn as St } from "@vft/utils";
+import { useNamespace as gt } from "../../../hooks/use-namespace/index.js";
+import "@popperjs/core";
+import "lodash";
+import "../../../hooks/use-z-index/index.js";
+import "../../../utils/ns-cover.js";
+import { useCache as wt } from "../hooks/use-cache.js";
+import Ot from "../hooks/use-wheel.js";
+import vt from "../components/scrollbar.js";
+import { isHorizontal as yt, getRTLOffsetType as X, getScrollDir as G } from "../utils.js";
+import { virtualizedListProps as Tt } from "../props.js";
+import { ITEM_RENDER_EVT as Y, SCROLL_EVT as p, HORIZONTAL as Rt, RTL as K, RTL_OFFSET_POS_ASC as Et, RTL_OFFSET_NAG as tt, BACKWARD as bt, FORWARD as Lt, AUTO_ALIGNMENT as Mt, RTL_OFFSET_POS_DESC as xt } from "../defaults.js";
+const Bt = ({
+  name: et,
+  getOffset: lt,
+  getItemSize: ot,
+  getItemOffset: st,
+  getEstimatedTotalSize: nt,
+  getStartIndexForOffset: rt,
+  getStopIndexForStartIndex: ct,
+  initCache: it,
+  clearCache: N,
+  validateProps: at
+}) => ft({
+  name: et ?? "VftVirtualList",
+  props: Tt,
+  emits: [Y, p],
+  setup(e, { emit: w, expose: $ }) {
+    at(e);
+    const T = ut(), H = gt("vl"), d = _(it(e, T)), R = wt(), S = _(), I = _(), C = _(), r = _({
+      isScrolling: !1,
+      scrollDir: "forward",
+      scrollOffset: F(e.initScrollOffset) ? e.initScrollOffset : 0,
+      updateRequested: !1,
+      isScrollbarDragging: !1,
+      scrollbarAlwaysOn: e.scrollbarAlwaysOn
+    }), E = u(() => {
+      const { total: t, cache: l } = e, { isScrolling: o, scrollDir: a, scrollOffset: s } = n(r);
+      if (t === 0)
+        return [0, 0, 0, 0];
+      const c = rt(
+        e,
+        s,
+        n(d)
+      ), i = ct(
+        e,
+        c,
+        s,
+        n(d)
+      ), v = !o || a === bt ? Math.max(1, l) : 1, y = !o || a === Lt ? Math.max(1, l) : 1;
+      return [
+        Math.max(0, c - v),
+        Math.max(0, Math.min(t - 1, i + y)),
+        c,
+        i
+      ];
+    }), m = u(
+      () => nt(e, n(d))
+    ), h = u(() => yt(e.layout)), q = u(() => [
+      {
+        position: "relative",
+        [`overflow-${h.value ? "x" : "y"}`]: "scroll",
+        WebkitOverflowScrolling: "touch",
+        willChange: "transform"
+      },
+      {
+        direction: e.direction,
+        height: F(e.height) ? `${e.height}px` : e.height,
+        width: F(e.width) ? `${e.width}px` : e.width
+      },
+      e.style
+    ]), b = u(() => {
+      const t = n(m), l = n(h);
+      return {
+        height: l ? "100%" : `${t}px`,
+        pointerEvents: n(r).isScrolling ? "none" : void 0,
+        width: l ? `${t}px` : "100%"
+      };
+    }), O = u(
+      () => h.value ? e.width : e.height
+    ), { onWheel: V } = Ot(
+      {
+        atStartEdge: u(() => r.value.scrollOffset <= 0),
+        atEndEdge: u(
+          () => r.value.scrollOffset >= m.value
+        ),
+        layout: u(() => e.layout)
+      },
+      (t) => {
+        var l, o;
+        (o = (l = C.value).onMouseUp) == null || o.call(l), f(
+          Math.min(
+            r.value.scrollOffset + t,
+            m.value - O.value
+          )
+        );
+      }
+    ), L = () => {
+      const { total: t } = e;
+      if (t > 0) {
+        const [s, c, i, v] = n(E);
+        w(Y, s, c, i, v);
+      }
+      const { scrollDir: l, scrollOffset: o, updateRequested: a } = n(r);
+      w(p, l, o, a);
+    }, B = (t) => {
+      const { clientHeight: l, scrollHeight: o, scrollTop: a } = t.currentTarget, s = n(r);
+      if (s.scrollOffset === a)
+        return;
+      const c = Math.max(
+        0,
+        Math.min(a, o - l)
+      );
+      r.value = {
+        ...s,
+        isScrolling: !0,
+        scrollDir: G(s.scrollOffset, c),
+        scrollOffset: c,
+        updateRequested: !1
+      }, W(x);
+    }, P = (t) => {
+      const { clientWidth: l, scrollLeft: o, scrollWidth: a } = t.currentTarget, s = n(r);
+      if (s.scrollOffset === o)
+        return;
+      const { direction: c } = e;
+      let i = o;
+      if (c === K)
+        switch (X()) {
+          case tt: {
+            i = -o;
+            break;
+          }
+          case xt: {
+            i = a - l - o;
+            break;
+          }
+        }
+      i = Math.max(
+        0,
+        Math.min(i, a - l)
+      ), r.value = {
+        ...s,
+        isScrolling: !0,
+        scrollDir: G(s.scrollOffset, i),
+        scrollOffset: i,
+        updateRequested: !1
+      }, W(x);
+    }, D = (t) => {
+      n(h) ? P(t) : B(t), L();
+    }, k = (t, l) => {
+      const o = (m.value - O.value) / l * t;
+      f(
+        Math.min(
+          m.value - O.value,
+          o
+        )
+      );
+    }, f = (t) => {
+      t = Math.max(t, 0), t !== n(r).scrollOffset && (r.value = {
+        ...n(r),
+        scrollOffset: t,
+        scrollDir: G(n(r).scrollOffset, t),
+        updateRequested: !0
+      }, W(x));
+    }, M = (t, l = Mt) => {
+      const { scrollOffset: o } = n(r);
+      t = Math.max(0, Math.min(t, e.total - 1)), f(
+        lt(
+          e,
+          t,
+          l,
+          o,
+          n(d)
+        )
+      );
+    }, U = (t) => {
+      const { direction: l, itemSize: o, layout: a } = e, s = R.value(
+        N && o,
+        N && a,
+        N && l
+      );
+      let c;
+      if (St(s, String(t)))
+        c = s[t];
+      else {
+        const i = st(e, t, n(d)), v = ot(e, t, n(d)), y = n(h), Z = l === K, j = y ? i : 0;
+        s[t] = c = {
+          position: "absolute",
+          left: Z ? void 0 : `${j}px`,
+          right: Z ? `${j}px` : void 0,
+          top: y ? 0 : `${i}px`,
+          height: y ? "100%" : `${v}px`,
+          width: y ? `${v}px` : "100%"
+        };
+      }
+      return c;
+    }, x = () => {
+      r.value.isScrolling = !1, W(() => {
+        R.value(-1, null, null);
+      });
+    }, z = () => {
+      const t = S.value;
+      t && (t.scrollTop = 0);
+    };
+    dt(() => {
+      if (!ht)
+        return;
+      const { initScrollOffset: t } = e, l = n(S);
+      F(t) && l && (n(h) ? l.scrollLeft = t : l.scrollTop = t), L();
+    }), mt(() => {
+      const { direction: t, layout: l } = e, { scrollOffset: o, updateRequested: a } = n(r), s = n(S);
+      if (a && s)
+        if (l === Rt)
+          if (t === K)
+            switch (X()) {
+              case tt: {
+                s.scrollLeft = -o;
+                break;
+              }
+              case Et: {
+                s.scrollLeft = o;
+                break;
+              }
+              default: {
+                const { clientWidth: c, scrollWidth: i } = s;
+                s.scrollLeft = i - c - o;
+                break;
+              }
+            }
+          else
+            s.scrollLeft = o;
+        else
+          s.scrollTop = o;
+    });
+    const g = {
+      ns: H,
+      clientSize: O,
+      estimatedTotalSize: m,
+      windowStyle: q,
+      windowRef: S,
+      innerRef: I,
+      innerStyle: b,
+      itemsToRender: E,
+      scrollbarRef: C,
+      states: r,
+      getItemStyle: U,
+      onScroll: D,
+      onScrollbarScroll: k,
+      onWheel: V,
+      scrollTo: f,
+      scrollToItem: M,
+      resetScrollTop: z
+    };
+    return $({
+      windowRef: S,
+      innerRef: I,
+      getItemStyleCache: R,
+      scrollTo: f,
+      scrollToItem: M,
+      resetScrollTop: z,
+      states: r
+    }), g;
+  },
+  render(e) {
+    var z;
+    const {
+      $slots: w,
+      className: $,
+      clientSize: T,
+      containerElement: H,
+      data: d,
+      getItemStyle: R,
+      innerElement: S,
+      itemsToRender: I,
+      innerStyle: C,
+      layout: r,
+      total: E,
+      onScroll: m,
+      onScrollbarScroll: h,
+      onWheel: q,
+      states: b,
+      useIsScrolling: O,
+      windowStyle: V,
+      ns: L
+    } = e, [B, P] = I, D = J(H), k = J(S), f = [];
+    if (E > 0)
+      for (let g = B; g <= P; g++)
+        f.push(
+          (z = w.default) == null ? void 0 : z.call(w, {
+            data: d,
+            key: g,
+            index: g,
+            isScrolling: O ? b.isScrolling : void 0,
+            style: R(g)
+          })
+        );
+    const M = [
+      A(
+        k,
+        {
+          style: C,
+          ref: "innerRef"
+        },
+        Q(k) ? f : {
+          default: () => f
+        }
+      )
+    ], U = A(vt, {
+      ref: "scrollbarRef",
+      clientSize: T,
+      layout: r,
+      onScroll: h,
+      ratio: T * 100 / this.estimatedTotalSize,
+      scrollFrom: b.scrollOffset / (this.estimatedTotalSize - T),
+      total: E
+    }), x = A(
+      D,
+      {
+        class: [L.e("window"), $],
+        style: V,
+        onScroll: m,
+        onWheel: q,
+        ref: "windowRef",
+        key: 0
+      },
+      Q(D) ? [M] : { default: () => [M] }
+    );
+    return A(
+      "div",
+      {
+        key: 0,
+        class: [L.e("wrapper"), b.scrollbarAlwaysOn ? "always-on" : ""]
+      },
+      [x, U]
+    );
+  }
+});
+export {
+  Bt as default
+};

package/es/packages/components/virtual-list/components/dynamic-size-grid.js

@@ -0,0 +1,200 @@
+import { isFunction as E } from "@vue/shared";
+import { isUndefined as g, isNumber as S } from "@vft/utils";
+import "vue";
+import { throwError as w } from "../../../utils/error.js";
+import "lodash";
+import "@vueuse/core";
+import "../../../utils/ns-cover.js";
+import G from "../builders/build-grid.js";
+import { DEFAULT_DYNAMIC_LIST_ITEM_SIZE as z, AUTO_ALIGNMENT as A, CENTERED_ALIGNMENT as _, END_ALIGNMENT as V, START_ALIGNMENT as x, SMART_ALIGNMENT as L } from "../defaults.js";
+const { max: I, min: v, floor: O } = Math, T = "VftDynamicSizeGrid", F = {
+  column: "columnWidth",
+  row: "rowHeight"
+}, d = {
+  column: "lastVisitedColumnIndex",
+  row: "lastVisitedRowIndex"
+}, l = (t, s, e, i) => {
+  const [o, n, f] = [
+    e[i],
+    t[F[i]],
+    e[d[i]]
+  ];
+  if (s > f) {
+    let r = 0;
+    if (f >= 0) {
+      const m = o[f];
+      r = m.offset + m.size;
+    }
+    for (let m = f + 1; m <= s; m++) {
+      const u = n(m);
+      o[m] = {
+        offset: r,
+        size: u
+      }, r += u;
+    }
+    e[d[i]] = s;
+  }
+  return o[s];
+}, C = (t, s, e, i, o, n) => {
+  for (; e <= i; ) {
+    const f = e + O((i - e) / 2), r = l(t, f, s, n).offset;
+    if (r === o)
+      return f;
+    r < o ? e = f + 1 : i = f - 1;
+  }
+  return I(0, e - 1);
+}, P = (t, s, e, i, o) => {
+  const n = o === "column" ? t.totalColumn : t.totalRow;
+  let f = 1;
+  for (; e < n && l(t, e, s, o).offset < i; )
+    e += f, f *= 2;
+  return C(t, s, O(e / 2), v(e, n - 1), i, o);
+}, M = (t, s, e, i) => {
+  const [o, n] = [
+    s[i],
+    s[d[i]]
+  ];
+  return (n > 0 ? o[n].offset : 0) >= e ? C(t, s, 0, n, e, i) : P(t, s, I(0, n), e, i);
+}, h = ({ totalRow: t }, { estimatedRowHeight: s, lastVisitedRowIndex: e, row: i }) => {
+  let o = 0;
+  if (e >= t && (e = t - 1), e >= 0) {
+    const r = i[e];
+    o = r.offset + r.size;
+  }
+  const f = (t - e - 1) * s;
+  return o + f;
+}, D = ({ totalColumn: t }, { column: s, estimatedColumnWidth: e, lastVisitedColumnIndex: i }) => {
+  let o = 0;
+  if (i > t && (i = t - 1), i >= 0) {
+    const r = s[i];
+    o = r.offset + r.size;
+  }
+  const f = (t - i - 1) * e;
+  return o + f;
+}, b = {
+  column: D,
+  row: h
+}, N = (t, s, e, i, o, n, f) => {
+  const [r, m] = [
+    n === "row" ? t.height : t.width,
+    b[n]
+  ], u = l(t, s, o, n), R = m(t, o), a = I(0, v(R - r, u.offset)), c = I(0, u.offset - r + f + u.size);
+  switch (e === L && (i >= c - r && i <= a + r ? e = A : e = _), e) {
+    case x:
+      return a;
+    case V:
+      return c;
+    case _:
+      return Math.round(c + (a - c) / 2);
+    case A:
+    default:
+      return i >= c && i <= a ? i : c > a || i < c ? c : a;
+  }
+}, q = G({
+  name: "ElDynamicSizeGrid",
+  getColumnPosition: (t, s, e) => {
+    const i = l(t, s, e, "column");
+    return [i.size, i.offset];
+  },
+  getRowPosition: (t, s, e) => {
+    const i = l(t, s, e, "row");
+    return [i.size, i.offset];
+  },
+  getColumnOffset: (t, s, e, i, o, n) => N(
+    t,
+    s,
+    e,
+    i,
+    o,
+    "column",
+    n
+  ),
+  getRowOffset: (t, s, e, i, o, n) => N(
+    t,
+    s,
+    e,
+    i,
+    o,
+    "row",
+    n
+  ),
+  getColumnStartIndexForOffset: (t, s, e) => M(t, e, s, "column"),
+  getColumnStopIndexForStartIndex: (t, s, e, i) => {
+    const o = l(t, s, i, "column"), n = e + t.width;
+    let f = o.offset + o.size, r = s;
+    for (; r < t.totalColumn - 1 && f < n; )
+      r++, f += l(t, s, i, "column").size;
+    return r;
+  },
+  getEstimatedTotalHeight: h,
+  getEstimatedTotalWidth: D,
+  getRowStartIndexForOffset: (t, s, e) => M(t, e, s, "row"),
+  getRowStopIndexForStartIndex: (t, s, e, i) => {
+    const { totalRow: o, height: n } = t, f = l(t, s, i, "row"), r = e + n;
+    let m = f.size + f.offset, u = s;
+    for (; u < o - 1 && m < r; )
+      u++, m += l(t, u, i, "row").size;
+    return u;
+  },
+  injectToInstance: (t, s) => {
+    const e = ({ columnIndex: n, rowIndex: f }, r) => {
+      var m, u;
+      r = g(r) ? !0 : r, S(n) && (s.value.lastVisitedColumnIndex = Math.min(
+        s.value.lastVisitedColumnIndex,
+        n - 1
+      )), S(f) && (s.value.lastVisitedRowIndex = Math.min(
+        s.value.lastVisitedRowIndex,
+        f - 1
+      )), (m = t.exposed) == null || m.getItemStyleCache.value(-1, null, null), r && ((u = t.proxy) == null || u.$forceUpdate());
+    }, i = (n, f) => {
+      e(
+        {
+          columnIndex: n
+        },
+        f
+      );
+    }, o = (n, f) => {
+      e(
+        {
+          rowIndex: n
+        },
+        f
+      );
+    };
+    Object.assign(t.proxy, {
+      resetAfterColumnIndex: i,
+      resetAfterRowIndex: o,
+      resetAfter: e
+    });
+  },
+  initCache: ({
+    estimatedColumnWidth: t = z,
+    estimatedRowHeight: s = z
+  }) => ({
+    column: {},
+    estimatedColumnWidth: t,
+    estimatedRowHeight: s,
+    lastVisitedColumnIndex: -1,
+    lastVisitedRowIndex: -1,
+    row: {}
+  }),
+  clearCache: !1,
+  validateProps: ({ columnWidth: t, rowHeight: s }) => {
+    process.env.NODE_ENV !== "production" && (E(t) || w(
+      T,
+      `
+          "columnWidth" must be passed as function,
+            instead ${typeof t} was given.
+        `
+    ), E(s) || w(
+      T,
+      `
+          "rowHeight" must be passed as function,
+            instead ${typeof s} was given.
+        `
+    ));
+  }
+});
+export {
+  q as default
+};

package/es/packages/components/virtual-list/components/dynamic-size-list.js

@@ -0,0 +1,112 @@
+import "@vft/utils";
+import "vue";
+import { throwError as N } from "../../../utils/error.js";
+import "lodash";
+import "@vueuse/core";
+import "../../../utils/ns-cover.js";
+import T from "../builders/build-list.js";
+import { isHorizontal as z } from "../utils.js";
+import { AUTO_ALIGNMENT as E, CENTERED_ALIGNMENT as M, END_ALIGNMENT as l, START_ALIGNMENT as A, DEFAULT_DYNAMIC_LIST_ITEM_SIZE as L, SMART_ALIGNMENT as _ } from "../defaults.js";
+const x = "ElDynamicSizeList", I = (e, s, t) => {
+  const { itemSize: i } = e, { items: o, lastVisitedIndex: n } = t;
+  if (s > n) {
+    let r = 0;
+    if (n >= 0) {
+      const f = o[n];
+      r = f.offset + f.size;
+    }
+    for (let f = n + 1; f <= s; f++) {
+      const m = i(f);
+      o[f] = {
+        offset: r,
+        size: m
+      }, r += m;
+    }
+    t.lastVisitedIndex = s;
+  }
+  return o[s];
+}, y = (e, s, t) => {
+  const { items: i, lastVisitedIndex: o } = s;
+  return (o > 0 ? i[o].offset : 0) >= t ? S(e, s, 0, o, t) : O(e, s, Math.max(0, o), t);
+}, S = (e, s, t, i, o) => {
+  for (; t <= i; ) {
+    const n = t + Math.floor((i - t) / 2), r = I(e, n, s).offset;
+    if (r === o)
+      return n;
+    r < o ? t = n + 1 : r > o && (i = n - 1);
+  }
+  return Math.max(0, t - 1);
+}, O = (e, s, t, i) => {
+  const { total: o } = e;
+  let n = 1;
+  for (; t < o && I(e, t, s).offset < i; )
+    t += n, n *= 2;
+  return S(
+    e,
+    s,
+    Math.floor(t / 2),
+    Math.min(t, o - 1),
+    i
+  );
+}, h = ({ total: e }, { items: s, estimatedItemSize: t, lastVisitedIndex: i }) => {
+  let o = 0;
+  if (i >= e && (i = e - 1), i >= 0) {
+    const f = s[i];
+    o = f.offset + f.size;
+  }
+  const r = (e - i - 1) * t;
+  return o + r;
+}, R = T({
+  name: "ElDynamicSizeList",
+  getItemOffset: (e, s, t) => I(e, s, t).offset,
+  getItemSize: (e, s, { items: t }) => t[s].size,
+  getEstimatedTotalSize: h,
+  getOffset: (e, s, t, i, o) => {
+    const { height: n, layout: r, width: f } = e, m = z(r) ? f : n, u = I(e, s, o), d = h(e, o), c = Math.max(
+      0,
+      Math.min(d - m, u.offset)
+    ), a = Math.max(0, u.offset - m + u.size);
+    switch (t === _ && (i >= a - m && i <= c + m ? t = E : t = M), t) {
+      case A:
+        return c;
+      case l:
+        return a;
+      case M:
+        return Math.round(a + (c - a) / 2);
+      case E:
+      default:
+        return i >= a && i <= c ? i : i < a ? a : c;
+    }
+  },
+  getStartIndexForOffset: (e, s, t) => y(e, t, s),
+  getStopIndexForStartIndex: (e, s, t, i) => {
+    const { height: o, total: n, layout: r, width: f } = e, m = z(r) ? f : o, u = I(e, s, i), d = t + m;
+    let c = u.offset + u.size, a = s;
+    for (; a < n - 1 && c < d; )
+      a++, c += I(e, a, i).size;
+    return a;
+  },
+  initCache({ estimatedItemSize: e = L }, s) {
+    const t = {
+      items: {},
+      estimatedItemSize: e,
+      lastVisitedIndex: -1
+    };
+    return t.clearCacheAfterIndex = (i, o = !0) => {
+      var n, r;
+      t.lastVisitedIndex = Math.min(t.lastVisitedIndex, i - 1), (n = s.exposed) == null || n.getItemStyleCache(-1), o && ((r = s.proxy) == null || r.$forceUpdate());
+    }, t;
+  },
+  clearCache: !1,
+  validateProps: ({ itemSize: e }) => {
+    process.env.NODE_ENV !== "production" && typeof e != "function" && N(
+      x,
+      `
+          itemSize is required as function, but the given value was ${typeof e}
+        `
+    );
+  }
+});
+export {
+  R as default
+};