x-next 1.0.1 → 1.1.0

package/dist/es/components/trigger/utils.js

@@ -0,0 +1,303 @@
+import { isArray as c } from "../../_utils/is.js";
+import { getDocumentSize as M } from "../../_utils/dom.js";
+const T = () => {
+  const { height: h, width: t } = M();
+  return {
+    width: Math.min(t, window.innerWidth),
+    height: Math.min(h, window.innerHeight)
+  };
+}, W = (h, t) => {
+  const l = h.getBoundingClientRect();
+  return {
+    top: l.top,
+    bottom: l.bottom,
+    left: l.left,
+    right: l.right,
+    scrollTop: l.top - t.top,
+    scrollBottom: l.bottom - t.top,
+    scrollLeft: l.left - t.left,
+    scrollRight: l.right - t.left,
+    width: h.offsetWidth ?? h.clientWidth,
+    height: h.offsetHeight ?? h.clientHeight
+  };
+}, m = 8, u = (h, t, l) => l > t || t <= m * 2 ? t / 2 : Math.min(Math.max(h, m), t - m), L = (h) => {
+  switch (h) {
+    case "top":
+    case "tl":
+    case "tr":
+      return "top";
+    case "bottom":
+    case "bl":
+    case "br":
+      return "bottom";
+    case "left":
+    case "lt":
+    case "lb":
+      return "left";
+    case "right":
+    case "rt":
+    case "rb":
+      return "right";
+    default:
+      return "top";
+  }
+}, w = (h, t) => {
+  switch (t) {
+    case "top":
+      switch (h) {
+        case "bottom":
+          return "top";
+        case "bl":
+          return "tl";
+        case "br":
+          return "tr";
+        default:
+          return h;
+      }
+    case "bottom":
+      switch (h) {
+        case "top":
+          return "bottom";
+        case "tl":
+          return "bl";
+        case "tr":
+          return "br";
+        default:
+          return h;
+      }
+    case "left":
+      switch (h) {
+        case "right":
+          return "left";
+        case "rt":
+          return "lt";
+        case "rb":
+          return "lb";
+        default:
+          return h;
+      }
+    case "right":
+      switch (h) {
+        case "left":
+          return "right";
+        case "lt":
+          return "rt";
+        case "lb":
+          return "rb";
+        default:
+          return h;
+      }
+    default:
+      return h;
+  }
+}, B = (h, t, {
+  containerRect: l,
+  triggerRect: e,
+  popupRect: f,
+  offset: r,
+  translate: n
+}) => {
+  const a = L(h), s = T(), d = {
+    top: l.top + t.top,
+    // prettier-ignore
+    bottom: s.height - (l.top + t.top + f.height),
+    left: l.left + t.left,
+    // prettier-ignore
+    right: s.width - (l.left + t.left + f.width)
+  };
+  let i = h;
+  if (a === "top" && d.top < 0)
+    if (e.top > f.height)
+      t.top = -l.top;
+    else {
+      const o = b("bottom", e, f, {
+        offset: r,
+        translate: n
+      });
+      s.height - (l.top + o.top + f.height) > 0 && (i = w(h, "bottom"), t.top = o.top);
+    }
+  if (a === "bottom" && d.bottom < 0)
+    if (s.height - e.bottom > f.height)
+      t.top = -l.top + (s.height - f.height);
+    else {
+      const o = b("top", e, f, {
+        offset: r,
+        translate: n
+      });
+      l.top + o.top > 0 && (i = w(h, "top"), t.top = o.top);
+    }
+  if (a === "left" && d.left < 0)
+    if (e.left > f.width)
+      t.left = -l.left;
+    else {
+      const o = b("right", e, f, {
+        offset: r,
+        translate: n
+      });
+      s.width - (l.left + o.left + f.width) > 0 && (i = w(h, "right"), t.left = o.left);
+    }
+  if (a === "right" && d.right < 0)
+    if (s.width - e.right > f.width)
+      t.left = -l.left + (s.width - f.width);
+    else {
+      const o = b("left", e, f, {
+        offset: r,
+        translate: n
+      });
+      l.left + o.left > 0 && (i = w(h, "left"), t.left = o.left);
+    }
+  return (a === "top" || a === "bottom") && (d.left < 0 ? t.left = -l.left : d.right < 0 && (t.left = -l.left + (s.width - f.width))), (a === "left" || a === "right") && (d.top < 0 ? t.top = -l.top : d.bottom < 0 && (t.top = -l.top + (s.height - f.height))), {
+    popupPosition: t,
+    position: i
+  };
+}, b = (h, t, l, {
+  offset: e = 0,
+  translate: f = [0, 0]
+} = {}) => {
+  const r = (c(f) ? f : f[h]) ?? [0, 0];
+  switch (h) {
+    case "top":
+      return {
+        left: t.scrollLeft + Math.round(t.width / 2) - Math.round(l.width / 2) + r[0],
+        top: t.scrollTop - l.height - e + r[1]
+      };
+    case "tl":
+      return {
+        left: t.scrollLeft + r[0],
+        top: t.scrollTop - l.height - e + r[1]
+      };
+    case "tr":
+      return {
+        left: t.scrollRight - l.width + r[0],
+        top: t.scrollTop - l.height - e + r[1]
+      };
+    case "bottom":
+      return {
+        left: t.scrollLeft + Math.round(t.width / 2) - Math.round(l.width / 2) + r[0],
+        top: t.scrollBottom + e + r[1]
+      };
+    case "bl":
+      return {
+        left: t.scrollLeft + r[0],
+        top: t.scrollBottom + e + r[1]
+      };
+    case "br":
+      return {
+        left: t.scrollRight - l.width + r[0],
+        top: t.scrollBottom + e + r[1]
+      };
+    case "left":
+      return {
+        left: t.scrollLeft - l.width - e + r[0],
+        top: t.scrollTop + Math.round(t.height / 2) - Math.round(l.height / 2) + r[1]
+      };
+    case "lt":
+      return {
+        left: t.scrollLeft - l.width - e + r[0],
+        top: t.scrollTop + r[1]
+      };
+    case "lb":
+      return {
+        left: t.scrollLeft - l.width - e + r[0],
+        top: t.scrollBottom - l.height + r[1]
+      };
+    case "right":
+      return {
+        left: t.scrollRight + e + r[0],
+        top: t.scrollTop + Math.round(t.height / 2) - Math.round(l.height / 2) + r[1]
+      };
+    case "rt":
+      return {
+        left: t.scrollRight + e + r[0],
+        top: t.scrollTop + r[1]
+      };
+    case "rb":
+      return {
+        left: t.scrollRight + e + r[0],
+        top: t.scrollBottom - l.height + r[1]
+      };
+    default:
+      return {
+        left: 0,
+        top: 0
+      };
+  }
+}, H = (h) => {
+  let t = "0";
+  ["top", "bottom"].includes(h) ? t = "50%" : ["left", "lt", "lb", "tr", "br"].includes(h) && (t = "100%");
+  let l = "0";
+  return ["left", "right"].includes(h) ? l = "50%" : ["top", "tl", "tr", "lb", "rb"].includes(h) && (l = "100%"), `${t} ${l}`;
+}, O = (h, t, l, e, {
+  offset: f = 0,
+  translate: r = [0, 0],
+  customStyle: n = {},
+  autoFitPosition: a = !1
+} = {}) => {
+  let s = h, d = b(h, l, e, {
+    offset: f,
+    translate: r
+  });
+  if (a) {
+    const o = B(h, d, {
+      containerRect: t,
+      popupRect: e,
+      triggerRect: l,
+      offset: f,
+      translate: r
+    });
+    d = o.popupPosition, s = o.position;
+  }
+  return {
+    style: {
+      left: `${d.left}px`,
+      top: `${d.top}px`,
+      ...n
+    },
+    position: s
+  };
+}, y = (h, t, l, {
+  customStyle: e = {}
+}) => {
+  if (["top", "tl", "tr", "bottom", "bl", "br"].includes(h)) {
+    let r = Math.abs(
+      t.scrollLeft + t.width / 2 - l.scrollLeft
+    );
+    return r = u(r, l.width, t.width), ["top", "tl", "tr"].includes(h) ? {
+      left: `${r}px`,
+      bottom: "0",
+      transform: "translate(-50%,50%) rotate(45deg)",
+      ...e
+    } : {
+      left: `${r}px`,
+      top: "0",
+      transform: "translate(-50%,-50%) rotate(45deg)",
+      ...e
+    };
+  }
+  let f = Math.abs(t.scrollTop + t.height / 2 - l.scrollTop);
+  return f = u(f, l.height, t.height), ["left", "lt", "lb"].includes(h) ? {
+    top: `${f}px`,
+    right: "0",
+    transform: "translate(50%,-50%) rotate(45deg)",
+    ...e
+  } : {
+    top: `${f}px`,
+    left: "0",
+    transform: "translate(-50%,-50%) rotate(45deg)",
+    ...e
+  };
+}, x = (h) => h.scrollHeight > h.offsetHeight || h.scrollWidth > h.offsetWidth, A = (h) => {
+  const t = [];
+  let l = h;
+  for (; l && l !== document.documentElement; )
+    x(l) && t.push(l), l = l.parentElement ?? void 0;
+  return t;
+};
+export {
+  y as getArrowStyle,
+  W as getElementScrollRect,
+  O as getPopupStyle,
+  A as getScrollElements,
+  H as getTransformOrigin,
+  x as isScrollElement
+};

