ele-admin-plus 1.3.0-beta.3 → 1.3.0

package/lib/ele-upload-list/index.cjs

@@ -8,20 +8,17 @@ const EleImageViewer = require("../ele-image-viewer/index");
 const icons = require("../icons");
 const ListItem = require("./components/list-item");
 const props = require("./props");
-const ownSlots = ["default", "icon"];
-const _sfc_main = vue.defineComponent({
-  name: "EleUploadList",
-  components: {
-    VueDraggable,
-    ElUpload: elementPlus.ElUpload,
-    ElIcon: elementPlus.ElIcon,
-    PlusOutlined: icons.PlusOutlined,
-    EleImageViewer,
-    ListItem
-  },
+const _hoisted_1 = { class: "ele-upload-hidden" };
+const _hoisted_2 = ["accept"];
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{ name: "EleUploadList" },
+  __name: "index",
   props: props.uploadListProps,
   emits: props.uploadListEmits,
-  setup(props2, { emit }) {
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const ownSlots = ["default", "icon"];
+    const props2 = __props;
+    const emit = __emit;
     const { lang } = receiver.useLocale("upload", props2);
     const previewVisible = vue.ref(false);
     const previewImages = vue.ref([]);
@@ -68,16 +65,16 @@ const _sfc_main = vue.defineComponent({
             data.push({ item: d, url });
           }
         });
-        const index2 = data.findIndex((t) => t.item.key === item.key);
-        if (index2 !== -1) {
+        const index = data.findIndex((t) => t.item.key === item.key);
+        if (index !== -1) {
           const urls = data.map((d) => d.url);
-          openImagePreview(urls, index2);
+          openImagePreview(urls, index);
         }
       }
     };
-    const openImagePreview = (urls, index2) => {
+    const openImagePreview = (urls, index) => {
       previewImages.value = urls;
-      previewCurrentIndex.value = index2;
+      previewCurrentIndex.value = index;
       previewVisible.value = true;
     };
     const updateModelValue = (value) => {
@@ -152,141 +149,109 @@ const _sfc_main = vue.defineComponent({
       });
       imageObjectUrls.value = [];
     });
-    return {
-      ownSlots,
-      lang,
-      previewVisible,
-      previewImages,
-      previewCurrentIndex,
-      imageObjectUrls,
-      uploadInputRef,
-      uploadEnable,
-      updateModelValue,
-      handleUpload,
-      handleItemClick,
-      handleItemRemove,
-      handleItemEdit,
-      handleItemPreview,
-      handleItemRetry,
-      handleInputChange,
-      handleUploadClick,
+    __expose({
       openImagePreview
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.unref(VueDraggable), vue.mergeProps({
+        itemKey: "key",
+        animation: 300,
+        setData: () => void 0,
+        handle: ".ele-upload-handle",
+        class: [
+          "ele-upload-list",
+          { "is-file-list": _ctx.listType === "file" },
+          { "is-disabled": _ctx.disabled }
+        ]
+      }, !_ctx.sortable || _ctx.sortable === true ? {} : _ctx.sortable, {
+        modelValue: _ctx.modelValue || [],
+        "onUpdate:modelValue": updateModelValue
+      }), {
+        item: vue.withCtx(({ element }) => [
+          vue.createVNode(ListItem, {
+            item: element,
+            readonly: _ctx.readonly,
+            disabled: _ctx.disabled,
+            sortable: _ctx.sortable && !_ctx.readonly && !_ctx.disabled && _ctx.limit !== 1,
+            imageProps: _ctx.imageProps,
+            progressProps: _ctx.progressProps,
+            imageObjectUrls: imageObjectUrls.value,
+            tools: _ctx.tools,
+            listType: _ctx.listType,
+            locale: vue.unref(lang),
+            style: vue.normalizeStyle(_ctx.itemStyle),
+            onItemClick: handleItemClick,
+            onRemove: handleItemRemove,
+            onEdit: handleItemEdit,
+            onPreview: handleItemPreview,
+            onRetry: handleItemRetry
+          }, vue.createSlots({ _: 2 }, [
+            vue.renderList(Object.keys(_ctx.$slots).filter(
+              (k) => !ownSlots.includes(k)
+            ), (name) => {
+              return {
+                name,
+                fn: vue.withCtx((slotProps) => [
+                  vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
+                ])
+              };
+            })
+          ]), 1032, ["item", "readonly", "disabled", "sortable", "imageProps", "progressProps", "imageObjectUrls", "tools", "listType", "locale", "style"])
+        ]),
+        footer: vue.withCtx(() => [
+          uploadEnable.value && _ctx.buttonStyle !== false ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 0,
+            style: vue.normalizeStyle(typeof _ctx.buttonStyle === "boolean" ? void 0 : _ctx.buttonStyle),
+            class: "ele-upload-item ele-upload-button"
+          }, [
+            vue.createVNode(vue.unref(elementPlus.ElUpload), {
+              action: "",
+              drag: _ctx.drag,
+              accept: _ctx.accept,
+              multiple: _ctx.multiple,
+              disabled: _ctx.disabled,
+              showFileList: false,
+              beforeUpload: handleUpload
+            }, {
+              default: vue.withCtx(() => [
+                vue.createElementVNode("div", {
+                  class: "ele-upload-button-inner",
+                  onClick: handleUploadClick
+                }, [
+                  vue.renderSlot(_ctx.$slots, "icon", {}, () => [
+                    vue.createVNode(vue.unref(elementPlus.ElIcon), { class: "ele-upload-icon" }, {
+                      default: vue.withCtx(() => [
+                        vue.createVNode(vue.unref(icons.PlusOutlined))
+                      ]),
+                      _: 1
+                    })
+                  ])
+                ])
+              ]),
+              _: 3
+            }, 8, ["drag", "accept", "multiple", "disabled"])
+          ], 4)) : vue.createCommentVNode("", true),
+          vue.createElementVNode("div", _hoisted_1, [
+            _ctx.tools ? (vue.openBlock(), vue.createElementBlock("input", {
+              key: 0,
+              ref_key: "uploadInputRef",
+              ref: uploadInputRef,
+              type: "file",
+              accept: _ctx.accept,
+              class: "ele-upload-input",
+              onChange: handleInputChange
+            }, null, 40, _hoisted_2)) : vue.createCommentVNode("", true),
+            vue.createVNode(EleImageViewer, vue.mergeProps({ infinite: false }, _ctx.previewProps || {}, {
+              modelValue: previewVisible.value,
+              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => previewVisible.value = $event),
+              urlList: previewImages.value,
+              initialIndex: previewCurrentIndex.value
+            }), null, 16, ["modelValue", "urlList", "initialIndex"])
+          ])
+        ]),
+        _: 3
+      }, 16, ["class", "modelValue"]);
     };
   }
 });
