@element-plus/nightly 0.0.20240628 → 0.0.20240629

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

@@ -1,232 +1,70 @@
-import { defineComponent, useAttrs, ref, computed, nextTick, watch, onMounted, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle, renderSlot, createElementVNode, toDisplayString, Fragment, mergeProps, createCommentVNode, createBlock, withCtx } from 'vue';
-import { isClient, useThrottleFn, useEventListener } from '@vueuse/core';
-import '../../../hooks/index.mjs';
-import { ElImageViewer } from '../../image-viewer/index.mjs';
 import '../../../utils/index.mjs';
-import { imageProps, imageEmits } from './image2.mjs';
-import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
-import { useLocale } from '../../../hooks/use-locale/index.mjs';
-import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
-import { useAttrs as useAttrs$1 } from '../../../hooks/use-attrs/index.mjs';
-import { isInContainer } from '../../../utils/dom/position.mjs';
-import { isElement } from '../../../utils/types.mjs';
-import { isString } from '@vue/shared';
-import { getScrollContainer } from '../../../utils/dom/scroll.mjs';
+import { buildProps, definePropType } from '../../../utils/vue/props/runtime.mjs';
+import { mutable } from '../../../utils/typescript.mjs';
+import { isNumber } from '../../../utils/types.mjs';
 
