{"version":3,"file":"image.vue2.mjs","sources":["../../../../../packages/components/image/src/image.vue"],"sourcesContent":["<template>\n  <div ref=\"container\" :class=\"[ns.b(), $attrs.class]\" :style=\"containerStyle\">\n    <slot v-if=\"loading\" name=\"placeholder\">\n      <div :class=\"ns.e('placeholder')\"></div>\n    </slot>\n    <slot v-else-if=\"hasLoadError\" name=\"error\">\n      <div :class=\"ns.e('error')\">加载失败</div>\n    </slot>\n    <img\n      v-else\n      v-bind=\"attrs\"\n      :src=\"src\"\n      :style=\"imageStyle\"\n      :class=\"[ns.e('inner'), preview ? ns.e('preview') : '']\"\n      @click=\"clickHandler\"\n    />\n    <template v-if=\"preview\">\n      <image-viewer\n        v-if=\"showViewer\"\n        :z-index=\"zIndex\"\n        :initial-index=\"imageIndex\"\n        :url-list=\"previewSrcList\"\n        :hide-on-click-modal=\"hideOnClickModal\"\n        :teleported=\"teleported\"\n        @close=\"closeViewer\"\n        @switch=\"switchViewer\"\n      >\n        <div v-if=\"$slots.viewer\">\n          <slot name=\"viewer\" />\n        </div>\n      </image-viewer>\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, computed, ref, onMounted, watch, nextTick } from 'vue'\nimport { isString } from '@vue/shared'\nimport {\n  useEventListener,\n  useThrottleFn,\n  isClient,\n  isBoolean,\n} from '@vueuse/core'\nimport {\n  useAttrs,\n  useNamespace,\n  useDeprecated,\n} from '@element-ultra/hooks'\nimport ImageViewer from '@element-ultra/components/image-viewer'\nimport { getScrollContainer, isInContainer } from '@element-ultra/utils'\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    useDeprecated(\n      {\n        scope: 'el-image',\n        from: 'append-to-body',\n        replacement: 'preview-teleported',\n        version: '2.2.0',\n        ref: 'https://element-plus.org/en-US/component/image.html#image-attributess',\n      },\n      computed(() => isBoolean(props.appendToBody))\n    )\n\n    const ns = useNamespace('image')\n\n    const attrs = useAttrs()\n    const hasLoadError = ref(false)\n    const loading = ref(true)\n    const imgWidth = ref(0)\n    const imgHeight = ref(0)\n    const showViewer = ref(false)\n    const container = ref<HTMLElement>()\n\n    const _scrollContainer = ref<HTMLElement | Window>()\n    let stopScrollListener: () => void\n    let stopWheelListener: () => void\n\n    const containerStyle = computed(() => rawAttrs.style as StyleValue)\n\n    const imageStyle = computed<CSSProperties>(() => {\n      const { fit } = props\n      if (isClient && fit) {\n        return { objectFit: fit }\n      }\n      return {}\n    })\n\n    const preview = computed(() => {\n      const { previewSrcList } = props\n      return Array.isArray(previewSrcList) && previewSrcList.length > 0\n    })\n\n    const teleported = computed(() => {\n      return props.appendToBody || props.previewTeleported\n    })\n\n    const imageIndex = computed(() => {\n      const { previewSrcList, initialIndex } = props\n      let previewIndex = initialIndex\n      if (initialIndex > previewSrcList.length - 1) {\n        previewIndex = 0\n      }\n      return previewIndex\n    })\n\n    const loadImage = () => {\n      if (!isClient) return\n\n      // reset status\n      loading.value = true\n      hasLoadError.value = false\n\n      const img = new Image()\n      const currentImageSrc = props.src\n\n      // load & error callbacks are only responsible for currentImageSrc\n      img.addEventListener('load', (e) => {\n        if (currentImageSrc !== props.src) {\n          return\n        }\n        handleLoad(e, img)\n      })\n      img.addEventListener('error', (e) => {\n        if (currentImageSrc !== props.src) {\n          return\n        }\n        handleError(e)\n      })\n\n      // bind html attrs\n      // so it can behave consistently\n      Object.entries(attrs.value).forEach(([key, value]) => {\n        // avoid onload to be overwritten\n        if (key.toLowerCase() === 'onload') return\n        img.setAttribute(key, value as string)\n      })\n      img.src = currentImageSrc\n    }\n\n    function handleLoad(e: Event, img: HTMLImageElement) {\n      imgWidth.value = img.width\n      imgHeight.value = img.height\n      loading.value = false\n      hasLoadError.value = false\n    }\n\n    function handleError(event: Event) {\n      loading.value = false\n      hasLoadError.value = true\n      emit('error', event)\n    }\n\n    function handleLazyLoad() {\n      if (isInContainer(container.value, _scrollContainer.value)) {\n        loadImage()\n        removeLazyLoadListener()\n      }\n    }\n\n    const lazyLoadHandler = useThrottleFn(handleLazyLoad, 200)\n\n    async function addLazyLoadListener() {\n      if (!isClient) return\n\n      await nextTick()\n\n      const { scrollContainer } = props\n      if (isHtmlElement(scrollContainer)) {\n        _scrollContainer.value = scrollContainer\n      } else if (isString(scrollContainer) && scrollContainer !== '') {\n        _scrollContainer.value =\n          document.querySelector<HTMLElement>(scrollContainer) ?? undefined\n      } else if (container.value) {\n        _scrollContainer.value = getScrollContainer(container.value)\n      }\n\n      if (_scrollContainer.value) {\n        stopScrollListener = useEventListener(\n          _scrollContainer,\n          'scroll',\n          lazyLoadHandler\n        )\n        setTimeout(() => handleLazyLoad(), 100)\n      }\n    }\n\n    function removeLazyLoadListener() {\n      if (!isClient || !_scrollContainer.value || !lazyLoadHandler) return\n\n      stopScrollListener()\n      _scrollContainer.value = undefined\n    }\n\n    function wheelHandler(e: WheelEvent) {\n      if (!e.ctrlKey) return\n\n      if (e.deltaY < 0) {\n        e.preventDefault()\n        return false\n      } else if (e.deltaY > 0) {\n        e.preventDefault()\n        return false\n      }\n    }\n\n    function clickHandler() {\n      // don't show viewer when preview is false\n      if (!preview.value) return\n\n      stopWheelListener = useEventListener('wheel', wheelHandler, {\n        passive: false,\n      })\n\n      // prevent body scroll\n      prevOverflow = document.body.style.overflow\n      document.body.style.overflow = 'hidden'\n      showViewer.value = true\n    }\n\n    function closeViewer() {\n      stopWheelListener?.()\n      document.body.style.overflow = prevOverflow\n      showViewer.value = false\n      emit('close')\n    }\n\n    function switchViewer(val: number) {\n      emit('switch', val)\n    }\n\n    watch(\n      () => props.src,\n      () => {\n        if (props.lazy) {\n          // reset status\n          loading.value = true\n          hasLoadError.value = false\n          removeLazyLoadListener()\n          addLazyLoadListener()\n        } else {\n          loadImage()\n        }\n      }\n    )\n\n    onMounted(() => {\n      if (props.lazy) {\n        addLazyLoadListener()\n      } else {\n        loadImage()\n      }\n    })\n\n    return {\n      attrs,\n      loading,\n      hasLoadError,\n      showViewer,\n      containerStyle,\n      imageStyle,\n      preview,\n      imageIndex,\n      container,\n      ns,\n      teleported,\n\n      clickHandler,\n      closeViewer,\n      switchViewer\n    }\n  },\n})\n</script>\n"],"names":["ImageViewer"],"mappings":"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"}