package/dist/es/components/virtual-list-v2/hooks/use-size.js

@@ -0,0 +1,60 @@
+import { ref as z, computed as n, onMounted as O } from "vue";
+const B = ({
+  dataKeys: h,
+  contentRef: P,
+  fixedSize: _,
+  estimatedSize: i,
+  buffer: g
+}) => {
+  const I = z(0), r = /* @__PURE__ */ new Map(), l = n(() => h.value.length), a = z(0), d = n(() => {
+    const e = a.value + g.value * 3;
+    return e > l.value ? l.value : e;
+  }), v = n(() => {
+    const e = l.value - g.value * 3;
+    return e < 0 ? 0 : e;
+  }), x = (e) => {
+    e < 0 ? a.value = 0 : e > v.value ? a.value = v.value : a.value = e;
+  }, c = z(_.value), s = n(() => i.value !== 30 ? i.value : I.value || i.value), M = (e, t) => {
+    r.set(e, t);
+  }, p = (e) => {
+    if (c.value)
+      return s.value;
+    const t = h.value[e];
+    return r.get(t) ?? s.value;
+  }, w = (e) => r.has(e);
+  O(() => {
+    const e = Array.from(r.values()).reduce((t, u) => t + u, 0);
+    e > 0 && (I.value = e / r.size);
+  });
+  const R = (e) => c.value ? s.value * e : S(0, e), S = (e, t) => {
+    let u = 0;
+    for (let o = e; o < t; o++)
+      u += p(o);
+    return u;
+  }, m = n(() => c.value ? s.value * a.value : S(0, a.value)), y = (e) => {
+    const t = e >= m.value;
+    let u = Math.abs(e - m.value);
+    const o = t ? a.value : a.value - 1;
+    let f = 0;
+    for (; u > 0; )
+      u -= p(o + f), t ? f++ : f--;
+    return f;
+  }, A = (e) => {
+    const t = y(e), u = a.value + t - g.value;
+    return u < 0 ? 0 : u > v.value ? v.value : u;
+  }, F = n(() => c.value ? s.value * (l.value - d.value) : S(d.value, l.value));
+  return {
+    frontPadding: m,
+    behindPadding: F,
+    start: a,
+    end: d,
+    getStartByScroll: A,
+    setItemSize: M,
+    hasItemSize: w,
+    setStart: x,
+    getScrollOffset: R
+  };
+};
+export {
+  B as useSize
+};

