element-plus 1.2.0-beta.4 → 1.2.0-beta.5

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

@@ -21,7 +21,7 @@ export declare const ElImage: import("../../utils/types").SFCWithInstall<import(
     clickHandler: () => void;
     closeViewer: () => void;
     switchViewer: (val: number) => void;
-    t: (...args: any[]) => string;
+    t: import("../..").Translator;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     error: (evt: Event) => boolean;
     switch: (val: number) => boolean;

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

@@ -22,7 +22,7 @@ declare const _default: import("vue").DefineComponent<{
     clickHandler: () => void;
     closeViewer: () => void;
     switchViewer: (val: number) => void;
-    t: (...args: any[]) => string;
+    t: import("element-plus/es/hooks").Translator;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     error: (evt: Event) => boolean;
     switch: (val: number) => boolean;

package/lib/components/image/src/image.vue_vue_type_script_lang.js

@@ -24,8 +24,8 @@ var script = vue.defineComponent({
   props: image.imageProps,
   emits: image.imageEmits,
   setup(props, { emit, attrs: rawAttrs }) {
-    const { t } = index$1.useLocaleInject();
-    const attrs = index$2["default"]();
+    const { t } = index$1.useLocale();
+    const attrs = index$2.useAttrs();
     const hasLoadError = vue.ref(false);
     const loading = vue.ref(true);
     const imgWidth = vue.ref(0);

package/lib/components/image/src/image.vue_vue_type_script_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"image.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/image/src/image.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"container\"\n    :class=\"['el-image', $attrs.class]\"\n    :style=\"containerStyle\"\n  >\n    <slot v-if=\"loading\" name=\"placeholder\">\n      <div class=\"el-image__placeholder\"></div>\n    </slot>\n    <slot v-else-if=\"hasLoadError\" name=\"error\">\n      <div class=\"el-image__error\">{{ t('el.image.error') }}</div>\n    </slot>\n    <img\n      v-else\n      class=\"el-image__inner\"\n      v-bind=\"attrs\"\n      :src=\"src\"\n      :style=\"imageStyle\"\n      :class=\"{\n        'el-image__preview': preview,\n      }\"\n      @click=\"clickHandler\"\n    />\n    <teleport to=\"body\" :disabled=\"!appendToBody\">\n      <template v-if=\"preview\">\n        <image-viewer\n          v-if=\"showViewer\"\n          :z-index=\"zIndex\"\n          :initial-index=\"imageIndex\"\n          :url-list=\"previewSrcList\"\n          :hide-on-click-modal=\"hideOnClickModal\"\n          @close=\"closeViewer\"\n          @switch=\"switchViewer\"\n        >\n          <div v-if=\"$slots.viewer\">\n            <slot name=\"viewer\" />\n          </div>\n        </image-viewer>\n      </template>\n    </teleport>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed, ref, onMounted, watch, nextTick } from 'vue'\nimport { isString } from '@vue/shared'\nimport { useEventListener, useThrottleFn } from '@vueuse/core'\nimport { useAttrs, useLocaleInject } from '@element-plus/hooks'\nimport ImageViewer from '@element-plus/components/image-viewer'\nimport isServer from '@element-plus/utils/isServer'\nimport { getScrollContainer, isInContainer } from '@element-plus/utils/dom'\nimport { imageEmits, imageProps } from './image'\n\nimport type { CSSProperties, StyleValue } from 'vue'\n\nconst isHtmlElement = (e: any): e is Element =>\n  e && e.nodeType === Node.ELEMENT_NODE\n\nlet prevOverflow = ''\n\nexport default defineComponent({\n  name: 'ElImage',\n  components: {\n    ImageViewer,\n  },\n  inheritAttrs: false,\n\n  props: imageProps,\n  emits: imageEmits,\n\n  setup(props, { emit, attrs: rawAttrs }) {\n    const { t } = useLocaleInject()\n\n    const attrs = useAttrs()\n    const hasLoadError = ref(false)\n    const loading = ref(true)\n    const imgWidth = ref(0)\n    const imgHeight = ref(0)\n    const showViewer = ref(false)\n    const container = ref<HTMLElement>()\n\n    const _scrollContainer = ref<HTMLElement | Window>()\n    let stopScrollListener: () => void\n    let stopWheelListener: () => void\n\n    const containerStyle = computed(() => rawAttrs.style as StyleValue)\n\n    const imageStyle = computed<CSSProperties>(() => {\n      const { fit } = props\n      if (!isServer && fit) {\n        return { objectFit: fit }\n      }\n      return {}\n    })\n\n    const preview = computed(() => {\n      const { previewSrcList } = props\n      return Array.isArray(previewSrcList) && previewSrcList.length > 0\n    })\n\n    const imageIndex = computed(() => {\n      const { src, previewSrcList, initialIndex } = props\n      let previewIndex = initialIndex\n      const srcIndex = previewSrcList.indexOf(src)\n      if (srcIndex >= 0) {\n        previewIndex = srcIndex\n      }\n      return previewIndex\n    })\n\n    const loadImage = () => {\n      if (isServer) return\n\n      // reset status\n      loading.value = true\n      hasLoadError.value = false\n\n      const img = new Image()\n      img.addEventListener('load', (e) => handleLoad(e, img))\n      img.addEventListener('error', handleError)\n\n      // bind html attrs\n      // so it can behave consistently\n      Object.entries(attrs.value).forEach(([key, value]) => {\n        // avoid onload to be overwritten\n        if (key.toLowerCase() === 'onload') return\n        img.setAttribute(key, value as string)\n      })\n      img.src = props.src\n    }\n\n    function handleLoad(e: Event, img: HTMLImageElement) {\n      imgWidth.value = img.width\n      imgHeight.value = img.height\n      loading.value = false\n      hasLoadError.value = false\n    }\n\n    function handleError(event: Event) {\n      loading.value = false\n      hasLoadError.value = true\n      emit('error', event)\n    }\n\n    function handleLazyLoad() {\n      if (isInContainer(container.value, _scrollContainer.value)) {\n        loadImage()\n        removeLazyLoadListener()\n      }\n    }\n    const lazyLoadHandler = useThrottleFn(handleLazyLoad, 200)\n\n    async function addLazyLoadListener() {\n      if (isServer) return\n\n      await nextTick()\n\n      const { scrollContainer } = props\n      if (isHtmlElement(scrollContainer)) {\n        _scrollContainer.value = scrollContainer\n      } else if (isString(scrollContainer) && scrollContainer !== '') {\n        _scrollContainer.value =\n          document.querySelector<HTMLElement>(scrollContainer) ?? undefined\n      } else if (container.value) {\n        _scrollContainer.value = getScrollContainer(container.value)\n      }\n\n      if (_scrollContainer.value) {\n        stopScrollListener = useEventListener(\n          _scrollContainer,\n          'scroll',\n          lazyLoadHandler\n        )\n        setTimeout(() => handleLazyLoad(), 100)\n      }\n    }\n\n    function removeLazyLoadListener() {\n      if (isServer || !_scrollContainer.value || !lazyLoadHandler) return\n\n      stopScrollListener()\n      _scrollContainer.value = undefined\n    }\n\n    function wheelHandler(e: WheelEvent) {\n      if (!e.ctrlKey) return\n\n      if (e.deltaY < 0) {\n        e.preventDefault()\n        return false\n      } else if (e.deltaY > 0) {\n        e.preventDefault()\n        return false\n      }\n    }\n\n    function clickHandler() {\n      // don't show viewer when preview is false\n      if (!preview.value) return\n\n      stopWheelListener = useEventListener('wheel', wheelHandler, {\n        passive: false,\n      })\n\n      // prevent body scroll\n      prevOverflow = document.body.style.overflow\n      document.body.style.overflow = 'hidden'\n      showViewer.value = true\n    }\n\n    function closeViewer() {\n      stopWheelListener?.()\n      document.body.style.overflow = prevOverflow\n      showViewer.value = false\n      emit('close')\n    }\n\n    function switchViewer(val: number) {\n      emit('switch', val)\n    }\n\n    watch(\n      () => props.src,\n      () => {\n        if (props.lazy) {\n          // reset status\n          loading.value = true\n          hasLoadError.value = false\n          removeLazyLoadListener()\n          addLazyLoadListener()\n        } else {\n          loadImage()\n        }\n      }\n    )\n\n    onMounted(() => {\n      if (props.lazy) {\n        addLazyLoadListener()\n      } else {\n        loadImage()\n      }\n    })\n\n    return {\n      attrs,\n      loading,\n      hasLoadError,\n      showViewer,\n      containerStyle,\n      imageStyle,\n      preview,\n      imageIndex,\n      container,\n\n      clickHandler,\n      closeViewer,\n      switchViewer,\n      t,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","ImageViewer","imageProps","imageEmits","useLocaleInject","useAttrs","ref","computed","isServer","isInContainer","useThrottleFn","nextTick","isString","getScrollContainer","useEventListener"],"mappings":";;;;;;;;;;;;;;;AAuDA,MAAM,gBAAgB,CAAC,MACrB,KAAK,EAAE,aAAa,KAAK;AAE3B,IAAI,eAAe;AAEnB,aAAeA,oBAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,iBACVC;AAAA;AAAA,EAEF,cAAc;AAAA,EAEd,OAAOC;AAAA,EACP,OAAOC;AAAA,EAEP,MAAM,OAAO,EAAE,MAAM,OAAO,YAAY;AACtC,UAAM,EAAE,MAAMC;AAEd,UAAM,QAAQC;AACd,UAAM,eAAeC,QAAI;AACzB,UAAM,UAAUA,QAAI;AACpB,UAAM,WAAWA,QAAI;AACrB,UAAM,YAAYA,QAAI;AACtB,UAAM,aAAaA,QAAI;AACvB,UAAM,YAAYA;AAElB,UAAM,mBAAmBA;AACzB,QAAI;AACJ,QAAI;AAEJ,UAAM,iBAAiBC,aAAS,MAAM,SAAS;AAE/C,UAAM,aAAaA,aAAwB,MAAM;AAC/C,YAAM,EAAE,QAAQ;AAChB,UAAI,CAACC,uBAAY,KAAK;AACpB,eAAO,EAAE,WAAW;AAAA;AAEtB,aAAO;AAAA;AAGT,UAAM,UAAUD,aAAS,MAAM;AAC7B,YAAM,EAAE,mBAAmB;AAC3B,aAAO,MAAM,QAAQ,mBAAmB,eAAe,SAAS;AAAA;AAGlE,UAAM,aAAaA,aAAS,MAAM;AAChC,YAAM,EAAE,KAAK,gBAAgB,iBAAiB;AAC9C,UAAI,eAAe;AACnB,YAAM,WAAW,eAAe,QAAQ;AACxC,UAAI,YAAY,GAAG;AACjB,uBAAe;AAAA;AAEjB,aAAO;AAAA;AAGT,UAAM,YAAY,MAAM;AACtB,UAAIC;AAAU;AAGd,cAAQ,QAAQ;AAChB,mBAAa,QAAQ;AAErB,YAAM,MAAM,IAAI;AAChB,UAAI,iBAAiB,QAAQ,CAAC,MAAM,WAAW,GAAG;AAClD,UAAI,iBAAiB,SAAS;AAI9B,aAAO,QAAQ,MAAM,OAAO,QAAQ,CAAC,CAAC,KAAK,WAAW;AAEpD,YAAI,IAAI,kBAAkB;AAAU;AACpC,YAAI,aAAa,KAAK;AAAA;AAExB,UAAI,MAAM,MAAM;AAAA;AAGlB,wBAAoB,GAAU,KAAuB;AACnD,eAAS,QAAQ,IAAI;AACrB,gBAAU,QAAQ,IAAI;AACtB,cAAQ,QAAQ;AAChB,mBAAa,QAAQ;AAAA;AAGvB,yBAAqB,OAAc;AACjC,cAAQ,QAAQ;AAChB,mBAAa,QAAQ;AACrB,WAAK,SAAS;AAAA;AAGhB,8BAA0B;AACxB,UAAIC,kBAAc,UAAU,OAAO,iBAAiB,QAAQ;AAC1D;AACA;AAAA;AAAA;AAGJ,UAAM,kBAAkBC,mBAAc,gBAAgB;AAEtD,yCAAqC;;AACnC,UAAIF;AAAU;AAEd,YAAMG;AAEN,YAAM,EAAE,oBAAoB;AAC5B,UAAI,cAAc,kBAAkB;AAClC,yBAAiB,QAAQ;AAAA,iBAChBC,gBAAS,oBAAoB,oBAAoB,IAAI;AAC9D,yBAAiB,QACf,eAAS,cAA2B,qBAApC,YAAwD;AAAA,iBACjD,UAAU,OAAO;AAC1B,yBAAiB,QAAQC,uBAAmB,UAAU;AAAA;AAGxD,UAAI,iBAAiB,OAAO;AAC1B,6BAAqBC,sBACnB,kBACA,UACA;AAEF,mBAAW,MAAM,kBAAkB;AAAA;AAAA;AAIvC,sCAAkC;AAChC,UAAIN,uBAAY,CAAC,iBAAiB,SAAS,CAAC;AAAiB;AAE7D;AACA,uBAAiB,QAAQ;AAAA;AAG3B,0BAAsB,GAAe;AACnC,UAAI,CAAC,EAAE;AAAS;AAEhB,UAAI,EAAE,SAAS,GAAG;AAChB,UAAE;AACF,eAAO;AAAA,iBACE,EAAE,SAAS,GAAG;AACvB,UAAE;AACF,eAAO;AAAA;AAAA;AAIX,4BAAwB;AAEtB,UAAI,CAAC,QAAQ;AAAO;AAEpB,0BAAoBM,sBAAiB,SAAS,cAAc;AAAA,QAC1D,SAAS;AAAA;AAIX,qBAAe,SAAS,KAAK,MAAM;AACnC,eAAS,KAAK,MAAM,WAAW;AAC/B,iBAAW,QAAQ;AAAA;AAGrB,2BAAuB;AACrB;AACA,eAAS,KAAK,MAAM,WAAW;AAC/B,iBAAW,QAAQ;AACnB,WAAK;AAAA;AAGP,0BAAsB,KAAa;AACjC,WAAK,UAAU;AAAA;AAGjB,cACE,MAAM,MAAM,KACZ,MAAM;AACJ,UAAI,MAAM,MAAM;AAEd,gBAAQ,QAAQ;AAChB,qBAAa,QAAQ;AACrB;AACA;AAAA,aACK;AACL;AAAA;AAAA;AAKN,kBAAU,MAAM;AACd,UAAI,MAAM,MAAM;AACd;AAAA,aACK;AACL;AAAA;AAAA;AAIJ,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;;"}
+{"version":3,"file":"image.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/image/src/image.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"container\"\n    :class=\"['el-image', $attrs.class]\"\n    :style=\"containerStyle\"\n  >\n    <slot v-if=\"loading\" name=\"placeholder\">\n      <div class=\"el-image__placeholder\"></div>\n    </slot>\n    <slot v-else-if=\"hasLoadError\" name=\"error\">\n      <div class=\"el-image__error\">{{ t('el.image.error') }}</div>\n    </slot>\n    <img\n      v-else\n      class=\"el-image__inner\"\n      v-bind=\"attrs\"\n      :src=\"src\"\n      :style=\"imageStyle\"\n      :class=\"{\n        'el-image__preview': preview,\n      }\"\n      @click=\"clickHandler\"\n    />\n    <teleport to=\"body\" :disabled=\"!appendToBody\">\n      <template v-if=\"preview\">\n        <image-viewer\n          v-if=\"showViewer\"\n          :z-index=\"zIndex\"\n          :initial-index=\"imageIndex\"\n          :url-list=\"previewSrcList\"\n          :hide-on-click-modal=\"hideOnClickModal\"\n          @close=\"closeViewer\"\n          @switch=\"switchViewer\"\n        >\n          <div v-if=\"$slots.viewer\">\n            <slot name=\"viewer\" />\n          </div>\n        </image-viewer>\n      </template>\n    </teleport>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed, ref, onMounted, watch, nextTick } from 'vue'\nimport { isString } from '@vue/shared'\nimport { useEventListener, useThrottleFn } from '@vueuse/core'\nimport { useAttrs, useLocale } from '@element-plus/hooks'\nimport ImageViewer from '@element-plus/components/image-viewer'\nimport isServer from '@element-plus/utils/isServer'\nimport { getScrollContainer, isInContainer } from '@element-plus/utils/dom'\nimport { imageEmits, imageProps } from './image'\n\nimport type { CSSProperties, StyleValue } from 'vue'\n\nconst isHtmlElement = (e: any): e is Element =>\n  e && e.nodeType === Node.ELEMENT_NODE\n\nlet prevOverflow = ''\n\nexport default defineComponent({\n  name: 'ElImage',\n  components: {\n    ImageViewer,\n  },\n  inheritAttrs: false,\n\n  props: imageProps,\n  emits: imageEmits,\n\n  setup(props, { emit, attrs: rawAttrs }) {\n    const { t } = useLocale()\n\n    const attrs = useAttrs()\n    const hasLoadError = ref(false)\n    const loading = ref(true)\n    const imgWidth = ref(0)\n    const imgHeight = ref(0)\n    const showViewer = ref(false)\n    const container = ref<HTMLElement>()\n\n    const _scrollContainer = ref<HTMLElement | Window>()\n    let stopScrollListener: () => void\n    let stopWheelListener: () => void\n\n    const containerStyle = computed(() => rawAttrs.style as StyleValue)\n\n    const imageStyle = computed<CSSProperties>(() => {\n      const { fit } = props\n      if (!isServer && fit) {\n        return { objectFit: fit }\n      }\n      return {}\n    })\n\n    const preview = computed(() => {\n      const { previewSrcList } = props\n      return Array.isArray(previewSrcList) && previewSrcList.length > 0\n    })\n\n    const imageIndex = computed(() => {\n      const { src, previewSrcList, initialIndex } = props\n      let previewIndex = initialIndex\n      const srcIndex = previewSrcList.indexOf(src)\n      if (srcIndex >= 0) {\n        previewIndex = srcIndex\n      }\n      return previewIndex\n    })\n\n    const loadImage = () => {\n      if (isServer) return\n\n      // reset status\n      loading.value = true\n      hasLoadError.value = false\n\n      const img = new Image()\n      img.addEventListener('load', (e) => handleLoad(e, img))\n      img.addEventListener('error', handleError)\n\n      // bind html attrs\n      // so it can behave consistently\n      Object.entries(attrs.value).forEach(([key, value]) => {\n        // avoid onload to be overwritten\n        if (key.toLowerCase() === 'onload') return\n        img.setAttribute(key, value as string)\n      })\n      img.src = props.src\n    }\n\n    function handleLoad(e: Event, img: HTMLImageElement) {\n      imgWidth.value = img.width\n      imgHeight.value = img.height\n      loading.value = false\n      hasLoadError.value = false\n    }\n\n    function handleError(event: Event) {\n      loading.value = false\n      hasLoadError.value = true\n      emit('error', event)\n    }\n\n    function handleLazyLoad() {\n      if (isInContainer(container.value, _scrollContainer.value)) {\n        loadImage()\n        removeLazyLoadListener()\n      }\n    }\n    const lazyLoadHandler = useThrottleFn(handleLazyLoad, 200)\n\n    async function addLazyLoadListener() {\n      if (isServer) return\n\n      await nextTick()\n\n      const { scrollContainer } = props\n      if (isHtmlElement(scrollContainer)) {\n        _scrollContainer.value = scrollContainer\n      } else if (isString(scrollContainer) && scrollContainer !== '') {\n        _scrollContainer.value =\n          document.querySelector<HTMLElement>(scrollContainer) ?? undefined\n      } else if (container.value) {\n        _scrollContainer.value = getScrollContainer(container.value)\n      }\n\n      if (_scrollContainer.value) {\n        stopScrollListener = useEventListener(\n          _scrollContainer,\n          'scroll',\n          lazyLoadHandler\n        )\n        setTimeout(() => handleLazyLoad(), 100)\n      }\n    }\n\n    function removeLazyLoadListener() {\n      if (isServer || !_scrollContainer.value || !lazyLoadHandler) return\n\n      stopScrollListener()\n      _scrollContainer.value = undefined\n    }\n\n    function wheelHandler(e: WheelEvent) {\n      if (!e.ctrlKey) return\n\n      if (e.deltaY < 0) {\n        e.preventDefault()\n        return false\n      } else if (e.deltaY > 0) {\n        e.preventDefault()\n        return false\n      }\n    }\n\n    function clickHandler() {\n      // don't show viewer when preview is false\n      if (!preview.value) return\n\n      stopWheelListener = useEventListener('wheel', wheelHandler, {\n        passive: false,\n      })\n\n      // prevent body scroll\n      prevOverflow = document.body.style.overflow\n      document.body.style.overflow = 'hidden'\n      showViewer.value = true\n    }\n\n    function closeViewer() {\n      stopWheelListener?.()\n      document.body.style.overflow = prevOverflow\n      showViewer.value = false\n      emit('close')\n    }\n\n    function switchViewer(val: number) {\n      emit('switch', val)\n    }\n\n    watch(\n      () => props.src,\n      () => {\n        if (props.lazy) {\n          // reset status\n          loading.value = true\n          hasLoadError.value = false\n          removeLazyLoadListener()\n          addLazyLoadListener()\n        } else {\n          loadImage()\n        }\n      }\n    )\n\n    onMounted(() => {\n      if (props.lazy) {\n        addLazyLoadListener()\n      } else {\n        loadImage()\n      }\n    })\n\n    return {\n      attrs,\n      loading,\n      hasLoadError,\n      showViewer,\n      containerStyle,\n      imageStyle,\n      preview,\n      imageIndex,\n      container,\n\n      clickHandler,\n      closeViewer,\n      switchViewer,\n      t,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","ImageViewer","imageProps","imageEmits","useLocale","useAttrs","ref","computed","isServer","isInContainer","useThrottleFn","nextTick","isString","getScrollContainer","useEventListener"],"mappings":"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"}

package/lib/components/image/src/image.vue_vue_type_template_id_34467287_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"image.vue_vue_type_template_id_34467287_lang.js","sources":["../../../../../../packages/components/image/src/image.vue?vue&type=template&id=34467287&lang.js"],"sourcesContent":["<template>\n  <div\n    ref=\"container\"\n    :class=\"['el-image', $attrs.class]\"\n    :style=\"containerStyle\"\n  >\n    <slot v-if=\"loading\" name=\"placeholder\">\n      <div class=\"el-image__placeholder\"></div>\n    </slot>\n    <slot v-else-if=\"hasLoadError\" name=\"error\">\n      <div class=\"el-image__error\">{{ t('el.image.error') }}</div>\n    </slot>\n    <img\n      v-else\n      class=\"el-image__inner\"\n      v-bind=\"attrs\"\n      :src=\"src\"\n      :style=\"imageStyle\"\n      :class=\"{\n        'el-image__preview': preview,\n      }\"\n      @click=\"clickHandler\"\n    />\n    <teleport to=\"body\" :disabled=\"!appendToBody\">\n      <template v-if=\"preview\">\n        <image-viewer\n          v-if=\"showViewer\"\n          :z-index=\"zIndex\"\n          :initial-index=\"imageIndex\"\n          :url-list=\"previewSrcList\"\n          :hide-on-click-modal=\"hideOnClickModal\"\n          @close=\"closeViewer\"\n          @switch=\"switchViewer\"\n        >\n          <div v-if=\"$slots.viewer\">\n            <slot name=\"viewer\" />\n          </div>\n        </image-viewer>\n      </template>\n    </teleport>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed, ref, onMounted, watch, nextTick } from 'vue'\nimport { isString } from '@vue/shared'\nimport { useEventListener, useThrottleFn } from '@vueuse/core'\nimport { useAttrs, useLocaleInject } from '@element-plus/hooks'\nimport ImageViewer from '@element-plus/components/image-viewer'\nimport isServer from '@element-plus/utils/isServer'\nimport { getScrollContainer, isInContainer } from '@element-plus/utils/dom'\nimport { imageEmits, imageProps } from './image'\n\nimport type { CSSProperties, StyleValue } from 'vue'\n\nconst isHtmlElement = (e: any): e is Element =>\n  e && e.nodeType === Node.ELEMENT_NODE\n\nlet prevOverflow = ''\n\nexport default defineComponent({\n  name: 'ElImage',\n  components: {\n    ImageViewer,\n  },\n  inheritAttrs: false,\n\n  props: imageProps,\n  emits: imageEmits,\n\n  setup(props, { emit, attrs: rawAttrs }) {\n    const { t } = useLocaleInject()\n\n    const attrs = useAttrs()\n    const hasLoadError = ref(false)\n    const loading = ref(true)\n    const imgWidth = ref(0)\n    const imgHeight = ref(0)\n    const showViewer = ref(false)\n    const container = ref<HTMLElement>()\n\n    const _scrollContainer = ref<HTMLElement | Window>()\n    let stopScrollListener: () => void\n    let stopWheelListener: () => void\n\n    const containerStyle = computed(() => rawAttrs.style as StyleValue)\n\n    const imageStyle = computed<CSSProperties>(() => {\n      const { fit } = props\n      if (!isServer && fit) {\n        return { objectFit: fit }\n      }\n      return {}\n    })\n\n    const preview = computed(() => {\n      const { previewSrcList } = props\n      return Array.isArray(previewSrcList) && previewSrcList.length > 0\n    })\n\n    const imageIndex = computed(() => {\n      const { src, previewSrcList, initialIndex } = props\n      let previewIndex = initialIndex\n      const srcIndex = previewSrcList.indexOf(src)\n      if (srcIndex >= 0) {\n        previewIndex = srcIndex\n      }\n      return previewIndex\n    })\n\n    const loadImage = () => {\n      if (isServer) return\n\n      // reset status\n      loading.value = true\n      hasLoadError.value = false\n\n      const img = new Image()\n      img.addEventListener('load', (e) => handleLoad(e, img))\n      img.addEventListener('error', handleError)\n\n      // bind html attrs\n      // so it can behave consistently\n      Object.entries(attrs.value).forEach(([key, value]) => {\n        // avoid onload to be overwritten\n        if (key.toLowerCase() === 'onload') return\n        img.setAttribute(key, value as string)\n      })\n      img.src = props.src\n    }\n\n    function handleLoad(e: Event, img: HTMLImageElement) {\n      imgWidth.value = img.width\n      imgHeight.value = img.height\n      loading.value = false\n      hasLoadError.value = false\n    }\n\n    function handleError(event: Event) {\n      loading.value = false\n      hasLoadError.value = true\n      emit('error', event)\n    }\n\n    function handleLazyLoad() {\n      if (isInContainer(container.value, _scrollContainer.value)) {\n        loadImage()\n        removeLazyLoadListener()\n      }\n    }\n    const lazyLoadHandler = useThrottleFn(handleLazyLoad, 200)\n\n    async function addLazyLoadListener() {\n      if (isServer) return\n\n      await nextTick()\n\n      const { scrollContainer } = props\n      if (isHtmlElement(scrollContainer)) {\n        _scrollContainer.value = scrollContainer\n      } else if (isString(scrollContainer) && scrollContainer !== '') {\n        _scrollContainer.value =\n          document.querySelector<HTMLElement>(scrollContainer) ?? undefined\n      } else if (container.value) {\n        _scrollContainer.value = getScrollContainer(container.value)\n      }\n\n      if (_scrollContainer.value) {\n        stopScrollListener = useEventListener(\n          _scrollContainer,\n          'scroll',\n          lazyLoadHandler\n        )\n        setTimeout(() => handleLazyLoad(), 100)\n      }\n    }\n\n    function removeLazyLoadListener() {\n      if (isServer || !_scrollContainer.value || !lazyLoadHandler) return\n\n      stopScrollListener()\n      _scrollContainer.value = undefined\n    }\n\n    function wheelHandler(e: WheelEvent) {\n      if (!e.ctrlKey) return\n\n      if (e.deltaY < 0) {\n        e.preventDefault()\n        return false\n      } else if (e.deltaY > 0) {\n        e.preventDefault()\n        return false\n      }\n    }\n\n    function clickHandler() {\n      // don't show viewer when preview is false\n      if (!preview.value) return\n\n      stopWheelListener = useEventListener('wheel', wheelHandler, {\n        passive: false,\n      })\n\n      // prevent body scroll\n      prevOverflow = document.body.style.overflow\n      document.body.style.overflow = 'hidden'\n      showViewer.value = true\n    }\n\n    function closeViewer() {\n      stopWheelListener?.()\n      document.body.style.overflow = prevOverflow\n      showViewer.value = false\n      emit('close')\n    }\n\n    function switchViewer(val: number) {\n      emit('switch', val)\n    }\n\n    watch(\n      () => props.src,\n      () => {\n        if (props.lazy) {\n          // reset status\n          loading.value = true\n          hasLoadError.value = false\n          removeLazyLoadListener()\n          addLazyLoadListener()\n        } else {\n          loadImage()\n        }\n      }\n    )\n\n    onMounted(() => {\n      if (props.lazy) {\n        addLazyLoadListener()\n      } else {\n        loadImage()\n      }\n    })\n\n    return {\n      attrs,\n      loading,\n      hasLoadError,\n      showViewer,\n      containerStyle,\n      imageStyle,\n      preview,\n      imageIndex,\n      container,\n\n      clickHandler,\n      closeViewer,\n      switchViewer,\n      t,\n    }\n  },\n})\n</script>\n"],"names":["_createElementBlock","_renderSlot","_createElementVNode","_mergeProps","_createBlock"],"mappings":";;;;;;mEAOW,OAAM;qBAGN,OAAM;;;;;0BATfA;IACE,KAAI;AAAA,IACH,uCAAoB,YAAO;AAAA,IAC3B,0BAAO;;IAEI,eAAZC,uDAAA;MACE;AAAA,SAEe,oBAAjBA,iDAAA;MACEC,8BAAA,gCAAgC;2BAElCF,8BAAAG;;MAEE,OAAM;AAAA,OACE;MACP,KAAK;MACL,OAAO;MACP;;;MAGA,gDAAO;;sBAEVC;MAAU,IAAG;AAAA,MAAQ,WAAW;;MACd,iCAAhBJ;QAEU,oCADRI;;UAEG,WAAS;UACT,iBAAe;UACf,YAAU;UACV,uBAAqB;UACrB,SAAO;UACP,UAAQ;;+BAET;YAAW,YAAO,2BAAlBJ;cACEC;;;;;;;;;;;;"}
+{"version":3,"file":"image.vue_vue_type_template_id_34467287_lang.js","sources":["../../../../../../packages/components/image/src/image.vue?vue&type=template&id=34467287&lang.js"],"sourcesContent":["<template>\n  <div\n    ref=\"container\"\n    :class=\"['el-image', $attrs.class]\"\n    :style=\"containerStyle\"\n  >\n    <slot v-if=\"loading\" name=\"placeholder\">\n      <div class=\"el-image__placeholder\"></div>\n    </slot>\n    <slot v-else-if=\"hasLoadError\" name=\"error\">\n      <div class=\"el-image__error\">{{ t('el.image.error') }}</div>\n    </slot>\n    <img\n      v-else\n      class=\"el-image__inner\"\n      v-bind=\"attrs\"\n      :src=\"src\"\n      :style=\"imageStyle\"\n      :class=\"{\n        'el-image__preview': preview,\n      }\"\n      @click=\"clickHandler\"\n    />\n    <teleport to=\"body\" :disabled=\"!appendToBody\">\n      <template v-if=\"preview\">\n        <image-viewer\n          v-if=\"showViewer\"\n          :z-index=\"zIndex\"\n          :initial-index=\"imageIndex\"\n          :url-list=\"previewSrcList\"\n          :hide-on-click-modal=\"hideOnClickModal\"\n          @close=\"closeViewer\"\n          @switch=\"switchViewer\"\n        >\n          <div v-if=\"$slots.viewer\">\n            <slot name=\"viewer\" />\n          </div>\n        </image-viewer>\n      </template>\n    </teleport>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed, ref, onMounted, watch, nextTick } from 'vue'\nimport { isString } from '@vue/shared'\nimport { useEventListener, useThrottleFn } from '@vueuse/core'\nimport { useAttrs, useLocale } from '@element-plus/hooks'\nimport ImageViewer from '@element-plus/components/image-viewer'\nimport isServer from '@element-plus/utils/isServer'\nimport { getScrollContainer, isInContainer } from '@element-plus/utils/dom'\nimport { imageEmits, imageProps } from './image'\n\nimport type { CSSProperties, StyleValue } from 'vue'\n\nconst isHtmlElement = (e: any): e is Element =>\n  e && e.nodeType === Node.ELEMENT_NODE\n\nlet prevOverflow = ''\n\nexport default defineComponent({\n  name: 'ElImage',\n  components: {\n    ImageViewer,\n  },\n  inheritAttrs: false,\n\n  props: imageProps,\n  emits: imageEmits,\n\n  setup(props, { emit, attrs: rawAttrs }) {\n    const { t } = useLocale()\n\n    const attrs = useAttrs()\n    const hasLoadError = ref(false)\n    const loading = ref(true)\n    const imgWidth = ref(0)\n    const imgHeight = ref(0)\n    const showViewer = ref(false)\n    const container = ref<HTMLElement>()\n\n    const _scrollContainer = ref<HTMLElement | Window>()\n    let stopScrollListener: () => void\n    let stopWheelListener: () => void\n\n    const containerStyle = computed(() => rawAttrs.style as StyleValue)\n\n    const imageStyle = computed<CSSProperties>(() => {\n      const { fit } = props\n      if (!isServer && fit) {\n        return { objectFit: fit }\n      }\n      return {}\n    })\n\n    const preview = computed(() => {\n      const { previewSrcList } = props\n      return Array.isArray(previewSrcList) && previewSrcList.length > 0\n    })\n\n    const imageIndex = computed(() => {\n      const { src, previewSrcList, initialIndex } = props\n      let previewIndex = initialIndex\n      const srcIndex = previewSrcList.indexOf(src)\n      if (srcIndex >= 0) {\n        previewIndex = srcIndex\n      }\n      return previewIndex\n    })\n\n    const loadImage = () => {\n      if (isServer) return\n\n      // reset status\n      loading.value = true\n      hasLoadError.value = false\n\n      const img = new Image()\n      img.addEventListener('load', (e) => handleLoad(e, img))\n      img.addEventListener('error', handleError)\n\n      // bind html attrs\n      // so it can behave consistently\n      Object.entries(attrs.value).forEach(([key, value]) => {\n        // avoid onload to be overwritten\n        if (key.toLowerCase() === 'onload') return\n        img.setAttribute(key, value as string)\n      })\n      img.src = props.src\n    }\n\n    function handleLoad(e: Event, img: HTMLImageElement) {\n      imgWidth.value = img.width\n      imgHeight.value = img.height\n      loading.value = false\n      hasLoadError.value = false\n    }\n\n    function handleError(event: Event) {\n      loading.value = false\n      hasLoadError.value = true\n      emit('error', event)\n    }\n\n    function handleLazyLoad() {\n      if (isInContainer(container.value, _scrollContainer.value)) {\n        loadImage()\n        removeLazyLoadListener()\n      }\n    }\n    const lazyLoadHandler = useThrottleFn(handleLazyLoad, 200)\n\n    async function addLazyLoadListener() {\n      if (isServer) return\n\n      await nextTick()\n\n      const { scrollContainer } = props\n      if (isHtmlElement(scrollContainer)) {\n        _scrollContainer.value = scrollContainer\n      } else if (isString(scrollContainer) && scrollContainer !== '') {\n        _scrollContainer.value =\n          document.querySelector<HTMLElement>(scrollContainer) ?? undefined\n      } else if (container.value) {\n        _scrollContainer.value = getScrollContainer(container.value)\n      }\n\n      if (_scrollContainer.value) {\n        stopScrollListener = useEventListener(\n          _scrollContainer,\n          'scroll',\n          lazyLoadHandler\n        )\n        setTimeout(() => handleLazyLoad(), 100)\n      }\n    }\n\n    function removeLazyLoadListener() {\n      if (isServer || !_scrollContainer.value || !lazyLoadHandler) return\n\n      stopScrollListener()\n      _scrollContainer.value = undefined\n    }\n\n    function wheelHandler(e: WheelEvent) {\n      if (!e.ctrlKey) return\n\n      if (e.deltaY < 0) {\n        e.preventDefault()\n        return false\n      } else if (e.deltaY > 0) {\n        e.preventDefault()\n        return false\n      }\n    }\n\n    function clickHandler() {\n      // don't show viewer when preview is false\n      if (!preview.value) return\n\n      stopWheelListener = useEventListener('wheel', wheelHandler, {\n        passive: false,\n      })\n\n      // prevent body scroll\n      prevOverflow = document.body.style.overflow\n      document.body.style.overflow = 'hidden'\n      showViewer.value = true\n    }\n\n    function closeViewer() {\n      stopWheelListener?.()\n      document.body.style.overflow = prevOverflow\n      showViewer.value = false\n      emit('close')\n    }\n\n    function switchViewer(val: number) {\n      emit('switch', val)\n    }\n\n    watch(\n      () => props.src,\n      () => {\n        if (props.lazy) {\n          // reset status\n          loading.value = true\n          hasLoadError.value = false\n          removeLazyLoadListener()\n          addLazyLoadListener()\n        } else {\n          loadImage()\n        }\n      }\n    )\n\n    onMounted(() => {\n      if (props.lazy) {\n        addLazyLoadListener()\n      } else {\n        loadImage()\n      }\n    })\n\n    return {\n      attrs,\n      loading,\n      hasLoadError,\n      showViewer,\n      containerStyle,\n      imageStyle,\n      preview,\n      imageIndex,\n      container,\n\n      clickHandler,\n      closeViewer,\n      switchViewer,\n      t,\n    }\n  },\n})\n</script>\n"],"names":["_createElementBlock","_renderSlot","_createElementVNode","_mergeProps","_createBlock"],"mappings":";;;;;;mEAOW,OAAM;qBAGN,OAAM;;;;;0BATfA;IACE,KAAI;AAAA,IACH,uCAAoB,YAAO;AAAA,IAC3B,0BAAO;;IAEI,eAAZC,uDAAA;MACE;AAAA,SAEe,oBAAjBA,iDAAA;MACEC,8BAAA,gCAAgC;2BAElCF,8BAAAG;;MAEE,OAAM;AAAA,OACE;MACP,KAAK;MACL,OAAO;MACP;;;MAGA,gDAAO;;sBAEVC;MAAU,IAAG;AAAA,MAAQ,WAAW;;MACd,iCAAhBJ;QAEU,oCADRI;;UAEG,WAAS;UACT,iBAAe;UACf,YAAU;UACV,uBAAqB;UACrB,SAAO;UACP,UAAQ;;+BAET;YAAW,YAAO,2BAAlBJ;cACEC;;;;;;;;;;;;"}

package/lib/components/image-viewer/src/image-viewer.vue_vue_type_script_lang.js

@@ -38,7 +38,7 @@ var script = vue.defineComponent({
   props: imageViewer.imageViewerProps,
   emits: imageViewer.imageViewerEmits,
   setup(props, { emit }) {
-    const { t } = index$1.useLocaleInject();
+    const { t } = index$1.useLocale();
     const wrapper = vue.ref();
     const img = vue.ref();
     const scopeEventListener = vue.effectScope();

package/lib/components/image-viewer/src/image-viewer.vue_vue_type_script_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"image-viewer.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/image-viewer/src/image-viewer.vue"],"sourcesContent":["<template>\n  <transition name=\"viewer-fade\">\n    <div\n      ref=\"wrapper\"\n      :tabindex=\"-1\"\n      class=\"el-image-viewer__wrapper\"\n      :style=\"{ zIndex }\"\n    >\n      <div\n        class=\"el-image-viewer__mask\"\n        @click.self=\"hideOnClickModal && hide()\"\n      />\n\n      <!-- CLOSE -->\n      <span class=\"el-image-viewer__btn el-image-viewer__close\" @click=\"hide\">\n        <el-icon><close /></el-icon>\n      </span>\n\n      <!-- ARROW -->\n      <template v-if=\"!isSingle\">\n        <span\n          class=\"el-image-viewer__btn el-image-viewer__prev\"\n          :class=\"{ 'is-disabled': !infinite && isFirst }\"\n          @click=\"prev\"\n        >\n          <el-icon><arrow-left /></el-icon>\n        </span>\n        <span\n          class=\"el-image-viewer__btn el-image-viewer__next\"\n          :class=\"{ 'is-disabled': !infinite && isLast }\"\n          @click=\"next\"\n        >\n          <el-icon><arrow-right /></el-icon>\n        </span>\n      </template>\n      <!-- ACTIONS -->\n      <div class=\"el-image-viewer__btn el-image-viewer__actions\">\n        <div class=\"el-image-viewer__actions__inner\">\n          <el-icon @click=\"handleActions('zoomOut')\">\n            <zoom-out />\n          </el-icon>\n          <el-icon @click=\"handleActions('zoomIn')\">\n            <zoom-in />\n          </el-icon>\n          <i class=\"el-image-viewer__actions__divider\"></i>\n          <el-icon @click=\"toggleMode\">\n            <component :is=\"mode.icon\" />\n          </el-icon>\n          <i class=\"el-image-viewer__actions__divider\"></i>\n          <el-icon @click=\"handleActions('anticlockwise')\">\n            <refresh-left />\n          </el-icon>\n          <el-icon @click=\"handleActions('clockwise')\">\n            <refresh-right />\n          </el-icon>\n        </div>\n      </div>\n      <!-- CANVAS -->\n      <div class=\"el-image-viewer__canvas\">\n        <img\n          v-for=\"(url, i) in urlList\"\n          v-show=\"i === index\"\n          ref=\"img\"\n          :key=\"url\"\n          :src=\"url\"\n          :style=\"imgStyle\"\n          class=\"el-image-viewer__img\"\n          @load=\"handleImgLoad\"\n          @error=\"handleImgError\"\n          @mousedown=\"handleMouseDown\"\n        />\n      </div>\n      <slot />\n    </div>\n  </transition>\n</template>\n\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  computed,\n  ref,\n  onMounted,\n  watch,\n  nextTick,\n  effectScope,\n  markRaw,\n} from 'vue'\nimport { useEventListener } from '@vueuse/core'\nimport ElIcon from '@element-plus/components/icon'\nimport { useLocaleInject } from '@element-plus/hooks'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\nimport { rafThrottle, isFirefox } from '@element-plus/utils/util'\nimport {\n  Close,\n  ArrowLeft,\n  ArrowRight,\n  ZoomOut,\n  ZoomIn,\n  RefreshLeft,\n  RefreshRight,\n  FullScreen,\n  ScaleToOriginal,\n} from '@element-plus/icons'\nimport { imageViewerProps, imageViewerEmits } from './image-viewer'\n\nimport type { CSSProperties } from 'vue'\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'\nexport type ImageViewerAction =\n  | 'zoomIn'\n  | 'zoomOut'\n  | 'clockwise'\n  | 'anticlockwise'\n\nexport default defineComponent({\n  name: 'ElImageViewer',\n  components: {\n    ElIcon,\n    Close,\n    ArrowLeft,\n    ArrowRight,\n    ZoomOut,\n    ZoomIn,\n    RefreshLeft,\n    RefreshRight,\n  },\n  props: imageViewerProps,\n  emits: imageViewerEmits,\n\n  setup(props, { emit }) {\n    const { t } = useLocaleInject()\n    const wrapper = ref<HTMLDivElement>()\n    const img = ref<HTMLImageElement>()\n\n    const scopeEventListener = effectScope()\n\n    const loading = ref(true)\n    const index = ref(props.initialIndex)\n    const mode = ref(Mode.CONTAIN)\n    const transform = ref({\n      scale: 1,\n      deg: 0,\n      offsetX: 0,\n      offsetY: 0,\n      enableTransition: false,\n    })\n\n    const isSingle = computed(() => {\n      const { urlList } = props\n      return urlList.length <= 1\n    })\n\n    const isFirst = computed(() => {\n      return index.value === 0\n    })\n\n    const isLast = computed(() => {\n      return index.value === props.urlList.length - 1\n    })\n\n    const currentImg = computed(() => {\n      return props.urlList[index.value]\n    })\n\n    const imgStyle = computed(() => {\n      const { scale, deg, offsetX, offsetY, enableTransition } = transform.value\n      const style: CSSProperties = {\n        transform: `scale(${scale}) rotate(${deg}deg)`,\n        transition: enableTransition ? 'transform .3s' : '',\n        marginLeft: `${offsetX}px`,\n        marginTop: `${offsetY}px`,\n      }\n      if (mode.value.name === Mode.CONTAIN.name) {\n        style.maxWidth = style.maxHeight = '100%'\n      }\n      return style\n    })\n\n    function hide() {\n      unregisterEventListener()\n      emit('close')\n    }\n\n    function registerEventListener() {\n      const keydownHandler = rafThrottle((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 = rafThrottle(\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: 0.015,\n              enableTransition: false,\n            })\n          } else {\n            handleActions('zoomOut', {\n              zoomRate: 0.015,\n              enableTransition: false,\n            })\n          }\n        }\n      )\n\n      scopeEventListener.run(() => {\n        useEventListener(document, 'keydown', keydownHandler)\n        useEventListener(document, mousewheelEventName, mousewheelHandler)\n      })\n    }\n\n    function unregisterEventListener() {\n      scopeEventListener.stop()\n    }\n\n    function handleImgLoad() {\n      loading.value = false\n    }\n\n    function handleImgError(e: Event) {\n      loading.value = false\n      ;(e.target as HTMLImageElement).alt = t('el.image.error')\n    }\n\n    function handleMouseDown(e: MouseEvent) {\n      if (loading.value || e.button !== 0 || !wrapper.value) return\n\n      const { offsetX, offsetY } = transform.value\n      const startX = e.pageX\n      const startY = e.pageY\n\n      const divLeft = wrapper.value.clientLeft\n      const divRight = wrapper.value.clientLeft + wrapper.value.clientWidth\n      const divTop = wrapper.value.clientTop\n      const divBottom = wrapper.value.clientTop + wrapper.value.clientHeight\n\n      const dragHandler = rafThrottle((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(\n        document,\n        'mousemove',\n        dragHandler\n      )\n      useEventListener(document, 'mouseup', (evt) => {\n        const mouseX = evt.pageX\n        const mouseY = evt.pageY\n        if (\n          mouseX < divLeft ||\n          mouseX > divRight ||\n          mouseY < divTop ||\n          mouseY > divBottom\n        ) {\n          reset()\n        }\n        removeMousemove()\n      })\n\n      e.preventDefault()\n    }\n\n    function reset() {\n      transform.value = {\n        scale: 1,\n        deg: 0,\n        offsetX: 0,\n        offsetY: 0,\n        enableTransition: false,\n      }\n    }\n\n    function 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\n    function prev() {\n      if (isFirst.value && !props.infinite) return\n      const len = props.urlList.length\n      index.value = (index.value - 1 + len) % len\n    }\n\n    function next() {\n      if (isLast.value && !props.infinite) return\n      const len = props.urlList.length\n      index.value = (index.value + 1) % len\n    }\n\n    function handleActions(action: ImageViewerAction, options = {}) {\n      if (loading.value) return\n      const { zoomRate, rotateDeg, enableTransition } = {\n        zoomRate: 0.2,\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 = parseFloat(\n              (transform.value.scale - zoomRate).toFixed(3)\n            )\n          }\n          break\n        case 'zoomIn':\n          transform.value.scale = parseFloat(\n            (transform.value.scale + zoomRate).toFixed(3)\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\n    watch(currentImg, () => {\n      nextTick(() => {\n        const $img = img.value\n        if (!$img?.complete) {\n          loading.value = true\n        }\n      })\n    })\n\n    watch(index, (val) => {\n      reset()\n      emit('switch', val)\n    })\n\n    onMounted(() => {\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\n    return {\n      index,\n      wrapper,\n      img,\n      isSingle,\n      isFirst,\n      isLast,\n      currentImg,\n      imgStyle,\n      mode,\n      handleActions,\n      prev,\n      next,\n      hide,\n      toggleMode,\n      handleImgLoad,\n      handleImgError,\n      handleMouseDown,\n    }\n  },\n})\n</script>\n"],"names":["markRaw","FullScreen","ScaleToOriginal","isFirefox","defineComponent","ElIcon","Close","ArrowLeft","ArrowRight","ZoomOut","ZoomIn","RefreshLeft","RefreshRight","imageViewerProps","imageViewerEmits","useLocaleInject","ref","effectScope","computed","rafThrottle","EVENT_CODE","useEventListener"],"mappings":";;;;;;;;;;;;;;AA4GA,MAAM,OAAO;AAAA,EACX,SAAS;AAAA,IACP,MAAM;AAAA,IACN,MAAMA,YAAQC;AAAA;AAAA,EAEhB,UAAU;AAAA,IACR,MAAM;AAAA,IACN,MAAMD,YAAQE;AAAA;AAAA;AAIlB,MAAM,sBAAsBC,mBAAc,mBAAmB;AAO7D,aAAeC,oBAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,YACVC;AAAA,WACAC;AAAA,eACAC;AAAA,gBACAC;AAAA,aACAC;AAAA,YACAC;AAAA,iBACAC;AAAA,kBACAC;AAAA;AAAA,EAEF,OAAOC;AAAA,EACP,OAAOC;AAAA,EAEP,MAAM,OAAO,EAAE,QAAQ;AACrB,UAAM,EAAE,MAAMC;AACd,UAAM,UAAUC;AAChB,UAAM,MAAMA;AAEZ,UAAM,qBAAqBC;AAE3B,UAAM,UAAUD,QAAI;AACpB,UAAM,QAAQA,QAAI,MAAM;AACxB,UAAM,OAAOA,QAAI,KAAK;AACtB,UAAM,YAAYA,QAAI;AAAA,MACpB,OAAO;AAAA,MACP,KAAK;AAAA,MACL,SAAS;AAAA,MACT,SAAS;AAAA,MACT,kBAAkB;AAAA;AAGpB,UAAM,WAAWE,aAAS,MAAM;AAC9B,YAAM,EAAE,YAAY;AACpB,aAAO,QAAQ,UAAU;AAAA;AAG3B,UAAM,UAAUA,aAAS,MAAM;AAC7B,aAAO,MAAM,UAAU;AAAA;AAGzB,UAAM,SAASA,aAAS,MAAM;AAC5B,aAAO,MAAM,UAAU,MAAM,QAAQ,SAAS;AAAA;AAGhD,UAAM,aAAaA,aAAS,MAAM;AAChC,aAAO,MAAM,QAAQ,MAAM;AAAA;AAG7B,UAAM,WAAWA,aAAS,MAAM;AAC9B,YAAM,EAAE,OAAO,KAAK,SAAS,SAAS,qBAAqB,UAAU;AACrE,YAAM,QAAuB;AAAA,QAC3B,WAAW,SAAS,iBAAiB;AAAA,QACrC,YAAY,mBAAmB,kBAAkB;AAAA,QACjD,YAAY,GAAG;AAAA,QACf,WAAW,GAAG;AAAA;AAEhB,UAAI,KAAK,MAAM,SAAS,KAAK,QAAQ,MAAM;AACzC,cAAM,WAAW,MAAM,YAAY;AAAA;AAErC,aAAO;AAAA;AAGT,oBAAgB;AACd;AACA,WAAK;AAAA;AAGP,qCAAiC;AAC/B,YAAM,iBAAiBC,iBAAY,CAAC,MAAqB;AACvD,gBAAQ,EAAE;AAAA,eAEHC,gBAAW;AACd;AACA;AAAA,eAEGA,gBAAW;AACd;AACA;AAAA,eAEGA,gBAAW;AACd;AACA;AAAA,eAEGA,gBAAW;AACd,0BAAc;AACd;AAAA,eAEGA,gBAAW;AACd;AACA;AAAA,eAEGA,gBAAW;AACd,0BAAc;AACd;AAAA;AAAA;AAGN,YAAM,oBAAoBD,iBACxB,CAAC,MAA6D;AAC5D,cAAM,QAAQ,EAAE,aAAa,EAAE,aAAa,CAAC,EAAE;AAC/C,YAAI,QAAQ,GAAG;AACb,wBAAc,UAAU;AAAA,YACtB,UAAU;AAAA,YACV,kBAAkB;AAAA;AAAA,eAEf;AACL,wBAAc,WAAW;AAAA,YACvB,UAAU;AAAA,YACV,kBAAkB;AAAA;AAAA;AAAA;AAM1B,yBAAmB,IAAI,MAAM;AAC3B,8BAAiB,UAAU,WAAW;AACtC,8BAAiB,UAAU,qBAAqB;AAAA;AAAA;AAIpD,uCAAmC;AACjC,yBAAmB;AAAA;AAGrB,6BAAyB;AACvB,cAAQ,QAAQ;AAAA;AAGlB,4BAAwB,GAAU;AAChC,cAAQ,QAAQ;AACf,MAAC,EAAE,OAA4B,MAAM,EAAE;AAAA;AAG1C,6BAAyB,GAAe;AACtC,UAAI,QAAQ,SAAS,EAAE,WAAW,KAAK,CAAC,QAAQ;AAAO;AAEvD,YAAM,EAAE,SAAS,YAAY,UAAU;AACvC,YAAM,SAAS,EAAE;AACjB,YAAM,SAAS,EAAE;AAEjB,YAAM,UAAU,QAAQ,MAAM;AAC9B,YAAM,WAAW,QAAQ,MAAM,aAAa,QAAQ,MAAM;AAC1D,YAAM,SAAS,QAAQ,MAAM;AAC7B,YAAM,YAAY,QAAQ,MAAM,YAAY,QAAQ,MAAM;AAE1D,YAAM,cAAcA,iBAAY,CAAC,OAAmB;AAClD,kBAAU,QAAQ;AAAA,aACb,UAAU;AAAA,UACb,SAAS,UAAU,GAAG,QAAQ;AAAA,UAC9B,SAAS,UAAU,GAAG,QAAQ;AAAA;AAAA;AAGlC,YAAM,kBAAkBE,sBACtB,UACA,aACA;AAEF,4BAAiB,UAAU,WAAW,CAAC,QAAQ;AAC7C,cAAM,SAAS,IAAI;AACnB,cAAM,SAAS,IAAI;AACnB,YACE,SAAS,WACT,SAAS,YACT,SAAS,UACT,SAAS,WACT;AACA;AAAA;AAEF;AAAA;AAGF,QAAE;AAAA;AAGJ,qBAAiB;AACf,gBAAU,QAAQ;AAAA,QAChB,OAAO;AAAA,QACP,KAAK;AAAA,QACL,SAAS;AAAA,QACT,SAAS;AAAA,QACT,kBAAkB;AAAA;AAAA;AAItB,0BAAsB;AACpB,UAAI,QAAQ;AAAO;AAEnB,YAAM,YAAY,OAAO,KAAK;AAC9B,YAAM,aAAa,OAAO,OAAO;AACjC,YAAM,cAAc,KAAK,MAAM;AAC/B,YAAM,SAAQ,WAAW,UAAU,CAAC,MAAM,EAAE,SAAS;AACrD,YAAM,YAAa,UAAQ,KAAK,UAAU;AAC1C,WAAK,QAAQ,KAAK,UAAU;AAC5B;AAAA;AAGF,oBAAgB;AACd,UAAI,QAAQ,SAAS,CAAC,MAAM;AAAU;AACtC,YAAM,MAAM,MAAM,QAAQ;AAC1B,YAAM,QAAS,OAAM,QAAQ,IAAI,OAAO;AAAA;AAG1C,oBAAgB;AACd,UAAI,OAAO,SAAS,CAAC,MAAM;AAAU;AACrC,YAAM,MAAM,MAAM,QAAQ;AAC1B,YAAM,QAAS,OAAM,QAAQ,KAAK;AAAA;AAGpC,2BAAuB,QAA2B,UAAU,IAAI;AAC9D,UAAI,QAAQ;AAAO;AACnB,YAAM,EAAE,UAAU,WAAW,qBAAqB;AAAA,QAChD,UAAU;AAAA,QACV,WAAW;AAAA,QACX,kBAAkB;AAAA,WACf;AAAA;AAEL,cAAQ;AAAA,aACD;AACH,cAAI,UAAU,MAAM,QAAQ,KAAK;AAC/B,sBAAU,MAAM,QAAQ,WACrB,WAAU,MAAM,QAAQ,UAAU,QAAQ;AAAA;AAG/C;AAAA,aACG;AACH,oBAAU,MAAM,QAAQ,WACrB,WAAU,MAAM,QAAQ,UAAU,QAAQ;AAE7C;AAAA,aACG;AACH,oBAAU,MAAM,OAAO;AACvB;AAAA,aACG;AACH,oBAAU,MAAM,OAAO;AACvB;AAAA;AAEJ,gBAAU,MAAM,mBAAmB;AAAA;AAGrC,cAAM,YAAY,MAAM;AACtB,mBAAS,MAAM;AACb,cAAM,OAAO,IAAI;AACjB,YAAI,+BAAO,WAAU;AACnB,kBAAQ,QAAQ;AAAA;AAAA;AAAA;AAKtB,cAAM,OAAO,CAAC,QAAQ;AACpB;AACA,WAAK,UAAU;AAAA;AAGjB,kBAAU,MAAM;;AACd;AAGA,0BAAQ,UAAR,mBAAe,UAAf;AAAA;AAGF,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;;"}
+{"version":3,"file":"image-viewer.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/image-viewer/src/image-viewer.vue"],"sourcesContent":["<template>\n  <transition name=\"viewer-fade\">\n    <div\n      ref=\"wrapper\"\n      :tabindex=\"-1\"\n      class=\"el-image-viewer__wrapper\"\n      :style=\"{ zIndex }\"\n    >\n      <div\n        class=\"el-image-viewer__mask\"\n        @click.self=\"hideOnClickModal && hide()\"\n      />\n\n      <!-- CLOSE -->\n      <span class=\"el-image-viewer__btn el-image-viewer__close\" @click=\"hide\">\n        <el-icon><close /></el-icon>\n      </span>\n\n      <!-- ARROW -->\n      <template v-if=\"!isSingle\">\n        <span\n          class=\"el-image-viewer__btn el-image-viewer__prev\"\n          :class=\"{ 'is-disabled': !infinite && isFirst }\"\n          @click=\"prev\"\n        >\n          <el-icon><arrow-left /></el-icon>\n        </span>\n        <span\n          class=\"el-image-viewer__btn el-image-viewer__next\"\n          :class=\"{ 'is-disabled': !infinite && isLast }\"\n          @click=\"next\"\n        >\n          <el-icon><arrow-right /></el-icon>\n        </span>\n      </template>\n      <!-- ACTIONS -->\n      <div class=\"el-image-viewer__btn el-image-viewer__actions\">\n        <div class=\"el-image-viewer__actions__inner\">\n          <el-icon @click=\"handleActions('zoomOut')\">\n            <zoom-out />\n          </el-icon>\n          <el-icon @click=\"handleActions('zoomIn')\">\n            <zoom-in />\n          </el-icon>\n          <i class=\"el-image-viewer__actions__divider\"></i>\n          <el-icon @click=\"toggleMode\">\n            <component :is=\"mode.icon\" />\n          </el-icon>\n          <i class=\"el-image-viewer__actions__divider\"></i>\n          <el-icon @click=\"handleActions('anticlockwise')\">\n            <refresh-left />\n          </el-icon>\n          <el-icon @click=\"handleActions('clockwise')\">\n            <refresh-right />\n          </el-icon>\n        </div>\n      </div>\n      <!-- CANVAS -->\n      <div class=\"el-image-viewer__canvas\">\n        <img\n          v-for=\"(url, i) in urlList\"\n          v-show=\"i === index\"\n          ref=\"img\"\n          :key=\"url\"\n          :src=\"url\"\n          :style=\"imgStyle\"\n          class=\"el-image-viewer__img\"\n          @load=\"handleImgLoad\"\n          @error=\"handleImgError\"\n          @mousedown=\"handleMouseDown\"\n        />\n      </div>\n      <slot />\n    </div>\n  </transition>\n</template>\n\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  computed,\n  ref,\n  onMounted,\n  watch,\n  nextTick,\n  effectScope,\n  markRaw,\n} from 'vue'\nimport { useEventListener } from '@vueuse/core'\nimport ElIcon from '@element-plus/components/icon'\nimport { useLocale } from '@element-plus/hooks'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\nimport { rafThrottle, isFirefox } from '@element-plus/utils/util'\nimport {\n  Close,\n  ArrowLeft,\n  ArrowRight,\n  ZoomOut,\n  ZoomIn,\n  RefreshLeft,\n  RefreshRight,\n  FullScreen,\n  ScaleToOriginal,\n} from '@element-plus/icons'\nimport { imageViewerProps, imageViewerEmits } from './image-viewer'\n\nimport type { CSSProperties } from 'vue'\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'\nexport type ImageViewerAction =\n  | 'zoomIn'\n  | 'zoomOut'\n  | 'clockwise'\n  | 'anticlockwise'\n\nexport default defineComponent({\n  name: 'ElImageViewer',\n  components: {\n    ElIcon,\n    Close,\n    ArrowLeft,\n    ArrowRight,\n    ZoomOut,\n    ZoomIn,\n    RefreshLeft,\n    RefreshRight,\n  },\n  props: imageViewerProps,\n  emits: imageViewerEmits,\n\n  setup(props, { emit }) {\n    const { t } = useLocale()\n    const wrapper = ref<HTMLDivElement>()\n    const img = ref<HTMLImageElement>()\n\n    const scopeEventListener = effectScope()\n\n    const loading = ref(true)\n    const index = ref(props.initialIndex)\n    const mode = ref(Mode.CONTAIN)\n    const transform = ref({\n      scale: 1,\n      deg: 0,\n      offsetX: 0,\n      offsetY: 0,\n      enableTransition: false,\n    })\n\n    const isSingle = computed(() => {\n      const { urlList } = props\n      return urlList.length <= 1\n    })\n\n    const isFirst = computed(() => {\n      return index.value === 0\n    })\n\n    const isLast = computed(() => {\n      return index.value === props.urlList.length - 1\n    })\n\n    const currentImg = computed(() => {\n      return props.urlList[index.value]\n    })\n\n    const imgStyle = computed(() => {\n      const { scale, deg, offsetX, offsetY, enableTransition } = transform.value\n      const style: CSSProperties = {\n        transform: `scale(${scale}) rotate(${deg}deg)`,\n        transition: enableTransition ? 'transform .3s' : '',\n        marginLeft: `${offsetX}px`,\n        marginTop: `${offsetY}px`,\n      }\n      if (mode.value.name === Mode.CONTAIN.name) {\n        style.maxWidth = style.maxHeight = '100%'\n      }\n      return style\n    })\n\n    function hide() {\n      unregisterEventListener()\n      emit('close')\n    }\n\n    function registerEventListener() {\n      const keydownHandler = rafThrottle((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 = rafThrottle(\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: 0.015,\n              enableTransition: false,\n            })\n          } else {\n            handleActions('zoomOut', {\n              zoomRate: 0.015,\n              enableTransition: false,\n            })\n          }\n        }\n      )\n\n      scopeEventListener.run(() => {\n        useEventListener(document, 'keydown', keydownHandler)\n        useEventListener(document, mousewheelEventName, mousewheelHandler)\n      })\n    }\n\n    function unregisterEventListener() {\n      scopeEventListener.stop()\n    }\n\n    function handleImgLoad() {\n      loading.value = false\n    }\n\n    function handleImgError(e: Event) {\n      loading.value = false\n      ;(e.target as HTMLImageElement).alt = t('el.image.error')\n    }\n\n    function handleMouseDown(e: MouseEvent) {\n      if (loading.value || e.button !== 0 || !wrapper.value) return\n\n      const { offsetX, offsetY } = transform.value\n      const startX = e.pageX\n      const startY = e.pageY\n\n      const divLeft = wrapper.value.clientLeft\n      const divRight = wrapper.value.clientLeft + wrapper.value.clientWidth\n      const divTop = wrapper.value.clientTop\n      const divBottom = wrapper.value.clientTop + wrapper.value.clientHeight\n\n      const dragHandler = rafThrottle((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(\n        document,\n        'mousemove',\n        dragHandler\n      )\n      useEventListener(document, 'mouseup', (evt) => {\n        const mouseX = evt.pageX\n        const mouseY = evt.pageY\n        if (\n          mouseX < divLeft ||\n          mouseX > divRight ||\n          mouseY < divTop ||\n          mouseY > divBottom\n        ) {\n          reset()\n        }\n        removeMousemove()\n      })\n\n      e.preventDefault()\n    }\n\n    function reset() {\n      transform.value = {\n        scale: 1,\n        deg: 0,\n        offsetX: 0,\n        offsetY: 0,\n        enableTransition: false,\n      }\n    }\n\n    function 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\n    function prev() {\n      if (isFirst.value && !props.infinite) return\n      const len = props.urlList.length\n      index.value = (index.value - 1 + len) % len\n    }\n\n    function next() {\n      if (isLast.value && !props.infinite) return\n      const len = props.urlList.length\n      index.value = (index.value + 1) % len\n    }\n\n    function handleActions(action: ImageViewerAction, options = {}) {\n      if (loading.value) return\n      const { zoomRate, rotateDeg, enableTransition } = {\n        zoomRate: 0.2,\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 = parseFloat(\n              (transform.value.scale - zoomRate).toFixed(3)\n            )\n          }\n          break\n        case 'zoomIn':\n          transform.value.scale = parseFloat(\n            (transform.value.scale + zoomRate).toFixed(3)\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\n    watch(currentImg, () => {\n      nextTick(() => {\n        const $img = img.value\n        if (!$img?.complete) {\n          loading.value = true\n        }\n      })\n    })\n\n    watch(index, (val) => {\n      reset()\n      emit('switch', val)\n    })\n\n    onMounted(() => {\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\n    return {\n      index,\n      wrapper,\n      img,\n      isSingle,\n      isFirst,\n      isLast,\n      currentImg,\n      imgStyle,\n      mode,\n      handleActions,\n      prev,\n      next,\n      hide,\n      toggleMode,\n      handleImgLoad,\n      handleImgError,\n      handleMouseDown,\n    }\n  },\n})\n</script>\n"],"names":["markRaw","FullScreen","ScaleToOriginal","isFirefox","defineComponent","ElIcon","Close","ArrowLeft","ArrowRight","ZoomOut","ZoomIn","RefreshLeft","RefreshRight","imageViewerProps","imageViewerEmits","useLocale","ref","effectScope","computed","rafThrottle","EVENT_CODE","useEventListener"],"mappings":"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"}

package/lib/components/image-viewer/src/image-viewer.vue_vue_type_template_id_4b22ad85_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"image-viewer.vue_vue_type_template_id_4b22ad85_lang.js","sources":["../../../../../../packages/components/image-viewer/src/image-viewer.vue?vue&type=template&id=4b22ad85&lang.js"],"sourcesContent":["<template>\n  <transition name=\"viewer-fade\">\n    <div\n      ref=\"wrapper\"\n      :tabindex=\"-1\"\n      class=\"el-image-viewer__wrapper\"\n      :style=\"{ zIndex }\"\n    >\n      <div\n        class=\"el-image-viewer__mask\"\n        @click.self=\"hideOnClickModal && hide()\"\n      />\n\n      <!-- CLOSE -->\n      <span class=\"el-image-viewer__btn el-image-viewer__close\" @click=\"hide\">\n        <el-icon><close /></el-icon>\n      </span>\n\n      <!-- ARROW -->\n      <template v-if=\"!isSingle\">\n        <span\n          class=\"el-image-viewer__btn el-image-viewer__prev\"\n          :class=\"{ 'is-disabled': !infinite && isFirst }\"\n          @click=\"prev\"\n        >\n          <el-icon><arrow-left /></el-icon>\n        </span>\n        <span\n          class=\"el-image-viewer__btn el-image-viewer__next\"\n          :class=\"{ 'is-disabled': !infinite && isLast }\"\n          @click=\"next\"\n        >\n          <el-icon><arrow-right /></el-icon>\n        </span>\n      </template>\n      <!-- ACTIONS -->\n      <div class=\"el-image-viewer__btn el-image-viewer__actions\">\n        <div class=\"el-image-viewer__actions__inner\">\n          <el-icon @click=\"handleActions('zoomOut')\">\n            <zoom-out />\n          </el-icon>\n          <el-icon @click=\"handleActions('zoomIn')\">\n            <zoom-in />\n          </el-icon>\n          <i class=\"el-image-viewer__actions__divider\"></i>\n          <el-icon @click=\"toggleMode\">\n            <component :is=\"mode.icon\" />\n          </el-icon>\n          <i class=\"el-image-viewer__actions__divider\"></i>\n          <el-icon @click=\"handleActions('anticlockwise')\">\n            <refresh-left />\n          </el-icon>\n          <el-icon @click=\"handleActions('clockwise')\">\n            <refresh-right />\n          </el-icon>\n        </div>\n      </div>\n      <!-- CANVAS -->\n      <div class=\"el-image-viewer__canvas\">\n        <img\n          v-for=\"(url, i) in urlList\"\n          v-show=\"i === index\"\n          ref=\"img\"\n          :key=\"url\"\n          :src=\"url\"\n          :style=\"imgStyle\"\n          class=\"el-image-viewer__img\"\n          @load=\"handleImgLoad\"\n          @error=\"handleImgError\"\n          @mousedown=\"handleMouseDown\"\n        />\n      </div>\n      <slot />\n    </div>\n  </transition>\n</template>\n\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  computed,\n  ref,\n  onMounted,\n  watch,\n  nextTick,\n  effectScope,\n  markRaw,\n} from 'vue'\nimport { useEventListener } from '@vueuse/core'\nimport ElIcon from '@element-plus/components/icon'\nimport { useLocaleInject } from '@element-plus/hooks'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\nimport { rafThrottle, isFirefox } from '@element-plus/utils/util'\nimport {\n  Close,\n  ArrowLeft,\n  ArrowRight,\n  ZoomOut,\n  ZoomIn,\n  RefreshLeft,\n  RefreshRight,\n  FullScreen,\n  ScaleToOriginal,\n} from '@element-plus/icons'\nimport { imageViewerProps, imageViewerEmits } from './image-viewer'\n\nimport type { CSSProperties } from 'vue'\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'\nexport type ImageViewerAction =\n  | 'zoomIn'\n  | 'zoomOut'\n  | 'clockwise'\n  | 'anticlockwise'\n\nexport default defineComponent({\n  name: 'ElImageViewer',\n  components: {\n    ElIcon,\n    Close,\n    ArrowLeft,\n    ArrowRight,\n    ZoomOut,\n    ZoomIn,\n    RefreshLeft,\n    RefreshRight,\n  },\n  props: imageViewerProps,\n  emits: imageViewerEmits,\n\n  setup(props, { emit }) {\n    const { t } = useLocaleInject()\n    const wrapper = ref<HTMLDivElement>()\n    const img = ref<HTMLImageElement>()\n\n    const scopeEventListener = effectScope()\n\n    const loading = ref(true)\n    const index = ref(props.initialIndex)\n    const mode = ref(Mode.CONTAIN)\n    const transform = ref({\n      scale: 1,\n      deg: 0,\n      offsetX: 0,\n      offsetY: 0,\n      enableTransition: false,\n    })\n\n    const isSingle = computed(() => {\n      const { urlList } = props\n      return urlList.length <= 1\n    })\n\n    const isFirst = computed(() => {\n      return index.value === 0\n    })\n\n    const isLast = computed(() => {\n      return index.value === props.urlList.length - 1\n    })\n\n    const currentImg = computed(() => {\n      return props.urlList[index.value]\n    })\n\n    const imgStyle = computed(() => {\n      const { scale, deg, offsetX, offsetY, enableTransition } = transform.value\n      const style: CSSProperties = {\n        transform: `scale(${scale}) rotate(${deg}deg)`,\n        transition: enableTransition ? 'transform .3s' : '',\n        marginLeft: `${offsetX}px`,\n        marginTop: `${offsetY}px`,\n      }\n      if (mode.value.name === Mode.CONTAIN.name) {\n        style.maxWidth = style.maxHeight = '100%'\n      }\n      return style\n    })\n\n    function hide() {\n      unregisterEventListener()\n      emit('close')\n    }\n\n    function registerEventListener() {\n      const keydownHandler = rafThrottle((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 = rafThrottle(\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: 0.015,\n              enableTransition: false,\n            })\n          } else {\n            handleActions('zoomOut', {\n              zoomRate: 0.015,\n              enableTransition: false,\n            })\n          }\n        }\n      )\n\n      scopeEventListener.run(() => {\n        useEventListener(document, 'keydown', keydownHandler)\n        useEventListener(document, mousewheelEventName, mousewheelHandler)\n      })\n    }\n\n    function unregisterEventListener() {\n      scopeEventListener.stop()\n    }\n\n    function handleImgLoad() {\n      loading.value = false\n    }\n\n    function handleImgError(e: Event) {\n      loading.value = false\n      ;(e.target as HTMLImageElement).alt = t('el.image.error')\n    }\n\n    function handleMouseDown(e: MouseEvent) {\n      if (loading.value || e.button !== 0 || !wrapper.value) return\n\n      const { offsetX, offsetY } = transform.value\n      const startX = e.pageX\n      const startY = e.pageY\n\n      const divLeft = wrapper.value.clientLeft\n      const divRight = wrapper.value.clientLeft + wrapper.value.clientWidth\n      const divTop = wrapper.value.clientTop\n      const divBottom = wrapper.value.clientTop + wrapper.value.clientHeight\n\n      const dragHandler = rafThrottle((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(\n        document,\n        'mousemove',\n        dragHandler\n      )\n      useEventListener(document, 'mouseup', (evt) => {\n        const mouseX = evt.pageX\n        const mouseY = evt.pageY\n        if (\n          mouseX < divLeft ||\n          mouseX > divRight ||\n          mouseY < divTop ||\n          mouseY > divBottom\n        ) {\n          reset()\n        }\n        removeMousemove()\n      })\n\n      e.preventDefault()\n    }\n\n    function reset() {\n      transform.value = {\n        scale: 1,\n        deg: 0,\n        offsetX: 0,\n        offsetY: 0,\n        enableTransition: false,\n      }\n    }\n\n    function 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\n    function prev() {\n      if (isFirst.value && !props.infinite) return\n      const len = props.urlList.length\n      index.value = (index.value - 1 + len) % len\n    }\n\n    function next() {\n      if (isLast.value && !props.infinite) return\n      const len = props.urlList.length\n      index.value = (index.value + 1) % len\n    }\n\n    function handleActions(action: ImageViewerAction, options = {}) {\n      if (loading.value) return\n      const { zoomRate, rotateDeg, enableTransition } = {\n        zoomRate: 0.2,\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 = parseFloat(\n              (transform.value.scale - zoomRate).toFixed(3)\n            )\n          }\n          break\n        case 'zoomIn':\n          transform.value.scale = parseFloat(\n            (transform.value.scale + zoomRate).toFixed(3)\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\n    watch(currentImg, () => {\n      nextTick(() => {\n        const $img = img.value\n        if (!$img?.complete) {\n          loading.value = true\n        }\n      })\n    })\n\n    watch(index, (val) => {\n      reset()\n      emit('switch', val)\n    })\n\n    onMounted(() => {\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\n    return {\n      index,\n      wrapper,\n      img,\n      isSingle,\n      isFirst,\n      isLast,\n      currentImg,\n      imgStyle,\n      mode,\n      handleActions,\n      prev,\n      next,\n      hide,\n      toggleMode,\n      handleImgLoad,\n      handleImgError,\n      handleMouseDown,\n    }\n  },\n})\n</script>\n"],"names":["_createBlock","_createElementVNode","_createCommentVNode","_createVNode","_createElementBlock","_renderSlot"],"mappings":";;;;;;qBAoCW,OAAM;qBACJ,OAAM;iEAON,OAAM;iEAIN,OAAM;qBAUR,OAAM;;;;;;;;;;;0BAzDfA,kCAAY,MAAK;yBACf;MAAAC;QACE,KAAI;AAAA,QACH,UAAU;AAAA,QACX,OAAM;AAAA,QACL,oCAAS;;QAEVA;UACE,OAAM;AAAA,UACL,iEAAY,yBAAoB;;QAGnCC;QACAD;UAAM,OAAM;AAAA,UAA+C,gDAAO;;UAChEE;iCAAS;cAAAA,gBAAS;AAAA;AAAA;;;QAGpBD;SACiB,kCAAjBE;UACEH;YACE,2BAAM,gEACoB,iBAAY;YACrC,gDAAO;;YAERE;mCAAS;gBAAAA,gBAAc;AAAA;AAAA;;;UAEzBF;YACE,2BAAM,gEACoB,iBAAY;YACrC,gDAAO;;YAERE;mCAAS;gBAAAA,gBAAe;AAAA;AAAA;;;;QAG5BD;QACAD,8BAAA;UACEA,8BAAA;YACEE;cAAU,+CAAO;;mCACf;gBAAAA;;;;YAEFA;cAAU,+CAAO;;mCACf;gBAAAA;;;;YAEF;AAAA,YACAA,sCAAU,SAAO;mCACf;kCAAAH,4CAAgB,UAAK;AAAA;AAAA;;YAEvB;AAAA,YACAG;cAAU,+CAAO;;mCACf;gBAAAA;;;;YAEFA;cAAU,+CAAO;;mCACf;gBAAAA;;;;;;QAIND;QACAD,8BAAA;gCACEG,0DACqB,eAAX,KAAK;wDADfA;cAGE,KAAI;AAAA,cACH,KAAK;AAAA,cACL,KAAK;AAAA,cACL,0BAAO;cACR,OAAM;AAAA,cACL,+CAAM;cACN,gDAAO;cACP,sDAAW;;0BARJ,MAAM;;;;QAWlBC;;;;;;;;;"}
+{"version":3,"file":"image-viewer.vue_vue_type_template_id_4b22ad85_lang.js","sources":["../../../../../../packages/components/image-viewer/src/image-viewer.vue?vue&type=template&id=4b22ad85&lang.js"],"sourcesContent":["<template>\n  <transition name=\"viewer-fade\">\n    <div\n      ref=\"wrapper\"\n      :tabindex=\"-1\"\n      class=\"el-image-viewer__wrapper\"\n      :style=\"{ zIndex }\"\n    >\n      <div\n        class=\"el-image-viewer__mask\"\n        @click.self=\"hideOnClickModal && hide()\"\n      />\n\n      <!-- CLOSE -->\n      <span class=\"el-image-viewer__btn el-image-viewer__close\" @click=\"hide\">\n        <el-icon><close /></el-icon>\n      </span>\n\n      <!-- ARROW -->\n      <template v-if=\"!isSingle\">\n        <span\n          class=\"el-image-viewer__btn el-image-viewer__prev\"\n          :class=\"{ 'is-disabled': !infinite && isFirst }\"\n          @click=\"prev\"\n        >\n          <el-icon><arrow-left /></el-icon>\n        </span>\n        <span\n          class=\"el-image-viewer__btn el-image-viewer__next\"\n          :class=\"{ 'is-disabled': !infinite && isLast }\"\n          @click=\"next\"\n        >\n          <el-icon><arrow-right /></el-icon>\n        </span>\n      </template>\n      <!-- ACTIONS -->\n      <div class=\"el-image-viewer__btn el-image-viewer__actions\">\n        <div class=\"el-image-viewer__actions__inner\">\n          <el-icon @click=\"handleActions('zoomOut')\">\n            <zoom-out />\n          </el-icon>\n          <el-icon @click=\"handleActions('zoomIn')\">\n            <zoom-in />\n          </el-icon>\n          <i class=\"el-image-viewer__actions__divider\"></i>\n          <el-icon @click=\"toggleMode\">\n            <component :is=\"mode.icon\" />\n          </el-icon>\n          <i class=\"el-image-viewer__actions__divider\"></i>\n          <el-icon @click=\"handleActions('anticlockwise')\">\n            <refresh-left />\n          </el-icon>\n          <el-icon @click=\"handleActions('clockwise')\">\n            <refresh-right />\n          </el-icon>\n        </div>\n      </div>\n      <!-- CANVAS -->\n      <div class=\"el-image-viewer__canvas\">\n        <img\n          v-for=\"(url, i) in urlList\"\n          v-show=\"i === index\"\n          ref=\"img\"\n          :key=\"url\"\n          :src=\"url\"\n          :style=\"imgStyle\"\n          class=\"el-image-viewer__img\"\n          @load=\"handleImgLoad\"\n          @error=\"handleImgError\"\n          @mousedown=\"handleMouseDown\"\n        />\n      </div>\n      <slot />\n    </div>\n  </transition>\n</template>\n\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  computed,\n  ref,\n  onMounted,\n  watch,\n  nextTick,\n  effectScope,\n  markRaw,\n} from 'vue'\nimport { useEventListener } from '@vueuse/core'\nimport ElIcon from '@element-plus/components/icon'\nimport { useLocale } from '@element-plus/hooks'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\nimport { rafThrottle, isFirefox } from '@element-plus/utils/util'\nimport {\n  Close,\n  ArrowLeft,\n  ArrowRight,\n  ZoomOut,\n  ZoomIn,\n  RefreshLeft,\n  RefreshRight,\n  FullScreen,\n  ScaleToOriginal,\n} from '@element-plus/icons'\nimport { imageViewerProps, imageViewerEmits } from './image-viewer'\n\nimport type { CSSProperties } from 'vue'\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'\nexport type ImageViewerAction =\n  | 'zoomIn'\n  | 'zoomOut'\n  | 'clockwise'\n  | 'anticlockwise'\n\nexport default defineComponent({\n  name: 'ElImageViewer',\n  components: {\n    ElIcon,\n    Close,\n    ArrowLeft,\n    ArrowRight,\n    ZoomOut,\n    ZoomIn,\n    RefreshLeft,\n    RefreshRight,\n  },\n  props: imageViewerProps,\n  emits: imageViewerEmits,\n\n  setup(props, { emit }) {\n    const { t } = useLocale()\n    const wrapper = ref<HTMLDivElement>()\n    const img = ref<HTMLImageElement>()\n\n    const scopeEventListener = effectScope()\n\n    const loading = ref(true)\n    const index = ref(props.initialIndex)\n    const mode = ref(Mode.CONTAIN)\n    const transform = ref({\n      scale: 1,\n      deg: 0,\n      offsetX: 0,\n      offsetY: 0,\n      enableTransition: false,\n    })\n\n    const isSingle = computed(() => {\n      const { urlList } = props\n      return urlList.length <= 1\n    })\n\n    const isFirst = computed(() => {\n      return index.value === 0\n    })\n\n    const isLast = computed(() => {\n      return index.value === props.urlList.length - 1\n    })\n\n    const currentImg = computed(() => {\n      return props.urlList[index.value]\n    })\n\n    const imgStyle = computed(() => {\n      const { scale, deg, offsetX, offsetY, enableTransition } = transform.value\n      const style: CSSProperties = {\n        transform: `scale(${scale}) rotate(${deg}deg)`,\n        transition: enableTransition ? 'transform .3s' : '',\n        marginLeft: `${offsetX}px`,\n        marginTop: `${offsetY}px`,\n      }\n      if (mode.value.name === Mode.CONTAIN.name) {\n        style.maxWidth = style.maxHeight = '100%'\n      }\n      return style\n    })\n\n    function hide() {\n      unregisterEventListener()\n      emit('close')\n    }\n\n    function registerEventListener() {\n      const keydownHandler = rafThrottle((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 = rafThrottle(\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: 0.015,\n              enableTransition: false,\n            })\n          } else {\n            handleActions('zoomOut', {\n              zoomRate: 0.015,\n              enableTransition: false,\n            })\n          }\n        }\n      )\n\n      scopeEventListener.run(() => {\n        useEventListener(document, 'keydown', keydownHandler)\n        useEventListener(document, mousewheelEventName, mousewheelHandler)\n      })\n    }\n\n    function unregisterEventListener() {\n      scopeEventListener.stop()\n    }\n\n    function handleImgLoad() {\n      loading.value = false\n    }\n\n    function handleImgError(e: Event) {\n      loading.value = false\n      ;(e.target as HTMLImageElement).alt = t('el.image.error')\n    }\n\n    function handleMouseDown(e: MouseEvent) {\n      if (loading.value || e.button !== 0 || !wrapper.value) return\n\n      const { offsetX, offsetY } = transform.value\n      const startX = e.pageX\n      const startY = e.pageY\n\n      const divLeft = wrapper.value.clientLeft\n      const divRight = wrapper.value.clientLeft + wrapper.value.clientWidth\n      const divTop = wrapper.value.clientTop\n      const divBottom = wrapper.value.clientTop + wrapper.value.clientHeight\n\n      const dragHandler = rafThrottle((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(\n        document,\n        'mousemove',\n        dragHandler\n      )\n      useEventListener(document, 'mouseup', (evt) => {\n        const mouseX = evt.pageX\n        const mouseY = evt.pageY\n        if (\n          mouseX < divLeft ||\n          mouseX > divRight ||\n          mouseY < divTop ||\n          mouseY > divBottom\n        ) {\n          reset()\n        }\n        removeMousemove()\n      })\n\n      e.preventDefault()\n    }\n\n    function reset() {\n      transform.value = {\n        scale: 1,\n        deg: 0,\n        offsetX: 0,\n        offsetY: 0,\n        enableTransition: false,\n      }\n    }\n\n    function 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\n    function prev() {\n      if (isFirst.value && !props.infinite) return\n      const len = props.urlList.length\n      index.value = (index.value - 1 + len) % len\n    }\n\n    function next() {\n      if (isLast.value && !props.infinite) return\n      const len = props.urlList.length\n      index.value = (index.value + 1) % len\n    }\n\n    function handleActions(action: ImageViewerAction, options = {}) {\n      if (loading.value) return\n      const { zoomRate, rotateDeg, enableTransition } = {\n        zoomRate: 0.2,\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 = parseFloat(\n              (transform.value.scale - zoomRate).toFixed(3)\n            )\n          }\n          break\n        case 'zoomIn':\n          transform.value.scale = parseFloat(\n            (transform.value.scale + zoomRate).toFixed(3)\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\n    watch(currentImg, () => {\n      nextTick(() => {\n        const $img = img.value\n        if (!$img?.complete) {\n          loading.value = true\n        }\n      })\n    })\n\n    watch(index, (val) => {\n      reset()\n      emit('switch', val)\n    })\n\n    onMounted(() => {\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\n    return {\n      index,\n      wrapper,\n      img,\n      isSingle,\n      isFirst,\n      isLast,\n      currentImg,\n      imgStyle,\n      mode,\n      handleActions,\n      prev,\n      next,\n      hide,\n      toggleMode,\n      handleImgLoad,\n      handleImgError,\n      handleMouseDown,\n    }\n  },\n})\n</script>\n"],"names":["_createBlock","_createElementVNode","_createCommentVNode","_createVNode","_createElementBlock","_renderSlot"],"mappings":";;;;;;qBAoCW,OAAM;qBACJ,OAAM;iEAON,OAAM;iEAIN,OAAM;qBAUR,OAAM;;;;;;;;;;;0BAzDfA,kCAAY,MAAK;yBACf;MAAAC;QACE,KAAI;AAAA,QACH,UAAU;AAAA,QACX,OAAM;AAAA,QACL,oCAAS;;QAEVA;UACE,OAAM;AAAA,UACL,iEAAY,yBAAoB;;QAGnCC;QACAD;UAAM,OAAM;AAAA,UAA+C,gDAAO;;UAChEE;iCAAS;cAAAA,gBAAS;AAAA;AAAA;;;QAGpBD;SACiB,kCAAjBE;UACEH;YACE,2BAAM,gEACoB,iBAAY;YACrC,gDAAO;;YAERE;mCAAS;gBAAAA,gBAAc;AAAA;AAAA;;;UAEzBF;YACE,2BAAM,gEACoB,iBAAY;YACrC,gDAAO;;YAERE;mCAAS;gBAAAA,gBAAe;AAAA;AAAA;;;;QAG5BD;QACAD,8BAAA;UACEA,8BAAA;YACEE;cAAU,+CAAO;;mCACf;gBAAAA;;;;YAEFA;cAAU,+CAAO;;mCACf;gBAAAA;;;;YAEF;AAAA,YACAA,sCAAU,SAAO;mCACf;kCAAAH,4CAAgB,UAAK;AAAA;AAAA;;YAEvB;AAAA,YACAG;cAAU,+CAAO;;mCACf;gBAAAA;;;;YAEFA;cAAU,+CAAO;;mCACf;gBAAAA;;;;;;QAIND;QACAD,8BAAA;gCACEG,0DACqB,eAAX,KAAK;wDADfA;cAGE,KAAI;AAAA,cACH,KAAK;AAAA,cACL,KAAK;AAAA,cACL,0BAAO;cACR,OAAM;AAAA,cACL,+CAAM;cACN,gDAAO;cACP,sDAAW;;0BARJ,MAAM;;;;QAWlBC;;;;;;;;;"}

