y-design-ssr 0.2.2 → 0.2.4

package/libs/list/index.mjs

@@ -1,46 +1,11 @@
-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 = {
+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 = {
   "pull-refresh": {
     pulling: "下拉刷新...",
     loosing: "释放刷新...",
@@ -52,22 +17,15 @@ const defaultLang = {
     validateMessage: "请输入正确内容"
   }
 };
-ref("zh-CN");
-reactive({
-  "zh-CN": defaultLang
+d("zh-CN");
+K({
+  "zh-CN": ie
 });
-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) {
+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) {
     case "top":
       return "column-reverse";
     case "bottom":
@@ -79,9 +37,7 @@ const parseFlexDirection = (location) => {
     default:
       return "column";
   }
-};
-const [name, bem$1] = createNamespace("loading");
-const _props = {
+}, [ue, R] = G("loading"), ce = {
   // Loading icon 的颜色
   color: {
     type: String,
@@ -140,80 +96,76 @@ const _props = {
     type: String,
     default: "relative"
   }
-};
-const YLoading = /* @__PURE__ */ defineComponent({
-  name,
-  props: _props,
-  setup(props, {
-    slots
+}, se = /* @__PURE__ */ P({
+  name: ue,
+  props: ce,
+  setup(e, {
+    slots: n
   }) {
     return () => {
-      var _a, _b;
+      var w, B;
       const {
-        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"
+        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"
         })
-      }, [createVNode("div", {
-        "class": bem$1("bg", {
-          [position]: position !== "relative"
+      }, [i("div", {
+        class: R("bg", {
+          [c]: c !== "relative"
         }),
-        "style": {
-          flexDirection: parseFlexDirection(textLocation),
-          backgroundColor: bgColor,
-          borderRadius: parseUnit(bgBorderRadius),
-          padding: parseUnit(padding)
+        style: {
+          flexDirection: oe(r),
+          backgroundColor: f,
+          borderRadius: H(m),
+          padding: H(x)
         }
-      }, [createVNode("span", {
-        "class": bem$1("icon-wrapper"),
-        "style": {
-          width: parseUnit(size),
-          height: parseUnit(size)
+      }, [i("span", {
+        class: R("icon-wrapper"),
+        style: {
+          width: H(o),
+          height: H(o)
         }
-      }, [((_b = slots.icon) == null ? void 0 : _b.call(slots)) || createVNode("svg", {
-        "class": bem$1("icon", {
-          [direction]: direction
+      }, [((B = n.icon) == null ? void 0 : B.call(n)) || i("svg", {
+        class: R("icon", {
+          [I]: I
         }),
-        "viewBox": "25 25 50 50"
-      }, [createVNode("circle", {
-        "class": bem$1("icon-circle"),
-        "style": {
-          stroke: color,
-          strokeWidth: parseUnit(thick)
+        viewBox: "25 25 50 50"
+      }, [i("circle", {
+        class: R("icon-circle"),
+        style: {
+          stroke: v,
+          strokeWidth: H(C)
         },
-        "cx": "50",
-        "cy": "50",
-        "r": "20",
-        "fill": "none"
-      }, null)])]), showText && createVNode("span", {
-        "class": bem$1("text", {
-          [textLocation]: textLocation
+        cx: "50",
+        cy: "50",
+        r: "20",
+        fill: "none"
+      }, null)])]), k && i("span", {
+        class: R("text", {
+          [r]: r
         }),
-        "style": {
-          color: textColor,
-          fontSize: parseUnit(textSize)
+        style: {
+          color: p,
+          fontSize: H(l)
         }
-      }, [showText])])]);
+      }, [k])])]);
     };
   }
-});
-const [cname, bem] = createNamespace("list");
-const List = /* @__PURE__ */ defineComponent({
-  name: cname,
+}), [de, h] = G("list"), V = /* @__PURE__ */ P({
+  name: de,
   props: {
     // 加载中 文案
     loadingText: {
@@ -248,7 +200,7 @@ const List = /* @__PURE__ */ defineComponent({
     // 是否在初始化时立即执行滚动位置检查
     immediateCheck: {
       type: Boolean,
-      default: true
+      default: !0
     },
     // 滚动条与底部距离小于多少时触发加载
     loadOffset: {
@@ -258,7 +210,7 @@ const List = /* @__PURE__ */ defineComponent({
     // 是否使用虚拟列表
     virtual: {
       type: Boolean,
-      default: false
+      default: !1
     },
     //  缓冲区比例
     bufferScale: {
@@ -273,293 +225,160 @@ const List = /* @__PURE__ */ defineComponent({
     // 是否是不定高度子项
     dynamicItemHeight: {
       type: Boolean,
-      default: false
+      default: !1
     }
   },
   emits: ["load"],
-  setup(props, {
-    slots,
-    emit,
-    expose
+  setup(e, {
+    slots: n,
+    emit: c,
+    expose: r
   }) {
-    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 _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;
+    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);
       }
-      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 _.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 {
-          index,
-          height,
-          top: index * height,
-          bottom: (index + 1) * height
+          index: a,
+          height: u,
+          top: a * u,
+          bottom: (a + 1) * u
         };
       });
-    };
-    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;
-        }
+    }, 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);
       }
-      return tempIndex;
-    };
-    const getStartIndex = (scrollTop) => {
-      return binarySearch(positionsRef.value, scrollTop);
-    };
-    const handleScroll = () => {
-      checkIsScrollToBottom();
-      if (props.virtual) {
-        const scrollTop = getScrollTop();
-        updateVisibleData(scrollTop);
+      return g;
+    }, q = (t) => Y(l.value, t), O = () => {
+      if (z(), e.virtual) {
+        const t = j();
+        F(t);
       }
-    };
-    const updateVisibleData = (scrollTopParam) => {
-      if (!contentRef.value)
+    }, F = (t) => {
+      if (!v.value)
         return;
-      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)`;
+      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)`;
       } else {
-        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)`;
+        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)`;
       }
-    };
-    const updateItemSize = () => {
-      if (!contentRef.value || !scrollBarRef.value)
-        return;
-      const nodes = contentRef.value.children;
-      if (!(nodes && nodes.length > 0))
+    }, J = () => {
+      if (!v.value || !C.value)
         return;
-      [...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;
-            }
+      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;
           }
         }
       });
     };
-    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 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))
           return;
-        }
-        updateItemSize();
+        J();
       }
-    });
-    onUnmounted(() => {
-      if (pageModeRef.value) {
-        document.removeEventListener("scroll", handleScroll);
+    }), 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`
       }
-    });
-    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])]);
-    };
+    }, 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])]);
   }
 });
-const reset = "";
-const libs = "";
-const font = "";
-const animation = "";
-const theme = "";
-const style = "";
-List.install = (Vue) => {
-  const { name: name2 } = List;
-  Vue.component(name2, List);
+V.install = (e) => {
+  const { name: n } = V;
+  e.component(n, V);
 };
 export {
-  List as default
+  V as default
 };