@king-one/antdv 1.2.21 → 2.0.0

package/dist/es/components/scale-virtual-list/hooks/useVirtualList.mjs

@@ -1,169 +1,220 @@
-import { createEventHook as x } from "@vueuse/shared";
-import { ref as H, shallowRef as _, watch as F, computed as y } from "vue";
-import { useElementSize as X } from "@vueuse/core";
-function I(r, t) {
-  const { containerStyle: a, wrapperProps: n, scrollTo: c, calculateRange: e, currentList: o, containerRef: l, scaleTo: u, state: s, onUpdate: f } = "itemHeight" in t ? Y(t, r) : S(t, r);
+import { createEventHook } from "@vueuse/shared";
+import { ref, shallowRef, watch, computed } from "vue";
+import { useElementSize } from "@vueuse/core";
+function useVirtualList(list, options) {
+  const { containerStyle, wrapperProps, scrollTo, calculateRange, currentList, containerRef, scaleTo, state, onUpdate } = "itemHeight" in options ? useVerticalVirtualList(options, list) : useHorizontalVirtualList(options, list);
   return {
-    onUpdate: f,
-    state: s,
-    scaleTo: u,
-    list: o,
-    scrollTo: c,
+    onUpdate,
+    state,
+    scaleTo,
+    list: currentList,
+    scrollTo,
     containerProps: {
-      ref: l,
+      ref: containerRef,
       onScroll: () => {
-        e();
+        calculateRange();
       },
-      style: a
+      style: containerStyle
     },
-    wrapperProps: n
+    wrapperProps
   };
 }
-function O(r) {
-  const t = H(null), a = X(t), n = H([]), c = _(r);
-  return { state: H({ start: 0, end: 10, current: 0, scale: 1 }), source: c, currentList: n, size: a, containerRef: t };
+function useVirtualListResources(list) {
+  const containerRef = ref(null);
+  const size = useElementSize(containerRef);
+  const currentList = ref([]);
+  const source = shallowRef(list);
+  const state = ref({ start: 0, end: 10, current: 0, scale: 1 });
+  return { state, source, currentList, size, containerRef };
 }
-function z(r, t, a) {
-  return (n) => {
-    const { start: c = 0, scale: e = 1 } = r.value;
-    if (typeof a == "number")
-      return Math.ceil(n / (a * e));
-    let o = 0, l = 0;
-    for (let u = c; u < t.value.length; u++) {
-      const s = a(u) * e;
-      if (o += s, l = u, o > n)
+function createGetViewCapacity(state, source, itemSize) {
+  return (containerSize) => {
+    const { start = 0, scale = 1 } = state.value;
+    if (typeof itemSize === "number")
+      return Math.ceil(containerSize / (itemSize * scale));
+    let sum = 0;
+    let capacity = 0;
+    for (let i = start; i < source.value.length; i++) {
+      const size = itemSize(i) * scale;
+      sum += size;
+      capacity = i;
+      if (sum > containerSize)
         break;
     }
-    return l - c;
+    return capacity - start;
   };
 }
-function P(r, t, a) {
-  return (n) => {
-    const { scale: c = 1 } = a.value;
-    if (typeof t == "number")
-      return Math.floor(n / (t * c)) + 1;
-    let e = 0, o = 0;
-    for (let l = 0; l < r.value.length; l++) {
-      const u = t(l) * c;
-      if (e += u, e > n) {
-        o = l;
+function createGetOffset(source, itemSize, state) {
+  return (scrollDirection) => {
+    const { scale = 1 } = state.value;
+    if (typeof itemSize === "number")
+      return Math.floor(scrollDirection / (itemSize * scale)) + 1;
+    let sum = 0;
+    let offset = 0;
+    for (let i = 0; i < source.value.length; i++) {
+      const size = itemSize(i) * scale;
+      sum += size;
+      if (sum > scrollDirection) {
+        offset = i;
         break;
       }
     }
-    return o + 1;
+    return offset + 1;
   };
 }
-function W(r, t, a, n, { containerRef: c, state: e, currentList: o, source: l }, u) {
+function createCalculateRange(type, overscan, getOffset, getViewCapacity, { containerRef, state, currentList, source }, updateTrigger) {
   return () => {
-    const s = c.value;
-    if (s) {
-      const f = a(r === "vertical" ? Math.ceil(s.scrollTop) + 1 : Math.ceil(s.scrollLeft)), i = n(r === "vertical" ? s.clientHeight : s.clientWidth), p = f - t, g = f + i + t;
-      e.value = {
-        start: p < 0 ? 0 : p,
-        end: g > l.value.length ? l.value.length : g,
-        current: f - 1,
-        scale: e.value.scale
-      }, o.value = l.value.slice(e.value.start, e.value.end).map((h, v) => ({
-        data: h,
-        index: v + e.value.start
-      })), u(e.value);
+    const element = containerRef.value;
+    if (element) {
+      const offset = getOffset(type === "vertical" ? Math.ceil(element.scrollTop) + 1 : Math.ceil(element.scrollLeft));
+      const viewCapacity = getViewCapacity(type === "vertical" ? element.clientHeight : element.clientWidth);
+      const from = offset - overscan;
+      const to = offset + viewCapacity + overscan;
+      state.value = {
+        start: from < 0 ? 0 : from,
+        end: to > source.value.length ? source.value.length : to,
+        current: offset - 1,
+        scale: state.value.scale
+      };
+      currentList.value = source.value.slice(state.value.start, state.value.end).map((ele, index) => ({
+        data: ele,
+        index: index + state.value.start
+      }));
+      updateTrigger(state.value);
     }
   };
 }
-function k(r, t, a) {
-  return (n) => {
-    const { scale: c = 1 } = a.value;
-    if (typeof r == "number") {
-      const o = n * (r * c);
-      return Math.ceil(o);
+function createGetDistance(itemSize, source, state) {
+  return (index) => {
+    const { scale = 1 } = state.value;
+    if (typeof itemSize === "number") {
+      const size2 = index * (itemSize * scale);
+      return Math.ceil(size2);
     }
-    const e = t.value.slice(0, n).reduce((o, l, u) => o + r(u) * c, 0);
-    return Math.ceil(e);
+    const size = source.value.slice(0, index).reduce((sum, _, i) => sum + itemSize(i) * scale, 0);
+    return Math.ceil(size);
   };
 }
-function D(r, t, a, n) {
-  F([r.width, r.height, t, a], () => {
-    n();
+function useWatchForSizes(size, list, containerRef, calculateRange) {
+  watch([size.width, size.height, list, containerRef], () => {
+    calculateRange();
   });
 }
-function E(r, t, a) {
-  return y(() => {
-    const { scale: n = 1 } = a.value;
-    return typeof r == "number" ? t.value.length * r * n : t.value.reduce((c, e, o) => c + r(o) * n, 0);
+function createComputedTotalSize(itemSize, source, state) {
+  return computed(() => {
+    const { scale = 1 } = state.value;
+    if (typeof itemSize === "number")
+      return source.value.length * itemSize * scale;
+    return source.value.reduce((sum, _, index) => sum + itemSize(index) * scale, 0);
   });
 }
-const K = {
+const scrollToDictionaryForElementScrollKey = {
   horizontal: "scrollLeft",
   vertical: "scrollTop"
 };
-function G(r, t, a, n) {
-  return (c) => {
-    if (n.value) {
-      if (c < 0)
+function createScrollTo(type, calculateRange, getDistance, containerRef) {
+  return (index) => {
+    if (containerRef.value) {
+      if (index < 0)
         return;
-      n.value[K[r]] = a(c), t();
+      containerRef.value[scrollToDictionaryForElementScrollKey[type]] = getDistance(index);
+      calculateRange();
     }
   };
 }
-function S(r, t) {
-  const { on: a, trigger: n } = x(), c = O(t), { state: e, source: o, currentList: l, size: u, containerRef: s } = c, f = { overflowX: "auto" }, { itemWidth: i, overscan: p = 5 } = r, g = z(e, o, i), h = P(o, i, e), v = W("horizontal", p, h, g, c, n), m = k(i, o, e), d = y(() => m(e.value.start)), R = E(i, o, e);
-  D(u, t, s, v);
-  const V = G("horizontal", v, m, s), b = (T) => {
-    e.value.scale = T;
-  }, C = y(() => ({
-    style: {
-      height: "100%",
-      width: `${R.value - d.value}px`,
-      marginLeft: `${d.value}px`,
-      display: "flex",
-      transform: `scale(${e.value.scale})`,
-      transformOrigin: "0% 0%"
-      // position: 'absolute',
-      // left: '50%'
-    }
-  }));
+function useHorizontalVirtualList(options, list) {
+  const { on: onUpdate, trigger: updateTrigger } = createEventHook();
+  const resources = useVirtualListResources(list);
+  const { state, source, currentList, size, containerRef } = resources;
+  const containerStyle = { overflowX: "auto" };
+  const { itemWidth, overscan = 5 } = options;
+  const getViewCapacity = createGetViewCapacity(state, source, itemWidth);
+  const getOffset = createGetOffset(source, itemWidth, state);
+  const calculateRange = createCalculateRange("horizontal", overscan, getOffset, getViewCapacity, resources, updateTrigger);
+  const getDistanceLeft = createGetDistance(itemWidth, source, state);
+  const offsetLeft = computed(() => getDistanceLeft(state.value.start));
+  const totalWidth = createComputedTotalSize(itemWidth, source, state);
+  useWatchForSizes(size, list, containerRef, calculateRange);
+  const scrollTo = createScrollTo("horizontal", calculateRange, getDistanceLeft, containerRef);
+  const scaleTo = (s) => {
+    state.value.scale = s;
+  };
+  const wrapperProps = computed(() => {
+    return {
+      style: {
+        height: "100%",
+        width: `${totalWidth.value - offsetLeft.value}px`,
+        marginLeft: `${offsetLeft.value}px`,
+        display: "flex",
+        transform: `scale(${state.value.scale})`,
+        transformOrigin: "0% 0%"
+        // position: 'absolute',
+        // left: '50%'
+      }
+    };
+  });
   return {
-    onUpdate: a,
-    state: e,
-    scaleTo: b,
-    scrollTo: V,
-    calculateRange: v,
-    wrapperProps: C,
-    containerStyle: f,
-    currentList: l,
-    containerRef: s
+    onUpdate,
+    state,
+    scaleTo,
+    scrollTo,
+    calculateRange,
+    wrapperProps,
+    containerStyle,
+    currentList,
+    containerRef
   };
 }
-function Y(r, t) {
-  const { on: a, trigger: n } = x(), c = O(t), { state: e, source: o, currentList: l, size: u, containerRef: s } = c, f = { overflowY: "auto" }, { itemHeight: i, overscan: p = 5 } = r, g = z(e, o, i), h = P(o, i, e), v = W("vertical", p, h, g, c, n), m = k(i, o, e), d = y(() => m(e.value.start)), R = E(i, o, e);
-  D(u, t, s, v);
-  const V = G("vertical", v, m, s), b = (T) => {
-    const w = s.value;
-    if (w) {
-      const { current: M } = e.value;
-      let L = 0;
-      typeof i == "number" ? L = M * (T * i - e.value.scale * i) : L = o.value.slice(0, M).reduce((U, j, $) => U + T * i($) - e.value.scale * i($), 0), w.scrollTop = w.scrollTop + L >= 0 ? w.scrollTop + L : 0, e.value.scale = T;
-    }
-  }, C = y(() => ({
-    style: {
-      height: `${R.value - d.value}px`,
-      marginTop: `${d.value}px`,
-      transform: `translateX(-50%) scale(${e.value.scale})`,
-      transformOrigin: "50% 0%"
+function useVerticalVirtualList(options, list) {
+  const { on: onUpdate, trigger: updateTrigger } = createEventHook();
+  const resources = useVirtualListResources(list);
+  const { state, source, currentList, size, containerRef } = resources;
+  const containerStyle = { overflowY: "auto" };
+  const { itemHeight, overscan = 5 } = options;
+  const getViewCapacity = createGetViewCapacity(state, source, itemHeight);
+  const getOffset = createGetOffset(source, itemHeight, state);
+  const calculateRange = createCalculateRange("vertical", overscan, getOffset, getViewCapacity, resources, updateTrigger);
+  const getDistanceTop = createGetDistance(itemHeight, source, state);
+  const offsetTop = computed(() => getDistanceTop(state.value.start));
+  const totalHeight = createComputedTotalSize(itemHeight, source, state);
+  useWatchForSizes(size, list, containerRef, calculateRange);
+  const scrollTo = createScrollTo("vertical", calculateRange, getDistanceTop, containerRef);
+  const scaleTo = (s) => {
+    const element = containerRef.value;
+    if (element) {
+      const { current } = state.value;
+      let offsetScroll = 0;
+      if (typeof itemHeight === "number") {
+        offsetScroll = current * (s * itemHeight - state.value.scale * itemHeight);
+      } else {
+        offsetScroll = source.value.slice(0, current).reduce((sum, _, i) => sum + s * itemHeight(i) - state.value.scale * itemHeight(i), 0);
+      }
+      element.scrollTop = element.scrollTop + offsetScroll >= 0 ? element.scrollTop + offsetScroll : 0;
+      state.value.scale = s;
     }
-  }));
+  };
+  const wrapperProps = computed(() => {
+    return {
+      style: {
+        height: `${totalHeight.value - offsetTop.value}px`,
+        marginTop: `${offsetTop.value}px`,
+        transform: `translateX(-50%) scale(${state.value.scale})`,
+        transformOrigin: "50% 0%"
+      }
+    };
+  });
   return {
-    onUpdate: a,
-    state: e,
-    scaleTo: b,
-    calculateRange: v,
-    scrollTo: V,
-    containerStyle: f,
-    wrapperProps: C,
-    currentList: l,
-    containerRef: s
+    onUpdate,
+    state,
+    scaleTo,
+    calculateRange,
+    scrollTo,
+    containerStyle,
+    wrapperProps,
+    currentList,
+    containerRef
   };
 }
 export {
-  I as useVirtualList
+  useVirtualList
 };

package/dist/es/components/scale-virtual-list/index.mjs

@@ -1,10 +1,10 @@
-import { withInstall as t } from "../utils/install.mjs";
+import { withInstall } from "../utils/install.mjs";
 import "./component/scale-virtual-list.vue.mjs";
 import "./style/index.mjs";
 import "./component/types.mjs";
-import i from "./component/scale-virtual-list.vue2.mjs";
-const l = t(i);
+import _sfc_main from "./component/scale-virtual-list.vue2.mjs";
+const KScaleVirtualList = withInstall(_sfc_main);
 export {
-  l as KScaleVirtualList,
-  l as default
+  KScaleVirtualList,
+  KScaleVirtualList as default
 };

package/dist/es/components/scroll-bar/index.mjs

@@ -1,10 +1,10 @@
-import { withInstall as r } from "../utils/install.mjs";
-import o from "./src/scroll-bar.mjs";
+import { withInstall } from "../utils/install.mjs";
+import ScrollBar from "./src/scroll-bar.mjs";
 import "./style/index.mjs";
-import { scrollbarProps as c } from "./src/types.mjs";
-const m = r(o);
+import { scrollbarProps } from "./src/types.mjs";
+const KScrollBar = withInstall(ScrollBar);
 export {
-  m as KScrollBar,
-  m as default,
-  c as scrollbarProps
+  KScrollBar,
+  KScrollBar as default,
+  scrollbarProps
 };