@opentinyvue/vue-image-viewer 2.21.0

package/lib/mobile-first.js

@@ -0,0 +1,671 @@
+import { renderless, api } from '@opentinyvue/vue-renderless/image-viewer/vue';
+import { directive, defineComponent, props, setup } from '@opentinyvue/vue-common';
+import { isObject } from '@opentinyvue/vue-renderless/common/type';
+import Dropdown from '@opentinyvue/vue-dropdown';
+import DropdownMenu from '@opentinyvue/vue-dropdown-menu';
+import DropdownItem from '@opentinyvue/vue-dropdown-item';
+import ActionSheet from '@opentinyvue/vue-action-sheet';
+import { iconClose, iconChevronLeft, iconChevronRight, iconZoomOut, iconZoomIn, iconFullscreen, iconMinscreen, iconRepeat, iconRefres, iconDel, iconDownload, iconArrowLeft, iconArrowRight, iconEditorMenuRight, iconPicture } from '@opentinyvue/vue-icon';
+
+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({
+  emits: ["close", "update:preview-visible", "delete", "change", "newImageList"],
+  props: [].concat(props, ["urlList", "zIndex", "onSwitch", "onClose", "showIndex", "isThumbnail", "isMenuView", "modalView", "modalHeight", "bgColor", "keepStyle"]),
+  components: {
+    TinyActionSheet: ActionSheet,
+    TinyDropdown: Dropdown,
+    TinyDropdownMenu: DropdownMenu,
+    TinyDropdownItem: DropdownItem,
+    IconClose: iconClose(),
+    IconChevronLeft: iconChevronLeft(),
+    IconChevronRight: iconChevronRight(),
+    IconZoomOut: iconZoomOut(),
+    IconZoomIn: iconZoomIn(),
+    IconFullscreen: iconFullscreen(),
+    IconMinscreen: iconMinscreen(),
+    IconRepeat: iconRepeat(),
+    IconRefres: iconRefres(),
+    IconDel: iconDel(),
+    IconDownload: iconDownload(),
+    IconArrowLeft: iconArrowLeft(),
+    IconArrowRight: iconArrowRight(),
+    IconEditorMenuRight: iconEditorMenuRight(),
+    IconPicture: iconPicture()
+  },
+  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 _vm.state.showImageViewer ? _c("div", {
+    attrs: {
+      "data-tag": "tiny-image-viewer"
+    }
+  }, [_c("transition", {
+    attrs: {
+      "name": "viewer-fade"
+    }
+  }, [_vm.state.showImageViewer ? _c("div", {
+    class: ["left-0 right-0 top-0 bottom-0 hidden sm:flex z-10", _vm.modalView ? "" : "fixed"],
+    style: {
+      "z-index": _vm.state.zIndex,
+      "height": _vm.modalView && _vm.modalHeight + "px"
+    },
+    attrs: {
+      "data-tag": "tiny-image-body"
+    }
+  }, [_vm.state.isThumbnail ? _c("div", {
+    ref: "isThumbnailContent",
+    class: ["flex-none w-[12%] h-full flex flex-col overflow-y-scroll items-center scrollbar-size-0", _vm.bgColor !== "white" ? "bg-color-icon-primary" : ""],
+    style: {
+      backgroundColor: _vm.bgColor === "white" && _vm.bgColor
+    },
+    attrs: {
+      "data-tag": "tiny-isthumbnail"
+    }
+  }, _vm._l(_vm.state.urlList, function(item, i) {
+    return _c("div", {
+      key: i,
+      ref: "isThumbnail_" + i,
+      refInFor: true,
+      staticClass: "w-[88%] [&:not(:last-child)]:mb-2 [&:first-of-type]:mt-2"
+    }, [_c("div", {
+      class: ["rounded cursor-pointer p-1", {
+        "bg-color-brand": _vm.state.currentIndex === i
+      }],
+      on: {
+        "click": function click($event) {
+          return _vm.activeItems(i);
+        }
+      }
+    }, [_c("img", {
+      ref: "img_" + i,
+      refInFor: true,
+      staticClass: "max-h-full max-w-full aspect-square bg-current rounded",
+      attrs: {
+        "src": item.url
+      }
+    }), _c("div", {
+      class: ["px-1 mt-1 sm:text-xs text-sm leading-5 overflow-hidden whitespace-nowrap text-ellipsis", _vm.bgColor === "white" ? _vm.state.currentIndex !== i ? "text-color-text-primary" : "text-color-bg-1" : "text-color-bg-1"],
+      attrs: {
+        "title": item.name || item.url
+      }
+    }, [_vm._v(" " + _vm._s(item.name) + " ")])])]);
+  }), 0) : _vm._e(), _vm.state.isMenuView ? _c("div", {
+    ref: "isMenuViewContent",
+    class: ["flex-none w-[12%] h-full flex flex-col overflow-y-scroll items-center scrollbar-size-0", _vm.bgColor !== "white" ? "bg-color-icon-primary" : "bg-color-bg-1"],
+    attrs: {
+      "data-tag": "tiny-is-menu-view"
+    }
+  }, _vm._l(_vm.state.urlList, function(items, i) {
+    return _c("div", {
+      key: i,
+      staticClass: "w-[88%]"
+    }, [_c("div", {
+      ref: "isMenuView_" + i,
+      refInFor: true,
+      class: ["[&:first-of-type]:mt-2.5 rounded cursor-pointer flex mx-1 h-9 items-center", {
+        "bg-color-brand": _vm.state.currentIndex === i
+      }],
+      on: {
+        "click": function click($event) {
+          return _vm.activeItems(i);
+        }
+      }
+    }, [_c("icon-picture", {
+      ref: "img_" + i,
+      refInFor: true,
+      class: ["max-h-full max-w-full w-[9%] h-auto my-2.5 mx-1.5 object-none", _vm.bgColor === "white" ? _vm.state.menuItemIndex !== i ? "fill-color-text-primary" : "fill-color-bg-1" : "fill-color-bg-1"],
+      attrs: {
+        "src": items.url
+      }
+    }), _c("div", {
+      class: ["w-[67%] sm:text-xs text-sm leading-5 overflow-hidden whitespace-nowrap text-ellipsis", _vm.bgColor === "white" ? _vm.state.menuItemIndex !== i ? "text-color-text-primary" : "text-color-bg-1" : "text-color-bg-1"],
+      attrs: {
+        "title": items.name || items.url
+      }
+    }, [_vm._v(" " + _vm._s(items.name) + " ")])], 1)]);
+  }), 0) : _vm._e(), _c("div", {
+    staticClass: "flex-auto h-full relative",
+    attrs: {
+      "data-tag": "tiny-image-tools"
+    }
+  }, [_c("div", {
+    staticClass: "absolute w-full h-full top-0 left-0 bg-color-bg-7",
+    attrs: {
+      "data-tag": "tiny-image-pc-mask"
+    }
+  }), _vm.modalView || !_vm.state.isThumbnail && !_vm.state.isMenuView ? _c("span", {
+    staticClass: "z-[1] flex absolute items-center justify-center rounded-full box-border select-none top-20 right-20 bottom-10 text-xl cursor-pointer w-8 h-8 hover:bg-color-text-primary active:bg-color-border fill-color-bg-1 bg-color-border",
+    attrs: {
+      "data-tag": "tiny-image-pc-close"
+    },
+    on: {
+      "click": _vm.hide
+    }
+  }, [_c("icon-close", {
+    staticClass: "fill-color-bg-1 cursor-pointer"
+  })], 1) : _vm._e(), _c("div", {
+    staticClass: "z-[1] absolute inline-flex items-center justify-center box-border select-none left-1/2 bottom-12 -translate-x-1/2 w-80 h-10 px-4 bg-color-bg-7 rounded cursor-pointer",
+    attrs: {
+      "data-tag": "tiny-image-pc-actions"
+    }
+  }, [_c("div", {
+    staticClass: "w-full h-full text-justify cursor-default text-2xl flex items-center justify-between fill-color-bg-1"
+  }, [_c(_vm.state.mode.icon, {
+    tag: "component",
+    staticClass: "cursor-pointer",
+    on: {
+      "click": _vm.toggleMode
+    }
+  }), _c("icon-zoom-out", {
+    staticClass: "cursor-pointer",
+    on: {
+      "click": function click($event) {
+        return _vm.handleActions("zoomOut");
+      }
+    }
+  }), _c("icon-zoom-in", {
+    staticClass: "cursor-pointer",
+    on: {
+      "click": function click($event) {
+        return _vm.handleActions("zoomIn");
+      }
+    }
+  }), _c("icon-refres", {
+    staticClass: "cursor-pointer",
+    on: {
+      "click": function click($event) {
+        return _vm.handleActions("clocelise");
+      }
+    }
+  }), _c("icon-repeat", {
+    staticClass: "cursor-pointer",
+    on: {
+      "click": function click($event) {
+        return _vm.handleActions("anticlocelise");
+      }
+    }
+  }), _c("icon-del", {
+    staticClass: "cursor-pointer",
+    on: {
+      "click": function click($event) {
+        return _vm.handleActions("delImage");
+      }
+    }
+  }), _c("a", {
+    staticClass: "cursor-pointer inline-flex fill-color-bg-1",
+    attrs: {
+      "href": "" + _vm.state.currentImg,
+      "target": "_blank",
+      "rel": "noopener noreferrer",
+      "download": ""
+    }
+  }, [_c("icon-download")], 1), _c("tiny-dropdown", {
+    staticClass: "flex",
+    attrs: {
+      "show-self-icon": ""
+    },
+    on: {
+      "item-click": _vm.itemClick
+    },
+    scopedSlots: _vm._u([{
+      key: "dropdown",
+      fn: function fn() {
+        return [_c("tiny-dropdown-menu", {
+          attrs: {
+            "checked-status": "",
+            "placement": "top"
+          },
+          scopedSlots: _vm._u([{
+            key: "default",
+            fn: function fn2(_ref) {
+              var selectedIndex = _ref.selectedIndex;
+              return [_c("tiny-dropdown-item", {
+                attrs: {
+                  "current-index": 0,
+                  "selected": selectedIndex === "0" && !_vm.state.isThumbnail && !_vm.state.isMenuView,
+                  "item-data": !_vm.state.isThumbnail && !_vm.state.isMenuView ? "4" : "1"
+                }
+              }, [_vm._v(_vm._s(_vm.state.isThumbnail || _vm.state.isMenuView ? _vm.t("ui.imageViewer.hide") : _vm.t("ui.imageViewer.show")))]), _c("tiny-dropdown-item", {
+                attrs: {
+                  "current-index": 1,
+                  "selected": selectedIndex === "1" || _vm.state.isThumbnail,
+                  "item-data": "2"
+                }
+              }, [_vm._v(_vm._s(_vm.t("ui.imageViewer.thumbnail")))]), _c("tiny-dropdown-item", {
+                attrs: {
+                  "current-index": 2,
+                  "selected": selectedIndex === "2" || _vm.state.isMenuView,
+                  "item-data": "3"
+                }
+              }, [_vm._v(_vm._s(_vm.t("ui.imageViewer.menu")))])];
+            }
+          }], null, false, 1242418640)
+        })];
+      },
+      proxy: true
+    }], null, false, 849811104)
+  }, [_c("span", [_c("icon-editor-menu-right")], 1)]), _c("icon-arrow-left", {
+    class: ["cursor-pointer", {
+      "is-disabled": !_vm.state.infinite && _vm.state.isFirst
+    }],
+    on: {
+      "click": _vm.prev
+    }
+  }), _c("icon-arrow-right", {
+    class: ["cursor-pointer", {
+      "is-disabled": !_vm.state.infinite && _vm.state.isLast
+    }],
+    on: {
+      "click": _vm.next
+    }
+  })], 1)]), _vm.showIndex ? _c("div", {
+    staticClass: "z-10 absolute flex items-center justify-center box-border left-1/2 -translate-x-1/2 px-4 bottom-5",
+    attrs: {
+      "data-tag": "tiny-image-pc-index"
+    }
+  }, [_c("span", {
+    staticClass: "h-4.5 inline-flex items-center text-color-text-primary"
+  }, [_vm._v(" " + _vm._s(_vm.state.index + 1 + "/" + _vm.state.urlList.length) + " ")])]) : _vm._e(), _c("div", {
+    staticClass: "z-10 flex w-full h-full items-center justify-center",
+    attrs: {
+      "data-tag": "tiny-image-pc-canvas"
+    }
+  }, [_vm._l(_vm.state.urlList, function(url, i) {
+    return [i === _vm.state.index ? _c("img", {
+      key: i,
+      ref: "img_" + i,
+      refInFor: true,
+      style: _vm.state.imgStyle,
+      attrs: {
+        "src": _vm.state.currentImg
+      },
+      on: {
+        "error": _vm.handleImgError,
+        "mousedown": _vm.handleMouseDown,
+        "load": _vm.handleImgLoad
+      }
+    }) : _vm._e()];
+  })], 2)])]) : _vm._e()]), _c("transition", {
+    attrs: {
+      "name": "viewer-fade"
+    }
+  }, [_vm.state.isThumbnail ? _c("div", {
+    class: ["w-screen h-screen fixed top-0 left-0 sm:hidden z-40", {
+      "hidden": _vm.state.hiddenThumbnail
+    }],
+    attrs: {
+      "data-tag": "tiny-image-mobile-thumbnail-list"
+    }
+  }, [_c("div", {
+    staticClass: "bg-color-bg-1 w-screen h-screen overflow-auto"
+  }, _vm._l(_vm.state.urlList, function(item, i) {
+    return _c("div", {
+      key: i,
+      staticClass: "px-4 pt-4 [&:last-of-type]:mb-5 cursor-pointer",
+      on: {
+        "touchstart": function touchstart($event) {
+          return _vm.imagePreview(i);
+        }
+      }
+    }, [_c("img", {
+      ref: "img_" + i,
+      refInFor: true,
+      staticClass: "bg-current w-full h-auto",
+      attrs: {
+        "src": item.url
+      }
+    }), _c("div", {
+      staticClass: "color-text-primary mt-2 sm:text-xs text-sm leading-5 overflow-hidden whitespace-nowrap text-ellipsis text-color-text-primary",
+      attrs: {
+        "title": item.name || item.url
+      }
+    }, [_vm._v(" " + _vm._s(item.name) + " ")])]);
+  }), 0)]) : !_vm.state.isMenuView ? _c("div", {
+    staticClass: "w-screen h-screen fixed top-0 left-0 z-50 sm:hidden",
+    attrs: {
+      "data-tag": "tiny-image-mobile-common"
+    }
+  }, [_c("div", {
+    staticClass: "absolute w-full h-full top-0 left-0 bg-black",
+    attrs: {
+      "data-tag": "tiny-image-mobile-mask"
+    }
+  }), _c("div", {
+    directives: [{
+      name: "swipeleft",
+      rawName: "v-swipeleft",
+      value: _vm.swipeLeft,
+      expression: "swipeLeft"
+    }, {
+      name: "swiperight",
+      rawName: "v-swiperight",
+      value: _vm.swipeRight,
+      expression: "swipeRight"
+    }],
+    staticClass: "left-0 right-0 top-0 bottom-0 fixed",
+    attrs: {
+      "data-tag": "tiny-image-mobile-index"
+    }
+  }, [_vm.showIndex ? _c("div", {
+    staticClass: "absolute flex items-center justify-center box-border left-1/2 -translate-x-1/2 px-4 bottom-12"
+  }, [_c("span", {
+    staticClass: "h-4.5 inline-flex items-center text-color-bg-1"
+  }, [_vm._v(" " + _vm._s(_vm.state.index + 1 + "/" + _vm.state.urlList.length) + " ")])]) : _vm._e(), _c("div", {
+    ref: "canvasBox",
+    staticClass: "w-full h-full",
+    attrs: {
+      "data-tag": "tiny-image-mobile-canvas"
+    }
+  }, [_c("div", {
+    staticClass: "h-full flex items-center justify-center",
+    style: {
+      "width": _vm.state.imageAllWidth + "px",
+      "transition-duration": _vm.state.imageTransition + "ms",
+      transform: "translateX(" + _vm.state.imageTransformSize + "px)"
+    }
+  }, _vm._l(_vm.urlList, function(url, i) {
+    return _c("div", {
+      key: i,
+      ref: "viewerItem",
+      refInFor: true,
+      staticClass: "relative shrink h-full",
+      style: Object.assign({
+        width: _vm.state.imageItemWidth + "px"
+      }, i === _vm.state.index ? _vm.state.imgStyle : ""),
+      attrs: {
+        "data-tag": "tiny-image-mobile-viewer-item"
+      }
+    }, [_c("div", {
+      staticClass: "absolute top-0 left-0 right-0 bottom-0 text-center transition-transform inline-block duration-300"
+    }, [i === _vm.state.index ? _c("img", {
+      key: i,
+      ref: "img_" + i,
+      refInFor: true,
+      class: ["block w-full h-full object-contain", {
+        "object-fill": _vm.state.fullScreen
+      }],
+      style: _vm.state.imgStyle,
+      attrs: {
+        "src": _vm.state.currentImg
+      },
+      on: {
+        "mousedown": _vm.handleMouseDown,
+        "error": _vm.handleImgError,
+        "load": _vm.handleImgLoad,
+        "touchstart": _vm.touchstart,
+        "touchmove": _vm.touchmove,
+        "touchend": _vm.touchend
+      }
+    }) : _vm._e()])]);
+  }), 0)])])]) : _vm._e()]), _c("transition", {
+    attrs: {
+      "name": "viewer-fade"
+    }
+  }, [_vm.state.isImagePreview ? _c("div", {
+    staticClass: "w-screen h-screen fixed top-0 left-0 z-50 sm:hidden",
+    attrs: {
+      "data-tag": "tiny-image-isthumbnail-preview"
+    }
+  }, [_c("div", {
+    staticClass: "absolute w-full h-full top-0 left-0 bg-black",
+    attrs: {
+      "data-tag": "tiny-image-mobile-mask"
+    }
+  }), _c("div", {
+    directives: [{
+      name: "swipeleft",
+      rawName: "v-swipeleft",
+      value: _vm.swipeLeft,
+      expression: "swipeLeft"
+    }, {
+      name: "swiperight",
+      rawName: "v-swiperight",
+      value: _vm.swipeRight,
+      expression: "swipeRight"
+    }],
+    staticClass: "left-0 right-0 top-0 bottom-0 fixed",
+    attrs: {
+      "data-tag": "tiny-image-isthumbnail-index"
+    }
+  }, [_vm.showIndex ? _c("div", {
+    staticClass: "absolute flex items-center justify-center box-border left-1/2 -translate-x-1/2 px-4 bottom-12"
+  }, [_c("span", {
+    staticClass: "h-4.5 inline-flex items-center text-color-bg-1"
+  }, [_vm._v(" " + _vm._s(_vm.state.index + 1 + "/" + _vm.state.urlList.length) + " ")])]) : _vm._e(), _c("div", {
+    ref: "thumbnailCanvasBox",
+    staticClass: "w-full h-full",
+    attrs: {
+      "data-tag": "tiny-image-isthumbnail-canvas"
+    }
+  }, [_c("div", {
+    staticClass: "h-full flex items-center justify-center",
+    style: {
+      "width": _vm.state.imageAllWidth + "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,
+      ref: "viewerItem",
+      refInFor: true,
+      staticClass: "relative shrink h-full",
+      style: Object.assign({
+        width: _vm.state.imageItemWidth + "px"
+      }, i === _vm.state.index ? _vm.state.imgStyle : ""),
+      attrs: {
+        "data-tag": "tiny-image-isthumbnail-viewer-item"
+      }
+    }, [_c("div", {
+      staticClass: "absolute top-0 left-0 right-0 bottom-0 text-center transition-transform inline-block duration-300"
+    }, [_c("img", {
+      key: i,
+      ref: "img_" + i,
+      refInFor: true,
+      class: ["block w-full h-full object-contain", {
+        "object-fill": _vm.state.fullScreen
+      }],
+      style: _vm.state.imgStyle,
+      attrs: {
+        "src": _vm.state.currentImg
+      },
+      on: {
+        "mousedown": _vm.handleMouseDown,
+        "error": _vm.handleImgError,
+        "load": _vm.handleImgLoad,
+        "touchstart": _vm.touchstart,
+        "touchmove": _vm.touchmove,
+        "touchend": _vm.touchend
+      }
+    })])]);
+  }), 0)])])]) : _vm._e()]), _c("tiny-action-sheet", {
+    attrs: {
+      "type": "action",
+      "menus": [{
+        type: "save",
+        label: _vm.t("ui.imageViewer.save")
+      }, {
+        type: "thumbnail",
+        label: _vm.t("ui.imageViewer.thumbnail")
+      }, {
+        type: "del",
+        label: _vm.t("ui.imageViewer.del")
+      }],
+      "visible": _vm.state.boxVisibility
+    },
+    on: {
+      "update:visible": function updateVisible($event) {
+        _vm.state.boxVisibility = $event;
+      },
+      "click": _vm.selectOption
+    },
+    scopedSlots: _vm._u([{
+      key: "default",
+      fn: function fn(data) {
+        return [_c("div", {
+          class: [{
+            "text-color-error": data.data.type === "del"
+          }]
+        }, [_vm._v(_vm._s(data.data.label))])];
+      }
+    }], null, false, 852563897)
+  })], 1) : _vm._e();
+};
+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 mobileFirst = /* @__PURE__ */ function() {
+  return __component__.exports;
+}();
+
+export { mobileFirst as default };