@element-plus/nightly 0.0.20220116 → 0.0.20220120

package/es/components/form/src/form-item.vue.d.ts

@@ -48,32 +48,34 @@ declare const _default: import("vue").DefineComponent<{
     resetField: () => void;
     clearValidate: () => void;
     currentLabel: import("vue").ComputedRef<string>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    label?: unknown;
-    labelWidth?: unknown;
-    prop?: unknown;
-    required?: unknown;
-    rules?: unknown;
-    error?: unknown;
-    validateStatus?: unknown;
-    for?: unknown;
-    inlineMessage?: unknown;
-    showMessage?: unknown;
-    size?: unknown;
-} & {
-    labelWidth: string | number;
-    inlineMessage: string | boolean;
-    showMessage: boolean;
-} & {
-    required?: boolean | undefined;
-    size?: ComponentSize | undefined;
-    label?: string | undefined;
-    error?: string | undefined;
-    prop?: string | undefined;
-    rules?: FormItemRule | FormItemRule[] | undefined;
-    validateStatus?: string | undefined;
-    for?: string | undefined;
-}>, {
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    label: StringConstructor;
+    labelWidth: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    prop: StringConstructor;
+    required: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    rules: PropType<FormItemRule | FormItemRule[]>;
+    error: StringConstructor;
+    validateStatus: StringConstructor;
+    for: StringConstructor;
+    inlineMessage: {
+        type: (BooleanConstructor | StringConstructor)[];
+        default: string;
+    };
+    showMessage: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    size: {
+        type: PropType<ComponentSize>;
+        validator: (val: string) => boolean;
+    };
+}>>, {
     required: boolean;
     labelWidth: string | number;
     inlineMessage: string | boolean;

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

@@ -42,38 +42,37 @@ declare const _default: import("vue").DefineComponent<{
     clearValidate: (props?: string | string[]) => void;
     validateField: (props: string | string[], cb: ValidateFieldCallback) => void;
     scrollToField: (prop: string) => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "validate"[], "validate", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    model?: unknown;
-    rules?: unknown;
-    labelPosition?: unknown;
-    labelWidth?: unknown;
-    labelSuffix?: unknown;
-    inline?: unknown;
-    inlineMessage?: unknown;
-    statusIcon?: unknown;
-    showMessage?: unknown;
-    size?: unknown;
-    disabled?: unknown;
-    validateOnRuleChange?: unknown;
-    hideRequiredAsterisk?: unknown;
-    scrollToError?: unknown;
-} & {
-    disabled: boolean;
-    inline: boolean;
-    labelWidth: string | number;
-    labelSuffix: string;
-    inlineMessage: boolean;
-    statusIcon: boolean;
-    showMessage: boolean;
-    validateOnRuleChange: boolean;
-    hideRequiredAsterisk: boolean;
-    scrollToError: boolean;
-} & {
-    size?: ComponentSize | undefined;
-    model?: Record<string, any> | undefined;
-    labelPosition?: string | undefined;
-    rules?: Partial<Record<string, import("./form.type").FormItemRule | import("./form.type").FormItemRule[]>> | undefined;
-}> & {
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "validate"[], "validate", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    model: ObjectConstructor;
+    rules: PropType<Partial<Record<string, import("./form.type").FormItemRule | import("./form.type").FormItemRule[]>>>;
+    labelPosition: StringConstructor;
+    labelWidth: {
+        type: (StringConstructor | NumberConstructor)[];
+        default: string;
+    };
+    labelSuffix: {
+        type: StringConstructor;
+        default: string;
+    };
+    inline: BooleanConstructor;
+    inlineMessage: BooleanConstructor;
+    statusIcon: BooleanConstructor;
+    showMessage: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    size: PropType<ComponentSize>;
+    disabled: BooleanConstructor;
+    validateOnRuleChange: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    hideRequiredAsterisk: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    scrollToError: BooleanConstructor;
+}>> & {
     onValidate?: ((...args: any[]) => any) | undefined;
 }, {
     disabled: boolean;

package/es/components/form/src/label-wrap.d.ts

@@ -3,13 +3,10 @@ declare const _default: import("vue").DefineComponent<{
     updateAll: BooleanConstructor;
 }, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
-}> | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    isAutoWidth?: unknown;
-    updateAll?: unknown;
-} & {
-    isAutoWidth: boolean;
-    updateAll: boolean;
-} & {}>, {
+}> | null, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    isAutoWidth: BooleanConstructor;
+    updateAll: BooleanConstructor;
+}>>, {
     isAutoWidth: boolean;
     updateAll: boolean;
 }>;

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

@@ -2,14 +2,22 @@ export declare const ElIcon: import("../../utils/types").SFCWithInstall<import("
     readonly size: import("../../utils/props").BuildPropReturn<import("../../utils/props").PropWrapper<string | number>, unknown, unknown, unknown, unknown>;
     readonly color: import("../../utils/props").BuildPropReturn<StringConstructor, unknown, unknown, unknown, unknown>;
 }, {
+    ns: {
+        namespace: import("vue").ComputedRef<string>;
+        b: (blockSuffix?: string) => string;
+        e: (element?: string | undefined) => string;
+        m: (modifier?: string | undefined) => string;
+        be: (blockSuffix?: string | undefined, element?: string | undefined) => string;
+        em: (element?: string | undefined, modifier?: string | undefined) => string;
+        bm: (blockSuffix?: string | undefined, modifier?: string | undefined) => string;
+        bem: (blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined) => string;
+        is: (name: string, state?: boolean) => string;
+    };
     style: import("vue").ComputedRef<import("vue").CSSProperties>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    readonly size?: unknown;
-    readonly color?: unknown;
-} & {} & {
-    size?: import("../../utils/props").BuildPropType<import("../../utils/props").PropWrapper<string | number>, unknown, unknown> | undefined;
-    color?: string | undefined;
-}>, {
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly size: import("../../utils/props").BuildPropReturn<import("../../utils/props").PropWrapper<string | number>, unknown, unknown, unknown, unknown>;
+    readonly color: import("../../utils/props").BuildPropReturn<StringConstructor, unknown, unknown, unknown, unknown>;
+}>>, {
     size: import("../../utils/props").BuildPropType<import("../../utils/props").PropWrapper<string | number>, unknown, unknown>;
     color: string;
 }>> & Record<string, any>;

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