package/lib/components/index.js

@@ -86,6 +86,7 @@ var card = require('./card/src/card.js');
 var types = require('./cascader-panel/src/types.js');
 var config = require('./cascader-panel/src/config.js');
 var col = require('./col/src/col.js');
+var configProvider = require('./config-provider/src/config-provider.js');
 var useDialog = require('./dialog/src/use-dialog.js');
 var dialog = require('./dialog/src/dialog.js');
 var divider = require('./divider/src/divider.js');
@@ -268,6 +269,7 @@ exports.CommonProps = config.CommonProps;
 exports.DefaultProps = config.DefaultProps;
 exports.useCascaderConfig = config.useCascaderConfig;
 exports.colProps = col.colProps;
+exports.configProviderProps = configProvider.configProviderProps;
 exports.useDialog = useDialog.useDialog;
 exports.dialogEmits = dialog.dialogEmits;
 exports.dialogProps = dialog.dialogProps;

package/lib/components/index.js.map

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

package/lib/components/input/src/input.vue_vue_type_script_lang.js

@@ -31,7 +31,7 @@ var script = vue.defineComponent({
   emits: input.inputEmits,
   setup(props, { slots, emit, attrs: rawAttrs }) {
     const instance = vue.getCurrentInstance();
-    const attrs = index$1["default"]();
+    const attrs = index$1.useAttrs();
     const elForm = vue.inject(form.elFormKey, void 0);
     const elFormItem = vue.inject(form.elFormItemKey, void 0);
     const { size: inputSize, disabled: inputDisabled } = index$2.useFormItem({});

package/lib/components/menu/src/menu-collapse-transition.vue_vue_type_script_lang.js

@@ -38,10 +38,9 @@ var script = vue.defineComponent({
         el.style.width = `${el.scrollWidth}px`;
         el.style.overflow = "hidden";
       },
-      onLeave(el, done) {
+      onLeave(el) {
         dom.addClass(el, "horizontal-collapse-transition");
         el.style.width = `${el.dataset.scrollWidth}px`;
-        done();
       }
     };
     return {

package/lib/components/menu/src/menu-collapse-transition.vue_vue_type_script_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-collapse-transition.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/menu/src/menu-collapse-transition.vue"],"sourcesContent":["<template>\n  <transition mode=\"out-in\" v-bind=\"listeners\">\n    <slot />\n  </transition>\n</template>\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { addClass, removeClass, hasClass } from '@element-plus/utils/dom'\n\nimport type { TransitionProps, BaseTransitionProps } from 'vue'\n\nexport default defineComponent({\n  name: 'ElMenuCollapseTransition',\n  setup() {\n    const listeners = {\n      onBeforeEnter: (el) => (el.style.opacity = '0.2'),\n      onEnter(el, done) {\n        addClass(el, 'el-opacity-transition')\n        el.style.opacity = '1'\n        done()\n      },\n\n      onAfterEnter(el) {\n        removeClass(el, 'el-opacity-transition')\n        el.style.opacity = ''\n      },\n\n      onBeforeLeave(el) {\n        if (!el.dataset) {\n          ;(el as any).dataset = {}\n        }\n\n        if (hasClass(el, 'el-menu--collapse')) {\n          removeClass(el, 'el-menu--collapse')\n          el.dataset.oldOverflow = el.style.overflow\n          el.dataset.scrollWidth = el.clientWidth.toString()\n          addClass(el, 'el-menu--collapse')\n        } else {\n          addClass(el, 'el-menu--collapse')\n          el.dataset.oldOverflow = el.style.overflow\n          el.dataset.scrollWidth = el.clientWidth.toString()\n          removeClass(el, 'el-menu--collapse')\n        }\n\n        el.style.width = `${el.scrollWidth}px`\n        el.style.overflow = 'hidden'\n      },\n\n      onLeave(el: HTMLElement, done) {\n        addClass(el, 'horizontal-collapse-transition')\n        el.style.width = `${el.dataset.scrollWidth}px`\n        done()\n      },\n    } as BaseTransitionProps<HTMLElement> as TransitionProps\n\n    return {\n      listeners,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","hasClass"],"mappings":";;;;;;;AAWA,aAAeA,oBAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,QAAQ;AACN,UAAM,YAAY;AAAA,MAChB,eAAe,CAAC,OAAQ,GAAG,MAAM,UAAU;AAAA,MAC3C,QAAQ,IAAI,MAAM;AAChB,qBAAS,IAAI;AACb,WAAG,MAAM,UAAU;AACnB;AAAA;AAAA,MAGF,aAAa,IAAI;AACf,wBAAY,IAAI;AAChB,WAAG,MAAM,UAAU;AAAA;AAAA,MAGrB,cAAc,IAAI;AAChB,YAAI,CAAC,GAAG,SAAS;AACf;AAAC,UAAC,GAAW,UAAU;AAAA;AAGzB,YAAIC,aAAS,IAAI,sBAAsB;AACrC,0BAAY,IAAI;AAChB,aAAG,QAAQ,cAAc,GAAG,MAAM;AAClC,aAAG,QAAQ,cAAc,GAAG,YAAY;AACxC,uBAAS,IAAI;AAAA,eACR;AACL,uBAAS,IAAI;AACb,aAAG,QAAQ,cAAc,GAAG,MAAM;AAClC,aAAG,QAAQ,cAAc,GAAG,YAAY;AACxC,0BAAY,IAAI;AAAA;AAGlB,WAAG,MAAM,QAAQ,GAAG,GAAG;AACvB,WAAG,MAAM,WAAW;AAAA;AAAA,MAGtB,QAAQ,IAAiB,MAAM;AAC7B,qBAAS,IAAI;AACb,WAAG,MAAM,QAAQ,GAAG,GAAG,QAAQ;AAC/B;AAAA;AAAA;AAIJ,WAAO;AAAA,MACL;AAAA;AAAA;AAAA;;;;"}
+{"version":3,"file":"menu-collapse-transition.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/menu/src/menu-collapse-transition.vue"],"sourcesContent":["<template>\n  <transition mode=\"out-in\" v-bind=\"listeners\">\n    <slot />\n  </transition>\n</template>\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { addClass, removeClass, hasClass } from '@element-plus/utils/dom'\n\nimport type { TransitionProps, BaseTransitionProps } from 'vue'\n\nexport default defineComponent({\n  name: 'ElMenuCollapseTransition',\n  setup() {\n    const listeners = {\n      onBeforeEnter: (el) => (el.style.opacity = '0.2'),\n      onEnter(el, done) {\n        addClass(el, 'el-opacity-transition')\n        el.style.opacity = '1'\n        done()\n      },\n\n      onAfterEnter(el) {\n        removeClass(el, 'el-opacity-transition')\n        el.style.opacity = ''\n      },\n\n      onBeforeLeave(el) {\n        if (!el.dataset) {\n          ;(el as any).dataset = {}\n        }\n\n        if (hasClass(el, 'el-menu--collapse')) {\n          removeClass(el, 'el-menu--collapse')\n          el.dataset.oldOverflow = el.style.overflow\n          el.dataset.scrollWidth = el.clientWidth.toString()\n          addClass(el, 'el-menu--collapse')\n        } else {\n          addClass(el, 'el-menu--collapse')\n          el.dataset.oldOverflow = el.style.overflow\n          el.dataset.scrollWidth = el.clientWidth.toString()\n          removeClass(el, 'el-menu--collapse')\n        }\n\n        el.style.width = `${el.scrollWidth}px`\n        el.style.overflow = 'hidden'\n      },\n\n      onLeave(el: HTMLElement) {\n        addClass(el, 'horizontal-collapse-transition')\n        el.style.width = `${el.dataset.scrollWidth}px`\n      },\n    } as BaseTransitionProps<HTMLElement> as TransitionProps\n\n    return {\n      listeners,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","hasClass"],"mappings":";;;;;;;AAWA,aAAeA,oBAAgB;AAAA,EAC7B,MAAM;AAAA,EACN,QAAQ;AACN,UAAM,YAAY;AAAA,MAChB,eAAe,CAAC,OAAQ,GAAG,MAAM,UAAU;AAAA,MAC3C,QAAQ,IAAI,MAAM;AAChB,qBAAS,IAAI;AACb,WAAG,MAAM,UAAU;AACnB;AAAA;AAAA,MAGF,aAAa,IAAI;AACf,wBAAY,IAAI;AAChB,WAAG,MAAM,UAAU;AAAA;AAAA,MAGrB,cAAc,IAAI;AAChB,YAAI,CAAC,GAAG,SAAS;AACf;AAAC,UAAC,GAAW,UAAU;AAAA;AAGzB,YAAIC,aAAS,IAAI,sBAAsB;AACrC,0BAAY,IAAI;AAChB,aAAG,QAAQ,cAAc,GAAG,MAAM;AAClC,aAAG,QAAQ,cAAc,GAAG,YAAY;AACxC,uBAAS,IAAI;AAAA,eACR;AACL,uBAAS,IAAI;AACb,aAAG,QAAQ,cAAc,GAAG,MAAM;AAClC,aAAG,QAAQ,cAAc,GAAG,YAAY;AACxC,0BAAY,IAAI;AAAA;AAGlB,WAAG,MAAM,QAAQ,GAAG,GAAG;AACvB,WAAG,MAAM,WAAW;AAAA;AAAA,MAGtB,QAAQ,IAAiB;AACvB,qBAAS,IAAI;AACb,WAAG,MAAM,QAAQ,GAAG,GAAG,QAAQ;AAAA;AAAA;AAInC,WAAO;AAAA,MACL;AAAA;AAAA;AAAA;;;;"}

package/lib/components/menu/src/menu-collapse-transition.vue_vue_type_template_id_db8e3ce6_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-collapse-transition.vue_vue_type_template_id_db8e3ce6_lang.js","sources":["../../../../../../packages/components/menu/src/menu-collapse-transition.vue?vue&type=template&id=db8e3ce6&lang.js"],"sourcesContent":["<template>\n  <transition mode=\"out-in\" v-bind=\"listeners\">\n    <slot />\n  </transition>\n</template>\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { addClass, removeClass, hasClass } from '@element-plus/utils/dom'\n\nimport type { TransitionProps, BaseTransitionProps } from 'vue'\n\nexport default defineComponent({\n  name: 'ElMenuCollapseTransition',\n  setup() {\n    const listeners = {\n      onBeforeEnter: (el) => (el.style.opacity = '0.2'),\n      onEnter(el, done) {\n        addClass(el, 'el-opacity-transition')\n        el.style.opacity = '1'\n        done()\n      },\n\n      onAfterEnter(el) {\n        removeClass(el, 'el-opacity-transition')\n        el.style.opacity = ''\n      },\n\n      onBeforeLeave(el) {\n        if (!el.dataset) {\n          ;(el as any).dataset = {}\n        }\n\n        if (hasClass(el, 'el-menu--collapse')) {\n          removeClass(el, 'el-menu--collapse')\n          el.dataset.oldOverflow = el.style.overflow\n          el.dataset.scrollWidth = el.clientWidth.toString()\n          addClass(el, 'el-menu--collapse')\n        } else {\n          addClass(el, 'el-menu--collapse')\n          el.dataset.oldOverflow = el.style.overflow\n          el.dataset.scrollWidth = el.clientWidth.toString()\n          removeClass(el, 'el-menu--collapse')\n        }\n\n        el.style.width = `${el.scrollWidth}px`\n        el.style.overflow = 'hidden'\n      },\n\n      onLeave(el: HTMLElement, done) {\n        addClass(el, 'horizontal-collapse-transition')\n        el.style.width = `${el.dataset.scrollWidth}px`\n        done()\n      },\n    } as BaseTransitionProps<HTMLElement> as TransitionProps\n\n    return {\n      listeners,\n    }\n  },\n})\n</script>\n"],"names":["_createBlock","_mergeProps","_renderSlot"],"mappings":";;;;;;;0BACEA,gCAAAC,iBAAY,MAAK,YAAiB;yBAChC;MAAAC;;;;;;;;"}
+{"version":3,"file":"menu-collapse-transition.vue_vue_type_template_id_db8e3ce6_lang.js","sources":["../../../../../../packages/components/menu/src/menu-collapse-transition.vue?vue&type=template&id=db8e3ce6&lang.js"],"sourcesContent":["<template>\n  <transition mode=\"out-in\" v-bind=\"listeners\">\n    <slot />\n  </transition>\n</template>\n<script lang=\"ts\">\nimport { defineComponent } from 'vue'\nimport { addClass, removeClass, hasClass } from '@element-plus/utils/dom'\n\nimport type { TransitionProps, BaseTransitionProps } from 'vue'\n\nexport default defineComponent({\n  name: 'ElMenuCollapseTransition',\n  setup() {\n    const listeners = {\n      onBeforeEnter: (el) => (el.style.opacity = '0.2'),\n      onEnter(el, done) {\n        addClass(el, 'el-opacity-transition')\n        el.style.opacity = '1'\n        done()\n      },\n\n      onAfterEnter(el) {\n        removeClass(el, 'el-opacity-transition')\n        el.style.opacity = ''\n      },\n\n      onBeforeLeave(el) {\n        if (!el.dataset) {\n          ;(el as any).dataset = {}\n        }\n\n        if (hasClass(el, 'el-menu--collapse')) {\n          removeClass(el, 'el-menu--collapse')\n          el.dataset.oldOverflow = el.style.overflow\n          el.dataset.scrollWidth = el.clientWidth.toString()\n          addClass(el, 'el-menu--collapse')\n        } else {\n          addClass(el, 'el-menu--collapse')\n          el.dataset.oldOverflow = el.style.overflow\n          el.dataset.scrollWidth = el.clientWidth.toString()\n          removeClass(el, 'el-menu--collapse')\n        }\n\n        el.style.width = `${el.scrollWidth}px`\n        el.style.overflow = 'hidden'\n      },\n\n      onLeave(el: HTMLElement) {\n        addClass(el, 'horizontal-collapse-transition')\n        el.style.width = `${el.dataset.scrollWidth}px`\n      },\n    } as BaseTransitionProps<HTMLElement> as TransitionProps\n\n    return {\n      listeners,\n    }\n  },\n})\n</script>\n"],"names":["_createBlock","_mergeProps","_renderSlot"],"mappings":";;;;;;;0BACEA,gCAAAC,iBAAY,MAAK,YAAiB;yBAChC;MAAAC;;;;;;;;"}

