element-plus 2.3.5 → 2.3.7

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

@@ -1,5 +1,5 @@
 export declare const ElImage: import("element-plus/es/utils").SFCWithInstall<import("vue").DefineComponent<{
-    readonly hideOnClickModal: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
+    readonly hideOnClickModal: BooleanConstructor;
     readonly src: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
     readonly fit: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "" | "fill" | "none" | "contain" | "cover" | "scale-down", unknown, "", boolean>;
     readonly loading: {
@@ -8,7 +8,7 @@ export declare const ElImage: import("element-plus/es/utils").SFCWithInstall<imp
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
     };
-    readonly lazy: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
+    readonly lazy: BooleanConstructor;
     readonly scrollContainer: {
         readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => (string | HTMLElement | undefined) & {}) | (() => string | HTMLElement | undefined) | ((new (...args: any[]) => (string | HTMLElement | undefined) & {}) | (() => string | HTMLElement | undefined))[], unknown, unknown>>;
         readonly required: false;
@@ -16,7 +16,7 @@ export declare const ElImage: import("element-plus/es/utils").SFCWithInstall<imp
         __epPropKey: true;
     };
     readonly previewSrcList: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => string[]) | (() => string[]) | ((new (...args: any[]) => string[]) | (() => string[]))[], unknown, unknown, () => [], boolean>;
-    readonly previewTeleported: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
+    readonly previewTeleported: BooleanConstructor;
     readonly zIndex: {
         readonly type: import("vue").PropType<number>;
         readonly required: false;
@@ -29,7 +29,7 @@ export declare const ElImage: import("element-plus/es/utils").SFCWithInstall<imp
     readonly zoomRate: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 1.2, boolean>;
 }, {
     props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
-        readonly hideOnClickModal: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
+        readonly hideOnClickModal: BooleanConstructor;
         readonly src: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
         readonly fit: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "" | "fill" | "none" | "contain" | "cover" | "scale-down", unknown, "", boolean>;
         readonly loading: {
@@ -38,7 +38,7 @@ export declare const ElImage: import("element-plus/es/utils").SFCWithInstall<imp
             readonly validator: ((val: unknown) => boolean) | undefined;
             __epPropKey: true;
         };
-        readonly lazy: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
+        readonly lazy: BooleanConstructor;
         readonly scrollContainer: {
             readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => (string | HTMLElement | undefined) & {}) | (() => string | HTMLElement | undefined) | ((new (...args: any[]) => (string | HTMLElement | undefined) & {}) | (() => string | HTMLElement | undefined))[], unknown, unknown>>;
             readonly required: false;
@@ -46,7 +46,7 @@ export declare const ElImage: import("element-plus/es/utils").SFCWithInstall<imp
             __epPropKey: true;
         };
         readonly previewSrcList: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => string[]) | (() => string[]) | ((new (...args: any[]) => string[]) | (() => string[]))[], unknown, unknown, () => [], boolean>;
-        readonly previewTeleported: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
+        readonly previewTeleported: BooleanConstructor;
         readonly zIndex: {
             readonly type: import("vue").PropType<number>;
             readonly required: false;
@@ -98,11 +98,12 @@ export declare const ElImage: import("element-plus/es/utils").SFCWithInstall<imp
     supportLoading: boolean;
     stopScrollListener: (() => void) | undefined;
     stopWheelListener: (() => void) | undefined;
+    imageKls: import("vue").ComputedRef<(string | false)[]>;
     containerStyle: import("vue").ComputedRef<import("vue").StyleValue>;
     imageStyle: import("vue").ComputedRef<import("vue").CSSProperties>;
     preview: import("vue").ComputedRef<boolean>;
     imageIndex: import("vue").ComputedRef<number>;
-    isManual: import("vue").ComputedRef<import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>>;
+    isManual: import("vue").ComputedRef<boolean>;
     loadImage: () => void;
     handleLoad: (event: Event) => void;
     handleError: (event: Event) => void;
@@ -124,8 +125,8 @@ export declare const ElImage: import("element-plus/es/utils").SFCWithInstall<imp
         };
         readonly initialIndex: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
         readonly infinite: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
-        readonly hideOnClickModal: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
-        readonly teleported: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
+        readonly hideOnClickModal: BooleanConstructor;
+        readonly teleported: BooleanConstructor;
         readonly closeOnPressEscape: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
         readonly zoomRate: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 1.2, boolean>;
     }, {
@@ -140,8 +141,8 @@ export declare const ElImage: import("element-plus/es/utils").SFCWithInstall<imp
             };
             readonly initialIndex: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
             readonly infinite: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
-            readonly hideOnClickModal: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
-            readonly teleported: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
+            readonly hideOnClickModal: BooleanConstructor;
+            readonly teleported: BooleanConstructor;
             readonly closeOnPressEscape: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
             readonly zoomRate: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 1.2, boolean>;
         }>> & {
@@ -186,6 +187,8 @@ export declare const ElImage: import("element-plus/es/utils").SFCWithInstall<imp
         isFirst: import("vue").ComputedRef<boolean>;
         isLast: import("vue").ComputedRef<boolean>;
         currentImg: import("vue").ComputedRef<string>;
+        arrowPrevKls: import("vue").ComputedRef<string[]>;
+        arrowNextKls: import("vue").ComputedRef<string[]>;
         imgStyle: import("vue").ComputedRef<import("vue").CSSProperties>;
         computedZIndex: import("vue").ComputedRef<number>;
         hide: () => void;
@@ -283,20 +286,20 @@ export declare const ElImage: import("element-plus/es/utils").SFCWithInstall<imp
         };
         readonly initialIndex: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
         readonly infinite: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
-        readonly hideOnClickModal: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
-        readonly teleported: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
+        readonly hideOnClickModal: BooleanConstructor;
+        readonly teleported: BooleanConstructor;
         readonly closeOnPressEscape: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
         readonly zoomRate: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 1.2, boolean>;
     }>> & {
         onClose?: (() => any) | undefined;
         onSwitch?: ((index: number) => any) | undefined;
     }, {
-        readonly teleported: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
+        readonly teleported: boolean;
         readonly infinite: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
         readonly initialIndex: number;
         readonly closeOnPressEscape: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
-        readonly hideOnClickModal: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
         readonly zoomRate: number;
+        readonly hideOnClickModal: boolean;
         readonly urlList: string[];
     }>> & Record<string, any>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -306,7 +309,7 @@ export declare const ElImage: import("element-plus/es/utils").SFCWithInstall<imp
     close: () => boolean;
     show: () => boolean;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    readonly hideOnClickModal: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