@@ -1,6 +1,8 @@
 import type { ExtractPropTypes } from 'vue';
+import type Icon from './icon.vue';
 export declare const iconProps: {
     readonly size: import("element-plus/es/utils/props").BuildPropReturn<import("element-plus/es/utils/props").PropWrapper<string | number>, unknown, unknown, unknown, unknown>;
     readonly color: import("element-plus/es/utils/props").BuildPropReturn<StringConstructor, unknown, unknown, unknown, unknown>;
 };
 export declare type IconProps = ExtractPropTypes<typeof iconProps>;
+export declare type IconInstance = InstanceType<typeof Icon>;

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

@@ -1 +1 @@
-{"version":3,"file":"icon.mjs","sources":["../../../../../../packages/components/icon/src/icon.ts"],"sourcesContent":["import { definePropType, buildProps } from '@element-plus/utils/props'\nimport type { ExtractPropTypes } from 'vue'\n\nexport const iconProps = buildProps({\n  size: {\n    type: definePropType<number | string>([Number, String]),\n  },\n  color: {\n    type: String,\n  },\n} as const)\nexport type IconProps = ExtractPropTypes<typeof iconProps>\n"],"names":[],"mappings":";;AACY,MAAC,SAAS,GAAG,UAAU,CAAC;AACpC,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,cAAc,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAC1C,GAAG;AACH,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,MAAM;AAChB,GAAG;AACH,CAAC;;;;"}
+{"version":3,"file":"icon.mjs","sources":["../../../../../../packages/components/icon/src/icon.ts"],"sourcesContent":["import { definePropType, buildProps } from '@element-plus/utils/props'\nimport type { ExtractPropTypes } from 'vue'\nimport type Icon from './icon.vue'\n\nexport const iconProps = buildProps({\n  size: {\n    type: definePropType<number | string>([Number, String]),\n  },\n  color: {\n    type: String,\n  },\n} as const)\nexport type IconProps = ExtractPropTypes<typeof iconProps>\nexport type IconInstance = InstanceType<typeof Icon>\n"],"names":[],"mappings":";;AACY,MAAC,SAAS,GAAG,UAAU,CAAC;AACpC,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,cAAc,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAC1C,GAAG;AACH,EAAE,KAAK,EAAE;AACT,IAAI,IAAI,EAAE,MAAM;AAChB,GAAG;AACH,CAAC;;;;"}

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

@@ -3,14 +3,22 @@ declare const _default: import("vue").DefineComponent<{
     readonly size: import("../../../utils/props").BuildPropReturn<import("../../../utils/props").PropWrapper<string | number>, unknown, unknown, unknown, unknown>;
     readonly color: import("../../../utils/props").BuildPropReturn<StringConstructor, unknown, unknown, unknown, unknown>;
 }, {
+    ns: {
+        namespace: import("vue").ComputedRef<string>;
+        b: (blockSuffix?: string) => string;
+        e: (element?: string | undefined) => string;
+        m: (modifier?: string | undefined) => string;
+        be: (blockSuffix?: string | undefined, element?: string | undefined) => string;
+        em: (element?: string | undefined, modifier?: string | undefined) => string;
+        bm: (blockSuffix?: string | undefined, modifier?: string | undefined) => string;
+        bem: (blockSuffix?: string | undefined, element?: string | undefined, modifier?: string | undefined) => string;
+        is: (name: string, state?: boolean) => string;
+    };
     style: import("vue").ComputedRef<CSSProperties>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    readonly size?: unknown;
-    readonly color?: unknown;
-} & {} & {
-    size?: import("../../../utils/props").BuildPropType<import("../../../utils/props").PropWrapper<string | number>, unknown, unknown> | undefined;
-    color?: string | undefined;
-}>, {
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly size: import("../../../utils/props").BuildPropReturn<import("../../../utils/props").PropWrapper<string | number>, unknown, unknown, unknown, unknown>;
+    readonly color: import("../../../utils/props").BuildPropReturn<StringConstructor, unknown, unknown, unknown, unknown>;
+}>>, {
     size: import("../../../utils/props").BuildPropType<import("../../../utils/props").PropWrapper<string | number>, unknown, unknown>;
     color: string;
 }>;

package/es/components/icon/src/icon.vue_vue_type_script_lang.mjs

@@ -1,27 +1,26 @@
 import { defineComponent, computed } from 'vue';
-import { isNumber } from '../../../utils/util.mjs';
+import { isUndefined, addUnit } from '../../../utils/util.mjs';
+import '../../../hooks/index.mjs';
 import { iconProps } from './icon.mjs';
-import { isString } from '@vue/shared';
+import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
 
 var script = defineComponent({
   name: "ElIcon",
   inheritAttrs: false,
   props: iconProps,
   setup(props) {
+    const ns = useNamespace("icon");
+    const style = computed(() => {
+      if (!props.size && !props.color)
+        return {};
+      return {
+        fontSize: isUndefined(props.size) ? void 0 : addUnit(props.size),
+        "--color": props.color
+      };
+    });
     return {
-      style: computed(() => {
-        if (!props.size && !props.color) {
-          return {};
-        }
-        let size = props.size;
-        if (isNumber(size) || isString(size) && !size.endsWith("px")) {
-          size = `${size}px`;
-        }
-        return {
-          ...props.size ? { fontSize: size } : {},
-          ...props.color ? { "--color": props.color } : {}
-        };
-      })
+      ns,
+      style
     };
   }
 });

