ivue-material-plus
Version:
A high quality UI components Library with Vue.js
145 lines (142 loc) • 4.11 kB
JavaScript
import { ref, reactive, h, Transition, withCtx, withDirectives, createVNode, vShow, createApp, toRefs } from 'vue';
import { removeClass } from '../../utils/assist.mjs';
function createLoadingComponent(options) {
let afterLeaveTimer;
const afterLeaveFlag = ref(false);
const data = reactive({
...options,
originalPosition: "",
originalOverflow: "",
visible: false
});
function setText(text) {
data.text = text;
}
function destroySelf() {
const target = data.parent;
if (!target.LoadingAddClassList) {
let loadingNumber = target.getAttribute("loading-number");
loadingNumber = Number.parseInt(loadingNumber) - 1;
if (!loadingNumber) {
removeClass(target, "ivue-loading-parent--relative");
target.removeAttribute("loading-number");
} else {
target.setAttribute("loading-number", loadingNumber.toString());
}
removeClass(target, "ivue-loading-parent--hidden");
}
removeLoadingChild();
loadingInstance.unmount();
}
function removeLoadingChild() {
var _a, _b;
(_b = (_a = vm.$el) == null ? void 0 : _a.parentNode) == null ? void 0 : _b.removeChild(vm.$el);
}
function close() {
var _a;
if (options.beforeClose && !options.beforeClose()) {
return;
}
afterLeaveFlag.value = true;
clearTimeout(afterLeaveTimer);
afterLeaveTimer = window.setTimeout(handleAfterLeave, 400);
data.visible = false;
(_a = options.close) == null ? void 0 : _a.call(options);
}
function handleAfterLeave() {
if (!afterLeaveFlag.value) {
return;
}
afterLeaveFlag.value = false;
const target = data.parent;
target.LoadingAddClassList = void 0;
destroySelf();
}
const LoadingComponent = {
name: "ivue-loading",
setup() {
return () => {
const spinner = h(
"svg",
{
class: "circular",
viewBox: "25 25 50 50"
},
[
h("circle", {
class: "path",
cx: "50",
cy: "50",
r: "20",
fill: "none"
})
]
);
const noSpinner = h("i", { class: data.iconClass }, data.iconText);
const spinnerText = h("span", { class: "ivue-loading-text" }, [
data.text
]);
return h(
Transition,
{
name: "ivue-loading-fade",
onAfterLeave: handleAfterLeave
},
{
default: withCtx(() => [
withDirectives(
createVNode(
"div",
{
style: {
backgroundColor: data.background || ""
},
class: [
"ivue-loading-mask",
data.customClass,
data.fullscreen ? "is-fullscreen" : ""
]
},
[
h(
"div",
{
class: "ivue-loading-spinner"
},
h(
"div",
{
class: "ivue-loading-spinner--content"
},
[
data.loadingSpinner ? data.loadingSpinner() : !data.iconClass ? spinner : noSpinner,
data.text ? spinnerText : null
]
)
)
]
),
[[vShow, data.visible]]
)
])
}
);
};
}
};
const loadingInstance = createApp(LoadingComponent);
const vm = loadingInstance.mount(document.createElement("div"));
return {
...toRefs(data),
setText,
close,
removeLoadingChild,
handleAfterLeave,
vm,
get $el() {
return vm.$el;
}
};
}
export { createLoadingComponent };
//# sourceMappingURL=createLoadingComponent.mjs.map