@opentinyvue/vue-image-viewer 2.21.0

package/lib/mobile.js

@@ -0,0 +1,348 @@
+import { renderless, api } from '@opentinyvue/vue-renderless/image-viewer/vue';
+import { directive, defineComponent, props, setup } from '@opentinyvue/vue-common';
+import { iconClose, iconChevronLeft, iconChevronRight, iconZoomOut, iconZoomIn, iconRepeat, iconRefres, iconDel } from '@opentinyvue/vue-icon';
+import { isObject } from '@opentinyvue/vue-renderless/common/type';
+import '@opentinyvue/vue-theme-mobile/image-viewer/index.css';
+
+var TinyTouch = /* @__PURE__ */ function() {
+  function TinyTouch2(element, tinyBinding, type) {
+    var that = this;
+    that.element = element;
+    that.tinyBinding = tinyBinding;
+    that.touchType = type;
+    that.tinyVueTouches = {
+      x: 0,
+      y: 0
+    };
+    that.tinyVueMoves = true;
+    that.tinyVueLeave = true;
+    that.tinyLongTouch = true;
+    that.tinyVueCallBack = isObject(tinyBinding.value) ? tinyBinding.value.fn : tinyBinding.value;
+    that.element.addEventListener("touchstart", function(e) {
+      that.start(e);
+    });
+    that.element.addEventListener("touchend", function(e) {
+      that.end(e);
+    });
+    that.element.addEventListener("touchmove", function(e) {
+      that.move(e);
+    });
+  }
+  var _proto = TinyTouch2.prototype;
+  _proto.start = function start(e) {
+    var _this = this;
+    if (e.touches >= 2) {
+      return;
+    }
+    this.tinyVueMoves = true;
+    this.tinyVueLeave = true;
+    this.tinyLongTouch = true;
+    this.tinyVueTouches = {
+      x: e.changedTouches[0].pageX,
+      y: e.changedTouches[0].pageY
+    };
+    this.time = setTimeout(function() {
+      if (_this.tinyVueLeave && _this.tinyVueMoves) {
+        _this.touchType == "longtap" && _this.tinyVueCallBack(_this.tinyBinding.value, e);
+        _this.tinyLongTouch = false;
+      }
+    }, 1e3);
+  };
+  _proto.end = function end(e) {
+    if (e.touches >= 2) {
+      return;
+    }
+    var disX = e.changedTouches[0].pageX - this.tinyVueTouches.x;
+    var disY = e.changedTouches[0].pageY - this.tinyVueTouches.y;
+    clearTimeout(this.time);
+    if (Math.abs(disX) > 10 || Math.abs(disY) > 100) {
+      this.touchType == "swipe" && this.tinyVueCallBack(this.tinyBinding.value, e);
+      if (Math.abs(disX) > Math.abs(disY)) {
+        if (disX > 10) {
+          this.touchType == "swiperight" && this.tinyVueCallBack(this.tinyBinding.value, e);
+        }
+        if (disX < -10) {
+          this.touchType == "swipeleft" && this.tinyVueCallBack(this.tinyBinding.value, e);
+        }
+      } else {
+        if (disY > 10) {
+          this.touchType == "swipedown" && this.tinyVueCallBack(this.tinyBinding.value, e);
+        }
+        if (disY < -10) {
+          this.touchType == "swipeup" && this.tinyVueCallBack(this.tinyBinding.value, e);
+        }
+      }
+    } else {
+      if (this.tinyLongTouch && this.tinyVueMoves) {
+        this.touchType == "tap" && this.tinyVueCallBack(this.tinyBinding.value, e);
+        this.tinyVueLeave = false;
+      }
+    }
+  };
+  _proto.move = function move() {
+    this.tinyVueMoves = false;
+  };
+  return TinyTouch2;
+}();
+var mapDirective = function mapDirective2() {
+  var deactives = {};
+  var names = ["tap", "swipe", "swipeleft", "swiperight", "swipedown", "swipeup", "longtap"];
+  names.forEach(function(name) {
+    deactives[name] = directive({
+      vTouch: {
+        bind: function bind(el, tinyBinding) {
+          new TinyTouch(el, tinyBinding, name);
+        }
+      }
+    }).vTouch;
+  });
+  return deactives;
+};
+var touchDeactives = mapDirective();
+
+function normalizeComponent(scriptExports, render, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
+  var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
+  if (render) {
+    options.render = render;
+    options.staticRenderFns = staticRenderFns;
+    options._compiled = true;
+  }
+  var hook;
+  if (injectStyles) {
+    hook = injectStyles;
+  }
+  if (hook) {
+    if (options.functional) {
+      options._injectStyles = hook;
+      var originalRender = options.render;
+      options.render = function renderWithStyleInjection(h, context) {
+        hook.call(context);
+        return originalRender(h, context);
+      };
+    } else {
+      var existing = options.beforeCreate;
+      options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
+    }
+  }
+  return {
+    exports: scriptExports,
+    options
+  };
+}
+
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function(n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+var __vue2_script = defineComponent({
+  props: [].concat(props, ["urlList", "zIndex", "onSwitch", "onClose", "previewVisible", "closeShow", "arrowShow", "toolShow", "showIndex", "imageFullCurrent", "startPosition", "asyncClose", "deleteButton"]),
+  components: {
+    IconClose: iconClose(),
+    IconChevronLeft: iconChevronLeft(),
+    IconChevronRight: iconChevronRight(),
+    IconZoomOut: iconZoomOut(),
+    IconZoomIn: iconZoomIn(),
+    IconRepeat: iconRepeat(),
+    IconRefres: iconRefres(),
+    IconDel: iconDel()
+  },
+  directives: _extends({}, touchDeactives),
+  setup: function setup$1(props2, context) {
+    return setup({
+      props: props2,
+      context,
+      renderless,
+      api
+    });
+  }
+});
+var render = function render2() {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c("transition", {
+    attrs: {
+      "name": "viewer-fade"
+    }
+  }, [_c("div", {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: _vm.state.previewVisible,
+      expression: "state.previewVisible"
+    }, {
+      name: "swipeleft",
+      rawName: "v-swipeleft",
+      value: _vm.swipeLeft,
+      expression: "swipeLeft"
+    }, {
+      name: "swiperight",
+      rawName: "v-swiperight",
+      value: _vm.swipeRight,
+      expression: "swipeRight"
+    }],
+    ref: "imagePreview",
+    staticClass: "tiny-mobile-image-viewer__wrapper",
+    style: {
+      "z-index": _vm.zIndex
+    },
+    on: {
+      "click": _vm.handleVisible
+    }
+  }, [_c("div", {
+    staticClass: "tiny-mobile-image-viewer__mask"
+  }), _vm.closeShow ? _c("span", {
+    staticClass: "tiny-mobile-image-viewer__btn tiny-mobile-image-viewer__close",
+    on: {
+      "click": function click($event) {
+        $event.stopPropagation();
+        return _vm.handleVisible.apply(null, arguments);
+      }
+    }
+  }, [_c("icon-close", {
+    staticClass: "tiny-svg-size"
+  })], 1) : _vm._e(), _vm.showIndex ? _c("div", {
+    staticClass: "tiny-mobile-image-viewer__btn tiny-mobile-image-viewer__index"
+  }, [_vm._t("index", function() {
+    return [_c("span", {
+      staticClass: "tiny-mobile-image-viewer__index--curren"
+    }, [_vm._v(_vm._s(_vm.state.index + 1))]), _c("span", [_vm._v("/")]), _c("span", {
+      staticClass: "tiny-mobile-image-viewer__index--total"
+    }, [_vm._v(_vm._s(_vm.urlList.length))])];
+  }, {
+    "value": _vm.state.index + 1
+  })], 2) : _vm._e(), !_vm.state.isSingle && _vm.arrowShow ? [_c("span", {
+    staticClass: "tiny-mobile-image-viewer__btn tiny-mobile-image-viewer__prev",
+    class: {
+      "is-disabled": !_vm.state.infinite && _vm.state.isFirst,
+      "is-arrow-disabled": _vm.state.arrowStyle === "N"
+    },
+    on: {
+      "click": function click($event) {
+        $event.stopPropagation();
+        return _vm.swipeRight.apply(null, arguments);
+      }
+    }
+  }, [_c("icon-chevron-left", {
+    staticClass: "tiny-svg-size"
+  })], 1), _c("span", {
+    staticClass: "tiny-mobile-image-viewer__btn tiny-mobile-image-viewer__next",
+    class: {
+      "is-disabled": !_vm.state.infinite && _vm.state.isLast,
+      "is-arrow-disabled": _vm.state.arrowStyle === "Y"
+    },
+    on: {
+      "click": function click($event) {
+        $event.stopPropagation();
+        return _vm.swipeLeft.apply(null, arguments);
+      }
+    }
+  }, [_c("icon-chevron-right", {
+    staticClass: "tiny-svg-size"
+  })], 1)] : _vm._e(), _vm.toolShow ? _c("div", {
+    staticClass: "tiny-mobile-image-viewer__btn tiny-mobile-image-viewer__actions"
+  }, [_c("div", {
+    staticClass: "tiny-mobile-image-viewer__actions-inner"
+  }, [_vm._t("tool", function() {
+    return [_c("icon-zoom-out", {
+      staticClass: "tiny-svg-size",
+      on: {
+        "click": function click($event) {
+          $event.stopPropagation();
+          return _vm.handleActions("zoomOut");
+        }
+      }
+    }), _c("icon-zoom-in", {
+      staticClass: "tiny-svg-size",
+      on: {
+        "click": function click($event) {
+          $event.stopPropagation();
+          return _vm.handleActions("zoomIn");
+        }
+      }
+    }), _c("icon-repeat", {
+      staticClass: "tiny-svg-size",
+      on: {
+        "click": function click($event) {
+          $event.stopPropagation();
+          return _vm.handleActions("anticlocelise");
+        }
+      }
+    }), _c("icon-refres", {
+      staticClass: "tiny-svg-size",
+      on: {
+        "click": function click($event) {
+          $event.stopPropagation();
+          return _vm.handleActions("clocelise");
+        }
+      }
+    }), _vm.deleteButton ? _c("icon-del", {
+      staticClass: "tiny-svg-size",
+      on: {
+        "click": function click($event) {
+          $event.stopPropagation();
+          return _vm.handleDelete();
+        }
+      }
+    }) : _vm._e()];
+  })], 2)]) : _vm._e(), _c("div", {
+    staticClass: "tiny-mobile-image-viewer__canvas"
+  }, [_c("div", {
+    staticClass: "tiny-mobile-image-viewer__wrap",
+    style: {
+      width: _vm.state.iamgeAllWidth + "px",
+      "transition-duration": _vm.state.imageTransition + "ms",
+      transform: "translateX(" + _vm.state.imageTransformSize + "px)"
+    }
+  }, _vm._l(_vm.state.urlList, function(url, i) {
+    return _c("div", {
+      key: i,
+      staticClass: "tiny-mobile-image-viewer__item",
+      style: Object.assign({
+        width: _vm.state.imageItemWidth + "px"
+      }, i === _vm.state.index ? _vm.state.imgStyle : "")
+    }, [_c("div", {
+      staticClass: "tiny-mobile-image-viewer__detail",
+      staticStyle: {
+        "transition-duration": "0.3s"
+      }
+    }, [_c("img", {
+      key: url,
+      ref: "img_" + i,
+      refInFor: true,
+      staticClass: "tiny-mobile-image-viewer__img",
+      class: {
+        "is-full-screen": _vm.state.fullScreen
+      },
+      attrs: {
+        "src": url
+      },
+      on: {
+        "load": _vm.handleImgLoad,
+        "error": _vm.handleImgError,
+        "mousedown": _vm.handleMouseDown,
+        "touchstart": _vm.touchstart,
+        "touchmove": _vm.touchmove,
+        "touchend": _vm.touchend
+      }
+    })])]);
+  }), 0)])], 2)]);
+};
+var staticRenderFns = [];
+var __cssModules = {};
+var __component__ = /* @__PURE__ */ normalizeComponent(__vue2_script, render, staticRenderFns, false, __vue2_injectStyles);
+function __vue2_injectStyles(context) {
+  for (var o in __cssModules) {
+    this[o] = __cssModules[o];
+  }
+}
+var mobile = /* @__PURE__ */ function() {
+  return __component__.exports;
+}();
+
+export { mobile as default };