package/es/components/icon/src/icon.vue_vue_type_script_lang.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"icon.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/icon/src/icon.vue"],"sourcesContent":["<template>\n  <i class=\"el-icon\" :style=\"style\" v-bind=\"$attrs\">\n    <slot></slot>\n  </i>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed } from 'vue'\nimport { isNumber, isString } from '@element-plus/utils/util'\nimport { iconProps } from './icon'\n\nimport type { CSSProperties } from 'vue'\n\nexport default defineComponent({\n  name: 'ElIcon',\n  inheritAttrs: false,\n\n  props: iconProps,\n\n  setup(props) {\n    return {\n      style: computed<CSSProperties>(() => {\n        if (!props.size && !props.color) {\n          return {}\n        }\n        let size = props.size\n        if (isNumber(size) || (isString(size) && !size.endsWith('px'))) {\n          size = `${size}px`\n        }\n        return {\n          ...(props.size ? { fontSize: size } : {}),\n          ...(props.color ? { '--color': props.color } : {}),\n        } as CSSProperties\n      }),\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;;;AASA,aAAe,eAAe,CAAC;;AAE/B,EAAE,YAAY,EAAE,KAAK;;AAErB,EAAE,KAAK,CAAC,KAAK,EAAE;IACX,OAAO;MACL,KAAK,EAAE,QAAQ;;UAEX,OAAO;;QAET,IAAI;QACJ;UACE,IAAI,GAAG,CAAC,EAAE,IAAI,CAAC,EAAE,CAAC,CAAC;SACpB;eACM;;UAEL,GAAG,MAAM,KAAK,GAAG;SAClB;;;;;;;;"}
+{"version":3,"file":"icon.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/icon/src/icon.vue"],"sourcesContent":["<template>\n  <i :class=\"ns.b()\" :style=\"style\" v-bind=\"$attrs\">\n    <slot></slot>\n  </i>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed } from 'vue'\nimport { addUnit, isUndefined } from '@element-plus/utils/util'\nimport { useNamespace } from '@element-plus/hooks'\nimport { iconProps } from './icon'\n\nimport type { CSSProperties } from 'vue'\n\nexport default defineComponent({\n  name: 'ElIcon',\n  inheritAttrs: false,\n\n  props: iconProps,\n\n  setup(props) {\n    const ns = useNamespace('icon')\n\n    const style = computed<CSSProperties>(() => {\n      if (!props.size && !props.color) return {}\n\n      return {\n        fontSize: isUndefined(props.size) ? undefined : addUnit(props.size),\n        '--color': props.color,\n      }\n    })\n\n    return {\n      ns,\n      style,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;;;;AAUA,aAAe,eAAe,CAAC;;AAE/B,EAAE,YAAY,EAAE,KAAK;;AAErB,EAAE,KAAK,CAAC,KAAK,EAAE;IACX,MAAM,EAAE,GAAG;IACX,MAAM,QAAQ;;eAEH,EAAE,CAAC;;QAEV;QACA,SAAS,EAAE,KAAK,CAAC,KAAK;;KAEzB,CAAC,CAAC;WACI;;MAEL,KAAK;;;;;;;"}

package/es/components/icon/src/icon.vue_vue_type_template_id_89b755b6_lang.mjs

