element-pe 1.0.5 → 1.0.6

package/es/components/drawer/index.d.ts

@@ -88,9 +88,9 @@ declare const _Drawer: SFCWithInstall<import("vue").DefineComponent<{
     title: string;
     center: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     appendToBody: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
-    modelValue: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
-    size: string | number;
     direction: "ltr" | "rtl" | "ttb" | "btt";
+    size: string | number;
+    modelValue: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     showClose: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     destroyOnClose: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     customClass: string;
@@ -123,8 +123,8 @@ declare const _Drawer: SFCWithInstall<import("vue").DefineComponent<{
     title: string;
     center: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     appendToBody: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
-    size: string | number;
     direction: "ltr" | "rtl" | "ttb" | "btt";
+    size: string | number;
     showClose: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     beforeClose: (...args: any[]) => void;
     destroyOnClose: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
@@ -229,9 +229,9 @@ export declare const ElDrawer: SFCWithInstall<import("vue").DefineComponent<{
     title: string;
     center: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     appendToBody: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
-    modelValue: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
-    size: string | number;
     direction: "ltr" | "rtl" | "ttb" | "btt";
+    size: string | number;
+    modelValue: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     showClose: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     destroyOnClose: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     customClass: string;
@@ -264,8 +264,8 @@ export declare const ElDrawer: SFCWithInstall<import("vue").DefineComponent<{
     title: string;
     center: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     appendToBody: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
-    size: string | number;
     direction: "ltr" | "rtl" | "ttb" | "btt";
+    size: string | number;
     showClose: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     beforeClose: (...args: any[]) => void;
     destroyOnClose: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;

package/es/components/drawer/src/index.vue.d.ts

@@ -89,9 +89,9 @@ declare const _default: import("vue").DefineComponent<{
     title: string;
     center: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     appendToBody: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
-    modelValue: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
-    size: string | number;
     direction: DrawerDirection;
+    size: string | number;
+    modelValue: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     showClose: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     destroyOnClose: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     customClass: string;
@@ -124,8 +124,8 @@ declare const _default: import("vue").DefineComponent<{
     title: string;
     center: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     appendToBody: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
-    size: string | number;
     direction: DrawerDirection;
+    size: string | number;
     showClose: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     beforeClose: (...args: any[]) => void;
     destroyOnClose: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;

package/es/components/dropdown/index.d.ts

@@ -87,9 +87,9 @@ export declare const ElDropdown: import("../../utils/types").SFCWithInstall<impo
     popperClass: string;
     showArrow: boolean;
     trigger: import("../../hooks/use-popper/use-target-events").TriggerType | "contextmenu";
+    maxHeight: string | number;
     size: string;
     tabindex: string | number;
-    maxHeight: string | number;
     splitButton: boolean;
     hideOnClick: boolean;
     showTimeout: number;
@@ -109,9 +109,9 @@ export declare const ElDropdown: import("../../utils/types").SFCWithInstall<impo
     popperClass: string;
     showArrow: boolean;
     trigger: import("../../hooks/use-popper/use-target-events").TriggerType | "contextmenu";
+    maxHeight: string | number;
     size: string;
     tabindex: string | number;
-    maxHeight: string | number;
     splitButton: boolean;
     hideOnClick: boolean;
     showTimeout: number;

package/es/components/dropdown/src/dropdown.vue.d.ts

@@ -92,9 +92,9 @@ declare const _default: import("vue").DefineComponent<{
     popperClass: string;
     showArrow: boolean;
     trigger: TriggerType | "contextmenu";
+    maxHeight: string | number;
     size: string;
     tabindex: string | number;
-    maxHeight: string | number;
     splitButton: boolean;
     hideOnClick: boolean;
     showTimeout: number;
@@ -114,9 +114,9 @@ declare const _default: import("vue").DefineComponent<{
     popperClass: string;
     showArrow: boolean;
     trigger: TriggerType | "contextmenu";
+    maxHeight: string | number;
     size: string;
     tabindex: string | number;
-    maxHeight: string | number;
     splitButton: boolean;
     hideOnClick: boolean;
     showTimeout: number;

package/es/components/form/index.js

@@ -386,7 +386,7 @@ var script = defineComponent({
       const ret = {};
       if (elForm.labelPosition === "top")
         return ret;
-      const labelWidth = addUnit(props.labelWidth) || addUnit(elForm.labelWidth);
+      const labelWidth = addUnit(props.labelWidth || elForm.labelWidth);
       if (labelWidth) {
         ret.width = labelWidth;
       }
@@ -400,7 +400,7 @@ var script = defineComponent({
       if (!props.label && !props.labelWidth && isNested.value) {
         return ret;
       }
-      const labelWidth = addUnit(props.labelWidth) || addUnit(elForm.labelWidth);
+      const labelWidth = addUnit(props.labelWidth || elForm.labelWidth);
       if (!props.label && !slots.label) {
         ret.marginLeft = labelWidth;
       }

package/es/components/icon/index.d.ts

@@ -11,8 +11,8 @@ export declare const ElIcon: import("../../utils/types").SFCWithInstall<import("
     readonly size?: unknown;
     readonly color?: unknown;
 } & {} & {
-    size?: number | undefined;
     color?: string | undefined;
+    size?: number | undefined;
 }>, {}>> & Record<string, any>;
 export default ElIcon;
 export * from './src/icon';

package/es/components/icon/src/icon.vue.d.ts

@@ -12,7 +12,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly size?: unknown;
     readonly color?: unknown;
 } & {} & {
-    size?: number | undefined;
     color?: string | undefined;
+    size?: number | undefined;
 }>, {}>;
 export default _default;

package/es/components/image/index.d.ts

@@ -20,11 +20,11 @@ export declare const ElImage: import("../../utils/types").SFCWithInstall<import(
     container: import("vue").Ref<HTMLElement | undefined>;
     clickHandler: () => void;
     closeViewer: () => void;
-    switchViewer: (val: boolean) => void;
+    switchViewer: (val: number) => void;
     t: (...args: any[]) => string;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     error: (evt: Event) => boolean;
-    switch: (val: boolean) => boolean;
+    switch: (val: number) => boolean;
     close: () => boolean;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     readonly appendToBody?: unknown;
@@ -50,7 +50,7 @@ export declare const ElImage: import("../../utils/types").SFCWithInstall<import(
 }> & {
     onClose?: (() => any) | undefined;
     onError?: ((evt: Event) => any) | undefined;
-    onSwitch?: ((val: boolean) => any) | undefined;
+    onSwitch?: ((val: number) => any) | undefined;
 }, {
     zIndex: number;
     appendToBody: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;

package/es/components/image/index.js

@@ -7,8 +7,7 @@ import ImageViewer from 'element-pe/es/components/image-viewer';
 import isServer from 'element-pe/es/utils/isServer';
 import { getScrollContainer, isInContainer } from 'element-pe/es/utils/dom';
 import { buildProps, definePropType, mutable } from 'element-pe/es/utils/props';
-
-const isBoolean = (val) => typeof val === 'boolean';
+import { isNumber } from 'element-pe/es/utils/util';
 
 const imageProps = buildProps({
   appendToBody: {
@@ -47,7 +46,7 @@ const imageProps = buildProps({
 });
 const imageEmits = {
   error: (evt) => evt instanceof Event,
-  switch: (val) => isBoolean(val),
+  switch: (val) => isNumber(val),
   close: () => true
 };
 

package/es/components/image/src/image.d.ts

@@ -13,7 +13,7 @@ export declare const imageProps: {
 export declare type ImageProps = ExtractPropTypes<typeof imageProps>;
 export declare const imageEmits: {
     error: (evt: Event) => boolean;
-    switch: (val: boolean) => boolean;
+    switch: (val: number) => boolean;
     close: () => boolean;
 };
 export declare type ImageEmits = typeof imageEmits;

package/es/components/image/src/image.vue.d.ts

@@ -21,11 +21,11 @@ declare const _default: import("vue").DefineComponent<{
     container: import("vue").Ref<HTMLElement | undefined>;
     clickHandler: () => void;
     closeViewer: () => void;
-    switchViewer: (val: boolean) => void;
+    switchViewer: (val: number) => void;
     t: (...args: any[]) => string;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     error: (evt: Event) => boolean;
-    switch: (val: boolean) => boolean;
+    switch: (val: number) => boolean;
     close: () => boolean;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
     readonly appendToBody?: unknown;
@@ -51,7 +51,7 @@ declare const _default: import("vue").DefineComponent<{
 }> & {
     onClose?: (() => any) | undefined;
     onError?: ((evt: Event) => any) | undefined;
-    onSwitch?: ((val: boolean) => any) | undefined;
+    onSwitch?: ((val: number) => any) | undefined;
 }, {
     zIndex: number;
     appendToBody: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;

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

@@ -1,29 +1,13 @@
-import type { SFCWithInstall } from 'element-pe/es/utils/types';
-declare const _ImageViewer: SFCWithInstall<import("vue").DefineComponent<{
-    urlList: {
-        type: import("vue").PropType<string[]>;
-        default: () => never[];
-    };
-    zIndex: {
-        type: NumberConstructor;
-        default: number;
-    };
-    initialIndex: {
-        type: NumberConstructor;
-        default: number;
-    };
-    infinite: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    hideOnClickModal: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
+export declare const ElImageViewer: import("../../utils/types").SFCWithInstall<import("vue").DefineComponent<{
+    readonly urlList: import("../../utils/props").BuildPropReturn<import("../../utils/props").PropWrapper<string[]>, () => [], unknown, unknown, unknown>;
+    readonly zIndex: import("../../utils/props").BuildPropReturn<NumberConstructor, 2000, unknown, unknown, unknown>;
+    readonly initialIndex: import("../../utils/props").BuildPropReturn<NumberConstructor, 0, unknown, unknown, unknown>;
+    readonly infinite: import("../../utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
+    readonly hideOnClickModal: import("../../utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
 }, {
     index: import("vue").Ref<number>;
-    wrapper: import("vue").Ref<null>;
-    img: import("vue").Ref<null>;
+    wrapper: import("vue").Ref<HTMLDivElement | undefined>;
+    img: import("vue").Ref<HTMLImageElement | undefined>;
     isSingle: import("vue").ComputedRef<boolean>;
     isFirst: import("vue").ComputedRef<boolean>;
     isLast: import("vue").ComputedRef<boolean>;
@@ -33,98 +17,38 @@ declare const _ImageViewer: SFCWithInstall<import("vue").DefineComponent<{
         name: string;
         icon: string;
     }>;
-    handleActions: (action: import("./src/index.vue").ImageViewerAction, options?: {}) => void;
+    handleActions: (action: import("./src/image-viewer.vue").ImageViewerAction, options?: {}) => void;
     prev: () => void;
     next: () => void;
     hide: () => void;
     toggleMode: () => void;
     handleImgLoad: () => void;
-    handleImgError: (e: any) => void;
+    handleImgError: (e: Event) => void;
     handleMouseDown: (e: MouseEvent) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "switch")[], "close" | "switch", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    urlList?: unknown;
-    zIndex?: unknown;
-    initialIndex?: unknown;
-    infinite?: unknown;
-    hideOnClickModal?: unknown;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => boolean;
+    switch: (index: number) => boolean;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
+    readonly urlList?: unknown;
+    readonly zIndex?: unknown;
+    readonly initialIndex?: unknown;
+    readonly infinite?: unknown;
+    readonly hideOnClickModal?: unknown;
 } & {
     zIndex: number;
-    infinite: boolean;
+    infinite: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     initialIndex: number;
     urlList: string[];
-    hideOnClickModal: boolean;
+    hideOnClickModal: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
 } & {}> & {
-    onClose?: ((...args: any[]) => any) | undefined;
-    onSwitch?: ((...args: any[]) => any) | undefined;
+    onClose?: (() => any) | undefined;
+    onSwitch?: ((index: number) => any) | undefined;
 }, {
     zIndex: number;
-    infinite: boolean;
+    infinite: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     initialIndex: number;
     urlList: string[];
-    hideOnClickModal: boolean;
-}>>;
-export default _ImageViewer;
-export declare const ElImageViewer: SFCWithInstall<import("vue").DefineComponent<{
-    urlList: {
-        type: import("vue").PropType<string[]>;
-        default: () => never[];
-    };
-    zIndex: {
-        type: NumberConstructor;
-        default: number;
-    };
-    initialIndex: {
-        type: NumberConstructor;
-        default: number;
-    };
-    infinite: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    hideOnClickModal: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-}, {
-    index: import("vue").Ref<number>;
-    wrapper: import("vue").Ref<null>;
-    img: import("vue").Ref<null>;
-    isSingle: import("vue").ComputedRef<boolean>;
-    isFirst: import("vue").ComputedRef<boolean>;
-    isLast: import("vue").ComputedRef<boolean>;
-    currentImg: import("vue").ComputedRef<string>;
-    imgStyle: import("vue").ComputedRef<import("vue").CSSProperties>;
-    mode: import("vue").Ref<{
-        name: string;
-        icon: string;
-    }>;
-    handleActions: (action: import("./src/index.vue").ImageViewerAction, options?: {}) => void;
-    prev: () => void;
-    next: () => void;
-    hide: () => void;
-    toggleMode: () => void;
-    handleImgLoad: () => void;
-    handleImgError: (e: any) => void;
-    handleMouseDown: (e: MouseEvent) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("close" | "switch")[], "close" | "switch", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    urlList?: unknown;
-    zIndex?: unknown;
-    initialIndex?: unknown;
-    infinite?: unknown;
-    hideOnClickModal?: unknown;
-} & {
-    zIndex: number;
-    infinite: boolean;
-    initialIndex: number;
-    urlList: string[];
-    hideOnClickModal: boolean;
-} & {}> & {
-    onClose?: ((...args: any[]) => any) | undefined;
-    onSwitch?: ((...args: any[]) => any) | undefined;
-}, {
-    zIndex: number;
-    infinite: boolean;
-    initialIndex: number;
-    urlList: string[];
-    hideOnClickModal: boolean;
-}>>;
+    hideOnClickModal: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
+}>> & Record<string, any>;
+export default ElImageViewer;
+export * from './src/image-viewer';

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

@@ -1,8 +1,37 @@
-import { defineComponent, ref, computed, watch, nextTick, onMounted, openBlock, createBlock, Transition, withCtx, createElementVNode, normalizeStyle, withModifiers, createCommentVNode, createElementBlock, Fragment, normalizeClass, renderList, withDirectives, vShow, renderSlot } from 'vue';
+import { withInstall } from 'element-pe/es/utils/with-install';
+import { defineComponent, ref, effectScope, computed, watch, nextTick, onMounted, openBlock, createBlock, Transition, withCtx, createElementVNode, normalizeStyle, withModifiers, createCommentVNode, createElementBlock, Fragment, normalizeClass, renderList, withDirectives, vShow, renderSlot } from 'vue';
+import { useEventListener } from '@vueuse/core';
 import { useLocaleInject } from 'element-pe/es/hooks';
 import { EVENT_CODE } from 'element-pe/es/utils/aria';
-import { on, off } from 'element-pe/es/utils/dom';
 import { isFirefox, rafThrottle } from 'element-pe/es/utils/util';
+import { buildProps, definePropType, mutable } from 'element-pe/es/utils/props';
+
+const imageViewerProps = buildProps({
+  urlList: {
+    type: definePropType(Array),
+    default: () => mutable([])
+  },
+  zIndex: {
+    type: Number,
+    default: 2e3
+  },
+  initialIndex: {
+    type: Number,
+    default: 0
+  },
+  infinite: {
+    type: Boolean,
+    default: true
+  },
+  hideOnClickModal: {
+    type: Boolean,
+    default: false
+  }
+});
+const imageViewerEmits = {
+  close: () => true,
+  switch: (index) => typeof index === "number"
+};
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -34,42 +63,17 @@ const Mode = {
   }
 };
 const mousewheelEventName = isFirefox() ? "DOMMouseScroll" : "mousewheel";
-const CLOSE_EVENT = "close";
-const SWITCH_EVENT = "switch";
 var script = defineComponent({
   name: "ElImageViewer",
-  props: {
-    urlList: {
-      type: Array,
-      default: () => []
-    },
-    zIndex: {
-      type: Number,
-      default: 2e3
-    },
-    initialIndex: {
-      type: Number,
-      default: 0
-    },
-    infinite: {
-      type: Boolean,
-      default: true
-    },
-    hideOnClickModal: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: [CLOSE_EVENT, SWITCH_EVENT],
+  props: imageViewerProps,
+  emits: imageViewerEmits,
   setup(props, { emit }) {
     const { t } = useLocaleInject();
-    let _keyDownHandler = null;
-    let _mouseWheelHandler = null;
-    let _dragHandler = null;
+    const wrapper = ref();
+    const img = ref();
+    const scopeEventListener = effectScope();
     const loading = ref(true);
     const index = ref(props.initialIndex);
-    const wrapper = ref(null);
-    const img = ref(null);
     const mode = ref(Mode.CONTAIN);
     const transform = ref({
       scale: 1,
@@ -105,11 +109,11 @@ var script = defineComponent({
       return style;
     });
     function hide() {
-      deviceSupportUninstall();
-      emit(CLOSE_EVENT);
+      unregisterEventListener();
+      emit("close");
     }
-    function deviceSupportInstall() {
-      _keyDownHandler = rafThrottle((e) => {
+    function registerEventListener() {
+      const keydownHandler = rafThrottle((e) => {
         switch (e.code) {
           case EVENT_CODE.esc:
             hide();
@@ -131,7 +135,7 @@ var script = defineComponent({
             break;
         }
       });
-      _mouseWheelHandler = rafThrottle((e) => {
+      const mousewheelHandler = rafThrottle((e) => {
         const delta = e.wheelDelta ? e.wheelDelta : -e.detail;
         if (delta > 0) {
           handleActions("zoomIn", {
@@ -145,14 +149,13 @@ var script = defineComponent({
           });
         }
       });
-      on(document, "keydown", _keyDownHandler);
-      on(document, mousewheelEventName, _mouseWheelHandler);
+      scopeEventListener.run(() => {
+        useEventListener(document, "keydown", keydownHandler);
+        useEventListener(document, mousewheelEventName, mousewheelHandler);
+      });
     }
-    function deviceSupportUninstall() {
-      off(document, "keydown", _keyDownHandler);
-      off(document, mousewheelEventName, _mouseWheelHandler);
-      _keyDownHandler = null;
-      _mouseWheelHandler = null;
+    function unregisterEventListener() {
+      scopeEventListener.stop();
     }
     function handleImgLoad() {
       loading.value = false;
@@ -162,7 +165,7 @@ var script = defineComponent({
       e.target.alt = t("el.image.error");
     }
     function handleMouseDown(e) {
-      if (loading.value || e.button !== 0)
+      if (loading.value || e.button !== 0 || !wrapper.value)
         return;
       const { offsetX, offsetY } = transform.value;
       const startX = e.pageX;
@@ -171,20 +174,20 @@ var script = defineComponent({
       const divRight = wrapper.value.clientLeft + wrapper.value.clientWidth;
       const divTop = wrapper.value.clientTop;
       const divBottom = wrapper.value.clientTop + wrapper.value.clientHeight;
-      _dragHandler = rafThrottle((ev) => {
+      const dragHandler = rafThrottle((ev) => {
         transform.value = __spreadProps(__spreadValues({}, transform.value), {
           offsetX: offsetX + ev.pageX - startX,
           offsetY: offsetY + ev.pageY - startY
         });
       });
-      on(document, "mousemove", _dragHandler);
-      on(document, "mouseup", (e2) => {
-        const mouseX = e2.pageX;
-        const mouseY = e2.pageY;
+      const removeMousemove = useEventListener(document, "mousemove", dragHandler);
+      useEventListener(document, "mouseup", (evt) => {
+        const mouseX = evt.pageX;
+        const mouseY = evt.pageY;
         if (mouseX < divLeft || mouseX > divRight || mouseY < divTop || mouseY > divBottom) {
           reset();
         }
-        off(document, "mousemove", _dragHandler);
+        removeMousemove();
       });
       e.preventDefault();
     }
@@ -249,18 +252,18 @@ var script = defineComponent({
     watch(currentImg, () => {
       nextTick(() => {
         const $img = img.value;
-        if (!$img.complete) {
+        if (!($img == null ? void 0 : $img.complete)) {
           loading.value = true;
         }
       });
     });
     watch(index, (val) => {
       reset();
-      emit(SWITCH_EVENT, val);
+      emit("switch", val);
     });
     onMounted(() => {
       var _a, _b;
-      deviceSupportInstall();
+      registerEventListener();
       (_b = (_a = wrapper.value) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
     });
     return {
@@ -384,12 +387,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
 }
 
 script.render = render;
-script.__file = "packages/components/image-viewer/src/index.vue";
+script.__file = "packages/components/image-viewer/src/image-viewer.vue";
 
-script.install = (app) => {
-  app.component(script.name, script);
-};
-const _ImageViewer = script;
-const ElImageViewer = _ImageViewer;
+const ElImageViewer = withInstall(script);
 
-export { ElImageViewer, _ImageViewer as default };
+export { ElImageViewer, ElImageViewer as default, imageViewerEmits, imageViewerProps };

package/es/components/image-viewer/src/image-viewer.d.ts

@@ -0,0 +1,14 @@
+import type { ExtractPropTypes } from 'vue';
+export declare const imageViewerProps: {
+    readonly urlList: import("element-pe/es/utils/props").BuildPropReturn<import("element-pe/es/utils/props").PropWrapper<string[]>, () => [], unknown, unknown, unknown>;
+    readonly zIndex: import("element-pe/es/utils/props").BuildPropReturn<NumberConstructor, 2000, unknown, unknown, unknown>;
+    readonly initialIndex: import("element-pe/es/utils/props").BuildPropReturn<NumberConstructor, 0, unknown, unknown, unknown>;
+    readonly infinite: import("element-pe/es/utils/props").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
+    readonly hideOnClickModal: import("element-pe/es/utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
+};
+export declare type ImageViewerProps = ExtractPropTypes<typeof imageViewerProps>;
+export declare const imageViewerEmits: {
+    close: () => boolean;
+    switch: (index: number) => boolean;
+};
+export declare type ImageViewerEmits = typeof imageViewerEmits;