package/lib/pc.js

@@ -0,0 +1,186 @@
+import { renderless, api } from '@opentinyvue/vue-renderless/image-viewer/vue';
+import { defineComponent, props, setup } from '@opentinyvue/vue-common';
+import { iconClose, iconChevronLeft, iconChevronRight, iconZoomOut, iconZoomIn, iconFullscreen, iconMinscreen, iconRepeat, iconRefres } from '@opentinyvue/vue-icon';
+import '@opentinyvue/vue-theme/image-viewer/index.css';
+
+function normalizeComponent(scriptExports, render, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
+  var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
+  if (render) {
+    options.render = render;
+    options.staticRenderFns = staticRenderFns;
+    options._compiled = true;
+  }
+  var hook;
+  if (injectStyles) {
+    hook = injectStyles;
+  }
+  if (hook) {
+    if (options.functional) {
+      options._injectStyles = hook;
+      var originalRender = options.render;
+      options.render = function renderWithStyleInjection(h, context) {
+        hook.call(context);
+        return originalRender(h, context);
+      };
+    } else {
+      var existing = options.beforeCreate;
+      options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
+    }
+  }
+  return {
+    exports: scriptExports,
+    options
+  };
+}
+
+var __vue2_script = defineComponent({
+  emits: ["close", "update:preview-visible", "delete", "change", "newImageList"],
+  props: [].concat(props, ["urlList", "zIndex", "onSwitch", "onClose", "keepStyle", "showIndex"]),
+  components: {
+    IconClose: iconClose(),
+    IconChevronLeft: iconChevronLeft(),
+    IconChevronRight: iconChevronRight(),
+    IconZoomOut: iconZoomOut(),
+    IconZoomIn: iconZoomIn(),
+    IconFullscreen: iconFullscreen(),
+    IconMinscreen: iconMinscreen(),
+    IconRepeat: iconRepeat(),
+    IconRefres: iconRefres()
+  },
+  setup: function setup$1(props2, context) {
+    return setup({
+      props: props2,
+      context,
+      renderless,
+      api
+    });
+  }
+});
+var render = function render2() {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c("transition", {
+    attrs: {
+      "name": "viewer-fade"
+    }
+  }, [_c("div", {
+    staticClass: "tiny-image-viewer tiny-image-viewer__wrapper",
+    style: {
+      "z-index": _vm.state.zIndex
+    },
+    on: {
+      "mousewheel": function mousewheel($event) {
+        $event.preventDefault();
+      }
+    }
+  }, [_c("div", {
+    staticClass: "tiny-image-viewer__mask"
+  }), _c("span", {
+    staticClass: "tiny-image-viewer__btn tiny-image-viewer__close",
+    on: {
+      "click": _vm.hide
+    }
+  }, [_c("icon-close", {
+    staticClass: "tiny-svg-size"
+  })], 1), !_vm.state.isSingle ? [_c("span", {
+    staticClass: "tiny-image-viewer__btn tiny-image-viewer__prev",
+    class: {
+      "is-disabled": !_vm.state.infinite && _vm.state.isFirst
+    },
+    on: {
+      "click": _vm.prev
+    }
+  }, [_c("icon-chevron-left", {
+    staticClass: "tiny-svg-size"
+  })], 1), _c("span", {
+    staticClass: "tiny-image-viewer__btn tiny-image-viewer__next",
+    class: {
+      "is-disabled": !_vm.state.infinite && _vm.state.isLast
+    },
+    on: {
+      "click": _vm.next
+    }
+  }, [_c("icon-chevron-right", {
+    staticClass: "tiny-svg-size"
+  })], 1)] : _vm._e(), _c("div", {
+    staticClass: "tiny-image-viewer__btn tiny-image-viewer__actions"
+  }, [_c("div", {
+    staticClass: "tiny-image-viewer__actions-inner"
+  }, [_c("icon-zoom-out", {
+    staticClass: "tiny-svg-size",
+    on: {
+      "click": function click($event) {
+        return _vm.handleActions("zoomOut");
+      }
+    }
+  }), _c("icon-zoom-in", {
+    staticClass: "tiny-svg-size",
+    on: {
+      "click": function click($event) {
+        return _vm.handleActions("zoomIn");
+      }
+    }
+  }), _c("i", {
+    staticClass: "tiny-image-viewer__actions-divider"
+  }), _c(_vm.state.mode.icon, {
+    tag: "component",
+    staticClass: "tiny-svg-size",
+    on: {
+      "click": _vm.toggleMode
+    }
+  }), _c("i", {
+    staticClass: "tiny-image-viewer__actions-divider"
+  }), _c("icon-repeat", {
+    staticClass: "tiny-svg-size",
+    on: {
+      "click": function click($event) {
+        return _vm.handleActions("anticlocelise");
+      }
+    }
+  }), _c("icon-refres", {
+    staticClass: "tiny-svg-size",
+    on: {
+      "click": function click($event) {
+        return _vm.handleActions("clocelise");
+      }
+    }
+  }), _vm._t("count", function() {
+    return [_vm.showIndex ? _c("span", {
+      staticClass: "tiny-image-viewer__actions-count"
+    }, [_vm._v(_vm._s(_vm.state.index + 1) + "/" + _vm._s(_vm.urlList.length))]) : _vm._e()];
+  }, {
+    "index": _vm.state.index
+  })], 2)]), _c("div", {
+    staticClass: "tiny-image-viewer__canvas"
+  }, [_vm._l(_vm.urlList, function(url, i) {
+    return [i === _vm.state.index ? _c("img", {
+      key: url,
+      ref: "img_" + i,
+      refInFor: true,
+      staticClass: "tiny-image-viewer__img",
+      style: _vm.state.imgStyle,
+      attrs: {
+        "src": _vm.state.currentImg
+      },
+      on: {
+        "error": _vm.handleImgError,
+        "mousedown": _vm.handleMouseDown,
+        "load": _vm.handleImgLoad
+      }
+    }) : _vm._e()];
+  })], 2)], 2)]);
+};
+var staticRenderFns = [];
+var __cssModules = {};
+var __component__ = /* @__PURE__ */ normalizeComponent(__vue2_script, render, staticRenderFns, false, __vue2_injectStyles);
+function __vue2_injectStyles(context) {
+  for (var o in __cssModules) {
+    this[o] = __cssModules[o];
+  }
+}
+var pc = /* @__PURE__ */ function() {
+  return __component__.exports;
+}();
+
+export { pc as default };

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@opentinyvue/vue-image-viewer",
+  "version": "2.21.0",
+  "description": "",
+  "main": "./lib/index.js",
+  "module": "./lib/index.js",
+  "sideEffects": false,
+  "type": "module",
+  "dependencies": {
+    "@opentinyvue/vue-common": "~2.21.0",
+    "@opentinyvue/vue-icon": "~2.21.0",
+    "@opentinyvue/vue-renderless": "~3.21.0",
+    "@opentinyvue/vue-dropdown": "~2.21.0",
+    "@opentinyvue/vue-dropdown-menu": "~2.21.0",
+    "@opentinyvue/vue-dropdown-item": "~2.21.0",
+    "@opentinyvue/vue-action-sheet": "~2.21.0",
+    "@opentinyvue/vue-theme-mobile": "~3.21.0",
+    "@opentinyvue/vue-theme": "~3.21.0"
+  },
+  "license": "MIT",
+  "types": "index.d.ts",
+  "scripts": {
+    "build": "pnpm -w build:ui $npm_package_name",
+    "//postversion": "pnpm build"
+  }
+}

package/src/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/src/mobile-first.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/src/mobile.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/src/mobileTouch.d.ts

@@ -0,0 +1,2 @@
+declare const _default: {};
+export default _default;

package/src/pc.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;