@windwalker-io/unicorn-next 0.1.17 → 0.1.19

package/dist/chunks/unicorn.js

@@ -432,16 +432,16 @@ _AlertAdapter.confirmText = () => "OK";
 _AlertAdapter.cancelText = () => "Cancel";
 _AlertAdapter.deleteText = () => "Delete";
 let AlertAdapter = _AlertAdapter;
-async function simpleAlert(title, text = "", icon = "info", extra) {
+async function simpleAlert(title, text = "", icon, extra) {
   return AlertAdapter.alert(title, text, icon, extra);
 }
-async function simpleConfirm(title, text = "", icon = "info", extra) {
+async function simpleConfirm(title, text = "", icon, extra) {
   return AlertAdapter.confirm(title, text, icon, extra);
 }
-async function deleteConfirm(title, text = "", icon = "info", extra) {
+async function deleteConfirm(title, text = "", icon, extra) {
   return AlertAdapter.deleteConfirm(title, text, icon, extra);
 }
-async function simpleNotify(title, text = "", type = "info", extra) {
+async function simpleNotify(title, text = "", type, extra) {
   return AlertAdapter.notify(title, text, type, extra);
 }
 async function clearNotifies() {
@@ -1179,6 +1179,7 @@ const useBs5ButtonRadio = async (selector, options = {}) => {
   const bs5 = await useUIBootstrap5();
   return bs5.buttonRadio(selector, options);
 };
+let currentOpenedModals = {};
 const defaultOptions = {
   buttons: [
     "OK"
@@ -1196,7 +1197,7 @@ async function useBsModalAlert(id, options) {
   }
   if (!modalElement) {
     modalElement = html(`<div id="${id}" class="uni-modal-alert modal fade" tabindex="-1" role="dialog">
-  <div class="modal-dialog" role="document">
+  <div class="modal-dialog modal-dialog-centered" role="document">
     <div class="modal-content">
       <div class="modal-body text-center p-4"></div>
       <div class="modal-footer"></div>
@@ -1205,9 +1206,15 @@ async function useBsModalAlert(id, options) {
 </div>`);
     document.body.appendChild(modalElement);
   }
-  const modal = Modal.getOrCreateInstance(modalElement, options);
-  return {
-    show: (title, text, icon, options2) => {
+  const bsModal = Modal.getOrCreateInstance(modalElement, options);
+  modalElement.addEventListener("show.bs.modal", () => {
+    currentOpenedModals[modalElement.id] = instance;
+  });
+  modalElement.addEventListener("hidden.bs.modal", () => {
+    delete currentOpenedModals[modalElement.id];
+  });
+  const instance = {
+    show: async (title, text, icon, options2) => {
       if (typeof title === "string") {
         options2 = options2 || {};
         options2.title = title;
@@ -1216,27 +1223,51 @@ async function useBsModalAlert(id, options) {
       } else {
         options2 = title;
       }
+      await closeCurrentOpened(modalElement);
       return new Promise((resolve) => {
         prepareModalElement(modalElement, resolve, options2);
-        modal.show(options2?.relatedTarget);
+        bsModal.show(options2?.relatedTarget);
       });
     },
     hide: () => {
-      modal.hide();
+      bsModal.hide();
     },
     dispose: () => {
-      modal.dispose();
+      bsModal.dispose();
     },
     toggle: (relatedTarget) => {
-      modal.toggle(relatedTarget);
+      bsModal.toggle(relatedTarget);
     },
     destroy: () => {
-      modal.dispose();
+      bsModal.dispose();
       modalElement.remove();
     },
-    instance: modal,
-    el: modalElement
+    instance: bsModal,
+    el: modalElement,
+    on: (event, handler) => {
+      modalElement.addEventListener(event, handler);
+      return () => {
+        modalElement.removeEventListener(event, handler);
+      };
+    },
+    off: (event, handler) => {
+      modalElement.removeEventListener(event, handler);
+    }
   };
+  return instance;
+}
+async function closeCurrentOpened(modalElement) {
+  return new Promise((resolve) => {
+    let currentOpenedModal = currentOpenedModals[modalElement.id];
+    if (!currentOpenedModal) {
+      resolve();
+      return;
+    }
+    currentOpenedModal.el.addEventListener("hidden.bs.modal", () => {
+      resolve();
+    }, { once: true });
+    currentOpenedModal.hide();
+  });
 }
 async function prepareModalElement(modalElement, handler, options) {
   options = Object.assign({}, defaultOptions, options || {});
@@ -1255,6 +1286,7 @@ async function prepareModalElement(modalElement, handler, options) {
       </div>`;
     }
     header = await anyToElement(header);
+    modalElement.querySelector(".modal-header")?.remove();
     modalElement.querySelector(".modal-content").insertAdjacentElement("afterbegin", header);
   }
   if (content) {
@@ -1266,7 +1298,7 @@ async function prepareModalElement(modalElement, handler, options) {
     let icon = options.icon;
     if (icon) {
       if (typeof icon === "string") {
-        icon = `<div class="uni-modal-alert__icon text-center mb-4"><span class="${icon}" style="font-size: 48px;"></span></div>`;
+        icon = `<div class="uni-modal-alert__icon text-center mb-3"><span class="${icon}" style="font-size: 64px;"></span></div>`;
       }
       icon = await anyToElement(icon);
       modalElement.querySelector(".modal-body").appendChild(icon);
@@ -1294,6 +1326,9 @@ async function prepareModalElement(modalElement, handler, options) {
   if (options.size) {
     modalElement.querySelector(".modal-dialog").classList.add(`modal-${options.size}`);
   }
+  if (options.configure) {
+    modalElement = options.configure(modalElement) ?? modalElement;
+  }
   return modalElement;
 }
 async function anyToElement(content) {
@@ -1407,20 +1442,19 @@ function useFormAsync(ele, options = {}) {
   const proxy = new Proxy({}, {
     get(target, prop) {
       return (...args) => {
+        if (prop === "then" || prop === "catch") {
+          return promise[prop].apply(promise, args);
+        }
         return promise.then((form) => {
-          const func = form[prop];
-          if (typeof func === "function") {
-            return func.apply(form, args);
+          const p = form[prop];
+          if (typeof p === "function") {
+            return p.apply(form, args);
           }
-          throw new Error(`Method ${String(prop)} does not exist on form.`);
+          return p;
         });
       };
     }
   });
-  Object.assign(proxy, {
-    then: promise.then.bind(promise),
-    catch: promise.catch.bind(promise)
-  });
   return proxy;
 }
 function useForm(ele, options = {}) {
@@ -1934,7 +1968,7 @@ function useDisableOnSubmit(formSelector = "#admin-form", buttonSelector = "", o
   ].join(",");
   const event = options.event || "submit";
   const spinnerClass = options.spinnerClass || "spinner-border spinner-border-sm";
-  const loadingClass = options.loadingCass || "is-loading";
+  const loadingClass = options.loadingCass || "is-uni-loading";
   selectAll(buttonSelector, (button) => {
     button.addEventListener("click", (e) => {
       button.dataset.clicked = "1";
@@ -1954,17 +1988,23 @@ function useDisableOnSubmit(formSelector = "#admin-form", buttonSelector = "", o
         button.setAttribute("disabled", "disabled");
         button.classList.add("disabled");
         if (button.dataset.clicked) {
-          let icon = button.querySelector(iconSelector);
-          button.classList.add(loadingClass);
-          if (icon) {
-            const i = html("<i></i>");
-            icon.parentNode.replaceChild(i, icon);
-            i.setAttribute("class", spinnerClass);
-          }
+          makeButtonLoading(button);
         }
       });
+      if (e instanceof SubmitEvent && e.submitter) {
+        makeButtonLoading(e.submitter);
+      }
     }, 0);
   });
+  function makeButtonLoading(button) {
+    let icon = button.querySelector(iconSelector);
+    button.classList.add(loadingClass);
+    if (icon) {
+      const i = html("<i></i>");
+      icon.parentNode?.replaceChild(i, icon);
+      i.setAttribute("class", spinnerClass);
+    }
+  }
 }
 function useDisableIfStackNotEmpty(buttonSelector = "[data-task=save]", stackName = "uploading") {
   const stack2 = useStack(stackName);