element-pe 2.0.6 → 2.0.9

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

@@ -10,6 +10,7 @@ export declare const ElImage: import("element-pe/es/utils").SFCWithInstall<impor
     readonly zIndex: import("element-pe/es/utils").BuildPropReturn<NumberConstructor, unknown, unknown, unknown, unknown>;
     readonly initialIndex: import("element-pe/es/utils").BuildPropReturn<NumberConstructor, 0, unknown, unknown, unknown>;
     readonly infinite: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
+    readonly closeOnPressEscape: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
 }, {
     props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
         readonly appendToBody: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, undefined, unknown, unknown, unknown>;
@@ -23,6 +24,7 @@ export declare const ElImage: import("element-pe/es/utils").SFCWithInstall<impor
         readonly zIndex: import("element-pe/es/utils").BuildPropReturn<NumberConstructor, unknown, unknown, unknown, unknown>;
         readonly initialIndex: import("element-pe/es/utils").BuildPropReturn<NumberConstructor, 0, unknown, unknown, unknown>;
         readonly infinite: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
+        readonly closeOnPressEscape: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
     }>> & {
         onClose?: (() => any) | undefined;
         onError?: ((evt: Event) => any) | undefined;
@@ -78,6 +80,7 @@ export declare const ElImage: import("element-pe/es/utils").SFCWithInstall<impor
         readonly infinite: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
         readonly hideOnClickModal: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
         readonly teleported: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
+        readonly closeOnPressEscape: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
     }, {
         Mode: {
             CONTAIN: {
@@ -97,6 +100,7 @@ export declare const ElImage: import("element-pe/es/utils").SFCWithInstall<impor
             readonly infinite: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
             readonly hideOnClickModal: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
             readonly teleported: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
+            readonly closeOnPressEscape: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
         }>> & {
             onClose?: (() => any) | undefined;
             onSwitch?: ((index: number) => any) | undefined;
@@ -200,6 +204,7 @@ export declare const ElImage: import("element-pe/es/utils").SFCWithInstall<impor
         readonly infinite: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
         readonly hideOnClickModal: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
         readonly teleported: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
+        readonly closeOnPressEscape: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
     }>> & {
         onClose?: (() => any) | undefined;
         onSwitch?: ((index: number) => any) | undefined;
@@ -208,6 +213,7 @@ export declare const ElImage: import("element-pe/es/utils").SFCWithInstall<impor
         teleported: import("element-pe/es/utils").BuildPropType<BooleanConstructor, unknown, unknown>;
         infinite: import("element-pe/es/utils").BuildPropType<BooleanConstructor, unknown, unknown>;
         initialIndex: number;
+        closeOnPressEscape: import("element-pe/es/utils").BuildPropType<BooleanConstructor, unknown, unknown>;
         hideOnClickModal: import("element-pe/es/utils").BuildPropType<BooleanConstructor, unknown, unknown>;
         urlList: string[];
     }>> & Record<string, any>;
@@ -227,6 +233,7 @@ export declare const ElImage: import("element-pe/es/utils").SFCWithInstall<impor
     readonly zIndex: import("element-pe/es/utils").BuildPropReturn<NumberConstructor, unknown, unknown, unknown, unknown>;
     readonly initialIndex: import("element-pe/es/utils").BuildPropReturn<NumberConstructor, 0, unknown, unknown, unknown>;
     readonly infinite: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
+    readonly closeOnPressEscape: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
 }>> & {
     onClose?: (() => any) | undefined;
     onError?: ((evt: Event) => any) | undefined;
@@ -239,6 +246,7 @@ export declare const ElImage: import("element-pe/es/utils").SFCWithInstall<impor
     fit: import("element-pe/es/utils").BuildPropType<StringConstructor, "" | "fill" | "none" | "contain" | "cover" | "scale-down", unknown>;
     initialIndex: number;
     appendToBody: import("element-pe/es/utils").BuildPropType<BooleanConstructor, unknown, unknown>;
+    closeOnPressEscape: import("element-pe/es/utils").BuildPropType<BooleanConstructor, unknown, unknown>;
     hideOnClickModal: import("element-pe/es/utils").BuildPropType<BooleanConstructor, unknown, unknown>;
     scrollContainer: import("element-pe/es/utils").BuildPropType<import("element-pe/es/utils").PropWrapper<string | HTMLElement | undefined>, unknown, unknown>;
     previewSrcList: string[];

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

@@ -11,6 +11,7 @@ export declare const imageProps: {
     readonly zIndex: import("element-pe/es/utils").BuildPropReturn<NumberConstructor, unknown, unknown, unknown, unknown>;
     readonly initialIndex: import("element-pe/es/utils").BuildPropReturn<NumberConstructor, 0, unknown, unknown, unknown>;
     readonly infinite: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
+    readonly closeOnPressEscape: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
 };
 export declare type ImageProps = ExtractPropTypes<typeof imageProps>;
 export declare const imageEmits: {

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

@@ -213,6 +213,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             "url-list": _ctx.previewSrcList,
             "hide-on-click-modal": _ctx.hideOnClickModal,
             teleported: unref(teleported),
+            "close-on-press-escape": _ctx.closeOnPressEscape,
             onClose: closeViewer,
             onSwitch: switchViewer
           }, {
@@ -222,7 +223,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               ])) : createCommentVNode("v-if", true)
             ]),
             _: 3
