vexip-ui/lib/components/image/image.vue2.cjs.map

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

{"version":3,"file":"image.vue2.cjs","sources":["../../../components/image/image.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ImageViewer } from '@/components/image-viewer'\nimport { Renderer } from '@/components/renderer'\nimport { Skeleton } from '@/components/skeleton'\n\nimport { computed, inject, onBeforeUnmount, reactive, ref, watch, watchEffect } from 'vue'\n\nimport { emitEvent, useLocale, useNameHelper, useProps } from '@vexip-ui/config'\nimport { useIntersection } from '@vexip-ui/hooks'\nimport { isClient, supportImgLoading, toCssSize } from '@vexip-ui/utils'\nimport { imageProps } from './props'\nimport { GROUP_STATE, objectFitValues } from './symbol'\n\nimport type { ImageSlots, ImageState } from './symbol'\n\nconst useImgLoading = supportImgLoading()\n\ndefineOptions({ name: 'Image' })\n\nconst _props = defineProps(imageProps)\nconst props = useProps('image', _props, {\n  src: {\n    default: '',\n    static: true,\n  },\n  fallbackSrc: '',\n  alt: '',\n  fit: {\n    default: 'cover',\n    validator: value => objectFitValues.includes(value),\n  },\n  width: '',\n  height: '',\n  imgAttrs: () => ({}),\n  lazy: false,\n  root: {\n    default: null,\n    static: true,\n  },\n  rootMargin: '',\n  preview: false,\n  skeleton: false,\n  placeholder: '',\n  errorTip: '',\n  radius: 0,\n  border: false,\n  previewSrc: '',\n  viewerTransfer: null,\n  viewerProps: () => ({}),\n  slots: () => ({}),\n})\n\nconst slots = defineSlots<ImageSlots>()\n\nconst groupState = inject(GROUP_STATE, null)\n\nconst nh = useNameHelper('image')\nconst locale = useLocale('image')\n\nconst showImg = ref(useImgLoading)\nconst loading = ref(showImg.value)\nconst currentSrc = ref('')\nconst loadFail = ref(false)\nconst fallbackFail = ref(false)\nconst viewerActive = ref(false)\nconst hidden = ref(false)\n\nconst wrapper = ref<HTMLElement>()\n\nconst showError = computed(() => {\n  return loadFail.value && (!props.fallbackSrc || fallbackFail.value)\n})\nconst hasPreview = computed(() => !groupState && props.preview)\nconst className = computed(() => {\n  return [\n    nh.b(),\n    nh.bs('vars'),\n    {\n      [nh.bm('inherit')]: props.inherit,\n      [nh.bm('border')]: props.border,\n      [nh.bm('loading')]: loading.value,\n      [nh.bm('error')]: showError.value,\n      [nh.bm('preview')]: groupState?.preview || hasPreview.value,\n    },\n  ]\n})\nconst style = computed(() => {\n  const style: Record<string, string> = {\n    width: toCssSize(props.width),\n    height: toCssSize(props.height),\n    [nh.cv('fit')]: props.fit,\n    [nh.cv('radius')]: props.radius ? `${props.radius}px` : '',\n  }\n\n  if (props.border && typeof props.border === 'string') {\n    style[nh.cv('b-color')] = props.border\n  }\n\n  return style\n})\nconst imageSrc = computed(() => props.src || (props.imgAttrs?.src as string))\nconst imgLoading = computed(() => {\n  return hidden.value || (useImgLoading && props.lazy) ? 'lazy' : undefined\n})\nconst skeletonProps = computed(() => {\n  return typeof props.skeleton === 'object'\n    ? Object.assign({ activated: true }, props.skeleton)\n    : { activated: true }\n})\n\nwatch(imageSrc, value => {\n  loading.value = showImg.value\n  currentSrc.value = value\n  loadFail.value = false\n  fallbackFail.value = false\n})\nwatch(\n  () => props.fallbackSrc,\n  value => {\n    fallbackFail.value = false\n\n    if (loadFail.value) {\n      loading.value = showImg.value\n      currentSrc.value = value\n    }\n  },\n)\n\ncurrentSrc.value = imageSrc.value\n\nconst state: ImageState = reactive({\n  src: computed(() => props.previewSrc || currentSrc.value),\n  index: 0,\n  total: 0,\n})\n\nif (groupState) {\n  groupState.increaseItem(state)\n\n  const stopWatch = watchEffect(() => {\n    hidden.value = !groupState.showAll && state.index > 0\n  })\n\n  onBeforeUnmount(() => {\n    stopWatch()\n    groupState.decreaseItem(state)\n  })\n}\n\nif (!useImgLoading) {\n  let disconnect: (() => void) | undefined\n\n  const stopWatch = watchEffect(() => {\n    disconnect?.()\n    disconnect = undefined\n\n    if (!isClient) return\n\n    const root =\n      typeof props.root === 'string' ? document.querySelector(props.root) : (props.root as Element)\n\n    if (props.lazy) {\n      disconnect = useIntersection({\n        root: typeof root === 'object' ? root : document.documentElement,\n        rootMargin: props.rootMargin,\n        target: wrapper,\n        handler: () => {\n          disconnect?.()\n          disconnect = undefined\n          showImg.value = true\n          loading.value = true\n        },\n      }).disconnect\n    }\n  })\n\n  onBeforeUnmount(() => {\n    stopWatch()\n    disconnect?.()\n  })\n}\n\ndefineExpose({\n  loading,\n  fallbackFail,\n  viewerActive,\n  hidden,\n  wrapper,\n})\n\nfunction handleLoad(event: Event) {\n  loading.value = false\n\n  if (!props.fallbackSrc || currentSrc.value !== props.fallbackSrc) {\n    emitEvent(props.onLoad, event)\n  }\n}\n\nfunction handleError(event: Event) {\n  if (props.fallbackSrc) {\n    if (currentSrc.value === props.fallbackSrc) {\n      loading.value = false\n      fallbackFail.value = true\n\n      return\n    }\n\n    currentSrc.value = props.fallbackSrc\n  } else {\n    loading.value = false\n  }\n\n  loadFail.value = true\n  emitEvent(props.onError, event)\n}\n\nfunction handlePreview() {\n  if (!groupState) {\n    if (props.preview) {\n      viewerActive.value = true\n    }\n\n    emitEvent(props.onPreview, props.previewSrc || currentSrc.value)\n    return\n  }\n\n  groupState.handlePreview(state)\n}\n</script>\n\n<template>\n  <div\n    v-show=\"!hidden\"\n    ref=\"wrapper\"\n    :class=\"className\"\n    role=\"none\"\n    :style=\"style\"\n  >\n    <slot v-if=\"loading\" name=\"placeholder\">\n      <Renderer :renderer=\"props.slots.placeholder\">\n        <Skeleton\n          v-if=\"props.skeleton\"\n          v-bind=\"skeletonProps\"\n          :class=\"nh.be('skeleton')\"\n          image\n        ></Skeleton>\n        <template v-else>\n          <span :class=\"nh.be('placeholder')\">\n            {{ props.placeholder || locale.placeholder }}\n          </span>\n        </template>\n      </Renderer>\n    </slot>\n    <slot v-else-if=\"showError\" name=\"error\">\n      <Renderer :renderer=\"props.slots.error\">\n        <span :class=\"nh.be('error')\">\n          {{ props.errorTip || props.alt || locale.error }}\n        </span>\n      </Renderer>\n    </slot>\n    <img\n      v-if=\"showImg && !showError\"\n      v-bind=\"props.imgAttrs\"\n      :class=\"nh.be('img')\"\n      :src=\"currentSrc\"\n      :alt=\"props.alt\"\n      :width=\"props.width || undefined\"\n      :height=\"props.height || undefined\"\n      :loading=\"imgLoading\"\n      :aria-label=\"props.alt\"\n      @load=\"handleLoad\"\n      @error=\"handleError\"\n      @click=\"handlePreview\"\n    />\n    <ImageViewer\n      v-if=\"hasPreview\"\n      v-bind=\"viewerProps\"\n      v-model:active=\"viewerActive\"\n      :src-list=\"props.previewSrc || currentSrc\"\n      :transfer=\"props.viewerTransfer\"\n    >\n      <template v-if=\"slots.preview || props.slots.preview\" #default=\"{ src }\">\n        <slot name=\"preview\" :src=\"src\">\n          <Renderer :renderer=\"props.slots.preview\" :data=\"{ src }\"></Renderer>\n        </slot>\n      </template>\n    </ImageViewer>\n  </div>\n</template>\n"],"names":["useImgLoading","supportImgLoading","_props","__props","props","useProps","value","objectFitValues","slots","_useSlots","groupState","inject","GROUP_STATE","nh","useNameHelper","locale","useLocale","showImg","ref","loading","currentSrc","loadFail","fallbackFail","viewerActive","hidden","wrapper","showError","computed","hasPreview","className","style","toCssSize","imageSrc","_a","imgLoading","skeletonProps","watch","state","reactive","stopWatch","watchEffect","onBeforeUnmount","disconnect","isClient","root","useIntersection","__expose","handleLoad","event","emitEvent","handleError","handlePreview","_createElementBlock","_renderSlot","_ctx","_createVNode","_unref","Renderer","_createBlock","Skeleton","_mergeProps","_normalizeClass","_toDisplayString","_createElementVNode","_openBlock","ImageViewer","viewerProps","$event","_withCtx","src"],"mappings":"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"}