@vtable-guild/vtable-guild 2.2.2 → 2.3.0

package/dist/core/src/components/VirtualList/VirtualList.mjs

@@ -0,0 +1,373 @@
+import He from "./Filler.mjs";
+import Me from "./hooks/useChildren.mjs";
+import be from "./hooks/useDiffItem.mjs";
+import Re from "./hooks/useFrameWheel.mjs";
+import { useGetSize as ze } from "./hooks/useGetSize.mjs";
+import Be from "./hooks/useHeights.mjs";
+import Te from "./hooks/useMobileTouchMove.mjs";
+import we from "./hooks/useScrollDrag.mjs";
+import Ce from "./hooks/useScrollTo.mjs";
+import oe from "./VirtualScrollBar.mjs";
+import { getSpinSize as ne } from "./utils/scrollbarUtil.mjs";
+import { defineComponent as Ie, computed as M, watch as B, shallowRef as U, ref as u, unref as Ve, toRaw as Ae, onBeforeUnmount as We, createVNode as P } from "vue";
+const ie = [], Le = {
+  overflowY: "auto",
+  overflowAnchor: "none"
+};
+function Fe(t) {
+  const s = {};
+  for (const c of Object.keys(t))
+    c.startsWith("on") || (s[c] = t[c]);
+  return s;
+}
+function re(t, s) {
+  let c = 0, T = t.length - 1, w = t.length;
+  for (; c <= T; ) {
+    const y = Math.floor((c + T) / 2);
+    t[y] >= s ? (w = y, T = y - 1) : c = y + 1;
+  }
+  return w;
+}
+function Ke(t) {
+  const {
+    dataLength: s,
+    offsetTop: c,
+    height: T,
+    itemHeight: w,
+    getItemHeight: y
+  } = t, f = new Array(s);
+  let L = 0;
+  for (let o = 0; o < s; o += 1)
+    L += y(o) ?? w, f[o] = L;
+  let b = re(f, c);
+  b >= s && (b = 0);
+  const x = c + T;
+  let C = re(f, x + 1);
+  return C >= s && (C = s - 1), C = Math.min(C + 1, s - 1), {
+    scrollHeight: L,
+    start: b,
+    end: C,
+    offset: b === 0 ? 0 : f[b - 1]
+  };
+}
+const qe = /* @__PURE__ */ Ie({
+  name: "VirtualList",
+  props: {
+    prefixCls: {
+      type: String,
+      default: "vtg-virtual-list"
+    },
+    data: {
+      type: Array
+    },
+    height: Number,
+    itemHeight: Number,
+    fullHeight: {
+      type: Boolean,
+      default: !0
+    },
+    itemKey: {
+      type: [String, Number, Function],
+      required: !0
+    },
+    component: {
+      type: String,
+      default: "div"
+    },
+    direction: {
+      type: String
+    },
+    scrollWidth: Number,
+    styles: Object,
+    showScrollBar: {
+      type: [Boolean, String],
+      default: "optional"
+    },
+    virtual: {
+      type: Boolean,
+      default: !0
+    },
+    onScroll: Function,
+    onVirtualScroll: Function,
+    onVisibleChange: Function,
+    innerProps: Object,
+    extraRender: Function
+  },
+  inheritAttrs: !1,
+  setup(t, {
+    expose: s,
+    attrs: c,
+    slots: T
+  }) {
+    const w = M(() => t.itemHeight);
+    let y = t.itemKey;
+    B(() => t.itemKey, (e) => {
+      y = e;
+    });
+    const f = (e) => {
+      const l = y;
+      return typeof l == "function" ? l(e) : e?.[l];
+    }, [L, b, x, C] = Be(f), o = U(t?.data || ie);
+    B(() => t.data, () => {
+      o.value = t?.data || ie;
+    });
+    const F = M(() => !!(t.virtual !== !1 && t.height && t.itemHeight)), v = M(() => {
+      const e = o.value;
+      return F.value && e && (t.itemHeight * e.length > t.height || !!t.scrollWidth);
+    }), R = u(), _ = u(), q = u(), k = u(!1), G = U(), J = U(), h = u(0), i = u(0), $ = u(!1), Q = u(0), Z = u(0), g = u(t.scrollWidth || 0), r = u(0), m = u(0), H = u(0), I = u(void 0);
+    function V(e) {
+      let l;
+      typeof e == "function" ? l = e(h.value) : l = e;
+      const a = r.value - t.height, n = Math.max(0, Math.min(l, a || 0));
+      R.value && (R.value.scrollTop = n), h.value = n;
+    }
+    B([v, F, h, o, C, () => t.height], () => {
+      if (!F.value) {
+        r.value = 0, m.value = 0, H.value = o.value.length - 1, I.value = void 0;
+        return;
+      }
+      if (!v.value) {
+        r.value = _.value?.offsetHeight || 0, m.value = 0, H.value = o.value.length - 1, I.value = void 0;
+        return;
+      }
+      const {
+        itemHeight: e,
+        height: l
+      } = t, a = o.value.length;
+      if (!a) {
+        r.value = 0, m.value = 0, H.value = -1, I.value = 0;
+        return;
+      }
+      if (Ve(x.id) === 0) {
+        const z = e, ye = l, X = Math.max(0, Math.floor(h.value / z)), xe = X * z;
+        let Y = X + Math.ceil(ye / z);
+        Y = Math.min(Y + 1, a - 1), r.value = a * z, m.value = X, H.value = Y, I.value = xe;
+        return;
+      }
+      const n = Ae(o.value), W = Ke({
+        dataLength: a,
+        offsetTop: h.value,
+        height: l,
+        itemHeight: e,
+        getItemHeight(z) {
+          return x.get(f(n[z]));
+        }
+      });
+      r.value = W.scrollHeight, m.value = W.start, H.value = W.end, I.value = W.offset;
+    }, {
+      immediate: !0
+    }), B(r, () => {
+      const e = x.getRecord();
+      if (e.size === 1) {
+        const l = Array.from(e.keys())[0], a = e.get(l), n = o.value[m.value];
+        if (n && a === void 0 && f(n) === l) {
+          const W = x.get(l) - t.itemHeight;
+          V((z) => z + W);
+        }
+      }
+      if (F.value && t.height) {
+        const l = Math.max(0, r.value - t.height);
+        h.value > l && V(l);
+      }
+      x.resetRecord();
+    });
+    const S = u({
+      width: 0,
+      height: t.height || 0
+    });
+    let A = null, K = null;
+    const ue = (e) => {
+      K !== e && (A && K && A.unobserve(K), K = e, e && (A || (A = new ResizeObserver((l) => {
+        const a = l[0];
+        if (a) {
+          const n = a.target;
+          S.value = {
+            width: n.offsetWidth,
+            height: n.offsetHeight
+          }, g.value = t.scrollWidth ?? n.offsetWidth;
+        }
+      })), A.observe(e)));
+    };
+    We(() => {
+      A?.disconnect(), A = null, K = null;
+    });
+    const d = M(() => t.direction === "rtl"), D = () => ({
+      x: d.value ? -i.value : i.value,
+      y: h.value
+    }), E = u(D()), j = (e) => {
+      if (t.onVirtualScroll) {
+        const l = {
+          ...D(),
+          ...e
+        };
+        (E.value.x !== l.x || E.value.y !== l.y) && (t.onVirtualScroll(l), E.value = l);
+      }
+    }, O = M(() => Math.max(0, (g.value || 0) - S.value.width)), ce = M(() => h.value === 0), se = M(() => h.value + t.height >= r.value), ve = M(() => i.value === 0), he = M(() => i.value >= O.value), N = (e) => Math.max(0, Math.min(e, O.value)), p = () => {
+      G.value?.delayHidden(), J.value?.delayHidden();
+    }, [fe] = Re(v, ce, se, ve, he, O.value > 0, (e, l) => {
+      if (l) {
+        const a = N(d.value ? i.value - e : i.value + e);
+        i.value = a, j({
+          x: d.value ? -a : a
+        });
+      } else
+        V((a) => a + e);
+    });
+    Te(v, R, (e, l) => {
+      if (e) {
+        const a = N(d.value ? i.value - l : i.value + l);
+        return i.value = a, j({
+          x: d.value ? -a : a
+        }), !0;
+      } else
+        return V((a) => a + l), !0;
+    }), we(v, R, (e) => {
+      V((l) => l + e);
+    });
+    const ee = (e, l) => {
+      l ? (i.value = e, j({
+        x: d.value ? -e : e
+      })) : V(e);
+    }, te = () => {
+      $.value = !0;
+    }, le = () => {
+      $.value = !1;
+    };
+    be(o, f), B([() => t.height, r, v, () => S.value.height], () => {
+      v.value && t.height && r.value && (Q.value = ne(S.value.height, r.value));
+    }, {
+      immediate: !0
+    }), B([() => S.value.width, g], () => {
+      v.value && g.value && (Z.value = ne(S.value.width, g.value));
+    }, {
+      immediate: !0
+    }), B(() => t.scrollWidth, (e) => {
+      g.value = e ?? S.value.width, i.value = N(i.value);
+    }, {
+      immediate: !0
+    });
+    function de(e) {
+      const l = e.currentTarget.scrollTop;
+      !F.value || !v.value ? h.value = l : l !== h.value && V(l), t.onScroll?.(e), j();
+    }
+    const [ae, ge] = Ce(R, o, x, w, f, () => b(!0), (e) => {
+      const l = ge(), a = Math.max(r.value, l) - t.height, n = Math.max(0, Math.min(e, a || 0));
+      R.value && (R.value.scrollTop = n), h.value = n;
+    }, p);
+    s({
+      nativeElement: q,
+      getScrollInfo: D,
+      getHorizontalRange: () => O.value,
+      scrollTo: (e) => {
+        function l(a) {
+          return a && typeof a == "object" && ("left" in a || "top" in a);
+        }
+        l(e) ? (e.left !== void 0 && (i.value = N(e.left)), ae(e.top)) : ae(e);
+      }
+    }), B([m, H, o], () => {
+      if (t.onVisibleChange) {
+        const e = o.value.slice(m.value, H.value + 1);
+        t.onVisibleChange(e, o.value);
+      }
+    }, {
+      flush: "post"
+    });
+    const me = ze(o, f, x, w), Se = Me(o, m, H, g, i, L, (e, l, a) => T.default?.({
+      item: e,
+      index: l,
+      ...a
+    }), {
+      getKey: f
+    });
+    return () => {
+      const e = {};
+      t.height && (e[t.fullHeight ? "height" : "maxHeight"] = `${t.height}px`, Object.assign(e, Le), v.value && (e.overflowY = "hidden", O.value > 0 && (e.overflowX = "hidden"), $.value && (e.pointerEvents = "none")));
+      const l = t.extraRender?.({
+        start: m.value,
+        end: H.value,
+        virtual: v.value,
+        offsetX: i.value,
+        offsetY: I.value || 0,
+        rtl: d.value,
+        getSize: me
+      }), a = t.component;
+      return P("div", {
+        ref: q,
+        ...Fe(c),
+        style: {
+          position: "relative",
+          ...c.style
+        },
+        dir: d.value ? "rtl" : void 0,
+        class: [t.prefixCls, {
+          [`${t.prefixCls}-rtl`]: d.value
+        }, c.class],
+        onMouseenter: () => {
+          k.value = !0;
+        },
+        onMouseleave: () => {
+          k.value = !1;
+        }
+      }, [P(a, {
+        class: `${t.prefixCls}-holder`,
+        style: e,
+        ref: (n) => {
+          R.value = n?.$el ?? n, ue(n?.$el ?? n);
+        },
+        onScroll: de,
+        onWheel: fe,
+        onMouseenter: p
+      }, {
+        default: () => [P(He, {
+          prefixCls: t.prefixCls,
+          height: r.value,
+          offsetX: i.value,
+          offsetY: I.value,
+          scrollWidth: g.value,
+          onInnerResize: b,
+          ref: _,
+          innerProps: t.innerProps,
+          rtl: d.value,
+          extra: l
+        }, {
+          default: () => [Se.value]
+        })]
+      }), v.value && r.value > (t.height || 0) && P(oe, {
+        ref: G,
+        prefixCls: t.prefixCls,
+        scrollOffset: h.value,
+        scrollRange: r.value,
+        rtl: d.value,
+        onScroll: ee,
+        onStartMove: te,
+        onStopMove: le,
+        spinSize: Q.value,
+        containerSize: S.value.height,
+        active: k.value,
+        showScrollBar: t.showScrollBar,
+        style: t.styles?.verticalScrollBar,
+        thumbStyle: t.styles?.verticalScrollBarThumb
+      }), v.value && g.value > S.value.width && P(oe, {
+        ref: J,
+        prefixCls: t.prefixCls,
+        scrollOffset: i.value,
+        scrollRange: g.value,
+        rtl: d.value,
+        onScroll: ee,
+        onStartMove: te,
+        onStopMove: le,
+        spinSize: Z.value,
+        containerSize: S.value.width,
+        horizontal: !0,
+        active: k.value,
+        showScrollBar: t.showScrollBar,
+        style: t.styles?.horizontalScrollBar,
+        thumbStyle: t.styles?.horizontalScrollBarThumb
+      })]);
+    };
+  }
+});
+export {
+  qe as default,
+  Ke as getMeasuredVisibleRange
+};

