element-plus 1.3.0-beta.6 → 2.0.0

package/es/components/form/style/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/es/components/form-item/style/css.mjs

@@ -1,2 +1,3 @@
+import '../../base/style/css.mjs';
 import 'element-plus/theme-chalk/el-form-item.css';
 //# sourceMappingURL=css.mjs.map

package/es/components/form-item/style/css.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"css.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"css.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/es/components/form-item/style/index.mjs

@@ -1,2 +1,3 @@
+import '../../base/style/index.mjs';
 import 'element-plus/theme-chalk/src/form-item.scss';
 //# sourceMappingURL=index.mjs.map

package/es/components/form-item/style/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/es/components/header/style/css.mjs

@@ -1,2 +1,3 @@
+import '../../base/style/css.mjs';
 import 'element-plus/theme-chalk/el-header.css';
 //# sourceMappingURL=css.mjs.map

package/es/components/header/style/css.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"css.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"css.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/es/components/header/style/index.mjs

@@ -1,2 +1,3 @@
+import '../../base/style/index.mjs';
 import 'element-plus/theme-chalk/src/header.scss';
 //# sourceMappingURL=index.mjs.map

package/es/components/header/style/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

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

@@ -1,17 +1,9 @@
 import { defineComponent, computed, openBlock, createElementBlock, mergeProps, renderSlot } from 'vue';
 import { isUndefined, addUnit } from '../../../utils/util.mjs';
-import 'lodash/fromPairs';
-import '../../../hooks/use-common-props/index.mjs';
-import '../../../hooks/use-global-config/index.mjs';
-import 'lodash/get';
-import '@vueuse/core';
-import '../../../hooks/use-modal/index.mjs';
-import '../../../hooks/use-model-toggle/index.mjs';
-import '@vue/shared';
-import '../../../hooks/use-delayed-toggle/index.mjs';
-import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
+import '../../../hooks/index.mjs';
 import { iconProps } from './icon.mjs';
 import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
