f5fed6feae98c1ad5ba9a11b0e239e0232a62cb9bd329ba73048b0d6c9451c2331d183be395013a8203cb1ce9b762b35d25b2007fd51e9bd843c763a1b9d98 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  1. import { ref, reactive, defineComponent, h, Transition, withCtx, withDirectives, createVNode, vShow, createApp, toRefs } from 'vue';
  2. import { useGlobalComponentSettings } from '../../config-provider/src/hooks/use-global-config.mjs';
  3. import { removeClass } from '../../../utils/dom/style.mjs';
  4. function createLoadingComponent(options, appContext) {
  5. let afterLeaveTimer;
  6. const afterLeaveFlag = ref(false);
  7. const data = reactive({
  8. ...options,
  9. originalPosition: "",
  10. originalOverflow: "",
  11. visible: false
  12. });
  13. function setText(text) {
  14. data.text = text;
  15. }
  16. function destroySelf() {
  17. const target = data.parent;
  18. const ns = vm.ns;
  19. if (!target.vLoadingAddClassList) {
  20. let loadingNumber = target.getAttribute("loading-number");
  21. loadingNumber = Number.parseInt(loadingNumber) - 1;
  22. if (!loadingNumber) {
  23. removeClass(target, ns.bm("parent", "relative"));
  24. target.removeAttribute("loading-number");
  25. } else {
  26. target.setAttribute("loading-number", loadingNumber.toString());
  27. }
  28. removeClass(target, ns.bm("parent", "hidden"));
  29. }
  30. removeElLoadingChild();
  31. loadingInstance.unmount();
  32. }
  33. function removeElLoadingChild() {
  34. var _a, _b;
  35. (_b = (_a = vm.$el) == null ? void 0 : _a.parentNode) == null ? void 0 : _b.removeChild(vm.$el);
  36. }
  37. function close() {
  38. var _a;
  39. if (options.beforeClose && !options.beforeClose())
  40. return;
  41. afterLeaveFlag.value = true;
  42. clearTimeout(afterLeaveTimer);
  43. afterLeaveTimer = setTimeout(handleAfterLeave, 400);
  44. data.visible = false;
  45. (_a = options.closed) == null ? void 0 : _a.call(options);
  46. }
  47. function handleAfterLeave() {
  48. if (!afterLeaveFlag.value)
  49. return;
  50. const target = data.parent;
  51. afterLeaveFlag.value = false;
  52. target.vLoadingAddClassList = void 0;
  53. destroySelf();
  54. }
  55. const elLoadingComponent = defineComponent({
  56. name: "ElLoading",
  57. setup(_, { expose }) {
  58. const { ns, zIndex } = useGlobalComponentSettings("loading");
  59. expose({
  60. ns,
  61. zIndex
  62. });
  63. return () => {
  64. const svg = data.spinner || data.svg;
  65. const spinner = h("svg", {
  66. class: "circular",
  67. viewBox: data.svgViewBox ? data.svgViewBox : "0 0 50 50",
  68. ...svg ? { innerHTML: svg } : {}
  69. }, [
  70. h("circle", {
  71. class: "path",
  72. cx: "25",
  73. cy: "25",
  74. r: "20",
  75. fill: "none"
  76. })
  77. ]);
  78. const spinnerText = data.text ? h("p", { class: ns.b("text") }, [data.text]) : void 0;
  79. return h(Transition, {
  80. name: ns.b("fade"),
  81. onAfterLeave: handleAfterLeave
  82. }, {
  83. default: withCtx(() => [
  84. withDirectives(createVNode("div", {
  85. style: {
  86. backgroundColor: data.background || ""
  87. },
  88. class: [
  89. ns.b("mask"),
  90. data.customClass,
  91. data.fullscreen ? "is-fullscreen" : ""
  92. ]
  93. }, [
  94. h("div", {
  95. class: ns.b("spinner")
  96. }, [spinner, spinnerText])
  97. ]), [[vShow, data.visible]])
  98. ])
  99. });
  100. };
  101. }
  102. });
  103. const loadingInstance = createApp(elLoadingComponent);
  104. Object.assign(loadingInstance._context, appContext != null ? appContext : {});
  105. const vm = loadingInstance.mount(document.createElement("div"));
  106. return {
  107. ...toRefs(data),
  108. setText,
  109. removeElLoadingChild,
  110. close,
  111. handleAfterLeave,
  112. vm,
  113. get $el() {
  114. return vm.$el;
  115. }
  116. };
  117. }
  118. export { createLoadingComponent };
  119. //# sourceMappingURL=loading.mjs.map