@@ -2,7 +2,7 @@ import { openBlock, createElementBlock, mergeProps, renderSlot } from 'vue';
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("i", mergeProps({
-    class: "el-icon",
+    class: _ctx.ns.b(),
     style: _ctx.style
   }, _ctx.$attrs), [
     renderSlot(_ctx.$slots, "default")

package/es/components/icon/src/icon.vue_vue_type_template_id_89b755b6_lang.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"icon.vue_vue_type_template_id_89b755b6_lang.mjs","sources":["../../../../../../packages/components/icon/src/icon.vue?vue&type=template&id=89b755b6&lang.js"],"sourcesContent":["<template>\n  <i class=\"el-icon\" :style=\"style\" v-bind=\"$attrs\">\n    <slot></slot>\n  </i>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed } from 'vue'\nimport { isNumber, isString } from '@element-plus/utils/util'\nimport { iconProps } from './icon'\n\nimport type { CSSProperties } from 'vue'\n\nexport default defineComponent({\n  name: 'ElIcon',\n  inheritAttrs: false,\n\n  props: iconProps,\n\n  setup(props) {\n    return {\n      style: computed<CSSProperties>(() => {\n        if (!props.size && !props.color) {\n          return {}\n        }\n        let size = props.size\n        if (isNumber(size) || (isString(size) && !size.endsWith('px'))) {\n          size = `${size}px`\n        }\n        return {\n          ...(props.size ? { fontSize: size } : {}),\n          ...(props.color ? { '--color': props.color } : {}),\n        } as CSSProperties\n      }),\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;;;IACK,KAAK,EAAC;SAAgB;eAAuB;;;;;;"}
+{"version":3,"file":"icon.vue_vue_type_template_id_89b755b6_lang.mjs","sources":["../../../../../../packages/components/icon/src/icon.vue?vue&type=template&id=89b755b6&lang.js"],"sourcesContent":["<template>\n  <i :class=\"ns.b()\" :style=\"style\" v-bind=\"$attrs\">\n    <slot></slot>\n  </i>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed } from 'vue'\nimport { addUnit, isUndefined } from '@element-plus/utils/util'\nimport { useNamespace } from '@element-plus/hooks'\nimport { iconProps } from './icon'\n\nimport type { CSSProperties } from 'vue'\n\nexport default defineComponent({\n  name: 'ElIcon',\n  inheritAttrs: false,\n\n  props: iconProps,\n\n  setup(props) {\n    const ns = useNamespace('icon')\n\n    const style = computed<CSSProperties>(() => {\n      if (!props.size && !props.color) return {}\n\n      return {\n        fontSize: isUndefined(props.size) ? undefined : addUnit(props.size),\n        '--color': props.color,\n      }\n    })\n\n    return {\n      ns,\n      style,\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;;;IACM,KAAK,EAAE;SAAc;eAAuB;;;;;;"}

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

@@ -26,28 +26,17 @@ export declare const ElImage: import("../../utils/types").SFCWithInstall<import(
     error: (evt: Event) => boolean;
     switch: (val: number) => boolean;
     close: () => boolean;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    readonly appendToBody?: unknown;
-    readonly hideOnClickModal?: unknown;
-    readonly src?: unknown;
-    readonly fit?: unknown;
-    readonly lazy?: unknown;
-    readonly scrollContainer?: unknown;
-    readonly previewSrcList?: unknown;
-    readonly zIndex?: unknown;
-    readonly initialIndex?: unknown;
-} & {
-    zIndex: number;
-    lazy: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
-    src: string;
-    fit: import("../../utils/props").BuildPropType<StringConstructor, "" | "fill" | "none" | "contain" | "cover" | "scale-down", unknown>;
-    initialIndex: number;
-    appendToBody: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
-    hideOnClickModal: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
-    previewSrcList: string[];
-} & {
-    scrollContainer?: import("../../utils/props").BuildPropType<import("../../utils/props").PropWrapper<string | HTMLElement | undefined>, unknown, unknown>;
-}> & {
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly appendToBody: import("../../utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
+    readonly hideOnClickModal: import("../../utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
+    readonly src: import("../../utils/props").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
+    readonly fit: import("../../utils/props").BuildPropReturn<StringConstructor, "", unknown, "" | "fill" | "none" | "contain" | "cover" | "scale-down", unknown>;
+    readonly lazy: import("../../utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
+    readonly scrollContainer: import("../../utils/props").BuildPropReturn<import("../../utils/props").PropWrapper<string | HTMLElement | undefined>, unknown, unknown, unknown, unknown>;
+    readonly previewSrcList: 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>;
+}>> & {
     onClose?: (() => any) | undefined;
     onError?: ((evt: Event) => any) | undefined;
     onSwitch?: ((val: number) => any) | undefined;

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

@@ -27,28 +27,17 @@ declare const _default: import("vue").DefineComponent<{
     error: (evt: Event) => boolean;
     switch: (val: number) => boolean;
     close: () => boolean;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<{
-    readonly appendToBody?: unknown;
-    readonly hideOnClickModal?: unknown;
-    readonly src?: unknown;
-    readonly fit?: unknown;
-    readonly lazy?: unknown;
-    readonly scrollContainer?: unknown;
-    readonly previewSrcList?: unknown;
-    readonly zIndex?: unknown;
-    readonly initialIndex?: unknown;
-} & {
-    zIndex: number;
-    lazy: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
-    src: string;
-    fit: import("../../../utils/props").BuildPropType<StringConstructor, "" | "fill" | "none" | "contain" | "cover" | "scale-down", unknown>;
-    initialIndex: number;
-    appendToBody: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
-    hideOnClickModal: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
-    previewSrcList: string[];
-} & {
-    scrollContainer?: import("../../../utils/props").BuildPropType<import("../../../utils/props").PropWrapper<string | HTMLElement | undefined>, unknown, unknown>;
-}> & {
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly appendToBody: import("../../../utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
+    readonly hideOnClickModal: import("../../../utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
+    readonly src: import("../../../utils/props").BuildPropReturn<StringConstructor, "", unknown, unknown, unknown>;
+    readonly fit: import("../../../utils/props").BuildPropReturn<StringConstructor, "", unknown, "" | "fill" | "none" | "contain" | "cover" | "scale-down", unknown>;
+    readonly lazy: import("../../../utils/props").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
+    readonly scrollContainer: import("../../../utils/props").BuildPropReturn<import("../../../utils/props").PropWrapper<string | HTMLElement | undefined>, unknown, unknown, unknown, unknown>;
+    readonly previewSrcList: 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>;
+}>> & {
     onClose?: (() => any) | undefined;
     onError?: ((evt: Event) => any) | undefined;
     onSwitch?: ((val: number) => any) | undefined;

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

@@ -57,14 +57,25 @@ var script = defineComponent({
       loading.value = true;
       hasLoadError.value = false;
       const img = new Image();
-      img.addEventListener("load", (e) => handleLoad(e, img));
-      img.addEventListener("error", handleError);
+      const currentImageSrc = props.src;
+      img.addEventListener("load", (e) => {
+        if (currentImageSrc !== props.src) {
+          return;
+        }
+        handleLoad(e, img);
+      });
+      img.addEventListener("error", (e) => {
+        if (currentImageSrc !== props.src) {
+          return;
+        }
+        handleError(e);
+      });
       Object.entries(attrs.value).forEach(([key, value]) => {
         if (key.toLowerCase() === "onload")
           return;
         img.setAttribute(key, value);
       });
-      img.src = props.src;
+      img.src = currentImageSrc;
     };
     function handleLoad(e, img) {
       imgWidth.value = img.width;

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

@@ -1 +1 @@
-{"version":3,"file":"image.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/image/src/image.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"container\"\n    :class=\"['el-image', $attrs.class]\"\n    :style=\"containerStyle\"\n  >\n    <slot v-if=\"loading\" name=\"placeholder\">\n      <div class=\"el-image__placeholder\"></div>\n    </slot>\n    <slot v-else-if=\"hasLoadError\" name=\"error\">\n      <div class=\"el-image__error\">{{ t('el.image.error') }}</div>\n    </slot>\n    <img\n      v-else\n      class=\"el-image__inner\"\n      v-bind=\"attrs\"\n      :src=\"src\"\n      :style=\"imageStyle\"\n      :class=\"{\n        'el-image__preview': preview,\n      }\"\n      @click=\"clickHandler\"\n    />\n    <teleport to=\"body\" :disabled=\"!appendToBody\">\n      <template v-if=\"preview\">\n        <image-viewer\n          v-if=\"showViewer\"\n          :z-index=\"zIndex\"\n          :initial-index=\"imageIndex\"\n          :url-list=\"previewSrcList\"\n          :hide-on-click-modal=\"hideOnClickModal\"\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    </teleport>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed, ref, onMounted, watch, nextTick } from 'vue'\nimport { isString } from '@vue/shared'\nimport { useEventListener, useThrottleFn, isClient } from '@vueuse/core'\nimport { useAttrs, useLocale } from '@element-plus/hooks'\nimport ImageViewer from '@element-plus/components/image-viewer'\nimport { getScrollContainer, isInContainer } from '@element-plus/utils/dom'\nimport { imageEmits, imageProps } from './image'\n\nimport type { CSSProperties, StyleValue } from 'vue'\n\nconst isHtmlElement = (e: any): e is Element =>\n  e && e.nodeType === Node.ELEMENT_NODE\n\nlet prevOverflow = ''\n\nexport default defineComponent({\n  name: 'ElImage',\n  components: {\n    ImageViewer,\n  },\n  inheritAttrs: false,\n\n  props: imageProps,\n  emits: imageEmits,\n\n  setup(props, { emit, attrs: rawAttrs }) {\n    const { t } = useLocale()\n\n    const attrs = useAttrs()\n    const hasLoadError = ref(false)\n    const loading = ref(true)\n    const imgWidth = ref(0)\n    const imgHeight = ref(0)\n    const showViewer = ref(false)\n    const container = ref<HTMLElement>()\n\n    const _scrollContainer = ref<HTMLElement | Window>()\n    let stopScrollListener: () => void\n    let stopWheelListener: () => void\n\n    const containerStyle = computed(() => rawAttrs.style as StyleValue)\n\n    const imageStyle = computed<CSSProperties>(() => {\n      const { fit } = props\n      if (isClient && fit) {\n        return { objectFit: fit }\n      }\n      return {}\n    })\n\n    const preview = computed(() => {\n      const { previewSrcList } = props\n      return Array.isArray(previewSrcList) && previewSrcList.length > 0\n    })\n\n    const imageIndex = computed(() => {\n      const { src, previewSrcList, initialIndex } = props\n      let previewIndex = initialIndex\n      const srcIndex = previewSrcList.indexOf(src)\n      if (srcIndex >= 0) {\n        previewIndex = srcIndex\n      }\n      return previewIndex\n    })\n\n    const loadImage = () => {\n      if (!isClient) return\n\n      // reset status\n      loading.value = true\n      hasLoadError.value = false\n\n      const img = new Image()\n      img.addEventListener('load', (e) => handleLoad(e, img))\n      img.addEventListener('error', handleError)\n\n      // bind html attrs\n      // so it can behave consistently\n      Object.entries(attrs.value).forEach(([key, value]) => {\n        // avoid onload to be overwritten\n        if (key.toLowerCase() === 'onload') return\n        img.setAttribute(key, value as string)\n      })\n      img.src = props.src\n    }\n\n    function handleLoad(e: Event, img: HTMLImageElement) {\n      imgWidth.value = img.width\n      imgHeight.value = img.height\n      loading.value = false\n      hasLoadError.value = false\n    }\n\n    function handleError(event: Event) {\n      loading.value = false\n      hasLoadError.value = true\n      emit('error', event)\n    }\n\n    function handleLazyLoad() {\n      if (isInContainer(container.value, _scrollContainer.value)) {\n        loadImage()\n        removeLazyLoadListener()\n      }\n    }\n    const lazyLoadHandler = useThrottleFn(handleLazyLoad, 200)\n\n    async function addLazyLoadListener() {\n      if (!isClient) return\n\n      await nextTick()\n\n      const { scrollContainer } = props\n      if (isHtmlElement(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\n    function removeLazyLoadListener() {\n      if (!isClient || !_scrollContainer.value || !lazyLoadHandler) return\n\n      stopScrollListener()\n      _scrollContainer.value = undefined\n    }\n\n    function 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\n    function 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    }\n\n    function closeViewer() {\n      stopWheelListener?.()\n      document.body.style.overflow = prevOverflow\n      showViewer.value = false\n      emit('close')\n    }\n\n    function switchViewer(val: number) {\n      emit('switch', val)\n    }\n\n    watch(\n      () => props.src,\n      () => {\n        if (props.lazy) {\n          // reset status\n          loading.value = true\n          hasLoadError.value = false\n          removeLazyLoadListener()\n          addLazyLoadListener()\n        } else {\n          loadImage()\n        }\n      }\n    )\n\n    onMounted(() => {\n      if (props.lazy) {\n        addLazyLoadListener()\n      } else {\n        loadImage()\n      }\n    })\n\n    return {\n      attrs,\n      loading,\n      hasLoadError,\n      showViewer,\n      containerStyle,\n      imageStyle,\n      preview,\n      imageIndex,\n      container,\n\n      clickHandler,\n      closeViewer,\n      switchViewer,\n      t,\n    }\n  },\n})\n</script>\n"],"names":["ImageViewer"],"mappings":"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"}
+{"version":3,"file":"image.vue_vue_type_script_lang.mjs","sources":["../../../../../../packages/components/image/src/image.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"container\"\n    :class=\"['el-image', $attrs.class]\"\n    :style=\"containerStyle\"\n  >\n    <slot v-if=\"loading\" name=\"placeholder\">\n      <div class=\"el-image__placeholder\"></div>\n    </slot>\n    <slot v-else-if=\"hasLoadError\" name=\"error\">\n      <div class=\"el-image__error\">{{ t('el.image.error') }}</div>\n    </slot>\n    <img\n      v-else\n      class=\"el-image__inner\"\n      v-bind=\"attrs\"\n      :src=\"src\"\n      :style=\"imageStyle\"\n      :class=\"{\n        'el-image__preview': preview,\n      }\"\n      @click=\"clickHandler\"\n    />\n    <teleport to=\"body\" :disabled=\"!appendToBody\">\n      <template v-if=\"preview\">\n        <image-viewer\n          v-if=\"showViewer\"\n          :z-index=\"zIndex\"\n          :initial-index=\"imageIndex\"\n          :url-list=\"previewSrcList\"\n          :hide-on-click-modal=\"hideOnClickModal\"\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    </teleport>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed, ref, onMounted, watch, nextTick } from 'vue'\nimport { isString } from '@vue/shared'\nimport { useEventListener, useThrottleFn, isClient } from '@vueuse/core'\nimport { useAttrs, useLocale } from '@element-plus/hooks'\nimport ImageViewer from '@element-plus/components/image-viewer'\nimport { getScrollContainer, isInContainer } from '@element-plus/utils/dom'\nimport { imageEmits, imageProps } from './image'\n\nimport type { CSSProperties, StyleValue } from 'vue'\n\nconst isHtmlElement = (e: any): e is Element =>\n  e && e.nodeType === Node.ELEMENT_NODE\n\nlet prevOverflow = ''\n\nexport default defineComponent({\n  name: 'ElImage',\n  components: {\n    ImageViewer,\n  },\n  inheritAttrs: false,\n\n  props: imageProps,\n  emits: imageEmits,\n\n  setup(props, { emit, attrs: rawAttrs }) {\n    const { t } = useLocale()\n\n    const attrs = useAttrs()\n    const hasLoadError = ref(false)\n    const loading = ref(true)\n    const imgWidth = ref(0)\n    const imgHeight = ref(0)\n    const showViewer = ref(false)\n    const container = ref<HTMLElement>()\n\n    const _scrollContainer = ref<HTMLElement | Window>()\n    let stopScrollListener: () => void\n    let stopWheelListener: () => void\n\n    const containerStyle = computed(() => rawAttrs.style as StyleValue)\n\n    const imageStyle = computed<CSSProperties>(() => {\n      const { fit } = props\n      if (isClient && fit) {\n        return { objectFit: fit }\n      }\n      return {}\n    })\n\n    const preview = computed(() => {\n      const { previewSrcList } = props\n      return Array.isArray(previewSrcList) && previewSrcList.length > 0\n    })\n\n    const imageIndex = computed(() => {\n      const { src, previewSrcList, initialIndex } = props\n      let previewIndex = initialIndex\n      const srcIndex = previewSrcList.indexOf(src)\n      if (srcIndex >= 0) {\n        previewIndex = srcIndex\n      }\n      return previewIndex\n    })\n\n    const loadImage = () => {\n      if (!isClient) return\n\n      // reset status\n      loading.value = true\n      hasLoadError.value = false\n\n      const img = new Image()\n      const currentImageSrc = props.src\n\n      // load & error callbacks are only responsible for currentImageSrc\n      img.addEventListener('load', (e) => {\n        if (currentImageSrc !== props.src) {\n          return\n        }\n        handleLoad(e, img)\n      })\n      img.addEventListener('error', (e) => {\n        if (currentImageSrc !== props.src) {\n          return\n        }\n        handleError(e)\n      })\n\n      // bind html attrs\n      // so it can behave consistently\n      Object.entries(attrs.value).forEach(([key, value]) => {\n        // avoid onload to be overwritten\n        if (key.toLowerCase() === 'onload') return\n        img.setAttribute(key, value as string)\n      })\n      img.src = currentImageSrc\n    }\n\n    function handleLoad(e: Event, img: HTMLImageElement) {\n      imgWidth.value = img.width\n      imgHeight.value = img.height\n      loading.value = false\n      hasLoadError.value = false\n    }\n\n    function handleError(event: Event) {\n      loading.value = false\n      hasLoadError.value = true\n      emit('error', event)\n    }\n\n    function handleLazyLoad() {\n      if (isInContainer(container.value, _scrollContainer.value)) {\n        loadImage()\n        removeLazyLoadListener()\n      }\n    }\n    const lazyLoadHandler = useThrottleFn(handleLazyLoad, 200)\n\n    async function addLazyLoadListener() {\n      if (!isClient) return\n\n      await nextTick()\n\n      const { scrollContainer } = props\n      if (isHtmlElement(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\n    function removeLazyLoadListener() {\n      if (!isClient || !_scrollContainer.value || !lazyLoadHandler) return\n\n      stopScrollListener()\n      _scrollContainer.value = undefined\n    }\n\n    function 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\n    function 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    }\n\n    function closeViewer() {\n      stopWheelListener?.()\n      document.body.style.overflow = prevOverflow\n      showViewer.value = false\n      emit('close')\n    }\n\n    function switchViewer(val: number) {\n      emit('switch', val)\n    }\n\n    watch(\n      () => props.src,\n      () => {\n        if (props.lazy) {\n          // reset status\n          loading.value = true\n          hasLoadError.value = false\n          removeLazyLoadListener()\n          addLazyLoadListener()\n        } else {\n          loadImage()\n        }\n      }\n    )\n\n    onMounted(() => {\n      if (props.lazy) {\n        addLazyLoadListener()\n      } else {\n        loadImage()\n      }\n    })\n\n    return {\n      attrs,\n      loading,\n      hasLoadError,\n      showViewer,\n      containerStyle,\n      imageStyle,\n      preview,\n      imageIndex,\n      container,\n\n      clickHandler,\n      closeViewer,\n      switchViewer,\n      t,\n    }\n  },\n})\n</script>\n"],"names":["ImageViewer"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"image.vue_vue_type_template_id_34467287_lang.mjs","sources":["../../../../../../packages/components/image/src/image.vue?vue&type=template&id=34467287&lang.js"],"sourcesContent":["<template>\n  <div\n    ref=\"container\"\n    :class=\"['el-image', $attrs.class]\"\n    :style=\"containerStyle\"\n  >\n    <slot v-if=\"loading\" name=\"placeholder\">\n      <div class=\"el-image__placeholder\"></div>\n    </slot>\n    <slot v-else-if=\"hasLoadError\" name=\"error\">\n      <div class=\"el-image__error\">{{ t('el.image.error') }}</div>\n    </slot>\n    <img\n      v-else\n      class=\"el-image__inner\"\n      v-bind=\"attrs\"\n      :src=\"src\"\n      :style=\"imageStyle\"\n      :class=\"{\n        'el-image__preview': preview,\n      }\"\n      @click=\"clickHandler\"\n    />\n    <teleport to=\"body\" :disabled=\"!appendToBody\">\n      <template v-if=\"preview\">\n        <image-viewer\n          v-if=\"showViewer\"\n          :z-index=\"zIndex\"\n          :initial-index=\"imageIndex\"\n          :url-list=\"previewSrcList\"\n          :hide-on-click-modal=\"hideOnClickModal\"\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    </teleport>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed, ref, onMounted, watch, nextTick } from 'vue'\nimport { isString } from '@vue/shared'\nimport { useEventListener, useThrottleFn, isClient } from '@vueuse/core'\nimport { useAttrs, useLocale } from '@element-plus/hooks'\nimport ImageViewer from '@element-plus/components/image-viewer'\nimport { getScrollContainer, isInContainer } from '@element-plus/utils/dom'\nimport { imageEmits, imageProps } from './image'\n\nimport type { CSSProperties, StyleValue } from 'vue'\n\nconst isHtmlElement = (e: any): e is Element =>\n  e && e.nodeType === Node.ELEMENT_NODE\n\nlet prevOverflow = ''\n\nexport default defineComponent({\n  name: 'ElImage',\n  components: {\n    ImageViewer,\n  },\n  inheritAttrs: false,\n\n  props: imageProps,\n  emits: imageEmits,\n\n  setup(props, { emit, attrs: rawAttrs }) {\n    const { t } = useLocale()\n\n    const attrs = useAttrs()\n    const hasLoadError = ref(false)\n    const loading = ref(true)\n    const imgWidth = ref(0)\n    const imgHeight = ref(0)\n    const showViewer = ref(false)\n    const container = ref<HTMLElement>()\n\n    const _scrollContainer = ref<HTMLElement | Window>()\n    let stopScrollListener: () => void\n    let stopWheelListener: () => void\n\n    const containerStyle = computed(() => rawAttrs.style as StyleValue)\n\n    const imageStyle = computed<CSSProperties>(() => {\n      const { fit } = props\n      if (isClient && fit) {\n        return { objectFit: fit }\n      }\n      return {}\n    })\n\n    const preview = computed(() => {\n      const { previewSrcList } = props\n      return Array.isArray(previewSrcList) && previewSrcList.length > 0\n    })\n\n    const imageIndex = computed(() => {\n      const { src, previewSrcList, initialIndex } = props\n      let previewIndex = initialIndex\n      const srcIndex = previewSrcList.indexOf(src)\n      if (srcIndex >= 0) {\n        previewIndex = srcIndex\n      }\n      return previewIndex\n    })\n\n    const loadImage = () => {\n      if (!isClient) return\n\n      // reset status\n      loading.value = true\n      hasLoadError.value = false\n\n      const img = new Image()\n      img.addEventListener('load', (e) => handleLoad(e, img))\n      img.addEventListener('error', handleError)\n\n      // bind html attrs\n      // so it can behave consistently\n      Object.entries(attrs.value).forEach(([key, value]) => {\n        // avoid onload to be overwritten\n        if (key.toLowerCase() === 'onload') return\n        img.setAttribute(key, value as string)\n      })\n      img.src = props.src\n    }\n\n    function handleLoad(e: Event, img: HTMLImageElement) {\n      imgWidth.value = img.width\n      imgHeight.value = img.height\n      loading.value = false\n      hasLoadError.value = false\n    }\n\n    function handleError(event: Event) {\n      loading.value = false\n      hasLoadError.value = true\n      emit('error', event)\n    }\n\n    function handleLazyLoad() {\n      if (isInContainer(container.value, _scrollContainer.value)) {\n        loadImage()\n        removeLazyLoadListener()\n      }\n    }\n    const lazyLoadHandler = useThrottleFn(handleLazyLoad, 200)\n\n    async function addLazyLoadListener() {\n      if (!isClient) return\n\n      await nextTick()\n\n      const { scrollContainer } = props\n      if (isHtmlElement(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\n    function removeLazyLoadListener() {\n      if (!isClient || !_scrollContainer.value || !lazyLoadHandler) return\n\n      stopScrollListener()\n      _scrollContainer.value = undefined\n    }\n\n    function 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\n    function 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    }\n\n    function closeViewer() {\n      stopWheelListener?.()\n      document.body.style.overflow = prevOverflow\n      showViewer.value = false\n      emit('close')\n    }\n\n    function switchViewer(val: number) {\n      emit('switch', val)\n    }\n\n    watch(\n      () => props.src,\n      () => {\n        if (props.lazy) {\n          // reset status\n          loading.value = true\n          hasLoadError.value = false\n          removeLazyLoadListener()\n          addLazyLoadListener()\n        } else {\n          loadImage()\n        }\n      }\n    )\n\n    onMounted(() => {\n      if (props.lazy) {\n        addLazyLoadListener()\n      } else {\n        loadImage()\n      }\n    })\n\n    return {\n      attrs,\n      loading,\n      hasLoadError,\n      showViewer,\n      containerStyle,\n      imageStyle,\n      preview,\n      imageIndex,\n      container,\n\n      clickHandler,\n      closeViewer,\n      switchViewer,\n      t,\n    }\n  },\n})\n</script>\n"],"names":["_createCommentVNode"],"mappings":";;;;0BAUgB;;;;;;;;;IAPX,KAAK,+CAA2B;;;;;;;;;;;;;;;cAa3B,EAAE;;iBAEA;;;YAGL;;mBAEH;UAAa;;;mBACY;yBAAvB;;;;;kBAIKA,+BAAyB;;;2CAGP;kBAClBA;;;;;;;"}
+{"version":3,"file":"image.vue_vue_type_template_id_34467287_lang.mjs","sources":["../../../../../../packages/components/image/src/image.vue?vue&type=template&id=34467287&lang.js"],"sourcesContent":["<template>\n  <div\n    ref=\"container\"\n    :class=\"['el-image', $attrs.class]\"\n    :style=\"containerStyle\"\n  >\n    <slot v-if=\"loading\" name=\"placeholder\">\n      <div class=\"el-image__placeholder\"></div>\n    </slot>\n    <slot v-else-if=\"hasLoadError\" name=\"error\">\n      <div class=\"el-image__error\">{{ t('el.image.error') }}</div>\n    </slot>\n    <img\n      v-else\n      class=\"el-image__inner\"\n      v-bind=\"attrs\"\n      :src=\"src\"\n      :style=\"imageStyle\"\n      :class=\"{\n        'el-image__preview': preview,\n      }\"\n      @click=\"clickHandler\"\n    />\n    <teleport to=\"body\" :disabled=\"!appendToBody\">\n      <template v-if=\"preview\">\n        <image-viewer\n          v-if=\"showViewer\"\n          :z-index=\"zIndex\"\n          :initial-index=\"imageIndex\"\n          :url-list=\"previewSrcList\"\n          :hide-on-click-modal=\"hideOnClickModal\"\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    </teleport>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed, ref, onMounted, watch, nextTick } from 'vue'\nimport { isString } from '@vue/shared'\nimport { useEventListener, useThrottleFn, isClient } from '@vueuse/core'\nimport { useAttrs, useLocale } from '@element-plus/hooks'\nimport ImageViewer from '@element-plus/components/image-viewer'\nimport { getScrollContainer, isInContainer } from '@element-plus/utils/dom'\nimport { imageEmits, imageProps } from './image'\n\nimport type { CSSProperties, StyleValue } from 'vue'\n\nconst isHtmlElement = (e: any): e is Element =>\n  e && e.nodeType === Node.ELEMENT_NODE\n\nlet prevOverflow = ''\n\nexport default defineComponent({\n  name: 'ElImage',\n  components: {\n    ImageViewer,\n  },\n  inheritAttrs: false,\n\n  props: imageProps,\n  emits: imageEmits,\n\n  setup(props, { emit, attrs: rawAttrs }) {\n    const { t } = useLocale()\n\n    const attrs = useAttrs()\n    const hasLoadError = ref(false)\n    const loading = ref(true)\n    const imgWidth = ref(0)\n    const imgHeight = ref(0)\n    const showViewer = ref(false)\n    const container = ref<HTMLElement>()\n\n    const _scrollContainer = ref<HTMLElement | Window>()\n    let stopScrollListener: () => void\n    let stopWheelListener: () => void\n\n    const containerStyle = computed(() => rawAttrs.style as StyleValue)\n\n    const imageStyle = computed<CSSProperties>(() => {\n      const { fit } = props\n      if (isClient && fit) {\n        return { objectFit: fit }\n      }\n      return {}\n    })\n\n    const preview = computed(() => {\n      const { previewSrcList } = props\n      return Array.isArray(previewSrcList) && previewSrcList.length > 0\n    })\n\n    const imageIndex = computed(() => {\n      const { src, previewSrcList, initialIndex } = props\n      let previewIndex = initialIndex\n      const srcIndex = previewSrcList.indexOf(src)\n      if (srcIndex >= 0) {\n        previewIndex = srcIndex\n      }\n      return previewIndex\n    })\n\n    const loadImage = () => {\n      if (!isClient) return\n\n      // reset status\n      loading.value = true\n      hasLoadError.value = false\n\n      const img = new Image()\n      const currentImageSrc = props.src\n\n      // load & error callbacks are only responsible for currentImageSrc\n      img.addEventListener('load', (e) => {\n        if (currentImageSrc !== props.src) {\n          return\n        }\n        handleLoad(e, img)\n      })\n      img.addEventListener('error', (e) => {\n        if (currentImageSrc !== props.src) {\n          return\n        }\n        handleError(e)\n      })\n\n      // bind html attrs\n      // so it can behave consistently\n      Object.entries(attrs.value).forEach(([key, value]) => {\n        // avoid onload to be overwritten\n        if (key.toLowerCase() === 'onload') return\n        img.setAttribute(key, value as string)\n      })\n      img.src = currentImageSrc\n    }\n\n    function handleLoad(e: Event, img: HTMLImageElement) {\n      imgWidth.value = img.width\n      imgHeight.value = img.height\n      loading.value = false\n      hasLoadError.value = false\n    }\n\n    function handleError(event: Event) {\n      loading.value = false\n      hasLoadError.value = true\n      emit('error', event)\n    }\n\n    function handleLazyLoad() {\n      if (isInContainer(container.value, _scrollContainer.value)) {\n        loadImage()\n        removeLazyLoadListener()\n      }\n    }\n    const lazyLoadHandler = useThrottleFn(handleLazyLoad, 200)\n\n    async function addLazyLoadListener() {\n      if (!isClient) return\n\n      await nextTick()\n\n      const { scrollContainer } = props\n      if (isHtmlElement(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\n    function removeLazyLoadListener() {\n      if (!isClient || !_scrollContainer.value || !lazyLoadHandler) return\n\n      stopScrollListener()\n      _scrollContainer.value = undefined\n    }\n\n    function 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\n    function 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    }\n\n    function closeViewer() {\n      stopWheelListener?.()\n      document.body.style.overflow = prevOverflow\n      showViewer.value = false\n      emit('close')\n    }\n\n    function switchViewer(val: number) {\n      emit('switch', val)\n    }\n\n    watch(\n      () => props.src,\n      () => {\n        if (props.lazy) {\n          // reset status\n          loading.value = true\n          hasLoadError.value = false\n          removeLazyLoadListener()\n          addLazyLoadListener()\n        } else {\n          loadImage()\n        }\n      }\n    )\n\n    onMounted(() => {\n      if (props.lazy) {\n        addLazyLoadListener()\n      } else {\n        loadImage()\n      }\n    })\n\n    return {\n      attrs,\n      loading,\n      hasLoadError,\n      showViewer,\n      containerStyle,\n      imageStyle,\n      preview,\n      imageIndex,\n      container,\n\n      clickHandler,\n      closeViewer,\n      switchViewer,\n      t,\n    }\n  },\n})\n</script>\n"],"names":["_createCommentVNode"],"mappings":";;;;0BAUgB;;;;;;;;;IAPX,KAAK,+CAA2B;;;;;;;;;;;;;;;cAa3B,EAAE;;iBAEA;;;YAGL;;mBAEH;UAAa;;;mBACY;yBAAvB;;;;;kBAIKA,+BAAyB;;;2CAGP;kBAClBA;;;;;;;"}

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

@@ -28,19 +28,13 @@ export declare const ElImageViewer: import("../../utils/types").SFCWithInstall<i
 }, 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: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
-    initialIndex: number;
-    urlList: string[];
-    hideOnClickModal: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
-} & {}> & {
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    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>;
+}>> & {
     onClose?: (() => any) | undefined;
     onSwitch?: ((index: number) => any) | undefined;
 }, {

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

@@ -30,19 +30,13 @@ declare const _default: import("vue").DefineComponent<{
 }, 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: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
-    initialIndex: number;
-    urlList: string[];
-    hideOnClickModal: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
-} & {}> & {
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    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>;
+}>> & {
     onClose?: (() => any) | undefined;
     onSwitch?: ((index: number) => any) | undefined;
 }, {