package/dist/es/components/virtual-list-v2/index.js

@@ -0,0 +1,4 @@
+import r from "./virtual-list.vue.js";
+export {
+  r as default
+};

package/dist/es/components/virtual-list-v2/virtual-list-item.js

@@ -0,0 +1,35 @@
+import { defineComponent as s, getCurrentInstance as a, ref as d, onMounted as p, onBeforeUnmount as g, cloneVNode as h } from "vue";
+import { getFirstComponent as I } from "../../_utils/vue-eco.js";
+const C = /* @__PURE__ */ s({
+  name: "VirtualListItem",
+  props: {
+    hasItemSize: {
+      type: Function,
+      required: !0
+    },
+    setItemSize: {
+      type: Function,
+      required: !0
+    }
+  },
+  setup(c, {
+    slots: n
+  }) {
+    var o;
+    const f = (o = a()) == null ? void 0 : o.vnode.key, r = d(), i = () => {
+      var u, m;
+      const e = ((u = r.value) == null ? void 0 : u.$el) ?? r.value, t = ((m = e == null ? void 0 : e.getBoundingClientRect) == null ? void 0 : m.call(e).height) ?? (e == null ? void 0 : e.offsetHeight);
+      t && c.setItemSize(f, t);
+    };
+    return p(() => i()), g(() => i()), () => {
+      var t;
+      const e = I((t = n.default) == null ? void 0 : t.call(n));
+      return e ? h(e, {
+        ref: r
+      }, !0) : null;
+    };
+  }
+});
+export {
+  C as default
+};

