@nutui/nutui 4.0.12-beta.1 → 4.0.12

package/dist/packages/_es/List.js

@@ -1,37 +1,61 @@
-var j = Object.defineProperty, G = Object.defineProperties;
-var J = Object.getOwnPropertyDescriptors;
-var C = Object.getOwnPropertySymbols;
-var K = Object.prototype.hasOwnProperty, O = Object.prototype.propertyIsEnumerable;
-var D = (e, o, i) => o in e ? j(e, o, { enumerable: !0, configurable: !0, writable: !0, value: i }) : e[o] = i, E = (e, o) => {
-  for (var i in o || (o = {}))
-    K.call(o, i) && D(e, i, o[i]);
-  if (C)
-    for (var i of C(o))
-      O.call(o, i) && D(e, i, o[i]);
-  return e;
-}, N = (e, o) => G(e, J(o));
-import { ref as p, reactive as Q, computed as f, watch as $, toRefs as U, openBlock as S, createElementBlock as y, normalizeClass as W, normalizeStyle as H, createElementVNode as z, Fragment as X, renderList as Y, renderSlot as Z } from "vue";
-import { c as R } from "./component-234624bc.js";
-import { u as _ } from "./index-192a3ef6.js";
-import { _ as tt } from "./_plugin-vue_export-helper-dad06003.js";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { ref, reactive, computed, watch, toRefs, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, Fragment, renderList, renderSlot } from "vue";
+import { c as createComponent } from "./component-81a4c1d0.js";
+import { u as useRect } from "./index-29892cda.js";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-cc2b3d55.js";
 import "../locale/lang";