-          }, 8, ["z-index", "initial-index", "infinite", "url-list", "hide-on-click-modal", "teleported"])) : createCommentVNode("v-if", true)
+          }, 8, ["z-index", "initial-index", "infinite", "url-list", "hide-on-click-modal", "teleported", "close-on-press-escape"])) : createCommentVNode("v-if", true)
         ], 2112)) : createCommentVNode("v-if", true)
       ], 6);
     };

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=\"loading\" name=\"placeholder\">\n      <div :class=\"ns.e('placeholder')\" />\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    <template v-if=\"preview\">\n      <image-viewer\n        v-if=\"showViewer\"\n        :z-index=\"zIndex\"\n        :initial-index=\"imageIndex\"\n        :infinite=\"infinite\"\n        :url-list=\"previewSrcList\"\n        :hide-on-click-modal=\"hideOnClickModal\"\n        :teleported=\"teleported\"\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 { computed, nextTick, onMounted, ref, watch } from 'vue'\nimport {\n  isBoolean,\n  isClient,\n  useEventListener,\n  useThrottleFn,\n} from '@vueuse/core'\nimport {\n  useAttrs,\n  useDeprecated,\n  useLocale,\n  useNamespace,\n} from '@element-plus/hooks'\nimport ImageViewer from '@element-plus/components/image-viewer'\nimport {\n  getScrollContainer,\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})\n\nconst props = defineProps(imageProps)\nconst emit = defineEmits(imageEmits)\n\nlet prevOverflow = ''\n\nuseDeprecated(\n  {\n    scope: 'el-image',\n    from: 'append-to-body',\n    replacement: 'preview-teleported',\n    version: '2.2.0',\n    ref: 'https://element-plus.org/en-US/component/image.html#image-attributess',\n  },\n  computed(() => isBoolean(props.appendToBody))\n)\n\nconst { t } = useLocale()\nconst ns = useNamespace('image')\n\nconst attrs = useAttrs()\nconst hasLoadError = ref(false)\nconst loading = ref(true)\nconst imgWidth = ref(0)\nconst imgHeight = ref(0)\nconst showViewer = ref(false)\nconst container = ref<HTMLElement>()\n\nconst _scrollContainer = ref<HTMLElement | Window>()\nlet stopScrollListener: () => void\nlet stopWheelListener: () => void\n\nconst containerStyle = computed(() => attrs.value.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 teleported = computed(() => {\n  return props.appendToBody || props.previewTeleported\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 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\nfunction 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\nfunction handleError(event: Event) {\n  loading.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)\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}\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 (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\nonMounted(() => {\n  if (props.lazy) {\n    addLazyLoadListener()\n  } else {\n    loadImage()\n  }\n})\n</script>\n"],"names":[],"mappings":"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"}
+{"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=\"loading\" name=\"placeholder\">\n      <div :class=\"ns.e('placeholder')\" />\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    <template v-if=\"preview\">\n      <image-viewer\n        v-if=\"showViewer\"\n        :z-index=\"zIndex\"\n        :initial-index=\"imageIndex\"\n        :infinite=\"infinite\"\n        :url-list=\"previewSrcList\"\n        :hide-on-click-modal=\"hideOnClickModal\"\n        :teleported=\"teleported\"\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 { computed, nextTick, onMounted, ref, watch } from 'vue'\nimport {\n  isBoolean,\n  isClient,\n  useEventListener,\n  useThrottleFn,\n} from '@vueuse/core'\nimport {\n  useAttrs,\n  useDeprecated,\n  useLocale,\n  useNamespace,\n} from '@element-plus/hooks'\nimport ImageViewer from '@element-plus/components/image-viewer'\nimport {\n  getScrollContainer,\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})\n\nconst props = defineProps(imageProps)\nconst emit = defineEmits(imageEmits)\n\nlet prevOverflow = ''\n\nuseDeprecated(\n  {\n    scope: 'el-image',\n    from: 'append-to-body',\n    replacement: 'preview-teleported',\n    version: '2.2.0',\n    ref: 'https://element-plus.org/en-US/component/image.html#image-attributess',\n  },\n  computed(() => isBoolean(props.appendToBody))\n)\n\nconst { t } = useLocale()\nconst ns = useNamespace('image')\n\nconst attrs = useAttrs()\nconst hasLoadError = ref(false)\nconst loading = ref(true)\nconst imgWidth = ref(0)\nconst imgHeight = ref(0)\nconst showViewer = ref(false)\nconst container = ref<HTMLElement>()\n\nconst _scrollContainer = ref<HTMLElement | Window>()\nlet stopScrollListener: () => void\nlet stopWheelListener: () => void\n\nconst containerStyle = computed(() => attrs.value.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 teleported = computed(() => {\n  return props.appendToBody || props.previewTeleported\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 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\nfunction 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\nfunction handleError(event: Event) {\n  loading.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)\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}\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 (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\nonMounted(() => {\n  if (props.lazy) {\n    addLazyLoadListener()\n  } else {\n    loadImage()\n  }\n})\n</script>\n"],"names":[],"mappings":"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"}

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

@@ -11,6 +11,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly zIndex: import("element-pe/es/utils").BuildPropReturn<NumberConstructor, unknown, unknown, unknown, unknown>;
     readonly initialIndex: import("element-pe/es/utils").BuildPropReturn<NumberConstructor, 0, unknown, unknown, unknown>;
     readonly infinite: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
