@minilo/ui 0.0.1

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

@@ -0,0 +1,421 @@
+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

@@ -0,0 +1,20 @@
+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;
+}

package/minilo/es/components/virtual-list/type.mjs

@@ -0,0 +1 @@
+