@opentinyvue/vue-image-viewer 2.21.0 → 3.21.0

package/lib/mobile-first.js

@@ -6,6 +6,7 @@ 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';
+import { resolveComponent, resolveDirective, openBlock, createElementBlock, createVNode, Transition, withCtx, normalizeClass, normalizeStyle, Fragment, renderList, createElementVNode, toDisplayString, createCommentVNode, createBlock, resolveDynamicComponent, createTextVNode, withDirectives } from 'vue';
 
 var TinyTouch = /* @__PURE__ */ function() {
   function TinyTouch2(element, tinyBinding, type) {
@@ -103,35 +104,38 @@ var mapDirective = function mapDirective2() {
 };
 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;
+function _createForOfIteratorHelperLoose(r, e) {
+  var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (t) return (t = t.call(r)).next.bind(t);
+  if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) {
+    t && (r = t);
+    var o = 0;
+    return function() {
+      return o >= r.length ? { done: true } : { done: false, value: r[o++] };
+    };
   }
-  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];
-    }
+  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
   }
-  return {
-    exports: scriptExports,
-    options
-  };
 }
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
+}
+var _export_sfc = function _export_sfc2(sfc, props) {
+  var target = sfc.__vccOpts || sfc;
+  for (var _iterator = _createForOfIteratorHelperLoose(props), _step; !(_step = _iterator()).done; ) {
+    var _step$value = _step.value, key = _step$value[0], val = _step$value[1];
+    target[key] = val;
+  }
+  return target;
+};
 
 function _extends() {
   return _extends = Object.assign ? Object.assign.bind() : function(n) {
@@ -142,7 +146,7 @@ function _extends() {
     return n;
   }, _extends.apply(null, arguments);
 }
-var __vue2_script = defineComponent({
+var _sfc_main = defineComponent({
   emits: ["close", "update:preview-visible", "delete", "change", "newImageList"],
   props: [].concat(props, ["urlList", "zIndex", "onSwitch", "onClose", "showIndex", "isThumbnail", "isMenuView", "modalView", "modalHeight", "bgColor", "keepStyle"]),
   components: {
@@ -176,496 +180,635 @@ var __vue2_script = defineComponent({
     });
   }
 });
-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"
+var _hoisted_1 = {
+  key: 0,
+  "data-tag": "tiny-image-viewer"
+};
+var _hoisted_2 = ["onClick"];
+var _hoisted_3 = ["src"];
+var _hoisted_4 = ["title"];
+var _hoisted_5 = ["onClick"];
+var _hoisted_6 = ["title"];
+var _hoisted_7 = {
+  class: "flex-auto h-full relative",
+  "data-tag": "tiny-image-tools"
+};
+var _hoisted_8 = /* @__PURE__ */ createElementVNode(
+  "div",
+  {
+    "data-tag": "tiny-image-pc-mask",
+    class: "absolute w-full h-full top-0 left-0 bg-color-bg-7"
+  },
+  null,
+  -1
+  /* HOISTED */
+);
+var _hoisted_9 = {
+  "data-tag": "tiny-image-pc-actions",
+  class: "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"
+};
+var _hoisted_10 = {
+  class: "w-full h-full text-justify cursor-default text-2xl flex items-center justify-between fill-color-bg-1"
+};
+var _hoisted_11 = ["href"];
+var _hoisted_12 = {
+  key: 1,
+  "data-tag": "tiny-image-pc-index",
+  class: "z-10 absolute flex items-center justify-center box-border left-1/2 -translate-x-1/2 px-4 bottom-5"
+};
+var _hoisted_13 = {
+  class: "h-4.5 inline-flex items-center text-color-text-primary"
+};
+var _hoisted_14 = {
+  "data-tag": "tiny-image-pc-canvas",
+  class: "z-10 flex w-full h-full items-center justify-center"
+};
+var _hoisted_15 = ["src"];
+var _hoisted_16 = {
+  class: "bg-color-bg-1 w-screen h-screen overflow-auto"
+};
+var _hoisted_17 = ["onTouchstart"];
+var _hoisted_18 = ["src"];
+var _hoisted_19 = ["title"];
+var _hoisted_20 = {
+  key: 1,
+  "data-tag": "tiny-image-mobile-common",
+  class: "w-screen h-screen fixed top-0 left-0 z-50 sm:hidden"
+};
+var _hoisted_21 = /* @__PURE__ */ createElementVNode(
+  "div",
+  {
+    "data-tag": "tiny-image-mobile-mask",
+    class: "absolute w-full h-full top-0 left-0 bg-black"
+  },
+  null,
+  -1
+  /* HOISTED */
+);
+var _hoisted_22 = {
+  "data-tag": "tiny-image-mobile-index",
+  class: "left-0 right-0 top-0 bottom-0 fixed"
+};
+var _hoisted_23 = {
+  key: 0,
+  class: "absolute flex items-center justify-center box-border left-1/2 -translate-x-1/2 px-4 bottom-12"
+};
+var _hoisted_24 = {
+  class: "h-4.5 inline-flex items-center text-color-bg-1"
+};
+var _hoisted_25 = {
+  "data-tag": "tiny-image-mobile-canvas",
+  ref: "canvasBox",
+  class: "w-full h-full"
+};
+var _hoisted_26 = {
+  class: "absolute top-0 left-0 right-0 bottom-0 text-center transition-transform inline-block duration-300"
+};
+var _hoisted_27 = ["src"];
+var _hoisted_28 = {
+  key: 0,
+  "data-tag": "tiny-image-isthumbnail-preview",
+  class: "w-screen h-screen fixed top-0 left-0 z-50 sm:hidden"
+};
+var _hoisted_29 = /* @__PURE__ */ createElementVNode(
+  "div",
+  {
+    "data-tag": "tiny-image-mobile-mask",
+    class: "absolute w-full h-full top-0 left-0 bg-black"
+  },
+  null,
+  -1
+  /* HOISTED */
+);
+var _hoisted_30 = {
+  "data-tag": "tiny-image-isthumbnail-index",
+  class: "left-0 right-0 top-0 bottom-0 fixed"
+};
+var _hoisted_31 = {
+  key: 0,
+  class: "absolute flex items-center justify-center box-border left-1/2 -translate-x-1/2 px-4 bottom-12"
+};
+var _hoisted_32 = {
+  class: "h-4.5 inline-flex items-center text-color-bg-1"
+};
+var _hoisted_33 = {
+  "data-tag": "tiny-image-isthumbnail-canvas",
+  ref: "thumbnailCanvasBox",
+  class: "w-full h-full"
+};
+var _hoisted_34 = {
+  class: "absolute top-0 left-0 right-0 bottom-0 text-center transition-transform inline-block duration-300"
+};
+var _hoisted_35 = ["src"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_icon_picture = resolveComponent("icon-picture");
+  var _component_icon_close = resolveComponent("icon-close");
+  var _component_icon_zoom_out = resolveComponent("icon-zoom-out");
+  var _component_icon_zoom_in = resolveComponent("icon-zoom-in");
+  var _component_icon_refres = resolveComponent("icon-refres");
+  var _component_icon_repeat = resolveComponent("icon-repeat");
+  var _component_icon_del = resolveComponent("icon-del");
+  var _component_icon_download = resolveComponent("icon-download");
+  var _component_icon_editor_menu_right = resolveComponent("icon-editor-menu-right");
+  var _component_tiny_dropdown_item = resolveComponent("tiny-dropdown-item");
+  var _component_tiny_dropdown_menu = resolveComponent("tiny-dropdown-menu");
+  var _component_tiny_dropdown = resolveComponent("tiny-dropdown");
+  var _component_icon_arrow_left = resolveComponent("icon-arrow-left");
+  var _component_icon_arrow_right = resolveComponent("icon-arrow-right");
+  var _component_tiny_action_sheet = resolveComponent("tiny-action-sheet");
+  var _directive_swipeleft = resolveDirective("swipeleft");
+  var _directive_swiperight = resolveDirective("swiperight");
+  return _ctx.state.showImageViewer ? (openBlock(), createElementBlock("div", _hoisted_1, [createVNode(Transition, {
+    name: "viewer-fade"
+  }, {
+    default: withCtx(function() {
+      return [_ctx.state.showImageViewer ? (openBlock(), createElementBlock(
+        "div",
+        {
+          key: 0,
+          "data-tag": "tiny-image-body",
+          class: normalizeClass(["left-0 right-0 top-0 bottom-0 hidden sm:flex z-10", _ctx.modalView ? "" : "fixed"]),
+          style: normalizeStyle({
+            "z-index": _ctx.state.zIndex,
+            "height": _ctx.modalView && _ctx.modalHeight + "px"
+          })
+        },
+        [_ctx.state.isThumbnail ? (openBlock(), createElementBlock(
+          "div",
+          {
+            key: 0,
+            "data-tag": "tiny-isthumbnail",
+            ref: "isThumbnailContent",
+            class: normalizeClass(["flex-none w-[12%] h-full flex flex-col overflow-y-scroll items-center scrollbar-size-0", _ctx.bgColor !== "white" ? "bg-color-icon-primary" : ""]),
+            style: normalizeStyle({
+              backgroundColor: _ctx.bgColor === "white" && _ctx.bgColor
+            })
+          },
+          [(openBlock(true), createElementBlock(
+            Fragment,
+            null,
+            renderList(_ctx.state.urlList, function(item, i) {
+              return openBlock(), createElementBlock("div", {
+                key: i,
+                class: "w-[88%] [&:not(:last-child)]:mb-2 [&:first-of-type]:mt-2",
+                ref_for: true,
+                ref: "isThumbnail_" + i
+              }, [createElementVNode("div", {
+                onClick: function onClick($event) {
+                  return _ctx.activeItems(i);
+                },
+                class: normalizeClass(["rounded cursor-pointer p-1", {
+                  "bg-color-brand": _ctx.state.currentIndex === i
+                }])
+              }, [createElementVNode("img", {
+                class: "max-h-full max-w-full aspect-square bg-current rounded",
+                ref_for: true,
+                ref: "img_" + i,
+                src: item.url
+              }, null, 8, _hoisted_3), createElementVNode("div", {
+                title: item.name || item.url,
+                class: normalizeClass(["px-1 mt-1 sm:text-xs text-sm leading-5 overflow-hidden whitespace-nowrap text-ellipsis", _ctx.bgColor === "white" ? _ctx.state.currentIndex !== i ? "text-color-text-primary" : "text-color-bg-1" : "text-color-bg-1"])
+              }, toDisplayString(item.name), 11, _hoisted_4)], 10, _hoisted_2)]);
+            }),
+            128
+            /* KEYED_FRAGMENT */
+          ))],
+          6
+          /* CLASS, STYLE */
+        )) : createCommentVNode("v-if", true), _ctx.state.isMenuView ? (openBlock(), createElementBlock(
+          "div",
+          {
+            key: 1,
+            "data-tag": "tiny-is-menu-view",
+            ref: "isMenuViewContent",
+            class: normalizeClass(["flex-none w-[12%] h-full flex flex-col overflow-y-scroll items-center scrollbar-size-0", _ctx.bgColor !== "white" ? "bg-color-icon-primary" : "bg-color-bg-1"])
           },
-          scopedSlots: _vm._u([{
-            key: "default",
-            fn: function fn2(_ref) {
-              var selectedIndex = _ref.selectedIndex;
-              return [_c("tiny-dropdown-item", {
-                attrs: {
+          [(openBlock(true), createElementBlock(
+            Fragment,
+            null,
+            renderList(_ctx.state.urlList, function(items, i) {
+              return openBlock(), createElementBlock("div", {
+                key: i,
+                class: "w-[88%]"
+              }, [createElementVNode("div", {
+                onClick: function onClick($event) {
+                  return _ctx.activeItems(i);
+                },
+                ref_for: true,
+                ref: "isMenuView_" + i,
+                class: normalizeClass(["[&:first-of-type]:mt-2.5 rounded cursor-pointer flex mx-1 h-9 items-center", {
+                  "bg-color-brand": _ctx.state.currentIndex === i
+                }])
+              }, [createVNode(_component_icon_picture, {
+                class: normalizeClass(["max-h-full max-w-full w-[9%] h-auto my-2.5 mx-1.5 object-none", _ctx.bgColor === "white" ? _ctx.state.menuItemIndex !== i ? "fill-color-text-primary" : "fill-color-bg-1" : "fill-color-bg-1"]),
+                ref_for: true,
+                ref: "img_" + i,
+                src: items.url
+              }, null, 8, ["class", "src"]), createElementVNode("div", {
+                title: items.name || items.url,
+                class: normalizeClass(["w-[67%] sm:text-xs text-sm leading-5 overflow-hidden whitespace-nowrap text-ellipsis", _ctx.bgColor === "white" ? _ctx.state.menuItemIndex !== i ? "text-color-text-primary" : "text-color-bg-1" : "text-color-bg-1"])
+              }, toDisplayString(items.name), 11, _hoisted_6)], 10, _hoisted_5)]);
+            }),
+            128
+            /* KEYED_FRAGMENT */
+          ))],
+          2
+          /* CLASS */
+        )) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_7, [_hoisted_8, _ctx.modalView || !_ctx.state.isThumbnail && !_ctx.state.isMenuView ? (openBlock(), createElementBlock("span", {
+          key: 0,
+          "data-tag": "tiny-image-pc-close",
+          class: "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",
+          onClick: _cache[0] || (_cache[0] = function() {
+            return _ctx.hide && _ctx.hide.apply(_ctx, arguments);
+          })
+        }, [createVNode(_component_icon_close, {
+          class: "fill-color-bg-1 cursor-pointer"
+        })])) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_9, [createElementVNode("div", _hoisted_10, [(openBlock(), createBlock(resolveDynamicComponent(_ctx.state.mode.icon), {
+          class: "cursor-pointer",
+          onClick: _ctx.toggleMode
+        }, null, 8, ["onClick"])), createVNode(_component_icon_zoom_out, {
+          class: "cursor-pointer",
+          onClick: _cache[1] || (_cache[1] = function($event) {
+            return _ctx.handleActions("zoomOut");
+          })
+        }), createVNode(_component_icon_zoom_in, {
+          class: "cursor-pointer",
+          onClick: _cache[2] || (_cache[2] = function($event) {
+            return _ctx.handleActions("zoomIn");
+          })
+        }), createVNode(_component_icon_refres, {
+          class: "cursor-pointer",
+          onClick: _cache[3] || (_cache[3] = function($event) {
+            return _ctx.handleActions("clocelise");
+          })
+        }), createVNode(_component_icon_repeat, {
+          class: "cursor-pointer",
+          onClick: _cache[4] || (_cache[4] = function($event) {
+            return _ctx.handleActions("anticlocelise");
+          })
+        }), createVNode(_component_icon_del, {
+          class: "cursor-pointer",
+          onClick: _cache[5] || (_cache[5] = function($event) {
+            return _ctx.handleActions("delImage");
+          })
+        }), createElementVNode("a", {
+          href: "" + _ctx.state.currentImg,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          download: "",
+          class: "cursor-pointer inline-flex fill-color-bg-1"
+        }, [createVNode(_component_icon_download)], 8, _hoisted_11), createVNode(_component_tiny_dropdown, {
+          "show-self-icon": "",
+          class: "flex",
+          onItemClick: _ctx.itemClick
+        }, {
+          dropdown: withCtx(function() {
+            return [createVNode(_component_tiny_dropdown_menu, {
+              "checked-status": "",
+              placement: "top"
+            }, {
+              default: withCtx(function(_ref) {
+                var selectedIndex = _ref.selectedIndex;
+                return [createVNode(_component_tiny_dropdown_item, {
                   "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: {
+                  selected: selectedIndex === "0" && !_ctx.state.isThumbnail && !_ctx.state.isMenuView,
+                  "item-data": !_ctx.state.isThumbnail && !_ctx.state.isMenuView ? "4" : "1"
+                }, {
+                  default: withCtx(function() {
+                    return [createTextVNode(
+                      toDisplayString(_ctx.state.isThumbnail || _ctx.state.isMenuView ? _ctx.t("ui.imageViewer.hide") : _ctx.t("ui.imageViewer.show")),
+                      1
+                      /* TEXT */
+                    )];
+                  }),
+                  _: 2
+                  /* DYNAMIC */
+                }, 1032, ["selected", "item-data"]), createVNode(_component_tiny_dropdown_item, {
                   "current-index": 1,
-                  "selected": selectedIndex === "1" || _vm.state.isThumbnail,
+                  selected: selectedIndex === "1" || _ctx.state.isThumbnail,
                   "item-data": "2"
-                }
-              }, [_vm._v(_vm._s(_vm.t("ui.imageViewer.thumbnail")))]), _c("tiny-dropdown-item", {
-                attrs: {
+                }, {
+                  default: withCtx(function() {
+                    return [createTextVNode(
+                      toDisplayString(_ctx.t("ui.imageViewer.thumbnail")),
+                      1
+                      /* TEXT */
+                    )];
+                  }),
+                  _: 2
+                  /* DYNAMIC */
+                }, 1032, ["selected"]), createVNode(_component_tiny_dropdown_item, {
                   "current-index": 2,
-                  "selected": selectedIndex === "2" || _vm.state.isMenuView,
+                  selected: selectedIndex === "2" || _ctx.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"
+                }, {
+                  default: withCtx(function() {
+                    return [createTextVNode(
+                      toDisplayString(_ctx.t("ui.imageViewer.menu")),
+                      1
+                      /* TEXT */
+                    )];
+                  }),
+                  _: 2
+                  /* DYNAMIC */
+                }, 1032, ["selected"])];
+              }),
+              _: 1
+              /* STABLE */
+            })];
+          }),
+          default: withCtx(function() {
+            return [createElementVNode("span", null, [createVNode(_component_icon_editor_menu_right)])];
+          }),
+          _: 1
+          /* STABLE */
+        }, 8, ["onItemClick"]), createVNode(_component_icon_arrow_left, {
+          onClick: _ctx.prev,
+          class: normalizeClass(["cursor-pointer", {
+            "is-disabled": !_ctx.state.infinite && _ctx.state.isFirst
+          }])
+        }, null, 8, ["onClick", "class"]), createVNode(_component_icon_arrow_right, {
+          onClick: _ctx.next,
+          class: normalizeClass(["cursor-pointer", {
+            "is-disabled": !_ctx.state.infinite && _ctx.state.isLast
+          }])
+        }, null, 8, ["onClick", "class"])])]), _ctx.showIndex ? (openBlock(), createElementBlock("div", _hoisted_12, [createElementVNode(
+          "span",
+          _hoisted_13,
+          toDisplayString(_ctx.state.index + 1 + "/" + _ctx.state.urlList.length),
+          1
+          /* TEXT */
+        )])) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_14, [(openBlock(true), createElementBlock(
+          Fragment,
+          null,
+          renderList(_ctx.state.urlList, function(url, i) {
+            return openBlock(), createElementBlock(
+              Fragment,
+              null,
+              [i === _ctx.state.index ? (openBlock(), createElementBlock("img", {
+                ref_for: true,
+                ref: "img_" + i,
+                key: i,
+                src: _ctx.state.currentImg,
+                style: normalizeStyle(_ctx.state.imgStyle),
+                onError: _cache[6] || (_cache[6] = function() {
+                  return _ctx.handleImgError && _ctx.handleImgError.apply(_ctx, arguments);
+                }),
+                onMousedown: _cache[7] || (_cache[7] = function() {
+                  return _ctx.handleMouseDown && _ctx.handleMouseDown.apply(_ctx, arguments);
+                }),
+                onLoad: _cache[8] || (_cache[8] = function() {
+                  return _ctx.handleImgLoad && _ctx.handleImgLoad.apply(_ctx, arguments);
+                })
+              }, null, 44, _hoisted_15)) : createCommentVNode("v-if", true)],
+              64
+              /* STABLE_FRAGMENT */
+            );
+          }),
+          256
+          /* UNKEYED_FRAGMENT */
+        ))])])],
+        6
+        /* CLASS, STYLE */
+      )) : createCommentVNode("v-if", true)];
+    }),
+    _: 1
+    /* STABLE */
+  }), createVNode(Transition, {
+    name: "viewer-fade"
+  }, {
+    default: withCtx(function() {
+      return [_ctx.state.isThumbnail ? (openBlock(), createElementBlock(
+        "div",
+        {
+          key: 0,
+          "data-tag": "tiny-image-mobile-thumbnail-list",
+          class: normalizeClass(["w-screen h-screen fixed top-0 left-0 sm:hidden z-40", {
+            "hidden": _ctx.state.hiddenThumbnail
+          }])
+        },
+        [createElementVNode("div", _hoisted_16, [(openBlock(true), createElementBlock(
+          Fragment,
+          null,
+          renderList(_ctx.state.urlList, function(item, i) {
+            return openBlock(), createElementBlock("div", {
+              class: "px-4 pt-4 [&:last-of-type]:mb-5 cursor-pointer",
+              key: i,
+              onTouchstart: function onTouchstart($event) {
+                return _ctx.imagePreview(i);
+              }
+            }, [createElementVNode("img", {
+              class: "bg-current w-full h-auto",
+              ref_for: true,
+              ref: "img_" + i,
+              src: item.url
+            }, null, 8, _hoisted_18), createElementVNode("div", {
+              title: item.name || item.url,
+              class: "color-text-primary mt-2 sm:text-xs text-sm leading-5 overflow-hidden whitespace-nowrap text-ellipsis text-color-text-primary"
+            }, toDisplayString(item.name), 9, _hoisted_19)], 40, _hoisted_17);
+          }),
+          128
+          /* KEYED_FRAGMENT */
+        ))])],
+        2
+        /* CLASS */
+      )) : !_ctx.state.isMenuView ? (openBlock(), createElementBlock("div", _hoisted_20, [_hoisted_21, withDirectives((openBlock(), createElementBlock("div", _hoisted_22, [_ctx.showIndex ? (openBlock(), createElementBlock("div", _hoisted_23, [createElementVNode(
+        "span",
+        _hoisted_24,
+        toDisplayString(_ctx.state.index + 1 + "/" + _ctx.state.urlList.length),
+        1
+        /* TEXT */
+      )])) : createCommentVNode("v-if", true), createElementVNode(
+        "div",
+        _hoisted_25,
+        [createElementVNode(
+          "div",
+          {
+            class: "h-full flex items-center justify-center",
+            style: normalizeStyle({
+              "width": _ctx.state.imageAllWidth + "px",
+              "transition-duration": _ctx.state.imageTransition + "ms",
+              transform: "translateX(" + _ctx.state.imageTransformSize + "px)"
+            })
+          },
+          [(openBlock(true), createElementBlock(
+            Fragment,
+            null,
+            renderList(_ctx.urlList, function(url, i) {
+              return openBlock(), createElementBlock(
+                "div",
+                {
+                  "data-tag": "tiny-image-mobile-viewer-item",
+                  class: "relative shrink h-full",
+                  ref_for: true,
+                  ref: "viewerItem",
+                  key: i,
+                  style: normalizeStyle(Object.assign({
+                    width: _ctx.state.imageItemWidth + "px"
+                  }, i === _ctx.state.index ? _ctx.state.imgStyle : ""))
+                },
+                [createElementVNode("div", _hoisted_26, [i === _ctx.state.index ? (openBlock(), createElementBlock("img", {
+                  key: i,
+                  class: normalizeClass(["block w-full h-full object-contain", {
+                    "object-fill": _ctx.state.fullScreen
+                  }]),
+                  ref_for: true,
+                  ref: "img_" + i,
+                  src: _ctx.state.currentImg,
+                  style: normalizeStyle(_ctx.state.imgStyle),
+                  onMousedown: _cache[9] || (_cache[9] = function() {
+                    return _ctx.handleMouseDown && _ctx.handleMouseDown.apply(_ctx, arguments);
+                  }),
+                  onError: _cache[10] || (_cache[10] = function() {
+                    return _ctx.handleImgError && _ctx.handleImgError.apply(_ctx, arguments);
+                  }),
+                  onLoad: _cache[11] || (_cache[11] = function() {
+                    return _ctx.handleImgLoad && _ctx.handleImgLoad.apply(_ctx, arguments);
+                  }),
+                  onTouchstart: _cache[12] || (_cache[12] = function() {
+                    return _ctx.touchstart && _ctx.touchstart.apply(_ctx, arguments);
+                  }),
+                  onTouchmove: _cache[13] || (_cache[13] = function() {
+                    return _ctx.touchmove && _ctx.touchmove.apply(_ctx, arguments);
+                  }),
+                  onTouchend: _cache[14] || (_cache[14] = function() {
+                    return _ctx.touchend && _ctx.touchend.apply(_ctx, arguments);
+                  })
+                }, null, 46, _hoisted_27)) : createCommentVNode("v-if", true)])],
+                4
+                /* STYLE */
+              );
+            }),
+            128
+            /* KEYED_FRAGMENT */
+          ))],
+          4
+          /* STYLE */
+        )],
+        512
+        /* NEED_PATCH */
+      )])), [[_directive_swipeleft, _ctx.swipeLeft], [_directive_swiperight, _ctx.swipeRight]])])) : createCommentVNode("v-if", true)];
+    }),
+    _: 1
+    /* STABLE */
+  }), createVNode(Transition, {
+    name: "viewer-fade"
+  }, {
+    default: withCtx(function() {
+      return [_ctx.state.isImagePreview ? (openBlock(), createElementBlock("div", _hoisted_28, [_hoisted_29, withDirectives((openBlock(), createElementBlock("div", _hoisted_30, [_ctx.showIndex ? (openBlock(), createElementBlock("div", _hoisted_31, [createElementVNode(
+        "span",
+        _hoisted_32,
+        toDisplayString(_ctx.state.index + 1 + "/" + _ctx.state.urlList.length),
+        1
+        /* TEXT */
+      )])) : createCommentVNode("v-if", true), createElementVNode(
+        "div",
+        _hoisted_33,
+        [createElementVNode(
+          "div",
+          {
+            class: "h-full flex items-center justify-center",
+            style: normalizeStyle({
+              "width": _ctx.state.imageAllWidth + "px",
+              "transition-duration": _ctx.state.imageTransition + "ms",
+              transform: "translateX(" + _ctx.state.imageTransformSize + "px)"
+            })
+          },
+          [(openBlock(true), createElementBlock(
+            Fragment,
+            null,
+            renderList(_ctx.state.urlList, function(url, i) {
+              return openBlock(), createElementBlock(
+                "div",
+                {
+                  "data-tag": "tiny-image-isthumbnail-viewer-item",
+                  class: "relative shrink h-full",
+                  ref_for: true,
+                  ref: "viewerItem",
+                  key: i,
+                  style: normalizeStyle(Object.assign({
+                    width: _ctx.state.imageItemWidth + "px"
+                  }, i === _ctx.state.index ? _ctx.state.imgStyle : ""))
+                },
+                [createElementVNode("div", _hoisted_34, [(openBlock(), createElementBlock("img", {
+                  key: i,
+                  class: normalizeClass(["block w-full h-full object-contain", {
+                    "object-fill": _ctx.state.fullScreen
+                  }]),
+                  ref_for: true,
+                  ref: "img_" + i,
+                  src: _ctx.state.currentImg,
+                  style: normalizeStyle(_ctx.state.imgStyle),
+                  onMousedown: _cache[15] || (_cache[15] = function() {
+                    return _ctx.handleMouseDown && _ctx.handleMouseDown.apply(_ctx, arguments);
+                  }),
+                  onError: _cache[16] || (_cache[16] = function() {
+                    return _ctx.handleImgError && _ctx.handleImgError.apply(_ctx, arguments);
+                  }),
+                  onLoad: _cache[17] || (_cache[17] = function() {
+                    return _ctx.handleImgLoad && _ctx.handleImgLoad.apply(_ctx, arguments);
+                  }),
+                  onTouchstart: _cache[18] || (_cache[18] = function() {
+                    return _ctx.touchstart && _ctx.touchstart.apply(_ctx, arguments);
+                  }),
+                  onTouchmove: _cache[19] || (_cache[19] = function() {
+                    return _ctx.touchmove && _ctx.touchmove.apply(_ctx, arguments);
+                  }),
+                  onTouchend: _cache[20] || (_cache[20] = function() {
+                    return _ctx.touchend && _ctx.touchend.apply(_ctx, arguments);
+                  })
+                }, null, 46, _hoisted_35))])],
+                4
+                /* STYLE */
+              );
+            }),
+            128
+            /* KEYED_FRAGMENT */
+          ))],
+          4
+          /* STYLE */
+        )],
+        512
+        /* NEED_PATCH */
+      )])), [[_directive_swipeleft, _ctx.swipeLeft], [_directive_swiperight, _ctx.swipeRight]])])) : createCommentVNode("v-if", true)];
+    }),
+    _: 1
+    /* STABLE */
+  }), createVNode(_component_tiny_action_sheet, {
+    type: "action",
+    menus: [{
+      type: "save",
+      label: _ctx.t("ui.imageViewer.save")
     }, {
-      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"
+      type: "thumbnail",
+      label: _ctx.t("ui.imageViewer.thumbnail")
     }, {
-      name: "swiperight",
-      rawName: "v-swiperight",
-      value: _vm.swipeRight,
-      expression: "swipeRight"
+      type: "del",
+      label: _ctx.t("ui.imageViewer.del")
     }],
-    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: [{
+    visible: _ctx.state.boxVisibility,
+    "onUpdate:visible": _cache[21] || (_cache[21] = function($event) {
+      return _ctx.state.boxVisibility = $event;
+    }),
+    onClick: _ctx.selectOption
+  }, {
+    default: withCtx(function(data) {
+      return [createElementVNode(
+        "div",
+        {
+          class: normalizeClass([{
             "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];
-  }
+          }])
+        },
+        toDisplayString(data.data.label),
+        3
+        /* TEXT, CLASS */
+      )];
+    }),
+    _: 1
+    /* STABLE */
+  }, 8, ["menus", "visible", "onClick"])])) : createCommentVNode("v-if", true);
 }
-var mobileFirst = /* @__PURE__ */ function() {
-  return __component__.exports;
-}();
+var mobileFirst = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 
 export { mobileFirst as default };