@nutui/nutui 3.1.22-beta.5 → 3.1.23-beta.1

package/dist/packages/_es/Indicator.js

@@ -1,20 +1,67 @@
 /*!
-* @nutui/nutui v3.1.22-beta.5 Fri Jun 24 2022 15:10:09 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.23-beta.1 Mon Jun 27 2022 21:39:05 GMT+0800 (中国标准时间)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
-import { toRefs as e, computed as r, openBlock as t, createElementBlock as l, normalizeClass as o, Fragment as n, renderList as a, toDisplayString as u } from "vue";
-import { c } from "./component.js";
-import { _ as s } from "./plugin-vue_export-helper.js";
+import { toRefs, computed, openBlock, createElementBlock, normalizeClass, Fragment, renderList, toDisplayString } from "vue";
+import { c as createComponent } from "./component.js";
+import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
 import "../locale/lang";
-const { componentName: i, create: p } = c("indicator");
-var m = s(p({ props: { size: { type: Number, default: 3, required: true }, current: { type: Number, default: 1, required: true }, block: { type: Boolean, default: false }, align: { type: String, default: "center" }, fillZero: { type: Boolean, default: true } }, setup(t2) {
-  const { block: l2, align: o2 } = e(t2);
-  return { classes: r(() => {
-    const e2 = i;
-    return { [e2]: true, [`${e2}--block`]: l2.value, [`${e2}--align__${o2.value}`]: l2.value && o2.value };
-  }), componentName: i };
-} }), [["render", function(e2, r2, c2, s2, i2, p2) {
-  return t(), l("view", { class: o(e2.classes) }, [(t(true), l(n, null, a(e2.size, (r3) => (t(), l(n, { key: r3 }, [r3 === e2.current ? (t(), l("view", { key: 0, class: o(`${e2.componentName}--number`) }, u(e2.fillZero && r3 < 10 ? `0${r3}` : r3), 3)) : (t(), l("view", { key: 1, class: o(`${e2.componentName}--dot`) }, null, 2))], 64))), 128))], 2);
-}]]);
-export { m as default };
+const { componentName, create } = createComponent("indicator");
+const _sfc_main = create({
+  props: {
+    size: {
+      type: Number,
+      default: 3,
+      required: true
+    },
+    current: {
+      type: Number,
+      default: 1,
+      required: true
+    },
+    block: {
+      type: Boolean,
+      default: false
+    },
+    align: {
+      type: String,
+      default: "center"
+    },
+    fillZero: {
+      type: Boolean,
+      default: true
+    }
+  },
+  setup(props) {
+    const { block, align } = toRefs(props);
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true,
+        [`${prefixCls}--block`]: block.value,
+        [`${prefixCls}--align__${align.value}`]: block.value && align.value
+      };
+    });
+    return { classes, componentName };
+  }
+});
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("view", {
+    class: normalizeClass(_ctx.classes)
+  }, [
+    (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.size, (item) => {
+      return openBlock(), createElementBlock(Fragment, { key: item }, [
+        item === _ctx.current ? (openBlock(), createElementBlock("view", {
+          key: 0,
+          class: normalizeClass(`${_ctx.componentName}--number`)
+        }, toDisplayString(_ctx.fillZero && item < 10 ? `0${item}` : item), 3)) : (openBlock(), createElementBlock("view", {
+          key: 1,
+          class: normalizeClass(`${_ctx.componentName}--dot`)
+        }, null, 2))
+      ], 64);
+    }), 128))
+  ], 2);
+}
+var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { index as default };

package/dist/packages/_es/InfiniteLoading.js

@@ -1,64 +1,256 @@
 /*!
-* @nutui/nutui v3.1.22-beta.5 Fri Jun 24 2022 15:10:09 GMT+0800 (中国标准时间)
+* @nutui/nutui v3.1.23-beta.1 Mon Jun 27 2022 21:39:05 GMT+0800 (中国标准时间)
 * (c) 2022 @jdf2e.
 * Released under the MIT License.
 */