package/dist/core/src/components/VirtualList/VirtualScrollBar.mjs

@@ -0,0 +1,216 @@
+import { defineComponent as H, ref as v, computed as d, shallowRef as T, watch as R, onMounted as _, onUnmounted as k, createVNode as j } from "vue";
+function C(e, f) {
+  return ("touches" in e ? e.touches[0] : e)[f ? "pageX" : "pageY"] - window[f ? "scrollX" : "scrollY"];
+}
+const I = /* @__PURE__ */ H({
+  name: "VirtualScrollBar",
+  props: {
+    prefixCls: {
+      type: String,
+      required: !0
+    },
+    scrollOffset: {
+      type: Number,
+      required: !0
+    },
+    scrollRange: {
+      type: Number,
+      required: !0
+    },
+    rtl: {
+      type: Boolean,
+      required: !0
+    },
+    onScroll: {
+      type: Function,
+      required: !0
+    },
+    onStartMove: {
+      type: Function,
+      required: !0
+    },
+    onStopMove: {
+      type: Function,
+      required: !0
+    },
+    horizontal: {
+      type: Boolean,
+      default: void 0
+    },
+    style: {
+      type: Object,
+      default: void 0
+    },
+    thumbStyle: {
+      type: Object,
+      default: void 0
+    },
+    spinSize: {
+      type: Number,
+      required: !0
+    },
+    containerSize: {
+      type: Number,
+      required: !0
+    },
+    active: {
+      type: Boolean,
+      default: !1
+    },
+    showScrollBar: {
+      type: [Boolean, String],
+      default: void 0
+    }
+  },
+  setup(e, {
+    expose: f
+  }) {
+    const n = v(!1), m = v(!1), h = v(null), g = v(null), b = d(() => !e.rtl), w = T(), L = T(), S = v(e.showScrollBar === !0 || e.showScrollBar === "optional");
+    let i = null;
+    const y = () => {
+      e.showScrollBar === !0 || e.showScrollBar === !1 || e.showScrollBar === "hover" || (i && clearTimeout(i), S.value = !0, i = setTimeout(() => {
+        S.value = !1;
+      }, 3e3));
+    }, p = d(() => e.showScrollBar === !0 ? !0 : e.showScrollBar === !1 ? !1 : e.showScrollBar === "hover" ? e.active || n.value : S.value || n.value), M = d(() => e.scrollRange - e.containerSize || 0), x = d(() => e.containerSize - e.spinSize || 0), s = d(() => e.scrollOffset === 0 || M.value === 0 ? 0 : e.scrollOffset / M.value * x.value), E = T({
+      top: s.value,
+      dragging: n.value,
+      pageY: h.value,
+      startTop: g.value
+    });
+    R([s, n, h, g], () => {
+      E.value = {
+        top: s.value,
+        dragging: n.value,
+        pageY: h.value,
+        startTop: g.value
+      };
+    });
+    const D = (t) => {
+      t.stopPropagation(), t.preventDefault();
+    }, B = (t) => {
+      n.value = !0, h.value = C(t, e.horizontal || !1), g.value = E.value.top, e.onStartMove?.(), t.stopPropagation(), t.preventDefault();
+    };
+    return _(() => {
+      const t = (a) => {
+        a.preventDefault();
+      }, l = w.value, o = L.value;
+      l && o && (l.addEventListener("touchstart", t, {
+        passive: !1
+      }), o.addEventListener("touchstart", B, {
+        passive: !1
+      }), k(() => {
+        l.removeEventListener("touchstart", t), o.removeEventListener("touchstart", B);
+      }));
+    }), R(n, (t, l, o) => {
+      if (t) {
+        let a = null;
+        const r = (F) => {
+          const {
+            dragging: N,
+            pageY: P,
+            startTop: V
+          } = E.value;
+          a !== null && cancelAnimationFrame(a);
+          const O = w.value.getBoundingClientRect(), X = e.containerSize / (e.horizontal ? O.width : O.height);
+          if (N) {
+            const q = (C(F, e.horizontal || !1) - (P || 0)) * X;
+            let z = V || 0;
+            !b.value && e.horizontal ? z -= q : z += q;
+            const $ = M.value, Y = x.value, A = Y ? z / Y : 0;
+            let c = Math.ceil(A * $);
+            c = Math.max(c, 0), c = Math.min(c, $), a = requestAnimationFrame(() => {
+              e.onScroll?.(c, e.horizontal);
+            });
+          }
+        }, u = () => {
+          n.value = !1, e.onStopMove();
+        };
+        window.addEventListener("mousemove", r, {
+          passive: !0
+        }), window.addEventListener("touchmove", r, {
+          passive: !0
+        }), window.addEventListener("mouseup", u, {
+          passive: !0
+        }), window.addEventListener("touchend", u, {
+          passive: !0
+        }), o(() => {
+          window.removeEventListener("mousemove", r), window.removeEventListener("touchmove", r), window.removeEventListener("mouseup", u), window.removeEventListener("touchend", u), a !== null && cancelAnimationFrame(a);
+        });
+      }
+    }), R(() => e.scrollOffset, (t, l, o) => {
+      y(), o(() => {
+        i && clearTimeout(i);
+      });
+    }), f({
+      delayHidden: y
+    }), () => {
+      const {
+        prefixCls: t,
+        horizontal: l
+      } = e, o = `${t}-scrollbar`, a = m.value || n.value, r = {
+        position: "absolute",
+        opacity: p.value ? 1 : 0,
+        pointerEvents: p.value ? void 0 : "none",
+        transition: "opacity 300ms"
+      }, u = {
+        position: "absolute",
+        borderRadius: "var(--vtg-scrollbar-thumb-radius, 3px)",
+        background: a ? "var(--vtg-scrollbar-thumb-hover-bg, rgb(0 0 0 / 25%))" : "var(--vtg-scrollbar-thumb-bg, rgb(0 0 0 / 15%))",
+        cursor: "pointer",
+        userSelect: "none",
+        transition: "background-color 200ms"
+      };
+      return l ? (Object.assign(r, {
+        height: "var(--vtg-scrollbar-thumb-width, 6px)",
+        left: 0,
+        right: 0,
+        bottom: 0
+      }), Object.assign(u, {
+        height: "100%",
+        width: `${e.spinSize}px`,
+        [b.value ? "left" : "right"]: `${s.value}px`
+      })) : (Object.assign(r, {
+        width: "var(--vtg-scrollbar-thumb-width, 6px)",
+        top: 0,
+        bottom: 0,
+        [b.value ? "right" : "left"]: 0
+      }), Object.assign(u, {
+        width: "100%",
+        height: `${e.spinSize}px`,
+        top: `${s.value}px`
+      })), j("div", {
+        ref: w,
+        class: [o, {
+          [`${o}-horizontal`]: l,
+          [`${o}-vertical`]: !l,
+          [`${o}-visible`]: p.value
+        }],
+        style: {
+          ...r,
+          ...e.style
+        },
+        onMousedown: D,
+        onMousemove: y
+      }, [j("div", {
+        ref: L,
+        class: [`${o}-thumb`, {
+          [`${o}-thumb-moving`]: n.value
+        }],
+        style: {
+          ...u,
+          ...e.thumbStyle
+        },
+        onMousedown: B,
+        onMouseenter: () => {
+          m.value = !0;
+        },
+        onMouseleave: () => {
+          m.value = !1;
+        }
+      })]);
+    };
+  }
+});
+export {
+  I as default
+};

