@nutui/nutui 4.0.0 → 4.0.1-2.beta-1

package/dist/packages/_es/List.js

@@ -1,116 +1,174 @@
-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 { _ as _export_sfc } from "./_plugin-vue_export-helper-cc2b3d55.js";
+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";
 import "../locale/lang";
-const { componentName, create } = createComponent("list");
-const clientHeight = document.documentElement.clientHeight || document.body.clientHeight || 667;
-const _sfc_main = create({
+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);
+  }
+  return t;
+}
+const { componentName: nt, create: ot } = R("list"), M = document.documentElement.clientHeight || document.body.clientHeight || 667, it = ot({
   props: {
-    height: {
-      type: [Number],
-      default: 50
-    },
     listData: {
       type: Array,
-      default: () => {
-        return [];
-      }
+      default: () => []
+    },
+    bufferSize: {
+      type: Number,
+      default: 5
     },
     containerHeight: {
       type: [Number],
-      default: clientHeight
+      default: M
+    },
+    height: {
+      type: Number,
+      default: 80
+    },
+    margin: {
+      type: Number,
+      default: 10
     }
   },
-  emits: ["scroll", "scroll-bottom"],
-  setup(props, { emit }) {
-    const list = ref(null);
-    const state = reactive({
-      startOffset: 0,
+  emits: ["scroll-up", "scroll-down", "scroll-bottom"],
+  setup(e, { emit: o }) {
+    const i = p(null), m = p(null), l = p(null), t = Q({
       start: 0,
-      list: props.listData.slice()
-    });
-    const getContainerHeight = computed(() => {
-      return Math.min(props.containerHeight, clientHeight);
-    });
-    const visibleCount = computed(() => {
-      return Math.ceil(getContainerHeight.value / props.height);
-    });
-    const end = computed(() => {
-      return state.start + visibleCount.value;
-    });
-    const getTransform = computed(() => {
-      return `translate3d(0, ${state.startOffset}px, 0)`;
-    });
-    const classes = computed(() => {
-      const prefixCls = componentName;
-      return {
-        [prefixCls]: true
-      };
-    });
-    const listHeight = computed(() => {
-      return state.list.length * props.height;
-    });
-    const visibleData = computed(() => {
-      return state.list.slice(state.start, Math.min(end.value, state.list.length));
-    });
-    const handleScrollEvent = () => {
-      var _a;
-      const scrollTop = (_a = list.value) == null ? void 0 : _a.scrollTop;
-      state.start = Math.floor(scrollTop / props.height);
-      if (end.value >= state.list.length) {
-        emit("scroll-bottom");
+      originStartIndex: 0,
+      scrollTop: 0,
+      list: e.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),
+          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)
+          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);
+      });
+      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);
       }
-      state.startOffset = scrollTop - scrollTop % props.height;
+      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;
+        }
+      );
+      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;
     };
-    watch(
-      () => props.listData,
+    return $(
+      () => e.listData,
+      (n) => {
+        if (t.list = n.slice(), t.list.length === n.length)
+          x(), V();
+        else {
+          B();
+          return;
+        }
+      }
+    ), $(
+      () => t.start,
       () => {
-        state.list = props.listData.slice();
+        l.value && t.list.length > 0 && V();
       }
-    );
-    return {
-      ...toRefs(state),
-      list,
-      getTransform,
-      listHeight,
-      visibleData,
-      classes,
-      getContainerHeight,
-      handleScrollEvent
-    };
+    ), N(E({}, U(t)), {
+      list: i,
+      phantom: m,
+      actualContent: l,
+      getTransform: q,
+      visibleData: k,
+      classes: w,
+      getContainerHeight: r,
+      handleScrollEvent: L
+    });
   }
 });