-import { reactive as e, computed as t, onMounted as o, onUnmounted as n, ref as s, onActivated as l, onDeactivated as i, toRefs as r, resolveComponent as a, openBlock as c, createElementBlock as u, normalizeClass as d, createElementVNode as f, normalizeStyle as p, createVNode as h, toDisplayString as g, renderSlot as m, Fragment as w, createCommentVNode as T } from "vue";
-import { c as y } from "./component.js";
-import { _ as v } from "./plugin-vue_export-helper.js";
+import { reactive, computed, onMounted, onUnmounted, ref, onActivated, onDeactivated, toRefs, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, createVNode, toDisplayString, renderSlot, Fragment, createCommentVNode } from "vue";
+import { c as createComponent } from "./component.js";
+import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
 import "../locale/lang";
-const { componentName: b, create: x, translate: E } = y("infiniteloading"), S = x({ props: { hasMore: { type: Boolean, default: true }, threshold: { type: Number, default: 200 }, pullIcon: { type: String, default: "https://img10.360buyimg.com/imagetools/jfs/t1/169863/6/4565/6306/60125948E7e92774e/40b3a0cf42852bcb.png" }, pullTxt: { type: String, default: "" }, loadIcon: { type: String, default: "https://img10.360buyimg.com/imagetools/jfs/t1/169863/6/4565/6306/60125948E7e92774e/40b3a0cf42852bcb.png" }, loadTxt: { type: String, default: "" }, loadMoreTxt: { type: String, default: "" }, useWindow: { type: Boolean, default: true }, containerId: { type: String, default: "" }, useCapture: { type: Boolean, default: false }, isOpenRefresh: { type: Boolean, default: false } }, emits: ["scroll-change", "load-more", "refresh"], setup(a2, { emit: c2, slots: u2 }) {
-  const d2 = e({ scrollEl: window, scroller: null, refreshTop: null, beforeScrollTop: 0, isTouching: false, isInfiniting: false, refreshMaxH: 0, y: 0, x: 0, distance: 0 }), f2 = t(() => ({ [b]: true })), p2 = t(() => ({ height: d2.distance < 0 ? "0px" : `${d2.distance}px`, transition: d2.isTouching ? "height 0s cubic-bezier(0.25,0.1,0.25,1)" : "height 0.2s cubic-bezier(0.25,0.1,0.25,1)" })), h2 = (e2) => e2 ? e2.offsetTop + h2(e2.offsetParent) : 0, g2 = () => {
-    let e2 = 0, t2 = 0, o2 = "down";
-    const n2 = window.pageYOffset !== void 0 ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
-    if (a2.useWindow)
-      d2.scroller && (e2 = h2(d2.scroller) + d2.scroller.offsetHeight - n2 - window.innerHeight), t2 = n2;
-    else {
-      const { scrollHeight: o3, clientHeight: n3, scrollTop: s2 } = d2.scrollEl;
-      e2 = o3 - n3 - s2, t2 = s2;
+const { componentName, create, translate } = createComponent("infiniteloading");
+const _sfc_main = create({
+  props: {
+    hasMore: {
+      type: Boolean,
+      default: true
+    },
+    threshold: {
+      type: Number,
+      default: 200
+    },
+    pullIcon: {
+      type: String,
+      default: "https://img10.360buyimg.com/imagetools/jfs/t1/169863/6/4565/6306/60125948E7e92774e/40b3a0cf42852bcb.png"
+    },
+    pullTxt: {
+      type: String,
+      default: ""
+    },
+    loadIcon: {
+      type: String,
+      default: "https://img10.360buyimg.com/imagetools/jfs/t1/169863/6/4565/6306/60125948E7e92774e/40b3a0cf42852bcb.png"
+    },
+    loadTxt: {
+      type: String,
+      default: ""
+    },
+    loadMoreTxt: {
+      type: String,
+      default: ""
+    },
+    useWindow: {
+      type: Boolean,
+      default: true
+    },
+    containerId: {
+      type: String,
+      default: ""
+    },
+    useCapture: {
+      type: Boolean,
+      default: false
+    },
+    isOpenRefresh: {
+      type: Boolean,
+      default: false
     }
-    return o2 = d2.beforeScrollTop > t2 ? "up" : "down", d2.beforeScrollTop = t2, c2("scroll-change", t2), e2 <= a2.threshold && o2 == "down";
-  }, m2 = () => {
-    d2.isInfiniting = false;
-  }, w2 = () => {
-    (window.requestAnimationFrame || window.webkitRequestAnimationFrame || function(e2) {
-      window.setTimeout(e2, 1e3 / 60);
-    })(() => {
-      if (!g2() || !a2.hasMore || d2.isInfiniting)
-        return false;
-      d2.isInfiniting = true, c2("load-more", m2);
+  },
+  emits: ["scroll-change", "load-more", "refresh"],
+  setup(props, { emit, slots }) {
+    const state = reactive({
+      scrollEl: window,
+      scroller: null,
+      refreshTop: null,
+      beforeScrollTop: 0,
+      isTouching: false,
+      isInfiniting: false,
+      refreshMaxH: 0,
+      y: 0,
+      x: 0,
+      distance: 0
     });
-  }, T2 = () => {
-    d2.scrollEl.addEventListener("scroll", w2, a2.useCapture);
-  }, y2 = () => {
-    d2.distance = 0, d2.isTouching = false;
-  };
-  o(() => {
-    const e2 = (t2 = d2.scroller, a2.containerId ? document.querySelector(`#${a2.containerId}`) : t2 && t2.parentNode);
-    var t2;
-    d2.scrollEl = a2.useWindow ? window : e2, T2();
-  }), n(() => {
-    d2.scrollEl.removeEventListener("scroll", w2, a2.useCapture);
-  });
-  const v2 = s(false);
-  return l(() => {
-    v2.value && (v2.value = false, T2());
-  }), i(() => {
-    v2.value = true, d2.scrollEl.removeEventListener("scroll", w2, a2.useCapture);
-  }), { classes: f2, ...r(d2), touchStart: (e2) => {
-    if (d2.beforeScrollTop == 0 && !d2.isTouching && a2.isOpenRefresh) {
-      d2.y = e2.touches[0].pageY, d2.isTouching = true;
-      const t2 = d2.refreshTop.firstElementChild.offsetHeight;
-      d2.refreshMaxH = Math.floor(1 * t2 + 10);
-    }
-  }, touchMove: (e2) => {
-    d2.distance = e2.touches[0].pageY - d2.y, d2.distance > 0 && d2.isTouching ? (e2.preventDefault(), d2.distance >= d2.refreshMaxH && (d2.distance = d2.refreshMaxH)) : (d2.distance = 0, d2.isTouching = false);
-  }, touchEnd: () => {
-    d2.distance && (d2.distance < d2.refreshMaxH ? d2.distance = 0 : c2("refresh", y2));
-  }, getStyle: p2, translate: E, slots: u2 };
-} }), M = { class: "top-box" }, I = { class: "top-text" }, H = { class: "nut-infinite-container" }, k = { class: "nut-infinite-bottom" }, C = { key: 0, class: "bottom-box" }, $ = { class: "bottom-text" }, j = { key: 0, class: "tips" };
-var B = v(S, [["render", function(e2, t2, o2, n2, s2, l2) {
-  const i2 = a("nut-icon");
-  return c(), u("view", { class: d(e2.classes), ref: "scroller", onTouchstart: t2[0] || (t2[0] = (...t3) => e2.touchStart && e2.touchStart(...t3)), onTouchmove: t2[1] || (t2[1] = (...t3) => e2.touchMove && e2.touchMove(...t3)), onTouchend: t2[2] || (t2[2] = (...t3) => e2.touchEnd && e2.touchEnd(...t3)) }, [f("view", { class: "nut-infinite-top", ref: "refreshTop", style: p(e2.getStyle) }, [f("view", M, [h(i2, { class: "top-img", name: e2.pullIcon }, null, 8, ["name"]), f("view", I, g(e2.pullTxt || e2.translate("pullTxt")), 1)])], 4), f("view", H, [m(e2.$slots, "default")]), f("view", k, [e2.isInfiniting ? (c(), u("view", C, [e2.slots.loading ? m(e2.$slots, "loading", { key: 1 }) : (c(), u(w, { key: 0 }, [h(i2, { class: "bottom-img", name: e2.loadIcon }, null, 8, ["name"]), f("view", $, g(e2.loadTxt || e2.translate("loading")), 1)], 64))])) : e2.hasMore ? T("", true) : (c(), u(w, { key: 1 }, [e2.slots.finished ? m(e2.$slots, "finished", { key: 1 }) : (c(), u("view", j, g(e2.loadMoreTxt || e2.translate("loadMoreTxt")), 1))], 64))])], 34);
-}]]);
-export { B as default };
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true
+      };
+    });
+    const getStyle = computed(() => {
+      return {
+        height: state.distance < 0 ? `0px` : `${state.distance}px`,
+        transition: state.isTouching ? `height 0s cubic-bezier(0.25,0.1,0.25,1)` : `height 0.2s cubic-bezier(0.25,0.1,0.25,1)`
+      };
+    });
+    const requestAniFrame = () => {
+      return window.requestAnimationFrame || window.webkitRequestAnimationFrame || function(callback) {
+        window.setTimeout(callback, 1e3 / 60);
+      };
+    };
+    const getWindowScrollTop = () => {
+      return window.pageYOffset !== void 0 ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
+    };
+    const calculateTopPosition = (el) => {
+      return !el ? 0 : el.offsetTop + calculateTopPosition(el.offsetParent);
+    };
+    const isScrollAtBottom = () => {
+      let offsetDistance = 0;
+      let resScrollTop = 0;
+      let direction = "down";
+      const windowScrollTop = getWindowScrollTop();
+      if (props.useWindow) {
+        if (state.scroller) {
+          offsetDistance = calculateTopPosition(state.scroller) + state.scroller.offsetHeight - windowScrollTop - window.innerHeight;
+        }
+        resScrollTop = windowScrollTop;
+      } else {
+        const { scrollHeight, clientHeight, scrollTop } = state.scrollEl;
+        offsetDistance = scrollHeight - clientHeight - scrollTop;
+        resScrollTop = scrollTop;
+      }
+      if (state.beforeScrollTop > resScrollTop) {
+        direction = "up";
+      } else {
+        direction = "down";
+      }
+      state.beforeScrollTop = resScrollTop;
+      emit("scroll-change", resScrollTop);
+      return offsetDistance <= props.threshold && direction == "down";
+    };
+    const infiniteDone = () => {
+      state.isInfiniting = false;
+    };
+    const handleScroll = () => {
+      requestAniFrame()(() => {
+        if (!isScrollAtBottom() || !props.hasMore || state.isInfiniting) {
+          return false;
+        } else {
+          state.isInfiniting = true;
+          emit("load-more", infiniteDone);
+        }
+      });
+    };
+    const scrollListener = () => {
+      state.scrollEl.addEventListener("scroll", handleScroll, props.useCapture);
+    };
+    const refreshDone = () => {
+      state.distance = 0;
+      state.isTouching = false;
+    };
+    const touchStart = (event) => {
+      if (state.beforeScrollTop == 0 && !state.isTouching && props.isOpenRefresh) {
+        state.y = event.touches[0].pageY;
+        state.isTouching = true;
+        const childHeight = state.refreshTop.firstElementChild.offsetHeight;
+        state.refreshMaxH = Math.floor(childHeight * 1 + 10);
+      }
+    };
+    const touchMove = (event) => {
+      state.distance = event.touches[0].pageY - state.y;
+      if (state.distance > 0 && state.isTouching) {
+        event.preventDefault();
+        if (state.distance >= state.refreshMaxH)
+          state.distance = state.refreshMaxH;
+      } else {
+        state.distance = 0;
+        state.isTouching = false;
+      }
+    };
+    const touchEnd = () => {
+      if (state.distance) {
+        if (state.distance < state.refreshMaxH) {
+          state.distance = 0;
+        } else {
+          emit("refresh", refreshDone);
+        }
+      }
+    };
+    const getParentElement = (el) => {
+      return !!props.containerId ? document.querySelector(`#${props.containerId}`) : el && el.parentNode;
+    };
+    onMounted(() => {
+      const parentElement = getParentElement(state.scroller);
+      state.scrollEl = props.useWindow ? window : parentElement;
+      scrollListener();
+      console.log(slots);
+    });
+    onUnmounted(() => {
+      state.scrollEl.removeEventListener("scroll", handleScroll, props.useCapture);
+    });
+    const isKeepAlive = ref(false);
+    onActivated(() => {
+      if (isKeepAlive.value) {
+        isKeepAlive.value = false;
+        scrollListener();
+      }
+    });
+    onDeactivated(() => {
+      isKeepAlive.value = true;
+      state.scrollEl.removeEventListener("scroll", handleScroll, props.useCapture);
+    });
+    return {
+      classes,
+      ...toRefs(state),
+      touchStart,
+      touchMove,
+      touchEnd,
+      getStyle,
+      translate,
+      slots
+    };
+  }
+});
+const _hoisted_1 = { class: "top-box" };
+const _hoisted_2 = { class: "top-text" };
+const _hoisted_3 = { class: "nut-infinite-container" };
+const _hoisted_4 = { class: "nut-infinite-bottom" };
+const _hoisted_5 = {
+  key: 0,
+  class: "bottom-box"
+};
+const _hoisted_6 = { class: "bottom-text" };
+const _hoisted_7 = {
+  key: 0,
+  class: "tips"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_nut_icon = resolveComponent("nut-icon");
+  return openBlock(), createElementBlock("view", {
+    class: normalizeClass(_ctx.classes),
+    ref: "scroller",
+    onTouchstart: _cache[0] || (_cache[0] = (...args) => _ctx.touchStart && _ctx.touchStart(...args)),
+    onTouchmove: _cache[1] || (_cache[1] = (...args) => _ctx.touchMove && _ctx.touchMove(...args)),
+    onTouchend: _cache[2] || (_cache[2] = (...args) => _ctx.touchEnd && _ctx.touchEnd(...args))
+  }, [
+    createElementVNode("view", {
+      class: "nut-infinite-top",
+      ref: "refreshTop",
+      style: normalizeStyle(_ctx.getStyle)
+    }, [
+      createElementVNode("view", _hoisted_1, [
+        createVNode(_component_nut_icon, {
+          class: "top-img",
+          name: _ctx.pullIcon
+        }, null, 8, ["name"]),
+        createElementVNode("view", _hoisted_2, toDisplayString(_ctx.pullTxt || _ctx.translate("pullTxt")), 1)
+      ])
+    ], 4),
+    createElementVNode("view", _hoisted_3, [
+      renderSlot(_ctx.$slots, "default")
+    ]),
+    createElementVNode("view", _hoisted_4, [
+      _ctx.isInfiniting ? (openBlock(), createElementBlock("view", _hoisted_5, [
+        !_ctx.slots.loading ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+          createVNode(_component_nut_icon, {
+            class: "bottom-img",
+            name: _ctx.loadIcon
+          }, null, 8, ["name"]),
+          createElementVNode("view", _hoisted_6, toDisplayString(_ctx.loadTxt || _ctx.translate("loading")), 1)
+        ], 64)) : renderSlot(_ctx.$slots, "loading", { key: 1 })
+      ])) : !_ctx.hasMore ? (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+        !_ctx.slots.finished ? (openBlock(), createElementBlock("view", _hoisted_7, toDisplayString(_ctx.loadMoreTxt || _ctx.translate("loadMoreTxt")), 1)) : renderSlot(_ctx.$slots, "finished", { key: 1 })
+      ], 64)) : createCommentVNode("", true)
+    ])
+  ], 34);
+}
+var index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export { index as default };