package/dist/core/src/components/VirtualList/hooks/useChildren.mjs

@@ -0,0 +1,21 @@
+import s from "../Item.mjs";
+import { computed as v, createVNode as m, isVNode as y } from "vue";
+function b(e) {
+  return typeof e == "function" || Object.prototype.toString.call(e) === "[object Object]" && !y(e);
+}
+function N(e, u, r, l, n, c, a, { getKey: f }) {
+  return v(() => e.value.slice(u.value, r.value + 1).map((t, i) => {
+    const o = a(t, u.value + i, {
+      style: { width: `${l.value}px` },
+      offsetX: n.value
+    }), p = f(t);
+    return m(
+      s,
+      { key: p, setRef: (d) => c(t, d) },
+      b(o) ? o : { default: () => [o] }
+    );
+  }));
+}
+export {
+  N as default
+};

package/dist/core/src/components/VirtualList/hooks/useDiffItem.mjs

@@ -0,0 +1,16 @@
+import { findListDiffIndex as r } from "../utils/algorithmUtil.mjs";
+import { shallowRef as n, watch as l } from "vue";
+function v(e, u, m) {
+  const f = n(e.value), i = n();
+  return l(
+    e,
+    (t) => {
+      const o = r(f.value || [], e.value || [], u);
+      o?.index !== void 0 && (i.value = t[o.index]), f.value = t;
+    },
+    { immediate: !0 }
+  ), i;
+}
+export {
+  v as default
+};

