UNPKG

tdesign-mobile-vue

Version:
214 lines (210 loc) 7.85 kB
/** * tdesign v1.7.0 * (c) 2024 TDesign Group * @license MIT */ import { _ as _slicedToArray } from '../_chunks/dep-cd74809c.mjs'; import { _ as _defineProperty } from '../_chunks/dep-219bb5a7.mjs'; import { defineComponent, createVNode, ref, computed, watchEffect } from 'vue'; import { useIntersectionObserver } from '@vueuse/core'; import { CloseIcon } from 'tdesign-icons-vue-next'; import { Loading } from '../loading/index.mjs'; import config from '../config.mjs'; import { useTNodeJSX } from '../hooks/tnode.mjs'; import { usePrefixClass } from '../hooks/useClass.mjs'; import props from './props.mjs'; import '../_chunks/dep-8d37dbf8.mjs'; import '../_chunks/dep-620d73f7.mjs'; import '../loading/loading.mjs'; import '../loading/icon/gradient.mjs'; import '../_common/js/loading/circle-adapter.mjs'; import '../_common/js/utils/set-style.mjs'; import '../_common/js/utils/helper.mjs'; import '../_chunks/dep-f0f403be.mjs'; import '../_chunks/dep-8ece47c6.mjs'; import '../_chunks/dep-6303c50c.mjs'; import '../_chunks/dep-8bf3054e.mjs'; import '../_chunks/dep-3d249f65.mjs'; import '../_chunks/dep-019e292f.mjs'; import '../_chunks/dep-32364550.mjs'; import '../_chunks/dep-9b2de386.mjs'; import '../_chunks/dep-74a5dff9.mjs'; import '../_chunks/dep-1bbfa76e.mjs'; import '../_chunks/dep-52fdc8e1.mjs'; import '../loading/icon/spinner.mjs'; import '../loading/props.mjs'; import '../shared/dom.mjs'; import '../_chunks/dep-91d696ea.mjs'; import '../_chunks/dep-e6c129ab.mjs'; import '../shared/index.mjs'; import '../shared/functions.mjs'; import '../shared/util.mjs'; import '../shared/component.mjs'; import '../shared/constants.mjs'; import '../shared/render.mjs'; import '../_chunks/dep-60cadef8.mjs'; import '../_chunks/dep-8140c29b.mjs'; import '../_chunks/dep-0d52e58f.mjs'; import '../_chunks/dep-a836a38c.mjs'; import '../_chunks/dep-0ea7bbde.mjs'; import '../_chunks/dep-b437ef0b.mjs'; import '../shared/render-tnode.mjs'; import '../shared/useToggle/index.mjs'; import '../shared/useCountDown/index.mjs'; import '../_chunks/dep-80e4de18.mjs'; import '../shared/useCountDown/utils.mjs'; import '../shared/useDefault/index.mjs'; import '../shared/useChildSlots/index.mjs'; import '../shared/useVModel/index.mjs'; import '../_chunks/dep-6917b9bc.mjs'; import '../shared/useTouch/index.mjs'; import '../shared/useScrollParent/index.mjs'; import '../shared/useExpose/index.mjs'; import '../shared/useTest/index.mjs'; import '../shared/useClickAway/index.mjs'; import '../shared/useGesture/index.mjs'; import '@use-gesture/vanilla'; import '../shared/hover.mjs'; import './style/css.mjs'; import '../loading/type.mjs'; import '../loading/plugin.mjs'; import '../_chunks/dep-ac139980.mjs'; import '../_chunks/dep-d2161895.mjs'; import '../_chunks/dep-89951f45.mjs'; import '../_chunks/dep-08bc7a4c.mjs'; import '../_chunks/dep-6bc862af.mjs'; import '../_chunks/dep-4931819d.mjs'; import '../_chunks/dep-10f4d030.mjs'; import '../_chunks/dep-8ee6f5cd.mjs'; import '../_chunks/dep-e57d46f3.mjs'; import '../_chunks/dep-4f44985d.mjs'; import '../_chunks/dep-b84be35c.mjs'; import '../_chunks/dep-933f3a85.mjs'; import '../_chunks/dep-154c1925.mjs'; import '../_chunks/dep-ba131d9c.mjs'; import '../_chunks/dep-007f294e.mjs'; import '../_common/js/global-config/mobile/default-config.mjs'; import '../_common/js/global-config/mobile/locale/zh_CN.mjs'; import '../_chunks/dep-161f0c44.mjs'; import '../_chunks/dep-5fd0eaa4.mjs'; import '../_chunks/dep-3c59bf72.mjs'; import '../hooks/render-tnode.mjs'; import '../_chunks/dep-40507aac.mjs'; import '../_chunks/dep-2bce42ea.mjs'; import '../_chunks/dep-b9b8ead5.mjs'; import '../_chunks/dep-6c53a3e4.mjs'; import '../config-provider/type.mjs'; var prefix = config.prefix; var _Image = defineComponent({ name: "".concat(prefix, "-image"), props: props, setup: function setup(props2, context) { var imageClass = usePrefixClass("image"); var renderTNodeJSX = useTNodeJSX(); var closeIcon = createVNode(CloseIcon, { "size": "22px" }, null); var LoadingIcon = createVNode(Loading, { "theme": "dots", "inheritColor": true }, null); var isLoading = ref(true); var isError = ref(false); var imageStyles = computed(function () { return { objectFit: props2.fit, objectPosition: props2.position }; }); var imageClasses = computed(function () { return _defineProperty(_defineProperty({}, "".concat(imageClass.value), true), "".concat(imageClass.value, "--").concat(props2.shape), true); }); var imageDOM = ref(); var realSrc = ref(""); watchEffect(function () { realSrc.value = props2.lazy ? "" : props2.src; }); var _useIntersectionObser = useIntersectionObserver(imageDOM, function (_ref2, observerElement) { var _ref3 = _slicedToArray(_ref2, 1), isIntersecting = _ref3[0].isIntersecting; if (isIntersecting && props2.lazy) { stop(); realSrc.value = props2.src; } }), stop = _useIntersectionObser.stop; var handleImgLoadCompleted = function handleImgLoadCompleted(e) { var _props2$onLoad; (_props2$onLoad = props2.onLoad) === null || _props2$onLoad === void 0 || _props2$onLoad.call(props2, { e: e }); isLoading.value = false; }; var handleImgLoadError = function handleImgLoadError(e) { var _props2$onError; if (realSrc.value === "") { return; } (_props2$onError = props2.onError) === null || _props2$onError === void 0 || _props2$onError.call(props2, { e: e }); isLoading.value = false; isError.value = true; if (props2.fallback) { realSrc.value = props2.fallback; isError.value = false; } }; var maskContent = computed(function () { var statusContent = function statusContent() { var _context$slots, _context$slots2, _context$slots3, _context$slots4; if ((_context$slots = context.slots) !== null && _context$slots !== void 0 && _context$slots.loading && isLoading.value) { return renderTNodeJSX("loading"); } if (!((_context$slots2 = context.slots) !== null && _context$slots2 !== void 0 && _context$slots2.loading) && isLoading.value) { return LoadingIcon; } if ((_context$slots3 = context.slots) !== null && _context$slots3 !== void 0 && _context$slots3.error && isError.value) { return renderTNodeJSX("error"); } if (!((_context$slots4 = context.slots) !== null && _context$slots4 !== void 0 && _context$slots4.error) && isError.value) { return closeIcon; } return false; }; var node = function node() { if (isLoading.value || isError.value) { if (props2.lazy && realSrc.value === "") { return; } return createVNode("div", { "class": "".concat(imageClass.value, "__mask") }, [statusContent()]); } }; return node(); }); return function () { return createVNode("div", { "class": imageClasses.value }, [maskContent.value, createVNode("picture", null, [props2.srcset && Object.entries(props2.srcset).map(function (item, index) { return createVNode("source", { "key": index, "type": item[0], "srcset": item[1] }, null); }), createVNode("img", { "ref": imageDOM, "class": "".concat(imageClass.value, "__img"), "style": imageStyles.value, "src": realSrc.value, "alt": props2.alt, "referrerpolicy": props2.referrerpolicy, "onLoad": handleImgLoadCompleted, "onError": handleImgLoadError }, null)])]); }; } }); export { _Image as default }; //# sourceMappingURL=image.mjs.map