package/dist/es/components/virtual-list-v2/virtual-list.vue.js

@@ -0,0 +1,53 @@
+import d from "./virtual-list.vue2.js";
+import { resolveComponent as m, openBlock as t, createBlock as n, resolveDynamicComponent as s, normalizeStyle as p, normalizeClass as f, withCtx as o, mergeProps as l, createElementBlock as g, Fragment as u, renderList as y, renderSlot as c } from "vue";
+import $ from "../../_virtual/_plugin-vue_export-helper.js";
+function z(e, h, C, P, S, k) {
+  const a = m("VirtualListItem");
+  return t(), n(s(e.mergedComponent.container), {
+    ref: "containerRef",
+    class: f(e.className.block),
+    style: p(e.style),
+    onScroll: e.onScroll
+  }, {
+    default: o(() => [
+      (t(), n(s(e.mergedComponent.list), l(e.listAttrs, {
+        style: e.paddingPosition === "list" ? {
+          paddingTop: `${e.frontPadding}px`,
+          paddingBottom: `${e.behindPadding}px`
+        } : {}
+      }), {
+        default: o(() => [
+          (t(), n(s(e.mergedComponent.content), l({ ref: "contentRef" }, e.contentAttrs, {
+            style: e.paddingPosition === "content" ? {
+              paddingTop: `${e.frontPadding}px`,
+              paddingBottom: `${e.behindPadding}px`
+            } : {}
+          }), {
+            default: o(() => [
+              (t(!0), g(u, null, y(e.currentList, (r, i) => (t(), n(a, {
+                key: r[e.itemKey] ?? e.start + i,
+                "has-item-size": e.hasItemSize,
+                "set-item-size": e.setItemSize
+              }, {
+                default: o(() => [
+                  c(e.$slots, "item", {
+                    item: r,
+                    index: e.start + i
+                  })
+                ]),
+                _: 2
+              }, 1032, ["has-item-size", "set-item-size"]))), 128))
+            ]),
+            _: 3
+          }, 16, ["style"]))
+        ]),
+        _: 3
+      }, 16, ["style"]))
+    ]),
+    _: 3
+  }, 40, ["class", "style", "onScroll"]);
+}
+const b = /* @__PURE__ */ $(d, [["render", z]]);
+export {
+  b as default
+};

