tdesign-mobile-vue
Version:
tdesign-mobile-vue
188 lines (184 loc) • 6.73 kB
JavaScript
/**
* tdesign v1.7.0
* (c) 2024 TDesign Group
* @license MIT
*/
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import { defineComponent, ref, computed, watch, onMounted, setBlockTracking, createVNode, Teleport } from 'vue';
import TGradientIcon from './icon/gradient.js';
import SpinnerIcon from './icon/spinner.js';
import config from '../config.js';
import props from './props.js';
import { useTNodeJSX, useContent } from '../hooks/tnode.js';
import { usePrefixClass } from '../hooks/useClass.js';
import { getAttach, addClass, removeClass } from '../shared/dom.js';
import '../_common/js/loading/circle-adapter.js';
import '../_common/js/utils/set-style.js';
import '../_common/js/utils/helper.js';
import '@babel/runtime/helpers/toConsumableArray';
import '@babel/runtime/helpers/objectWithoutProperties';
import '@babel/runtime/helpers/slicedToArray';
import 'lodash/isString';
import 'lodash/isNull';
import 'lodash/isUndefined';
import 'lodash/isNumber';
import 'lodash/isArray';
import 'lodash/isFunction';
import 'lodash/camelCase';
import 'lodash/kebabCase';
import '../hooks/render-tnode.js';
import 'lodash/isEmpty';
import 'lodash/isObject';
import '../config-provider/useConfig.js';
import 'lodash/cloneDeep';
import '../config-provider/context.js';
import 'lodash/mergeWith';
import 'lodash/merge';
import '../_common/js/global-config/mobile/default-config.js';
import '../_common/js/global-config/mobile/locale/zh_CN.js';
import '../_chunks/dep-d5364bc4.js';
import '@babel/runtime/helpers/typeof';
import '../_chunks/dep-eb734424.js';
import 'dayjs';
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.js.map