@nutui/nutui 3.1.21-beta.0 → 3.1.21-beta.3

package/dist/packages/_es/ImagePreview.js

@@ -0,0 +1,326 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+/*!
+* @nutui/nutui v3.1.21-beta.3 Wed May 18 2022 18:19:57 GMT+0800 (中国标准时间)
+* (c) 2022 @jdf2e.
+* Released under the MIT License.
+*/
+import { toRefs, reactive, watch, onMounted, resolveComponent, openBlock, createBlock, withCtx, createElementVNode, withModifiers, createElementBlock, Fragment, renderList, createVNode, createCommentVNode, toDisplayString, render, h } from "vue";
+import { c as createComponent } from "./component.js";
+import Popup from "./Popup.js";
+import Video from "./Video.js";
+import Swiper from "./Swiper.js";
+import SwiperItem from "./SwiperItem.js";
+import { _ as _export_sfc } from "./plugin-vue_export-helper.js";
+import "../locale/lang";
+import "./OverLay.js";
+import "./Icon.js";
+import "./pxCheck.js";
+import "./index3.js";
+const { componentName, create } = createComponent("imagepreview");
+const _sfc_main = create({
+  props: {
+    show: {
+      type: Boolean,
+      default: false
+    },
+    images: {
+      type: Array,
+      default: () => []
+    },
+    videos: {
+      type: Array,
+      default: () => []
+    },
+    contentClose: {
+      type: Boolean,
+      default: false
+    },
+    initNo: {
+      type: Number,
+      default: 1
+    },
+    paginationVisible: {
+      type: Boolean,
+      default: false
+    },
+    paginationColor: {
+      type: String,
+      default: "#fff"
+    },
+    autoplay: {
+      type: [Number, String],
+      default: 3e3
+    },
+    isWrapTeleport: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ["close"],
+  components: {
+    [Popup.name]: Popup,
+    [Video.name]: Video,
+    [Swiper.name]: Swiper,
+    [SwiperItem.name]: SwiperItem
+  },
+  setup(props, { emit }) {
+    toRefs(props);
+    const state = reactive({
+      showPop: false,
+      active: 1,
+      maxNo: 1,
+      source: {
+        src: "https://storage.jd.com/about/big-final.mp4?Expires=3730193075&AccessKey=3LoYX1dQWa6ZXzQl&Signature=ViMFjz%2BOkBxS%2FY1rjtUVqbopbJI%3D",
+        type: "video/mp4"
+      },
+      options: {
+        muted: true,
+        controls: true
+      },
+      eleImg: null,
+      store: {
+        scale: 1,
+        moveable: false
+      },
+      lastTouchEndTime: 0
+    });
+    const slideChangeEnd = function(page) {
+      state.active = page + 1;
+    };
+    const closeOnImg = () => {
+      if (props.contentClose) {
+        onClose();
+      }
+    };
+    const onClose = () => {
+      state.showPop = false;
+      state.store.scale = 1;
+      scaleNow();
+      state.active = 1;
+      emit("close");
+    };
+    const getDistance = (first, second) => {
+      return Math.hypot(Math.abs(second.x - first.x), Math.abs(second.y - first.y));
+    };
+    const scaleNow = () => {
+      state.eleImg.style.transform = "scale(" + state.store.scale + ")";
+    };
+    const onTouchStart = (event) => {
+      const curTouchTime = new Date().getTime();
+      if (curTouchTime - state.lastTouchEndTime < 300) {
+        const store2 = state.store;
+        if (store2.scale > 1) {
+          store2.scale = 1;
+        } else if (store2.scale == 1) {
+          store2.scale = 2;
+        }
+        scaleNow();
+      }
+      var touches = event.touches;
+      var events = touches[0];
+      var events2 = touches[1];
+      const store = state.store;
+      store.moveable = true;
+      if (events2) {
+        store.oriDistance = getDistance({
+          x: events.pageX,
+          y: events.pageY
+        }, {
+          x: events2.pageX,
+          y: events2.pageY
+        });
+      }
+      store.originScale = store.scale || 1;
+    };
+    const onTouchMove = (event) => {
+      if (!state.store.moveable) {
+        return;
+      }
+      const store = state.store;
+      var touches = event.touches;
+      var events = touches[0];
+      var events2 = touches[1];
+      if (events2) {
+        const curDistance = getDistance({
+          x: events.pageX,
+          y: events.pageY
+        }, {
+          x: events2.pageX,
+          y: events2.pageY
+        });
+        const curScale = curDistance / store.oriDistance;
+        store.scale = store.originScale * curScale;
+        if (store.scale > 3) {
+          store.scale = 3;
+        }
+        scaleNow();
+      }
+    };
+    const onTouchEnd = () => {
+      state.lastTouchEndTime = new Date().getTime();
+      const store = state.store;
+      store.moveable = false;
+      if (store.scale < 1.1 && store.scale > 1 || store.scale < 1) {
+        store.scale = 1;
+        scaleNow();
+      }
+    };
+    const init = () => {
+      state.eleImg = document.querySelector(".nut-imagepreview");
+      document.addEventListener("touchmove", onTouchMove);
+      document.addEventListener("touchend", onTouchEnd);
+      document.addEventListener("touchcancel", onTouchEnd);
+    };
+    watch(() => props.show, (val) => {
+      state.showPop = val;
+      init();
+    });
+    onMounted(() => {
+      state.active = props.initNo;
+      state.showPop = props.show;
+      state.maxNo = props.images.length + props.videos.length;
+    });
+    return __spreadProps(__spreadValues({}, toRefs(state)), {
+      slideChangeEnd,
+      onClose,
+      closeOnImg,
+      onTouchStart,
+      onTouchMove,
+      onTouchEnd,
+      getDistance,
+      scaleNow
+    });
+  }
+});
+const _hoisted_1 = ["src"];
+const _hoisted_2 = { class: "nut-imagepreview-index" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_nut_video = resolveComponent("nut-video");
+  const _component_nut_swiper_item = resolveComponent("nut-swiper-item");
+  const _component_nut_swiper = resolveComponent("nut-swiper");
+  const _component_nut_popup = resolveComponent("nut-popup");
+  return openBlock(), createBlock(_component_nut_popup, {
+    "pop-class": "custom-pop",
+    visible: _ctx.showPop,
+    "onUpdate:visible": _cache[2] || (_cache[2] = ($event) => _ctx.showPop = $event),
+    isWrapTeleport: _ctx.isWrapTeleport,
+    onClick: _ctx.onClose,
+    style: { "width": "100%" }
+  }, {
+    default: withCtx(() => [
+      createElementVNode("view", {
+        class: "nut-imagepreview",
+        onClick: _cache[0] || (_cache[0] = withModifiers((...args) => _ctx.closeOnImg && _ctx.closeOnImg(...args), ["stop"])),
+        onTouchstartCapture: _cache[1] || (_cache[1] = (...args) => _ctx.onTouchStart && _ctx.onTouchStart(...args))
+      }, [
+        _ctx.showPop ? (openBlock(), createBlock(_component_nut_swiper, {
+          key: 0,
+          "auto-play": _ctx.autoplay,
+          class: "nut-imagepreview-swiper",
+          loop: true,
+          "is-preventDefault": false,
+          direction: "horizontal",
+          onChange: _ctx.slideChangeEnd,
+          "init-page": _ctx.initNo > _ctx.maxNo ? _ctx.maxNo - 1 : _ctx.initNo - 1,
+          "pagination-visible": _ctx.paginationVisible,
+          "pagination-color": _ctx.paginationColor
+        }, {
+          default: withCtx(() => [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.videos, (item, index) => {
+              return openBlock(), createBlock(_component_nut_swiper_item, { key: index }, {
+                default: withCtx(() => [
+                  createVNode(_component_nut_video, {
+                    source: item.source,
+                    options: item.options
+                  }, null, 8, ["source", "options"])
+                ]),
+                _: 2
+              }, 1024);
+            }), 128)),
+            (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.images, (item, index) => {
+              return openBlock(), createBlock(_component_nut_swiper_item, { key: index }, {
+                default: withCtx(() => [
+                  createElementVNode("img", {
+                    src: item.src,
+                    class: "nut-imagepreview-img"
+                  }, null, 8, _hoisted_1)
+                ]),
+                _: 2
+              }, 1024);
+            }), 128))
+          ]),
+          _: 1
+        }, 8, ["auto-play", "onChange", "init-page", "pagination-visible", "pagination-color"])) : createCommentVNode("", true)
+      ], 32),
+      createElementVNode("view", _hoisted_2, toDisplayString(_ctx.active) + " / " + toDisplayString(_ctx.images.length + _ctx.videos.length), 1)
+    ]),
+    _: 1
+  }, 8, ["visible", "isWrapTeleport", "onClick"]);
+}
+var ImagePreview = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+class ImagePreviewOptions {
+  constructor() {
+    this.show = false;
+    this.images = [];
+    this.initNo = 1;
+    this.paginationVisible = false;
+    this.paginationColor = "";
+    this.teleport = "body";
+    this.onClose = () => {
+    };
+  }
+}
+class ImagePreviewFunction {
+  constructor(_options) {
+    this.options = new ImagePreviewOptions();
+    let options = Object.assign(this.options, _options);
+    let elWarp = document.body;
+    let teleport = options.teleport;
+    if (teleport != "body") {
+      if (typeof teleport == "string") {
+        elWarp = document.querySelector(teleport);
+      } else {
+        elWarp = options.teleport;
+      }
+    }
+    const root = document.createElement("view");
+    root.id = "imagepreview-" + new Date().getTime();
+    const Wrapper = {
+      setup() {
+        options.teleport = `#${root.id}`;
+        return () => {
+          return h(ImagePreview, options);
+        };
+      }
+    };
+    const instance = createVNode(Wrapper);
+    elWarp.appendChild(root);
+    render(instance, root);
+  }
+}
+const _ImagePreview = function(options) {
+  return new ImagePreviewFunction(options);
+};
+_ImagePreview.install = (app) => {
+  app.use(ImagePreview);
+  app.config.globalProperties.$imagepreview = _ImagePreview;
+};
+export { ImagePreview, ImagePreviewOptions, _ImagePreview as default };

package/dist/packages/_es/Indicator.js

@@ -0,0 +1,67 @@
+/*!
+* @nutui/nutui v3.1.21-beta.3 Wed May 18 2022 18:19:57 GMT+0800 (中国标准时间)
+* (c) 2022 @jdf2e.
+* Released under the MIT License.
+*/
+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, 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

@@ -0,0 +1,275 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+/*!
+* @nutui/nutui v3.1.21-beta.3 Wed May 18 2022 18:19:57 GMT+0800 (中国标准时间)
+* (c) 2022 @jdf2e.
+* Released under the MIT License.
+*/
+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, 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
+    }
+  },
+  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
+    });
+    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 __spreadProps(__spreadValues({
+      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 };