element-pe 1.0.8 → 1.0.9-alpha.12

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

@@ -0,0 +1,30 @@
+import { defineComponent, computed } from 'vue';
+import { isNumber } from '../../../utils/util.mjs';
+import { iconProps } from './icon.mjs';
+import { isString } from '@vue/shared';
+
+var script = defineComponent({
+  name: "ElIcon",
+  inheritAttrs: false,
+  props: iconProps,
+  setup(props) {
+    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 ? { "--font-size": size } : {},
+          ...props.color ? { "--color": props.color } : {}
+        };
+      })
+    };
+  }
+});
+
+export { script as default };
+//# sourceMappingURL=icon.vue_vue_type_script_lang.mjs.map

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

@@ -0,0 +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 ? { '--font-size': size } : {}),\n          ...(props.color ? { '--color': props.color } : {}),\n        } as CSSProperties\n      }),\n    }\n  },\n})\n</script>\n"],"names":[],"mappings":";;;;;AAaA,aAAe,gBAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,cAAc;AAAA,EAEd,OAAO;AAAA,EAEP,MAAM,OAAO;AACX,WAAO;AAAA,MACL,OAAO,SAAwB,MAAM;AACnC,YAAI,CAAC,MAAM,QAAQ,CAAC,MAAM,OAAO;AAC/B,iBAAO;AAAA;AAET,YAAI,OAAO,MAAM;AACjB,YAAI,SAAS,SAAU,SAAS,SAAS,CAAC,KAAK,SAAS,OAAQ;AAC9D,iBAAO,GAAG;AAAA;AAEZ,eAAO;AAAA,aACD,MAAM,OAAO,EAAE,eAAe,SAAS;AAAA,aACvC,MAAM,QAAQ,EAAE,WAAW,MAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;;;;"}

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

@@ -0,0 +1,13 @@
+import { openBlock, createElementBlock, mergeProps, renderSlot } from 'vue';
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("i", mergeProps({
+    class: "el-icon",
+    style: _ctx.style
+  }, _ctx.$attrs), [
+    renderSlot(_ctx.$slots, "default")
+  ], 16);
+}
+
+export { render };
+//# sourceMappingURL=icon.vue_vue_type_template_id_89b755b6_lang.mjs.map

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

@@ -0,0 +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 ? { '--font-size': size } : {}),\n          ...(props.color ? { '--color': props.color } : {}),\n        } as CSSProperties\n      }),\n    }\n  },\n})\n</script>\n"],"names":["_createElementBlock","_mergeProps","_renderSlot"],"mappings":";;;sBACEA,wBAAAC;IAAG,OAAM;AAAA,IAAW,OAAO;KAAe;IACxCC;;;;;;"}

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

@@ -1,6 +1,6 @@
-import script from './icon.vue_vue&type=script&lang.mjs';
-export { default } from './icon.vue_vue&type=script&lang.mjs';
-import { render } from './icon.vue_vue&type=template&id=89b755b6&lang.mjs';
+import script from './icon.vue_vue_type_script_lang.mjs';
+export { default } from './icon.vue_vue_type_script_lang.mjs';
+import { render } from './icon.vue_vue_type_template_id_89b755b6_lang.mjs';
 
 script.render = render;
 script.__file = "packages/components/icon/src/icon.vue";

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

