ele-admin-plus 1.3.0-beta.2 → 1.3.0-beta.4

package/es/ele-upload-list/index.js

@@ -1,4 +1,4 @@
-import { defineComponent, ref, computed, watch, onBeforeUnmount, resolveComponent, openBlock, createBlock, mergeProps, withCtx, createVNode, normalizeStyle, createSlots, renderList, renderSlot, normalizeProps, guardReactiveProps, createElementBlock, createElementVNode, createCommentVNode } from "vue";
+import { defineComponent, ref, computed, watch, onBeforeUnmount, openBlock, createBlock, unref, mergeProps, withCtx, createVNode, normalizeStyle, createSlots, renderList, renderSlot, normalizeProps, guardReactiveProps, createElementBlock, createElementVNode, createCommentVNode } from "vue";
 import VueDraggable from "vuedraggable";
 import { ElUpload, ElIcon } from "element-plus";
 import { uuid } from "../utils/core";
@@ -7,20 +7,17 @@ import EleImageViewer from "../ele-image-viewer/index";
 import { PlusOutlined } from "../icons";
 import ListItem from "./components/list-item";
 import { uploadListProps, uploadListEmits } from "./props";
-const ownSlots = ["default", "icon"];
-const _sfc_main = defineComponent({
-  name: "EleUploadList",
-  components: {
-    VueDraggable,
-    ElUpload,
-    ElIcon,
-    PlusOutlined,
-    EleImageViewer,
-    ListItem
-  },
+const _hoisted_1 = { class: "ele-upload-hidden" };
+const _hoisted_2 = ["accept"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "EleUploadList" },
+  __name: "index",
   props: uploadListProps,
   emits: uploadListEmits,
-  setup(props, { emit }) {
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const ownSlots = ["default", "icon"];
+    const props = __props;
+    const emit = __emit;
     const { lang } = useLocale("upload", props);
     const previewVisible = ref(false);
     const previewImages = ref([]);
@@ -67,16 +64,16 @@ const _sfc_main = 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) => {
@@ -151,143 +148,111 @@ const _sfc_main = 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 openBlock(), createBlock(unref(VueDraggable), 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: withCtx(({ element }) => [
+          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: unref(lang),
+            style: normalizeStyle(_ctx.itemStyle),
+            onItemClick: handleItemClick,
+            onRemove: handleItemRemove,
+            onEdit: handleItemEdit,
+            onPreview: handleItemPreview,
+            onRetry: handleItemRetry
+          }, createSlots({ _: 2 }, [
+            renderList(Object.keys(_ctx.$slots).filter(
+              (k) => !ownSlots.includes(k)
+            ), (name) => {
+              return {
+                name,
+                fn: withCtx((slotProps) => [
+                  renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(slotProps || {})))
+                ])
+              };
+            })
+          ]), 1032, ["item", "readonly", "disabled", "sortable", "imageProps", "progressProps", "imageObjectUrls", "tools", "listType", "locale", "style"])
+        ]),
+        footer: withCtx(() => [
+          uploadEnable.value && _ctx.buttonStyle !== false ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            style: normalizeStyle(typeof _ctx.buttonStyle === "boolean" ? void 0 : _ctx.buttonStyle),
+            class: "ele-upload-item ele-upload-button"
+          }, [
+            createVNode(unref(ElUpload), {
+              action: "",
+              drag: _ctx.drag,
+              accept: _ctx.accept,
+              multiple: _ctx.multiple,
+              disabled: _ctx.disabled,
+              showFileList: false,
+              beforeUpload: handleUpload
+            }, {
+              default: withCtx(() => [
+                createElementVNode("div", {
+                  class: "ele-upload-button-inner",
+                  onClick: handleUploadClick
+                }, [
+                  renderSlot(_ctx.$slots, "icon", {}, () => [
+                    createVNode(unref(ElIcon), { class: "ele-upload-icon" }, {
+                      default: withCtx(() => [
+                        createVNode(unref(PlusOutlined))
+                      ]),
+                      _: 1
+                    })
+                  ])
+                ])
+              ]),
+              _: 3
+            }, 8, ["drag", "accept", "multiple", "disabled"])
+          ], 4)) : createCommentVNode("", true),
+          createElementVNode("div", _hoisted_1, [
+            _ctx.tools ? (openBlock(), createElementBlock("input", {
+              key: 0,
+              ref_key: "uploadInputRef",
+              ref: uploadInputRef,
+              type: "file",
+              accept: _ctx.accept,
+              class: "ele-upload-input",
+              onChange: handleInputChange
+            }, null, 40, _hoisted_2)) : createCommentVNode("", true),
+            createVNode(EleImageViewer, 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, props) => {
-  const target = sfc.__vccOpts || sfc;
-  for (const [key, val] of props) {
-    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 = resolveComponent("ListItem");
-  const _component_PlusOutlined = resolveComponent("PlusOutlined");
-  const _component_ElIcon = resolveComponent("ElIcon");
-  const _component_ElUpload = resolveComponent("ElUpload");
-  const _component_EleImageViewer = resolveComponent("EleImageViewer");
-  const _component_VueDraggable = resolveComponent("VueDraggable");
-  return openBlock(), createBlock(_component_VueDraggable, 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: withCtx(({ element }) => [
-      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: normalizeStyle(_ctx.itemStyle),
-        onItemClick: _ctx.handleItemClick,
-        onRemove: _ctx.handleItemRemove,
-        onEdit: _ctx.handleItemEdit,
-        onPreview: _ctx.handleItemPreview,
-        onRetry: _ctx.handleItemRetry
-      }, createSlots({ _: 2 }, [
-        renderList(Object.keys(_ctx.$slots).filter(
-          (k) => !_ctx.ownSlots.includes(k)
-        ), (name) => {
-          return {
-            name,
-            fn: withCtx((slotProps) => [
-              renderSlot(_ctx.$slots, name, normalizeProps(guardReactiveProps(slotProps || {})))
-            ])
-          };
-        })
-      ]), 1032, ["item", "readonly", "disabled", "sortable", "imageProps", "progressProps", "imageObjectUrls", "tools", "listType", "locale", "style", "onItemClick", "onRemove", "onEdit", "onPreview", "onRetry"])
-    ]),
-    footer: withCtx(() => [
-      _ctx.uploadEnable && _ctx.buttonStyle !== false ? (openBlock(), createElementBlock("div", {
-        key: 0,
-        style: normalizeStyle(typeof _ctx.buttonStyle === "boolean" ? void 0 : _ctx.buttonStyle),
-        class: "ele-upload-item ele-upload-button"
-      }, [
-        createVNode(_component_ElUpload, {
-          action: "",
-          drag: _ctx.drag,
-          accept: _ctx.accept,
-          multiple: _ctx.multiple,
-          disabled: _ctx.disabled,
-          showFileList: false,
-          beforeUpload: _ctx.handleUpload
-        }, {
-          default: withCtx(() => [
-            createElementVNode("div", {
-              class: "ele-upload-button-inner",
-              onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleUploadClick && _ctx.handleUploadClick(...args))
-            }, [
-              renderSlot(_ctx.$slots, "icon", {}, () => [
-                createVNode(_component_ElIcon, { class: "ele-upload-icon" }, {
-                  default: withCtx(() => [
-                    createVNode(_component_PlusOutlined)
-                  ]),
-                  _: 1
-                })
-              ])
-            ])
-          ]),
-          _: 3
-        }, 8, ["drag", "accept", "multiple", "disabled", "beforeUpload"])
-      ], 4)) : createCommentVNode("", true),
-      createElementVNode("div", _hoisted_1, [
-        _ctx.tools ? (openBlock(), 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)) : createCommentVNode("", true),
-        createVNode(_component_EleImageViewer, 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]]);
 export {
-  index as default
+  _sfc_main as default
 };

package/es/ele-viewer/index.d.ts

@@ -0,0 +1,87 @@
+declare function __VLS_template(): {
+    default?(_: {}): any;
+    markerItem?(_: {
+        item: import('./types').MarkerItem;
+    }): any;
+};
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    src: StringConstructor;
+    markers: import('vue').PropType<import('./types').MarkerItem[]>;
+    contentStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    imageStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    zoomStep: {
+        type: NumberConstructor;
+        default: number;
+    };
+    zoomMin: {
+        type: NumberConstructor;
+        default: number;
+    };
+    zoomMax: {
+        type: NumberConstructor;
+        default: number;
+    };
+    rotateStep: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>, {
+    viewerMoving: import('vue').Ref<boolean, boolean>;
+    viewerTranslateX: import('vue').Ref<number, number>;
+    viewerTranslateY: import('vue').Ref<number, number>;
+    viewerScale: import('vue').Ref<number, number>;
+    viewerFlipX: import('vue').Ref<boolean, boolean>;
+    viewerFlipY: import('vue').Ref<boolean, boolean>;
+    viewerRotate: import('vue').Ref<number, number>;
+    zoomIn: () => void;
+    zoomOut: () => void;
+    flipX: () => void;
+    flipY: () => void;
+    rotateLeft: () => void;
+    rotateRight: () => void;
+    setTranslateX: (xValue: number) => void;
+    setTranslateY: (yValue: number) => void;
+    autoIntoView: () => void;
+    autoIntoViewWidth: () => void;
+    autoIntoViewHeight: () => void;
+    reset: () => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    contentClick: (_e: MouseEvent) => void;
+    contentContextmenu: (_e: MouseEvent) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    src: StringConstructor;
+    markers: import('vue').PropType<import('./types').MarkerItem[]>;
+    contentStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    imageStyle: import('vue').PropType<import('../ele-app/types').StyleValue>;
+    zoomStep: {
+        type: NumberConstructor;
+        default: number;
+    };
+    zoomMin: {
+        type: NumberConstructor;
+        default: number;
+    };
+    zoomMax: {
+        type: NumberConstructor;
+        default: number;
+    };
+    rotateStep: {
+        type: NumberConstructor;
+        default: number;
+    };
+}>> & Readonly<{
+    onContentClick?: ((_e: MouseEvent) => any) | undefined;
+    onContentContextmenu?: ((_e: MouseEvent) => any) | undefined;
+}>, {
+    zoomStep: number;
+    zoomMin: number;
+    zoomMax: number;
+    rotateStep: number;
+}, {}, {}, {}, 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/es/ele-viewer/index.js

@@ -0,0 +1,278 @@
+import { defineComponent, ref, computed, onMounted, onBeforeUnmount, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, unref, renderSlot, Fragment, renderList } from "vue";
+import { useMoveEvent, useMousewheel } from "../utils/hook";
+import { getRotatedBounds } from "./util";
+import { viewerProps, viewerEmits } from "./props";
+const _hoisted_1 = ["src"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "EleViewer" },
+  __name: "index",
+  props: viewerProps,
+  emits: viewerEmits,
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const viewerRef = ref(null);
+    const bodyRef = ref(null);
+    const contentRef = ref(null);
+    const viewerMoving = ref(false);
+    const viewerTranslateX = ref(0);
+    const viewerTranslateY = ref(0);
+    const viewerScale = ref(100);
+    const viewerFlipX = ref(false);
+    const viewerFlipY = ref(false);
+    const viewerRotate = ref(0);
+    const imageTransform = computed(() => {
+      const sx = viewerFlipX.value ? -1 : 1;
+      const sy = viewerFlipY.value ? -1 : 1;
+      return `scaleX(${sx}) scaleY(${sy}) rotate(${viewerRotate.value}deg)`;
+    });
+    const scaleReverse = computed(() => {
+      return (100 / viewerScale.value).toFixed(6);
+    });
+    const imageTransformReverse = 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 props.zoomStep;
+    };
+    const zoomIn = () => {
+      if (viewerScale.value >= props.zoomMax) {
+        return;
+      }
+      viewerScale.value += getZoomStep();
+    };
+    const zoomOut = () => {
+      if (viewerScale.value <= props.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 - props.rotateStep;
+        return;
+      }
+      if (viewerRotate.value <= props.rotateStep) {
+        viewerRotate.value = 0;
+        return;
+      }
+      viewerRotate.value -= props.rotateStep;
+    };
+    const rotateRight = () => {
+      if (viewerRotate.value >= 360 - props.rotateStep) {
+        viewerRotate.value = 0;
+        return;
+      }
+      viewerRotate.value += props.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 } = 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 } = 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 } = useMousewheel(
+      ({ e, direction }) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (direction === "up") {
+          zoomIn();
+          return;
+        }
+        zoomOut();
+      }
+    );
+    onMounted(() => {
+      viewerRef.value && bindMousewheel(viewerRef.value);
+      autoIntoView();
+    });
+    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 openBlock(), createElementBlock("div", {
+        ref_key: "viewerRef",
+        ref: viewerRef,
+        class: normalizeClass(["ele-viewer"])
+      }, [
+        createElementVNode("div", {
+          ref_key: "bodyRef",
+          ref: bodyRef,
+          class: "ele-viewer-body",
+          style: normalizeStyle({
+            transform: `translate(${viewerTranslateX.value}px, ${viewerTranslateY.value}px)`
+          })
+        }, [
+          createElementVNode("div", {
+            class: "ele-viewer-main",
+            style: normalizeStyle({ transform: `scale(${(viewerScale.value / 100).toFixed(6)})` })
+          }, [
+            createElementVNode("div", {
+              ref_key: "contentRef",
+              ref: contentRef,
+              class: normalizeClass(["ele-viewer-content", { "is-moving": viewerMoving.value }]),
+              style: normalizeStyle([_ctx.contentStyle || {}, { transform: imageTransform.value }]),
+              onMousedown: _cache[0] || (_cache[0] = //@ts-ignore
+              (...args) => unref(handleMousedown) && unref(handleMousedown)(...args)),
+              onTouchstart: _cache[1] || (_cache[1] = //@ts-ignore
+              (...args) => unref(handleTouchstart) && unref(handleTouchstart)(...args)),
+              onClick: handleClick,
+              onContextmenu: handleContextmenu
+            }, [
+              _ctx.src ? (openBlock(), createElementBlock("img", {
+                key: 0,
+                src: _ctx.src,
+                class: "ele-viewer-image",
+                style: normalizeStyle(_ctx.imageStyle),
+                onLoad: handleImgLoad
+              }, null, 44, _hoisted_1)) : (openBlock(), createElementBlock("div", {
+                key: 1,
+                class: "ele-viewer-image",
+                style: normalizeStyle(_ctx.imageStyle)
+              }, [
+                renderSlot(_ctx.$slots, "default")
+              ], 4)),
+              (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.markers, (marker) => {
+                return openBlock(), createElementBlock("div", {
+                  key: marker.key,
+                  style: normalizeStyle({
+                    left: (marker.x || 0) + "px",
+                    top: (marker.y || 0) + "px",
+                    transform: marker.fixed ? `scale(${scaleReverse.value})` : void 0
+                  }),
+                  class: "ele-viewer-marker"
+                }, [
+                  createElementVNode("div", {
+                    class: "ele-viewer-marker-content",
+                    style: normalizeStyle({
+                      transform: marker.fixed ? imageTransformReverse.value : void 0
+                    })
+                  }, [
+                    renderSlot(_ctx.$slots, "markerItem", { item: marker })
+                  ], 4)
+                ], 4);
+              }), 128))
+            ], 38)
+          ], 4)
+        ], 4)
+      ], 512);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};