@lanrenbang/basecoat-ultra 0.1.7 → 0.2.0

package/dist/js/input-otp.js

@@ -1,93 +1,83 @@
-const initOTP = (root = document) => {
-  const containers = root.querySelectorAll(".input-otp");
-  containers.forEach((container) => {
-    if (container.hasAttribute("data-initialized")) return;
-    const inputs = Array.from(container.querySelectorAll("input"));
-    inputs.forEach((input, index) => {
-      input.type = "text";
-      input.inputMode = "text";
-      input.setAttribute("maxlength", "1");
-      input.setAttribute("autocomplete", "one-time-code");
-      input.addEventListener("focus", () => {
-        input.select();
-      });
-      input.addEventListener("input", (e) => {
-        const val = e.target.value;
-        if (val === "") {
-          return;
+const initOTP = (container) => {
+  const inputs = Array.from(container.querySelectorAll("input"));
+  const getOTPValue = () => inputs.map((input) => input.value).join("");
+  const dispatchChange = () => {
+    container.dispatchEvent(new CustomEvent("change", {
+      bubbles: true,
+      detail: { value: getOTPValue() }
+    }));
+  };
+  inputs.forEach((input, index) => {
+    input.type = "text";
+    input.inputMode = "text";
+    input.setAttribute("maxlength", "1");
+    input.setAttribute("autocomplete", "one-time-code");
+    input.addEventListener("focus", () => {
+      input.select();
+    });
+    input.addEventListener("input", (e) => {
+      const val = e.target.value;
+      if (val === "") {
+        dispatchChange();
+        return;
+      }
+      if (val.length > 1) {
+        input.value = val.slice(-1);
+      }
+      dispatchChange();
+      if (input.value.length === 1 && index < inputs.length - 1) {
+        inputs[index + 1].focus();
+      }
+    });
+    input.addEventListener("keydown", (e) => {
+      if (e.key === "Backspace") {
+        e.preventDefault();
+        if (input.value !== "") {
+          input.value = "";
+          dispatchChange();
+        } else if (index > 0) {
+          inputs[index - 1].focus();
         }
-        if (val.length > 1) {
-          input.value = val.slice(-1);
+      } else if (e.key === "ArrowLeft") {
+        if (index > 0) {
+          e.preventDefault();
+          inputs[index - 1].focus();
         }
-        if (input.value.length === 1 && index < inputs.length - 1) {
+      } else if (e.key === "ArrowRight") {
+        if (index < inputs.length - 1) {
+          e.preventDefault();
           inputs[index + 1].focus();
         }
-      });
-      input.addEventListener("keydown", (e) => {
-        if (e.key === "Backspace") {
-          e.preventDefault();
-          if (input.value !== "") {
-            input.value = "";
-          } else if (index > 0) {
-            inputs[index - 1].focus();
-          }
-        } else if (e.key === "ArrowLeft") {
-          if (index > 0) {
-            e.preventDefault();
-            inputs[index - 1].focus();
-          }
-        } else if (e.key === "ArrowRight") {
-          if (index < inputs.length - 1) {
-            e.preventDefault();
-            inputs[index + 1].focus();
-          }
-        } else if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
-          if (input.value.length >= 1 && input.selectionStart === input.selectionEnd) {
-            input.value = "";
-          }
+      } else if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+        if (input.value.length >= 1 && input.selectionStart === input.selectionEnd) {
+          input.value = "";
         }
-      });
-      input.addEventListener("paste", (e) => {
-        e.preventDefault();
-        const pasteData = (e.clipboardData || window.clipboardData).getData("text");
-        const chars = pasteData.split("");
-        let currentIndex = index;
-        chars.forEach((char) => {
-          if (currentIndex < inputs.length) {
-            inputs[currentIndex].value = char;
-            currentIndex++;
-          }
-        });
+      }
+    });
+    input.addEventListener("paste", (e) => {
+      e.preventDefault();
+      const pasteData = (e.clipboardData || window.clipboardData).getData("text");
+      const chars = pasteData.split("");
+      let currentIndex = index;
+      chars.forEach((char) => {
         if (currentIndex < inputs.length) {
-          inputs[currentIndex].focus();
-        } else {
-          inputs[inputs.length - 1].focus();
+          inputs[currentIndex].value = char;
+          currentIndex++;
         }
       });
-    });
-    container.setAttribute("data-initialized", "true");
-  });
-};
-if (typeof window !== "undefined") {
-  const observer = new MutationObserver((mutations) => {
-    mutations.forEach((mutation) => {
-      if (mutation.type === "childList") {
-        mutation.addedNodes.forEach((node) => {
-          if (node.nodeType === 1) {
-            if (node.classList?.contains("input-otp")) {
-              initOTP(node.parentNode);
-            } else if (node.querySelector?.(".input-otp")) {
-              initOTP(node);
-            }
-          }
-        });
+      dispatchChange();
+      if (currentIndex < inputs.length) {
+        inputs[currentIndex].focus();
+      } else {
+        inputs[inputs.length - 1].focus();
       }
     });
   });
-  document.addEventListener("DOMContentLoaded", () => {
-    initOTP();
-    observer.observe(document.body, { childList: true, subtree: true });
-  });
+  container.dataset.inputOtpInitialized = true;
+  container.dispatchEvent(new CustomEvent("basecoat:initialized"));
+};
+if (window.basecoat) {
+  window.basecoat.register("input-otp", ".input-otp:not([data-input-otp-initialized])", initOTP);
 }
 export {
   initOTP

package/dist/js/input-otp.min.js

@@ -1,38 +1,33 @@
-const f = (c = document) => {
-  c.querySelectorAll(".input-otp").forEach((s) => {
-    if (s.hasAttribute("data-initialized")) return;
-    const e = Array.from(s.querySelectorAll("input"));
-    e.forEach((t, r) => {
-      t.type = "text", t.inputMode = "text", t.setAttribute("maxlength", "1"), t.setAttribute("autocomplete", "one-time-code"), t.addEventListener("focus", () => {
-        t.select();
-      }), t.addEventListener("input", (a) => {
-        const o = a.target.value;
-        o !== "" && (o.length > 1 && (t.value = o.slice(-1)), t.value.length === 1 && r < e.length - 1 && e[r + 1].focus());
-      }), t.addEventListener("keydown", (a) => {
-        a.key === "Backspace" ? (a.preventDefault(), t.value !== "" ? t.value = "" : r > 0 && e[r - 1].focus()) : a.key === "ArrowLeft" ? r > 0 && (a.preventDefault(), e[r - 1].focus()) : a.key === "ArrowRight" ? r < e.length - 1 && (a.preventDefault(), e[r + 1].focus()) : a.key.length === 1 && !a.ctrlKey && !a.metaKey && !a.altKey && t.value.length >= 1 && t.selectionStart === t.selectionEnd && (t.value = "");
-      }), t.addEventListener("paste", (a) => {
-        a.preventDefault();
-        const n = (a.clipboardData || window.clipboardData).getData("text").split("");
-        let l = r;
-        n.forEach((u) => {
-          l < e.length && (e[l].value = u, l++);
-        }), l < e.length ? e[l].focus() : e[e.length - 1].focus();
-      });
-    }), s.setAttribute("data-initialized", "true");
-  });
-};
-if (typeof window < "u") {
-  const c = new MutationObserver((i) => {
-    i.forEach((s) => {
-      s.type === "childList" && s.addedNodes.forEach((e) => {
-        e.nodeType === 1 && (e.classList?.contains("input-otp") ? f(e.parentNode) : e.querySelector?.(".input-otp") && f(e));
-      });
+const u = (o) => {
+  const a = Array.from(o.querySelectorAll("input")), i = () => a.map((e) => e.value).join(""), c = () => {
+    o.dispatchEvent(new CustomEvent("change", {
+      bubbles: !0,
+      detail: { value: i() }
+    }));
+  };
+  a.forEach((e, l) => {
+    e.type = "text", e.inputMode = "text", e.setAttribute("maxlength", "1"), e.setAttribute("autocomplete", "one-time-code"), e.addEventListener("focus", () => {
+      e.select();
+    }), e.addEventListener("input", (t) => {
+      const r = t.target.value;
+      if (r === "") {
+        c();
+        return;
+      }
+      r.length > 1 && (e.value = r.slice(-1)), c(), e.value.length === 1 && l < a.length - 1 && a[l + 1].focus();
+    }), e.addEventListener("keydown", (t) => {
+      t.key === "Backspace" ? (t.preventDefault(), e.value !== "" ? (e.value = "", c()) : l > 0 && a[l - 1].focus()) : t.key === "ArrowLeft" ? l > 0 && (t.preventDefault(), a[l - 1].focus()) : t.key === "ArrowRight" ? l < a.length - 1 && (t.preventDefault(), a[l + 1].focus()) : t.key.length === 1 && !t.ctrlKey && !t.metaKey && !t.altKey && e.value.length >= 1 && e.selectionStart === e.selectionEnd && (e.value = "");
+    }), e.addEventListener("paste", (t) => {
+      t.preventDefault();
+      const n = (t.clipboardData || window.clipboardData).getData("text").split("");
+      let s = l;
+      n.forEach((f) => {
+        s < a.length && (a[s].value = f, s++);
+      }), c(), s < a.length ? a[s].focus() : a[a.length - 1].focus();
     });
-  });
-  document.addEventListener("DOMContentLoaded", () => {
-    f(), c.observe(document.body, { childList: !0, subtree: !0 });
-  });
-}
+  }), o.dataset.inputOtpInitialized = !0, o.dispatchEvent(new CustomEvent("basecoat:initialized"));
+};
+window.basecoat && window.basecoat.register("input-otp", ".input-otp:not([data-input-otp-initialized])", u);
 export {
-  f as initOTP
+  u as initOTP
 };

package/dist/js/pagination.js

@@ -0,0 +1,107 @@
+(() => {
+  const initPagination = (container) => {
+    const prevBtn = container.querySelector("[data-pagination-prev]");
+    const nextBtn = container.querySelector("[data-pagination-next]");
+    const pageButtons = container.querySelectorAll("[data-pagination-page]");
+    if (!prevBtn || !nextBtn || pageButtons.length === 0) {
+      console.error("Pagination: Missing required elements (prev, next, or page buttons)", container);
+      return;
+    }
+    let totalPages = parseInt(container.dataset.totalPages, 10) || pageButtons.length;
+    let currentPage = 1;
+    const initialCurrent = container.querySelector('[aria-current="page"]') || container.querySelector("[data-pagination-page].btn-outline");
+    if (initialCurrent) {
+      currentPage = parseInt(initialCurrent.dataset.paginationPage, 10) || 1;
+    }
+    const updateUI = () => {
+      if (currentPage <= 1) {
+        prevBtn.setAttribute("disabled", "");
+        prevBtn.setAttribute("aria-disabled", "true");
+      } else {
+        prevBtn.removeAttribute("disabled");
+        prevBtn.removeAttribute("aria-disabled");
+      }
+      if (currentPage >= totalPages) {
+        nextBtn.setAttribute("disabled", "");
+        nextBtn.setAttribute("aria-disabled", "true");
+      } else {
+        nextBtn.removeAttribute("disabled");
+        nextBtn.removeAttribute("aria-disabled");
+      }
+      pageButtons.forEach((btn) => {
+        const page = parseInt(btn.dataset.paginationPage, 10);
+        if (page === currentPage) {
+          btn.setAttribute("aria-current", "page");
+          btn.classList.remove("btn-ghost");
+          btn.classList.add("btn-outline");
+        } else {
+          btn.removeAttribute("aria-current");
+          btn.classList.remove("btn-outline");
+          btn.classList.add("btn-ghost");
+        }
+      });
+    };
+    const goToPage = (page, triggerEvent = true) => {
+      if (page < 1 || page > totalPages || page === currentPage) return;
+      const oldPage = currentPage;
+      currentPage = page;
+      updateUI();
+      if (triggerEvent) {
+        container.dispatchEvent(new CustomEvent("change", {
+          bubbles: true,
+          detail: {
+            page: currentPage,
+            previousPage: oldPage,
+            totalPages
+          }
+        }));
+      }
+    };
+    prevBtn.addEventListener("click", () => {
+      goToPage(currentPage - 1);
+    });
+    nextBtn.addEventListener("click", () => {
+      goToPage(currentPage + 1);
+    });
+    pageButtons.forEach((btn) => {
+      btn.addEventListener("click", () => {
+        const page = parseInt(btn.dataset.paginationPage, 10);
+        if (!isNaN(page)) {
+          goToPage(page);
+        }
+      });
+    });
+    container.addEventListener("keydown", (e) => {
+      if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+        e.preventDefault();
+        goToPage(currentPage - 1);
+      } else if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+        e.preventDefault();
+        goToPage(currentPage + 1);
+      } else if (e.key === "Home") {
+        e.preventDefault();
+        goToPage(1);
+      } else if (e.key === "End") {
+        e.preventDefault();
+        goToPage(totalPages);
+      }
+    });
+    updateUI();
+    container.goToPage = (page) => goToPage(page);
+    container.getCurrentPage = () => currentPage;
+    container.getTotalPages = () => totalPages;
+    container.setTotalPages = (total) => {
+      totalPages = total;
+      if (currentPage > totalPages) {
+        goToPage(totalPages);
+      } else {
+        updateUI();
+      }
+    };
+    container.dataset.paginationInitialized = true;
+    container.dispatchEvent(new CustomEvent("basecoat:initialized"));
+  };
+  if (window.basecoat) {
+    window.basecoat.register("pagination", "nav.pagination:not([data-pagination-initialized])", initPagination);
+  }
+})();

package/dist/js/pagination.min.js

@@ -0,0 +1,43 @@
+(() => {
+  const u = (t) => {
+    const r = t.querySelector("[data-pagination-prev]"), n = t.querySelector("[data-pagination-next]"), l = t.querySelectorAll("[data-pagination-page]");
+    if (!r || !n || l.length === 0) {
+      console.error("Pagination: Missing required elements (prev, next, or page buttons)", t);
+      return;
+    }
+    let s = parseInt(t.dataset.totalPages, 10) || l.length, a = 1;
+    const g = t.querySelector('[aria-current="page"]') || t.querySelector("[data-pagination-page].btn-outline");
+    g && (a = parseInt(g.dataset.paginationPage, 10) || 1);
+    const d = () => {
+      a <= 1 ? (r.setAttribute("disabled", ""), r.setAttribute("aria-disabled", "true")) : (r.removeAttribute("disabled"), r.removeAttribute("aria-disabled")), a >= s ? (n.setAttribute("disabled", ""), n.setAttribute("aria-disabled", "true")) : (n.removeAttribute("disabled"), n.removeAttribute("aria-disabled")), l.forEach((e) => {
+        parseInt(e.dataset.paginationPage, 10) === a ? (e.setAttribute("aria-current", "page"), e.classList.remove("btn-ghost"), e.classList.add("btn-outline")) : (e.removeAttribute("aria-current"), e.classList.remove("btn-outline"), e.classList.add("btn-ghost"));
+      });
+    }, i = (e, o = !0) => {
+      if (e < 1 || e > s || e === a) return;
+      const p = a;
+      a = e, d(), o && t.dispatchEvent(new CustomEvent("change", {
+        bubbles: !0,
+        detail: {
+          page: a,
+          previousPage: p,
+          totalPages: s
+        }
+      }));
+    };
+    r.addEventListener("click", () => {
+      i(a - 1);
+    }), n.addEventListener("click", () => {
+      i(a + 1);
+    }), l.forEach((e) => {
+      e.addEventListener("click", () => {
+        const o = parseInt(e.dataset.paginationPage, 10);
+        isNaN(o) || i(o);
+      });
+    }), t.addEventListener("keydown", (e) => {
+      e.key === "ArrowLeft" || e.key === "ArrowUp" ? (e.preventDefault(), i(a - 1)) : e.key === "ArrowRight" || e.key === "ArrowDown" ? (e.preventDefault(), i(a + 1)) : e.key === "Home" ? (e.preventDefault(), i(1)) : e.key === "End" && (e.preventDefault(), i(s));
+    }), d(), t.goToPage = (e) => i(e), t.getCurrentPage = () => a, t.getTotalPages = () => s, t.setTotalPages = (e) => {
+      s = e, a > s ? i(s) : d();
+    }, t.dataset.paginationInitialized = !0, t.dispatchEvent(new CustomEvent("basecoat:initialized"));
+  };
+  window.basecoat && window.basecoat.register("pagination", "nav.pagination:not([data-pagination-initialized])", u);
+})();

package/dist/js/resizable.js

@@ -1,6 +1,6 @@
 var global = typeof window !== "undefined" ? window : null;
 var ssr = global === null;
-var document$1 = !ssr ? global.document : void 0;
+var document = !ssr ? global.document : void 0;
 var addEventListener = "addEventListener";
 var removeEventListener = "removeEventListener";
 var getBoundingClientRect = "getBoundingClientRect";
@@ -12,7 +12,7 @@ var NOOP = function() {
   return false;
 };
 var calc = ssr ? "calc" : ["", "-webkit-", "-moz-", "-o-"].filter(function(prefix) {
-  var el = document$1.createElement("div");
+  var el = document.createElement("div");
   el.style.cssText = "width:" + prefix + "calc(9px)";
   return !!el.style.length;
 }).shift() + "calc";
@@ -21,7 +21,7 @@ var isString = function(v) {
 };
 var elementOrSelector = function(el) {
   if (isString(el)) {
-    var ele = document$1.querySelector(el);
+    var ele = document.querySelector(el);
     if (!ele) {
       throw new Error("Selector " + el + " did not match a DOM element");
     }
@@ -55,7 +55,7 @@ var getGutterSize = function(gutterSize, isFirst, isLast, gutterAlign) {
   return gutterSize;
 };
 var defaultGutterFn = function(i, gutterDirection) {
-  var gut = document$1.createElement("div");
+  var gut = document.createElement("div");
   gut.className = "gutter gutter-" + gutterDirection;
   return gut;
 };
@@ -294,7 +294,7 @@ var Split = function(idsOption, options) {
     b.style.pointerEvents = "";
     self.gutter.style.cursor = "";
     self.parent.style.cursor = "";
-    document$1.body.style.cursor = "";
+    document.body.style.cursor = "";
   }
   function startDragging(e) {
     if ("button" in e && e.button !== 0) {
@@ -329,7 +329,7 @@ var Split = function(idsOption, options) {
     b.style.pointerEvents = "none";
     self.gutter.style.cursor = cursor;
     self.parent.style.cursor = cursor;
-    document$1.body.style.cursor = cursor;
+    document.body.style.cursor = cursor;
     calculateSizes.call(self);
     self.dragOffset = getMousePosition(e) - self.end;
   }
@@ -471,29 +471,33 @@ var Split = function(idsOption, options) {
     pairs
   };
 };
-const initResizable = (root = document) => {
-  const groups = root.querySelectorAll(".resizable-group");
-  groups.forEach((group) => {
-    if (group.dataset.splitInitialized) return;
-    const direction = group.dataset.direction || "horizontal";
-    const children = Array.from(group.children).filter((el) => el.tagName === "DIV" || el.tagName === "SECTION" || el.tagName === "ASIDE");
-    if (children.length < 2) return;
-    let sizes;
-    if (group.dataset.sizes) {
-      sizes = group.dataset.sizes.split(",").map(Number);
-    }
-    let minSizes;
-    if (group.dataset.minSizes) {
-      minSizes = group.dataset.minSizes.split(",").map(Number);
-    }
+const initResizable = (group) => {
+  const direction = group.dataset.direction || "horizontal";
+  const children = Array.from(group.children).filter(
+    (el) => (el.tagName === "DIV" || el.tagName === "SECTION" || el.tagName === "ASIDE") && !el.classList.contains("gutter")
+  );
+  if (children.length < 2) return;
+  let sizes;
+  if (group.dataset.sizes) {
+    sizes = group.dataset.sizes.split(",").map(Number);
+  }
+  let minSizes;
+  if (group.dataset.minSizes) {
+    minSizes = group.dataset.minSizes.split(",").map(Number);
+  }
+  try {
     Split(children, {
       sizes: sizes || void 0,
-      // Default is equal
       minSize: minSizes || 100,
       direction,
-      gutterSize: 5,
-      // 5px gutter
+      gutterSize: 1,
       cursor: direction === "horizontal" ? "col-resize" : "row-resize",
+      onDragEnd: (newSizes) => {
+        group.dispatchEvent(new CustomEvent("change", {
+          bubbles: true,
+          detail: { value: newSizes }
+        }));
+      },
       elementStyle: (dimension, size, gutterSize) => {
         return {
           "flex-basis": `calc(${size}% - ${gutterSize}px)`
@@ -505,29 +509,14 @@ const initResizable = (root = document) => {
         };
       }
     });
-    group.dataset.splitInitialized = "true";
-  });
+  } catch (e) {
+    console.error("Basecoat: Resizable initialization failed", e);
+  }
+  group.dataset.resizableInitialized = true;
+  group.dispatchEvent(new CustomEvent("basecoat:initialized"));
 };
-if (typeof window !== "undefined") {
-  const observer = new MutationObserver((mutations) => {
-    mutations.forEach((mutation) => {
-      if (mutation.type === "childList") {
-        mutation.addedNodes.forEach((node) => {
-          if (node.nodeType === 1) {
-            if (node.classList?.contains("resizable-group")) {
-              initResizable(node.parentNode);
-            } else if (node.querySelector?.(".resizable-group")) {
-              initResizable(node);
-            }
-          }
-        });
-      }
-    });
-  });
-  document.addEventListener("DOMContentLoaded", () => {
-    initResizable();
-    observer.observe(document.body, { childList: true, subtree: true });
-  });
+if (window.basecoat) {
+  window.basecoat.register("resizable", ".resizable-group:not([data-resizable-initialized])", initResizable);
 }
 export {
   initResizable