y-design-ssr 0.2.1 → 0.2.3

package/libs/list/index.mjs

@@ -1,11 +1,46 @@
-import { ref as d, reactive as K, defineComponent as P, createVNode as i, computed as S, onMounted as Q, onUpdated as X, nextTick as Z, onUnmounted as ee, createTextVNode as te } from "vue";
-const ne = (e) => (n) => Object.prototype.toString.call(n) === `[object ${e}]`, ae = ne("Number"), L = (e, n) => n ? typeof n == "string" ? ` ${e}--${n}` : Array.isArray(n) ? n.reduce((c, r) => c + L(e, r), "") : Object.keys(n).reduce(
-  (c, r) => c + (n[r] ? L(e, r) : ""),
-  ""
-) : "", le = (e) => (n, c) => {
-  let r = n, f = c;
-  return r && typeof r != "string" && (f = r, r = ""), r = r ? `${e}__${r}` : e, `${r}${L(r, f)}`;
-}, re = () => (e, n) => n ? `${L(`y-${e}`, n)}` : `y-${e}`, ie = {
+import { ref, reactive, defineComponent, createVNode, computed, onMounted, onUpdated, nextTick, onUnmounted, createTextVNode } from "vue";
+const tagTester = (name2) => {
+  return (obj) => {
+    return Object.prototype.toString.call(obj) === `[object ${name2}]`;
+  };
+};
+const isNumber = tagTester("Number");
+const getMods = (el, mods) => {
+  if (!mods) {
+    return "";
+  }
+  if (typeof mods === "string") {
+    return ` ${el}--${mods}`;
+  }
+  if (Array.isArray(mods)) {
+    return mods.reduce((acc, cur) => acc + getMods(el, cur), "");
+  }
+  return Object.keys(mods).reduce(
+    (acc, cur) => acc + (mods[cur] ? getMods(el, cur) : ""),
+    ""
+  );
+};
+const createBEM = (block) => {
+  return (el, mods) => {
+    let _el = el;
+    let _mods = mods;
+    if (_el && typeof _el !== "string") {
+      _mods = _el;
+      _el = "";
+    }
+    _el = _el ? `${block}__${_el}` : block;
+    return `${_el}${getMods(_el, _mods)}`;
+  };
+};
+const createGlobalBem = () => {
+  return (el, mods) => {
+    if (!mods) {
+      return `y-${el}`;
+    }
+    return `${getMods(`y-${el}`, mods)}`;
+  };
+};
+const defaultLang = {
   "pull-refresh": {
     pulling: "下拉刷新...",
     loosing: "释放刷新...",
@@ -17,15 +52,22 @@ const ne = (e) => (n) => Object.prototype.toString.call(n) === `[object ${e}]`,
     validateMessage: "请输入正确内容"
   }
 };
-d("zh-CN");
-K({
-  "zh-CN": ie
+ref("zh-CN");
+reactive({
+  "zh-CN": defaultLang
 });
-const G = (e) => {
-  const n = `y-${e}`;
-  return [n, le(n), re()];
-}, H = (e) => isNaN(Number(e)) && typeof e == "string" ? e : `${e}px`, oe = (e) => {
-  switch (e) {
+const createNamespace = (name2) => {
+  const prefixedName = `y-${name2}`;
+  return [prefixedName, createBEM(prefixedName), createGlobalBem()];
+};
+const parseUnit = (val) => {
+  if (isNaN(Number(val)) && typeof val === "string") {
+    return val;
+  }
+  return `${val}px`;
+};
+const parseFlexDirection = (location) => {
+  switch (location) {
     case "top":
       return "column-reverse";
     case "bottom":
@@ -37,7 +79,9 @@ const G = (e) => {
     default:
       return "column";
   }
-}, [ue, R] = G("loading"), ce = {
+};
+const [name, bem$1] = createNamespace("loading");
+const _props = {
   // Loading icon 的颜色
   color: {
     type: String,
@@ -96,76 +140,80 @@ const G = (e) => {
     type: String,
     default: "relative"
   }
-}, se = /* @__PURE__ */ P({
-  name: ue,
-  props: ce,
-  setup(e, {
-    slots: n
+};
+const YLoading = /* @__PURE__ */ defineComponent({
+  name,
+  props: _props,
+  setup(props, {
+    slots
   }) {
     return () => {
-      var w, B;
+      var _a, _b;
       const {
-        position: c,
-        textLocation: r,
-        bgColor: f,
-        bgBorderRadius: m,
-        size: o,
-        padding: x,
-        color: v,
-        thick: C,
-        direction: I,
-        text: s,
-        textColor: p,
-        textSize: l
-      } = e, k = ((w = n.default) == null ? void 0 : w.call(n)) || s;
-      return i("div", {
-        class: R({
-          [c]: c !== "relative"
+        position,
+        textLocation,
+        bgColor,
+        bgBorderRadius,
+        size,
+        padding,
+        color,
+        thick,
+        direction,
+        text,
+        textColor,
+        textSize
+      } = props;
+      const showText = ((_a = slots.default) == null ? void 0 : _a.call(slots)) || text;
+      return createVNode("div", {
+        "class": bem$1({
+          [position]: position !== "relative"
         })
-      }, [i("div", {
-        class: R("bg", {
-          [c]: c !== "relative"
+      }, [createVNode("div", {
+        "class": bem$1("bg", {
+          [position]: position !== "relative"
         }),
-        style: {
-          flexDirection: oe(r),
-          backgroundColor: f,
-          borderRadius: H(m),
-          padding: H(x)
+        "style": {
+          flexDirection: parseFlexDirection(textLocation),
+          backgroundColor: bgColor,
+          borderRadius: parseUnit(bgBorderRadius),
+          padding: parseUnit(padding)
         }
-      }, [i("span", {
-        class: R("icon-wrapper"),
-        style: {
-          width: H(o),
-          height: H(o)
+      }, [createVNode("span", {
+        "class": bem$1("icon-wrapper"),
+        "style": {
+          width: parseUnit(size),
+          height: parseUnit(size)
         }
-      }, [((B = n.icon) == null ? void 0 : B.call(n)) || i("svg", {
-        class: R("icon", {
-          [I]: I
+      }, [((_b = slots.icon) == null ? void 0 : _b.call(slots)) || createVNode("svg", {
+        "class": bem$1("icon", {
+          [direction]: direction
         }),
-        viewBox: "25 25 50 50"
-      }, [i("circle", {
-        class: R("icon-circle"),
-        style: {
-          stroke: v,
-          strokeWidth: H(C)
+        "viewBox": "25 25 50 50"
+      }, [createVNode("circle", {
+        "class": bem$1("icon-circle"),
+        "style": {
+          stroke: color,
+          strokeWidth: parseUnit(thick)
         },
-        cx: "50",
-        cy: "50",
-        r: "20",
-        fill: "none"
-      }, null)])]), k && i("span", {
-        class: R("text", {
-          [r]: r
+        "cx": "50",
+        "cy": "50",
+        "r": "20",
+        "fill": "none"
+      }, null)])]), showText && createVNode("span", {
+        "class": bem$1("text", {
+          [textLocation]: textLocation
         }),
-        style: {
-          color: p,
-          fontSize: H(l)
+        "style": {
+          color: textColor,
+          fontSize: parseUnit(textSize)
         }
-      }, [k])])]);
+      }, [showText])])]);
     };
   }
-}), [de, h] = G("list"), V = /* @__PURE__ */ P({
-  name: de,
+});
+const [cname, bem] = createNamespace("list");
+const List = /* @__PURE__ */ defineComponent({
+  name: cname,
   props: {
     // 加载中 文案
     loadingText: {
@@ -200,7 +248,7 @@ const G = (e) => {
     // 是否在初始化时立即执行滚动位置检查
     immediateCheck: {
       type: Boolean,
-      default: !0
+      default: true
     },
     // 滚动条与底部距离小于多少时触发加载
     loadOffset: {
@@ -210,7 +258,7 @@ const G = (e) => {
     // 是否使用虚拟列表
     virtual: {
       type: Boolean,
-      default: !1
+      default: false
     },
     //  缓冲区比例
     bufferScale: {
@@ -225,160 +273,293 @@ const G = (e) => {
     // 是否是不定高度子项
     dynamicItemHeight: {
       type: Boolean,
-      default: !1
+      default: false
     }
   },
   emits: ["load"],
-  setup(e, {
-    slots: n,
-    emit: c,
-    expose: r
+  setup(props, {
+    slots,
+    emit,
+    expose
   }) {
-    const f = d(0), m = d(!1), o = d("normal"), x = d(), v = d(), C = d(), I = d([]), s = d(0), p = d(0), l = d([]), k = S(() => ae(e.height) ? `${e.height}px` : e.height), w = S(() => l.value.length ? l.value[l.value.length - 1].bottom : 0), B = S(() => {
-      if (e.virtual) {
-        const t = s.value - M.value, a = p.value + A.value;
-        return _.value.slice(t, a);
+    const visibleHeightRef = ref(0);
+    const pageModeRef = ref(false);
+    const stateRef = ref("normal");
+    const listRef = ref();
+    const contentRef = ref();
+    const scrollBarRef = ref();
+    const itemsRef = ref([]);
+    const startIndexRef = ref(0);
+    const endIndexRef = ref(0);
+    const positionsRef = ref([]);
+    const listContainerRef = computed(() => {
+      return isNumber(props.height) ? `${props.height}px` : props.height;
+    });
+    const listHeightRef = computed(() => {
+      const listHeight = positionsRef.value.length ? positionsRef.value[positionsRef.value.length - 1].bottom : 0;
+      return listHeight;
+    });
+    const realRenderListRef = computed(() => {
+      if (props.virtual) {
+        const start = startIndexRef.value - aboveCountRef.value;
+        const end = endIndexRef.value + belowCountRef.value;
+        return _dataSourceRef.value.slice(start, end);
       }
-      return _.value;
-    }), M = S(() => Math.min(s.value, e.bufferScale * $.value)), A = S(() => Math.min(e.dataSource.length - p.value, e.bufferScale * $.value)), $ = S(() => Math.ceil(f.value / parseInt(String(e.itemHeight)))), _ = S(() => e.dataSource.map((t, a) => (t[e.keyName] = a, t))), j = () => m.value ? document.documentElement.scrollTop || document.body.scrollTop : x.value.scrollTop, W = () => m.value ? document.documentElement.scrollHeight : x.value.scrollHeight, E = () => {
-      o.value !== "loading" && (o.value = "loading", c("load", (t) => {
-        if (o.value === "loading")
-          switch (t) {
-            case "error":
-              o.value = "error";
-              break;
-            case "finished":
-              o.value = "finished", e.virtual && D(), e.virtual && e.dynamicItemHeight && U();
-              break;
-            default:
-              o.value = "normal", e.virtual && (U(), e.dataSource.length < $.value + A.value && E());
-          }
-      }));
-    }, z = () => {
-      o.value === "normal" && W() - j() - f.value <= e.loadOffset && E();
-    }, D = () => {
-      l.value = _.value.map((t, a) => {
-        const u = parseInt(String(e.itemHeight));
+      return _dataSourceRef.value;
+    });
+    const aboveCountRef = computed(() => {
+      const above = Math.min(startIndexRef.value, props.bufferScale * visibleCountRef.value);
+      return above;
+    });
+    const belowCountRef = computed(() => {
+      const below = Math.min(props.dataSource.length - endIndexRef.value, props.bufferScale * visibleCountRef.value);
+      return below;
+    });
+    const visibleCountRef = computed(() => {
+      const count = Math.ceil(visibleHeightRef.value / parseInt(String(props.itemHeight)));
+      return count;
+    });
+    const _dataSourceRef = computed(() => {
+      return props.dataSource.map((item, index) => {
+        item[props.keyName] = index;
+        return item;
+      });
+    });
+    const getScrollTop = () => {
+      if (pageModeRef.value) {
+        return document.documentElement.scrollTop || document.body.scrollTop;
+      }
+      return listRef.value.scrollTop;
+    };
+    const getScrollHeight = () => {
+      if (pageModeRef.value) {
+        return document.documentElement.scrollHeight;
+      }
+      return listRef.value.scrollHeight;
+    };
+    const loadData = () => {
+      if (stateRef.value === "loading")
+        return;
+      stateRef.value = "loading";
+      emit("load", (state) => {
+        if (stateRef.value !== "loading")
+          return;
+        switch (state) {
+          case "error":
+            stateRef.value = "error";
+            break;
+          case "finished":
+            stateRef.value = "finished";
+            if (props.virtual) {
+              initPositions();
+            }
+            if (props.virtual && props.dynamicItemHeight) {
+              updatePositions();
+            }
+            break;
+          default:
+            stateRef.value = "normal";
+            if (props.virtual) {
+              updatePositions();
+              if (props.dataSource.length < visibleCountRef.value + belowCountRef.value) {
+                loadData();
+              }
+            }
+        }
+      });
+    };
+    const checkIsScrollToBottom = () => {
+      if (stateRef.value !== "normal")
+        return;
+      if (getScrollHeight() - getScrollTop() - visibleHeightRef.value <= props.loadOffset) {
+        loadData();
+      }
+    };
+    const initPositions = () => {
+      positionsRef.value = _dataSourceRef.value.map((_, index) => {
+        const height = parseInt(String(props.itemHeight));
         return {
-          index: a,
-          height: u,
-          top: a * u,
-          bottom: (a + 1) * u
+          index,
+          height,
+          top: index * height,
+          bottom: (index + 1) * height
         };
       });
-    }, U = () => {
-      D();
-      for (let t = 1; t < l.value.length; t++)
-        l.value[t].top = l.value[t - 1].bottom, l.value[t].bottom = l.value[t].top + l.value[t].height;
-    }, Y = (t, a) => {
-      let u = 0, N = t.length - 1, g = -1;
-      for (; u <= N; ) {
-        const y = Math.floor((u + N) / 2), b = t[y].bottom;
-        if (b === a)
-          return y + 1;
-        b < a ? u = y + 1 : b > a && ((g === -1 || g > y) && (g = y), N = y - 1);
+    };
+    const updatePositions = () => {
+      initPositions();
+      for (let i = 1; i < positionsRef.value.length; i++) {
+        positionsRef.value[i].top = positionsRef.value[i - 1].bottom;
+        positionsRef.value[i].bottom = positionsRef.value[i].top + positionsRef.value[i].height;
+      }
+    };
+    const binarySearch = (list, value) => {
+      let start = 0;
+      let end = list.length - 1;
+      let tempIndex = -1;
+      while (start <= end) {
+        const midIndex = Math.floor((start + end) / 2);
+        const midValue = list[midIndex].bottom;
+        if (midValue === value) {
+          return midIndex + 1;
+        } else if (midValue < value) {
+          start = midIndex + 1;
+        } else if (midValue > value) {
+          if (tempIndex === -1 || tempIndex > midIndex) {
+            tempIndex = midIndex;
+          }
+          end = midIndex - 1;
+        }
       }
-      return g;
-    }, q = (t) => Y(l.value, t), O = () => {
-      if (z(), e.virtual) {
-        const t = j();
-        F(t);
+      return tempIndex;
+    };
+    const getStartIndex = (scrollTop) => {
+      return binarySearch(positionsRef.value, scrollTop);
+    };
+    const handleScroll = () => {
+      checkIsScrollToBottom();
+      if (props.virtual) {
+        const scrollTop = getScrollTop();
+        updateVisibleData(scrollTop);
       }
-    }, F = (t) => {
-      if (!v.value)
+    };
+    const updateVisibleData = (scrollTopParam) => {
+      if (!contentRef.value)
         return;
-      const a = t || 0;
-      if (e.dynamicItemHeight) {
-        s.value = q(a), p.value = s.value + $.value;
-        const u = l.value[s.value - M.value].top ? l.value[s.value - M.value].top : 0;
-        v.value.style.transform = `translate3d(0, ${u}px, 0)`;
+      const scrollTop = scrollTopParam || 0;
+      if (props.dynamicItemHeight) {
+        startIndexRef.value = getStartIndex(scrollTop);
+        endIndexRef.value = startIndexRef.value + visibleCountRef.value;
+        const startOffset = positionsRef.value[startIndexRef.value - aboveCountRef.value].top ? positionsRef.value[startIndexRef.value - aboveCountRef.value].top : 0;
+        contentRef.value.style.transform = `translate3d(0, ${startOffset}px, 0)`;
       } else {
-        s.value = Math.floor(a / parseInt(String(e.itemHeight))), p.value = s.value + $.value;
-        const u = s.value * parseInt(String(e.itemHeight)) - M.value * parseInt(String(e.itemHeight));
-        v.value.style.transform = `translate3d(0, ${u}px, 0)`;
+        startIndexRef.value = Math.floor(scrollTop / parseInt(String(props.itemHeight)));
+        endIndexRef.value = startIndexRef.value + visibleCountRef.value;
+        const startOffset = startIndexRef.value * parseInt(String(props.itemHeight)) - aboveCountRef.value * parseInt(String(props.itemHeight));
+        contentRef.value.style.transform = `translate3d(0, ${startOffset}px, 0)`;
       }
-    }, J = () => {
-      if (!v.value || !C.value)
+    };
+    const updateItemSize = () => {
+      if (!contentRef.value || !scrollBarRef.value)
+        return;
+      const nodes = contentRef.value.children;
+      if (!(nodes && nodes.length > 0))
         return;
-      const t = v.value.children;
-      t && t.length > 0 && [...t].forEach((a) => {
-        if (a instanceof HTMLDivElement) {
-          const u = a.getBoundingClientRect(), {
-            height: N
-          } = u, g = Number(a.dataset.index), b = l.value[g].height - N;
-          if (b) {
-            l.value[g].bottom -= b, l.value[g].height = N;
-            for (let T = g + 1; T < l.value.length; T++)
-              l.value[T].top = l.value[T - 1].bottom, l.value[T].bottom -= b;
+      [...nodes].forEach((node) => {
+        if (node instanceof HTMLDivElement) {
+          const rect = node.getBoundingClientRect();
+          const {
+            height
+          } = rect;
+          const index = Number(node.dataset.index);
+          const oldHeight = positionsRef.value[index].height;
+          const dValue = oldHeight - height;
+          if (dValue) {
+            positionsRef.value[index].bottom -= dValue;
+            positionsRef.value[index].height = height;
+            for (let k = index + 1; k < positionsRef.value.length; k++) {
+              positionsRef.value[k].top = positionsRef.value[k - 1].bottom;
+              positionsRef.value[k].bottom -= dValue;
+            }
           }
         }
       });
     };
-    return r({
-      ...e,
-      checkIsScrollToBottom: z,
-      loadData: E
-    }), Q(() => {
-      e.height !== "auto" ? (m.value = !1, f.value = x.value.clientHeight) : e.height === "auto" && (m.value = !0, f.value = document.documentElement.clientHeight, document.addEventListener("scroll", O)), e.virtual && (D(), F()), e.immediateCheck && z();
-    }), X(async () => {
-      var t, a;
-      if (e.virtual && e.dynamicItemHeight) {
-        if (await Z(), !((a = (t = v.value) == null ? void 0 : t.children) != null && a.length))
+    expose({
+      ...props,
+      checkIsScrollToBottom,
+      loadData
+    });
+    onMounted(() => {
+      if (props.height !== "auto") {
+        pageModeRef.value = false;
+        visibleHeightRef.value = listRef.value.clientHeight;
+      } else if (props.height === "auto") {
+        pageModeRef.value = true;
+        visibleHeightRef.value = document.documentElement.clientHeight;
+        document.addEventListener("scroll", handleScroll);
+      }
+      if (props.virtual) {
+        initPositions();
+        updateVisibleData();
+      }
+      if (props.immediateCheck) {
+        checkIsScrollToBottom();
+      }
+    });
+    onUpdated(async () => {
+      var _a, _b;
+      if (props.virtual && props.dynamicItemHeight) {
+        await nextTick();
+        if (!((_b = (_a = contentRef.value) == null ? void 0 : _a.children) == null ? void 0 : _b.length)) {
           return;
-        J();
+        }
+        updateItemSize();
       }
-    }), ee(() => {
-      m.value && document.removeEventListener("scroll", O);
-    }), () => i("div", {
-      ref: x,
-      class: `${h()} ${e.virtual ? h({
-        virtual: !0
-      }) : ""}`,
-      style: {
-        height: k.value
-      },
-      onScroll: O
-    }, [e.virtual && i("div", {
-      ref: C,
-      class: h("phantom"),
-      style: {
-        height: `${w.value}px`
+    });
+    onUnmounted(() => {
+      if (pageModeRef.value) {
+        document.removeEventListener("scroll", handleScroll);
       }
-    }, null), i("div", {
-      ref: v,
-      class: h("content")
-    }, [B.value.map((t) => {
-      var a;
-      return i("div", {
-        ref: I,
-        class: h("item"),
-        "data-index": t._index
-      }, [(a = n.default) == null ? void 0 : a.call(n, {
-        item: t
-      })]);
-    })]), o.value === "loading" && i("div", {
-      class: h({
-        loading: !0
-      })
-    }, [n.loading ? n.loading() : i(se, {
-      "text-location": "right"
-    }, {
-      default: () => [te("加载中...")]
-    })]), o.value === "finished" && i("div", {
-      class: h({
-        finished: !0
-      })
-    }, [e.finishedText]), o.value === "error" && i("div", {
-      class: h("error"),
-      role: "presentation",
-      onClick: E
-    }, [e.errorText])]);
+    });
+    return () => {
+      return createVNode("div", {
+        "ref": listRef,
+        "class": `${bem()} ${props.virtual ? bem({
+          virtual: true
+        }) : ""}`,
+        "style": {
+          height: listContainerRef.value
+        },
+        "onScroll": handleScroll
+      }, [props.virtual && createVNode("div", {
+        "ref": scrollBarRef,
+        "class": bem("phantom"),
+        "style": {
+          height: `${listHeightRef.value}px`
+        }
+      }, null), createVNode("div", {
+        "ref": contentRef,
+        "class": bem("content")
+      }, [realRenderListRef.value.map((item) => {
+        var _a;
+        return createVNode("div", {
+          "ref": itemsRef,
+          "class": bem("item"),
+          "data-index": item._index
+        }, [(_a = slots.default) == null ? void 0 : _a.call(slots, {
+          item
+        })]);
+      })]), stateRef.value === "loading" && createVNode("div", {
+        "class": bem({
+          loading: true
+        })
+      }, [slots.loading ? slots.loading() : createVNode(YLoading, {
+        "text-location": "right"
+      }, {
+        default: () => [createTextVNode("加载中...")]
+      })]), stateRef.value === "finished" && createVNode("div", {
+        "class": bem({
+          finished: true
+        })
+      }, [props.finishedText]), stateRef.value === "error" && createVNode("div", {
+        "class": bem("error"),
+        "role": "presentation",
+        "onClick": loadData
+      }, [props.errorText])]);
+    };
   }
 });
-V.install = (e) => {
-  const { name: n } = V;
-  e.component(n, V);
+const reset = "";
+const libs = "";
+const font = "";
+const animation = "";
+const theme = "";
+const style = "";
+List.install = (Vue) => {
+  const { name: name2 } = List;
+  Vue.component(name2, List);
 };
 export {
-  V as default
+  List as default
 };