package/lib/components/message-box/src/index.vue_vue_type_script_lang.js

@@ -79,7 +79,7 @@ var script = vue.defineComponent({
   },
   emits: ["vanish", "action"],
   setup(props, { emit }) {
-    const { t } = index$5.useLocaleInject();
+    const { t } = index$5.useLocale();
     const visible = vue.ref(false);
     const state = vue.reactive({
       beforeClose: null,
@@ -123,7 +123,7 @@ var script = vue.defineComponent({
     const hasMessage = vue.computed(() => !!state.message);
     const inputRef = vue.ref(null);
     const confirmRef = vue.ref(null);
-    const confirmButtonClasses = vue.computed(() => `el-button--primary ${state.confirmButtonClass}`);
+    const confirmButtonClasses = vue.computed(() => state.confirmButtonClass);
     vue.watch(() => state.inputValue, async (val) => {
       await vue.nextTick();
       if (props.boxType === "prompt" && val !== null) {
@@ -230,16 +230,16 @@ var script = vue.defineComponent({
       handleAction("close");
     };
     if (props.closeOnPressEscape) {
-      index$6["default"]({
+      index$6.useModal({
         handleClose
       }, visible);
     } else {
-      index$7["default"](visible, "keydown", (e) => e.code === aria.EVENT_CODE.esc);
+      index$7.usePreventGlobal(visible, "keydown", (e) => e.code === aria.EVENT_CODE.esc);
     }
     if (props.lockScroll) {
-      index$8["default"](visible);
+      index$8.useLockscreen(visible);
     }
-    index$9["default"](visible);
+    index$9.useRestoreActive(visible);
     return {
       ...vue.toRefs(state),
       visible,

package/lib/components/message-box/src/index.vue_vue_type_script_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/message-box/src/index.vue"],"sourcesContent":["<template>\n  <transition name=\"fade-in-linear\" @after-leave=\"$emit('vanish')\">\n    <el-overlay\n      v-show=\"visible\"\n      :z-index=\"zIndex\"\n      :overlay-class=\"['is-message-box', modalClass]\"\n      :mask=\"modal\"\n      @click.self=\"handleWrapperClick\"\n    >\n      <div\n        ref=\"root\"\n        v-trap-focus\n        :aria-label=\"title || 'dialog'\"\n        aria-modal=\"true\"\n        :class=\"[\n          'el-message-box',\n          customClass,\n          { 'el-message-box--center': center },\n        ]\"\n        :style=\"customStyle\"\n      >\n        <div\n          v-if=\"title !== null && title !== undefined\"\n          class=\"el-message-box__header\"\n        >\n          <div class=\"el-message-box__title\">\n            <el-icon\n              v-if=\"iconComponent && center\"\n              class=\"el-message-box__status\"\n              :class=\"typeClass\"\n            >\n              <component :is=\"iconComponent\" />\n            </el-icon>\n            <span>{{ title }}</span>\n          </div>\n          <button\n            v-if=\"showClose\"\n            type=\"button\"\n            class=\"el-message-box__headerbtn\"\n            aria-label=\"Close\"\n            @click=\"\n              handleAction(distinguishCancelAndClose ? 'close' : 'cancel')\n            \"\n            @keydown.prevent.enter=\"\n              handleAction(distinguishCancelAndClose ? 'close' : 'cancel')\n            \"\n          >\n            <el-icon class=\"el-message-box__close\"><close /></el-icon>\n          </button>\n        </div>\n        <div class=\"el-message-box__content\">\n          <div class=\"el-message-box__container\">\n            <el-icon\n              v-if=\"iconComponent && !center && hasMessage\"\n              class=\"el-message-box__status\"\n              :class=\"typeClass\"\n            >\n              <component :is=\"iconComponent\" />\n            </el-icon>\n            <div v-if=\"hasMessage\" class=\"el-message-box__message\">\n              <slot>\n                <p v-if=\"!dangerouslyUseHTMLString\">{{ message }}</p>\n                <p v-else v-html=\"message\"></p>\n              </slot>\n            </div>\n          </div>\n          <div v-show=\"showInput\" class=\"el-message-box__input\">\n            <el-input\n              ref=\"inputRef\"\n              v-model=\"inputValue\"\n              :type=\"inputType\"\n              :placeholder=\"inputPlaceholder\"\n              :class=\"{ invalid: validateError }\"\n              @keydown.prevent.enter=\"handleInputEnter\"\n            />\n            <div\n              class=\"el-message-box__errormsg\"\n              :style=\"{\n                visibility: !!editorErrorMessage ? 'visible' : 'hidden',\n              }\"\n            >\n              {{ editorErrorMessage }}\n            </div>\n          </div>\n        </div>\n        <div class=\"el-message-box__btns\">\n          <el-button\n            v-if=\"showCancelButton\"\n            :loading=\"cancelButtonLoading\"\n            :class=\"[cancelButtonClass]\"\n            :round=\"roundButton\"\n            :size=\"buttonSize || 'small'\"\n            @click=\"handleAction('cancel')\"\n            @keydown.prevent.enter=\"handleAction('cancel')\"\n          >\n            {{ cancelButtonText || t('el.messagebox.cancel') }}\n          </el-button>\n          <el-button\n            v-show=\"showConfirmButton\"\n            ref=\"confirmRef\"\n            :loading=\"confirmButtonLoading\"\n            :class=\"[confirmButtonClasses]\"\n            :round=\"roundButton\"\n            :disabled=\"confirmButtonDisabled\"\n            :size=\"buttonSize || 'small'\"\n            @click=\"handleAction('confirm')\"\n            @keydown.prevent.enter=\"handleAction('confirm')\"\n          >\n            {{ confirmButtonText || t('el.messagebox.confirm') }}\n          </el-button>\n        </div>\n      </div>\n    </el-overlay>\n  </transition>\n</template>\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  nextTick,\n  onMounted,\n  onBeforeUnmount,\n  computed,\n  watch,\n  reactive,\n  ref,\n  toRefs,\n} from 'vue'\nimport ElButton from '@element-plus/components/button'\nimport { TrapFocus } from '@element-plus/directives'\nimport {\n  useModal,\n  useLockScreen,\n  useLocaleInject,\n  useRestoreActive,\n  usePreventGlobal,\n} from '@element-plus/hooks'\nimport ElInput from '@element-plus/components/input'\nimport { ElOverlay } from '@element-plus/components/overlay'\nimport PopupManager from '@element-plus/utils/popup-manager'\nimport { on, off } from '@element-plus/utils/dom'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\nimport { isValidComponentSize } from '@element-plus/utils/validators'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { TypeComponents, TypeComponentsMap } from '@element-plus/utils/icon'\n\nimport type { ComponentPublicInstance, PropType } from 'vue'\nimport type { ComponentSize } from '@element-plus/utils/types'\nimport type {\n  Action,\n  MessageBoxState,\n  MessageBoxType,\n} from './message-box.type'\n\nexport default defineComponent({\n  name: 'ElMessageBox',\n  directives: {\n    TrapFocus,\n  },\n  components: {\n    ElButton,\n    ElInput,\n    ElOverlay,\n    ElIcon,\n    ...TypeComponents,\n  },\n  inheritAttrs: false,\n  props: {\n    buttonSize: {\n      type: String as PropType<ComponentSize>,\n      validator: isValidComponentSize,\n    },\n    modal: {\n      type: Boolean,\n      default: true,\n    },\n    lockScroll: {\n      type: Boolean,\n      default: true,\n    },\n    showClose: {\n      type: Boolean,\n      default: true,\n    },\n    closeOnClickModal: {\n      type: Boolean,\n      default: true,\n    },\n    closeOnPressEscape: {\n      type: Boolean,\n      default: true,\n    },\n    closeOnHashChange: {\n      type: Boolean,\n      default: true,\n    },\n    center: Boolean,\n    roundButton: {\n      default: false,\n      type: Boolean,\n    },\n    container: {\n      type: String, // default append to body\n      default: 'body',\n    },\n    boxType: {\n      type: String as PropType<MessageBoxType>,\n      default: '',\n    },\n  },\n  emits: ['vanish', 'action'],\n  setup(props, { emit }) {\n    // const popup = usePopup(props, doClose)\n    const { t } = useLocaleInject()\n    const visible = ref(false)\n    // s represents state\n    const state = reactive<MessageBoxState>({\n      beforeClose: null,\n      callback: null,\n      cancelButtonText: '',\n      cancelButtonClass: '',\n      confirmButtonText: '',\n      confirmButtonClass: '',\n      customClass: '',\n      customStyle: {},\n      dangerouslyUseHTMLString: false,\n      distinguishCancelAndClose: false,\n      icon: '',\n      inputPattern: null,\n      inputPlaceholder: '',\n      inputType: 'text',\n      inputValue: null,\n      inputValidator: null,\n      inputErrorMessage: '',\n      message: null,\n      modalFade: true,\n      modalClass: '',\n      showCancelButton: false,\n      showConfirmButton: true,\n      type: '',\n      title: undefined,\n      showInput: false,\n      action: '' as Action,\n      confirmButtonLoading: false,\n      cancelButtonLoading: false,\n      confirmButtonDisabled: false,\n      editorErrorMessage: '',\n      // refer to: https://github.com/ElemeFE/element/commit/2999279ae34ef10c373ca795c87b020ed6753eed\n      // seemed ok for now without this state.\n      // isOnComposition: false, // temporary remove\n      validateError: false,\n      zIndex: PopupManager.nextZIndex(),\n    })\n\n    const typeClass = computed(() => {\n      const type = state.type\n      return type && TypeComponentsMap[type]\n        ? `el-message-box-icon--${type}`\n        : ''\n    })\n\n    const iconComponent = computed(\n      () => state.icon || TypeComponentsMap[state.type] || ''\n    )\n    const hasMessage = computed(() => !!state.message)\n    const inputRef = ref<ComponentPublicInstance>(null)\n    const confirmRef = ref<ComponentPublicInstance>(null)\n\n    const confirmButtonClasses = computed(\n      () => `el-button--primary ${state.confirmButtonClass}`\n    )\n\n    watch(\n      () => state.inputValue,\n      async (val) => {\n        await nextTick()\n        if (props.boxType === 'prompt' && val !== null) {\n          validate()\n        }\n      },\n      { immediate: true }\n    )\n\n    watch(\n      () => visible.value,\n      (val) => {\n        if (val) {\n          if (props.boxType === 'alert' || props.boxType === 'confirm') {\n            nextTick().then(() => {\n              confirmRef.value?.$el?.focus?.()\n            })\n          }\n          state.zIndex = PopupManager.nextZIndex()\n        }\n        if (props.boxType !== 'prompt') return\n        if (val) {\n          nextTick().then(() => {\n            if (inputRef.value && inputRef.value.$el) {\n              getInputElement().focus()\n            }\n          })\n        } else {\n          state.editorErrorMessage = ''\n          state.validateError = false\n        }\n      }\n    )\n\n    onMounted(async () => {\n      await nextTick()\n      if (props.closeOnHashChange) {\n        on(window, 'hashchange', doClose)\n      }\n    })\n\n    onBeforeUnmount(() => {\n      if (props.closeOnHashChange) {\n        off(window, 'hashchange', doClose)\n      }\n    })\n\n    function doClose() {\n      if (!visible.value) return\n      visible.value = false\n      nextTick(() => {\n        if (state.action) emit('action', state.action)\n      })\n    }\n\n    const handleWrapperClick = () => {\n      if (props.closeOnClickModal) {\n        handleAction(state.distinguishCancelAndClose ? 'close' : 'cancel')\n      }\n    }\n\n    const handleInputEnter = () => {\n      if (state.inputType !== 'textarea') {\n        return handleAction('confirm')\n      }\n    }\n\n    const handleAction = (action: Action) => {\n      if (props.boxType === 'prompt' && action === 'confirm' && !validate()) {\n        return\n      }\n\n      state.action = action\n\n      if (state.beforeClose) {\n        state.beforeClose?.(action, state, doClose)\n      } else {\n        doClose()\n      }\n    }\n\n    const validate = () => {\n      if (props.boxType === 'prompt') {\n        const inputPattern = state.inputPattern\n        if (inputPattern && !inputPattern.test(state.inputValue || '')) {\n          state.editorErrorMessage =\n            state.inputErrorMessage || t('el.messagebox.error')\n          state.validateError = true\n          return false\n        }\n        const inputValidator = state.inputValidator\n        if (typeof inputValidator === 'function') {\n          const validateResult = inputValidator(state.inputValue)\n          if (validateResult === false) {\n            state.editorErrorMessage =\n              state.inputErrorMessage || t('el.messagebox.error')\n            state.validateError = true\n            return false\n          }\n          if (typeof validateResult === 'string') {\n            state.editorErrorMessage = validateResult\n            state.validateError = true\n            return false\n          }\n        }\n      }\n      state.editorErrorMessage = ''\n      state.validateError = false\n      return true\n    }\n\n    const getInputElement = () => {\n      const inputRefs = inputRef.value.$refs\n      return (inputRefs.input || inputRefs.textarea) as HTMLElement\n    }\n\n    const handleClose = () => {\n      handleAction('close')\n    }\n\n    // when close on press escape is disabled, pressing esc should not callout\n    // any other message box and close any other dialog-ish elements\n    // e.g. Dialog has a close on press esc feature, and when it closes, it calls\n    // props.beforeClose method to make a intermediate state by callout a message box\n    // for some verification or alerting. then if we allow global event liek this\n    // to dispatch, it could callout another message box.\n    if (props.closeOnPressEscape) {\n      useModal(\n        {\n          handleClose,\n        },\n        visible\n      )\n    } else {\n      usePreventGlobal(\n        visible,\n        'keydown',\n        (e: KeyboardEvent) => e.code === EVENT_CODE.esc\n      )\n    }\n\n    // locks the screen to prevent scroll\n    if (props.lockScroll) {\n      useLockScreen(visible)\n    }\n\n    // restore to prev active element.\n    useRestoreActive(visible)\n\n    return {\n      ...toRefs(state),\n      visible,\n      hasMessage,\n      typeClass,\n      iconComponent,\n      confirmButtonClasses,\n      inputRef,\n      confirmRef,\n      doClose, // for outside usage\n      handleClose, // for out side usage\n      handleWrapperClick,\n      handleInputEnter,\n      handleAction,\n      t,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","TrapFocus","ElButton","ElInput","ElOverlay","ElIcon","TypeComponents","isValidComponentSize","useLocaleInject","ref","reactive","PopupManager","computed","TypeComponentsMap","nextTick","EVENT_CODE","toRefs"],"mappings":"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"}
+{"version":3,"file":"index.vue_vue_type_script_lang.js","sources":["../../../../../../packages/components/message-box/src/index.vue"],"sourcesContent":["<template>\n  <transition name=\"fade-in-linear\" @after-leave=\"$emit('vanish')\">\n    <el-overlay\n      v-show=\"visible\"\n      :z-index=\"zIndex\"\n      :overlay-class=\"['is-message-box', modalClass]\"\n      :mask=\"modal\"\n      @click.self=\"handleWrapperClick\"\n    >\n      <div\n        ref=\"root\"\n        v-trap-focus\n        :aria-label=\"title || 'dialog'\"\n        aria-modal=\"true\"\n        :class=\"[\n          'el-message-box',\n          customClass,\n          { 'el-message-box--center': center },\n        ]\"\n        :style=\"customStyle\"\n      >\n        <div\n          v-if=\"title !== null && title !== undefined\"\n          class=\"el-message-box__header\"\n        >\n          <div class=\"el-message-box__title\">\n            <el-icon\n              v-if=\"iconComponent && center\"\n              class=\"el-message-box__status\"\n              :class=\"typeClass\"\n            >\n              <component :is=\"iconComponent\" />\n            </el-icon>\n            <span>{{ title }}</span>\n          </div>\n          <button\n            v-if=\"showClose\"\n            type=\"button\"\n            class=\"el-message-box__headerbtn\"\n            aria-label=\"Close\"\n            @click=\"\n              handleAction(distinguishCancelAndClose ? 'close' : 'cancel')\n            \"\n            @keydown.prevent.enter=\"\n              handleAction(distinguishCancelAndClose ? 'close' : 'cancel')\n            \"\n          >\n            <el-icon class=\"el-message-box__close\"><close /></el-icon>\n          </button>\n        </div>\n        <div class=\"el-message-box__content\">\n          <div class=\"el-message-box__container\">\n            <el-icon\n              v-if=\"iconComponent && !center && hasMessage\"\n              class=\"el-message-box__status\"\n              :class=\"typeClass\"\n            >\n              <component :is=\"iconComponent\" />\n            </el-icon>\n            <div v-if=\"hasMessage\" class=\"el-message-box__message\">\n              <slot>\n                <p v-if=\"!dangerouslyUseHTMLString\">{{ message }}</p>\n                <p v-else v-html=\"message\"></p>\n              </slot>\n            </div>\n          </div>\n          <div v-show=\"showInput\" class=\"el-message-box__input\">\n            <el-input\n              ref=\"inputRef\"\n              v-model=\"inputValue\"\n              :type=\"inputType\"\n              :placeholder=\"inputPlaceholder\"\n              :class=\"{ invalid: validateError }\"\n              @keydown.prevent.enter=\"handleInputEnter\"\n            />\n            <div\n              class=\"el-message-box__errormsg\"\n              :style=\"{\n                visibility: !!editorErrorMessage ? 'visible' : 'hidden',\n              }\"\n            >\n              {{ editorErrorMessage }}\n            </div>\n          </div>\n        </div>\n        <div class=\"el-message-box__btns\">\n          <el-button\n            v-if=\"showCancelButton\"\n            :loading=\"cancelButtonLoading\"\n            :class=\"[cancelButtonClass]\"\n            :round=\"roundButton\"\n            :size=\"buttonSize || 'small'\"\n            @click=\"handleAction('cancel')\"\n            @keydown.prevent.enter=\"handleAction('cancel')\"\n          >\n            {{ cancelButtonText || t('el.messagebox.cancel') }}\n          </el-button>\n          <el-button\n            v-show=\"showConfirmButton\"\n            ref=\"confirmRef\"\n            type=\"primary\"\n            plain\n            :loading=\"confirmButtonLoading\"\n            :class=\"[confirmButtonClasses]\"\n            :round=\"roundButton\"\n            :disabled=\"confirmButtonDisabled\"\n            :size=\"buttonSize || 'small'\"\n            @click=\"handleAction('confirm')\"\n            @keydown.prevent.enter=\"handleAction('confirm')\"\n          >\n            {{ confirmButtonText || t('el.messagebox.confirm') }}\n          </el-button>\n        </div>\n      </div>\n    </el-overlay>\n  </transition>\n</template>\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  nextTick,\n  onMounted,\n  onBeforeUnmount,\n  computed,\n  watch,\n  reactive,\n  ref,\n  toRefs,\n} from 'vue'\nimport ElButton from '@element-plus/components/button'\nimport { TrapFocus } from '@element-plus/directives'\nimport {\n  useModal,\n  useLockscreen,\n  useLocale,\n  useRestoreActive,\n  usePreventGlobal,\n} from '@element-plus/hooks'\nimport ElInput from '@element-plus/components/input'\nimport { ElOverlay } from '@element-plus/components/overlay'\nimport PopupManager from '@element-plus/utils/popup-manager'\nimport { on, off } from '@element-plus/utils/dom'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\nimport { isValidComponentSize } from '@element-plus/utils/validators'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { TypeComponents, TypeComponentsMap } from '@element-plus/utils/icon'\n\nimport type { ComponentPublicInstance, PropType } from 'vue'\nimport type { ComponentSize } from '@element-plus/utils/types'\nimport type {\n  Action,\n  MessageBoxState,\n  MessageBoxType,\n} from './message-box.type'\n\nexport default defineComponent({\n  name: 'ElMessageBox',\n  directives: {\n    TrapFocus,\n  },\n  components: {\n    ElButton,\n    ElInput,\n    ElOverlay,\n    ElIcon,\n    ...TypeComponents,\n  },\n  inheritAttrs: false,\n  props: {\n    buttonSize: {\n      type: String as PropType<ComponentSize>,\n      validator: isValidComponentSize,\n    },\n    modal: {\n      type: Boolean,\n      default: true,\n    },\n    lockScroll: {\n      type: Boolean,\n      default: true,\n    },\n    showClose: {\n      type: Boolean,\n      default: true,\n    },\n    closeOnClickModal: {\n      type: Boolean,\n      default: true,\n    },\n    closeOnPressEscape: {\n      type: Boolean,\n      default: true,\n    },\n    closeOnHashChange: {\n      type: Boolean,\n      default: true,\n    },\n    center: Boolean,\n    roundButton: {\n      default: false,\n      type: Boolean,\n    },\n    container: {\n      type: String, // default append to body\n      default: 'body',\n    },\n    boxType: {\n      type: String as PropType<MessageBoxType>,\n      default: '',\n    },\n  },\n  emits: ['vanish', 'action'],\n  setup(props, { emit }) {\n    // const popup = usePopup(props, doClose)\n    const { t } = useLocale()\n    const visible = ref(false)\n    // s represents state\n    const state = reactive<MessageBoxState>({\n      beforeClose: null,\n      callback: null,\n      cancelButtonText: '',\n      cancelButtonClass: '',\n      confirmButtonText: '',\n      confirmButtonClass: '',\n      customClass: '',\n      customStyle: {},\n      dangerouslyUseHTMLString: false,\n      distinguishCancelAndClose: false,\n      icon: '',\n      inputPattern: null,\n      inputPlaceholder: '',\n      inputType: 'text',\n      inputValue: null,\n      inputValidator: null,\n      inputErrorMessage: '',\n      message: null,\n      modalFade: true,\n      modalClass: '',\n      showCancelButton: false,\n      showConfirmButton: true,\n      type: '',\n      title: undefined,\n      showInput: false,\n      action: '' as Action,\n      confirmButtonLoading: false,\n      cancelButtonLoading: false,\n      confirmButtonDisabled: false,\n      editorErrorMessage: '',\n      // refer to: https://github.com/ElemeFE/element/commit/2999279ae34ef10c373ca795c87b020ed6753eed\n      // seemed ok for now without this state.\n      // isOnComposition: false, // temporary remove\n      validateError: false,\n      zIndex: PopupManager.nextZIndex(),\n    })\n\n    const typeClass = computed(() => {\n      const type = state.type\n      return type && TypeComponentsMap[type]\n        ? `el-message-box-icon--${type}`\n        : ''\n    })\n\n    const iconComponent = computed(\n      () => state.icon || TypeComponentsMap[state.type] || ''\n    )\n    const hasMessage = computed(() => !!state.message)\n    const inputRef = ref<ComponentPublicInstance>(null)\n    const confirmRef = ref<ComponentPublicInstance>(null)\n\n    const confirmButtonClasses = computed(() => state.confirmButtonClass)\n\n    watch(\n      () => state.inputValue,\n      async (val) => {\n        await nextTick()\n        if (props.boxType === 'prompt' && val !== null) {\n          validate()\n        }\n      },\n      { immediate: true }\n    )\n\n    watch(\n      () => visible.value,\n      (val) => {\n        if (val) {\n          if (props.boxType === 'alert' || props.boxType === 'confirm') {\n            nextTick().then(() => {\n              confirmRef.value?.$el?.focus?.()\n            })\n          }\n          state.zIndex = PopupManager.nextZIndex()\n        }\n        if (props.boxType !== 'prompt') return\n        if (val) {\n          nextTick().then(() => {\n            if (inputRef.value && inputRef.value.$el) {\n              getInputElement().focus()\n            }\n          })\n        } else {\n          state.editorErrorMessage = ''\n          state.validateError = false\n        }\n      }\n    )\n\n    onMounted(async () => {\n      await nextTick()\n      if (props.closeOnHashChange) {\n        on(window, 'hashchange', doClose)\n      }\n    })\n\n    onBeforeUnmount(() => {\n      if (props.closeOnHashChange) {\n        off(window, 'hashchange', doClose)\n      }\n    })\n\n    function doClose() {\n      if (!visible.value) return\n      visible.value = false\n      nextTick(() => {\n        if (state.action) emit('action', state.action)\n      })\n    }\n\n    const handleWrapperClick = () => {\n      if (props.closeOnClickModal) {\n        handleAction(state.distinguishCancelAndClose ? 'close' : 'cancel')\n      }\n    }\n\n    const handleInputEnter = () => {\n      if (state.inputType !== 'textarea') {\n        return handleAction('confirm')\n      }\n    }\n\n    const handleAction = (action: Action) => {\n      if (props.boxType === 'prompt' && action === 'confirm' && !validate()) {\n        return\n      }\n\n      state.action = action\n\n      if (state.beforeClose) {\n        state.beforeClose?.(action, state, doClose)\n      } else {\n        doClose()\n      }\n    }\n\n    const validate = () => {\n      if (props.boxType === 'prompt') {\n        const inputPattern = state.inputPattern\n        if (inputPattern && !inputPattern.test(state.inputValue || '')) {\n          state.editorErrorMessage =\n            state.inputErrorMessage || t('el.messagebox.error')\n          state.validateError = true\n          return false\n        }\n        const inputValidator = state.inputValidator\n        if (typeof inputValidator === 'function') {\n          const validateResult = inputValidator(state.inputValue)\n          if (validateResult === false) {\n            state.editorErrorMessage =\n              state.inputErrorMessage || t('el.messagebox.error')\n            state.validateError = true\n            return false\n          }\n          if (typeof validateResult === 'string') {\n            state.editorErrorMessage = validateResult\n            state.validateError = true\n            return false\n          }\n        }\n      }\n      state.editorErrorMessage = ''\n      state.validateError = false\n      return true\n    }\n\n    const getInputElement = () => {\n      const inputRefs = inputRef.value.$refs\n      return (inputRefs.input || inputRefs.textarea) as HTMLElement\n    }\n\n    const handleClose = () => {\n      handleAction('close')\n    }\n\n    // when close on press escape is disabled, pressing esc should not callout\n    // any other message box and close any other dialog-ish elements\n    // e.g. Dialog has a close on press esc feature, and when it closes, it calls\n    // props.beforeClose method to make a intermediate state by callout a message box\n    // for some verification or alerting. then if we allow global event liek this\n    // to dispatch, it could callout another message box.\n    if (props.closeOnPressEscape) {\n      useModal(\n        {\n          handleClose,\n        },\n        visible\n      )\n    } else {\n      usePreventGlobal(\n        visible,\n        'keydown',\n        (e: KeyboardEvent) => e.code === EVENT_CODE.esc\n      )\n    }\n\n    // locks the screen to prevent scroll\n    if (props.lockScroll) {\n      useLockscreen(visible)\n    }\n\n    // restore to prev active element.\n    useRestoreActive(visible)\n\n    return {\n      ...toRefs(state),\n      visible,\n      hasMessage,\n      typeClass,\n      iconComponent,\n      confirmButtonClasses,\n      inputRef,\n      confirmRef,\n      doClose, // for outside usage\n      handleClose, // for out side usage\n      handleWrapperClick,\n      handleInputEnter,\n      handleAction,\n      t,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","TrapFocus","ElButton","ElInput","ElOverlay","ElIcon","TypeComponents","isValidComponentSize","useLocale","ref","reactive","PopupManager","computed","TypeComponentsMap","nextTick","EVENT_CODE","toRefs"],"mappings":"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"}

package/lib/components/message-box/src/index.vue_vue_type_template_id_7035e868_lang.js

@@ -136,6 +136,8 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
               }, 8, ["loading", "class", "round", "size"])) : vue.createCommentVNode("v-if", true),
               vue.withDirectives(vue.createVNode(_component_el_button, {
                 ref: "confirmRef",
+                type: "primary",
+                plain: "",
                 loading: _ctx.confirmButtonLoading,
                 class: vue.normalizeClass([_ctx.confirmButtonClasses]),
                 round: _ctx.roundButton,

package/lib/components/message-box/src/index.vue_vue_type_template_id_7035e868_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.vue_vue_type_template_id_7035e868_lang.js","sources":["../../../../../../packages/components/message-box/src/index.vue?vue&type=template&id=7035e868&lang.js"],"sourcesContent":["<template>\n  <transition name=\"fade-in-linear\" @after-leave=\"$emit('vanish')\">\n    <el-overlay\n      v-show=\"visible\"\n      :z-index=\"zIndex\"\n      :overlay-class=\"['is-message-box', modalClass]\"\n      :mask=\"modal\"\n      @click.self=\"handleWrapperClick\"\n    >\n      <div\n        ref=\"root\"\n        v-trap-focus\n        :aria-label=\"title || 'dialog'\"\n        aria-modal=\"true\"\n        :class=\"[\n          'el-message-box',\n          customClass,\n          { 'el-message-box--center': center },\n        ]\"\n        :style=\"customStyle\"\n      >\n        <div\n          v-if=\"title !== null && title !== undefined\"\n          class=\"el-message-box__header\"\n        >\n          <div class=\"el-message-box__title\">\n            <el-icon\n              v-if=\"iconComponent && center\"\n              class=\"el-message-box__status\"\n              :class=\"typeClass\"\n            >\n              <component :is=\"iconComponent\" />\n            </el-icon>\n            <span>{{ title }}</span>\n          </div>\n          <button\n            v-if=\"showClose\"\n            type=\"button\"\n            class=\"el-message-box__headerbtn\"\n            aria-label=\"Close\"\n            @click=\"\n              handleAction(distinguishCancelAndClose ? 'close' : 'cancel')\n            \"\n            @keydown.prevent.enter=\"\n              handleAction(distinguishCancelAndClose ? 'close' : 'cancel')\n            \"\n          >\n            <el-icon class=\"el-message-box__close\"><close /></el-icon>\n          </button>\n        </div>\n        <div class=\"el-message-box__content\">\n          <div class=\"el-message-box__container\">\n            <el-icon\n              v-if=\"iconComponent && !center && hasMessage\"\n              class=\"el-message-box__status\"\n              :class=\"typeClass\"\n            >\n              <component :is=\"iconComponent\" />\n            </el-icon>\n            <div v-if=\"hasMessage\" class=\"el-message-box__message\">\n              <slot>\n                <p v-if=\"!dangerouslyUseHTMLString\">{{ message }}</p>\n                <p v-else v-html=\"message\"></p>\n              </slot>\n            </div>\n          </div>\n          <div v-show=\"showInput\" class=\"el-message-box__input\">\n            <el-input\n              ref=\"inputRef\"\n              v-model=\"inputValue\"\n              :type=\"inputType\"\n              :placeholder=\"inputPlaceholder\"\n              :class=\"{ invalid: validateError }\"\n              @keydown.prevent.enter=\"handleInputEnter\"\n            />\n            <div\n              class=\"el-message-box__errormsg\"\n              :style=\"{\n                visibility: !!editorErrorMessage ? 'visible' : 'hidden',\n              }\"\n            >\n              {{ editorErrorMessage }}\n            </div>\n          </div>\n        </div>\n        <div class=\"el-message-box__btns\">\n          <el-button\n            v-if=\"showCancelButton\"\n            :loading=\"cancelButtonLoading\"\n            :class=\"[cancelButtonClass]\"\n            :round=\"roundButton\"\n            :size=\"buttonSize || 'small'\"\n            @click=\"handleAction('cancel')\"\n            @keydown.prevent.enter=\"handleAction('cancel')\"\n          >\n            {{ cancelButtonText || t('el.messagebox.cancel') }}\n          </el-button>\n          <el-button\n            v-show=\"showConfirmButton\"\n            ref=\"confirmRef\"\n            :loading=\"confirmButtonLoading\"\n            :class=\"[confirmButtonClasses]\"\n            :round=\"roundButton\"\n            :disabled=\"confirmButtonDisabled\"\n            :size=\"buttonSize || 'small'\"\n            @click=\"handleAction('confirm')\"\n            @keydown.prevent.enter=\"handleAction('confirm')\"\n          >\n            {{ confirmButtonText || t('el.messagebox.confirm') }}\n          </el-button>\n        </div>\n      </div>\n    </el-overlay>\n  </transition>\n</template>\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  nextTick,\n  onMounted,\n  onBeforeUnmount,\n  computed,\n  watch,\n  reactive,\n  ref,\n  toRefs,\n} from 'vue'\nimport ElButton from '@element-plus/components/button'\nimport { TrapFocus } from '@element-plus/directives'\nimport {\n  useModal,\n  useLockScreen,\n  useLocaleInject,\n  useRestoreActive,\n  usePreventGlobal,\n} from '@element-plus/hooks'\nimport ElInput from '@element-plus/components/input'\nimport { ElOverlay } from '@element-plus/components/overlay'\nimport PopupManager from '@element-plus/utils/popup-manager'\nimport { on, off } from '@element-plus/utils/dom'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\nimport { isValidComponentSize } from '@element-plus/utils/validators'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { TypeComponents, TypeComponentsMap } from '@element-plus/utils/icon'\n\nimport type { ComponentPublicInstance, PropType } from 'vue'\nimport type { ComponentSize } from '@element-plus/utils/types'\nimport type {\n  Action,\n  MessageBoxState,\n  MessageBoxType,\n} from './message-box.type'\n\nexport default defineComponent({\n  name: 'ElMessageBox',\n  directives: {\n    TrapFocus,\n  },\n  components: {\n    ElButton,\n    ElInput,\n    ElOverlay,\n    ElIcon,\n    ...TypeComponents,\n  },\n  inheritAttrs: false,\n  props: {\n    buttonSize: {\n      type: String as PropType<ComponentSize>,\n      validator: isValidComponentSize,\n    },\n    modal: {\n      type: Boolean,\n      default: true,\n    },\n    lockScroll: {\n      type: Boolean,\n      default: true,\n    },\n    showClose: {\n      type: Boolean,\n      default: true,\n    },\n    closeOnClickModal: {\n      type: Boolean,\n      default: true,\n    },\n    closeOnPressEscape: {\n      type: Boolean,\n      default: true,\n    },\n    closeOnHashChange: {\n      type: Boolean,\n      default: true,\n    },\n    center: Boolean,\n    roundButton: {\n      default: false,\n      type: Boolean,\n    },\n    container: {\n      type: String, // default append to body\n      default: 'body',\n    },\n    boxType: {\n      type: String as PropType<MessageBoxType>,\n      default: '',\n    },\n  },\n  emits: ['vanish', 'action'],\n  setup(props, { emit }) {\n    // const popup = usePopup(props, doClose)\n    const { t } = useLocaleInject()\n    const visible = ref(false)\n    // s represents state\n    const state = reactive<MessageBoxState>({\n      beforeClose: null,\n      callback: null,\n      cancelButtonText: '',\n      cancelButtonClass: '',\n      confirmButtonText: '',\n      confirmButtonClass: '',\n      customClass: '',\n      customStyle: {},\n      dangerouslyUseHTMLString: false,\n      distinguishCancelAndClose: false,\n      icon: '',\n      inputPattern: null,\n      inputPlaceholder: '',\n      inputType: 'text',\n      inputValue: null,\n      inputValidator: null,\n      inputErrorMessage: '',\n      message: null,\n      modalFade: true,\n      modalClass: '',\n      showCancelButton: false,\n      showConfirmButton: true,\n      type: '',\n      title: undefined,\n      showInput: false,\n      action: '' as Action,\n      confirmButtonLoading: false,\n      cancelButtonLoading: false,\n      confirmButtonDisabled: false,\n      editorErrorMessage: '',\n      // refer to: https://github.com/ElemeFE/element/commit/2999279ae34ef10c373ca795c87b020ed6753eed\n      // seemed ok for now without this state.\n      // isOnComposition: false, // temporary remove\n      validateError: false,\n      zIndex: PopupManager.nextZIndex(),\n    })\n\n    const typeClass = computed(() => {\n      const type = state.type\n      return type && TypeComponentsMap[type]\n        ? `el-message-box-icon--${type}`\n        : ''\n    })\n\n    const iconComponent = computed(\n      () => state.icon || TypeComponentsMap[state.type] || ''\n    )\n    const hasMessage = computed(() => !!state.message)\n    const inputRef = ref<ComponentPublicInstance>(null)\n    const confirmRef = ref<ComponentPublicInstance>(null)\n\n    const confirmButtonClasses = computed(\n      () => `el-button--primary ${state.confirmButtonClass}`\n    )\n\n    watch(\n      () => state.inputValue,\n      async (val) => {\n        await nextTick()\n        if (props.boxType === 'prompt' && val !== null) {\n          validate()\n        }\n      },\n      { immediate: true }\n    )\n\n    watch(\n      () => visible.value,\n      (val) => {\n        if (val) {\n          if (props.boxType === 'alert' || props.boxType === 'confirm') {\n            nextTick().then(() => {\n              confirmRef.value?.$el?.focus?.()\n            })\n          }\n          state.zIndex = PopupManager.nextZIndex()\n        }\n        if (props.boxType !== 'prompt') return\n        if (val) {\n          nextTick().then(() => {\n            if (inputRef.value && inputRef.value.$el) {\n              getInputElement().focus()\n            }\n          })\n        } else {\n          state.editorErrorMessage = ''\n          state.validateError = false\n        }\n      }\n    )\n\n    onMounted(async () => {\n      await nextTick()\n      if (props.closeOnHashChange) {\n        on(window, 'hashchange', doClose)\n      }\n    })\n\n    onBeforeUnmount(() => {\n      if (props.closeOnHashChange) {\n        off(window, 'hashchange', doClose)\n      }\n    })\n\n    function doClose() {\n      if (!visible.value) return\n      visible.value = false\n      nextTick(() => {\n        if (state.action) emit('action', state.action)\n      })\n    }\n\n    const handleWrapperClick = () => {\n      if (props.closeOnClickModal) {\n        handleAction(state.distinguishCancelAndClose ? 'close' : 'cancel')\n      }\n    }\n\n    const handleInputEnter = () => {\n      if (state.inputType !== 'textarea') {\n        return handleAction('confirm')\n      }\n    }\n\n    const handleAction = (action: Action) => {\n      if (props.boxType === 'prompt' && action === 'confirm' && !validate()) {\n        return\n      }\n\n      state.action = action\n\n      if (state.beforeClose) {\n        state.beforeClose?.(action, state, doClose)\n      } else {\n        doClose()\n      }\n    }\n\n    const validate = () => {\n      if (props.boxType === 'prompt') {\n        const inputPattern = state.inputPattern\n        if (inputPattern && !inputPattern.test(state.inputValue || '')) {\n          state.editorErrorMessage =\n            state.inputErrorMessage || t('el.messagebox.error')\n          state.validateError = true\n          return false\n        }\n        const inputValidator = state.inputValidator\n        if (typeof inputValidator === 'function') {\n          const validateResult = inputValidator(state.inputValue)\n          if (validateResult === false) {\n            state.editorErrorMessage =\n              state.inputErrorMessage || t('el.messagebox.error')\n            state.validateError = true\n            return false\n          }\n          if (typeof validateResult === 'string') {\n            state.editorErrorMessage = validateResult\n            state.validateError = true\n            return false\n          }\n        }\n      }\n      state.editorErrorMessage = ''\n      state.validateError = false\n      return true\n    }\n\n    const getInputElement = () => {\n      const inputRefs = inputRef.value.$refs\n      return (inputRefs.input || inputRefs.textarea) as HTMLElement\n    }\n\n    const handleClose = () => {\n      handleAction('close')\n    }\n\n    // when close on press escape is disabled, pressing esc should not callout\n    // any other message box and close any other dialog-ish elements\n    // e.g. Dialog has a close on press esc feature, and when it closes, it calls\n    // props.beforeClose method to make a intermediate state by callout a message box\n    // for some verification or alerting. then if we allow global event liek this\n    // to dispatch, it could callout another message box.\n    if (props.closeOnPressEscape) {\n      useModal(\n        {\n          handleClose,\n        },\n        visible\n      )\n    } else {\n      usePreventGlobal(\n        visible,\n        'keydown',\n        (e: KeyboardEvent) => e.code === EVENT_CODE.esc\n      )\n    }\n\n    // locks the screen to prevent scroll\n    if (props.lockScroll) {\n      useLockScreen(visible)\n    }\n\n    // restore to prev active element.\n    useRestoreActive(visible)\n\n    return {\n      ...toRefs(state),\n      visible,\n      hasMessage,\n      typeClass,\n      iconComponent,\n      confirmButtonClasses,\n      inputRef,\n      confirmRef,\n      doClose, // for outside usage\n      handleClose, // for out side usage\n      handleWrapperClick,\n      handleInputEnter,\n      handleAction,\n      t,\n    }\n  },\n})\n</script>\n"],"names":["_createBlock","_createVNode","_createElementVNode","_createElementBlock","_renderSlot"],"mappings":";;;;;;;;;EAuBU,OAAM;AAAA;qBAED,OAAM;qBAyBR,OAAM;qBACJ,OAAM;;;EAQc,OAAM;AAAA;;;qBAOP,OAAM;sBAmB3B,OAAM;;;;;;;;0BApFjBA;IAAY,MAAK;AAAA,IAAkB,oDAAa;;yBAC9C;yBAAAC;QAEG,WAAS;QACT,oCAAkC;QAClC,MAAM;QACN,2BAAY;;6BAEb;6BAAAC;YACE,KAAI;AAAA,YAEH,cAAY;YACb,cAAW;AAAA,YACV;;;;;YAKA,0BAAO;;YAGA,uBAAkB,eAAU,2BADpCC,8BAAA;cAIED,8BAAA;gBAEU,sBAAiB,gCADzBF;;kBAEE,2BAAM,0BACE;;uCAER;sCAAAA,4CAAgB;;;;gBAElBE,yDAAS;;cAGH,mCADRC;;gBAEE,MAAK;AAAA,gBACL,OAAM;AAAA,gBACN,cAAW;AAAA,gBACV;gBAGA;;gBAIDF,sCAAS,OAAM;uCAAwB;oBAAAA,gBAAS;AAAA;AAAA;;;;YAGpDC,8BAAA;cACEA,8BAAA;gBAEU,uBAAkB,eAAU,oCADpCF;;kBAEE,2BAAM,0BACE;;uCAER;sCAAAA,4CAAgB;;;;gBAEP,oCAAXG,8BAAA;kBACEC,2CAAA;qBACY,kDAAVD,4DAAuC,uCACvCA;;sBAAU,WAAQ;;;;;iCAIxBD,8BAAA;gBACED;kBACE,KAAI;AAAA,8BACK;+EAAA;kBACR,MAAM;kBACN,aAAa;kBACb,qCAAkB;kBAClB,0CAAuB;;gBAE1BC;kBACE,OAAM;AAAA,kBACL;;;uCAIE;;4BAfM;;;YAmBfA,8BAAA;cAEU,0CADRF;;gBAEG,SAAS;gBACT,2BAAQ;gBACR,OAAO;gBACP,MAAM;gBACN,+CAAO;gBACP,gFAAuB;;qCAExB;0DAAG,yBAAoB;;;;iCAEzBC;gBAEE,KAAI;AAAA,gBACH,SAAS;gBACT,2BAAQ;gBACR,OAAO;gBACP,UAAU;gBACV,MAAM;gBACN,+CAAO;gBACP,gFAAuB;;qCAExB;0DAAG,0BAAqB;;;;4BAVhB;;;;;;;;;oBA/FN;;;;;;;;;"}
+{"version":3,"file":"index.vue_vue_type_template_id_7035e868_lang.js","sources":["../../../../../../packages/components/message-box/src/index.vue?vue&type=template&id=7035e868&lang.js"],"sourcesContent":["<template>\n  <transition name=\"fade-in-linear\" @after-leave=\"$emit('vanish')\">\n    <el-overlay\n      v-show=\"visible\"\n      :z-index=\"zIndex\"\n      :overlay-class=\"['is-message-box', modalClass]\"\n      :mask=\"modal\"\n      @click.self=\"handleWrapperClick\"\n    >\n      <div\n        ref=\"root\"\n        v-trap-focus\n        :aria-label=\"title || 'dialog'\"\n        aria-modal=\"true\"\n        :class=\"[\n          'el-message-box',\n          customClass,\n          { 'el-message-box--center': center },\n        ]\"\n        :style=\"customStyle\"\n      >\n        <div\n          v-if=\"title !== null && title !== undefined\"\n          class=\"el-message-box__header\"\n        >\n          <div class=\"el-message-box__title\">\n            <el-icon\n              v-if=\"iconComponent && center\"\n              class=\"el-message-box__status\"\n              :class=\"typeClass\"\n            >\n              <component :is=\"iconComponent\" />\n            </el-icon>\n            <span>{{ title }}</span>\n          </div>\n          <button\n            v-if=\"showClose\"\n            type=\"button\"\n            class=\"el-message-box__headerbtn\"\n            aria-label=\"Close\"\n            @click=\"\n              handleAction(distinguishCancelAndClose ? 'close' : 'cancel')\n            \"\n            @keydown.prevent.enter=\"\n              handleAction(distinguishCancelAndClose ? 'close' : 'cancel')\n            \"\n          >\n            <el-icon class=\"el-message-box__close\"><close /></el-icon>\n          </button>\n        </div>\n        <div class=\"el-message-box__content\">\n          <div class=\"el-message-box__container\">\n            <el-icon\n              v-if=\"iconComponent && !center && hasMessage\"\n              class=\"el-message-box__status\"\n              :class=\"typeClass\"\n            >\n              <component :is=\"iconComponent\" />\n            </el-icon>\n            <div v-if=\"hasMessage\" class=\"el-message-box__message\">\n              <slot>\n                <p v-if=\"!dangerouslyUseHTMLString\">{{ message }}</p>\n                <p v-else v-html=\"message\"></p>\n              </slot>\n            </div>\n          </div>\n          <div v-show=\"showInput\" class=\"el-message-box__input\">\n            <el-input\n              ref=\"inputRef\"\n              v-model=\"inputValue\"\n              :type=\"inputType\"\n              :placeholder=\"inputPlaceholder\"\n              :class=\"{ invalid: validateError }\"\n              @keydown.prevent.enter=\"handleInputEnter\"\n            />\n            <div\n              class=\"el-message-box__errormsg\"\n              :style=\"{\n                visibility: !!editorErrorMessage ? 'visible' : 'hidden',\n              }\"\n            >\n              {{ editorErrorMessage }}\n            </div>\n          </div>\n        </div>\n        <div class=\"el-message-box__btns\">\n          <el-button\n            v-if=\"showCancelButton\"\n            :loading=\"cancelButtonLoading\"\n            :class=\"[cancelButtonClass]\"\n            :round=\"roundButton\"\n            :size=\"buttonSize || 'small'\"\n            @click=\"handleAction('cancel')\"\n            @keydown.prevent.enter=\"handleAction('cancel')\"\n          >\n            {{ cancelButtonText || t('el.messagebox.cancel') }}\n          </el-button>\n          <el-button\n            v-show=\"showConfirmButton\"\n            ref=\"confirmRef\"\n            type=\"primary\"\n            plain\n            :loading=\"confirmButtonLoading\"\n            :class=\"[confirmButtonClasses]\"\n            :round=\"roundButton\"\n            :disabled=\"confirmButtonDisabled\"\n            :size=\"buttonSize || 'small'\"\n            @click=\"handleAction('confirm')\"\n            @keydown.prevent.enter=\"handleAction('confirm')\"\n          >\n            {{ confirmButtonText || t('el.messagebox.confirm') }}\n          </el-button>\n        </div>\n      </div>\n    </el-overlay>\n  </transition>\n</template>\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  nextTick,\n  onMounted,\n  onBeforeUnmount,\n  computed,\n  watch,\n  reactive,\n  ref,\n  toRefs,\n} from 'vue'\nimport ElButton from '@element-plus/components/button'\nimport { TrapFocus } from '@element-plus/directives'\nimport {\n  useModal,\n  useLockscreen,\n  useLocale,\n  useRestoreActive,\n  usePreventGlobal,\n} from '@element-plus/hooks'\nimport ElInput from '@element-plus/components/input'\nimport { ElOverlay } from '@element-plus/components/overlay'\nimport PopupManager from '@element-plus/utils/popup-manager'\nimport { on, off } from '@element-plus/utils/dom'\nimport { EVENT_CODE } from '@element-plus/utils/aria'\nimport { isValidComponentSize } from '@element-plus/utils/validators'\nimport { ElIcon } from '@element-plus/components/icon'\nimport { TypeComponents, TypeComponentsMap } from '@element-plus/utils/icon'\n\nimport type { ComponentPublicInstance, PropType } from 'vue'\nimport type { ComponentSize } from '@element-plus/utils/types'\nimport type {\n  Action,\n  MessageBoxState,\n  MessageBoxType,\n} from './message-box.type'\n\nexport default defineComponent({\n  name: 'ElMessageBox',\n  directives: {\n    TrapFocus,\n  },\n  components: {\n    ElButton,\n    ElInput,\n    ElOverlay,\n    ElIcon,\n    ...TypeComponents,\n  },\n  inheritAttrs: false,\n  props: {\n    buttonSize: {\n      type: String as PropType<ComponentSize>,\n      validator: isValidComponentSize,\n    },\n    modal: {\n      type: Boolean,\n      default: true,\n    },\n    lockScroll: {\n      type: Boolean,\n      default: true,\n    },\n    showClose: {\n      type: Boolean,\n      default: true,\n    },\n    closeOnClickModal: {\n      type: Boolean,\n      default: true,\n    },\n    closeOnPressEscape: {\n      type: Boolean,\n      default: true,\n    },\n    closeOnHashChange: {\n      type: Boolean,\n      default: true,\n    },\n    center: Boolean,\n    roundButton: {\n      default: false,\n      type: Boolean,\n    },\n    container: {\n      type: String, // default append to body\n      default: 'body',\n    },\n    boxType: {\n      type: String as PropType<MessageBoxType>,\n      default: '',\n    },\n  },\n  emits: ['vanish', 'action'],\n  setup(props, { emit }) {\n    // const popup = usePopup(props, doClose)\n    const { t } = useLocale()\n    const visible = ref(false)\n    // s represents state\n    const state = reactive<MessageBoxState>({\n      beforeClose: null,\n      callback: null,\n      cancelButtonText: '',\n      cancelButtonClass: '',\n      confirmButtonText: '',\n      confirmButtonClass: '',\n      customClass: '',\n      customStyle: {},\n      dangerouslyUseHTMLString: false,\n      distinguishCancelAndClose: false,\n      icon: '',\n      inputPattern: null,\n      inputPlaceholder: '',\n      inputType: 'text',\n      inputValue: null,\n      inputValidator: null,\n      inputErrorMessage: '',\n      message: null,\n      modalFade: true,\n      modalClass: '',\n      showCancelButton: false,\n      showConfirmButton: true,\n      type: '',\n      title: undefined,\n      showInput: false,\n      action: '' as Action,\n      confirmButtonLoading: false,\n      cancelButtonLoading: false,\n      confirmButtonDisabled: false,\n      editorErrorMessage: '',\n      // refer to: https://github.com/ElemeFE/element/commit/2999279ae34ef10c373ca795c87b020ed6753eed\n      // seemed ok for now without this state.\n      // isOnComposition: false, // temporary remove\n      validateError: false,\n      zIndex: PopupManager.nextZIndex(),\n    })\n\n    const typeClass = computed(() => {\n      const type = state.type\n      return type && TypeComponentsMap[type]\n        ? `el-message-box-icon--${type}`\n        : ''\n    })\n\n    const iconComponent = computed(\n      () => state.icon || TypeComponentsMap[state.type] || ''\n    )\n    const hasMessage = computed(() => !!state.message)\n    const inputRef = ref<ComponentPublicInstance>(null)\n    const confirmRef = ref<ComponentPublicInstance>(null)\n\n    const confirmButtonClasses = computed(() => state.confirmButtonClass)\n\n    watch(\n      () => state.inputValue,\n      async (val) => {\n        await nextTick()\n        if (props.boxType === 'prompt' && val !== null) {\n          validate()\n        }\n      },\n      { immediate: true }\n    )\n\n    watch(\n      () => visible.value,\n      (val) => {\n        if (val) {\n          if (props.boxType === 'alert' || props.boxType === 'confirm') {\n            nextTick().then(() => {\n              confirmRef.value?.$el?.focus?.()\n            })\n          }\n          state.zIndex = PopupManager.nextZIndex()\n        }\n        if (props.boxType !== 'prompt') return\n        if (val) {\n          nextTick().then(() => {\n            if (inputRef.value && inputRef.value.$el) {\n              getInputElement().focus()\n            }\n          })\n        } else {\n          state.editorErrorMessage = ''\n          state.validateError = false\n        }\n      }\n    )\n\n    onMounted(async () => {\n      await nextTick()\n      if (props.closeOnHashChange) {\n        on(window, 'hashchange', doClose)\n      }\n    })\n\n    onBeforeUnmount(() => {\n      if (props.closeOnHashChange) {\n        off(window, 'hashchange', doClose)\n      }\n    })\n\n    function doClose() {\n      if (!visible.value) return\n      visible.value = false\n      nextTick(() => {\n        if (state.action) emit('action', state.action)\n      })\n    }\n\n    const handleWrapperClick = () => {\n      if (props.closeOnClickModal) {\n        handleAction(state.distinguishCancelAndClose ? 'close' : 'cancel')\n      }\n    }\n\n    const handleInputEnter = () => {\n      if (state.inputType !== 'textarea') {\n        return handleAction('confirm')\n      }\n    }\n\n    const handleAction = (action: Action) => {\n      if (props.boxType === 'prompt' && action === 'confirm' && !validate()) {\n        return\n      }\n\n      state.action = action\n\n      if (state.beforeClose) {\n        state.beforeClose?.(action, state, doClose)\n      } else {\n        doClose()\n      }\n    }\n\n    const validate = () => {\n      if (props.boxType === 'prompt') {\n        const inputPattern = state.inputPattern\n        if (inputPattern && !inputPattern.test(state.inputValue || '')) {\n          state.editorErrorMessage =\n            state.inputErrorMessage || t('el.messagebox.error')\n          state.validateError = true\n          return false\n        }\n        const inputValidator = state.inputValidator\n        if (typeof inputValidator === 'function') {\n          const validateResult = inputValidator(state.inputValue)\n          if (validateResult === false) {\n            state.editorErrorMessage =\n              state.inputErrorMessage || t('el.messagebox.error')\n            state.validateError = true\n            return false\n          }\n          if (typeof validateResult === 'string') {\n            state.editorErrorMessage = validateResult\n            state.validateError = true\n            return false\n          }\n        }\n      }\n      state.editorErrorMessage = ''\n      state.validateError = false\n      return true\n    }\n\n    const getInputElement = () => {\n      const inputRefs = inputRef.value.$refs\n      return (inputRefs.input || inputRefs.textarea) as HTMLElement\n    }\n\n    const handleClose = () => {\n      handleAction('close')\n    }\n\n    // when close on press escape is disabled, pressing esc should not callout\n    // any other message box and close any other dialog-ish elements\n    // e.g. Dialog has a close on press esc feature, and when it closes, it calls\n    // props.beforeClose method to make a intermediate state by callout a message box\n    // for some verification or alerting. then if we allow global event liek this\n    // to dispatch, it could callout another message box.\n    if (props.closeOnPressEscape) {\n      useModal(\n        {\n          handleClose,\n        },\n        visible\n      )\n    } else {\n      usePreventGlobal(\n        visible,\n        'keydown',\n        (e: KeyboardEvent) => e.code === EVENT_CODE.esc\n      )\n    }\n\n    // locks the screen to prevent scroll\n    if (props.lockScroll) {\n      useLockscreen(visible)\n    }\n\n    // restore to prev active element.\n    useRestoreActive(visible)\n\n    return {\n      ...toRefs(state),\n      visible,\n      hasMessage,\n      typeClass,\n      iconComponent,\n      confirmButtonClasses,\n      inputRef,\n      confirmRef,\n      doClose, // for outside usage\n      handleClose, // for out side usage\n      handleWrapperClick,\n      handleInputEnter,\n      handleAction,\n      t,\n    }\n  },\n})\n</script>\n"],"names":["_createBlock","_createVNode","_createElementVNode","_createElementBlock","_renderSlot"],"mappings":";;;;;;;;;EAuBU,OAAM;AAAA;qBAED,OAAM;qBAyBR,OAAM;qBACJ,OAAM;;;EAQc,OAAM;AAAA;;;qBAOP,OAAM;sBAmB3B,OAAM;;;;;;;;0BApFjBA;IAAY,MAAK;AAAA,IAAkB,oDAAa;;yBAC9C;yBAAAC;QAEG,WAAS;QACT,oCAAkC;QAClC,MAAM;QACN,2BAAY;;6BAEb;6BAAAC;YACE,KAAI;AAAA,YAEH,cAAY;YACb,cAAW;AAAA,YACV;;;;;YAKA,0BAAO;;YAGA,uBAAkB,eAAU,2BADpCC,8BAAA;cAIED,8BAAA;gBAEU,sBAAiB,gCADzBF;;kBAEE,2BAAM,0BACE;;uCAER;sCAAAA,4CAAgB;;;;gBAElBE,yDAAS;;cAGH,mCADRC;;gBAEE,MAAK;AAAA,gBACL,OAAM;AAAA,gBACN,cAAW;AAAA,gBACV;gBAGA;;gBAIDF,sCAAS,OAAM;uCAAwB;oBAAAA,gBAAS;AAAA;AAAA;;;;YAGpDC,8BAAA;cACEA,8BAAA;gBAEU,uBAAkB,eAAU,oCADpCF;;kBAEE,2BAAM,0BACE;;uCAER;sCAAAA,4CAAgB;;;;gBAEP,oCAAXG,8BAAA;kBACEC,2CAAA;qBACY,kDAAVD,4DAAuC,uCACvCA;;sBAAU,WAAQ;;;;;iCAIxBD,8BAAA;gBACED;kBACE,KAAI;AAAA,8BACK;+EAAA;kBACR,MAAM;kBACN,aAAa;kBACb,qCAAkB;kBAClB,0CAAuB;;gBAE1BC;kBACE,OAAM;AAAA,kBACL;;;uCAIE;;4BAfM;;;YAmBfA,8BAAA;cAEU,0CADRF;;gBAEG,SAAS;gBACT,2BAAQ;gBACR,OAAO;gBACP,MAAM;gBACN,+CAAO;gBACP,gFAAuB;;qCAExB;0DAAG,yBAAoB;;;;iCAEzBC;gBAEE,KAAI;AAAA,gBACJ,MAAK;AAAA,gBACL,OAAA;AAAA,gBACC,SAAS;gBACT,2BAAQ;gBACR,OAAO;gBACP,UAAU;gBACV,MAAM;gBACN,+CAAO;gBACP,gFAAuB;;qCAExB;0DAAG,0BAAqB;;;;4BAZhB;;;;;;;;;oBA/FN;;;;;;;;;"}