ele-admin-plus 1.2.1-beta.3 → 1.2.1-beta.5

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

@@ -1,24 +1,30 @@
-import { defineComponent, ref, computed, resolveComponent, openBlock, createElementBlock, createBlock, createSlots, renderList, withCtx, renderSlot, normalizeProps, guardReactiveProps, createElementVNode, normalizeStyle } from "vue";
+import { defineComponent, reactive, ref, shallowRef, computed, watch, onBeforeUnmount, nextTick, resolveComponent, openBlock, createElementBlock, createBlock, createSlots, renderList, withCtx, renderSlot, normalizeProps, guardReactiveProps, createElementVNode, normalizeStyle, mergeProps, createCommentVNode } from "vue";
 import { throttle } from "../utils/core";
 import { useLocale } from "../ele-config-provider/receiver";
+import EleDropdown from "../ele-dropdown/index";
 import FileGrid from "./components/file-grid";
 import FileTable from "./components/file-table";
 import { fileListProps, fileListEmits } from "./props";
 const GRID_ITEM_SEL = ".ele-file-list-body>.ele-file-list-item";
 const _sfc_main = defineComponent({
   name: "EleFileList",
-  components: { FileGrid, FileTable },
+  components: { EleDropdown, FileGrid, FileTable },
   props: fileListProps,
   emits: fileListEmits,
   setup(props, { emit }) {
     const { lang } = useLocale("fileList", props);
-    const selectorStyle = ref({
+    const selectorStyle = reactive({
       top: "0px",
       left: "0px",
       width: "0px",
       height: "0px",
       display: "none"
     });
+    const ctxMenuDropdownRef = ref(null);
+    const ctxMenuDropdownItems = shallowRef([]);
+    const ctxMenuDropdownVirtualRef = ref();
+    const ctxMenuDropdownVisible = ref(false);
+    const contextMenuFileItem = ref(null);
     const isCheckAll = computed(() => {
       return !!(props.data && props.data.length && props.selections && props.selections.length && !props.data.some(
         (d) => {
@@ -97,6 +103,62 @@ const _sfc_main = defineComponent({
     const handleItemContextMenu = (option) => {
       emit("itemContextMenu", option);
     };
+    const handleItemCtxMenuClick = (key) => {
+      if (contextMenuFileItem.value != null) {
+        emit("itemContextMenu", { key, item: contextMenuFileItem.value });
+      }
+    };
+    const handleItemCtxMenuVisible = (visible) => {
+      ctxMenuDropdownVisible.value = visible;
+      if (visible && ctxMenuDropdownRef.value != null && contextMenuFileItem.value != null) {
+        emit(
+          "itemContextOpen",
+          ctxMenuDropdownRef.value,
+          contextMenuFileItem.value
+        );
+      }
+    };
+    const getContextMenus = (item) => {
+      if (typeof props.contextMenus === "function") {
+        return props.contextMenus(item);
+      }
+      return props.contextMenus;
+    };
+    const hideAllDropdown = () => {
+      if (ctxMenuDropdownRef.value) {
+        ctxMenuDropdownRef.value.handleClose();
+      }
+    };
+    const showItemContextMenu = (item, triggerEl) => {
+      if (contextMenuFileItem.value != null && contextMenuFileItem.value === item) {
+        return;
+      }
+      hideAllDropdown();
+      nextTick(() => {
+        contextMenuFileItem.value = item;
+        ctxMenuDropdownItems.value = getContextMenus(item) || [];
+        ctxMenuDropdownVirtualRef.value = triggerEl;
+        if (ctxMenuDropdownItems.value.length) {
+          nextTick(() => {
+            ctxMenuDropdownRef.value && ctxMenuDropdownRef.value.handleOpen();
+          });
+        }
+      });
+    };
+    const handleItemContextOpen = (option) => {
+      if (props.contextMenus == null) {
+        return;
+      }
+      option.e.preventDefault();
+      option.e.stopPropagation();
+      if (ctxMenuDropdownVirtualRef.value !== option.triggerEl) {
+        showItemContextMenu(option.item, option.triggerEl);
+        return;
+      }
+      if (ctxMenuDropdownItems.value.length && ctxMenuDropdownRef.value) {
+        ctxMenuDropdownRef.value.handleOpen();
+      }
+    };
     const handleMousedown = (event) => {
       if (!props.boxChoose || props.selectionType !== "checkbox") {
         return;
@@ -119,13 +181,11 @@ const _sfc_main = defineComponent({
           Math.abs(moveY - downY),
           target.clientHeight - top
         );
-        selectorStyle.value = {
-          left: left + "px",
-          top: top + "px",
-          width: width + "px",
-          height: height + "px",
-          display: "block"
-        };
+        selectorStyle.left = left + "px";
+        selectorStyle.top = top + "px";
+        selectorStyle.width = width + "px";
+        selectorStyle.height = height + "px";
+        selectorStyle.display = "block";
         if (width < 6 || height < 6) {
           items.forEach((item) => {
             item.classList.remove("is-active");
@@ -147,7 +207,7 @@ const _sfc_main = defineComponent({
         });
       }, 60);
       const mouseupFn = (e) => {
-        selectorStyle.value = { ...selectorStyle.value, display: "none" };
+        selectorStyle.display = "none";
         const moveX = Math.max(e.clientX, position.left);
         const moveY = Math.max(e.clientY, position.top);
         const left = Math.min(moveX, downX) - position.left;
@@ -180,9 +240,26 @@ const _sfc_main = defineComponent({
       document.addEventListener("mousemove", mousemoveFn);
       document.addEventListener("mouseup", mouseupFn);
     };
+    watch(
+      [() => props.grid, () => props.data],
+      () => {
+        hideAllDropdown();
+        ctxMenuDropdownVirtualRef.value = null;
+        contextMenuFileItem.value = null;
+      },
+      { deep: true }
+    );
+    onBeforeUnmount(() => {
+      contextMenuFileItem.value = null;
+    });
     return {
       lang,
       selectorStyle,
+      ctxMenuDropdownRef,
+      ctxMenuDropdownItems,
+      ctxMenuDropdownVirtualRef,
+      ctxMenuDropdownVisible,
+      contextMenuFileItem,
       isCheckAll,
       isIndeterminate,
       handleCheckAllChange,
@@ -190,6 +267,9 @@ const _sfc_main = defineComponent({
       handleItemClick,
       handleSortChange,
       handleItemContextMenu,
+      handleItemCtxMenuClick,
+      handleItemCtxMenuVisible,
+      handleItemContextOpen,
       handleMousedown
     };
   }
@@ -204,6 +284,7 @@ const _export_sfc = (sfc, props) => {
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_FileGrid = resolveComponent("FileGrid");
   const _component_FileTable = resolveComponent("FileTable");
+  const _component_EleDropdown = resolveComponent("EleDropdown");
   return openBlock(), createElementBlock("div", {
     class: "ele-file-list-group",
     onMousedown: _cache[0] || (_cache[0] = (...args) => _ctx.handleMousedown && _ctx.handleMousedown(...args))
@@ -219,12 +300,12 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       isIndeterminate: _ctx.isIndeterminate,
       checkAllText: _ctx.lang.selectAll,
       selectedText: _ctx.lang.selectTips,
-      contextMenus: _ctx.contextMenus,
-      contextMenuProps: _ctx.contextMenuProps,
+      ctxMenuDropdownVisible: _ctx.ctxMenuDropdownVisible,
+      contextMenuFileItem: _ctx.contextMenuFileItem,
       onCheckAllChange: _ctx.handleCheckAllChange,
       onItemClick: _ctx.handleItemClick,
       onItemCheckChange: _ctx.handleItemCheckChange,
-      onItemContextMenu: _ctx.handleItemContextMenu
+      onItemContextOpen: _ctx.handleItemContextOpen
     }, createSlots({ _: 2 }, [
       renderList(Object.keys(_ctx.$slots), (name) => {
         return {
@@ -234,7 +315,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           ])
         };
       })
-    ]), 1032, ["data", "icons", "selectionType", "selections", "current", "isCheckAll", "isIndeterminate", "checkAllText", "selectedText", "contextMenus", "contextMenuProps", "onCheckAllChange", "onItemClick", "onItemCheckChange", "onItemContextMenu"])) : (openBlock(), createBlock(_component_FileTable, {
+    ]), 1032, ["data", "icons", "selectionType", "selections", "current", "isCheckAll", "isIndeterminate", "checkAllText", "selectedText", "ctxMenuDropdownVisible", "contextMenuFileItem", "onCheckAllChange", "onItemClick", "onItemCheckChange", "onItemContextOpen"])) : (openBlock(), createBlock(_component_FileTable, {
       key: 1,
       data: _ctx.data,
       icons: _ctx.icons,
@@ -250,12 +331,12 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       sort: _ctx.sort,
       order: _ctx.order,
       columns: _ctx.columns,
-      contextMenus: _ctx.contextMenus,
-      contextMenuProps: _ctx.contextMenuProps,
+      ctxMenuDropdownVisible: _ctx.ctxMenuDropdownVisible,
+      contextMenuFileItem: _ctx.contextMenuFileItem,
       onCheckAllChange: _ctx.handleCheckAllChange,
       onItemClick: _ctx.handleItemClick,
       onItemCheckChange: _ctx.handleItemCheckChange,
-      onItemContextMenu: _ctx.handleItemContextMenu,
+      onItemContextOpen: _ctx.handleItemContextOpen,
       onSortChange: _ctx.handleSortChange
     }, createSlots({ _: 2 }, [
       renderList(Object.keys(_ctx.$slots), (name) => {
@@ -266,11 +347,28 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           ])
         };
       })
-    ]), 1032, ["data", "icons", "selectionType", "selections", "current", "isCheckAll", "isIndeterminate", "nameText", "sizeText", "timeText", "sortable", "sort", "order", "columns", "contextMenus", "contextMenuProps", "onCheckAllChange", "onItemClick", "onItemCheckChange", "onItemContextMenu", "onSortChange"])),
+    ]), 1032, ["data", "icons", "selectionType", "selections", "current", "isCheckAll", "isIndeterminate", "nameText", "sizeText", "timeText", "sortable", "sort", "order", "columns", "ctxMenuDropdownVisible", "contextMenuFileItem", "onCheckAllChange", "onItemClick", "onItemCheckChange", "onItemContextOpen", "onSortChange"])),
     createElementVNode("div", {
       class: "ele-file-list-selector",
       style: normalizeStyle(_ctx.selectorStyle)
-    }, null, 4)
+    }, null, 4),
+    _ctx.contextMenus ? (openBlock(), createBlock(_component_EleDropdown, mergeProps({
+      key: 2,
+      persistent: false,
+      placement: "bottom-start",
+      popperClass: "ele-file-list-item-context"
+    }, _ctx.contextMenuProps || {}, {
+      ref: "ctxMenuDropdownRef",
+      componentType: "pro",
+      preventContextmenu: true,
+      trigger: "click",
+      virtualTriggering: true,
+      virtualRef: _ctx.ctxMenuDropdownVirtualRef,
+      disabled: !_ctx.ctxMenuDropdownItems.length,
+      items: _ctx.ctxMenuDropdownItems,
+      onCommand: _ctx.handleItemCtxMenuClick,
+      onVisibleChange: _ctx.handleItemCtxMenuVisible
+    }), null, 16, ["virtualRef", "disabled", "items", "onCommand", "onVisibleChange"])) : createCommentVNode("", true)
   ], 32);
 }
 const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);

package/es/ele-file-list/props.d.ts

@@ -1,5 +1,5 @@
 import { PropType, ExtractPropTypes } from 'vue';
-import { EleDropdownProps } from '../ele-app/plus';
+import { EleDropdownProps, EleDropdownInstance } from '../ele-app/plus';
 import { default as FileGridItem } from './components/file-grid-item';
 import { default as FileTableItem } from './components/file-table-item';
 import { IconItem, FileItem, SortValue, ItemContextMenuOption, ColumnItem, SelectionType, ContextMenus, FileListLocale } from './types';
@@ -36,10 +36,7 @@ export declare const fileListProps: {
         default: () => IconItem[];
     };
     /** 表格模式后缀对应图标 */
-    smallIcons: {
-        type: PropType<IconItem[]>;
-        default: () => IconItem[];
-    };
+    smallIcons: PropType<IconItem[]>;
     /** 表格模式自定义列配置 */
     columns: PropType<ColumnItem[]>;
     /** 多选时是否支持鼠标框选 */
@@ -66,6 +63,8 @@ export declare const fileListEmits: {
     'update:current': (_current?: FileItem | null) => boolean;
     /** item 右键菜单项点击事件 */
     itemContextMenu: (_option: ItemContextMenuOption) => boolean;
+    /** item 右键菜单打开事件 */
+    itemContextOpen: (_dropdownRef: EleDropdownInstance, _item: FileItem) => boolean;
 };
 /**
  * 网格 item 实例

package/es/ele-file-list/props.js

@@ -1,4 +1,4 @@
-import { icons, smallIcons } from "./icons";
+import { icons } from "./icons";
 const fileListProps = {
   /** 数据 */
   data: {
@@ -30,12 +30,7 @@ const fileListProps = {
     }
   },
   /** 表格模式后缀对应图标 */
-  smallIcons: {
-    type: Array,
-    default: () => {
-      return smallIcons;
-    }
-  },
+  smallIcons: Array,
   /** 表格模式自定义列配置 */
   columns: Array,
   /** 多选时是否支持鼠标框选 */
@@ -57,7 +52,9 @@ const fileListEmits = {
   /** 更新单选选中数据 */
   "update:current": (_current) => true,
   /** item 右键菜单项点击事件 */
-  itemContextMenu: (_option) => true
+  itemContextMenu: (_option) => true,
+  /** item 右键菜单打开事件 */
+  itemContextOpen: (_dropdownRef, _item) => true
 };
 export {
   fileListEmits,

package/es/ele-file-list/style/index.scss

@@ -131,10 +131,12 @@
   .ele-file-list-body {
     padding-top: eleVar('file', 'item-space');
     padding-left: eleVar('file', 'item-space');
+    box-sizing: border-box;
   }
 
   /*  item */
   .ele-file-list-item {
+    flex-shrink: 0;
     width: eleVar('file', 'item-width');
     margin-right: eleVar('file', 'item-space');
     margin-bottom: eleVar('file', 'item-space');
@@ -171,7 +173,7 @@
         width: eleVar('file', 'image-size');
         height: eleVar('file', 'image-size');
         border-radius: eleVar('file', 'image-radius');
-        object-fit: cover;
+        object-fit: contain;
       }
     }
 
@@ -332,7 +334,7 @@
 
       & > .ele-file-list-item-image {
         border-radius: eleVar('file', 'td-image-radius');
-        object-fit: cover;
+        object-fit: contain;
       }
     }
 
@@ -393,10 +395,13 @@
     .ele-file-list-item-name,
     .ele-file-list-item-cell {
       transition: color $transition-base;
-      cursor: pointer;
 
-      &:hover {
-        color: elVar('color-primary');
+      &.is-sortable {
+        cursor: pointer;
+
+        &:hover {
+          color: elVar('color-primary');
+        }
       }
     }
   }

package/es/ele-file-list/types.d.ts

@@ -23,7 +23,7 @@ export type IconItemType = 'file' | 'dir';
  */
 export interface FileItem extends Record<string | number | symbol, unknown> {
   /** 唯一标识 */
-  key: string;
+  key: string | number;
   /** 文件名称 */
   name: string;
   /** 文件访问地址 */
@@ -93,6 +93,18 @@ export type ContextMenusFunc = (item: FileItem) => DropdownItem[];
  */
 export type ContextMenus = DropdownItem[] | ContextMenusFunc;
 
+/**
+ * 右键菜单打开参数
+ */
+export interface ContextOpenOption {
+  /** 数据 */
+  item: FileItem;
+  /** 触发节点 */
+  triggerEl: HTMLElement;
+  /** 事件对象 */
+  e: MouseEvent;
+}
+
 /**
  * 国际化
  */

package/es/ele-icon-select/components/icon-grid.d.ts

@@ -56,7 +56,7 @@ declare const _default: import('vue').DefineComponent<{
 }>> & {
     onSelect?: ((_icon: string) => any) | undefined;
 }, {
-    popperVisible: boolean;
     tooltip: boolean;
+    popperVisible: boolean;
 }, {}>;
 export default _default;

package/es/ele-icon-select/index.d.ts

@@ -158,8 +158,8 @@ declare const _default: import('vue').DefineComponent<{
         default: null;
     };
 }>> & {
-    onChange?: ((_value?: string | null | undefined) => any) | undefined;
     "onUpdate:modelValue"?: ((_value?: string | null | undefined) => any) | undefined;
+    onChange?: ((_value?: string | null | undefined) => any) | undefined;
     onFocus?: ((_e: FocusEvent) => any) | undefined;
     onBlur?: ((_e: FocusEvent) => any) | undefined;
     onClear?: (() => any) | undefined;
@@ -169,9 +169,9 @@ declare const _default: import('vue').DefineComponent<{
     teleported: boolean;
     clearable: boolean;
     disabled: boolean;
+    persistent: boolean;
     tooltip: boolean;
     transition: string;
-    persistent: boolean;
     responsive: boolean;
     automaticDropdown: boolean;
     popperWidth: string | number;

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

@@ -0,0 +1,120 @@
+import { ElImageViewerInstance } from '../ele-app/el';
+
+declare const _default: import('vue').DefineComponent<{
+    teleported: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    modelValue: BooleanConstructor;
+    customClass: StringConstructor;
+    customStyle: ObjectConstructor;
+    transitionName: {
+        type: StringConstructor;
+        default: string;
+    };
+    keepAlive: BooleanConstructor;
+    urlList: import('element-plus/es/utils/index').EpPropFinalized<(new (...args: any[]) => string[]) | (() => string[]) | ((new (...args: any[]) => string[]) | (() => string[]))[], unknown, unknown, () => [], boolean>;
+    zIndex: {
+        readonly type: import('vue').PropType<number>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    initialIndex: import('element-plus/es/utils/index').EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
+    infinite: import('element-plus/es/utils/index').EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+    hideOnClickModal: BooleanConstructor;
+    closeOnPressEscape: import('element-plus/es/utils/index').EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+    zoomRate: import('element-plus/es/utils/index').EpPropFinalized<NumberConstructor, unknown, unknown, 1.2, boolean>;
+    minScale: import('element-plus/es/utils/index').EpPropFinalized<NumberConstructor, unknown, unknown, 0.2, boolean>;
+    maxScale: import('element-plus/es/utils/index').EpPropFinalized<NumberConstructor, unknown, unknown, 7, boolean>;
+    crossorigin: {
+        readonly type: import('vue').PropType<import('element-plus/es/utils/index').EpPropMergeType<(new (...args: any[]) => ("" | "anonymous" | "use-credentials") & {}) | (() => "" | "anonymous" | "use-credentials") | ((new (...args: any[]) => ("" | "anonymous" | "use-credentials") & {}) | (() => "" | "anonymous" | "use-credentials"))[], unknown, unknown>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+}, {
+    imageViewerRef: import('vue').Ref<ElImageViewerInstance>;
+    viewerProps: import('vue').ComputedRef<import('../ele-app/types').Mutable<Omit<import('@vue/shared').LooseRequired<{
+        readonly modelValue: boolean;
+        readonly teleported: boolean;
+        readonly closeOnPressEscape: import('element-plus/es/utils/index').EpPropMergeType<BooleanConstructor, unknown, unknown>;
+        readonly hideOnClickModal: boolean;
+        readonly initialIndex: number;
+        readonly infinite: import('element-plus/es/utils/index').EpPropMergeType<BooleanConstructor, unknown, unknown>;
+        readonly zoomRate: number;
+        readonly minScale: number;
+        readonly maxScale: number;
+        readonly urlList: string[];
+        readonly transitionName: string;
+        readonly keepAlive: boolean;
+        readonly zIndex?: number | undefined;
+        readonly crossorigin?: import('element-plus/es/utils/index').EpPropMergeType<(new (...args: any[]) => ("" | "anonymous" | "use-credentials") & {}) | (() => "" | "anonymous" | "use-credentials") | ((new (...args: any[]) => ("" | "anonymous" | "use-credentials") & {}) | (() => "" | "anonymous" | "use-credentials"))[], unknown, unknown> | undefined;
+        readonly customClass?: string | undefined;
+        readonly customStyle?: Record<string, any> | undefined;
+        readonly "onUpdate:modelValue"?: ((_value?: boolean | undefined) => any) | undefined;
+        readonly onClose?: (() => any) | undefined;
+        readonly onSwitch?: ((_index: number) => any) | undefined;
+        readonly onRotate?: ((_deg: number) => any) | undefined;
+    } & {}>, "modelValue" | "customClass" | "customStyle" | "transitionName" | "keepAlive">>>;
+    handleClose: () => void;
+    handleSwitch: (index: number) => void;
+    handleRotate: (deg: number) => void;
+}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    'update:modelValue': (_value?: boolean) => boolean;
+    close: () => boolean;
+    switch: (_index: number) => boolean;
+    rotate: (_deg: number) => boolean;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    teleported: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    modelValue: BooleanConstructor;
+    customClass: StringConstructor;
+    customStyle: ObjectConstructor;
+    transitionName: {
+        type: StringConstructor;
+        default: string;
+    };
+    keepAlive: BooleanConstructor;
+    urlList: import('element-plus/es/utils/index').EpPropFinalized<(new (...args: any[]) => string[]) | (() => string[]) | ((new (...args: any[]) => string[]) | (() => string[]))[], unknown, unknown, () => [], boolean>;
+    zIndex: {
+        readonly type: import('vue').PropType<number>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    initialIndex: import('element-plus/es/utils/index').EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
+    infinite: import('element-plus/es/utils/index').EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+    hideOnClickModal: BooleanConstructor;
+    closeOnPressEscape: import('element-plus/es/utils/index').EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+    zoomRate: import('element-plus/es/utils/index').EpPropFinalized<NumberConstructor, unknown, unknown, 1.2, boolean>;
+    minScale: import('element-plus/es/utils/index').EpPropFinalized<NumberConstructor, unknown, unknown, 0.2, boolean>;
+    maxScale: import('element-plus/es/utils/index').EpPropFinalized<NumberConstructor, unknown, unknown, 7, boolean>;
+    crossorigin: {
+        readonly type: import('vue').PropType<import('element-plus/es/utils/index').EpPropMergeType<(new (...args: any[]) => ("" | "anonymous" | "use-credentials") & {}) | (() => "" | "anonymous" | "use-credentials") | ((new (...args: any[]) => ("" | "anonymous" | "use-credentials") & {}) | (() => "" | "anonymous" | "use-credentials"))[], unknown, unknown>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+}>> & {
+    "onUpdate:modelValue"?: ((_value?: boolean | undefined) => any) | undefined;
+    onClose?: (() => any) | undefined;
+    onSwitch?: ((_index: number) => any) | undefined;
+    onRotate?: ((_deg: number) => any) | undefined;
+}, {
+    modelValue: boolean;
+    teleported: boolean;
+    closeOnPressEscape: import('element-plus/es/utils/index').EpPropMergeType<BooleanConstructor, unknown, unknown>;
+    hideOnClickModal: boolean;
+    initialIndex: number;
+    infinite: import('element-plus/es/utils/index').EpPropMergeType<BooleanConstructor, unknown, unknown>;
+    zoomRate: number;
+    minScale: number;
+    maxScale: number;
+    urlList: string[];
+    transitionName: string;
+    keepAlive: boolean;
+}, {}>;
+export default _default;

package/es/ele-image-viewer/index.js

@@ -0,0 +1,88 @@
+import { defineComponent, ref, computed, onDeactivated, resolveComponent, openBlock, createBlock, Teleport, createVNode, Transition, withCtx, createElementBlock, normalizeClass, normalizeStyle, mergeProps, renderSlot, createCommentVNode } from "vue";
+import { ElImageViewer } from "element-plus";
+import { omit } from "../utils/core";
+import { imageViewerProps, imageViewerEmits } from "./props";
+const _sfc_main = defineComponent({
+  name: "EleImageViewer",
+  components: { ElImageViewer },
+  props: imageViewerProps,
+  emits: imageViewerEmits,
+  setup(props, { emit }) {
+    const imageViewerRef = ref(null);
+    const viewerProps = computed(() => {
+      const options = omit(props, [
+        "modelValue",
+        "customClass",
+        "customStyle",
+        "transitionName",
+        "keepAlive"
+      ]);
+      options.teleported = false;
+      return options;
+    });
+    const handleClose = () => {
+      emit("update:modelValue", false);
+      emit("close");
+    };
+    const handleSwitch = (index2) => {
+      emit("switch", index2);
+    };
+    const handleRotate = (deg) => {
+      emit("rotate", deg);
+    };
+    onDeactivated(() => {
+      handleClose();
+    });
+    return {
+      imageViewerRef,
+      viewerProps,
+      handleClose,
+      handleSwitch,
+      handleRotate
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ElImageViewer = resolveComponent("ElImageViewer");
+  return openBlock(), createBlock(Teleport, {
+    to: "body",
+    disabled: !_ctx.teleported
+  }, [
+    createVNode(Transition, {
+      name: _ctx.transitionName,
+      appear: true
+    }, {
+      default: withCtx(() => [
+        _ctx.modelValue ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          class: normalizeClass(["ele-image-viewer", _ctx.customClass]),
+          style: normalizeStyle(_ctx.customStyle)
+        }, [
+          createVNode(_component_ElImageViewer, mergeProps(_ctx.viewerProps, {
+            ref: "imageViewerRef",
+            onClose: _ctx.handleClose,
+            onSwitch: _ctx.handleSwitch,
+            onRotate: _ctx.handleRotate
+          }), {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "default")
+            ]),
+            _: 3
+          }, 16, ["onClose", "onSwitch", "onRotate"])
+        ], 6)) : createCommentVNode("", true)
+      ]),
+      _: 3
+    }, 8, ["name"])
+  ], 8, ["disabled"]);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  index as default
+};

package/es/ele-image-viewer/props.d.ts

@@ -0,0 +1,58 @@
+import { ExtractPropTypes } from 'vue';
+
+/**
+ * 属性
+ */
+export declare const imageViewerProps: {
+    teleported: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 是否打开 */
+    modelValue: BooleanConstructor;
+    /** 自定义类名 */
+    customClass: StringConstructor;
+    /** 自定义样式 */
+    customStyle: ObjectConstructor;
+    /** 过渡动画名称 */
+    transitionName: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** 是否失活后仍然显示 */
+    keepAlive: BooleanConstructor;
+    urlList: import('element-plus/es/utils/index').EpPropFinalized<(new (...args: any[]) => string[]) | (() => string[]) | ((new (...args: any[]) => string[]) | (() => string[]))[], unknown, unknown, () => [], boolean>;
+    zIndex: {
+        readonly type: import('vue').PropType<number>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    initialIndex: import('element-plus/es/utils/index').EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
+    infinite: import('element-plus/es/utils/index').EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+    hideOnClickModal: BooleanConstructor;
+    closeOnPressEscape: import('element-plus/es/utils/index').EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
+    zoomRate: import('element-plus/es/utils/index').EpPropFinalized<NumberConstructor, unknown, unknown, 1.2, boolean>;
+    minScale: import('element-plus/es/utils/index').EpPropFinalized<NumberConstructor, unknown, unknown, 0.2, boolean>;
+    maxScale: import('element-plus/es/utils/index').EpPropFinalized<NumberConstructor, unknown, unknown, 7, boolean>;
+    crossorigin: {
+        readonly type: import('vue').PropType<import('element-plus/es/utils/index').EpPropMergeType<(new (...args: any[]) => ("" | "anonymous" | "use-credentials") & {}) | (() => "" | "anonymous" | "use-credentials") | ((new (...args: any[]) => ("" | "anonymous" | "use-credentials") & {}) | (() => "" | "anonymous" | "use-credentials"))[], unknown, unknown>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+};
+export type ImageViewerProps = ExtractPropTypes<typeof imageViewerProps>;
+/**
+ * 事件
+ */
+export declare const imageViewerEmits: {
+    /** 更新打开状态 */
+    'update:modelValue': (_value?: boolean) => boolean;
+    /** 关闭事件 */
+    close: () => boolean;
+    /** 切换图像事件 */
+    switch: (_index: number) => boolean;
+    /** 旋转图像事件 */
+    rotate: (_deg: number) => boolean;
+};