+    readonly closeOnPressEscape: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
 }, {
     props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
         readonly appendToBody: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, undefined, unknown, unknown, unknown>;
@@ -24,6 +25,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly zIndex: import("element-pe/es/utils").BuildPropReturn<NumberConstructor, unknown, unknown, unknown, unknown>;
         readonly initialIndex: import("element-pe/es/utils").BuildPropReturn<NumberConstructor, 0, unknown, unknown, unknown>;
         readonly infinite: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
+        readonly closeOnPressEscape: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
     }>> & {
         onClose?: (() => any) | undefined;
         onError?: ((evt: Event) => any) | undefined;
@@ -79,6 +81,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly infinite: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
         readonly hideOnClickModal: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
         readonly teleported: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
+        readonly closeOnPressEscape: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
     }, {
         Mode: {
             CONTAIN: {
@@ -98,6 +101,7 @@ declare const _default: import("vue").DefineComponent<{
             readonly infinite: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
             readonly hideOnClickModal: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
             readonly teleported: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
+            readonly closeOnPressEscape: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
         }>> & {
             onClose?: (() => any) | undefined;
             onSwitch?: ((index: number) => any) | undefined;
@@ -201,6 +205,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly infinite: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
         readonly hideOnClickModal: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
         readonly teleported: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
+        readonly closeOnPressEscape: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
     }>> & {
         onClose?: (() => any) | undefined;
         onSwitch?: ((index: number) => any) | undefined;
@@ -209,6 +214,7 @@ declare const _default: import("vue").DefineComponent<{
         teleported: import("element-pe/es/utils").BuildPropType<BooleanConstructor, unknown, unknown>;
         infinite: import("element-pe/es/utils").BuildPropType<BooleanConstructor, unknown, unknown>;
         initialIndex: number;
+        closeOnPressEscape: import("element-pe/es/utils").BuildPropType<BooleanConstructor, unknown, unknown>;
         hideOnClickModal: import("element-pe/es/utils").BuildPropType<BooleanConstructor, unknown, unknown>;
         urlList: string[];
     }>> & Record<string, any>;
@@ -228,6 +234,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly zIndex: import("element-pe/es/utils").BuildPropReturn<NumberConstructor, unknown, unknown, unknown, unknown>;
     readonly initialIndex: import("element-pe/es/utils").BuildPropReturn<NumberConstructor, 0, unknown, unknown, unknown>;
     readonly infinite: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
+    readonly closeOnPressEscape: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
 }>> & {
     onClose?: (() => any) | undefined;
     onError?: ((evt: Event) => any) | undefined;
@@ -240,6 +247,7 @@ declare const _default: import("vue").DefineComponent<{
     fit: import("element-pe/es/utils").BuildPropType<StringConstructor, "" | "fill" | "none" | "contain" | "cover" | "scale-down", unknown>;
     initialIndex: number;
     appendToBody: import("element-pe/es/utils").BuildPropType<BooleanConstructor, unknown, unknown>;
+    closeOnPressEscape: import("element-pe/es/utils").BuildPropType<BooleanConstructor, unknown, unknown>;
     hideOnClickModal: import("element-pe/es/utils").BuildPropType<BooleanConstructor, unknown, unknown>;
     scrollContainer: import("element-pe/es/utils").BuildPropType<import("element-pe/es/utils").PropWrapper<string | HTMLElement | undefined>, unknown, unknown>;
     previewSrcList: string[];

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

@@ -46,6 +46,10 @@ const imageProps = buildProps({
   infinite: {
     type: Boolean,
     default: true
+  },
+  closeOnPressEscape: {
+    type: Boolean,
+    default: true
   }
 });
 const imageEmits = {

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

@@ -1 +1 @@
-{"version":3,"file":"image2.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  appendToBody: {\n    type: Boolean,\n    default: undefined,\n  },\n  hideOnClickModal: {\n    type: Boolean,\n    default: false,\n  },\n  src: {\n    type: String,\n    default: '',\n  },\n  fit: {\n    type: String,\n    values: ['', 'contain', 'cover', 'fill', 'none', 'scale-down'],\n    default: '',\n  },\n  lazy: {\n    type: Boolean,\n    default: false,\n  },\n  scrollContainer: {\n    type: definePropType<string | HTMLElement | undefined>([String, Object]),\n  },\n  previewSrcList: {\n    type: definePropType<string[]>(Array),\n    default: () => mutable([] as const),\n  },\n  previewTeleported: {\n    type: Boolean,\n    default: false,\n  },\n  zIndex: {\n    type: Number,\n  },\n  initialIndex: {\n    type: Number,\n    default: 0,\n  },\n  infinite: {\n    type: Boolean,\n    default: true,\n  },\n} as const)\nexport type ImageProps = ExtractPropTypes<typeof imageProps>\n\nexport const imageEmits = {\n  error: (evt: Event) => evt instanceof Event,\n  switch: (val: number) => isNumber(val),\n  close: () => true,\n}\nexport type ImageEmits = typeof imageEmits\n"],"names":[],"mappings":";;;;;AAMY,MAAC,UAAU,GAAG,UAAU,CAAC;AACrC,EAAE,YAAY,EAAE;AAChB,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK,CAAC;AACnB,GAAG;AACH,EAAE,gBAAgB,EAAE;AACpB,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,GAAG,EAAE;AACP,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,GAAG,EAAE;AACP,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,MAAM,EAAE,CAAC,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,CAAC;AAClE,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,eAAe,EAAE;AACnB,IAAI,IAAI,EAAE,cAAc,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAC1C,GAAG;AACH,EAAE,cAAc,EAAE;AAClB,IAAI,IAAI,EAAE,cAAc,CAAC,KAAK,CAAC;AAC/B,IAAI,OAAO,EAAE,MAAM,OAAO,CAAC,EAAE,CAAC;AAC9B,GAAG;AACH,EAAE,iBAAiB,EAAE;AACrB,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,GAAG;AACH,EAAE,YAAY,EAAE;AAChB,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,CAAC,EAAE;AACS,MAAC,UAAU,GAAG;AAC1B,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;;;;"}
+{"version":3,"file":"image2.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  appendToBody: {\n    type: Boolean,\n    default: undefined,\n  },\n  hideOnClickModal: {\n    type: Boolean,\n    default: false,\n  },\n  src: {\n    type: String,\n    default: '',\n  },\n  fit: {\n    type: String,\n    values: ['', 'contain', 'cover', 'fill', 'none', 'scale-down'],\n    default: '',\n  },\n  lazy: {\n    type: Boolean,\n    default: false,\n  },\n  scrollContainer: {\n    type: definePropType<string | HTMLElement | undefined>([String, Object]),\n  },\n  previewSrcList: {\n    type: definePropType<string[]>(Array),\n    default: () => mutable([] as const),\n  },\n  previewTeleported: {\n    type: Boolean,\n    default: false,\n  },\n  zIndex: {\n    type: Number,\n  },\n  initialIndex: {\n    type: Number,\n    default: 0,\n  },\n  infinite: {\n    type: Boolean,\n    default: true,\n  },\n  closeOnPressEscape: {\n    type: Boolean,\n    default: true,\n  },\n} as const)\nexport type ImageProps = ExtractPropTypes<typeof imageProps>\n\nexport const imageEmits = {\n  error: (evt: Event) => evt instanceof Event,\n  switch: (val: number) => isNumber(val),\n  close: () => true,\n}\nexport type ImageEmits = typeof imageEmits\n"],"names":[],"mappings":";;;;;AAMY,MAAC,UAAU,GAAG,UAAU,CAAC;AACrC,EAAE,YAAY,EAAE;AAChB,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK,CAAC;AACnB,GAAG;AACH,EAAE,gBAAgB,EAAE;AACpB,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,GAAG,EAAE;AACP,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,GAAG,EAAE;AACP,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,MAAM,EAAE,CAAC,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,CAAC;AAClE,IAAI,OAAO,EAAE,EAAE;AACf,GAAG;AACH,EAAE,IAAI,EAAE;AACR,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,eAAe,EAAE;AACnB,IAAI,IAAI,EAAE,cAAc,CAAC,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAC1C,GAAG;AACH,EAAE,cAAc,EAAE;AAClB,IAAI,IAAI,EAAE,cAAc,CAAC,KAAK,CAAC;AAC/B,IAAI,OAAO,EAAE,MAAM,OAAO,CAAC,EAAE,CAAC;AAC9B,GAAG;AACH,EAAE,iBAAiB,EAAE;AACrB,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,GAAG;AACH,EAAE,YAAY,EAAE;AAChB,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,kBAAkB,EAAE;AACtB,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,CAAC,EAAE;AACS,MAAC,UAAU,GAAG;AAC1B,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;;;;"}

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

@@ -5,6 +5,7 @@ export declare const ElImageViewer: import("element-pe/es/utils").SFCWithInstall
     readonly infinite: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
     readonly hideOnClickModal: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
     readonly teleported: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
+    readonly closeOnPressEscape: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
 }, {
     Mode: {
         CONTAIN: {
@@ -24,6 +25,7 @@ export declare const ElImageViewer: import("element-pe/es/utils").SFCWithInstall
         readonly infinite: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
         readonly hideOnClickModal: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
         readonly teleported: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
+        readonly closeOnPressEscape: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
     }>> & {
         onClose?: (() => any) | undefined;
         onSwitch?: ((index: number) => any) | undefined;
@@ -127,6 +129,7 @@ export declare const ElImageViewer: import("element-pe/es/utils").SFCWithInstall
     readonly infinite: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
     readonly hideOnClickModal: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
     readonly teleported: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
+    readonly closeOnPressEscape: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
 }>> & {
     onClose?: (() => any) | undefined;
     onSwitch?: ((index: number) => any) | undefined;
@@ -135,6 +138,7 @@ export declare const ElImageViewer: import("element-pe/es/utils").SFCWithInstall
     teleported: import("element-pe/es/utils").BuildPropType<BooleanConstructor, unknown, unknown>;
     infinite: import("element-pe/es/utils").BuildPropType<BooleanConstructor, unknown, unknown>;
     initialIndex: number;
+    closeOnPressEscape: import("element-pe/es/utils").BuildPropType<BooleanConstructor, unknown, unknown>;
     hideOnClickModal: import("element-pe/es/utils").BuildPropType<BooleanConstructor, unknown, unknown>;
     urlList: string[];
 }>> & Record<string, any>;

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

@@ -7,6 +7,7 @@ export declare const imageViewerProps: {
     readonly infinite: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
     readonly hideOnClickModal: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
     readonly teleported: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
+    readonly closeOnPressEscape: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
 };
 export declare type ImageViewerProps = ExtractPropTypes<typeof imageViewerProps>;
 export declare const imageViewerEmits: {

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

@@ -105,7 +105,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const keydownHandler = throttle((e) => {
         switch (e.code) {
           case EVENT_CODE.esc:
-            hide();
+            props.closeOnPressEscape && hide();
             break;
           case EVENT_CODE.space:
             toggleMode();

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

@@ -1 +1 @@
-{"version":3,"file":"image-viewer.mjs","sources":["../../../../../../packages/components/image-viewer/src/image-viewer.vue"],"sourcesContent":["<template>\n  <teleport to=\"body\" :disabled=\"!teleported\">\n    <transition name=\"viewer-fade\" appear>\n      <div\n        ref=\"wrapper\"\n        :tabindex=\"-1\"\n        :class=\"ns.e('wrapper')\"\n        :style=\"{ zIndex: computedZIndex }\"\n      >\n        <div :class=\"ns.e('mask')\" @click.self=\"hideOnClickModal && hide()\" />\n\n        <!-- CLOSE -->\n        <span :class=\"[ns.e('btn'), ns.e('close')]\" @click=\"hide\">\n          <el-icon><Close /></el-icon>\n        </span>\n\n        <!-- ARROW -->\n        <template v-if=\"!isSingle\">\n          <span\n            :class=\"[\n              ns.e('btn'),\n              ns.e('prev'),\n              ns.is('disabled', !infinite && isFirst),\n            ]\"\n            @click=\"prev\"\n          >\n            <el-icon><ArrowLeft /></el-icon>\n          </span>\n          <span\n            :class=\"[\n              ns.e('btn'),\n              ns.e('next'),\n              ns.is('disabled', !infinite && isLast),\n            ]\"\n            @click=\"next\"\n          >\n            <el-icon><ArrowRight /></el-icon>\n          </span>\n        </template>\n        <!-- ACTIONS -->\n        <div :class=\"[ns.e('btn'), ns.e('actions')]\">\n          <div :class=\"ns.e('actions__inner')\">\n            <el-icon @click=\"handleActions('zoomOut')\">\n              <ZoomOut />\n            </el-icon>\n            <el-icon @click=\"handleActions('zoomIn')\">\n              <ZoomIn />\n            </el-icon>\n            <i :class=\"ns.e('actions__divider')\" />\n            <el-icon @click=\"toggleMode\">\n              <component :is=\"mode.icon\" />\n            </el-icon>\n            <i :class=\"ns.e('actions__divider')\" />\n            <el-icon @click=\"handleActions('anticlockwise')\">\n              <RefreshLeft />\n            </el-icon>\n            <el-icon @click=\"handleActions('clockwise')\">\n              <RefreshRight />\n            </el-icon>\n          </div>\n        </div>\n        <!-- CANVAS -->\n        <div :class=\"ns.e('canvas')\">\n          <img\n            v-for=\"(url, i) in urlList\"\n            v-show=\"i === index\"\n            :ref=\"(el) => (imgRefs[i] = el)\"\n            :key=\"url\"\n            :src=\"url\"\n            :style=\"imgStyle\"\n            :class=\"ns.e('img')\"\n            @load=\"handleImgLoad\"\n            @error=\"handleImgError\"\n            @mousedown=\"handleMouseDown\"\n          />\n        </div>\n        <slot />\n      </div>\n    </transition>\n  </teleport>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n  computed,\n  effectScope,\n  markRaw,\n  nextTick,\n  onMounted,\n  ref,\n  watch,\n} from 'vue'\nimport { isNumber, useEventListener } from '@vueuse/core'\nimport { throttle } from 'lodash-unified'\nimport { useLocale, useNamespace, useZIndex } from '@element-plus/hooks'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport { isFirefox } from '@element-plus/utils'\nimport ElIcon from '@element-plus/components/icon'\nimport {\n  ArrowLeft,\n  ArrowRight,\n  Close,\n  FullScreen,\n  RefreshLeft,\n  RefreshRight,\n  ScaleToOriginal,\n  ZoomIn,\n  ZoomOut,\n} from '@element-plus/icons-vue'\nimport { imageViewerEmits, imageViewerProps } from './image-viewer'\n\nimport type { CSSProperties } from 'vue'\nimport type { ImageViewerAction } from './image-viewer'\n\nconst Mode = {\n  CONTAIN: {\n    name: 'contain',\n    icon: markRaw(FullScreen),\n  },\n  ORIGINAL: {\n    name: 'original',\n    icon: markRaw(ScaleToOriginal),\n  },\n}\n\nconst mousewheelEventName = isFirefox() ? 'DOMMouseScroll' : 'mousewheel'\n\ndefineOptions({\n  name: 'ElImageViewer',\n})\n\nconst props = defineProps(imageViewerProps)\nconst emit = defineEmits(imageViewerEmits)\n\nconst { t } = useLocale()\nconst ns = useNamespace('image-viewer')\nconst { nextZIndex } = useZIndex()\nconst wrapper = ref<HTMLDivElement>()\nconst imgRefs = ref<any[]>([])\n\nconst scopeEventListener = effectScope()\n\nconst loading = ref(true)\nconst index = ref(props.initialIndex)\nconst mode = ref(Mode.CONTAIN)\nconst transform = ref({\n  scale: 1,\n  deg: 0,\n  offsetX: 0,\n  offsetY: 0,\n  enableTransition: false,\n})\n\nconst isSingle = computed(() => {\n  const { urlList } = props\n  return urlList.length <= 1\n})\n\nconst isFirst = computed(() => {\n  return index.value === 0\n})\n\nconst isLast = computed(() => {\n  return index.value === props.urlList.length - 1\n})\n\nconst currentImg = computed(() => {\n  return props.urlList[index.value]\n})\n\nconst imgStyle = computed(() => {\n  const { scale, deg, offsetX, offsetY, enableTransition } = transform.value\n  let translateX = offsetX / scale\n  let translateY = offsetY / scale\n\n  switch (deg % 360) {\n    case 90:\n    case -270:\n      ;[translateX, translateY] = [translateY, -translateX]\n      break\n    case 180:\n    case -180:\n      ;[translateX, translateY] = [-translateX, -translateY]\n      break\n    case 270:\n    case -90:\n      ;[translateX, translateY] = [-translateY, translateX]\n      break\n  }\n\n  const style: CSSProperties = {\n    transform: `scale(${scale}) rotate(${deg}deg) translate(${translateX}px, ${translateY}px)`,\n    transition: enableTransition ? 'transform .3s' : '',\n  }\n  if (mode.value.name === Mode.CONTAIN.name) {\n    style.maxWidth = style.maxHeight = '100%'\n  }\n  return style\n})\n\nconst computedZIndex = computed(() => {\n  return isNumber(props.zIndex) ? props.zIndex : nextZIndex()\n})\n\nfunction hide() {\n  unregisterEventListener()\n  emit('close')\n}\n\nfunction registerEventListener() {\n  const keydownHandler = throttle((e: KeyboardEvent) => {\n    switch (e.code) {\n      // ESC\n      case EVENT_CODE.esc:\n        hide()\n        break\n      // SPACE\n      case EVENT_CODE.space:\n        toggleMode()\n        break\n      // LEFT_ARROW\n      case EVENT_CODE.left:\n        prev()\n        break\n      // UP_ARROW\n      case EVENT_CODE.up:\n        handleActions('zoomIn')\n        break\n      // RIGHT_ARROW\n      case EVENT_CODE.right:\n        next()\n        break\n      // DOWN_ARROW\n      case EVENT_CODE.down:\n        handleActions('zoomOut')\n        break\n    }\n  })\n  const mousewheelHandler = throttle(\n    (e: WheelEvent | any /* TODO: wheelDelta is deprecated */) => {\n      const delta = e.wheelDelta ? e.wheelDelta : -e.detail\n      if (delta > 0) {\n        handleActions('zoomIn', {\n          zoomRate: 1.2,\n          enableTransition: false,\n        })\n      } else {\n        handleActions('zoomOut', {\n          zoomRate: 1.2,\n          enableTransition: false,\n        })\n      }\n    }\n  )\n\n  scopeEventListener.run(() => {\n    useEventListener(document, 'keydown', keydownHandler)\n    useEventListener(document, mousewheelEventName, mousewheelHandler)\n  })\n}\n\nfunction unregisterEventListener() {\n  scopeEventListener.stop()\n}\n\nfunction handleImgLoad() {\n  loading.value = false\n}\n\nfunction handleImgError(e: Event) {\n  loading.value = false\n  ;(e.target as HTMLImageElement).alt = t('el.image.error')\n}\n\nfunction handleMouseDown(e: MouseEvent) {\n  if (loading.value || e.button !== 0 || !wrapper.value) return\n  transform.value.enableTransition = false\n\n  const { offsetX, offsetY } = transform.value\n  const startX = e.pageX\n  const startY = e.pageY\n\n  const dragHandler = throttle((ev: MouseEvent) => {\n    transform.value = {\n      ...transform.value,\n      offsetX: offsetX + ev.pageX - startX,\n      offsetY: offsetY + ev.pageY - startY,\n    }\n  })\n  const removeMousemove = useEventListener(document, 'mousemove', dragHandler)\n  useEventListener(document, 'mouseup', () => {\n    removeMousemove()\n  })\n\n  e.preventDefault()\n}\n\nfunction reset() {\n  transform.value = {\n    scale: 1,\n    deg: 0,\n    offsetX: 0,\n    offsetY: 0,\n    enableTransition: false,\n  }\n}\n\nfunction toggleMode() {\n  if (loading.value) return\n\n  const modeNames = Object.keys(Mode)\n  const modeValues = Object.values(Mode)\n  const currentMode = mode.value.name\n  const index = modeValues.findIndex((i) => i.name === currentMode)\n  const nextIndex = (index + 1) % modeNames.length\n  mode.value = Mode[modeNames[nextIndex]]\n  reset()\n}\n\nfunction prev() {\n  if (isFirst.value && !props.infinite) return\n  const len = props.urlList.length\n  index.value = (index.value - 1 + len) % len\n}\n\nfunction next() {\n  if (isLast.value && !props.infinite) return\n  const len = props.urlList.length\n  index.value = (index.value + 1) % len\n}\n\nfunction handleActions(action: ImageViewerAction, options = {}) {\n  if (loading.value) return\n  const { zoomRate, rotateDeg, enableTransition } = {\n    zoomRate: 1.4,\n    rotateDeg: 90,\n    enableTransition: true,\n    ...options,\n  }\n  switch (action) {\n    case 'zoomOut':\n      if (transform.value.scale > 0.2) {\n        transform.value.scale = Number.parseFloat(\n          (transform.value.scale / zoomRate).toFixed(3)\n        )\n      }\n      break\n    case 'zoomIn':\n      if (transform.value.scale < 7) {\n        transform.value.scale = Number.parseFloat(\n          (transform.value.scale * zoomRate).toFixed(3)\n        )\n      }\n      break\n    case 'clockwise':\n      transform.value.deg += rotateDeg\n      break\n    case 'anticlockwise':\n      transform.value.deg -= rotateDeg\n      break\n  }\n  transform.value.enableTransition = enableTransition\n}\n\nwatch(currentImg, () => {\n  nextTick(() => {\n    const $img = imgRefs.value[0]\n    if (!$img?.complete) {\n      loading.value = true\n    }\n  })\n})\n\nwatch(index, (val) => {\n  reset()\n  emit('switch', val)\n})\n\nonMounted(() => {\n  registerEventListener()\n  // add tabindex then wrapper can be focusable via Javascript\n  // focus wrapper so arrow key can't cause inner scroll behavior underneath\n  wrapper.value?.focus?.()\n})\n</script>\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"image-viewer.mjs","sources":["../../../../../../packages/components/image-viewer/src/image-viewer.vue"],"sourcesContent":["<template>\n  <teleport to=\"body\" :disabled=\"!teleported\">\n    <transition name=\"viewer-fade\" appear>\n      <div\n        ref=\"wrapper\"\n        :tabindex=\"-1\"\n        :class=\"ns.e('wrapper')\"\n        :style=\"{ zIndex: computedZIndex }\"\n      >\n        <div :class=\"ns.e('mask')\" @click.self=\"hideOnClickModal && hide()\" />\n\n        <!-- CLOSE -->\n        <span :class=\"[ns.e('btn'), ns.e('close')]\" @click=\"hide\">\n          <el-icon><Close /></el-icon>\n        </span>\n\n        <!-- ARROW -->\n        <template v-if=\"!isSingle\">\n          <span\n            :class=\"[\n              ns.e('btn'),\n              ns.e('prev'),\n              ns.is('disabled', !infinite && isFirst),\n            ]\"\n            @click=\"prev\"\n          >\n            <el-icon><ArrowLeft /></el-icon>\n          </span>\n          <span\n            :class=\"[\n              ns.e('btn'),\n              ns.e('next'),\n              ns.is('disabled', !infinite && isLast),\n            ]\"\n            @click=\"next\"\n          >\n            <el-icon><ArrowRight /></el-icon>\n          </span>\n        </template>\n        <!-- ACTIONS -->\n        <div :class=\"[ns.e('btn'), ns.e('actions')]\">\n          <div :class=\"ns.e('actions__inner')\">\n            <el-icon @click=\"handleActions('zoomOut')\">\n              <ZoomOut />\n            </el-icon>\n            <el-icon @click=\"handleActions('zoomIn')\">\n              <ZoomIn />\n            </el-icon>\n            <i :class=\"ns.e('actions__divider')\" />\n            <el-icon @click=\"toggleMode\">\n              <component :is=\"mode.icon\" />\n            </el-icon>\n            <i :class=\"ns.e('actions__divider')\" />\n            <el-icon @click=\"handleActions('anticlockwise')\">\n              <RefreshLeft />\n            </el-icon>\n            <el-icon @click=\"handleActions('clockwise')\">\n              <RefreshRight />\n            </el-icon>\n          </div>\n        </div>\n        <!-- CANVAS -->\n        <div :class=\"ns.e('canvas')\">\n          <img\n            v-for=\"(url, i) in urlList\"\n            v-show=\"i === index\"\n            :ref=\"(el) => (imgRefs[i] = el)\"\n            :key=\"url\"\n            :src=\"url\"\n            :style=\"imgStyle\"\n            :class=\"ns.e('img')\"\n            @load=\"handleImgLoad\"\n            @error=\"handleImgError\"\n            @mousedown=\"handleMouseDown\"\n          />\n        </div>\n        <slot />\n      </div>\n    </transition>\n  </teleport>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n  computed,\n  effectScope,\n  markRaw,\n  nextTick,\n  onMounted,\n  ref,\n  watch,\n} from 'vue'\nimport { isNumber, useEventListener } from '@vueuse/core'\nimport { throttle } from 'lodash-unified'\nimport { useLocale, useNamespace, useZIndex } from '@element-plus/hooks'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport { isFirefox } from '@element-plus/utils'\nimport ElIcon from '@element-plus/components/icon'\nimport {\n  ArrowLeft,\n  ArrowRight,\n  Close,\n  FullScreen,\n  RefreshLeft,\n  RefreshRight,\n  ScaleToOriginal,\n  ZoomIn,\n  ZoomOut,\n} from '@element-plus/icons-vue'\nimport { imageViewerEmits, imageViewerProps } from './image-viewer'\n\nimport type { CSSProperties } from 'vue'\nimport type { ImageViewerAction } from './image-viewer'\n\nconst Mode = {\n  CONTAIN: {\n    name: 'contain',\n    icon: markRaw(FullScreen),\n  },\n  ORIGINAL: {\n    name: 'original',\n    icon: markRaw(ScaleToOriginal),\n  },\n}\n\nconst mousewheelEventName = isFirefox() ? 'DOMMouseScroll' : 'mousewheel'\n\ndefineOptions({\n  name: 'ElImageViewer',\n})\n\nconst props = defineProps(imageViewerProps)\nconst emit = defineEmits(imageViewerEmits)\n\nconst { t } = useLocale()\nconst ns = useNamespace('image-viewer')\nconst { nextZIndex } = useZIndex()\nconst wrapper = ref<HTMLDivElement>()\nconst imgRefs = ref<any[]>([])\n\nconst scopeEventListener = effectScope()\n\nconst loading = ref(true)\nconst index = ref(props.initialIndex)\nconst mode = ref(Mode.CONTAIN)\nconst transform = ref({\n  scale: 1,\n  deg: 0,\n  offsetX: 0,\n  offsetY: 0,\n  enableTransition: false,\n})\n\nconst isSingle = computed(() => {\n  const { urlList } = props\n  return urlList.length <= 1\n})\n\nconst isFirst = computed(() => {\n  return index.value === 0\n})\n\nconst isLast = computed(() => {\n  return index.value === props.urlList.length - 1\n})\n\nconst currentImg = computed(() => {\n  return props.urlList[index.value]\n})\n\nconst imgStyle = computed(() => {\n  const { scale, deg, offsetX, offsetY, enableTransition } = transform.value\n  let translateX = offsetX / scale\n  let translateY = offsetY / scale\n\n  switch (deg % 360) {\n    case 90:\n    case -270:\n      ;[translateX, translateY] = [translateY, -translateX]\n      break\n    case 180:\n    case -180:\n      ;[translateX, translateY] = [-translateX, -translateY]\n      break\n    case 270:\n    case -90:\n      ;[translateX, translateY] = [-translateY, translateX]\n      break\n  }\n\n  const style: CSSProperties = {\n    transform: `scale(${scale}) rotate(${deg}deg) translate(${translateX}px, ${translateY}px)`,\n    transition: enableTransition ? 'transform .3s' : '',\n  }\n  if (mode.value.name === Mode.CONTAIN.name) {\n    style.maxWidth = style.maxHeight = '100%'\n  }\n  return style\n})\n\nconst computedZIndex = computed(() => {\n  return isNumber(props.zIndex) ? props.zIndex : nextZIndex()\n})\n\nfunction hide() {\n  unregisterEventListener()\n  emit('close')\n}\n\nfunction registerEventListener() {\n  const keydownHandler = throttle((e: KeyboardEvent) => {\n    switch (e.code) {\n      // ESC\n      case EVENT_CODE.esc:\n        props.closeOnPressEscape && hide()\n        break\n      // SPACE\n      case EVENT_CODE.space:\n        toggleMode()\n        break\n      // LEFT_ARROW\n      case EVENT_CODE.left:\n        prev()\n        break\n      // UP_ARROW\n      case EVENT_CODE.up:\n        handleActions('zoomIn')\n        break\n      // RIGHT_ARROW\n      case EVENT_CODE.right:\n        next()\n        break\n      // DOWN_ARROW\n      case EVENT_CODE.down:\n        handleActions('zoomOut')\n        break\n    }\n  })\n  const mousewheelHandler = throttle(\n    (e: WheelEvent | any /* TODO: wheelDelta is deprecated */) => {\n      const delta = e.wheelDelta ? e.wheelDelta : -e.detail\n      if (delta > 0) {\n        handleActions('zoomIn', {\n          zoomRate: 1.2,\n          enableTransition: false,\n        })\n      } else {\n        handleActions('zoomOut', {\n          zoomRate: 1.2,\n          enableTransition: false,\n        })\n      }\n    }\n  )\n\n  scopeEventListener.run(() => {\n    useEventListener(document, 'keydown', keydownHandler)\n    useEventListener(document, mousewheelEventName, mousewheelHandler)\n  })\n}\n\nfunction unregisterEventListener() {\n  scopeEventListener.stop()\n}\n\nfunction handleImgLoad() {\n  loading.value = false\n}\n\nfunction handleImgError(e: Event) {\n  loading.value = false\n  ;(e.target as HTMLImageElement).alt = t('el.image.error')\n}\n\nfunction handleMouseDown(e: MouseEvent) {\n  if (loading.value || e.button !== 0 || !wrapper.value) return\n  transform.value.enableTransition = false\n\n  const { offsetX, offsetY } = transform.value\n  const startX = e.pageX\n  const startY = e.pageY\n\n  const dragHandler = throttle((ev: MouseEvent) => {\n    transform.value = {\n      ...transform.value,\n      offsetX: offsetX + ev.pageX - startX,\n      offsetY: offsetY + ev.pageY - startY,\n    }\n  })\n  const removeMousemove = useEventListener(document, 'mousemove', dragHandler)\n  useEventListener(document, 'mouseup', () => {\n    removeMousemove()\n  })\n\n  e.preventDefault()\n}\n\nfunction reset() {\n  transform.value = {\n    scale: 1,\n    deg: 0,\n    offsetX: 0,\n    offsetY: 0,\n    enableTransition: false,\n  }\n}\n\nfunction toggleMode() {\n  if (loading.value) return\n\n  const modeNames = Object.keys(Mode)\n  const modeValues = Object.values(Mode)\n  const currentMode = mode.value.name\n  const index = modeValues.findIndex((i) => i.name === currentMode)\n  const nextIndex = (index + 1) % modeNames.length\n  mode.value = Mode[modeNames[nextIndex]]\n  reset()\n}\n\nfunction prev() {\n  if (isFirst.value && !props.infinite) return\n  const len = props.urlList.length\n  index.value = (index.value - 1 + len) % len\n}\n\nfunction next() {\n  if (isLast.value && !props.infinite) return\n  const len = props.urlList.length\n  index.value = (index.value + 1) % len\n}\n\nfunction handleActions(action: ImageViewerAction, options = {}) {\n  if (loading.value) return\n  const { zoomRate, rotateDeg, enableTransition } = {\n    zoomRate: 1.4,\n    rotateDeg: 90,\n    enableTransition: true,\n    ...options,\n  }\n  switch (action) {\n    case 'zoomOut':\n      if (transform.value.scale > 0.2) {\n        transform.value.scale = Number.parseFloat(\n          (transform.value.scale / zoomRate).toFixed(3)\n        )\n      }\n      break\n    case 'zoomIn':\n      if (transform.value.scale < 7) {\n        transform.value.scale = Number.parseFloat(\n          (transform.value.scale * zoomRate).toFixed(3)\n        )\n      }\n      break\n    case 'clockwise':\n      transform.value.deg += rotateDeg\n      break\n    case 'anticlockwise':\n      transform.value.deg -= rotateDeg\n      break\n  }\n  transform.value.enableTransition = enableTransition\n}\n\nwatch(currentImg, () => {\n  nextTick(() => {\n    const $img = imgRefs.value[0]\n    if (!$img?.complete) {\n      loading.value = true\n    }\n  })\n})\n\nwatch(index, (val) => {\n  reset()\n  emit('switch', val)\n})\n\nonMounted(() => {\n  registerEventListener()\n  // add tabindex then wrapper can be focusable via Javascript\n  // focus wrapper so arrow key can't cause inner scroll behavior underneath\n  wrapper.value?.focus?.()\n})\n</script>\n"],"names":[],"mappings":"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"}

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

@@ -7,6 +7,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly infinite: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
     readonly hideOnClickModal: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
     readonly teleported: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
+    readonly closeOnPressEscape: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
 }, {
     Mode: {
         CONTAIN: {
@@ -26,6 +27,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly infinite: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
         readonly hideOnClickModal: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
         readonly teleported: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
+        readonly closeOnPressEscape: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
     }>> & {
         onClose?: (() => any) | undefined;
         onSwitch?: ((index: number) => any) | undefined;
@@ -129,6 +131,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly infinite: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
     readonly hideOnClickModal: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
     readonly teleported: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, false, unknown, unknown, unknown>;
+    readonly closeOnPressEscape: import("element-pe/es/utils").BuildPropReturn<BooleanConstructor, true, unknown, unknown, unknown>;
 }>> & {
     onClose?: (() => any) | undefined;
     onSwitch?: ((index: number) => any) | undefined;
@@ -137,6 +140,7 @@ declare const _default: import("vue").DefineComponent<{
     teleported: import("element-pe/es/utils").BuildPropType<BooleanConstructor, unknown, unknown>;
     infinite: import("element-pe/es/utils").BuildPropType<BooleanConstructor, unknown, unknown>;
     initialIndex: number;
+    closeOnPressEscape: import("element-pe/es/utils").BuildPropType<BooleanConstructor, unknown, unknown>;
     hideOnClickModal: import("element-pe/es/utils").BuildPropType<BooleanConstructor, unknown, unknown>;
     urlList: string[];
 }>;

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

@@ -25,6 +25,10 @@ const imageViewerProps = buildProps({
   teleported: {
     type: Boolean,
     default: false
+  },
+  closeOnPressEscape: {
+    type: Boolean,
+    default: true
   }
 });
 const imageViewerEmits = {

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

@@ -1 +1 @@
-{"version":3,"file":"image-viewer2.mjs","sources":["../../../../../../packages/components/image-viewer/src/image-viewer.ts"],"sourcesContent":["import { buildProps, definePropType, mutable } from '@element-plus/utils'\nimport type { ExtractPropTypes } from 'vue'\n\nexport type ImageViewerAction =\n  | 'zoomIn'\n  | 'zoomOut'\n  | 'clockwise'\n  | 'anticlockwise'\n\nexport const imageViewerProps = buildProps({\n  urlList: {\n    type: definePropType<string[]>(Array),\n    default: () => mutable([] as const),\n  },\n  zIndex: {\n    type: Number,\n  },\n  initialIndex: {\n    type: Number,\n    default: 0,\n  },\n  infinite: {\n    type: Boolean,\n    default: true,\n  },\n  hideOnClickModal: {\n    type: Boolean,\n    default: false,\n  },\n  teleported: {\n    type: Boolean,\n    default: false,\n  },\n} as const)\nexport type ImageViewerProps = ExtractPropTypes<typeof imageViewerProps>\n\nexport const imageViewerEmits = {\n  close: () => true,\n  switch: (index: number) => typeof index === 'number',\n}\nexport type ImageViewerEmits = typeof imageViewerEmits\n"],"names":[],"mappings":";;;;AACY,MAAC,gBAAgB,GAAG,UAAU,CAAC;AAC3C,EAAE,OAAO,EAAE;AACX,IAAI,IAAI,EAAE,cAAc,CAAC,KAAK,CAAC;AAC/B,IAAI,OAAO,EAAE,MAAM,OAAO,CAAC,EAAE,CAAC;AAC9B,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,GAAG;AACH,EAAE,YAAY,EAAE;AAChB,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,gBAAgB,EAAE;AACpB,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,UAAU,EAAE;AACd,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,CAAC,EAAE;AACS,MAAC,gBAAgB,GAAG;AAChC,EAAE,KAAK,EAAE,MAAM,IAAI;AACnB,EAAE,MAAM,EAAE,CAAC,KAAK,KAAK,OAAO,KAAK,KAAK,QAAQ;AAC9C;;;;"}
+{"version":3,"file":"image-viewer2.mjs","sources":["../../../../../../packages/components/image-viewer/src/image-viewer.ts"],"sourcesContent":["import { buildProps, definePropType, mutable } from '@element-plus/utils'\nimport type { ExtractPropTypes } from 'vue'\n\nexport type ImageViewerAction =\n  | 'zoomIn'\n  | 'zoomOut'\n  | 'clockwise'\n  | 'anticlockwise'\n\nexport const imageViewerProps = buildProps({\n  urlList: {\n    type: definePropType<string[]>(Array),\n    default: () => mutable([] as const),\n  },\n  zIndex: {\n    type: Number,\n  },\n  initialIndex: {\n    type: Number,\n    default: 0,\n  },\n  infinite: {\n    type: Boolean,\n    default: true,\n  },\n  hideOnClickModal: {\n    type: Boolean,\n    default: false,\n  },\n  teleported: {\n    type: Boolean,\n    default: false,\n  },\n  closeOnPressEscape: {\n    type: Boolean,\n    default: true,\n  },\n} as const)\nexport type ImageViewerProps = ExtractPropTypes<typeof imageViewerProps>\n\nexport const imageViewerEmits = {\n  close: () => true,\n  switch: (index: number) => typeof index === 'number',\n}\nexport type ImageViewerEmits = typeof imageViewerEmits\n"],"names":[],"mappings":";;;;AACY,MAAC,gBAAgB,GAAG,UAAU,CAAC;AAC3C,EAAE,OAAO,EAAE;AACX,IAAI,IAAI,EAAE,cAAc,CAAC,KAAK,CAAC;AAC/B,IAAI,OAAO,EAAE,MAAM,OAAO,CAAC,EAAE,CAAC;AAC9B,GAAG;AACH,EAAE,MAAM,EAAE;AACV,IAAI,IAAI,EAAE,MAAM;AAChB,GAAG;AACH,EAAE,YAAY,EAAE;AAChB,IAAI,IAAI,EAAE,MAAM;AAChB,IAAI,OAAO,EAAE,CAAC;AACd,GAAG;AACH,EAAE,QAAQ,EAAE;AACZ,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,EAAE,gBAAgB,EAAE;AACpB,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,UAAU,EAAE;AACd,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,KAAK;AAClB,GAAG;AACH,EAAE,kBAAkB,EAAE;AACtB,IAAI,IAAI,EAAE,OAAO;AACjB,IAAI,OAAO,EAAE,IAAI;AACjB,GAAG;AACH,CAAC,EAAE;AACS,MAAC,gBAAgB,GAAG;AAChC,EAAE,KAAK,EAAE,MAAM,IAAI;AACnB,EAAE,MAAM,EAAE,CAAC,KAAK,KAAK,OAAO,KAAK,KAAK,QAAQ;AAC9C;;;;"}

package/es/components/index.mjs

@@ -71,25 +71,25 @@ export { ElMessage } from './message/index.mjs';
 export { ElMessageBox } from './message-box/index.mjs';
 export { ElNotification } from './notification/index.mjs';
 export { ElPopover, ElPopoverDirective } from './popover/index.mjs';
-export { affixEmits, affixProps } from './affix/src/affix.mjs';
+export { affixEmits, affixProps } from './affix/src/affix2.mjs';
 export { alertEffects, alertEmits, alertProps } from './alert/src/alert.mjs';
-export { autocompleteEmits, autocompleteProps } from './autocomplete/src/autocomplete.mjs';
+export { autocompleteEmits, autocompleteProps } from './autocomplete/src/autocomplete2.mjs';
 export { avatarEmits, avatarProps } from './avatar/src/avatar.mjs';
 export { backtopEmits, backtopProps } from './backtop/src/backtop.mjs';
-export { badgeProps } from './badge/src/badge.mjs';
+export { badgeProps } from './badge/src/badge2.mjs';
 export { breadcrumbProps } from './breadcrumb/src/breadcrumb2.mjs';
-export { breadcrumbItemProps } from './breadcrumb/src/breadcrumb-item2.mjs';
+export { breadcrumbItemProps } from './breadcrumb/src/breadcrumb-item.mjs';
 export { buttonEmits, buttonNativeTypes, buttonProps, buttonTypes } from './button/src/button.mjs';
 export { calendarEmits, calendarProps } from './calendar/src/calendar.mjs';
-export { cardProps } from './card/src/card.mjs';
+export { cardProps } from './card/src/card2.mjs';
 export { carouselEmits, carouselProps } from './carousel/src/carousel2.mjs';
-export { carouselItemProps } from './carousel/src/carousel-item2.mjs';
+export { carouselItemProps } from './carousel/src/carousel-item.mjs';
 export { CASCADER_PANEL_INJECTION_KEY, ExpandTrigger } from './cascader-panel/src/types.mjs';
 export { CommonProps, DefaultProps, useCascaderConfig } from './cascader-panel/src/config.mjs';
 export { checkTagEmits, checkTagProps } from './check-tag/src/check-tag2.mjs';
 export { colProps } from './col/src/col.mjs';
-export { collapseEmits, collapseProps, emitChangeFn } from './collapse/src/collapse.mjs';
-export { collapseItemProps } from './collapse/src/collapse-item.mjs';
+export { collapseEmits, collapseProps, emitChangeFn } from './collapse/src/collapse2.mjs';
+export { collapseItemProps } from './collapse/src/collapse-item2.mjs';
 export { configProviderProps, messageConfig } from './config-provider/src/config-provider.mjs';
 export { useDialog } from './dialog/src/use-dialog.mjs';
 export { dialogEmits, dialogProps } from './dialog/src/dialog.mjs';
@@ -97,7 +97,7 @@ export { dividerProps } from './divider/src/divider2.mjs';
 export { drawerEmits, drawerProps } from './drawer/src/drawer2.mjs';
 export { DROPDOWN_COLLECTION_INJECTION_KEY, DROPDOWN_COLLECTION_ITEM_INJECTION_KEY, ElCollection, ElCollectionItem, FIRST_KEYS, FIRST_LAST_KEYS, LAST_KEYS, dropdownItemProps, dropdownMenuProps, dropdownProps } from './dropdown/src/dropdown.mjs';
 export { DROPDOWN_INJECTION_KEY } from './dropdown/src/tokens.mjs';
-export { emptyProps } from './empty/src/empty2.mjs';
+export { emptyProps } from './empty/src/empty.mjs';
 export { formEmits, formProps } from './form/src/form.mjs';
 export { formItemProps, formItemValidateStates } from './form/src/form-item2.mjs';
 export { iconProps } from './icon/src/icon.mjs';
@@ -105,28 +105,28 @@ export { imageEmits, imageProps } from './image/src/image2.mjs';
 export { imageViewerEmits, imageViewerProps } from './image-viewer/src/image-viewer2.mjs';
 export { inputEmits, inputProps } from './input/src/input2.mjs';
 export { inputNumberEmits, inputNumberProps } from './input-number/src/input-number.mjs';
-export { linkEmits, linkProps } from './link/src/link.mjs';
+export { linkEmits, linkProps } from './link/src/link2.mjs';
 export { menuEmits, menuProps } from './menu/src/menu.mjs';
 export { menuItemEmits, menuItemProps } from './menu/src/menu-item2.mjs';
 export { menuItemGroupProps } from './menu/src/menu-item-group2.mjs';
 export { subMenuProps } from './menu/src/sub-menu.mjs';
 export { overlayEmits, overlayProps } from './overlay/src/overlay.mjs';
-export { pageHeaderEmits, pageHeaderProps } from './page-header/src/page-header.mjs';
+export { pageHeaderEmits, pageHeaderProps } from './page-header/src/page-header2.mjs';
 export { paginationEmits, paginationProps } from './pagination/src/pagination.mjs';
-export { popconfirmProps } from './popconfirm/src/popconfirm2.mjs';
+export { popconfirmProps } from './popconfirm/src/popconfirm.mjs';
 export { useDeprecateAppendToBody } from './popper/src/deprecation.mjs';
-export { Effect, usePopperProps } from './popper/src/popper.mjs';
+export { Effect, usePopperProps } from './popper/src/popper2.mjs';
 export { usePopperTriggerProps } from './popper/src/trigger.mjs';
 export { usePopperContentProps, usePopperCoreConfigProps } from './popper/src/content.mjs';
-export { usePopperArrowProps } from './popper/src/arrow.mjs';
-export { default as ElPopperArrow } from './popper/src/arrow2.mjs';
+export { usePopperArrowProps } from './popper/src/arrow2.mjs';
+export { default as ElPopperArrow } from './popper/src/arrow.mjs';
 export { default as ElPopperTrigger } from './popper/src/trigger2.mjs';
 export { default as ElPopperContent } from './popper/src/content2.mjs';
 export { progressProps } from './progress/src/progress.mjs';
 export { radioEmits, radioProps, radioPropsBase, useRadio } from './radio/src/radio.mjs';
-export { radioGroupEmits, radioGroupProps } from './radio/src/radio-group2.mjs';
+export { radioGroupEmits, radioGroupProps } from './radio/src/radio-group.mjs';
 export { radioButtonProps } from './radio/src/radio-button.mjs';
-export { rateEmits, rateProps } from './rate/src/rate.mjs';
+export { rateEmits, rateProps } from './rate/src/rate2.mjs';
 export { IconComponentMap, IconMap, resultProps } from './result/src/result.mjs';
 export { rowProps } from './row/src/row.mjs';
 export { BAR_MAP, renderThumbStyle } from './scrollbar/src/util.mjs';
@@ -140,7 +140,7 @@ export { spaceProps } from './space/src/space.mjs';
 export { useSpace } from './space/src/use-space.mjs';
 export { switchEmits, switchProps } from './switch/src/switch.mjs';
 export { tabsEmits, tabsProps } from './tabs/src/tabs.mjs';
-export { tabBarProps } from './tabs/src/tab-bar.mjs';
+export { tabBarProps } from './tabs/src/tab-bar2.mjs';
 export { tabNavProps } from './tabs/src/tab-nav.mjs';
 export { tabPaneProps } from './tabs/src/tab-pane.mjs';
 export { tagEmits, tagProps } from './tag/src/tag.mjs';
@@ -149,12 +149,12 @@ export { DEFAULT_FORMATS_DATE, DEFAULT_FORMATS_DATEPICKER, DEFAULT_FORMATS_TIME
 export { timePickerDefaultProps } from './time-picker/src/common/props.mjs';
 export { default as CommonPicker } from './time-picker/src/common/picker.mjs';
 export { default as TimePickPanel } from './time-picker/src/time-picker-com/panel-time-pick.mjs';
-export { timelineItemProps } from './timeline/src/timeline-item.mjs';
-export { useTooltipContentProps, useTooltipProps, useTooltipTriggerProps } from './tooltip/src/tooltip.mjs';
+export { timelineItemProps } from './timeline/src/timeline-item2.mjs';
+export { useTooltipContentProps, useTooltipProps, useTooltipTriggerProps } from './tooltip/src/tooltip2.mjs';
 export { TOOLTIP_INJECTION_KEY } from './tooltip/src/tokens.mjs';
 export { CHANGE_EVENT } from '../constants/event.mjs';
 export { genFileId, uploadBaseProps, uploadListTypes, uploadProps } from './upload/src/upload.mjs';
-export { uploadContentProps } from './upload/src/upload-content.mjs';
+export { uploadContentProps } from './upload/src/upload-content2.mjs';
 export { uploadListEmits, uploadListProps } from './upload/src/upload-list.mjs';
 export { uploadDraggerEmits, uploadDraggerProps } from './upload/src/upload-dragger.mjs';
 export { default as FixedSizeList } from './virtual-list/src/components/fixed-size-list.mjs';