-var b = /* @__PURE__ */ ((e) => (e[e.eq = 1] = "eq", e[e.lt = 2] = "lt", e[e.gt = 3] = "gt", e))(b || {});
-function et(e, o, i) {
-  let m = 0, l = e.length - 1, t = null;
-  for (; m <= l; ) {
-    t = Math.floor((m + l) / 2);
-    const r = e[t], h = i(r, o);
-    if (h === 1)
-      return t;
-    h === 2 ? m = t + 1 : h === 3 && (l = t - 1);
+var CompareResult = /* @__PURE__ */ ((CompareResult2) => {
+  CompareResult2[CompareResult2["eq"] = 1] = "eq";
+  CompareResult2[CompareResult2["lt"] = 2] = "lt";
+  CompareResult2[CompareResult2["gt"] = 3] = "gt";
+  return CompareResult2;
+})(CompareResult || {});
+function binarySearch(list, value, compareFunc) {
+  let start = 0;
+  let end = list.length - 1;
+  let tempIndex = null;
+  while (start <= end) {
+    tempIndex = Math.floor((start + end) / 2);
+    const midValue = list[tempIndex];
+    const compareRes = compareFunc(midValue, value);
+    if (compareRes === 1) {
+      return tempIndex;
+    }
+    if (compareRes === 2) {
+      start = tempIndex + 1;
+    } else if (compareRes === 3) {
+      end = tempIndex - 1;
+    }
   }
-  return t;
+  return tempIndex;
 }
-const { componentName: nt, create: ot } = R("list"), M = document.documentElement.clientHeight || document.body.clientHeight || 667, it = ot({
+const { componentName, create } = createComponent("list");
+const clientHeight = document.documentElement.clientHeight || document.body.clientHeight || 667;
+const _sfc_main = create({
   props: {
     listData: {
       type: Array,
-      default: () => []
+      default: () => {
+        return [];
+      }
     },
     bufferSize: {
       type: Number,
@@ -39,7 +63,7 @@ const { componentName: nt, create: ot } = R("list"), M = document.documentElemen
     },
     containerHeight: {
       type: [Number],
-      default: M
+      default: clientHeight
     },
     height: {
       type: Number,
@@ -51,124 +75,198 @@ const { componentName: nt, create: ot } = R("list"), M = document.documentElemen
     }
   },
   emits: ["scroll-up", "scroll-down", "scroll-bottom"],
-  setup(e, { emit: o }) {
-    const i = p(null), m = p(null), l = p(null), t = Q({
+  setup(props, { emit }) {
+    const list = ref(null);
+    const phantom = ref(null);
+    const actualContent = ref(null);
+    const state = reactive({
       start: 0,
       originStartIndex: 0,
       scrollTop: 0,
-      list: e.listData.slice(),
+      list: props.listData.slice(),
       cachePositions: [],
-      phantomHeight: e.height * e.listData.length
-    }), r = f(() => Math.min(e.containerHeight, M)), h = f(() => Math.ceil(r.value / e.height)), I = f(() => Math.min(t.originStartIndex + h.value + e.bufferSize, t.list.length)), w = f(() => ({
-      [nt]: !0
-    })), k = f(() => t.list.slice(t.start, I.value)), q = () => {
-      if (l.value)
-        return `translate3d(0, ${t.start >= 1 ? t.cachePositions[t.start - 1].bottom : 0}px, 0)`;
-    }, x = () => {
-      t.cachePositions = [];
-      for (let n = 0; n < t.list.length; ++n)
-        t.cachePositions[n] = {
-          index: n,
-          height: e.height,
-          top: n * e.height,
-          bottom: (n + 1) * (e.height + e.margin),
+      phantomHeight: props.height * props.listData.length
+    });
+    const getContainerHeight = computed(() => {
+      return Math.min(props.containerHeight, clientHeight);
+    });
+    const visibleCount = computed(() => {
+      return Math.ceil(getContainerHeight.value / props.height);
+    });
+    const end = computed(() => {
+      return Math.min(state.originStartIndex + visibleCount.value + props.bufferSize, state.list.length);
+    });
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true
+      };
+    });
+    const visibleData = computed(() => {
+      return state.list.slice(state.start, end.value);
+    });
+    const getTransform = () => {
+      if (actualContent.value) {
+        return `translate3d(0, ${state.start >= 1 ? state.cachePositions[state.start - 1].bottom : 0}px, 0)`;
+      }
+    };
+    const initCachedPosition = () => {
+      state.cachePositions = [];
+      for (let i = 0; i < state.list.length; ++i) {
+        state.cachePositions[i] = {
+          index: i,
+          height: props.height,
+          top: i * props.height,
+          bottom: (i + 1) * (props.height + props.margin),
           dValue: 0
         };
-    }, V = () => {
-      let n = l.value.childNodes;
-      n = Array.from(n).filter((s) => s.nodeType === 1);
-      const u = n[0];
-      n.forEach((s, c) => {
-        if (!s)
+      }
+    };
+    const updateCachedPosition = () => {
+      let nodes = actualContent.value.childNodes;
+      nodes = Array.from(nodes).filter((node) => node.nodeType === 1);
+      const start = nodes[0];
+      nodes.forEach((node, index2) => {
+        if (!node)
           return;
-        const F = _(s), { height: T } = F, v = t.cachePositions[c + t.start].height - T;
-        v && (t.cachePositions[c + t.start].bottom -= v, t.cachePositions[c + t.start].height = T, t.cachePositions[c + t.start].dValue = v);
+        const rect = useRect(node);
+        const { height: height2 } = rect;
+        const oldHeight = state.cachePositions[index2 + state.start].height;
+        const dValue = oldHeight - height2;
+        if (dValue) {
+          state.cachePositions[index2 + state.start].bottom -= dValue;
+          state.cachePositions[index2 + state.start].height = height2;
+          state.cachePositions[index2 + state.start].dValue = dValue;
+        }
       });
-      let a = 0;
-      u && (a = t.start);
-      const d = t.cachePositions.length;
-      let g = t.cachePositions[a].dValue;
-      t.cachePositions[a].dValue = 0;
-      for (let s = a + 1; s < d; ++s) {
-        const c = t.cachePositions[s];
-        t.cachePositions[s].top = t.cachePositions[s - 1].bottom, t.cachePositions[s].bottom = t.cachePositions[s].bottom - g, c.dValue !== 0 && (g += c.dValue, c.dValue = 0);
+      let startIndex = 0;
+      if (start) {
+        startIndex = state.start;
       }
-      const P = t.cachePositions[d - 1].bottom;
-      t.phantomHeight = P;
-    }, A = (n = 0) => {
-      let u = et(
-        t.cachePositions,
-        n,
-        (d, g) => {
-          const P = d.bottom;
-          return P === g ? b.eq : P < g ? b.lt : b.gt;
+      const cachedPositionsLen = state.cachePositions.length;
+      let cumulativeDiffHeight = state.cachePositions[startIndex].dValue;
+      state.cachePositions[startIndex].dValue = 0;
+      for (let i = startIndex + 1; i < cachedPositionsLen; ++i) {
+        const item = state.cachePositions[i];
+        state.cachePositions[i].top = state.cachePositions[i - 1].bottom;
+        state.cachePositions[i].bottom = state.cachePositions[i].bottom - cumulativeDiffHeight;
+        if (item.dValue !== 0) {
+          cumulativeDiffHeight += item.dValue;
+          item.dValue = 0;
+        }
+      }
+      const height = state.cachePositions[cachedPositionsLen - 1].bottom;
+      state.phantomHeight = height;
+    };
+    const getStartIndex = (scrollTop = 0) => {
+      let idx = binarySearch(
+        state.cachePositions,
+        scrollTop,
+        (currentValue, targetValue) => {
+          const currentCompareValue = currentValue.bottom;
+          if (currentCompareValue === targetValue) {
+            return CompareResult.eq;
+          }
+          if (currentCompareValue < targetValue) {
+            return CompareResult.lt;
+          }
+          return CompareResult.gt;
         }
       );
-      return t.cachePositions[u].bottom < n && (u += 1), u;
-    }, B = () => {
-      t.originStartIndex = 0, t.start = 0, t.scrollTop = 0, i.value.scrollTop = 0, x(), t.phantomHeight = e.height * t.list.length;
-    }, L = () => {
-      var d;
-      const n = (d = i.value) == null ? void 0 : d.scrollTop, { originStartIndex: u } = t, a = A(n);
-      a !== u && (t.originStartIndex = a, t.start = Math.max(t.originStartIndex - e.bufferSize, 0), I.value >= t.list.length - 1 && o("scroll-bottom")), o(n > t.scrollTop ? "scroll-up" : "scroll-down", n), t.scrollTop = n;
+      const targetItem = state.cachePositions[idx];
+      if (targetItem.bottom < scrollTop) {
+        idx += 1;
+      }
+      return idx;
+    };
+    const resetAllVirtualParam = () => {
+      state.originStartIndex = 0;
+      state.start = 0;
+      state.scrollTop = 0;
+      list.value.scrollTop = 0;
+      initCachedPosition();
+      state.phantomHeight = props.height * state.list.length;
+    };
+    const handleScrollEvent = () => {
+      var _a;
+      const scrollTop = (_a = list.value) == null ? void 0 : _a.scrollTop;
+      const { originStartIndex } = state;
+      const currentIndex = getStartIndex(scrollTop);
+      if (currentIndex !== originStartIndex) {
+        state.originStartIndex = currentIndex;
+        state.start = Math.max(state.originStartIndex - props.bufferSize, 0);
+        if (end.value >= state.list.length - 1) {
+          emit("scroll-bottom");
+        }
+      }
+      emit(scrollTop > state.scrollTop ? "scroll-up" : "scroll-down", scrollTop);
+      state.scrollTop = scrollTop;
     };
-    return $(
-      () => e.listData,
-      (n) => {
-        if (t.list = n.slice(), t.list.length === n.length)
-          x(), V();
-        else {
-          B();
+    watch(
+      () => props.listData,
+      (val) => {
+        state.list = val.slice();
+        if (state.list.length === val.length) {
+          initCachedPosition();
+          updateCachedPosition();
+        } else {
+          resetAllVirtualParam();
           return;
         }
       }
-    ), $(
-      () => t.start,
+    );
+    watch(
+      () => state.start,
       () => {
-        l.value && t.list.length > 0 && V();
+        if (actualContent.value && state.list.length > 0) {
+          updateCachedPosition();
+        }
       }
-    ), N(E({}, U(t)), {
-      list: i,
-      phantom: m,
-      actualContent: l,
-      getTransform: q,
-      visibleData: k,
-      classes: w,
-      getContainerHeight: r,
-      handleScrollEvent: L
+    );
+    return __spreadProps(__spreadValues({}, toRefs(state)), {
+      list,
+      phantom,
+      actualContent,
+      getTransform,
+      visibleData,
+      classes,
+      getContainerHeight,
+      handleScrollEvent
     });
   }
 });
-function st(e, o, i, m, l, t) {
-  return S(), y("div", {
-    class: W(e.classes),
-    style: H({ height: `${e.getContainerHeight}px` }),
-    onScrollPassive: o[0] || (o[0] = (...r) => e.handleScrollEvent && e.handleScrollEvent(...r)),
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(_ctx.classes),
+    style: normalizeStyle({ height: `${_ctx.getContainerHeight}px` }),
+    onScrollPassive: _cache[0] || (_cache[0] = (...args) => _ctx.handleScrollEvent && _ctx.handleScrollEvent(...args)),
     ref: "list"
   }, [
-    z("div", {
+    createElementVNode("div", {
       class: "nut-list-phantom",
-      style: H({ height: e.phantomHeight + "px" }),
+      style: normalizeStyle({ height: _ctx.phantomHeight + "px" }),
       ref: "phantom"
     }, null, 4),
-    z("div", {
+    createElementVNode("div", {
       class: "nut-list-container",
-      style: H({ transform: e.getTransform() }),
+      style: normalizeStyle({ transform: _ctx.getTransform() }),
       ref: "actualContent"
     }, [
-      (S(!0), y(X, null, Y(e.visibleData, (r, h) => (S(), y("div", {
-        class: "nut-list-item",
-        key: r
-      }, [
-        Z(e.$slots, "default", {
-          item: r,
-          index: h + e.start
-        })
-      ]))), 128))
+      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.visibleData, (item, index2) => {
+        return openBlock(), createElementBlock("div", {
+          class: "nut-list-item",
+          key: item
+        }, [
+          renderSlot(_ctx.$slots, "default", {
+            item,
+            index: index2 + _ctx.start
+          })
+        ]);
+      }), 128))
     ], 4)
   ], 38);
 }
-const mt = /* @__PURE__ */ tt(it, [["render", st]]);
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {
-  mt as default
+  index as default
 };