tdesign-mobile-vue
Version:
tdesign-mobile-vue
180 lines (176 loc) • 6.56 kB
JavaScript
/**
* tdesign v1.9.3
* (c) 2025 TDesign Group
* @license MIT
*/
import { _ as _defineProperty } from '../_chunks/dep-900db0e1.mjs';
import { defineComponent, ref, computed, watch, onMounted, setBlockTracking, createVNode, Teleport } from 'vue';
import TGradientIcon from './icon/gradient.mjs';
import SpinnerIcon from './icon/spinner.mjs';
import config from '../config.mjs';
import props from './props.mjs';
import { useTNodeJSX, useContent } from '../hooks/tnode.mjs';
import { usePrefixClass } from '../hooks/useClass.mjs';
import { getAttach, addClass, removeClass } from '../shared/dom.mjs';
import '../_chunks/dep-4915223e.mjs';
import '../_common/js/loading/circle-adapter.mjs';
import '../_common/js/utils/setStyle.mjs';
import '../_common/js/utils/helper.mjs';
import '../_chunks/dep-fb4113ef.mjs';
import '../_chunks/dep-a953013f.mjs';
import '../_chunks/dep-da32ae58.mjs';
import '../_chunks/dep-26b97ced.mjs';
import 'lodash-es';
import '../hooks/render-tnode.mjs';
import '../_common/js/utils/general.mjs';
import '../config-provider/useConfig.mjs';
import '../config-provider/context.mjs';
import '../_common/js/global-config/mobile/default-config.mjs';
import '../_common/js/global-config/mobile/locale/zh_CN.mjs';
import '../_chunks/dep-bca0f578.mjs';
import '../_chunks/dep-6b2b02fd.mjs';
import '../_chunks/dep-c6f44a15.mjs';
import '../_chunks/dep-c984d53e.mjs';
import '../config-provider/type.mjs';
var prefix = config.prefix;
var _Loading = defineComponent({
name: "".concat(prefix, "-loading"),
props: props,
setup: function setup(props2) {
var renderTNodeJSX = useTNodeJSX();
var renderTNodeContent = useContent();
var loadingClass = usePrefixClass("loading");
var delayShowLoading = ref(false);
var teleportElement = ref();
var countDelay = function countDelay() {
delayShowLoading.value = false;
var timer = setTimeout(function () {
delayShowLoading.value = true;
clearTimeout(timer);
}, props2.delay);
};
var realLoading = computed(function () {
return (!props2.delay || delayShowLoading.value) && props2.loading;
});
watch(function () {
return props2.loading;
}, function (value) {
if (value) {
props2.delay && countDelay();
}
}, {
immediate: true
});
var rootClass = computed(function () {
return [loadingClass.value, _defineProperty({}, "".concat(loadingClass.value, "--vertical"), props2.layout === "vertical"), _defineProperty({}, "".concat(loadingClass.value, "--fullscreen"), props2.fullscreen), _defineProperty({}, "".concat(loadingClass.value, "--full"), !props2.fullscreen && !!props2.attach)];
});
var textClass = computed(function () {
return ["".concat(loadingClass.value, "__text"), _defineProperty({}, "".concat(loadingClass.value, "__text--only"), !props2.indicator)];
});
var rootStyle = computed(function () {
var style = [];
if (props2.inheritColor) {
style.push("color: inherit");
}
if (props2.size) {
style.push("font-size: ".concat(props2.size, ";"));
}
return style.join(";");
});
var defaultIndicator = {
circular: TGradientIcon,
spinner: SpinnerIcon
};
onMounted(function () {
if (props2.attach) {
var attach = getAttach(props2.attach);
if (!attach) {
console.error("attach is not exist");
} else {
teleportElement.value = attach;
}
}
if (props2.fullscreen) {
teleportElement.value = getAttach("body");
}
});
var dotsLoading = computed(function () {
setBlockTracking(-1);
var node = createVNode("div", {
"class": "".concat(loadingClass.value, "__dots"),
"style": {
animationPlayState: props2.pause ? "paused" : "",
animationDirection: props2.reverse ? "reverse" : "",
animationDuration: "".concat(props2.duration, "ms"),
width: props2.size,
height: props2.size
}
}, [Array.from({
length: 3
}).map(function (val, i) {
return createVNode("div", {
"class": "".concat(loadingClass.value, "__dot"),
"style": props2.duration ? "animation-duration: ".concat(props2.duration / 1e3, "s; animation-delay: ").concat(props2.duration * i / 3e3, "s") : ""
}, null);
})]);
setBlockTracking(1);
return node;
});
var defaultLoading = computed(function () {
setBlockTracking(-1);
var TIndicator = defaultIndicator[props2.theme || "circular"];
var node = createVNode(TIndicator, {
"style": {
animationPlayState: props2.pause ? "paused" : "",
animationDirection: props2.reverse ? "reverse" : "",
animationDuration: "".concat(props2.duration, "ms"),
width: props2.size,
height: props2.size
}
}, null);
setBlockTracking(1);
return node;
});
watch(function () {
return props2.loading;
}, function (isLoading) {
if (isLoading && props2.fullscreen) {
countDelay();
addClass(document.body, "".concat(loadingClass.value, "--lock"));
} else {
removeClass(document.body, "".concat(loadingClass.value, "--lock"));
}
});
return function () {
var indicator = renderTNodeJSX("indicator", {
defaultNode: props2.theme === "dots" ? dotsLoading.value : defaultLoading.value
});
var text = renderTNodeJSX("text");
var TNodeContent = renderTNodeContent("default", "content");
if (props2.fullscreen || props2.attach) {
if (!props2.loading) return null;
return createVNode(Teleport, {
"disabled": !props2.attach || !teleportElement.value,
"to": teleportElement.value
}, {
default: function _default() {
return [createVNode("div", {
"class": rootClass.value,
"style": rootStyle.value
}, [realLoading.value && indicator, text && realLoading.value && createVNode("span", {
"class": textClass.value
}, [text]), TNodeContent])];
}
});
}
return createVNode("div", {
"class": rootClass.value,
"style": rootStyle.value
}, [realLoading.value && indicator, text && realLoading.value && createVNode("span", {
"class": textClass.value
}, [text]), TNodeContent]);
};
}
});
export { _Loading as default };
//# sourceMappingURL=loading.mjs.map