+    readonly hideOnClickModal: BooleanConstructor;
     readonly src: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
     readonly fit: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "" | "fill" | "none" | "contain" | "cover" | "scale-down", unknown, "", boolean>;
     readonly loading: {
@@ -315,7 +318,7 @@ export declare const ElImage: import("element-plus/es/utils").SFCWithInstall<imp
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
     };
-    readonly lazy: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
+    readonly lazy: BooleanConstructor;
     readonly scrollContainer: {
         readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => (string | HTMLElement | undefined) & {}) | (() => string | HTMLElement | undefined) | ((new (...args: any[]) => (string | HTMLElement | undefined) & {}) | (() => string | HTMLElement | undefined))[], unknown, unknown>>;
         readonly required: false;
@@ -323,7 +326,7 @@ export declare const ElImage: import("element-plus/es/utils").SFCWithInstall<imp
         __epPropKey: true;
     };
     readonly previewSrcList: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => string[]) | (() => string[]) | ((new (...args: any[]) => string[]) | (() => string[]))[], unknown, unknown, () => [], boolean>;
-    readonly previewTeleported: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
+    readonly previewTeleported: BooleanConstructor;
     readonly zIndex: {
         readonly type: import("vue").PropType<number>;
         readonly required: false;
@@ -345,12 +348,12 @@ export declare const ElImage: import("element-plus/es/utils").SFCWithInstall<imp
     readonly src: string;
     readonly fit: import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "fill" | "none" | "contain" | "cover" | "scale-down", unknown>;
     readonly initialIndex: number;
-    readonly lazy: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
+    readonly lazy: boolean;
     readonly closeOnPressEscape: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
-    readonly hideOnClickModal: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
     readonly previewSrcList: string[];
-    readonly previewTeleported: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
     readonly zoomRate: number;
+    readonly hideOnClickModal: boolean;
+    readonly previewTeleported: boolean;
 }>> & Record<string, any>;
 export default ElImage;
 export * from './src/image';

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

