@nutui/nutui 4.0.1-beta.3 → 4.0.2

package/dist/packages/_es/List.js

@@ -1,33 +1,72 @@
 import { ref, reactive, computed, watch, toRefs, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, Fragment, renderList, renderSlot } from "vue";
 import { c as createComponent } from "./component-bb5ff48e.js";
+import { u as useRect } from "./index-29892cda.js";
 import { _ as _export_sfc } from "./_plugin-vue_export-helper-cc2b3d55.js";
 import "../locale/lang";
+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 tempIndex;
+}
 const { componentName, create } = createComponent("list");
 const clientHeight = document.documentElement.clientHeight || document.body.clientHeight || 667;
 const _sfc_main = create({
   props: {
-    height: {
-      type: [Number],
-      default: 50
-    },
     listData: {
       type: Array,
       default: () => {
         return [];
       }
     },
+    bufferSize: {
+      type: Number,
+      default: 5
+    },
     containerHeight: {
       type: [Number],
       default: clientHeight
+    },
+    height: {
+      type: Number,
+      default: 80
+    },
+    margin: {
+      type: Number,
+      default: 10
     }
   },
-  emits: ["scroll", "scroll-bottom"],
+  emits: ["scroll-up", "scroll-down", "scroll-bottom"],
   setup(props, { emit }) {
     const list = ref(null);
+    const phantom = ref(null);
+    const actualContent = ref(null);
     const state = reactive({
-      startOffset: 0,
       start: 0,
-      list: props.listData.slice()
+      originStartIndex: 0,
+      scrollTop: 0,
+      list: props.listData.slice(),
+      cachePositions: [],
+      phantomHeight: props.height * props.listData.length
     });
     const getContainerHeight = computed(() => {
       return Math.min(props.containerHeight, clientHeight);
@@ -36,10 +75,7 @@ const _sfc_main = create({
       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)`;
+      return Math.min(state.originStartIndex + visibleCount.value + props.bufferSize, state.list.length - 1);
     });
     const classes = computed(() => {
       const prefixCls = componentName;
@@ -47,32 +83,133 @@ const _sfc_main = create({
         [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));
+      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
+        };
+      }
+    };
+    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 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 startIndex = 0;
+      if (start) {
+        startIndex = state.start;
+      }
+      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;
+        }
+      );
+      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;
-      state.start = Math.floor(scrollTop / props.height);
-      if (end.value >= state.list.length) {
-        emit("scroll-bottom");
+      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");
+        }
       }
-      state.startOffset = scrollTop - scrollTop % props.height;
+      emit(scrollTop > state.scrollTop ? "scroll-up" : "scroll-down", scrollTop);
+      state.scrollTop = scrollTop;
     };
     watch(
       () => props.listData,
+      (val) => {
+        state.list = val.slice();
+        if (state.list.length === val.length) {
+          initCachedPosition();
+          updateCachedPosition();
+        } else {
+          resetAllVirtualParam();
+          return;
+        }
+      }
+    );
+    watch(
+      () => state.start,
       () => {
-        state.list = props.listData.slice();
+        if (actualContent.value && state.list.length > 0) {
+          updateCachedPosition();
+        }
       }
     );
     return {
       ...toRefs(state),
       list,
+      phantom,
+      actualContent,
       getTransform,
-      listHeight,
       visibleData,
       classes,
       getContainerHeight,
@@ -89,23 +226,24 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   }, [
     createElementVNode("div", {
       class: "nut-list-phantom",
-      style: normalizeStyle({ height: _ctx.listHeight + "px" })
+      style: normalizeStyle({ height: _ctx.phantomHeight + "px" }),
+      ref: "phantom"
     }, null, 4),
     createElementVNode("div", {
       class: "nut-list-container",
-      style: normalizeStyle({ transform: _ctx.getTransform })
+      style: normalizeStyle({ transform: _ctx.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
+            index: index2 + _ctx.start
           })
-        ], 4);
+        ]);
       }), 128))
     ], 4)
   ], 38);

package/dist/packages/_es/Navbar.js

@@ -8,15 +8,10 @@ const _sfc_main = create({
   components: { Left },
   props: {
     leftShow: { type: Boolean, default: false },
-    //左侧  是否显示返回icon
     title: { type: String, default: "" },
-    //中间  文字标题
     titleIcon: { type: Boolean, default: false },
-    //中间
     leftText: { type: String, default: "" },
-    //左侧文字
     desc: { type: String, default: "" },
-    //右侧   按钮文字
     fixed: {
       type: Boolean,
       default: false
@@ -30,7 +25,6 @@ const _sfc_main = create({
       default: false
     },
     placeholder: {
-      // 生成一个等高的占位元素
       type: Boolean,
       default: true
     },

package/dist/packages/_es/Noticebar.js

@@ -7,7 +7,6 @@ import "../locale/lang";
 const { componentName, create } = createComponent("noticebar");
 const _sfc_main = create({
   props: {
-    // 滚动方向  across 横向 vertical 纵向
     direction: {
       type: String,
       default: "across"
@@ -391,7 +390,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           return openBlock(), createElementBlock("li", {
             class: "nut-noticebar__vertical-item",
             key: index2,
-            style: normalizeStyle({ height: _ctx.pxCheck(_ctx.height) }),
+            style: normalizeStyle({ height: _ctx.pxCheck(_ctx.height), lineHeight: _ctx.pxCheck(_ctx.height) }),
             onClick: ($event) => _ctx.go(item)
           }, toDisplayString(item), 13, _hoisted_5);
         }), 128))

package/dist/packages/_es/Notify.js

@@ -109,9 +109,6 @@ const defaultOptions = {
   duration: 3e3,
   className: "",
   onClose: Function,
-  // onClick: null,
-  // onOpened: null,
-  // textTimer: null,
   teleport: "",
   unmount: new Function()
 };

package/dist/packages/_es/Picker.js

@@ -159,14 +159,12 @@ const usePicker = (props, emit) => {
 const { create: create$1 } = createComponent("picker-column");
 const _sfc_main$1 = create$1({
   props: {
-    // 当前选中项
     value: [String, Number],
     columnsType: String,
     column: {
       type: Array,
       default: () => []
     },
-    // 是否开启3D效果
     threeDimensional: {
       type: Boolean,
       default: true

package/dist/packages/_es/PullRefresh.js

@@ -25,10 +25,6 @@ const _sfc_main = create({
       type: String,
       default: translate("loading")
     },
-    // completeTxt: {
-    //   type: String,
-    //   default: ''
-    // },
     headHeight: {
       type: [String, Number],
       default: 50
@@ -153,7 +149,6 @@ const _sfc_main = create({
     watch(
       () => props.modelValue,
       (val) => {
-        console.log("监听", val);
         if (val) {
           setPullStatus(+props.headHeight, true);
           nextTick(() => emit("refresh"));

package/dist/packages/_es/Radio.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "./index.vue_vue_type_script_lang-9c679f64.js";
+import { _ as _sfc_main } from "./index.vue_vue_type_script_lang-8b9f3de5.js";
 import "vue";
 import "./component-bb5ff48e.js";
 import "../locale/lang";

package/dist/packages/_es/RadioGroup.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "./index.vue_vue_type_script_lang-0725f0ae.js";
+import { _ as _sfc_main } from "./index.vue_vue_type_script_lang-ee936659.js";
 import "vue";
 import "./component-bb5ff48e.js";
 import "../locale/lang";

package/dist/packages/_es/Searchbar.js

@@ -45,7 +45,6 @@ const _sfc_main = create({
     },
     focusStyle: {
       type: Object,
-      // eslint-disable-next-line @typescript-eslint/no-empty-function
       default: () => {
       }
     },

package/dist/packages/_es/ShortPassword.js

@@ -42,7 +42,6 @@ const _sfc_main = create({
     },
     length: {
       type: [String, Number],
-      //4～6
       default: 6
     }
   },

package/dist/packages/_es/Signature.js

@@ -126,7 +126,6 @@ const _sfc_main = create({
       const _canvas = isCanvasBlank(canvas2) ? "请绘制签名" : canvas2;
       const _filePath = isCanvasBlank(canvas2) ? "" : dataurl;
       emit("confirm", _canvas, _filePath);
-      clear();
     };
     onMounted(() => {
       if (isCanvasSupported()) {

package/dist/packages/_es/Skeleton.js

@@ -7,52 +7,42 @@ const component = (components) => {
   return {
     components,
     props: {
-      //每行宽度
       width: {
         type: String,
         default: "100px"
       },
-      //每行高度
       height: {
         type: String,
         default: "15px"
       },
-      //是否显示动画
       animated: {
         type: Boolean,
         default: false
       },
-      //头像
       avatar: {
         type: Boolean,
         default: false
       },
-      //头像形状：正方形/圆形
       avatarShape: {
         type: String,
         default: "round"
       },
-      //头像大小
       avatarSize: {
         type: String,
         default: "50px"
       },
-      //是否显示骨架屏
       loading: {
         type: Boolean,
         default: true
       },
-      //标题/段落 圆角风格
       round: {
         type: Boolean,
         default: false
       },
-      //显示段落行数
       row: {
         type: String,
         default: "1"
       },
-      //是否显示段落标题
       title: {
         type: Boolean,
         default: true

package/dist/packages/_es/Sku.js

@@ -124,7 +124,6 @@ const SkuSelect = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_rend
 const { componentName: componentName$2, create: create$2 } = createComponent("sku-stepper");
 const _sfc_main$2 = create$2({
   props: {
-    // 购买数量最大值
     stepperMax: {
       type: [Number, String],
       default: 99999
@@ -133,12 +132,10 @@ const _sfc_main$2 = create$2({
       type: [Number, String],
       default: 1
     },
-    // stepper 前文案提示
     stepperExtraText: {
       type: [Function, Boolean],
       default: false
     },
-    // 数量选择左侧文案
     stepperTitle: {
       type: String,
       default: "购买数量"
@@ -217,7 +214,6 @@ const SkuStepper = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_ren
 const { componentName: componentName$1, create: create$1 } = createComponent("sku-operate");
 const _sfc_main$1 = create$1({
   props: {
-    // 底部按钮配置  confirm cart  buy
     btnOptions: {
       type: Array,
       default: () => ["confirm"]
@@ -226,12 +222,10 @@ const _sfc_main$1 = create$1({
       type: String,
       default: ""
     },
-    // 立即购买文案
     buyText: {
       type: String,
       default: "立即购买"
     },
-    // 加入购物车文案
     addCartText: {
       type: String,
       default: "加入购物车"
@@ -303,27 +297,22 @@ const _sfc_main = create({
       type: Object,
       default: {}
     },
-    // stepper 最大值
     stepperMax: {
       type: [Number, String],
       default: 99999
     },
-    // stepper 最小值
     stepperMin: {
       type: [Number, String],
       default: 1
     },
-    // 底部按钮配置  confirm cart  buy
     btnOptions: {
       type: Array,
       default: () => ["confirm"]
     },
-    // 数量选择左侧文案
     stepperTitle: {
       type: String,
       default: ""
     },
-    // stepper 前面文案
     stepperExtraText: {
       type: [Function, Boolean],
       default: false
@@ -332,17 +321,14 @@ const _sfc_main = create({
       type: String,
       default: ""
     },
-    // 立即购买文案
     buyText: {
       type: String,
       default: ""
     },
-    // 加入购物车文案
     addCartText: {
       type: String,
       default: ""
     },
-    // 确定文案
     confirmText: {
       type: String,
       default: ""

package/dist/packages/_es/Swiper.js

@@ -19,7 +19,6 @@ const _sfc_main = create({
     direction: {
       type: String,
       default: "horizontal"
-      //horizontal and vertical
     },
     paginationVisible: {
       type: Boolean,

package/dist/packages/_es/TabbarItem.js

@@ -10,7 +10,6 @@ const _sfc_main = create({
   components: { [Badge.name]: Badge },
   props: {
     tabTitle: {
-      // 标签页的标题
       type: String,
       default: ""
     },
@@ -18,11 +17,9 @@ const _sfc_main = create({
       type: String
     },
     icon: {
-      // 标签页显示的icon
       type: Object
     },
     href: {
-      // 标签页的跳转链接
       type: String,
       default: ""
     },
@@ -35,9 +32,7 @@ const _sfc_main = create({
     const parent = inject("parent");
     const state = reactive({
       unactiveColor: parent.unactiveColor,
-      // 未选中的颜色
       activeColor: parent.activeColor,
-      // 选中的颜色
       index: 0
     });
     const router = useRouter();

package/dist/packages/_es/Tabs.js

@@ -36,7 +36,6 @@ const _sfc_main = create({
     direction: {
       type: String,
       default: "horizontal"
-      //vertical
     },
     size: {
       type: String,
@@ -45,7 +44,6 @@ const _sfc_main = create({
     type: {
       type: String,
       default: "line"
-      //card、line、smile
     },
     titleScroll: {
       type: Boolean,
@@ -216,7 +214,7 @@ const _sfc_main = create({
     const methods = {
       tabChange: (item, index) => {
         emit("click", item);
-        if (item.disabled) {
+        if (item.disabled || currentIndex.value == index) {
           return;
         }
         currentIndex.value = index;

package/dist/packages/_es/Textarea.js

@@ -67,7 +67,6 @@ const _sfc_main = create({
     const styles = computed(() => {
       return {
         textAlign: props.textAlign
-        // resize: props.autosize ? 'vertical' : 'none'
       };
     });
     const getContentHeight = () => {

package/dist/packages/_es/Toast.js

@@ -196,9 +196,7 @@ const defaultOptions = {
   msg: "",
   id: "",
   duration: 2e3,
-  //显示时间(毫秒)
   center: true,
-  // 未实现
   type: "text",
   title: "",
   customClass: "",
@@ -207,19 +205,13 @@ const defaultOptions = {
   iconSize: "20",
   icon: null,
   textAlignCenter: true,
-  // 未实现
   loadingRotate: true,
-  // 未实现
   bgColor: "",
   onClose: null,
-  // 未实现
   unmount: null,
   cover: false,
-  //透明遮罩层 // 未实现
   coverColor: "",
-  // 未实现
   closeOnClickOverlay: false
-  // 未实现
 };
 let idsMap = [];
 let optsMap = [];

package/dist/packages/_es/Tour.js

@@ -19,7 +19,6 @@ const _sfc_main = create({
     type: {
       type: String,
       default: "step"
-      // tile
     },
     steps: {
       type: Array,

package/dist/packages/_es/Uploader.js

@@ -103,11 +103,9 @@ const _sfc_main = create({
   props: {
     name: { type: String, default: "file" },
     url: { type: String, default: "" },
-    // defaultFileList: { type: Array, default: () => new Array<FileItem>() },
     timeout: { type: [Number, String], default: 1e3 * 30 },
     fileList: { type: Array, default: () => [] },
     isPreview: { type: Boolean, default: true },
-    // picture、list
     listType: { type: String, default: "picture" },
     isDeletable: { type: Boolean, default: true },
     method: { type: String, default: "post" },