element-plus/es/components/image/src/image.vue2.mjs.map

A Component Library for Vue 3

{"version":3,"file":"image.vue2.mjs","sources":["../../../../../../packages/components/image/src/image.vue"],"sourcesContent":["<template>\n  <div ref=\"container\" v-bind=\"containerAttrs\" :class=\"[ns.b(), $attrs.class]\">\n    <slot v-if=\"hasLoadError\" name=\"error\">\n      <div :class=\"ns.e('error')\">{{ t('el.image.error') }}</div>\n    </slot>\n    <template v-else>\n      <img\n        v-if=\"imageSrc !== undefined\"\n        v-bind=\"imgAttrs\"\n        :src=\"imageSrc\"\n        :loading=\"loading\"\n        :style=\"imageStyle\"\n        :class=\"imageKls\"\n        :crossorigin=\"crossorigin\"\n        @click=\"clickHandler\"\n        @load=\"handleLoad\"\n        @error=\"handleError\"\n      />\n      <div v-if=\"isLoading\" :class=\"ns.e('wrapper')\">\n        <slot name=\"placeholder\">\n          <div :class=\"ns.e('placeholder')\" />\n        </slot>\n      </div>\n    </template>\n    <template v-if=\"preview\">\n      <image-viewer\n        v-if=\"showViewer\"\n        :z-index=\"zIndex\"\n        :initial-index=\"imageIndex\"\n        :infinite=\"infinite\"\n        :zoom-rate=\"zoomRate\"\n        :min-scale=\"minScale\"\n        :max-scale=\"maxScale\"\n        :show-progress=\"showProgress\"\n        :url-list=\"previewSrcList\"\n        :scale=\"scale\"\n        :crossorigin=\"crossorigin\"\n        :hide-on-click-modal=\"hideOnClickModal\"\n        :teleported=\"previewTeleported\"\n        :close-on-press-escape=\"closeOnPressEscape\"\n        @close=\"closeViewer\"\n        @switch=\"switchViewer\"\n      >\n        <div v-if=\"$slots.viewer\">\n          <slot name=\"viewer\" />\n        </div>\n        <template v-if=\"$slots.progress\" #progress=\"progress\">\n          <slot name=\"progress\" v-bind=\"progress\" />\n        </template>\n        <template #toolbar=\"toolbar\">\n          <slot name=\"toolbar\" v-bind=\"toolbar\" />\n        </template>\n        <template v-if=\"$slots['viewer-error']\" #viewer-error=\"viewerError\">\n          <slot name=\"viewer-error\" v-bind=\"viewerError\" />\n        </template>\n      </image-viewer>\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n  computed,\n  nextTick,\n  onMounted,\n  ref,\n  useAttrs as useRawAttrs,\n  watch,\n} from 'vue'\nimport { useIntersectionObserver, useThrottleFn } from '@vueuse/core'\nimport { fromPairs } from 'lodash-unified'\nimport { useAttrs, useLocale, useNamespace } from '@element-plus/hooks'\nimport ImageViewer from '@element-plus/components/image-viewer'\nimport {\n  getScrollContainer,\n  isArray,\n  isClient,\n  isElement,\n  isString,\n  isWindow,\n} from '@element-plus/utils'\nimport { imageEmits } from './image'\n\nimport type { ImageProps } from './image'\nimport type { CSSProperties } from 'vue'\n\ndefineOptions({\n  name: 'ElImage',\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<ImageProps>(), {\n  src: '',\n  fit: '',\n  previewSrcList: () => [],\n  initialIndex: 0,\n  infinite: true,\n  closeOnPressEscape: true,\n  zoomRate: 1.2,\n  scale: 1,\n  minScale: 0.2,\n  maxScale: 7,\n})\nconst emit = defineEmits(imageEmits)\n\nconst { t } = useLocale()\nconst ns = useNamespace('image')\nconst rawAttrs = useRawAttrs()\n\nconst containerAttrs = computed(() => {\n  return fromPairs(\n    Object.entries(rawAttrs).filter(\n      ([key]) => /^(data-|on[A-Z])/i.test(key) || ['id', 'style'].includes(key)\n    )\n  )\n})\n\nconst imgAttrs = useAttrs({\n  excludeListeners: true,\n  excludeKeys: computed<string[]>(() => {\n    return Object.keys(containerAttrs.value)\n  }),\n})\n\nconst imageSrc = ref<string | undefined>()\nconst hasLoadError = ref(false)\nconst isLoading = ref(true)\nconst showViewer = ref(false)\nconst container = ref<HTMLElement>()\nconst _scrollContainer = ref<HTMLElement | undefined>()\n\nconst supportLoading = isClient && 'loading' in HTMLImageElement.prototype\nlet stopScrollListener: (() => void) | undefined\n\nconst imageKls = computed(() => [\n  ns.e('inner'),\n  preview.value && ns.e('preview'),\n  isLoading.value && ns.is('loading'),\n])\n\nconst imageStyle = computed<CSSProperties>(() => {\n  const { fit } = props\n  if (isClient && fit) {\n    return { objectFit: fit }\n  }\n  return {}\n})\n\nconst preview = computed(() => {\n  const { previewSrcList } = props\n  return isArray(previewSrcList) && previewSrcList.length > 0\n})\n\nconst imageIndex = computed(() => {\n  const { previewSrcList, initialIndex } = props\n  let previewIndex = initialIndex\n  if (initialIndex > previewSrcList.length - 1) {\n    previewIndex = 0\n  }\n  return previewIndex\n})\n\nconst isManual = computed(() => {\n  if (props.loading === 'eager') return false\n  return (!supportLoading && props.loading === 'lazy') || props.lazy\n})\n\nconst loadImage = () => {\n  if (!isClient) return\n\n  // reset status\n  isLoading.value = true\n  hasLoadError.value = false\n  imageSrc.value = props.src\n}\n\nfunction handleLoad(event: Event) {\n  isLoading.value = false\n  hasLoadError.value = false\n  emit('load', event)\n}\n\nfunction handleError(event: Event) {\n  isLoading.value = false\n  hasLoadError.value = true\n  emit('error', event)\n}\n\nfunction handleLazyLoad(isIntersecting: boolean) {\n  if (isIntersecting) {\n    loadImage()\n    removeLazyLoadListener()\n  }\n}\n\nconst lazyLoadHandler = useThrottleFn(handleLazyLoad, 200, true)\n\nasync function addLazyLoadListener() {\n  if (!isClient) return\n\n  await nextTick()\n\n  const { scrollContainer } = props\n  if (isElement(scrollContainer)) {\n    _scrollContainer.value = scrollContainer\n  } else if (isString(scrollContainer) && scrollContainer !== '') {\n    _scrollContainer.value =\n      document.querySelector<HTMLElement>(scrollContainer) ?? undefined\n  } else if (container.value) {\n    const scrollContainer = getScrollContainer(container.value)\n    _scrollContainer.value = isWindow(scrollContainer)\n      ? undefined\n      : scrollContainer\n  }\n\n  const { stop } = useIntersectionObserver(\n    container,\n    ([entry]) => {\n      lazyLoadHandler(entry.isIntersecting)\n    },\n    { root: _scrollContainer }\n  )\n  stopScrollListener = stop\n}\n\nfunction removeLazyLoadListener() {\n  if (!isClient || !lazyLoadHandler) return\n\n  stopScrollListener?.()\n  _scrollContainer.value = undefined\n  stopScrollListener = undefined\n}\n\nfunction clickHandler() {\n  // don't show viewer when preview is false\n  if (!preview.value) return\n  showViewer.value = true\n  emit('show')\n}\n\nfunction closeViewer() {\n  showViewer.value = false\n  emit('close')\n}\n\nfunction switchViewer(val: number) {\n  emit('switch', val)\n}\n\nwatch(\n  () => props.src,\n  () => {\n    if (isManual.value) {\n      // reset status\n      isLoading.value = true\n      hasLoadError.value = false\n      removeLazyLoadListener()\n      addLazyLoadListener()\n    } else {\n      loadImage()\n    }\n  }\n)\n\nonMounted(() => {\n  if (isManual.value) {\n    addLazyLoadListener()\n  } else {\n    loadImage()\n  }\n})\n\ndefineExpose({\n  /** @description manually open preview */\n  showPreview: clickHandler,\n})\n</script>\n"],"names":["useRawAttrs","useAttrs","scrollContainer","_openBlock","_createElementBlock","_mergeProps","_unref","$attrs","_renderSlot","_createElementVNode","_normalizeClass","_Fragment","_createBlock","ImageViewer","_withCtx","$slots"],"mappings":"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"}