@@ -1,6 +1,6 @@
 import type { ExtractPropTypes } from 'vue';
 export declare const imageProps: {
-    readonly hideOnClickModal: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
+    readonly hideOnClickModal: BooleanConstructor;
     readonly src: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
     readonly fit: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "" | "fill" | "none" | "contain" | "cover" | "scale-down", unknown, "", boolean>;
     readonly loading: {
@@ -9,7 +9,7 @@ export declare const imageProps: {
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
     };
-    readonly lazy: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
+    readonly lazy: BooleanConstructor;
     readonly scrollContainer: {
         readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => (string | HTMLElement | undefined) & {}) | (() => string | HTMLElement | undefined) | ((new (...args: any[]) => (string | HTMLElement | undefined) & {}) | (() => string | HTMLElement | undefined))[], unknown, unknown>>;
         readonly required: false;
@@ -17,7 +17,7 @@ export declare const imageProps: {
         __epPropKey: true;
     };
     readonly previewSrcList: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => string[]) | (() => string[]) | ((new (...args: any[]) => string[]) | (() => string[]))[], unknown, unknown, () => [], boolean>;
-    readonly previewTeleported: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
+    readonly previewTeleported: BooleanConstructor;
     readonly zIndex: {
         readonly type: import("vue").PropType<number>;
         readonly required: false;

package/es/components/image/src/image.mjs

@@ -4,10 +4,7 @@ import { mutable } from '../../../utils/typescript.mjs';
 import { isNumber } from '../../../utils/types.mjs';
 
 const imageProps = buildProps({
-  hideOnClickModal: {
-    type: Boolean,
-    default: false
-  },
+  hideOnClickModal: Boolean,
   src: {
     type: String,
     default: ""
@@ -21,10 +18,7 @@ const imageProps = buildProps({
     type: String,
     values: ["eager", "lazy"]
   },
-  lazy: {
-    type: Boolean,
-    default: false
-  },
+  lazy: Boolean,
   scrollContainer: {
     type: definePropType([String, Object])
   },
@@ -32,10 +26,7 @@ const imageProps = buildProps({
     type: definePropType(Array),
     default: () => mutable([])
   },
-  previewTeleported: {
-    type: Boolean,
-    default: false
-  },
+  previewTeleported: Boolean,
   zIndex: {
     type: Number
   },

package/es/components/image/src/image.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"image.mjs","sources":["../../../../../../packages/components/image/src/image.ts"],"sourcesContent":["import {\n  buildProps,\n  definePropType,\n  isNumber,\n  mutable,\n} from '@element-plus/utils'\n\nimport type { ExtractPropTypes } from 'vue'\n\nexport const imageProps = buildProps({\n  hideOnClickModal: {\n    type: Boolean,\n    default: false,\n  },\n  src: {\n    type: String,\n    default: '',\n  },\n  fit: {\n    type: String,\n    values: ['', 'contain', 'cover', 'fill', 'none', 'scale-down'],\n    default: '',\n  },\n  loading: {\n    type: String,\n    values: ['eager', 'lazy'],\n  },\n  lazy: {\n    type: Boolean,\n    default: false,\n  },\n  scrollContainer: {\n    type: definePropType<string | HTMLElement | undefined>([String, Object]),\n  },\n  previewSrcList: {\n    type: definePropType<string[]>(Array),\n    default: () => mutable([] as const),\n  },\n  previewTeleported: {\n    type: Boolean,\n    default: false,\n  },\n  zIndex: {\n    type: Number,\n  },\n  initialIndex: {\n    type: Number,\n    default: 0,\n  },\n  infinite: {\n    type: Boolean,\n    default: true,\n  },\n  closeOnPressEscape: {\n    type: Boolean,\n    default: true,\n  },\n  zoomRate: {\n    type: Number,\n    default: 1.2,\n  },\n} as const)\nexport type ImageProps = ExtractPropTypes<typeof imageProps>\n\nexport const imageEmits = {\n  load: (evt: Event) => evt instanceof Event,\n  error: (evt: Event) => evt instanceof Event,\n  switch: (val: number) => isNumber(val),\n  close: () => true,\n  show: () => true,\n}\nexport type ImageEmits = typeof imageEmits\n"],"names":[],"mappings":";;;;;AAMY,MAAC,UAAU,GAAG,UAAU,CAAC;AACrC,EAAE,gBAAgB,EAAE;AACpB,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,GAAG,EAAE;AACP,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,GAAG,EAAE;AACP,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,MAAM,EAAE,CAAC,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,CAAC;AAClE,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,OAAO,EAAE;AACX,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC;AAC7B,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,eAAe,EAAE;AACnB,IAAI,IAAI,EAAE,cAAc,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAC1C,GAAG;AACH,EAAE,cAAc,EAAE;AAClB,IAAI,IAAI,EAAE,cAAc,CAAC,KAAK,CAAC;AAC/B,IAAI,OAAO,EAAE,MAAM,OAAO,CAAC,EAAE,CAAC;AAC9B,GAAG;AACH,EAAE,iBAAiB,EAAE;AACrB,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,GAAG;AACH,EAAE,YAAY,EAAE;AAChB,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,kBAAkB,EAAE;AACtB,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,GAAG;AAChB,GAAG;AACH,CAAC,EAAE;AACS,MAAC,UAAU,GAAG;AAC1B,EAAE,IAAI,EAAE,CAAC,GAAG,KAAK,GAAG,YAAY,KAAK;AACrC,EAAE,KAAK,EAAE,CAAC,GAAG,KAAK,GAAG,YAAY,KAAK;AACtC,EAAE,MAAM,EAAE,CAAC,GAAG,KAAK,QAAQ,CAAC,GAAG,CAAC;AAChC,EAAE,KAAK,EAAE,MAAM,IAAI;AACnB,EAAE,IAAI,EAAE,MAAM,IAAI;AAClB;;;;"}
+{"version":3,"file":"image.mjs","sources":["../../../../../../packages/components/image/src/image.ts"],"sourcesContent":["import {\n  buildProps,\n  definePropType,\n  isNumber,\n  mutable,\n} from '@element-plus/utils'\n\nimport type { ExtractPropTypes } from 'vue'\n\nexport const imageProps = buildProps({\n  /**\n   * @description when enabling preview, use this flag to control whether clicking on backdrop can exit preview mode.\n   */\n  hideOnClickModal: Boolean,\n  /**\n   * @description image source, same as native.\n   */\n  src: {\n    type: String,\n    default: '',\n  },\n  /**\n   * @description indicate how the image should be resized to fit its container, same as [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit).\n   */\n  fit: {\n    type: String,\n    values: ['', 'contain', 'cover', 'fill', 'none', 'scale-down'],\n    default: '',\n  },\n  /**\n   * @description Indicates how the browser should load the image, same as [native](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading)\n   */\n  loading: {\n    type: String,\n    values: ['eager', 'lazy'],\n  },\n  /**\n   * @description whether to use lazy load.\n   */\n  lazy: Boolean,\n  /**\n   * @description the container to add scroll listener when using lazy load.\n   */\n  scrollContainer: {\n    type: definePropType<string | HTMLElement | undefined>([String, Object]),\n  },\n  /**\n   * @description allow big image preview.\n   */\n  previewSrcList: {\n    type: definePropType<string[]>(Array),\n    default: () => mutable([] as const),\n  },\n  /**\n   * @description whether to append image-viewer to body. A nested parent element attribute transform should have this attribute set to `true`.\n   */\n  previewTeleported: Boolean,\n  /**\n   * @description set image preview z-index.\n   */\n  zIndex: {\n    type: Number,\n  },\n  /**\n   * @description initial preview image index, less than the length of `url-list`.\n   */\n  initialIndex: {\n    type: Number,\n    default: 0,\n  },\n  /**\n   * @description whether the viewer preview is infinite.\n   */\n  infinite: {\n    type: Boolean,\n    default: true,\n  },\n  /**\n   * @description whether the image-viewer can be closed by pressing ESC.\n   */\n  closeOnPressEscape: {\n    type: Boolean,\n    default: true,\n  },\n  /**\n   * @description the zoom rate of the image viewer zoom event\n   */\n  zoomRate: {\n    type: Number,\n    default: 1.2,\n  },\n} as const)\nexport type ImageProps = ExtractPropTypes<typeof imageProps>\n\nexport const imageEmits = {\n  load: (evt: Event) => evt instanceof Event,\n  error: (evt: Event) => evt instanceof Event,\n  switch: (val: number) => isNumber(val),\n  close: () => true,\n  show: () => true,\n}\nexport type ImageEmits = typeof imageEmits\n"],"names":[],"mappings":";;;;;AAMY,MAAC,UAAU,GAAG,UAAU,CAAC;AACrC,EAAE,gBAAgB,EAAE,OAAO;AAC3B,EAAE,GAAG,EAAE;AACP,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,GAAG,EAAE;AACP,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,MAAM,EAAE,CAAC,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,CAAC;AAClE,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,OAAO,EAAE;AACX,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,MAAM,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC;AAC7B,GAAG;AACH,EAAE,IAAI,EAAE,OAAO;AACf,EAAE,eAAe,EAAE;AACnB,IAAI,IAAI,EAAE,cAAc,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAC1C,GAAG;AACH,EAAE,cAAc,EAAE;AAClB,IAAI,IAAI,EAAE,cAAc,CAAC,KAAK,CAAC;AAC/B,IAAI,OAAO,EAAE,MAAM,OAAO,CAAC,EAAE,CAAC;AAC9B,GAAG;AACH,EAAE,iBAAiB,EAAE,OAAO;AAC5B,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,GAAG;AACH,EAAE,YAAY,EAAE;AAChB,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,kBAAkB,EAAE;AACtB,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,GAAG;AAChB,GAAG;AACH,CAAC,EAAE;AACS,MAAC,UAAU,GAAG;AAC1B,EAAE,IAAI,EAAE,CAAC,GAAG,KAAK,GAAG,YAAY,KAAK;AACrC,EAAE,KAAK,EAAE,CAAC,GAAG,KAAK,GAAG,YAAY,KAAK;AACtC,EAAE,MAAM,EAAE,CAAC,GAAG,KAAK,QAAQ,CAAC,GAAG,CAAC;AAChC,EAAE,KAAK,EAAE,MAAM,IAAI;AACnB,EAAE,IAAI,EAAE,MAAM,IAAI;AAClB;;;;"}

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

@@ -1,6 +1,6 @@
 import type { CSSProperties, StyleValue } from 'vue';
 declare const _default: import("vue").DefineComponent<{
-    readonly hideOnClickModal: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
+    readonly hideOnClickModal: BooleanConstructor;
     readonly src: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
     readonly fit: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "" | "fill" | "none" | "contain" | "cover" | "scale-down", unknown, "", boolean>;
     readonly loading: {
@@ -9,7 +9,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
     };
-    readonly lazy: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
+    readonly lazy: BooleanConstructor;
     readonly scrollContainer: {
         readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => (string | HTMLElement | undefined) & {}) | (() => string | HTMLElement | undefined) | ((new (...args: any[]) => (string | HTMLElement | undefined) & {}) | (() => string | HTMLElement | undefined))[], unknown, unknown>>;
         readonly required: false;
@@ -17,7 +17,7 @@ declare const _default: import("vue").DefineComponent<{
         __epPropKey: true;
     };
     readonly previewSrcList: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => string[]) | (() => string[]) | ((new (...args: any[]) => string[]) | (() => string[]))[], unknown, unknown, () => [], boolean>;
-    readonly previewTeleported: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
+    readonly previewTeleported: BooleanConstructor;
     readonly zIndex: {
         readonly type: import("vue").PropType<number>;
         readonly required: false;
@@ -30,7 +30,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly zoomRate: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 1.2, boolean>;
 }, {
     props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
-        readonly hideOnClickModal: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
+        readonly hideOnClickModal: BooleanConstructor;
         readonly src: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
         readonly fit: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "" | "fill" | "none" | "contain" | "cover" | "scale-down", unknown, "", boolean>;
         readonly loading: {
@@ -39,7 +39,7 @@ declare const _default: import("vue").DefineComponent<{
             readonly validator: ((val: unknown) => boolean) | undefined;
             __epPropKey: true;
         };
-        readonly lazy: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
+        readonly lazy: BooleanConstructor;
         readonly scrollContainer: {
             readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => (string | HTMLElement | undefined) & {}) | (() => string | HTMLElement | undefined) | ((new (...args: any[]) => (string | HTMLElement | undefined) & {}) | (() => string | HTMLElement | undefined))[], unknown, unknown>>;
             readonly required: false;
@@ -47,7 +47,7 @@ declare const _default: import("vue").DefineComponent<{
             __epPropKey: true;
         };
         readonly previewSrcList: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => string[]) | (() => string[]) | ((new (...args: any[]) => string[]) | (() => string[]))[], unknown, unknown, () => [], boolean>;
-        readonly previewTeleported: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
+        readonly previewTeleported: BooleanConstructor;
         readonly zIndex: {
             readonly type: import("vue").PropType<number>;
             readonly required: false;
@@ -99,11 +99,12 @@ declare const _default: import("vue").DefineComponent<{
     supportLoading: boolean;
     stopScrollListener: (() => void) | undefined;
     stopWheelListener: (() => void) | undefined;
+    imageKls: import("vue").ComputedRef<(string | false)[]>;
     containerStyle: import("vue").ComputedRef<StyleValue>;
     imageStyle: import("vue").ComputedRef<CSSProperties>;
     preview: import("vue").ComputedRef<boolean>;
     imageIndex: import("vue").ComputedRef<number>;
-    isManual: import("vue").ComputedRef<import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>>;
+    isManual: import("vue").ComputedRef<boolean>;
     loadImage: () => void;
     handleLoad: (event: Event) => void;
     handleError: (event: Event) => void;
@@ -125,8 +126,8 @@ declare const _default: import("vue").DefineComponent<{
         };
         readonly initialIndex: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
         readonly infinite: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
-        readonly hideOnClickModal: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
-        readonly teleported: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
+        readonly hideOnClickModal: BooleanConstructor;
+        readonly teleported: BooleanConstructor;
         readonly closeOnPressEscape: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
         readonly zoomRate: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 1.2, boolean>;
     }, {
@@ -141,8 +142,8 @@ declare const _default: import("vue").DefineComponent<{
             };
             readonly initialIndex: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
             readonly infinite: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
-            readonly hideOnClickModal: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
-            readonly teleported: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
+            readonly hideOnClickModal: BooleanConstructor;
+            readonly teleported: BooleanConstructor;
             readonly closeOnPressEscape: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
             readonly zoomRate: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 1.2, boolean>;
         }>> & {
@@ -187,6 +188,8 @@ declare const _default: import("vue").DefineComponent<{
         isFirst: import("vue").ComputedRef<boolean>;
         isLast: import("vue").ComputedRef<boolean>;
         currentImg: import("vue").ComputedRef<string>;
+        arrowPrevKls: import("vue").ComputedRef<string[]>;
+        arrowNextKls: import("vue").ComputedRef<string[]>;
         imgStyle: import("vue").ComputedRef<CSSProperties>;
         computedZIndex: import("vue").ComputedRef<number>;
         hide: () => void;
@@ -284,20 +287,20 @@ declare const _default: import("vue").DefineComponent<{
         };
         readonly initialIndex: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
         readonly infinite: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
-        readonly hideOnClickModal: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
-        readonly teleported: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
+        readonly hideOnClickModal: BooleanConstructor;
+        readonly teleported: BooleanConstructor;
         readonly closeOnPressEscape: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
         readonly zoomRate: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 1.2, boolean>;
     }>> & {
         onClose?: (() => any) | undefined;
         onSwitch?: ((index: number) => any) | undefined;
     }, {
-        readonly teleported: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
+        readonly teleported: boolean;
         readonly infinite: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
         readonly initialIndex: number;
         readonly closeOnPressEscape: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
-        readonly hideOnClickModal: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
         readonly zoomRate: number;
+        readonly hideOnClickModal: boolean;
         readonly urlList: string[];
     }>> & Record<string, any>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
@@ -307,7 +310,7 @@ declare const _default: import("vue").DefineComponent<{
     close: () => boolean;
     show: () => boolean;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    readonly hideOnClickModal: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
+    readonly hideOnClickModal: BooleanConstructor;
     readonly src: import("element-plus/es/utils").EpPropFinalized<StringConstructor, unknown, unknown, "", boolean>;
     readonly fit: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "" | "fill" | "none" | "contain" | "cover" | "scale-down", unknown, "", boolean>;
     readonly loading: {
@@ -316,7 +319,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly validator: ((val: unknown) => boolean) | undefined;
         __epPropKey: true;
     };
-    readonly lazy: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
+    readonly lazy: BooleanConstructor;
     readonly scrollContainer: {
         readonly type: import("vue").PropType<import("element-plus/es/utils").EpPropMergeType<(new (...args: any[]) => (string | HTMLElement | undefined) & {}) | (() => string | HTMLElement | undefined) | ((new (...args: any[]) => (string | HTMLElement | undefined) & {}) | (() => string | HTMLElement | undefined))[], unknown, unknown>>;
         readonly required: false;
@@ -324,7 +327,7 @@ declare const _default: import("vue").DefineComponent<{
         __epPropKey: true;
     };
     readonly previewSrcList: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => string[]) | (() => string[]) | ((new (...args: any[]) => string[]) | (() => string[]))[], unknown, unknown, () => [], boolean>;
-    readonly previewTeleported: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
+    readonly previewTeleported: BooleanConstructor;
     readonly zIndex: {
         readonly type: import("vue").PropType<number>;
         readonly required: false;
@@ -346,11 +349,11 @@ declare const _default: import("vue").DefineComponent<{
     readonly src: string;
     readonly fit: import("element-plus/es/utils").EpPropMergeType<StringConstructor, "" | "fill" | "none" | "contain" | "cover" | "scale-down", unknown>;
     readonly initialIndex: number;
-    readonly lazy: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
+    readonly lazy: boolean;
     readonly closeOnPressEscape: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
-    readonly hideOnClickModal: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
     readonly previewSrcList: string[];
-    readonly previewTeleported: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
     readonly zoomRate: number;
+    readonly hideOnClickModal: boolean;
+    readonly previewTeleported: boolean;
 }>;
 export default _default;

package/es/components/image/src/image2.mjs

@@ -39,6 +39,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const supportLoading = isClient && "loading" in HTMLImageElement.prototype;
     let stopScrollListener;
     let stopWheelListener;
+    const imageKls = computed(() => [
+      ns.e("inner"),
+      preview.value && ns.e("preview"),
+      isLoading.value && ns.is("loading")
+    ]);
     const containerStyle = computed(() => rawAttrs.style);
     const imageStyle = computed(() => {
       const { fit } = props;
@@ -176,11 +181,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             src: imageSrc.value,
             loading: _ctx.loading,
             style: unref(imageStyle),
-            class: [
-              unref(ns).e("inner"),
-              unref(preview) && unref(ns).e("preview"),
-              isLoading.value && unref(ns).is("loading")
-            ],
+            class: unref(imageKls),
             onClick: clickHandler,
             onLoad: handleLoad,
             onError: handleError

package/es/components/image/src/image2.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"image2.mjs","sources":["../../../../../../packages/components/image/src/image.vue"],"sourcesContent":["<template>\n  <div ref=\"container\" :class=\"[ns.b(), $attrs.class]\" :style=\"containerStyle\">\n    <slot v-if=\"hasLoadError\" name=\"error\">\n      <div :class=\"ns.e('error')\">{{ t('el.image.error') }}</div>\n    </slot>\n    <template v-else>\n      <img\n        v-if=\"imageSrc !== undefined\"\n        v-bind=\"attrs\"\n        :src=\"imageSrc\"\n        :loading=\"loading\"\n        :style=\"imageStyle\"\n        :class=\"[\n          ns.e('inner'),\n          preview && ns.e('preview'),\n          isLoading && ns.is('loading'),\n        ]\"\n        @click=\"clickHandler\"\n        @load=\"handleLoad\"\n        @error=\"handleError\"\n      />\n      <div v-if=\"isLoading\" :class=\"ns.e('wrapper')\">\n        <slot name=\"placeholder\">\n          <div :class=\"ns.e('placeholder')\" />\n        </slot>\n      </div>\n    </template>\n    <template v-if=\"preview\">\n      <image-viewer\n        v-if=\"showViewer\"\n        :z-index=\"zIndex\"\n        :initial-index=\"imageIndex\"\n        :infinite=\"infinite\"\n        :zoom-rate=\"zoomRate\"\n        :url-list=\"previewSrcList\"\n        :hide-on-click-modal=\"hideOnClickModal\"\n        :teleported=\"previewTeleported\"\n        :close-on-press-escape=\"closeOnPressEscape\"\n        @close=\"closeViewer\"\n        @switch=\"switchViewer\"\n      >\n        <div v-if=\"$slots.viewer\">\n          <slot name=\"viewer\" />\n        </div>\n      </image-viewer>\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n  computed,\n  nextTick,\n  onMounted,\n  ref,\n  useAttrs as useRawAttrs,\n  watch,\n} from 'vue'\nimport { useEventListener, useThrottleFn } from '@vueuse/core'\nimport { useAttrs, useLocale, useNamespace } from '@element-plus/hooks'\nimport ImageViewer from '@element-plus/components/image-viewer'\nimport {\n  getScrollContainer,\n  isClient,\n  isElement,\n  isInContainer,\n  isString,\n} from '@element-plus/utils'\nimport { imageEmits, imageProps } from './image'\n\nimport type { CSSProperties, StyleValue } from 'vue'\n\ndefineOptions({\n  name: 'ElImage',\n  inheritAttrs: false,\n})\n\nconst props = defineProps(imageProps)\nconst emit = defineEmits(imageEmits)\n\nlet prevOverflow = ''\n\nconst { t } = useLocale()\nconst ns = useNamespace('image')\nconst rawAttrs = useRawAttrs()\nconst attrs = useAttrs()\n\nconst imageSrc = ref<string | undefined>()\nconst hasLoadError = ref(false)\nconst isLoading = ref(true)\nconst showViewer = ref(false)\nconst container = ref<HTMLElement>()\nconst _scrollContainer = ref<HTMLElement | Window>()\n\nconst supportLoading = isClient && 'loading' in HTMLImageElement.prototype\nlet stopScrollListener: (() => void) | undefined\nlet stopWheelListener: (() => void) | undefined\n\nconst containerStyle = computed(() => rawAttrs.style as StyleValue)\n\nconst imageStyle = computed<CSSProperties>(() => {\n  const { fit } = props\n  if (isClient && fit) {\n    return { objectFit: fit }\n  }\n  return {}\n})\n\nconst preview = computed(() => {\n  const { previewSrcList } = props\n  return Array.isArray(previewSrcList) && previewSrcList.length > 0\n})\n\nconst imageIndex = computed(() => {\n  const { previewSrcList, initialIndex } = props\n  let previewIndex = initialIndex\n  if (initialIndex > previewSrcList.length - 1) {\n    previewIndex = 0\n  }\n  return previewIndex\n})\n\nconst isManual = computed(() => {\n  if (props.loading === 'eager') return false\n  return (!supportLoading && props.loading === 'lazy') || props.lazy\n})\n\nconst loadImage = () => {\n  if (!isClient) return\n\n  // reset status\n  isLoading.value = true\n  hasLoadError.value = false\n  imageSrc.value = props.src\n}\n\nfunction handleLoad(event: Event) {\n  isLoading.value = false\n  hasLoadError.value = false\n  emit('load', event)\n}\n\nfunction handleError(event: Event) {\n  isLoading.value = false\n  hasLoadError.value = true\n  emit('error', event)\n}\n\nfunction handleLazyLoad() {\n  if (isInContainer(container.value, _scrollContainer.value)) {\n    loadImage()\n    removeLazyLoadListener()\n  }\n}\n\nconst lazyLoadHandler = useThrottleFn(handleLazyLoad, 200, true)\n\nasync function addLazyLoadListener() {\n  if (!isClient) return\n\n  await nextTick()\n\n  const { scrollContainer } = props\n  if (isElement(scrollContainer)) {\n    _scrollContainer.value = scrollContainer\n  } else if (isString(scrollContainer) && scrollContainer !== '') {\n    _scrollContainer.value =\n      document.querySelector<HTMLElement>(scrollContainer) ?? undefined\n  } else if (container.value) {\n    _scrollContainer.value = getScrollContainer(container.value)\n  }\n\n  if (_scrollContainer.value) {\n    stopScrollListener = useEventListener(\n      _scrollContainer,\n      'scroll',\n      lazyLoadHandler\n    )\n    setTimeout(() => handleLazyLoad(), 100)\n  }\n}\n\nfunction removeLazyLoadListener() {\n  if (!isClient || !_scrollContainer.value || !lazyLoadHandler) return\n\n  stopScrollListener?.()\n  _scrollContainer.value = undefined\n}\n\nfunction wheelHandler(e: WheelEvent) {\n  if (!e.ctrlKey) return\n\n  if (e.deltaY < 0) {\n    e.preventDefault()\n    return false\n  } else if (e.deltaY > 0) {\n    e.preventDefault()\n    return false\n  }\n}\n\nfunction clickHandler() {\n  // don't show viewer when preview is false\n  if (!preview.value) return\n\n  stopWheelListener = useEventListener('wheel', wheelHandler, {\n    passive: false,\n  })\n\n  // prevent body scroll\n  prevOverflow = document.body.style.overflow\n  document.body.style.overflow = 'hidden'\n  showViewer.value = true\n  emit('show')\n}\n\nfunction closeViewer() {\n  stopWheelListener?.()\n  document.body.style.overflow = prevOverflow\n  showViewer.value = false\n  emit('close')\n}\n\nfunction switchViewer(val: number) {\n  emit('switch', val)\n}\n\nwatch(\n  () => props.src,\n  () => {\n    if (isManual.value) {\n      // reset status\n      isLoading.value = true\n      hasLoadError.value = false\n      removeLazyLoadListener()\n      addLazyLoadListener()\n    } else {\n      loadImage()\n    }\n  }\n)\n\nonMounted(() => {\n  if (isManual.value) {\n    addLazyLoadListener()\n  } else {\n    loadImage()\n  }\n})\n</script>\n"],"names":["useRawAttrs","useAttrs"],"mappings":"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"}
+{"version":3,"file":"image2.mjs","sources":["../../../../../../packages/components/image/src/image.vue"],"sourcesContent":["<template>\n  <div ref=\"container\" :class=\"[ns.b(), $attrs.class]\" :style=\"containerStyle\">\n    <slot v-if=\"hasLoadError\" name=\"error\">\n      <div :class=\"ns.e('error')\">{{ t('el.image.error') }}</div>\n    </slot>\n    <template v-else>\n      <img\n        v-if=\"imageSrc !== undefined\"\n        v-bind=\"attrs\"\n        :src=\"imageSrc\"\n        :loading=\"loading\"\n        :style=\"imageStyle\"\n        :class=\"imageKls\"\n        @click=\"clickHandler\"\n        @load=\"handleLoad\"\n        @error=\"handleError\"\n      />\n      <div v-if=\"isLoading\" :class=\"ns.e('wrapper')\">\n        <slot name=\"placeholder\">\n          <div :class=\"ns.e('placeholder')\" />\n        </slot>\n      </div>\n    </template>\n    <template v-if=\"preview\">\n      <image-viewer\n        v-if=\"showViewer\"\n        :z-index=\"zIndex\"\n        :initial-index=\"imageIndex\"\n        :infinite=\"infinite\"\n        :zoom-rate=\"zoomRate\"\n        :url-list=\"previewSrcList\"\n        :hide-on-click-modal=\"hideOnClickModal\"\n        :teleported=\"previewTeleported\"\n        :close-on-press-escape=\"closeOnPressEscape\"\n        @close=\"closeViewer\"\n        @switch=\"switchViewer\"\n      >\n        <div v-if=\"$slots.viewer\">\n          <slot name=\"viewer\" />\n        </div>\n      </image-viewer>\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n  computed,\n  nextTick,\n  onMounted,\n  ref,\n  useAttrs as useRawAttrs,\n  watch,\n} from 'vue'\nimport { useEventListener, useThrottleFn } from '@vueuse/core'\nimport { useAttrs, useLocale, useNamespace } from '@element-plus/hooks'\nimport ImageViewer from '@element-plus/components/image-viewer'\nimport {\n  getScrollContainer,\n  isClient,\n  isElement,\n  isInContainer,\n  isString,\n} from '@element-plus/utils'\nimport { imageEmits, imageProps } from './image'\n\nimport type { CSSProperties, StyleValue } from 'vue'\n\ndefineOptions({\n  name: 'ElImage',\n  inheritAttrs: false,\n})\n\nconst props = defineProps(imageProps)\nconst emit = defineEmits(imageEmits)\n\nlet prevOverflow = ''\n\nconst { t } = useLocale()\nconst ns = useNamespace('image')\nconst rawAttrs = useRawAttrs()\nconst attrs = useAttrs()\n\nconst imageSrc = ref<string | undefined>()\nconst hasLoadError = ref(false)\nconst isLoading = ref(true)\nconst showViewer = ref(false)\nconst container = ref<HTMLElement>()\nconst _scrollContainer = ref<HTMLElement | Window>()\n\nconst supportLoading = isClient && 'loading' in HTMLImageElement.prototype\nlet stopScrollListener: (() => void) | undefined\nlet stopWheelListener: (() => void) | undefined\n\nconst imageKls = computed(() => [\n  ns.e('inner'),\n  preview.value && ns.e('preview'),\n  isLoading.value && ns.is('loading'),\n])\n\nconst containerStyle = computed(() => rawAttrs.style as StyleValue)\n\nconst imageStyle = computed<CSSProperties>(() => {\n  const { fit } = props\n  if (isClient && fit) {\n    return { objectFit: fit }\n  }\n  return {}\n})\n\nconst preview = computed(() => {\n  const { previewSrcList } = props\n  return Array.isArray(previewSrcList) && previewSrcList.length > 0\n})\n\nconst imageIndex = computed(() => {\n  const { previewSrcList, initialIndex } = props\n  let previewIndex = initialIndex\n  if (initialIndex > previewSrcList.length - 1) {\n    previewIndex = 0\n  }\n  return previewIndex\n})\n\nconst isManual = computed(() => {\n  if (props.loading === 'eager') return false\n  return (!supportLoading && props.loading === 'lazy') || props.lazy\n})\n\nconst loadImage = () => {\n  if (!isClient) return\n\n  // reset status\n  isLoading.value = true\n  hasLoadError.value = false\n  imageSrc.value = props.src\n}\n\nfunction handleLoad(event: Event) {\n  isLoading.value = false\n  hasLoadError.value = false\n  emit('load', event)\n}\n\nfunction handleError(event: Event) {\n  isLoading.value = false\n  hasLoadError.value = true\n  emit('error', event)\n}\n\nfunction handleLazyLoad() {\n  if (isInContainer(container.value, _scrollContainer.value)) {\n    loadImage()\n    removeLazyLoadListener()\n  }\n}\n\nconst lazyLoadHandler = useThrottleFn(handleLazyLoad, 200, true)\n\nasync function addLazyLoadListener() {\n  if (!isClient) return\n\n  await nextTick()\n\n  const { scrollContainer } = props\n  if (isElement(scrollContainer)) {\n    _scrollContainer.value = scrollContainer\n  } else if (isString(scrollContainer) && scrollContainer !== '') {\n    _scrollContainer.value =\n      document.querySelector<HTMLElement>(scrollContainer) ?? undefined\n  } else if (container.value) {\n    _scrollContainer.value = getScrollContainer(container.value)\n  }\n\n  if (_scrollContainer.value) {\n    stopScrollListener = useEventListener(\n      _scrollContainer,\n      'scroll',\n      lazyLoadHandler\n    )\n    setTimeout(() => handleLazyLoad(), 100)\n  }\n}\n\nfunction removeLazyLoadListener() {\n  if (!isClient || !_scrollContainer.value || !lazyLoadHandler) return\n\n  stopScrollListener?.()\n  _scrollContainer.value = undefined\n}\n\nfunction wheelHandler(e: WheelEvent) {\n  if (!e.ctrlKey) return\n\n  if (e.deltaY < 0) {\n    e.preventDefault()\n    return false\n  } else if (e.deltaY > 0) {\n    e.preventDefault()\n    return false\n  }\n}\n\nfunction clickHandler() {\n  // don't show viewer when preview is false\n  if (!preview.value) return\n\n  stopWheelListener = useEventListener('wheel', wheelHandler, {\n    passive: false,\n  })\n\n  // prevent body scroll\n  prevOverflow = document.body.style.overflow\n  document.body.style.overflow = 'hidden'\n  showViewer.value = true\n  emit('show')\n}\n\nfunction closeViewer() {\n  stopWheelListener?.()\n  document.body.style.overflow = prevOverflow\n  showViewer.value = false\n  emit('close')\n}\n\nfunction switchViewer(val: number) {\n  emit('switch', val)\n}\n\nwatch(\n  () => props.src,\n  () => {\n    if (isManual.value) {\n      // reset status\n      isLoading.value = true\n      hasLoadError.value = false\n      removeLazyLoadListener()\n      addLazyLoadListener()\n    } else {\n      loadImage()\n    }\n  }\n)\n\nonMounted(() => {\n  if (isManual.value) {\n    addLazyLoadListener()\n  } else {\n    loadImage()\n  }\n})\n</script>\n"],"names":["useRawAttrs","useAttrs"],"mappings":"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"}

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

@@ -8,8 +8,8 @@ export declare const ElImageViewer: import("element-plus/es/utils").SFCWithInsta
     };
     readonly initialIndex: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
     readonly infinite: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
-    readonly hideOnClickModal: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
-    readonly teleported: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
+    readonly hideOnClickModal: BooleanConstructor;
+    readonly teleported: BooleanConstructor;
     readonly closeOnPressEscape: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
     readonly zoomRate: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 1.2, boolean>;
 }, {
@@ -24,8 +24,8 @@ export declare const ElImageViewer: import("element-plus/es/utils").SFCWithInsta
         };
         readonly initialIndex: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
         readonly infinite: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
-        readonly hideOnClickModal: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
-        readonly teleported: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
+        readonly hideOnClickModal: BooleanConstructor;
+        readonly teleported: BooleanConstructor;
         readonly closeOnPressEscape: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
         readonly zoomRate: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 1.2, boolean>;
     }>> & {
@@ -70,6 +70,8 @@ export declare const ElImageViewer: import("element-plus/es/utils").SFCWithInsta
     isFirst: import("vue").ComputedRef<boolean>;
     isLast: import("vue").ComputedRef<boolean>;
     currentImg: import("vue").ComputedRef<string>;
+    arrowPrevKls: import("vue").ComputedRef<string[]>;
+    arrowNextKls: import("vue").ComputedRef<string[]>;
     imgStyle: import("vue").ComputedRef<import("vue").CSSProperties>;
     computedZIndex: import("vue").ComputedRef<number>;
     hide: () => void;
@@ -167,20 +169,20 @@ export declare const ElImageViewer: import("element-plus/es/utils").SFCWithInsta
     };
     readonly initialIndex: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
     readonly infinite: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
-    readonly hideOnClickModal: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
-    readonly teleported: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
+    readonly hideOnClickModal: BooleanConstructor;
+    readonly teleported: BooleanConstructor;
     readonly closeOnPressEscape: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
     readonly zoomRate: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 1.2, boolean>;
 }>> & {
     onClose?: (() => any) | undefined;
     onSwitch?: ((index: number) => any) | undefined;
 }, {
-    readonly teleported: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
+    readonly teleported: boolean;
     readonly infinite: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
     readonly initialIndex: number;
     readonly closeOnPressEscape: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
-    readonly hideOnClickModal: import("element-plus/es/utils").EpPropMergeType<BooleanConstructor, unknown, unknown>;
     readonly zoomRate: number;
+    readonly hideOnClickModal: boolean;
     readonly urlList: string[];
 }>> & Record<string, any>;
 export default ElImageViewer;

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

@@ -11,8 +11,8 @@ export declare const imageViewerProps: {
     };
     readonly initialIndex: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 0, boolean>;
     readonly infinite: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
-    readonly hideOnClickModal: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
-    readonly teleported: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, false, boolean>;
+    readonly hideOnClickModal: BooleanConstructor;
+    readonly teleported: BooleanConstructor;
     readonly closeOnPressEscape: import("element-plus/es/utils").EpPropFinalized<BooleanConstructor, unknown, unknown, true, boolean>;
     readonly zoomRate: import("element-plus/es/utils").EpPropFinalized<NumberConstructor, unknown, unknown, 1.2, boolean>;
 };

package/es/components/image-viewer/src/image-viewer.mjs

@@ -19,14 +19,8 @@ const imageViewerProps = buildProps({
     type: Boolean,
     default: true
   },
-  hideOnClickModal: {
-    type: Boolean,
-    default: false
-  },
-  teleported: {
-    type: Boolean,
-    default: false
-  },
+  hideOnClickModal: Boolean,
+  teleported: Boolean,
   closeOnPressEscape: {
     type: Boolean,
     default: true

package/es/components/image-viewer/src/image-viewer.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"image-viewer.mjs","sources":["../../../../../../packages/components/image-viewer/src/image-viewer.ts"],"sourcesContent":["import {\n  buildProps,\n  definePropType,\n  isNumber,\n  mutable,\n} from '@element-plus/utils'\n\nimport type { Component, ExtractPropTypes } from 'vue'\nimport type ImageViewer from './image-viewer.vue'\n\nexport type ImageViewerAction =\n  | 'zoomIn'\n  | 'zoomOut'\n  | 'clockwise'\n  | 'anticlockwise'\n\nexport const imageViewerProps = buildProps({\n  urlList: {\n    type: definePropType<string[]>(Array),\n    default: () => mutable([] as const),\n  },\n  zIndex: {\n    type: Number,\n  },\n  initialIndex: {\n    type: Number,\n    default: 0,\n  },\n  infinite: {\n    type: Boolean,\n    default: true,\n  },\n  hideOnClickModal: {\n    type: Boolean,\n    default: false,\n  },\n  teleported: {\n    type: Boolean,\n    default: false,\n  },\n  closeOnPressEscape: {\n    type: Boolean,\n    default: true,\n  },\n  zoomRate: {\n    type: Number,\n    default: 1.2,\n  },\n} as const)\nexport type ImageViewerProps = ExtractPropTypes<typeof imageViewerProps>\n\nexport const imageViewerEmits = {\n  close: () => true,\n  switch: (index: number) => isNumber(index),\n}\nexport type ImageViewerEmits = typeof imageViewerEmits\n\nexport interface ImageViewerMode {\n  name: string\n  icon: Component\n}\n\nexport type ImageViewerInstance = InstanceType<typeof ImageViewer>\n"],"names":[],"mappings":";;;;;AAMY,MAAC,gBAAgB,GAAG,UAAU,CAAC;AAC3C,EAAE,OAAO,EAAE;AACX,IAAI,IAAI,EAAE,cAAc,CAAC,KAAK,CAAC;AAC/B,IAAI,OAAO,EAAE,MAAM,OAAO,CAAC,EAAE,CAAC;AAC9B,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,GAAG;AACH,EAAE,YAAY,EAAE;AAChB,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,gBAAgB,EAAE;AACpB,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,UAAU,EAAE;AACd,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,kBAAkB,EAAE;AACtB,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,GAAG;AAChB,GAAG;AACH,CAAC,EAAE;AACS,MAAC,gBAAgB,GAAG;AAChC,EAAE,KAAK,EAAE,MAAM,IAAI;AACnB,EAAE,MAAM,EAAE,CAAC,KAAK,KAAK,QAAQ,CAAC,KAAK,CAAC;AACpC;;;;"}
+{"version":3,"file":"image-viewer.mjs","sources":["../../../../../../packages/components/image-viewer/src/image-viewer.ts"],"sourcesContent":["import {\n  buildProps,\n  definePropType,\n  isNumber,\n  mutable,\n} from '@element-plus/utils'\n\nimport type { Component, ExtractPropTypes } from 'vue'\nimport type ImageViewer from './image-viewer.vue'\n\nexport type ImageViewerAction =\n  | 'zoomIn'\n  | 'zoomOut'\n  | 'clockwise'\n  | 'anticlockwise'\n\nexport const imageViewerProps = buildProps({\n  /**\n   * @description preview link list.\n   */\n  urlList: {\n    type: definePropType<string[]>(Array),\n    default: () => mutable([] as const),\n  },\n  /**\n   * @description preview backdrop z-index.\n   */\n  zIndex: {\n    type: Number,\n  },\n  /**\n   * @description the initial preview image index, less than or equal to the length of `url-list`.\n   */\n  initialIndex: {\n    type: Number,\n    default: 0,\n  },\n  /**\n   * @description whether preview is infinite.\n   */\n  infinite: {\n    type: Boolean,\n    default: true,\n  },\n  /**\n   * @description whether user can emit close event when clicking backdrop.\n   */\n  hideOnClickModal: Boolean,\n  /**\n   * @description whether to append image itself to body. A nested parent element attribute transform should have this attribute set to `true`.\n   */\n  teleported: Boolean,\n  /**\n   * @description whether the image-viewer can be closed by pressing ESC.\n   */\n  closeOnPressEscape: {\n    type: Boolean,\n    default: true,\n  },\n  /**\n   * @description the zoom rate of the image viewer zoom event.\n   */\n  zoomRate: {\n    type: Number,\n    default: 1.2,\n  },\n} as const)\nexport type ImageViewerProps = ExtractPropTypes<typeof imageViewerProps>\n\nexport const imageViewerEmits = {\n  close: () => true,\n  switch: (index: number) => isNumber(index),\n}\nexport type ImageViewerEmits = typeof imageViewerEmits\n\nexport interface ImageViewerMode {\n  name: string\n  icon: Component\n}\n\nexport type ImageViewerInstance = InstanceType<typeof ImageViewer>\n"],"names":[],"mappings":";;;;;AAMY,MAAC,gBAAgB,GAAG,UAAU,CAAC;AAC3C,EAAE,OAAO,EAAE;AACX,IAAI,IAAI,EAAE,cAAc,CAAC,KAAK,CAAC;AAC/B,IAAI,OAAO,EAAE,MAAM,OAAO,CAAC,EAAE,CAAC;AAC9B,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,GAAG;AACH,EAAE,YAAY,EAAE;AAChB,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,gBAAgB,EAAE,OAAO;AAC3B,EAAE,UAAU,EAAE,OAAO;AACrB,EAAE,kBAAkB,EAAE;AACtB,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,GAAG;AAChB,GAAG;AACH,CAAC,EAAE;AACS,MAAC,gBAAgB,GAAG;AAChC,EAAE,KAAK,EAAE,MAAM,IAAI;AACnB,EAAE,MAAM,EAAE,CAAC,KAAK,KAAK,QAAQ,CAAC,KAAK,CAAC;AACpC;;;;"}