@jackuait/blok 0.6.0 → 0.7.0-beta.2

package/types/utils/popover/popover.d.ts

@@ -78,6 +78,14 @@ export interface PopoverParams {
    * Use 'auto' to fit content width.
    */
   width?: string;
+
+  /**
+   * Optional element whose left edge should be used for horizontal positioning.
+   * When provided, the popover's left position uses this element's left coordinate
+   * instead of the trigger's left. Useful for aligning the toolbox popover to the
+   * block content area rather than to the plus button.
+   */
+  leftAlignElement?: HTMLElement;
 }
 
 

package/dist/chunks/index-DBWWKrDe.mjs

@@ -1,78 +0,0 @@
-import { aa as s, t as f } from "./inline-tool-convert-DduRc0fF.mjs";
-const a = {
-  wrapper: s(
-    "fixed z-2 bottom-5 left-5",
-    'font-[-apple-system,BlinkMacSystemFont,"Segoe_UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira_Sans","Droid_Sans","Helvetica_Neue",sans-serif]'
-  ),
-  notification: s(
-    "relative w-[230px] mt-[15px] py-[13px] px-4",
-    "bg-white shadow-notify rounded-[5px]",
-    "text-sm leading-[1.4em] wrap-break-word",
-    'before:content-[""] before:absolute before:block before:top-0 before:left-0',
-    "before:w-[3px] before:h-[calc(100%-6px)] before:m-[3px] before:rounded-[5px] before:bg-transparent"
-  ),
-  crossBtn: s(
-    "absolute top-[7px] right-[15px] w-2.5 h-2.5 p-[5px] opacity-55 cursor-pointer",
-    'before:content-[""] before:absolute before:left-[9px] before:top-[5px] before:h-3 before:w-0.5 before:bg-[#575d67] before:-rotate-45',
-    'after:content-[""] after:absolute after:left-[9px] after:top-[5px] after:h-3 after:w-0.5 after:bg-[#575d67] after:rotate-45',
-    "hover:opacity-100"
-  ),
-  btnsWrapper: "flex flex-row flex-nowrap mt-[5px]",
-  btn: "border-none rounded-[3px] text-[13px] py-[5px] px-2.5 cursor-pointer last:ml-2.5",
-  okBtn: "bg-[#34c992] shadow-[0_1px_1px_0_rgba(18,49,35,0.05)] text-white hover:bg-[#2db583]",
-  cancelBtn: "bg-[#f2f5f7] shadow-[0_2px_1px_0_rgba(16,19,29,0)] text-[#656b7c] hover:bg-[#e9ecee]",
-  input: s(
-    "max-w-[130px] py-[5px] px-2.5 bg-[#f7f7f7] border-0 rounded-[3px]",
-    "text-[13px] text-[#656b7c] outline-hidden",
-    "placeholder:text-[#656b7c] focus:placeholder:text-[rgba(101,107,124,0.3)]"
-  ),
-  successNotification: s(
-    "bg-[#fafffe]!",
-    "before:bg-[#41ffb1]!"
-  ),
-  errorNotification: s(
-    "bg-[#fffbfb]!",
-    "before:bg-[#fb5d5d]!"
-  )
-}, d = (e) => {
-  const t = document.createElement("DIV"), o = document.createElement("DIV"), r = e.message, n = e.style, c = () => n === "success" ? a.successNotification : n === "error" ? a.errorNotification : "";
-  return t.className = f(a.notification, c()), n ? t.setAttribute("data-blok-testid", `notification-${n}`) : t.setAttribute("data-blok-testid", "notification"), t.innerHTML = r, o.className = a.crossBtn, o.setAttribute("data-blok-testid", "notification-cross"), o.addEventListener("click", () => t.remove()), t.appendChild(o), t;
-}, p = (e) => {
-  const t = d(e), o = document.createElement("div"), r = document.createElement("button"), n = document.createElement("button"), c = t.querySelector('[data-blok-testid="notification-cross"]'), i = e.cancelHandler, l = e.okHandler;
-  return o.className = a.btnsWrapper, o.setAttribute("data-blok-testid", "notification-buttons-wrapper"), r.innerHTML = e.okText || "Confirm", n.innerHTML = e.cancelText || "Cancel", r.className = s(a.btn, a.okBtn), n.className = s(a.btn, a.cancelBtn), r.setAttribute("data-blok-testid", "notification-confirm-button"), n.setAttribute("data-blok-testid", "notification-cancel-button"), i && typeof i == "function" && n.addEventListener("click", i), i && typeof i == "function" && c && c.addEventListener("click", i), l && typeof l == "function" && r.addEventListener("click", l), r.addEventListener("click", () => t.remove()), n.addEventListener("click", () => t.remove()), o.appendChild(r), o.appendChild(n), t.appendChild(o), t;
-}, b = (e) => {
-  const t = d(e), o = document.createElement("div"), r = document.createElement("button"), n = document.createElement("input"), c = t.querySelector('[data-blok-testid="notification-cross"]'), i = e.cancelHandler, l = e.okHandler;
-  return o.className = a.btnsWrapper, r.innerHTML = e.okText || "Ok", r.className = s(a.btn, a.okBtn), n.className = a.input, n.setAttribute("data-blok-testid", "notification-input"), e.placeholder && n.setAttribute("placeholder", e.placeholder), e.default && (n.value = e.default), e.inputType && (n.type = e.inputType), i && typeof i == "function" && c && c.addEventListener("click", i), l && typeof l == "function" && r.addEventListener("click", () => {
-    l(n.value);
-  }), r.addEventListener("click", () => t.remove()), o.appendChild(n), o.appendChild(r), t.appendChild(o), t;
-}, u = () => {
-  const e = document.createElement("DIV");
-  return e.className = a.wrapper, e.setAttribute("data-blok-testid", "notifier-container"), e;
-}, m = 8e3, x = () => {
-  const e = document.querySelector('[data-blok-testid="notifier-container"]');
-  if (e)
-    return e;
-  const t = u();
-  return document.body.appendChild(t), t;
-}, k = (e) => {
-  if (!e.message)
-    return;
-  const t = x(), o = e.time || m, r = (() => {
-    const n = e.type;
-    if (n === "confirm")
-      return p(e);
-    if (n === "prompt")
-      return b(e);
-    const c = d(e);
-    return window.setTimeout(() => {
-      c.remove();
-    }, o), c;
-  })();
-  t && r && (t.appendChild(r), r.className = `${r.className} animate-notify-bounce-in`, r.setAttribute("data-blok-bounce-in", "true"));
-}, h = {
-  show: k
-};
-export {
-  h as Notifier,
-  k as show
-};