-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)),
+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)),
     ref: "list"
   }, [
-    createElementVNode("div", {
+    z("div", {
       class: "nut-list-phantom",
-      style: normalizeStyle({ height: _ctx.listHeight + "px" })
+      style: H({ height: e.phantomHeight + "px" }),
+      ref: "phantom"
     }, null, 4),
-    createElementVNode("div", {
+    z("div", {
       class: "nut-list-container",
-      style: normalizeStyle({ transform: _ctx.getTransform })
+      style: H({ transform: e.getTransform() }),
+      ref: "actualContent"
     }, [
-      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.visibleData, (item, index2) => {
-        return openBlock(), createElementBlock("div", {
-          class: "nut-list-item",
-          style: normalizeStyle({ height: _ctx.height + "px" }),
-          key: item
-        }, [
-          renderSlot(_ctx.$slots, "default", {
-            item,
-            index: index2
-          })
-        ], 4);
-      }), 128))
+      (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))
     ], 4)
   ], 38);
 }
-const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+const mt = /* @__PURE__ */ tt(it, [["render", st]]);
 export {
-  index as default
+  mt as default
 };

package/dist/packages/_es/Menu.js

@@ -1,14 +1,13 @@
-import { ref, computed, onMounted, onUnmounted, reactive, provide, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, Fragment, renderList, normalizeStyle, toDisplayString, renderSlot, createBlock } from "vue";
-import { c as createComponent } from "./component-81a4c1d0.js";
-import { u as useRect } from "./index-29892cda.js";
-import { ArrowUp2, ArrowDown2 } from "@nutui/icons-vue";
-import { _ as _export_sfc } from "./_plugin-vue_export-helper-cc2b3d55.js";
+import { ref as v, computed as y, onMounted as N, onUnmounted as P, reactive as _, provide as T, resolveComponent as k, openBlock as i, createElementBlock as g, normalizeClass as u, createElementVNode as p, Fragment as D, renderList as I, normalizeStyle as U, toDisplayString as R, renderSlot as b, createBlock as x } from "vue";
+import { c as z } from "./component-234624bc.js";
+import { u as M } from "./index-192a3ef6.js";
+import { ArrowUp2 as j, ArrowDown2 as H } from "@nutui/icons-vue";
+import { _ as V } from "./_plugin-vue_export-helper-dad06003.js";
 import "../locale/lang";