-const _hoisted_1 = ["src", "loading", "crossorigin"];
-const _hoisted_2 = { key: 0 };
-const __default__ = defineComponent({
-  name: "ElImage",
-  inheritAttrs: false
-});
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...__default__,
-  props: imageProps,
-  emits: imageEmits,
-  setup(__props, { emit }) {
-    const props = __props;
-    let prevOverflow = "";
-    const { t } = useLocale();
-    const ns = useNamespace("image");
-    const rawAttrs = useAttrs();
-    const attrs = useAttrs$1();
-    const imageSrc = ref();
-    const hasLoadError = ref(false);
-    const isLoading = ref(true);
-    const showViewer = ref(false);
-    const container = ref();
-    const _scrollContainer = ref();
-    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;
-      if (isClient && fit) {
-        return { objectFit: fit };
-      }
-      return {};
-    });
-    const preview = computed(() => {
-      const { previewSrcList } = props;
-      return Array.isArray(previewSrcList) && previewSrcList.length > 0;
-    });
-    const imageIndex = computed(() => {
-      const { previewSrcList, initialIndex } = props;
-      let previewIndex = initialIndex;
-      if (initialIndex > previewSrcList.length - 1) {
-        previewIndex = 0;
-      }
-      return previewIndex;
-    });
-    const isManual = computed(() => {
-      if (props.loading === "eager")
-        return false;
-      return !supportLoading && props.loading === "lazy" || props.lazy;
-    });
-    const loadImage = () => {
-      if (!isClient)
-        return;
-      isLoading.value = true;
-      hasLoadError.value = false;
-      imageSrc.value = props.src;
-    };
-    function handleLoad(event) {
-      isLoading.value = false;
-      hasLoadError.value = false;
-      emit("load", event);
-    }
-    function handleError(event) {
-      isLoading.value = false;
-      hasLoadError.value = true;
-      emit("error", event);
-    }
-    function handleLazyLoad() {
-      if (isInContainer(container.value, _scrollContainer.value)) {
-        loadImage();
-        removeLazyLoadListener();
-      }
-    }
-    const lazyLoadHandler = useThrottleFn(handleLazyLoad, 200, true);
-    async function addLazyLoadListener() {
-      var _a;
-      if (!isClient)
-        return;
-      await nextTick();
-      const { scrollContainer } = props;
-      if (isElement(scrollContainer)) {
-        _scrollContainer.value = scrollContainer;
-      } else if (isString(scrollContainer) && scrollContainer !== "") {
-        _scrollContainer.value = (_a = document.querySelector(scrollContainer)) != null ? _a : void 0;
-      } else if (container.value) {
-        _scrollContainer.value = getScrollContainer(container.value);
-      }
-      if (_scrollContainer.value) {
-        stopScrollListener = useEventListener(_scrollContainer, "scroll", lazyLoadHandler);
-        setTimeout(() => handleLazyLoad(), 100);
-      }
-    }
-    function removeLazyLoadListener() {
-      if (!isClient || !_scrollContainer.value || !lazyLoadHandler)
-        return;
-      stopScrollListener == null ? void 0 : stopScrollListener();
-      _scrollContainer.value = void 0;
-    }
-    function wheelHandler(e) {
-      if (!e.ctrlKey)
-        return;
-      if (e.deltaY < 0) {
-        e.preventDefault();
-        return false;
-      } else if (e.deltaY > 0) {
-        e.preventDefault();
-        return false;
-      }
-    }
-    function clickHandler() {
-      if (!preview.value)
-        return;
-      stopWheelListener = useEventListener("wheel", wheelHandler, {
-        passive: false
-      });
-      prevOverflow = document.body.style.overflow;
-      document.body.style.overflow = "hidden";
-      showViewer.value = true;
-      emit("show");
-    }
-    function closeViewer() {
-      stopWheelListener == null ? void 0 : stopWheelListener();
-      document.body.style.overflow = prevOverflow;
-      showViewer.value = false;
-      emit("close");
-    }
-    function switchViewer(val) {
-      emit("switch", val);
-    }
-    watch(() => props.src, () => {
-      if (isManual.value) {
-        isLoading.value = true;
-        hasLoadError.value = false;
-        removeLazyLoadListener();
-        addLazyLoadListener();
-      } else {
-        loadImage();
-      }
-    });
-    onMounted(() => {
-      if (isManual.value) {
-        addLazyLoadListener();
-      } else {
-        loadImage();
-      }
-    });
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", {
-        ref_key: "container",
-        ref: container,
-        class: normalizeClass([unref(ns).b(), _ctx.$attrs.class]),
-        style: normalizeStyle(unref(containerStyle))
-      }, [
-        hasLoadError.value ? renderSlot(_ctx.$slots, "error", { key: 0 }, () => [
-          createElementVNode("div", {
-            class: normalizeClass(unref(ns).e("error"))
-          }, toDisplayString(unref(t)("el.image.error")), 3)
-        ]) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-          imageSrc.value !== void 0 ? (openBlock(), createElementBlock("img", mergeProps({ key: 0 }, unref(attrs), {
-            src: imageSrc.value,
-            loading: _ctx.loading,
-            style: unref(imageStyle),
-            class: unref(imageKls),
-            crossorigin: _ctx.crossorigin,
-            onClick: clickHandler,
-            onLoad: handleLoad,
-            onError: handleError
-          }), null, 16, _hoisted_1)) : createCommentVNode("v-if", true),
-          isLoading.value ? (openBlock(), createElementBlock("div", {
-            key: 1,
-            class: normalizeClass(unref(ns).e("wrapper"))
-          }, [
-            renderSlot(_ctx.$slots, "placeholder", {}, () => [
-              createElementVNode("div", {
-                class: normalizeClass(unref(ns).e("placeholder"))
-              }, null, 2)
-            ])
-          ], 2)) : createCommentVNode("v-if", true)
-        ], 64)),
-        unref(preview) ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
-          showViewer.value ? (openBlock(), createBlock(unref(ElImageViewer), {
-            key: 0,
-            "z-index": _ctx.zIndex,
-            "initial-index": unref(imageIndex),
-            infinite: _ctx.infinite,
-            "zoom-rate": _ctx.zoomRate,
-            "min-scale": _ctx.minScale,
-            "max-scale": _ctx.maxScale,
-            "url-list": _ctx.previewSrcList,
-            "hide-on-click-modal": _ctx.hideOnClickModal,
-            teleported: _ctx.previewTeleported,
-            "close-on-press-escape": _ctx.closeOnPressEscape,
-            onClose: closeViewer,
-            onSwitch: switchViewer
-          }, {
-            default: withCtx(() => [
-              _ctx.$slots.viewer ? (openBlock(), createElementBlock("div", _hoisted_2, [
-                renderSlot(_ctx.$slots, "viewer")
-              ])) : createCommentVNode("v-if", true)
-            ]),
-            _: 3
-          }, 8, ["z-index", "initial-index", "infinite", "zoom-rate", "min-scale", "max-scale", "url-list", "hide-on-click-modal", "teleported", "close-on-press-escape"])) : createCommentVNode("v-if", true)
-        ], 64)) : createCommentVNode("v-if", true)
-      ], 6);
-    };
+const imageProps = buildProps({
+  hideOnClickModal: Boolean,
+  src: {
+    type: String,
+    default: ""
+  },
+  fit: {
+    type: String,
+    values: ["", "contain", "cover", "fill", "none", "scale-down"],
+    default: ""
+  },
+  loading: {
+    type: String,
+    values: ["eager", "lazy"]
+  },
+  lazy: Boolean,
+  scrollContainer: {
+    type: definePropType([String, Object])
+  },
+  previewSrcList: {
+    type: definePropType(Array),
+    default: () => mutable([])
+  },
+  previewTeleported: Boolean,
+  zIndex: {
+    type: Number
+  },
+  initialIndex: {
+    type: Number,
+    default: 0
+  },
+  infinite: {
+    type: Boolean,
+    default: true
+  },
+  closeOnPressEscape: {
+    type: Boolean,
+    default: true
+  },
+  zoomRate: {
+    type: Number,
+    default: 1.2
+  },
+  minScale: {
+    type: Number,
+    default: 0.2
+  },
+  maxScale: {
+    type: Number,
+    default: 7
+  },
+  crossorigin: {
+    type: definePropType(String)
   }
 });