package/dist/core/src/components/VirtualList/hooks/useFrameWheel.mjs

@@ -0,0 +1,48 @@
+import h from "../utils/isFirefox.mjs";
+import y from "./useOriginScroll.mjs";
+import { ref as u, onUnmounted as W } from "vue";
+function _(c, d, p, x, A, D, m) {
+  const r = u(0);
+  let t = null;
+  const v = u(null), F = u(!1), b = y(
+    d,
+    p,
+    x,
+    A
+  );
+  function g(e, l) {
+    if (t && cancelAnimationFrame(t), b(!1, l)) return;
+    const a = e;
+    if (!a._virtualHandled) a._virtualHandled = !0;
+    else return;
+    r.value += l, v.value = l, h || e.preventDefault(), t = requestAnimationFrame(() => {
+      const o = F.value ? 10 : 1;
+      m(r.value * o, !1), r.value = 0;
+    });
+  }
+  function M(e, l) {
+    m(l, !0), h || e.preventDefault();
+  }
+  const n = u(null);
+  let i = null;
+  function R(e) {
+    if (!c.value) return;
+    i && cancelAnimationFrame(i), i = requestAnimationFrame(() => {
+      n.value = null;
+    });
+    const { deltaX: l, deltaY: a, shiftKey: o } = e;
+    let f = l, s = a;
+    (n.value === "sx" || !n.value && o && a && !l) && (f = a, s = 0, n.value = "sx");
+    const X = Math.abs(f), w = Math.abs(s);
+    n.value === null && (n.value = D && X > w ? "x" : "y"), n.value === "y" ? g(e, s) : M(e, f);
+  }
+  function S(e) {
+    c.value && (F.value = e.detail === v.value);
+  }
+  return W(() => {
+    t && cancelAnimationFrame(t), i && cancelAnimationFrame(i);
+  }), [R, S];
+}
+export {
+  _ as default
+};

package/dist/core/src/components/VirtualList/hooks/useGetSize.mjs

@@ -0,0 +1,25 @@
+import { watch as g } from "vue";
+function k(c, a, v, d) {
+  let o = /* @__PURE__ */ new Map(), t = [];
+  return g([c, () => v.id.value, d], () => {
+    o = /* @__PURE__ */ new Map(), t = [];
+  }), (u, f = u) => {
+    let n = o.get(u), i = o.get(f);
+    if (n === void 0 || i === void 0) {
+      const r = c.value.length;
+      for (let e = t.length; e < r; e += 1) {
+        const s = c.value[e], l = a(s);
+        o.set(l, e);
+        const p = v.get(l) ?? d.value ?? 0;
+        if (t[e] = (t[e - 1] || 0) + p, l === u && (n = e), l === f && (i = e), n !== void 0 && i !== void 0) break;
+      }
+    }
+    return {
+      top: t[(n ?? 0) - 1] || 0,
+      bottom: t[i ?? 0]
+    };
+  };
+}
+export {
+  k as useGetSize
+};