package/dist/es/components/virtual-list-v2/virtual-list.vue2.js

@@ -0,0 +1,126 @@
+import { defineComponent as P, toRefs as R, computed as i, ref as y, nextTick as S } from "vue";
+import { useSize as H } from "./hooks/use-size.js";
+import M from "./virtual-list-item.js";
+import { isObject as V, isNumber as b } from "../../_utils/is.js";
+import { getClassNameMixin as w } from "../../_utils/config.js";
+const J = P({
+  name: "VirtualList",
+  components: { VirtualListItem: M },
+  props: {
+    height: {
+      type: [Number, String],
+      default: 200
+    },
+    data: {
+      type: Array,
+      default: () => []
+    },
+    threshold: {
+      type: Number,
+      default: 0
+    },
+    itemKey: {
+      type: String,
+      default: "key"
+    },
+    fixedSize: {
+      type: Boolean,
+      default: !1
+    },
+    estimatedSize: {
+      type: Number,
+      default: 30
+    },
+    buffer: {
+      type: Number,
+      default: 10
+    },
+    component: {
+      type: [String, Object],
+      default: "div"
+    },
+    listAttrs: {
+      type: Object
+    },
+    contentAttrs: {
+      type: Object
+    },
+    paddingPosition: {
+      type: String,
+      default: "content"
+    }
+  },
+  emits: {
+    scroll: (e) => !0,
+    reachBottom: (e) => !0
+  },
+  setup(e, { emit: u }) {
+    const { data: r, itemKey: x, fixedSize: T, estimatedSize: z, buffer: f, height: s } = R(e), N = w("virtual-list"), O = i(() => V(e.component) ? {
+      container: "div",
+      list: "div",
+      content: "div",
+      ...e.component
+    } : {
+      container: e.component,
+      list: "div",
+      content: "div"
+    }), o = y(), d = y(), _ = i(() => ({
+      height: b(s.value) ? `${s.value}px` : s.value,
+      overflow: "auto"
+    })), m = i(
+      () => r.value.map((t, l) => t[x.value] ?? l)
+    ), {
+      frontPadding: j,
+      behindPadding: B,
+      start: c,
+      end: k,
+      getStartByScroll: A,
+      setItemSize: C,
+      hasItemSize: I,
+      setStart: v,
+      getScrollOffset: p
+    } = H({
+      dataKeys: m,
+      contentRef: d,
+      fixedSize: T,
+      estimatedSize: z,
+      buffer: f
+    }), K = i(() => e.threshold && r.value.length <= e.threshold ? r.value : r.value.slice(c.value, k.value)), L = (t) => {
+      const { scrollTop: l, scrollHeight: n, offsetHeight: a } = t.target, g = A(l);
+      g !== c.value && (v(g), S(() => {
+        h(l);
+      })), u("scroll", t), Math.floor(n - (l + a)) <= 0 && u("reachBottom", t);
+    }, h = (t) => {
+      if (o.value)
+        if (b(t))
+          o.value.scrollTop = t;
+        else {
+          const { align: l = "top" } = t, n = t.index ?? m.value.indexOf(t.key ?? "");
+          v(n - f.value), o.value.scrollTop = p(n), S(() => {
+            if (o.value) {
+              const a = p(n);
+              a !== o.value.scrollTop && (o.value.scrollTop = a);
+            }
+          });
+        }
+    };
+    return {
+      className: N,
+      containerRef: o,
+      contentRef: d,
+      frontPadding: j,
+      currentList: K,
+      behindPadding: B,
+      onScroll: L,
+      setItemSize: C,
+      hasItemSize: I,
+      start: c,
+      scrollTo: h,
+      style: _,
+      mergedComponent: O
+    };
+  }
+});
+export {
+  J as default
+};