+import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
 
 const _sfc_main = defineComponent({
   name: "ElIcon",

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

@@ -1 +1 @@
-{"version":3,"file":"icon2.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":["_openBlock","_createElementBlock"],"mappings":";;;;;;;;;;;;;;;AAcA,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,cAAc;AAAA,EAEd,OAAO;AAAA,EAEP,MAAM,OAAO;AACX,UAAM,KAAK,aAAa;AAExB,UAAM,QAAQ,SAAwB,MAAM;AAC1C,UAAI,CAAC,MAAM,QAAQ,CAAC,MAAM;AAAO,eAAO;AAExC,aAAO;AAAA,QACL,UAAU,YAAY,MAAM,QAAQ,SAAY,QAAQ,MAAM;AAAA,QAC9D,WAAW,MAAM;AAAA;AAAA;AAIrB,WAAO;AAAA,MACL;AAAA,MACA;AAAA;AAAA;AAAA;2BAjCJ,yCAEI;SAFKA,aAAMC;AAAA,IAAK,OAAO;AAAA,WAAe,KAAM;AAAA,KAC9C,cAAa;AAAA;;;;;;;"}
+{"version":3,"file":"icon2.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":["_openBlock","_createElementBlock"],"mappings":";;;;;;;AAcA,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,cAAc;AAAA,EAEd,OAAO;AAAA,EAEP,MAAM,OAAO;AACX,UAAM,KAAK,aAAa;AAExB,UAAM,QAAQ,SAAwB,MAAM;AAC1C,UAAI,CAAC,MAAM,QAAQ,CAAC,MAAM;AAAO,eAAO;AAExC,aAAO;AAAA,QACL,UAAU,YAAY,MAAM,QAAQ,SAAY,QAAQ,MAAM;AAAA,QAC9D,WAAW,MAAM;AAAA;AAAA;AAIrB,WAAO;AAAA,MACL;AAAA,MACA;AAAA;AAAA;AAAA;2BAjCJ,yCAEI;SAFKA,aAAMC;AAAA,IAAK,OAAO;AAAA,WAAe,KAAM;AAAA,KAC9C,cAAa;AAAA;;;;;;;"}

package/es/components/icon/style/css.mjs

@@ -1,2 +1,3 @@
+import '../../base/style/css.mjs';
 import 'element-plus/theme-chalk/el-icon.css';
 //# sourceMappingURL=css.mjs.map

package/es/components/icon/style/css.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"css.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"css.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/es/components/icon/style/index.mjs

@@ -1,2 +1,3 @@
+import '../../base/style/index.mjs';
 import 'element-plus/theme-chalk/src/icon.scss';
 //# sourceMappingURL=index.mjs.map

package/es/components/icon/style/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

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

@@ -18,6 +18,17 @@ export declare const ElImage: import("../../utils/types").SFCWithInstall<import(
     preview: import("vue").ComputedRef<boolean>;
     imageIndex: import("vue").ComputedRef<number>;
     container: import("vue").Ref<HTMLElement | undefined>;
+    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;
+    };
     clickHandler: () => void;
     closeViewer: () => void;
     switchViewer: (val: number) => void;

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

@@ -19,6 +19,17 @@ declare const _default: import("vue").DefineComponent<{
     preview: import("vue").ComputedRef<boolean>;
     imageIndex: import("vue").ComputedRef<number>;
     container: import("vue").Ref<HTMLElement | undefined>;
+    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;
+    };
     clickHandler: () => void;
     closeViewer: () => void;
     switchViewer: (val: number) => void;

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

@@ -1,18 +1,14 @@
-import { defineComponent, ref, computed, watch, onMounted, nextTick, resolveComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, renderSlot, createElementVNode, toDisplayString, mergeProps, createBlock, Teleport, Fragment, withCtx, createCommentVNode } from 'vue';
+import { defineComponent, ref, computed, nextTick, watch, onMounted, resolveComponent, openBlock, createElementBlock, normalizeClass, normalizeStyle, renderSlot, createElementVNode, toDisplayString, mergeProps, createBlock, Teleport, Fragment, withCtx, createCommentVNode } from 'vue';
 import { isString } from '@vue/shared';
 import { isClient, useThrottleFn, useEventListener } from '@vueuse/core';
-import { useAttrs } from '../../../hooks/use-attrs/index.mjs';
-import '../../../hooks/use-common-props/index.mjs';
-import '../../../hooks/use-global-config/index.mjs';
-import { useLocale } from '../../../hooks/use-locale/index.mjs';
-import { isInContainer, getScrollContainer } from '../../../utils/dom.mjs';
-import '../../../hooks/use-modal/index.mjs';
-import '../../../hooks/use-model-toggle/index.mjs';
-import 'lodash/isEqualWith';
-import '../../../hooks/use-delayed-toggle/index.mjs';
+import '../../../hooks/index.mjs';
 import { ElImageViewer } from '../../image-viewer/index.mjs';
+import { isInContainer, getScrollContainer } from '../../../utils/dom.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 } from '../../../hooks/use-attrs/index.mjs';
 
 const isHtmlElement = (e) => e && e.nodeType === Node.ELEMENT_NODE;
 let prevOverflow = "";
@@ -26,6 +22,7 @@ const _sfc_main = defineComponent({
   emits: imageEmits,
   setup(props, { emit, attrs: rawAttrs }) {
     const { t } = useLocale();
+    const ns = useNamespace("image");
     const attrs = useAttrs();
     const hasLoadError = ref(false);
     const loading = ref(true);
@@ -49,11 +46,10 @@ const _sfc_main = defineComponent({
       return Array.isArray(previewSrcList) && previewSrcList.length > 0;
     });
     const imageIndex = computed(() => {
-      const { src, previewSrcList, initialIndex } = props;
+      const { previewSrcList, initialIndex } = props;
       let previewIndex = initialIndex;
-      const srcIndex = previewSrcList.indexOf(src);
-      if (srcIndex >= 0) {
-        previewIndex = srcIndex;
+      if (initialIndex > previewSrcList.length - 1) {
+        previewIndex = 0;
       }
       return previewIndex;
     });
@@ -102,6 +98,7 @@ const _sfc_main = defineComponent({
     }
     const lazyLoadHandler = useThrottleFn(handleLazyLoad, 200);
     async function addLazyLoadListener() {
+      var _a;
       if (!isClient)
         return;
       await nextTick();
@@ -109,7 +106,7 @@ const _sfc_main = defineComponent({
       if (isHtmlElement(scrollContainer)) {
         _scrollContainer.value = scrollContainer;
       } else if (isString(scrollContainer) && scrollContainer !== "") {
-        _scrollContainer.value = document.querySelector(scrollContainer) ?? void 0;
+        _scrollContainer.value = (_a = document.querySelector(scrollContainer)) != null ? _a : void 0;
       } else if (container.value) {
         _scrollContainer.value = getScrollContainer(container.value);
       }
@@ -146,7 +143,7 @@ const _sfc_main = defineComponent({
       showViewer.value = true;
     }
     function closeViewer() {
-      stopWheelListener?.();
+      stopWheelListener == null ? void 0 : stopWheelListener();
       document.body.style.overflow = prevOverflow;
       showViewer.value = false;
       emit("close");
@@ -181,6 +178,7 @@ const _sfc_main = defineComponent({
       preview,
       imageIndex,
       container,
+      ns,
       clickHandler,
       closeViewer,
       switchViewer,
@@ -188,32 +186,29 @@ const _sfc_main = defineComponent({
     };
   }
 });
-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 };
+const _hoisted_1 = ["src"];
+const _hoisted_2 = { key: 0 };
 function _sfc_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]),
+    class: normalizeClass([_ctx.ns.b(), _ctx.$attrs.class]),
     style: normalizeStyle(_ctx.containerStyle)
   }, [
     _ctx.loading ? renderSlot(_ctx.$slots, "placeholder", { key: 0 }, () => [
-      _hoisted_1
+      createElementVNode("div", {
+        class: normalizeClass(_ctx.ns.e("placeholder"))
+      }, null, 2)
     ]) : _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, {
+      createElementVNode("div", {
+        class: normalizeClass(_ctx.ns.e("error"))
+      }, toDisplayString(_ctx.t("el.image.error")), 3)
+    ]) : (openBlock(), createElementBlock("img", mergeProps({ key: 2 }, _ctx.attrs, {
       src: _ctx.src,
       style: _ctx.imageStyle,
-      class: {
-        "el-image__preview": _ctx.preview
-      },
+      class: [_ctx.ns.e("inner"), _ctx.preview ? _ctx.ns.e("preview") : ""],
       onClick: _cache[0] || (_cache[0] = (...args) => _ctx.clickHandler && _ctx.clickHandler(...args))
-    }), null, 16, _hoisted_3)),
+    }), null, 16, _hoisted_1)),
     (openBlock(), createBlock(Teleport, {
       to: "body",
       disabled: !_ctx.appendToBody
@@ -229,7 +224,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           onSwitch: _ctx.switchViewer
         }, {
           default: withCtx(() => [
-            _ctx.$slots.viewer ? (openBlock(), createElementBlock("div", _hoisted_4, [
+            _ctx.$slots.viewer ? (openBlock(), createElementBlock("div", _hoisted_2, [
               renderSlot(_ctx.$slots, "viewer")
             ])) : createCommentVNode("v-if", true)
           ]),

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

@@ -1 +1 @@
-{"version":3,"file":"image2.mjs","sources":["../../../../../../packages/components/image/src/image.vue"],"sourcesContent":["<template>\n  <div\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","_openBlock","_createElementBlock","_normalizeClass","_createBlock","_Fragment","_withCtx"],"mappings":"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"}
+{"version":3,"file":"image2.mjs","sources":["../../../../../../packages/components/image/src/image.vue"],"sourcesContent":["<template>\n  <div ref=\"container\" :class=\"[ns.b(), $attrs.class]\" :style=\"containerStyle\">\n    <slot v-if=\"loading\" name=\"placeholder\">\n      <div :class=\"ns.e('placeholder')\"></div>\n    </slot>\n    <slot v-else-if=\"hasLoadError\" name=\"error\">\n      <div :class=\"ns.e('error')\">{{ t('el.image.error') }}</div>\n    </slot>\n    <img\n      v-else\n      v-bind=\"attrs\"\n      :src=\"src\"\n      :style=\"imageStyle\"\n      :class=\"[ns.e('inner'), preview ? ns.e('preview') : '']\"\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, useNamespace } 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    const ns = useNamespace('image')\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 { previewSrcList, initialIndex } = props\n      let previewIndex = initialIndex\n      if (initialIndex > previewSrcList.length - 1) {\n        previewIndex = 0\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\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      ns,\n\n      clickHandler,\n      closeViewer,\n      switchViewer,\n      t,\n    }\n  },\n})\n</script>\n"],"names":["ImageViewer","_openBlock"],"mappings":"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"}

package/es/components/image/style/css.mjs

@@ -1,2 +1,4 @@
+import '../../base/style/css.mjs';
 import 'element-plus/theme-chalk/el-image.css';
+import '../../image-viewer/style/css.mjs';
 //# sourceMappingURL=css.mjs.map

package/es/components/image/style/css.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"css.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"css.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/es/components/image/style/index.mjs

@@ -1,2 +1,4 @@
+import '../../base/style/index.mjs';
 import 'element-plus/theme-chalk/src/image.scss';
+import '../../image-viewer/style/index.mjs';
 //# sourceMappingURL=index.mjs.map

package/es/components/image/style/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

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

@@ -7,7 +7,7 @@ export declare const ElImageViewer: import("../../utils/types").SFCWithInstall<i
 }, {
     index: import("vue").Ref<number>;
     wrapper: import("vue").Ref<HTMLDivElement | undefined>;
-    img: import("vue").Ref<HTMLImageElement | undefined>;
+    imgRefs: import("vue").Ref<any[]>;
     isSingle: import("vue").ComputedRef<boolean>;
     isFirst: import("vue").ComputedRef<boolean>;
     isLast: import("vue").ComputedRef<boolean>;
@@ -25,6 +25,17 @@ export declare const ElImageViewer: import("../../utils/types").SFCWithInstall<i
     handleImgLoad: () => void;
     handleImgError: (e: Event) => void;
     handleMouseDown: (e: MouseEvent) => void;
+    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;
+    };
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: () => boolean;
     switch: (index: number) => boolean;

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

@@ -9,7 +9,7 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     index: import("vue").Ref<number>;
     wrapper: import("vue").Ref<HTMLDivElement | undefined>;
-    img: import("vue").Ref<HTMLImageElement | undefined>;
+    imgRefs: import("vue").Ref<any[]>;
     isSingle: import("vue").ComputedRef<boolean>;
     isFirst: import("vue").ComputedRef<boolean>;
     isLast: import("vue").ComputedRef<boolean>;
@@ -27,6 +27,17 @@ declare const _default: import("vue").DefineComponent<{
     handleImgLoad: () => void;
     handleImgError: (e: Event) => void;
     handleMouseDown: (e: MouseEvent) => void;
+    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;
+    };
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: () => boolean;
     switch: (index: number) => boolean;