UNPKG

tdesign-mobile-vue

Version:
176 lines (168 loc) 6.54 kB
/** * tdesign v1.7.0 * (c) 2024 TDesign Group * @license MIT */ 'use strict'; Object.defineProperty(exports, '__esModule', { value: true }); var _slicedToArray = require('@babel/runtime/helpers/slicedToArray'); var _defineProperty = require('@babel/runtime/helpers/defineProperty'); var vue = require('vue'); var core = require('@vueuse/core'); var tdesignIconsVueNext = require('tdesign-icons-vue-next'); var loading_index = require('../loading/index.js'); var config = require('../config.js'); var hooks_tnode = require('../hooks/tnode.js'); var hooks_useClass = require('../hooks/useClass.js'); var image_props = require('./props.js'); require('../loading/loading.js'); require('../loading/icon/gradient.js'); require('../_common/js/loading/circle-adapter.js'); require('../_common/js/utils/set-style.js'); require('../_common/js/utils/helper.js'); require('@babel/runtime/helpers/toConsumableArray'); require('@babel/runtime/helpers/objectWithoutProperties'); require('lodash/isString'); require('lodash/isNull'); require('lodash/isUndefined'); require('lodash/isNumber'); require('lodash/isArray'); require('../loading/icon/spinner.js'); require('../loading/props.js'); require('../shared/dom.js'); require('lodash/isFunction'); require('../loading/plugin.js'); require('lodash/merge'); require('lodash/camelCase'); require('lodash/kebabCase'); require('../hooks/render-tnode.js'); require('lodash/isEmpty'); require('lodash/isObject'); require('../config-provider/useConfig.js'); require('lodash/cloneDeep'); require('../config-provider/context.js'); require('lodash/mergeWith'); require('../_common/js/global-config/mobile/default-config.js'); require('../_common/js/global-config/mobile/locale/zh_CN.js'); require('../_chunks/dep-8d930798.js'); require('@babel/runtime/helpers/typeof'); require('../_chunks/dep-a20a5149.js'); require('dayjs'); require('../shared/component.js'); function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; } var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray); var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty); var prefix = config["default"].prefix; var _Image = vue.defineComponent({ name: "".concat(prefix, "-image"), props: image_props["default"], setup: function setup(props2, context) { var imageClass = hooks_useClass.usePrefixClass("image"); var renderTNodeJSX = hooks_tnode.useTNodeJSX(); var closeIcon = vue.createVNode(tdesignIconsVueNext.CloseIcon, { "size": "22px" }, null); var LoadingIcon = vue.createVNode(loading_index.Loading, { "theme": "dots", "inheritColor": true }, null); var isLoading = vue.ref(true); var isError = vue.ref(false); var imageStyles = vue.computed(function () { return { objectFit: props2.fit, objectPosition: props2.position }; }); var imageClasses = vue.computed(function () { return _defineProperty__default["default"](_defineProperty__default["default"]({}, "".concat(imageClass.value), true), "".concat(imageClass.value, "--").concat(props2.shape), true); }); var imageDOM = vue.ref(); var realSrc = vue.ref(""); vue.watchEffect(function () { realSrc.value = props2.lazy ? "" : props2.src; }); var _useIntersectionObser = core.useIntersectionObserver(imageDOM, function (_ref2, observerElement) { var _ref3 = _slicedToArray__default["default"](_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 = vue.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 vue.createVNode("div", { "class": "".concat(imageClass.value, "__mask") }, [statusContent()]); } }; return node(); }); return function () { return vue.createVNode("div", { "class": imageClasses.value }, [maskContent.value, vue.createVNode("picture", null, [props2.srcset && Object.entries(props2.srcset).map(function (item, index) { return vue.createVNode("source", { "key": index, "type": item[0], "srcset": item[1] }, null); }), vue.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)])]); }; } }); exports["default"] = _Image; //# sourceMappingURL=image.js.map