-var Image = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "image.vue"]]);
+const imageEmits = {
+  load: (evt) => evt instanceof Event,
+  error: (evt) => evt instanceof Event,
+  switch: (val) => isNumber(val),
+  close: () => true,
+  show: () => true
+};
 
-export { Image as default };
+export { imageEmits, imageProps };
 //# sourceMappingURL=image.mjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"image.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        :crossorigin=\"crossorigin\"\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        :min-scale=\"minScale\"\n        :max-scale=\"maxScale\"\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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"}
+{"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  /**\n   * @description the min scale of the image viewer zoom event.\n   */\n  minScale: {\n    type: Number,\n    default: 0.2,\n  },\n  /**\n   * @description the max scale of the image viewer zoom event.\n   */\n  maxScale: {\n    type: Number,\n    default: 7,\n  },\n  /**\n   * @description set HTML attribute: crossorigin.\n   */\n  crossorigin: {\n    type: definePropType<'anonymous' | 'use-credentials' | ''>(String),\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,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,GAAG;AAChB,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,WAAW,EAAE;AACf,IAAI,IAAI,EAAE,cAAc,CAAC,MAAM,CAAC;AAChC,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

@@ -81,7 +81,7 @@ declare const _default: import("vue").DefineComponent<{
         onLoad?: ((evt: Event) => any) | undefined;
         onSwitch?: ((val: number) => any) | undefined;
     }>>;
-    emit: ((event: "close") => void) & ((event: "error", evt: Event) => void) & ((event: "load", evt: Event) => void) & ((event: "show") => void) & ((event: "switch", val: number) => void);
+    emit: ((event: "error", evt: Event) => void) & ((event: "close") => void) & ((event: "show") => void) & ((event: "load", evt: Event) => void) & ((event: "switch", val: number) => void);
     prevOverflow: string;
     t: import("@element-plus/nightly/es/hooks").Translator;
     ns: {

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

@@ -1,70 +1,232 @@
+import { defineComponent, useAttrs, ref, computed, nextTick, watch, onMounted, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle, renderSlot, createElementVNode, toDisplayString, Fragment, mergeProps, createCommentVNode, createBlock, withCtx } from 'vue';
+import { isClient, useThrottleFn, useEventListener } from '@vueuse/core';
+import '../../../hooks/index.mjs';
+import { ElImageViewer } from '../../image-viewer/index.mjs';
 import '../../../utils/index.mjs';
-import { buildProps, definePropType } from '../../../utils/vue/props/runtime.mjs';
-import { mutable } from '../../../utils/typescript.mjs';
-import { isNumber } from '../../../utils/types.mjs';
+import { imageProps, imageEmits } from './image.mjs';
+import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
+import { useLocale } from '../../../hooks/use-locale/index.mjs';
+import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
+import { useAttrs as useAttrs$1 } from '../../../hooks/use-attrs/index.mjs';
+import { isInContainer } from '../../../utils/dom/position.mjs';
+import { isElement } from '../../../utils/types.mjs';
+import { isString } from '@vue/shared';
+import { getScrollContainer } from '../../../utils/dom/scroll.mjs';
 
-const imageProps = buildProps({
-  hideOnClickModal: Boolean,
-  src: {
-    type: String,
-    default: ""
-  },
-  fit: {
-    type: String,
-    values: ["", "contain", "cover", "fill", "none", "scale-down"],
-    default: ""
-  },
-  loading: {
-    type: String,
-    values: ["eager", "lazy"]
-  },
-  lazy: Boolean,
-  scrollContainer: {
-    type: definePropType([String, Object])
-  },
-  previewSrcList: {
-    type: definePropType(Array),
-    default: () => mutable([])
-  },
-  previewTeleported: Boolean,
-  zIndex: {
-    type: Number
-  },
-  initialIndex: {
-    type: Number,
-    default: 0
-  },
-  infinite: {
-    type: Boolean,
-    default: true
-  },
-  closeOnPressEscape: {
-    type: Boolean,
-    default: true
-  },
-  zoomRate: {
-    type: Number,
-    default: 1.2
-  },
-  minScale: {
-    type: Number,
-    default: 0.2
-  },
-  maxScale: {
-    type: Number,
-    default: 7
-  },
-  crossorigin: {
-    type: definePropType(String)
+const _hoisted_1 = ["src", "loading", "crossorigin"];
+const _hoisted_2 = { key: 0 };
+const __default__ = defineComponent({
+  name: "ElImage",
+  inheritAttrs: false
+});
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  props: imageProps,
+  emits: imageEmits,
+  setup(__props, { emit }) {
+    const props = __props;
+    let prevOverflow = "";
+    const { t } = useLocale();
+    const ns = useNamespace("image");
+    const rawAttrs = useAttrs();
+    const attrs = useAttrs$1();
+    const imageSrc = ref();
+    const hasLoadError = ref(false);
+    const isLoading = ref(true);
+    const showViewer = ref(false);
+    const container = ref();
+    const _scrollContainer = ref();
+    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;
+      if (isClient && fit) {
+        return { objectFit: fit };
+      }
+      return {};
+    });
+    const preview = computed(() => {
+      const { previewSrcList } = props;
+      return Array.isArray(previewSrcList) && previewSrcList.length > 0;
+    });
+    const imageIndex = computed(() => {
+      const { previewSrcList, initialIndex } = props;
+      let previewIndex = initialIndex;
+      if (initialIndex > previewSrcList.length - 1) {
+        previewIndex = 0;
+      }
+      return previewIndex;
+    });
+    const isManual = computed(() => {
+      if (props.loading === "eager")
+        return false;
+      return !supportLoading && props.loading === "lazy" || props.lazy;
+    });
+    const loadImage = () => {
+      if (!isClient)
+        return;
+      isLoading.value = true;
+      hasLoadError.value = false;
+      imageSrc.value = props.src;
+    };
+    function handleLoad(event) {
+      isLoading.value = false;
+      hasLoadError.value = false;
+      emit("load", event);
+    }
+    function handleError(event) {
+      isLoading.value = false;
+      hasLoadError.value = true;
+      emit("error", event);
+    }
+    function handleLazyLoad() {
+      if (isInContainer(container.value, _scrollContainer.value)) {
+        loadImage();
+        removeLazyLoadListener();
+      }
+    }
+    const lazyLoadHandler = useThrottleFn(handleLazyLoad, 200, true);
+    async function addLazyLoadListener() {
+      var _a;
+      if (!isClient)
+        return;
+      await nextTick();
+      const { scrollContainer } = props;
+      if (isElement(scrollContainer)) {
+        _scrollContainer.value = scrollContainer;
+      } else if (isString(scrollContainer) && scrollContainer !== "") {
+        _scrollContainer.value = (_a = document.querySelector(scrollContainer)) != null ? _a : void 0;
+      } else if (container.value) {
+        _scrollContainer.value = getScrollContainer(container.value);
+      }
+      if (_scrollContainer.value) {
+        stopScrollListener = useEventListener(_scrollContainer, "scroll", lazyLoadHandler);
+        setTimeout(() => handleLazyLoad(), 100);
+      }
+    }
+    function removeLazyLoadListener() {
+      if (!isClient || !_scrollContainer.value || !lazyLoadHandler)
+        return;
+      stopScrollListener == null ? void 0 : stopScrollListener();
+      _scrollContainer.value = void 0;
+    }
+    function wheelHandler(e) {
+      if (!e.ctrlKey)
+        return;
+      if (e.deltaY < 0) {
+        e.preventDefault();
+        return false;
+      } else if (e.deltaY > 0) {
+        e.preventDefault();
+        return false;
+      }
+    }
+    function clickHandler() {
+      if (!preview.value)
+        return;
+      stopWheelListener = useEventListener("wheel", wheelHandler, {
+        passive: false
+      });
+      prevOverflow = document.body.style.overflow;
+      document.body.style.overflow = "hidden";
+      showViewer.value = true;
+      emit("show");
+    }
+    function closeViewer() {
+      stopWheelListener == null ? void 0 : stopWheelListener();
+      document.body.style.overflow = prevOverflow;
+      showViewer.value = false;
+      emit("close");
+    }
+    function switchViewer(val) {
+      emit("switch", val);
+    }
+    watch(() => props.src, () => {
+      if (isManual.value) {
+        isLoading.value = true;
+        hasLoadError.value = false;
+        removeLazyLoadListener();
+        addLazyLoadListener();
+      } else {
+        loadImage();
+      }
+    });
+    onMounted(() => {
+      if (isManual.value) {
+        addLazyLoadListener();
+      } else {
+        loadImage();
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "container",
+        ref: container,
+        class: normalizeClass([unref(ns).b(), _ctx.$attrs.class]),
+        style: normalizeStyle(unref(containerStyle))
+      }, [
+        hasLoadError.value ? renderSlot(_ctx.$slots, "error", { key: 0 }, () => [
+          createElementVNode("div", {
+            class: normalizeClass(unref(ns).e("error"))
+          }, toDisplayString(unref(t)("el.image.error")), 3)
+        ]) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+          imageSrc.value !== void 0 ? (openBlock(), createElementBlock("img", mergeProps({ key: 0 }, unref(attrs), {
+            src: imageSrc.value,
+            loading: _ctx.loading,
+            style: unref(imageStyle),
+            class: unref(imageKls),
+            crossorigin: _ctx.crossorigin,
+            onClick: clickHandler,
+            onLoad: handleLoad,
+            onError: handleError
+          }), null, 16, _hoisted_1)) : createCommentVNode("v-if", true),
+          isLoading.value ? (openBlock(), createElementBlock("div", {
+            key: 1,
+            class: normalizeClass(unref(ns).e("wrapper"))
+          }, [
+            renderSlot(_ctx.$slots, "placeholder", {}, () => [
+              createElementVNode("div", {
+                class: normalizeClass(unref(ns).e("placeholder"))
+              }, null, 2)
+            ])
+          ], 2)) : createCommentVNode("v-if", true)
+        ], 64)),
+        unref(preview) ? (openBlock(), createElementBlock(Fragment, { key: 2 }, [
+          showViewer.value ? (openBlock(), createBlock(unref(ElImageViewer), {
+            key: 0,
+            "z-index": _ctx.zIndex,
+            "initial-index": unref(imageIndex),
+            infinite: _ctx.infinite,
+            "zoom-rate": _ctx.zoomRate,
+            "min-scale": _ctx.minScale,
+            "max-scale": _ctx.maxScale,
+            "url-list": _ctx.previewSrcList,
+            "hide-on-click-modal": _ctx.hideOnClickModal,
+            teleported: _ctx.previewTeleported,
+            "close-on-press-escape": _ctx.closeOnPressEscape,
+            onClose: closeViewer,
+            onSwitch: switchViewer
+          }, {
+            default: withCtx(() => [
+              _ctx.$slots.viewer ? (openBlock(), createElementBlock("div", _hoisted_2, [
+                renderSlot(_ctx.$slots, "viewer")
+              ])) : createCommentVNode("v-if", true)
+            ]),
+            _: 3
+          }, 8, ["z-index", "initial-index", "infinite", "zoom-rate", "min-scale", "max-scale", "url-list", "hide-on-click-modal", "teleported", "close-on-press-escape"])) : createCommentVNode("v-if", true)
+        ], 64)) : createCommentVNode("v-if", true)
+      ], 6);
+    };
   }
 });
-const imageEmits = {
-  load: (evt) => evt instanceof Event,
-  error: (evt) => evt instanceof Event,
-  switch: (val) => isNumber(val),
-  close: () => true,
-  show: () => true
-};
+var Image = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "image.vue"]]);
 
-export { imageEmits, imageProps };
+export { Image as default };
 //# sourceMappingURL=image2.mjs.map