-const _export_sfc = (sfc, props2) => {
-  const target = sfc.__vccOpts || sfc;
-  for (const [key, val] of props2) {
-    target[key] = val;
-  }
-  return target;
-};
-const _hoisted_1 = { class: "ele-upload-hidden" };
-const _hoisted_2 = ["accept"];
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_ListItem = vue.resolveComponent("ListItem");
-  const _component_PlusOutlined = vue.resolveComponent("PlusOutlined");
-  const _component_ElIcon = vue.resolveComponent("ElIcon");
-  const _component_ElUpload = vue.resolveComponent("ElUpload");
-  const _component_EleImageViewer = vue.resolveComponent("EleImageViewer");
-  const _component_VueDraggable = vue.resolveComponent("VueDraggable");
-  return vue.openBlock(), vue.createBlock(_component_VueDraggable, vue.mergeProps({
-    itemKey: "key",
-    animation: 300,
-    setData: () => void 0,
-    handle: ".ele-upload-handle",
-    class: [
-      "ele-upload-list",
-      { "is-file-list": _ctx.listType === "file" },
-      { "is-disabled": _ctx.disabled }
-    ]
-  }, !_ctx.sortable || _ctx.sortable === true ? {} : _ctx.sortable, {
-    modelValue: _ctx.modelValue || [],
-    "onUpdate:modelValue": _ctx.updateModelValue
-  }), {
-    item: vue.withCtx(({ element }) => [
-      vue.createVNode(_component_ListItem, {
-        item: element,
-        readonly: _ctx.readonly,
-        disabled: _ctx.disabled,
-        sortable: _ctx.sortable && !_ctx.readonly && !_ctx.disabled && _ctx.limit !== 1,
-        imageProps: _ctx.imageProps,
-        progressProps: _ctx.progressProps,
-        imageObjectUrls: _ctx.imageObjectUrls,
-        tools: _ctx.tools,
-        listType: _ctx.listType,
-        locale: _ctx.lang,
-        style: vue.normalizeStyle(_ctx.itemStyle),
-        onItemClick: _ctx.handleItemClick,
-        onRemove: _ctx.handleItemRemove,
-        onEdit: _ctx.handleItemEdit,
-        onPreview: _ctx.handleItemPreview,
-        onRetry: _ctx.handleItemRetry
-      }, vue.createSlots({ _: 2 }, [
-        vue.renderList(Object.keys(_ctx.$slots).filter(
-          (k) => !_ctx.ownSlots.includes(k)
-        ), (name) => {
-          return {
-            name,
-            fn: vue.withCtx((slotProps) => [
-              vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
-            ])
-          };
-        })
-      ]), 1032, ["item", "readonly", "disabled", "sortable", "imageProps", "progressProps", "imageObjectUrls", "tools", "listType", "locale", "style", "onItemClick", "onRemove", "onEdit", "onPreview", "onRetry"])
-    ]),
-    footer: vue.withCtx(() => [
-      _ctx.uploadEnable && _ctx.buttonStyle !== false ? (vue.openBlock(), vue.createElementBlock("div", {
-        key: 0,
-        style: vue.normalizeStyle(typeof _ctx.buttonStyle === "boolean" ? void 0 : _ctx.buttonStyle),
-        class: "ele-upload-item ele-upload-button"
-      }, [
-        vue.createVNode(_component_ElUpload, {
-          action: "",
-          drag: _ctx.drag,
-          accept: _ctx.accept,
-          multiple: _ctx.multiple,
-          disabled: _ctx.disabled,
-          showFileList: false,
-          beforeUpload: _ctx.handleUpload
-        }, {
-          default: vue.withCtx(() => [
-            vue.createElementVNode("div", {
-              class: "ele-upload-button-inner",
-              onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleUploadClick && _ctx.handleUploadClick(...args))
-            }, [
-              vue.renderSlot(_ctx.$slots, "icon", {}, () => [
-                vue.createVNode(_component_ElIcon, { class: "ele-upload-icon" }, {
-                  default: vue.withCtx(() => [
-                    vue.createVNode(_component_PlusOutlined)
-                  ]),
-                  _: 1
-                })
-              ])
-            ])
-          ]),
-          _: 3
-        }, 8, ["drag", "accept", "multiple", "disabled", "beforeUpload"])
-      ], 4)) : vue.createCommentVNode("", true),
-      vue.createElementVNode("div", _hoisted_1, [
-        _ctx.tools ? (vue.openBlock(), vue.createElementBlock("input", {
-          key: 0,
-          ref: "uploadInputRef",
-          type: "file",
-          accept: _ctx.accept,
-          class: "ele-upload-input",
-          onChange: _cache[1] || (_cache[1] = (...args) => _ctx.handleInputChange && _ctx.handleInputChange(...args))
-        }, null, 40, _hoisted_2)) : vue.createCommentVNode("", true),
-        vue.createVNode(_component_EleImageViewer, vue.mergeProps({ infinite: false }, _ctx.previewProps || {}, {
-          modelValue: _ctx.previewVisible,
-          "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => _ctx.previewVisible = $event),
-          urlList: _ctx.previewImages,
-          initialIndex: _ctx.previewCurrentIndex
-        }), null, 16, ["modelValue", "urlList", "initialIndex"])
-      ])
-    ]),
-    _: 3
-  }, 16, ["class", "modelValue", "onUpdate:modelValue"]);
-}
-const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
-module.exports = index;
+module.exports = _sfc_main;