-const { componentName, create } = createComponent("menu");
-const _sfc_main = create({
+const { componentName: W, create: Y } = z("menu"), q = Y({
   components: {
-    ArrowUp2,
-    ArrowDown2
+    ArrowUp2: j,
+    ArrowDown2: H
   },
   props: {
     activeColor: {
@@ -17,20 +16,19 @@ const _sfc_main = create({
     },
     overlay: {
       type: Boolean,
-      default: true
+      default: !0
     },
     lockScroll: {
       type: Boolean,
-      default: true
+      default: !0
     },
     duration: {
       type: [Number, String],
-      default: 0
+      default: 0.3
     },
-    titleIcon: String,
     closeOnClickOverlay: {
       type: Boolean,
-      default: true
+      default: !0
     },
     direction: {
       type: String,
@@ -38,162 +36,108 @@ const _sfc_main = create({
     },
     scrollFixed: {
       type: [Boolean, String, Number],
-      default: false
+      default: !1
     },
     titleClass: [String]
   },
-  setup(props, { emit, slots }) {
-    const barRef = ref();
-    const offset = ref(0);
-    const isScrollFixed = ref(false);
-    const useChildren = () => {
-      const publicChildren = reactive([]);
-      const internalChildren = reactive([]);
-      const linkChildren2 = (value) => {
-        const link = (child) => {
-          if (child.proxy) {
-            internalChildren.push(child);
-            publicChildren.push(child.proxy);
-          }
-        };
-        const removeLink = (child) => {
-          if (child.proxy) {
-            let internalIndex = internalChildren.indexOf(child);
-            if (internalIndex > -1) {
-              internalChildren.splice(internalIndex, 1);
-            }
-            let publicIndex = publicChildren.indexOf(child.proxy);
-            if (internalIndex > -1) {
-              publicChildren.splice(publicIndex, 1);
-            }
-          }
-        };
-        provide(
-          "menuParent",
-          Object.assign(
-            {
-              removeLink,
-              link,
-              children: publicChildren,
-              internalChildren
-            },
-            value
-          )
-        );
-      };
-      return {
-        children: publicChildren,
-        linkChildren: linkChildren2
-      };
-    };
-    const { children, linkChildren } = useChildren();
-    const opened = computed(() => children.some((item) => item.state.showWrapper));
-    const classes = computed(() => {
-      const prefixCls = componentName;
+  setup(o, { emit: S, slots: $ }) {
+    const c = v(), a = v(0), f = v(!1), m = () => {
+      const e = _([]), t = _([]);
       return {
-        [prefixCls]: true,
-        "scroll-fixed": isScrollFixed.value
-      };
-    });
-    const updateOffset = () => {
-      if (barRef.value) {
-        const rect = useRect(barRef);
-        if (props.direction === "down") {
-          offset.value = rect.bottom;
-        } else {
-          offset.value = window.innerHeight - rect.top;
+        children: e,
+        linkChildren: (E) => {
+          T(
+            "menuParent",
+            Object.assign(
+              {
+                removeLink: (r) => {
+                  if (r.proxy) {
+                    let w = t.indexOf(r);
+                    w > -1 && t.splice(w, 1);
+                    let L = e.indexOf(r.proxy);
+                    w > -1 && e.splice(L, 1);
+                  }
+                },
+                link: (r) => {
+                  r.proxy && (t.push(r), e.push(r.proxy));
+                },
+                children: e,
+                internalChildren: t
+              },
+              E
+            )
+          );
         }
+      };
+    }, { children: s, linkChildren: n } = m(), d = y(() => s.some((e) => e.state.showWrapper)), h = y(() => ({
+      [W]: !0,
+      "scroll-fixed": f.value
+    })), B = () => {
+      if (c.value) {
+        const e = M(c);
+        o.direction === "down" ? a.value = e.bottom : a.value = window.innerHeight - e.top;
       }
     };
-    linkChildren({ props, offset });
-    const toggleItem = (active) => {
-      children.forEach((item, index2) => {
-        if (index2 === active) {
-          updateOffset();
-          item.toggle();
-        } else if (item.state.showPopup) {
-          item.toggle(false, { immediate: true });
-        }
+    n({ props: o, offset: a });
+    const O = (e) => {
+      s.forEach((t, l) => {
+        l === e ? (B(), t.toggle()) : t.state.showPopup && t.toggle(!1, { immediate: !0 });
       });
+    }, A = (e) => Math.max(0, "scrollTop" in e ? e.scrollTop : e.pageYOffset), C = () => {
+      const { scrollFixed: e } = o, t = A(window);
+      f.value = t > (typeof e == "boolean" ? 30 : Number(e));
+    }, F = (e) => {
+      let t = "";
+      const { titleClass: l } = o;
+      return e && (t += "active"), l && (t += ` ${l}`), t;
     };
-    const getScrollTop = (el) => {
-      return Math.max(0, "scrollTop" in el ? el.scrollTop : el.pageYOffset);
-    };
-    const onScroll = () => {
-      const { scrollFixed } = props;
-      const scrollTop = getScrollTop(window);
-      isScrollFixed.value = scrollTop > (typeof scrollFixed === "boolean" ? 30 : Number(scrollFixed));
-    };
-    const getClasses = (showPopup) => {
-      let str = "";
-      const { titleClass } = props;
-      if (showPopup) {
-        str += "active";
-      }
-      if (titleClass) {
-        str += ` ${titleClass}`;
-      }
-      return str;
-    };
-    onMounted(() => {
-      const { scrollFixed } = props;
-      if (scrollFixed) {
-        window.addEventListener("scroll", onScroll);
-      }
-    });
-    onUnmounted(() => {
-      const { scrollFixed } = props;
-      if (scrollFixed) {
-        window.removeEventListener("scroll", onScroll);
-      }
-    });
-    return {
-      toggleItem,
-      children,
-      opened,
-      classes,
-      barRef,
-      getClasses
+    return N(() => {
+      const { scrollFixed: e } = o;
+      e && window.addEventListener("scroll", C);
+    }), P(() => {
+      const { scrollFixed: e } = o;
+      e && window.removeEventListener("scroll", C);
+    }), {
+      toggleItem: O,
+      children: s,
+      opened: d,
+      classes: h,
+      barRef: c,
+      getClasses: F
     };
   }
-});
-const _hoisted_1 = ["onClick"];
-const _hoisted_2 = { class: "nut-menu__title-text" };
-const _hoisted_3 = { class: "nut-menu__title-icon" };
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_ArrowUp2 = resolveComponent("ArrowUp2");
-  const _component_ArrowDown2 = resolveComponent("ArrowDown2");
-  return openBlock(), createElementBlock("view", {
-    class: normalizeClass(_ctx.classes)
+}), G = ["onClick"], J = { class: "nut-menu__title-text" }, K = { class: "nut-menu__title-icon" };
+function Q(o, S, $, c, a, f) {
+  const m = k("ArrowUp2"), s = k("ArrowDown2");
+  return i(), g("view", {
+    class: u(o.classes)
   }, [
-    createElementVNode("view", {
-      class: normalizeClass(["nut-menu__bar", { opened: _ctx.opened }]),
+    p("view", {
+      class: u(["nut-menu__bar", { opened: o.opened }]),
       ref: "barRef"
     }, [
-      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.children, (item, index2) => {
-        return openBlock(), createElementBlock("view", {
-          key: index2,
-          class: normalizeClass(["nut-menu__item", { disabled: item.disabled, active: item.state.showPopup }]),
-          onClick: ($event) => !item.disabled && _ctx.toggleItem(index2),
-          style: normalizeStyle({ color: item.state.showPopup ? _ctx.activeColor : "" })
+      (i(!0), g(D, null, I(o.children, (n, d) => (i(), g("view", {
+        key: d,
+        class: u(["nut-menu__item", { disabled: n.disabled, active: n.state.showPopup }]),
+        onClick: (h) => !n.disabled && o.toggleItem(d),
+        style: U({ color: n.state.showPopup ? o.activeColor : "" })
+      }, [
+        p("view", {
+          class: u(["nut-menu__title", o.getClasses(n.state.showPopup)])
         }, [
-          createElementVNode("view", {
-            class: normalizeClass(["nut-menu__title", _ctx.getClasses(item.state.showPopup)])
-          }, [
-            createElementVNode("view", _hoisted_2, toDisplayString(item.renderTitle()), 1),
-            createElementVNode("span", _hoisted_3, [
-              renderSlot(_ctx.$slots, "icon", {}, () => [
-                _ctx.direction === "up" ? (openBlock(), createBlock(_component_ArrowUp2, { key: 0 })) : (openBlock(), createBlock(_component_ArrowDown2, { key: 1 }))
-              ])
+          p("view", J, R(n.renderTitle()), 1),
+          p("span", K, [
+            b(o.$slots, "icon", {}, () => [
+              o.direction === "up" ? (i(), x(m, { key: 0 })) : (i(), x(s, { key: 1 }))
             ])
-          ], 2)
-        ], 14, _hoisted_1);
-      }), 128))
+          ])
+        ], 2)
+      ], 14, G))), 128))
     ], 2),
-    renderSlot(_ctx.$slots, "default")
+    b(o.$slots, "default")
   ], 2);
 }
-const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+const le = /* @__PURE__ */ V(q, [["render", Q]]);
 export {
-  index as default
+  le as default
 };