@@ -21,7 +21,7 @@ export declare const ElImage: import("../../utils/types").SFCWithInstall<import(
     clickHandler: () => void;
     closeViewer: () => void;
     switchViewer: (val: number) => void;
-    t: (...args: any[]) => string;
+    t: import("../..").Translator;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     error: (evt: Event) => boolean;
     switch: (val: number) => boolean;
@@ -37,12 +37,12 @@ export declare const ElImage: import("../../utils/types").SFCWithInstall<import(
     readonly zIndex?: unknown;
     readonly initialIndex?: unknown;
 } & {
+    lazy: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     zIndex: number;
     appendToBody: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     src: string;
     fit: import("../../utils/props").BuildPropType<StringConstructor, "" | "fill" | "none" | "contain" | "cover" | "scale-down", unknown>;
     initialIndex: number;
-    lazy: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     hideOnClickModal: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     previewSrcList: string[];
 } & {
@@ -52,12 +52,12 @@ export declare const ElImage: import("../../utils/types").SFCWithInstall<import(
     onError?: ((evt: Event) => any) | undefined;
     onSwitch?: ((val: number) => any) | undefined;
 }, {
+    lazy: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     zIndex: number;
     appendToBody: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     src: string;
     fit: import("../../utils/props").BuildPropType<StringConstructor, "" | "fill" | "none" | "contain" | "cover" | "scale-down", unknown>;
     initialIndex: number;
-    lazy: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     hideOnClickModal: import("../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     scrollContainer: import("../../utils/props").BuildPropType<import("../../utils/props").PropWrapper<string | HTMLElement | undefined>, unknown, unknown>;
     previewSrcList: string[];

package/es/components/image/index.mjs

@@ -1,7 +1,7 @@
 import { withInstall } from '../../utils/with-install.mjs';
 import './src/image2.mjs';
 export { imageEmits, imageProps } from './src/image.mjs';
-import script from './src/image.vue_vue&type=script&lang.mjs';
+import script from './src/image.vue_vue_type_script_lang.mjs';
 
 const ElImage = withInstall(script);
 

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

@@ -22,7 +22,7 @@ declare const _default: import("vue").DefineComponent<{
     clickHandler: () => void;
     closeViewer: () => void;
     switchViewer: (val: number) => void;
-    t: (...args: any[]) => string;
+    t: import("element-pe/es/hooks").Translator;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     error: (evt: Event) => boolean;
     switch: (val: number) => boolean;
@@ -38,12 +38,12 @@ declare const _default: import("vue").DefineComponent<{
     readonly zIndex?: unknown;
     readonly initialIndex?: unknown;
 } & {
+    lazy: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     zIndex: number;
     appendToBody: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     src: string;
     fit: import("../../../utils/props").BuildPropType<StringConstructor, "" | "fill" | "none" | "contain" | "cover" | "scale-down", unknown>;
     initialIndex: number;
-    lazy: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     hideOnClickModal: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     previewSrcList: string[];
 } & {
@@ -53,12 +53,12 @@ declare const _default: import("vue").DefineComponent<{
     onError?: ((evt: Event) => any) | undefined;
     onSwitch?: ((val: number) => any) | undefined;
 }, {
+    lazy: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     zIndex: number;
     appendToBody: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     src: string;
     fit: import("../../../utils/props").BuildPropType<StringConstructor, "" | "fill" | "none" | "contain" | "cover" | "scale-down", unknown>;
     initialIndex: number;
-    lazy: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     hideOnClickModal: import("../../../utils/props").BuildPropType<BooleanConstructor, unknown, unknown>;
     scrollContainer: import("../../../utils/props").BuildPropType<import("../../../utils/props").PropWrapper<string | HTMLElement | undefined>, unknown, unknown>;
     previewSrcList: string[];

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

@@ -0,0 +1,178 @@
+import { defineComponent, ref, computed, nextTick, watch, onMounted } from 'vue';
+import { isString } from '@vue/shared';
+import { useThrottleFn, useEventListener } from '@vueuse/core';
+import '../../../hooks/index.mjs';
+import { ElImageViewer } from '../../image-viewer/index.mjs';
+import isServer from '../../../utils/isServer.mjs';
+import { isInContainer, getScrollContainer } from '../../../utils/dom.mjs';
+import { imageProps, imageEmits } from './image.mjs';
+import { useLocale } from '../../../hooks/use-locale/index.mjs';
+import { useAttrs } from '../../../hooks/use-attrs/index.mjs';
+
+const isHtmlElement = (e) => e && e.nodeType === Node.ELEMENT_NODE;
+let prevOverflow = "";
+var script = defineComponent({
+  name: "ElImage",
+  components: {
+    ImageViewer: ElImageViewer
+  },
+  inheritAttrs: false,
+  props: imageProps,
+  emits: imageEmits,
+  setup(props, { emit, attrs: rawAttrs }) {
+    const { t } = useLocale();
+    const attrs = useAttrs();
+    const hasLoadError = ref(false);
+    const loading = ref(true);
+    const imgWidth = ref(0);
+    const imgHeight = ref(0);
+    const showViewer = ref(false);
+    const container = ref();
+    const _scrollContainer = ref();
+    let stopScrollListener;
+    let stopWheelListener;
+    const containerStyle = computed(() => rawAttrs.style);
+    const imageStyle = computed(() => {
+      const { fit } = props;
+      if (!isServer && fit) {
+        return { objectFit: fit };
+      }
+      return {};
+    });
+    const preview = computed(() => {
+      const { previewSrcList } = props;
+      return Array.isArray(previewSrcList) && previewSrcList.length > 0;
+    });
+    const imageIndex = computed(() => {
+      const { src, previewSrcList, initialIndex } = props;
+      let previewIndex = initialIndex;
+      const srcIndex = previewSrcList.indexOf(src);
+      if (srcIndex >= 0) {
+        previewIndex = srcIndex;
+      }
+      return previewIndex;
+    });
+    const loadImage = () => {
+      if (isServer)
+        return;
+      loading.value = true;
+      hasLoadError.value = false;
+      const img = new Image();
+      img.addEventListener("load", (e) => handleLoad(e, img));
+      img.addEventListener("error", handleError);
+      Object.entries(attrs.value).forEach(([key, value]) => {
+        if (key.toLowerCase() === "onload")
+          return;
+        img.setAttribute(key, value);
+      });
+      img.src = props.src;
+    };
+    function handleLoad(e, img) {
+      imgWidth.value = img.width;
+      imgHeight.value = img.height;
+      loading.value = false;
+      hasLoadError.value = false;
+    }
+    function handleError(event) {
+      loading.value = false;
+      hasLoadError.value = true;
+      emit("error", event);
+    }
+    function handleLazyLoad() {
+      if (isInContainer(container.value, _scrollContainer.value)) {
+        loadImage();
+        removeLazyLoadListener();
+      }
+    }
+    const lazyLoadHandler = useThrottleFn(handleLazyLoad, 200);
+    async function addLazyLoadListener() {
+      var _a;
+      if (isServer)
+        return;
+      await nextTick();
+      const { scrollContainer } = props;
+      if (isHtmlElement(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 (isServer || !_scrollContainer.value || !lazyLoadHandler)
+        return;
+      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;
+    }
+    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 (props.lazy) {
+        loading.value = true;
+        hasLoadError.value = false;
+        removeLazyLoadListener();
+        addLazyLoadListener();
+      } else {
+        loadImage();
+      }
+    });
+    onMounted(() => {
+      if (props.lazy) {
+        addLazyLoadListener();
+      } else {
+        loadImage();
+      }
+    });
+    return {
+      attrs,
+      loading,
+      hasLoadError,
+      showViewer,
+      containerStyle,
+      imageStyle,
+      preview,
+      imageIndex,
+      container,
+      clickHandler,
+      closeViewer,
+      switchViewer,
+      t
+    };
+  }
+});
+
+export { script as default };
+//# sourceMappingURL=image.vue_vue_type_script_lang.mjs.map

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

@@ -0,0 +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 } from '@vueuse/core'\nimport { useAttrs, useLocale } from '@element-plus/hooks'\nimport ImageViewer from '@element-plus/components/image-viewer'\nimport isServer from '@element-plus/utils/isServer'\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 (!isServer && 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 (isServer) 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 (isServer) 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 (isServer || !_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

@@ -0,0 +1,56 @@
+import { createElementVNode, resolveComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, renderSlot, toDisplayString, mergeProps, createBlock, Teleport, Fragment, withCtx, createCommentVNode } from 'vue';
+
+const _hoisted_1 = /* @__PURE__ */ createElementVNode("div", { class: "el-image__placeholder" }, null, -1);
+const _hoisted_2 = { class: "el-image__error" };
+const _hoisted_3 = ["src"];
+const _hoisted_4 = { key: 0 };
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_image_viewer = resolveComponent("image-viewer");
+  return openBlock(), createElementBlock("div", {
+    ref: "container",
+    class: normalizeClass(["el-image", _ctx.$attrs.class]),
+    style: normalizeStyle(_ctx.containerStyle)
+  }, [
+    _ctx.loading ? renderSlot(_ctx.$slots, "placeholder", { key: 0 }, () => [
+      _hoisted_1
+    ]) : _ctx.hasLoadError ? renderSlot(_ctx.$slots, "error", { key: 1 }, () => [
+      createElementVNode("div", _hoisted_2, toDisplayString(_ctx.t("el.image.error")), 1)
+    ]) : (openBlock(), createElementBlock("img", mergeProps({
+      key: 2,
+      class: "el-image__inner"
+    }, _ctx.attrs, {
+      src: _ctx.src,
+      style: _ctx.imageStyle,
+      class: {
+        "el-image__preview": _ctx.preview
+      },
+      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.clickHandler && _ctx.clickHandler(...args))
+    }), null, 16, _hoisted_3)),
+    (openBlock(), createBlock(Teleport, {
+      to: "body",
+      disabled: !_ctx.appendToBody
+    }, [
+      _ctx.preview ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
+        _ctx.showViewer ? (openBlock(), createBlock(_component_image_viewer, {
+          key: 0,
+          "z-index": _ctx.zIndex,
+          "initial-index": _ctx.imageIndex,
+          "url-list": _ctx.previewSrcList,
+          "hide-on-click-modal": _ctx.hideOnClickModal,
+          onClose: _ctx.closeViewer,
+          onSwitch: _ctx.switchViewer
+        }, {
+          default: withCtx(() => [
+            _ctx.$slots.viewer ? (openBlock(), createElementBlock("div", _hoisted_4, [
+              renderSlot(_ctx.$slots, "viewer")
+            ])) : createCommentVNode("v-if", true)
+          ]),
+          _: 3
+        }, 8, ["z-index", "initial-index", "url-list", "hide-on-click-modal", "onClose", "onSwitch"])) : createCommentVNode("v-if", true)
+      ], 2112)) : createCommentVNode("v-if", true)
+    ], 8, ["disabled"]))
+  ], 6);
+}
+
+export { render };
+//# sourceMappingURL=image.vue_vue_type_template_id_34467287_lang.mjs.map

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

@@ -0,0 +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 } from '@vueuse/core'\nimport { useAttrs, useLocale } from '@element-plus/hooks'\nimport ImageViewer from '@element-plus/components/image-viewer'\nimport isServer from '@element-plus/utils/isServer'\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 (!isServer && 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 (isServer) 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 (isServer) 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 (isServer || !_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":["_createElementBlock","_renderSlot","_createElementVNode","_mergeProps","_createBlock"],"mappings":";;+DAOW,OAAM;qBAGN,OAAM;;;;;sBATfA;IACE,KAAI;AAAA,IACH,mCAAoB,YAAO;AAAA,IAC3B,sBAAO;;IAEI,eAAZC,mDAAA;MACE;AAAA,SAEe,oBAAjBA,6CAAA;MACEC,0BAAA,4BAAgC;uBAElCF,0BAAAG;;MAEE,OAAM;AAAA,OACE;MACP,KAAK;MACL,OAAO;MACP;;;MAGA,gDAAO;;kBAEVC;MAAU,IAAG;AAAA,MAAQ,WAAW;;MACd,6BAAhBJ;QAEU,gCADRI;;UAEG,WAAS;UACT,iBAAe;UACf,YAAU;UACV,uBAAqB;UACrB,SAAO;UACP,UAAQ;;2BAET;YAAW,YAAO,uBAAlBJ;cACEC;;;;;;;;;;;;"}

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

@@ -1,6 +1,6 @@
-import script from './image.vue_vue&type=script&lang.mjs';
-export { default } from './image.vue_vue&type=script&lang.mjs';
-import { render } from './image.vue_vue&type=template&id=34467287&lang.mjs';
+import script from './image.vue_vue_type_script_lang.mjs';
+export { default } from './image.vue_vue_type_script_lang.mjs';
+import { render } from './image.vue_vue_type_template_id_34467287_lang.mjs';
 
 script.render = render;
 script.__file = "packages/components/image/src/image.vue";

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

@@ -1,7 +1,7 @@
 import { withInstall } from '../../utils/with-install.mjs';
 import './src/image-viewer2.mjs';
 export { imageViewerEmits, imageViewerProps } from './src/image-viewer.mjs';
-import script from './src/image-viewer.vue_vue&type=script&lang.mjs';
+import script from './src/image-viewer.vue_vue_type_script_lang.mjs';
 
 const ElImageViewer = withInstall(script);