package/lib/ele-upload-list/index.d.ts

@@ -1,6 +1,9 @@
 import { UploadItem, UploadLocale } from './types';
 
-declare const _default: import('vue').DefineComponent<{
+declare function __VLS_template(): Partial<Record<string, (_: any) => any>> & {
+    icon?(_: {}): any;
+};
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     modelValue: import('vue').PropType<UploadItem[]>;
     readonly: BooleanConstructor;
     disabled: BooleanConstructor;
@@ -33,46 +36,16 @@ declare const _default: import('vue').DefineComponent<{
     beforeItemEdit: import('vue').PropType<import('./types').BeforeItemEdit>;
     beforePreview: import('vue').PropType<import('./types').BeforePreview>;
     locale: import('vue').PropType<Partial<UploadLocale>>;
-}, {
-    ownSlots: string[];
-    lang: import('vue').ComputedRef<UploadLocale>;
-    previewVisible: import('vue').Ref<boolean>;
-    previewImages: import('vue').Ref<string[]>;
-    previewCurrentIndex: import('vue').Ref<number>;
-    imageObjectUrls: import('vue').Ref<{
-        file: {
-            readonly lastModified: number;
-            readonly name: string;
-            readonly webkitRelativePath: string;
-            readonly size: number;
-            readonly type: string;
-            arrayBuffer: () => Promise<ArrayBuffer>;
-            slice: (start?: number, end?: number, contentType?: string) => Blob;
-            stream: () => ReadableStream<Uint8Array>;
-            text: () => Promise<string>;
-        };
-        url: string;
-    }[]>;
-    uploadInputRef: import('vue').Ref<HTMLInputElement | null>;
-    uploadEnable: import('vue').ComputedRef<boolean>;
-    updateModelValue: (value: UploadItem[]) => void;
-    handleUpload: (file: File) => boolean;
-    handleItemClick: (item: UploadItem) => void;
-    handleItemRemove: (item: UploadItem) => void;
-    handleItemEdit: (item: UploadItem) => void;
-    handleItemPreview: (item: UploadItem) => void;
-    handleItemRetry: (item: UploadItem) => void;
-    handleInputChange: (e: Event) => void;
-    handleUploadClick: (e: MouseEvent) => void;
+}>, {
     openImagePreview: (urls: string[], index: number) => void;
-}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    'update:modelValue': (_value: UploadItem[]) => boolean;
-    itemClick: (_item: UploadItem) => boolean;
-    upload: (_item: UploadItem) => boolean;
-    remove: (_item: UploadItem) => boolean;
-    retry: (_item: UploadItem) => boolean;
-    editUpload: (_result: import('./types').EditUploadResult) => boolean;
-    preview: (_item: UploadItem) => boolean;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (_value: UploadItem[]) => void;
+    itemClick: (_item: UploadItem) => void;
+    remove: (_item: UploadItem) => void;
+    upload: (_item: UploadItem) => void;
+    preview: (_item: UploadItem) => void;
+    retry: (_item: UploadItem) => void;
+    editUpload: (_result: import('./types').EditUploadResult) => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     modelValue: import('vue').PropType<UploadItem[]>;
     readonly: BooleanConstructor;
@@ -106,23 +79,29 @@ declare const _default: import('vue').DefineComponent<{
     beforeItemEdit: import('vue').PropType<import('./types').BeforeItemEdit>;
     beforePreview: import('vue').PropType<import('./types').BeforePreview>;
     locale: import('vue').PropType<Partial<UploadLocale>>;
-}>> & {
+}>> & Readonly<{
     "onUpdate:modelValue"?: ((_value: UploadItem[]) => any) | undefined;
     onItemClick?: ((_item: UploadItem) => any) | undefined;
     onRemove?: ((_item: UploadItem) => any) | undefined;
+    onUpload?: ((_item: UploadItem) => any) | undefined;
     onPreview?: ((_item: UploadItem) => any) | undefined;
     onRetry?: ((_item: UploadItem) => any) | undefined;
-    onUpload?: ((_item: UploadItem) => any) | undefined;
     onEditUpload?: ((_result: import('./types').EditUploadResult) => any) | undefined;
-}, {
+}>, {
     drag: boolean;
     disabled: boolean;
     readonly: boolean;
-    sortable: boolean | Record<string | number | symbol, any>;
     multiple: boolean;
+    sortable: boolean | Record<string | number | symbol, any>;
     preview: boolean;
     accept: string;
     tools: boolean;
     buttonStyle: false | Partial<import('vue').CSSProperties>;
-}, {}>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/lib/ele-viewer/index.cjs

@@ -0,0 +1,277 @@
+"use strict";
+const vue = require("vue");
+const hook = require("../utils/hook");
+const util = require("./util");
+const props = require("./props");
+const _hoisted_1 = ["src"];
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{ name: "EleViewer" },
+  __name: "index",
+  props: props.viewerProps,
+  emits: props.viewerEmits,
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props2 = __props;
+    const emit = __emit;
+    const viewerRef = vue.ref(null);
+    const bodyRef = vue.ref(null);
+    const contentRef = vue.ref(null);
+    const viewerMoving = vue.ref(false);
+    const viewerTranslateX = vue.ref(0);
+    const viewerTranslateY = vue.ref(0);
+    const viewerScale = vue.ref(100);
+    const viewerFlipX = vue.ref(false);
+    const viewerFlipY = vue.ref(false);
+    const viewerRotate = vue.ref(0);
+    const imageTransform = vue.computed(() => {
+      const sx = viewerFlipX.value ? -1 : 1;
+      const sy = viewerFlipY.value ? -1 : 1;
+      return `scaleX(${sx}) scaleY(${sy}) rotate(${viewerRotate.value}deg)`;
+    });
+    const scaleReverse = vue.computed(() => {
+      return (100 / viewerScale.value).toFixed(6);
+    });
+    const imageTransformReverse = vue.computed(() => {
+      const sx = viewerFlipX.value ? -1 : 1;
+      const sy = viewerFlipY.value ? -1 : 1;
+      return `scaleX(${sx}) scaleY(${sy}) rotate(${360 - viewerRotate.value}deg)`;
+    });
+    const handleClick = (e) => {
+      emit("contentClick", e);
+    };
+    const handleContextmenu = (e) => {
+      emit("contentContextmenu", e);
+    };
+    const handleImgLoad = () => {
+      autoIntoView();
+    };
+    const getZoomStep = () => {
+      return props2.zoomStep;
+    };
+    const zoomIn = () => {
+      if (viewerScale.value >= props2.zoomMax) {
+        return;
+      }
+      viewerScale.value += getZoomStep();
+    };
+    const zoomOut = () => {
+      if (viewerScale.value <= props2.zoomMin) {
+        return;
+      }
+      viewerScale.value -= getZoomStep();
+    };
+    const flipX = () => {
+      viewerFlipX.value = !viewerFlipX.value;
+    };
+    const flipY = () => {
+      viewerFlipY.value = !viewerFlipY.value;
+    };
+    const rotateLeft = () => {
+      if (viewerRotate.value === 0) {
+        viewerRotate.value = 360 - props2.rotateStep;
+        return;
+      }
+      if (viewerRotate.value <= props2.rotateStep) {
+        viewerRotate.value = 0;
+        return;
+      }
+      viewerRotate.value -= props2.rotateStep;
+    };
+    const rotateRight = () => {
+      if (viewerRotate.value >= 360 - props2.rotateStep) {
+        viewerRotate.value = 0;
+        return;
+      }
+      viewerRotate.value += props2.rotateStep;
+    };
+    const setTranslateX = (xValue) => {
+      viewerTranslateX.value = xValue;
+    };
+    const setTranslateY = (yValue) => {
+      viewerTranslateY.value = yValue;
+    };
+    const autoIntoView = () => {
+      const pEl = viewerRef.value;
+      const pw = (pEl == null ? void 0 : pEl.offsetWidth) || 0;
+      const ph = (pEl == null ? void 0 : pEl.offsetHeight) || 0;
+      const el = bodyRef.value;
+      const w = (el == null ? void 0 : el.offsetWidth) || 0;
+      const h = (el == null ? void 0 : el.offsetHeight) || 0;
+      viewerTranslateX.value = Math.floor((pw - w) / 2);
+      viewerTranslateY.value = Math.floor((ph - h) / 2);
+      const { width, height } = util.getRotatedBounds(w, h, viewerRotate.value);
+      viewerScale.value = Math.min(pw / width * 100, ph / height * 100);
+    };
+    const autoIntoViewWidth = () => {
+      const pEl = viewerRef.value;
+      const pw = (pEl == null ? void 0 : pEl.offsetWidth) || 0;
+      const ph = (pEl == null ? void 0 : pEl.offsetHeight) || 0;
+      const el = bodyRef.value;
+      const w = (el == null ? void 0 : el.offsetWidth) || 0;
+      const h = (el == null ? void 0 : el.offsetHeight) || 0;
+      viewerScale.value = pw / w * 100;
+      const sh = h * (viewerScale.value / 100);
+      viewerTranslateX.value = Math.floor((pw - w) / 2);
+      if (sh < ph) {
+        viewerTranslateY.value = Math.floor((ph - h) / 2);
+      } else {
+        viewerTranslateY.value = Math.floor((sh - h) / 2);
+      }
+    };
+    const autoIntoViewHeight = () => {
+      const pEl = viewerRef.value;
+      const pw = (pEl == null ? void 0 : pEl.offsetWidth) || 0;
+      const ph = (pEl == null ? void 0 : pEl.offsetHeight) || 0;
+      const el = bodyRef.value;
+      const w = (el == null ? void 0 : el.offsetWidth) || 0;
+      const h = (el == null ? void 0 : el.offsetHeight) || 0;
+      viewerScale.value = ph / h * 100;
+      const sw = w * (viewerScale.value / 100);
+      if (sw < pw) {
+        viewerTranslateX.value = Math.floor((pw - w) / 2);
+      } else {
+        viewerTranslateX.value = Math.floor((sw - w) / 2);
+      }
+      viewerTranslateY.value = Math.floor((ph - h) / 2);
+    };
+    const reset = () => {
+      viewerFlipX.value = false;
+      viewerFlipY.value = false;
+      viewerRotate.value = 0;
+      autoIntoView();
+    };
+    let startX = null;
+    let startY = null;
+    const { handleMousedown, handleTouchstart } = hook.useMoveEvent({
+      start: ({ e }) => {
+        e.preventDefault();
+        e.stopPropagation();
+        viewerMoving.value = true;
+        startX = viewerTranslateX.value;
+        startY = viewerTranslateY.value;
+      },
+      move: ({ distanceX, distanceY, e }) => {
+        if (startX == null || startY == null || distanceX == null || distanceY == null) {
+          return;
+        }
+        e.preventDefault();
+        e.stopPropagation();
+        viewerTranslateX.value = Math.floor(distanceX + startX);
+        viewerTranslateY.value = Math.floor(distanceY + startY);
+      },
+      end: () => {
+        startX = null;
+        startY = null;
+        viewerMoving.value = false;
+      },
+      touchmoveOptions: { passive: false }
+    });
+    const { bindMousewheel, unbindMousewheel } = hook.useMousewheel(
+      ({ e, direction }) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (direction === "up") {
+          zoomIn();
+          return;
+        }
+        zoomOut();
+      }
+    );
+    vue.onMounted(() => {
+      viewerRef.value && bindMousewheel(viewerRef.value);
+      autoIntoView();
+    });
+    vue.onBeforeUnmount(() => {
+      viewerRef.value && unbindMousewheel(viewerRef.value);
+    });
+    __expose({
+      viewerMoving,
+      viewerTranslateX,
+      viewerTranslateY,
+      viewerScale,
+      viewerFlipX,
+      viewerFlipY,
+      viewerRotate,
+      zoomIn,
+      zoomOut,
+      flipX,
+      flipY,
+      rotateLeft,
+      rotateRight,
+      setTranslateX,
+      setTranslateY,
+      autoIntoView,
+      autoIntoViewWidth,
+      autoIntoViewHeight,
+      reset
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        ref_key: "viewerRef",
+        ref: viewerRef,
+        class: vue.normalizeClass(["ele-viewer"])
+      }, [
+        vue.createElementVNode("div", {
+          ref_key: "bodyRef",
+          ref: bodyRef,
+          class: "ele-viewer-body",
+          style: vue.normalizeStyle({
+            transform: `translate(${viewerTranslateX.value}px, ${viewerTranslateY.value}px)`
+          })
+        }, [
+          vue.createElementVNode("div", {
+            class: "ele-viewer-main",
+            style: vue.normalizeStyle({ transform: `scale(${(viewerScale.value / 100).toFixed(6)})` })
+          }, [
+            vue.createElementVNode("div", {
+              ref_key: "contentRef",
+              ref: contentRef,
+              class: vue.normalizeClass(["ele-viewer-content", { "is-moving": viewerMoving.value }]),
+              style: vue.normalizeStyle([_ctx.contentStyle || {}, { transform: imageTransform.value }]),
+              onMousedown: _cache[0] || (_cache[0] = //@ts-ignore
+              (...args) => vue.unref(handleMousedown) && vue.unref(handleMousedown)(...args)),
+              onTouchstart: _cache[1] || (_cache[1] = //@ts-ignore
+              (...args) => vue.unref(handleTouchstart) && vue.unref(handleTouchstart)(...args)),
+              onClick: handleClick,
+              onContextmenu: handleContextmenu
+            }, [
+              _ctx.src ? (vue.openBlock(), vue.createElementBlock("img", {
+                key: 0,
+                src: _ctx.src,
+                class: "ele-viewer-image",
+                style: vue.normalizeStyle(_ctx.imageStyle),
+                onLoad: handleImgLoad
+              }, null, 44, _hoisted_1)) : (vue.openBlock(), vue.createElementBlock("div", {
+                key: 1,
+                class: "ele-viewer-image",
+                style: vue.normalizeStyle(_ctx.imageStyle)
+              }, [
+                vue.renderSlot(_ctx.$slots, "default")
+              ], 4)),
+              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.markers, (marker) => {
+                return vue.openBlock(), vue.createElementBlock("div", {
+                  key: marker.key,
+                  style: vue.normalizeStyle({
+                    left: (marker.x || 0) + "px",
+                    top: (marker.y || 0) + "px",
+                    transform: marker.fixed ? `scale(${scaleReverse.value})` : void 0
+                  }),
+                  class: "ele-viewer-marker"
+                }, [
+                  vue.createElementVNode("div", {
+                    class: "ele-viewer-marker-content",
+                    style: vue.normalizeStyle({
+                      transform: marker.fixed ? imageTransformReverse.value : void 0
+                    })
+                  }, [
+                    vue.renderSlot(_ctx.$slots, "markerItem", { item: marker })
+                  ], 4)
+                ], 4);
+              }), 128))
+            ], 38)
+          ], 4)
+        ], 4)
+      ], 512);
+    };
+  }
+});
+module.exports = _sfc_main;