@minilo/ui 0.0.6 → 0.0.8

package/minilo/es/components/virtual-list/index.vue2.mjs

@@ -1,421 +0,0 @@
-import { defineComponent, computed, ref, watch, onMounted, onUnmounted, createElementBlock, openBlock, normalizeClass, unref, createElementVNode, normalizeStyle, createCommentVNode, Fragment, renderList, renderSlot, createTextVNode } from 'vue';
-import { bem } from '../../utils/index.mjs';
-
-const _hoisted_1 = ["data-index"];
-var _sfc_main = /* @__PURE__ */ defineComponent({
-  ...{
-    name: "MlVirtualList"
-  },
-  __name: "index",
-  props: {
-    height: { type: Number, required: false, default: 500 },
-    itemHeight: { type: Number, required: false, default: 50 },
-    estimatedItemHeight: { type: Number, required: false, default: 50 },
-    itemEqual: { type: Boolean, required: false, default: true },
-    preLoadCount: { type: Number, required: false, default: 5 },
-    threshold: { type: Number, required: false, default: 200 },
-    dataSource: { type: Array, required: false, default: () => [] },
-    loading: { type: Boolean, required: false },
-    finished: { type: Boolean, required: false }
-  },
-  emits: ["load-more"],
-  setup(__props, { emit: __emit }) {
-    const props = __props;
-    const emit = __emit;
-    const SCROLL_VIEW_HEIGHT = computed(() => props.height);
-    const ITEM_HEIGHT = computed(() => props.itemHeight);
-    const ESTIMATED_ITEM_HEIGHT = computed(() => props.estimatedItemHeight);
-    const PRE_LOAD_COUNT = computed(() => props.preLoadCount);
-    const containerRef = ref(null);
-    const positions = ref([]);
-    const showRange = ref({
-      start: 0,
-      end: 10
-    });
-    let rafId = null;
-    let isRafPending = false;
-    let resizeObserver = null;
-    let resizeUpdateTimer = null;
-    const initPositions = () => {
-      const data = props.dataSource;
-      const height = props.itemEqual ? ITEM_HEIGHT.value : ESTIMATED_ITEM_HEIGHT.value;
-      positions.value = data.map((_, index) => ({
-        index,
-        height,
-        top: index * height,
-        bottom: (index + 1) * height
-      }));
-    };
-    const scrollViewHeight = computed(() => {
-      if (props.itemEqual) {
-        return props.dataSource.length * ITEM_HEIGHT.value;
-      }
-      const len = positions.value.length;
-      const lastPos = positions.value[len - 1];
-      if (len > 0 && lastPos) {
-        return lastPos.bottom;
-      }
-      return 0;
-    });
-    const scrollViewOffset = computed(() => {
-      const start = showRange.value.start;
-      if (props.itemEqual) {
-        return start * ITEM_HEIGHT.value;
-      }
-      return start > 0 && positions.value[start] ? positions.value[start].top : 0;
-    });
-    const currentViewList = computed(() => {
-      return props.dataSource.slice(showRange.value.start, showRange.value.end).map((el, index) => ({
-        data: el,
-        index: showRange.value.start + index
-      }));
-    });
-    const getStartIndex = (scrollTop) => {
-      let start = 0;
-      let end = positions.value.length - 1;
-      let mid = 0;
-      while (start <= end) {
-        mid = Math.floor((start + end) / 2);
-        const midPos = positions.value[mid];
-        if (!midPos) break;
-        const midBottom = midPos.bottom;
-        const midTop = midPos.top;
-        if (midTop <= scrollTop && midBottom > scrollTop) {
-          return mid;
-        } else if (midTop > scrollTop) {
-          end = mid - 1;
-        } else {
-          start = mid + 1;
-        }
-      }
-      return 0;
-    };
-    const updatePositions = () => {
-      if (props.itemEqual) return;
-      const nodes = containerRef.value?.querySelectorAll(".virtual-list-item");
-      if (!nodes || nodes.length === 0) return;
-      nodes.forEach((node) => {
-        const rect = node.getBoundingClientRect();
-        const height = rect.height;
-        const index = parseInt(node.dataset.index || "0");
-        const pos = positions.value[index];
-        if (!pos) return;
-        const oldHeight = pos.height || 0;
-        if (oldHeight !== height) {
-          pos.height = height;
-          pos.bottom = pos.top + height;
-          for (let i = index + 1; i < positions.value.length; i++) {
-            const currentPos = positions.value[i];
-            const prevPos = positions.value[i - 1];
-            if (currentPos && prevPos) {
-              currentPos.top = prevPos.bottom;
-              currentPos.bottom = currentPos.top + currentPos.height;
-            }
-          }
-        }
-      });
-    };
-    const initResizeObserver = () => {
-      if (props.itemEqual) return;
-      if (resizeObserver) {
-        resizeObserver.disconnect();
-      }
-      resizeObserver = new ResizeObserver((entries) => {
-        let needUpdate = false;
-        const changedIndices = [];
-        for (const entry of entries) {
-          const target = entry.target;
-          const index = parseInt(target.dataset.index || "0");
-          const pos = positions.value[index];
-          if (!pos) continue;
-          const newHeight = entry.contentRect.height;
-          const oldHeight = pos.height;
-          if (Math.abs(newHeight - oldHeight) > 1) {
-            needUpdate = true;
-            changedIndices.push(index);
-            pos.height = newHeight;
-            pos.bottom = pos.top + newHeight;
-          }
-        }
-        if (needUpdate) {
-          if (resizeUpdateTimer !== null) {
-            clearTimeout(resizeUpdateTimer);
-          }
-          resizeUpdateTimer = window.setTimeout(() => {
-            const minChangedIndex = Math.min(...changedIndices);
-            for (let i = minChangedIndex + 1; i < positions.value.length; i++) {
-              const currentPos = positions.value[i];
-              const prevPos = positions.value[i - 1];
-              if (currentPos && prevPos) {
-                currentPos.top = prevPos.bottom;
-                currentPos.bottom = currentPos.top + currentPos.height;
-              }
-            }
-            changedIndices.length = 0;
-            resizeUpdateTimer = null;
-          }, 16);
-        }
-      });
-      observeVisibleItems();
-    };
-    const observeVisibleItems = () => {
-      if (!resizeObserver || props.itemEqual) return;
-      resizeObserver.disconnect();
-      const nodes = containerRef.value?.querySelectorAll(".virtual-list-item");
-      if (!nodes) return;
-      nodes.forEach((node) => {
-        resizeObserver.observe(node);
-      });
-    };
-    const calculateRange = () => {
-      const element = containerRef.value;
-      if (!element) return;
-      const scrollTop = element.scrollTop;
-      const clientHeight = element.clientHeight;
-      let start = 0;
-      let end = 0;
-      if (props.itemEqual) {
-        start = Math.floor(scrollTop / ITEM_HEIGHT.value);
-        const viewItemSize = Math.ceil(clientHeight / ITEM_HEIGHT.value);
-        end = start + viewItemSize;
-      } else {
-        if (positions.value.length === 0) return;
-        start = getStartIndex(scrollTop);
-        let totalHeight = 0;
-        const targetHeight = clientHeight + PRE_LOAD_COUNT.value * ESTIMATED_ITEM_HEIGHT.value;
-        for (let i = start; i < positions.value.length; i++) {
-          const pos = positions.value[i];
-          if (!pos) break;
-          totalHeight += pos.height;
-          if (totalHeight >= targetHeight) {
-            end = i + 1;
-            break;
-          }
-          end = i + 1;
-        }
-      }
-      const maxVisibleItems = 10;
-      if (end - start > maxVisibleItems) {
-        end = start + maxVisibleItems;
-      }
-      showRange.value = {
-        start: Math.max(0, start - PRE_LOAD_COUNT.value),
-        end: Math.min(props.dataSource.length, end + PRE_LOAD_COUNT.value)
-      };
-    };
-    const checkLoadMore = () => {
-      const element = containerRef.value;
-      if (!element || props.loading || props.finished) return;
-      const scrollTop = element.scrollTop;
-      const clientHeight = element.clientHeight;
-      const totalHeight = scrollViewHeight.value;
-      const distanceToBottom = totalHeight - scrollTop - clientHeight;
-      if (distanceToBottom < props.threshold) {
-        emit("load-more");
-      }
-    };
-    const onContainerScroll = () => {
-      if (isRafPending) return;
-      isRafPending = true;
-      rafId = requestAnimationFrame(() => {
-        updatePositions();
-        calculateRange();
-        if (props.finished !== void 0 && !props.finished) {
-          checkLoadMore();
-        }
-        isRafPending = false;
-      });
-    };
-    watch(
-      () => props.dataSource.length,
-      (newLen, oldLen = 0) => {
-        if (newLen !== oldLen) {
-          if (props.itemEqual) {
-            initPositions();
-          } else {
-            if (newLen > oldLen) {
-              const height = ESTIMATED_ITEM_HEIGHT.value;
-              for (let i = oldLen; i < newLen; i++) {
-                const lastPos = positions.value[i - 1];
-                positions.value.push({
-                  index: i,
-                  height,
-                  top: lastPos ? lastPos.bottom : 0,
-                  bottom: (lastPos ? lastPos.bottom : 0) + height
-                });
-              }
-            } else {
-              positions.value = positions.value.slice(0, newLen);
-            }
-          }
-          requestAnimationFrame(() => {
-            updatePositions();
-            calculateRange();
-            if (!props.itemEqual) {
-              observeVisibleItems();
-            }
-          });
-        }
-      },
-      { immediate: true }
-    );
-    watch(
-      () => showRange.value,
-      () => {
-        if (!props.itemEqual && resizeObserver) {
-          if (rafId !== null) {
-            cancelAnimationFrame(rafId);
-          }
-          rafId = requestAnimationFrame(() => {
-            observeVisibleItems();
-            rafId = null;
-          });
-        }
-      },
-      { deep: true }
-    );
-    onMounted(() => {
-      initPositions();
-      initResizeObserver();
-      requestAnimationFrame(() => {
-        updatePositions();
-        calculateRange();
-      });
-    });
-    onUnmounted(() => {
-      if (rafId !== null) {
-        cancelAnimationFrame(rafId);
-      }
-      if (resizeUpdateTimer !== null) {
-        clearTimeout(resizeUpdateTimer);
-      }
-      if (resizeObserver) {
-        resizeObserver.disconnect();
-        resizeObserver = null;
-      }
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock(
-        "div",
-        {
-          class: normalizeClass(unref(bem)("virtual-list"))
-        },
-        [
-          createElementVNode(
-            "div",
-            {
-              class: normalizeClass(unref(bem)("virtual-list", "container")),
-              ref_key: "containerRef",
-              ref: containerRef,
-              style: normalizeStyle({
-                height: SCROLL_VIEW_HEIGHT.value + "px",
-                overflow: "auto"
-              }),
-              onScroll: onContainerScroll
-            },
-            [
-              createElementVNode(
-                "div",
-                {
-                  class: normalizeClass(unref(bem)("virtual-list", "phantom")),
-                  style: normalizeStyle({
-                    height: scrollViewHeight.value + "px"
-                  })
-                },
-                [
-                  createElementVNode(
-                    "div",
-                    {
-                      class: normalizeClass(unref(bem)("virtual-list", "content")),
-                      style: normalizeStyle({
-                        transform: `translateY(${scrollViewOffset.value}px)`
-                      })
-                    },
-                    [
-                      (openBlock(true), createElementBlock(
-                        Fragment,
-                        null,
-                        renderList(currentViewList.value, (item) => {
-                          return openBlock(), createElementBlock("div", {
-                            key: item.index,
-                            class: normalizeClass(unref(bem)("virtual-list", "item")),
-                            "data-index": item.index,
-                            style: normalizeStyle(__props.itemEqual ? { height: ITEM_HEIGHT.value + "px" } : {})
-                          }, [
-                            renderSlot(_ctx.$slots, "default", {
-                              item: item.data,
-                              index: item.index
-                            })
-                          ], 14, _hoisted_1);
-                        }),
-                        128
-                        /* KEYED_FRAGMENT */
-                      ))
-                    ],
-                    6
-                    /* CLASS, STYLE */
-                  )
-                ],
-                6
-                /* CLASS, STYLE */
-              ),
-              createCommentVNode(" \u52A0\u8F7D\u72B6\u6001\u63D0\u793A\uFF08\u5728\u5BB9\u5668\u5185\u90E8\uFF09 "),
-              props.loading ? (openBlock(), createElementBlock(
-                "div",
-                {
-                  key: 0,
-                  class: normalizeClass(unref(bem)("virtual-list", "loading-tip"))
-                },
-                [
-                  renderSlot(_ctx.$slots, "loading", {}, () => [
-                    _cache[0] || (_cache[0] = createElementVNode(
-                      "span",
-                      { class: "loading-spinner" },
-                      null,
-                      -1
-                      /* CACHED */
-                    )),
-                    _cache[1] || (_cache[1] = createElementVNode(
-                      "span",
-                      null,
-                      "\u52A0\u8F7D\u4E2D...",
-                      -1
-                      /* CACHED */
-                    ))
-                  ])
-                ],
-                2
-                /* CLASS */
-              )) : createCommentVNode("v-if", true),
-              createCommentVNode(" \u52A0\u8F7D\u5B8C\u6210\u63D0\u793A "),
-              props.finished && !props.loading ? (openBlock(), createElementBlock(
-                "div",
-                {
-                  key: 1,
-                  class: normalizeClass(unref(bem)("virtual-list", "finished-tip"))
-                },
-                [
-                  renderSlot(_ctx.$slots, "finished", {}, () => [
-                    _cache[2] || (_cache[2] = createTextVNode(
-                      "\u5DF2\u52A0\u8F7D\u5168\u90E8\u6570\u636E",
-                      -1
-                      /* CACHED */
-                    ))
-                  ])
-                ],
-                2
-                /* CLASS */
-              )) : createCommentVNode("v-if", true)
-            ],
-            38
-            /* CLASS, STYLE, NEED_HYDRATION */
-          )
-        ],
-        2
-        /* CLASS */
-      );
-    };
-  }
-});
-
-export { _sfc_main as default };

package/minilo/es/components/virtual-list/type.d.ts

@@ -1,20 +0,0 @@
-export interface MlVirtualListProps {
-    /** 容器高度，默认 500px */
-    height?: number;
-    /** 列表项高度（定高模式必传） */
-    itemHeight?: number;
-    /** 列表项预估高度（不定高模式使用），默认 50px */
-    estimatedItemHeight?: number;
-    /** 是否为等高列表，true=定高，false=不定高，默认 true */
-    itemEqual?: boolean;
-    /** 预加载数量（上下各预加载几个） */
-    preLoadCount?: number;
-    /** 距离底部多少像素时触发加载 */
-    threshold?: number;
-    /** 数据源 */
-    dataSource?: any[];
-    /** 是否正在加载 */
-    loading?: boolean;
-    /** 是否已加载完所有数据 */
-    finished?: boolean;
-}