xdesign-vue-next/es/image/image.mjs.map

XDesign Component for vue-next

{"version":3,"file":"image.mjs","sources":["../../src/image/image.tsx"],"sourcesContent":["import { defineComponent, ref, onMounted, computed, onUnmounted, watch, toRefs } from 'vue';\nimport omit from 'lodash/omit';\nimport isFunction from 'lodash/isFunction';\nimport observe from '../_common/js/utils/observe';\nimport { useConfig } from '../config-provider/useConfig';\nimport { useTNodeDefault, useTNodeJSX } from '../hooks/tnode';\nimport { TdImageProps } from './type';\nimport props from './props';\nimport Space from '../space';\nimport { useImagePreviewUrl } from '../hooks/useImagePreviewUrl';\n\nexport default defineComponent({\n  name: 'XImage',\n\n  props,\n\n  setup(props: TdImageProps) {\n    const divRef = ref<HTMLElement>(null);\n    const imgRef = ref<HTMLImageElement>(null);\n    let io: IntersectionObserver = null;\n\n    const { src } = toRefs(props);\n\n    const renderTNodeJSX = useTNodeJSX();\n\n    onMounted(() => {\n      //在nuxt3中img的onload事件会失效\n      if (imgRef.value?.complete && !props.lazy) {\n        triggerHandleLoad();\n      }\n\n      if (!props.lazy || !divRef.value) return;\n\n      const ioObserver = observe(divRef.value, null, handleLoadImage, 0);\n      io = ioObserver;\n    });\n    onUnmounted(() => {\n      divRef.value && io && io.unobserve(divRef.value);\n    });\n\n    const { classPrefix, globalConfig } = useConfig('image');\n\n    // replace image url\n    const imageStrSrc = computed(() =>\n      isFunction(globalConfig.value.replaceImageSrc) ? globalConfig.value.replaceImageSrc(props) : src.value,\n    );\n\n    const { previewUrl } = useImagePreviewUrl(imageStrSrc);\n\n    watch([previewUrl], () => {\n      hasError.value = false;\n      isLoaded.value = false;\n    });\n\n    const shouldLoad = ref(!props.lazy);\n    const handleLoadImage = () => {\n      shouldLoad.value = true;\n    };\n\n    const isLoaded = ref(false);\n    const handleLoad = (e: Event) => {\n      isLoaded.value = true;\n      props.onLoad?.({ e });\n    };\n    const triggerHandleLoad = () => {\n      const loadEvent = new Event('load');\n      Object.defineProperty(loadEvent, 'target', {\n        value: imgRef.value,\n        enumerable: true,\n      });\n      handleLoad(loadEvent);\n    };\n    const hasError = ref(false);\n    const handleError = (e: Event) => {\n      hasError.value = true;\n      props.onError?.({ e });\n      if (props.fallback) {\n        previewUrl.value = props.fallback;\n      }\n    };\n\n    const hasMouseEvent = computed(() => {\n      return props.overlayTrigger === 'hover';\n    });\n\n    const imageClasses = computed(() => [\n      `${classPrefix.value}-image`,\n      `${classPrefix.value}-image--fit-${props.fit}`,\n      `${classPrefix.value}-image--position-${props.position}`,\n    ]);\n\n    const shouldShowOverlay = ref(!hasMouseEvent.value);\n    const handleToggleOverlay = () => {\n      if (hasMouseEvent.value) {\n        shouldShowOverlay.value = !shouldShowOverlay.value;\n      }\n    };\n\n    const renderPlaceholder = () => {\n      const placeholder = renderTNodeJSX('placeholder');\n      if (!placeholder) return null;\n      return <div class={`${classPrefix.value}-image__placeholder`}>{placeholder}</div>;\n    };\n\n    const renderGalleryShadow = () => {\n      if (!props.gallery) return null;\n      return <div class={`${classPrefix.value}-image__gallery-shadow`} />;\n    };\n\n    const renderOverlay = () => {\n      const overlayContent = renderTNodDefault('overlayContent');\n      if (!overlayContent) return null;\n      return (\n        <div\n          class={[\n            `${classPrefix.value}-image__overlay-content`,\n            !shouldShowOverlay.value && `${classPrefix.value}-image__overlay-content--hidden`,\n          ]}\n        >\n          {overlayContent}\n        </div>\n      );\n    };\n\n    function renderImageSrcset() {\n      return (\n        <picture>\n          {Object.entries(props.srcset).map(([type, url]) => (\n            <source type={type} srcset={url} />\n          ))}\n          {renderImage()}\n        </picture>\n      );\n    }\n\n    function renderImage() {\n      // string | File\n      const url = typeof imageStrSrc.value === 'string' ? imageStrSrc.value : previewUrl.value;\n      return (\n        <img\n          ref={imgRef}\n          src={url}\n          onError={handleError}\n          onLoad={handleLoad}\n          class={imageClasses.value}\n          alt={props.alt}\n          referrerpolicy={props.referrerpolicy}\n        />\n      );\n    }\n\n    const renderTNodDefault = useTNodeDefault();\n\n    return () => {\n      return (\n        <div\n          ref={divRef}\n          class={[\n            `${classPrefix.value}-image__wrapper`,\n            `${classPrefix.value}-image__wrapper--shape-${props.shape}`,\n            props.gallery && `${classPrefix.value}-image__wrapper--gallery`,\n            hasMouseEvent.value && `${classPrefix.value}-image__wrapper--need-hover`,\n          ]}\n          onMouseenter={handleToggleOverlay}\n          onMouseleave={handleToggleOverlay}\n          {...omit(props, [\n            'src',\n            'alt',\n            'fit',\n            'position',\n            'shape',\n            'placeholder',\n            'loading',\n            'error',\n            'overlayTrigger',\n            'overlayContent',\n            'lazy',\n            'gallery',\n            'onLoad',\n            'onError',\n          ])}\n        >\n          {renderPlaceholder()}\n          {renderGalleryShadow()}\n\n          {(hasError.value || !shouldLoad.value) && <div class={`${classPrefix.value}-image`} />}\n          {!(hasError.value || !shouldLoad.value) &&\n            (props.srcset && Object.keys(props.srcset).length ? renderImageSrcset() : renderImage())}\n          {!(hasError.value || !shouldLoad.value) && !isLoaded.value && (\n            <div class={`${classPrefix.value}-image__loading`}>\n              {renderTNodeJSX('loading') || (\n                <Space direction=\"vertical\" size={8} align=\"center\">\n                  <icon-ri-image-line size=\"24px\" />\n                  {typeof props.loading === 'string' ? props.loading : globalConfig.value.loadingText}\n                </Space>\n              )}\n            </div>\n          )}\n\n          {hasError.value && (\n            <div class={`${classPrefix.value}-image__error`}>\n              {renderTNodDefault('error', {\n                defaultNode: (\n                  <Space direction=\"vertical\" size={8} align=\"center\">\n                    <icon-ri-file-close-line size=\"24px\" />\n                    {typeof props.error === 'string' ? props.error : globalConfig.value.errorText}\n                  </Space>\n                ),\n              })}\n            </div>\n          )}\n\n          {renderOverlay()}\n        </div>\n      );\n    };\n  },\n});\n"],"names":["name","props","onMounted","triggerHandleLoad","io","onUnmounted","divRef","watch","e","Object","enumerable","previewUrl","shouldShowOverlay","_createVNode","type","url","_resolveComponent"],"mappings":"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"}