kerfjs 4.2.0-beta.2 → 4.2.0-beta.4

package/dist/overlay.js

@@ -125,9 +125,10 @@ function confirm(message, options = {}) {
     title,
     okText = "OK",
     cancelText = "Cancel",
-    danger = false
+    danger = false,
+    render
   } = options;
-  const body = jsx("div", {
+  const body = render !== void 0 ? render({ message, ok: { "data-confirm": "ok" }, cancel: { "data-confirm": "cancel" } }) : jsx("div", {
     class: "kerf-confirm",
     children: [
       title !== void 0 ? jsx("h2", { class: "kerf-confirm__title", children: title }) : "",
@@ -150,7 +151,7 @@ function confirm(message, options = {}) {
     container,
     className: danger ? `${className} kerf-confirm--danger` : className,
     dismiss: ["escape", "backdrop"],
-    initialFocus: ".kerf-confirm__ok",
+    initialFocus: '[data-confirm="ok"]',
     trap: true
   });
   delegate(handle.el, "click", "[data-confirm]", (_event, el) => {
@@ -168,20 +169,27 @@ function prompt(message, options = {}) {
     inputType = "text",
     okText = "OK",
     cancelText = "Cancel",
-    validate
+    validate,
+    render
   } = options;
-  const body = jsx("div", {
+  const inputAttrs = {
+    "data-prompt-input": "",
+    type: inputType,
+    value: defaultValue,
+    ...placeholder !== void 0 ? { placeholder } : {}
+  };
+  const body = render !== void 0 ? render({
+    message,
+    input: inputAttrs,
+    error: { "data-prompt-error": "" },
+    ok: { "data-prompt": "ok" },
+    cancel: { "data-prompt": "cancel" }
+  }) : jsx("div", {
     class: "kerf-prompt",
     children: [
       title !== void 0 ? jsx("h2", { class: "kerf-prompt__title", children: title }) : "",
       jsx("label", { class: "kerf-prompt__message", children: message }),
-      jsx("input", {
-        class: "kerf-prompt__input",
-        type: inputType,
-        value: defaultValue,
-        ...placeholder !== void 0 ? { placeholder } : {},
-        "data-prompt-input": ""
-      }),
+      jsx("input", { class: "kerf-prompt__input", ...inputAttrs }),
       jsx("p", { class: "kerf-prompt__error", "data-prompt-error": "", children: "" }),
       jsx("div", {
         class: "kerf-prompt__actions",
@@ -201,18 +209,20 @@ function prompt(message, options = {}) {
     container,
     className,
     dismiss: ["escape", "backdrop"],
-    initialFocus: ".kerf-prompt__input",
+    initialFocus: "[data-prompt-input]",
     trap: true
   });
   const input = handle.el.querySelector("[data-prompt-input]");
   const errorEl = handle.el.querySelector("[data-prompt-error]");
-  errorEl.hidden = true;
+  if (errorEl !== null) errorEl.hidden = true;
   function attemptOk() {
     const value = input.value;
     const error = validate?.(value);
     if (typeof error === "string" && error.length > 0) {
-      errorEl.textContent = error;
-      errorEl.hidden = false;
+      if (errorEl !== null) {
+        errorEl.textContent = error;
+        errorEl.hidden = false;
+      }
       input.focus();
       return;
     }
@@ -231,8 +241,24 @@ function prompt(message, options = {}) {
   return handle.result.then((value) => typeof value === "string" ? value : null);
 }
 function form(fields, options = {}) {
-  const { container, className = "kerf-overlay", title, okText = "OK", cancelText = "Cancel" } = options;
-  const body = jsx("div", {
+  const { container, className = "kerf-overlay", title, okText = "OK", cancelText = "Cancel", render } = options;
+  const fieldAttrs = (field) => ({
+    "data-field": field.name,
+    name: field.name,
+    type: field.type ?? "text",
+    value: field.defaultValue ?? "",
+    ...field.placeholder !== void 0 ? { placeholder: field.placeholder } : {}
+  });
+  const body = render !== void 0 ? render({
+    fields: fields.map((field) => ({
+      name: field.name,
+      label: field.label ?? field.name,
+      input: fieldAttrs(field),
+      error: { "data-field-error": field.name }
+    })),
+    ok: { "data-form": "ok" },
+    cancel: { "data-form": "cancel" }
+  }) : jsx("div", {
     class: "kerf-form",
     children: [
       title !== void 0 ? jsx("h2", { class: "kerf-form__title", children: title }) : "",
@@ -241,19 +267,8 @@ function form(fields, options = {}) {
           class: "kerf-form__field",
           children: [
             jsx("label", { class: "kerf-form__label", children: field.label ?? field.name }),
-            jsx("input", {
-              class: "kerf-form__input",
-              type: field.type ?? "text",
-              name: field.name,
-              value: field.defaultValue ?? "",
-              ...field.placeholder !== void 0 ? { placeholder: field.placeholder } : {},
-              "data-field": field.name
-            }),
-            jsx("p", {
-              class: "kerf-form__error",
-              "data-field-error": field.name,
-              children: ""
-            })
+            jsx("input", { class: "kerf-form__input", ...fieldAttrs(field) }),
+            jsx("p", { class: "kerf-form__error", "data-field-error": field.name, children: "" })
           ]
         })
       ),
@@ -275,14 +290,18 @@ function form(fields, options = {}) {
     container,
     className,
     dismiss: ["escape", "backdrop"],
-    initialFocus: ".kerf-form__input",
+    initialFocus: "[data-field]",
     trap: true
   });
   const byAttr = (attr, name) => Array.from(handle.el.querySelectorAll(`[${attr}]`)).find(
     (el) => el.getAttribute(attr) === name
   );
+  const errorFor = (name) => Array.from(handle.el.querySelectorAll("[data-field-error]")).find(
+    (el) => el.getAttribute("data-field-error") === name
+  ) ?? null;
   for (const field of fields) {
-    byAttr("data-field-error", field.name).hidden = true;
+    const errorEl = errorFor(field.name);
+    if (errorEl !== null) errorEl.hidden = true;
   }
   function attemptOk() {
     const record = {};
@@ -292,12 +311,14 @@ function form(fields, options = {}) {
       const value = el.value;
       record[field.name] = value;
       const error = field.validate?.(value);
-      const errorEl = byAttr("data-field-error", field.name);
+      const errorEl = errorFor(field.name);
       if (typeof error === "string" && error.length > 0) {
-        errorEl.textContent = error;
-        errorEl.hidden = false;
+        if (errorEl !== null) {
+          errorEl.textContent = error;
+          errorEl.hidden = false;
+        }
         if (firstInvalid === null) firstInvalid = el;
-      } else {
+      } else if (errorEl !== null) {
         errorEl.hidden = true;
       }
     }
@@ -321,6 +342,83 @@ function form(fields, options = {}) {
     (value) => value !== null && typeof value === "object" ? value : null
   );
 }
+function choice(message, actions, options = {}) {
+  const { container, className = "kerf-overlay", title, defaultValue, render } = options;
+  const hasDefault = "defaultValue" in options;
+  const actionAttrs = actions.map((_, i) => ({ "data-choice": String(i) }));
+  const body = render !== void 0 ? render({ message, actions: actionAttrs }) : jsx("div", {
+    class: "kerf-choice",
+    children: [
+      title !== void 0 ? jsx("h2", { class: "kerf-choice__title", children: title }) : "",
+      jsx("p", { class: "kerf-choice__message", children: message }),
+      jsx("div", {
+        class: "kerf-choice__actions",
+        children: actions.map(
+          (action, i) => jsx("button", {
+            type: "button",
+            class: action.className !== void 0 ? `kerf-choice__action ${action.className}` : "kerf-choice__action",
+            ...actionAttrs[i],
+            children: action.label
+          })
+        )
+      })
+    ]
+  });
+  let resolveChoice;
+  const result = new Promise((resolve) => {
+    resolveChoice = resolve;
+  });
+  const handle = overlay(body, {
+    container,
+    className,
+    dismiss: ["escape", "backdrop"],
+    initialFocus: "[data-choice]",
+    trap: true
+  });
+  delegate(handle.el, "click", "[data-choice]", (_event, el) => {
+    resolveChoice(actions[Number(el.getAttribute("data-choice"))].value);
+    handle.close();
+  });
+  if (hasDefault) {
+    handle.el.addEventListener("keydown", (event) => {
+      if (event.key === "Enter") {
+        event.preventDefault();
+        resolveChoice(defaultValue);
+        handle.close();
+      }
+    });
+  }
+  void handle.result.then(() => resolveChoice(null));
+  return result;
+}
+function positionAnchored(el, anchor, options = {}) {
+  const { placement = "bottom", align = "start", gap = 4 } = options;
+  const a = anchor.getBoundingClientRect();
+  const p = el.getBoundingClientRect();
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+  const belowTop = a.bottom + gap;
+  const aboveTop = a.top - gap - p.height;
+  let below = placement !== "top";
+  if (below && belowTop + p.height > vh && aboveTop >= 0) below = false;
+  else if (!below && aboveTop < 0 && belowTop + p.height <= vh) below = true;
+  let left = align === "end" ? a.right - p.width : a.left;
+  left = Math.max(0, Math.min(left, vw - p.width));
+  el.style.position = "fixed";
+  el.style.margin = "0";
+  el.style.left = `${left}px`;
+  el.style.top = `${below ? belowTop : aboveTop}px`;
+}
+function autoReposition(el, anchor, options = {}) {
+  const reposition = () => positionAnchored(el, anchor, options);
+  reposition();
+  window.addEventListener("scroll", reposition, true);
+  window.addEventListener("resize", reposition);
+  return () => {
+    window.removeEventListener("scroll", reposition, true);
+    window.removeEventListener("resize", reposition);
+  };
+}
 function popover(anchor, content, options = {}) {
   const {
     container,
@@ -343,32 +441,62 @@ function popover(anchor, content, options = {}) {
     onDismiss,
     outsideIgnore: [anchor, ...extraIgnore]
   });
-  handle.el.style.position = "fixed";
-  handle.el.style.margin = "0";
-  const reposition = () => {
-    const a = anchor.getBoundingClientRect();
-    const p = handle.el.getBoundingClientRect();
-    const vw = window.innerWidth;
-    const vh = window.innerHeight;
-    const belowTop = a.bottom + gap;
-    const aboveTop = a.top - gap - p.height;
-    let below = placement !== "top";
-    if (below && belowTop + p.height > vh && aboveTop >= 0) below = false;
-    else if (!below && aboveTop < 0 && belowTop + p.height <= vh) below = true;
-    let left = align === "end" ? a.right - p.width : a.left;
-    left = Math.max(0, Math.min(left, vw - p.width));
-    handle.el.style.left = `${left}px`;
-    handle.el.style.top = `${below ? belowTop : aboveTop}px`;
-  };
-  reposition();
-  window.addEventListener("scroll", reposition, true);
-  window.addEventListener("resize", reposition);
-  void handle.result.then(() => {
-    window.removeEventListener("scroll", reposition, true);
-    window.removeEventListener("resize", reposition);
-  });
+  const stopReposition = autoReposition(handle.el, anchor, { placement, align, gap });
+  void handle.result.then(stopReposition);
   return handle;
 }
+function tooltip(anchor, content, options = {}) {
+  const {
+    container,
+    className = "kerf-tooltip",
+    delay = 400,
+    hideDelay = 100,
+    role = "tooltip",
+    placement = "top",
+    align = "start",
+    gap = 4
+  } = options;
+  const body = typeof content === "function" ? content : typeof content === "string" ? jsx("span", { class: `${className}__text`, children: content }) : content;
+  const timers = {};
+  let current;
+  function show() {
+    const handle = overlay(body, { container, className, dismiss: false, trap: false, initialFocus: false });
+    handle.el.setAttribute("role", role);
+    const stop = autoReposition(handle.el, anchor, { placement, align, gap });
+    current = { handle, stop };
+  }
+  function hide() {
+    if (current === void 0) return;
+    current.stop();
+    current.handle.close();
+    current = void 0;
+  }
+  const onEnter = () => {
+    if (timers.hide !== void 0) clearTimeout(timers.hide);
+    if (current !== void 0) return;
+    if (timers.show !== void 0) clearTimeout(timers.show);
+    timers.show = setTimeout(show, delay);
+  };
+  const onLeave = () => {
+    if (timers.show !== void 0) clearTimeout(timers.show);
+    if (current === void 0) return;
+    timers.hide = setTimeout(hide, hideDelay);
+  };
+  anchor.addEventListener("pointerenter", onEnter);
+  anchor.addEventListener("pointerleave", onLeave);
+  anchor.addEventListener("focus", onEnter);
+  anchor.addEventListener("blur", onLeave);
+  return () => {
+    anchor.removeEventListener("pointerenter", onEnter);
+    anchor.removeEventListener("pointerleave", onLeave);
+    anchor.removeEventListener("focus", onEnter);
+    anchor.removeEventListener("blur", onLeave);
+    if (timers.show !== void 0) clearTimeout(timers.show);
+    if (timers.hide !== void 0) clearTimeout(timers.hide);
+    hide();
+  };
+}
+var TOAST_SET = /* @__PURE__ */ Symbol("kerf.toasts");
 function toastRegion(container) {
   if (container !== void 0) return container;
   const existing = document.querySelector(".kerf-toasts");
@@ -380,27 +508,68 @@ function toastRegion(container) {
   return region;
 }
 function toast(content, options = {}) {
-  const { container, className = "kerf-toast", duration = 4e3, role = "status" } = options;
+  const {
+    container,
+    className = "kerf-toast",
+    duration = 4e3,
+    role = "status",
+    mode = "stack",
+    collapse = "fade",
+    variant,
+    enterClass,
+    exitClass,
+    exitDuration = 0
+  } = options;
+  const region = toastRegion(container);
+  const active = region[TOAST_SET] ??= /* @__PURE__ */ new Set();
+  if (mode === "replace") {
+    for (const d of [...active]) {
+      if (collapse === "instant") d.removeNow();
+      else d();
+    }
+  }
   const el = document.createElement("div");
   el.className = className;
+  if (variant !== void 0) el.classList.add(`${className}--${variant}`);
   el.setAttribute("role", role);
-  toastRegion(container).appendChild(el);
+  region.appendChild(el);
   const disposeMount = mount(el, typeof content === "function" ? content : () => content);
-  const state = {
-    dismissed: false,
-    timer: void 0
+  const state = { dismissed: false, timer: void 0 };
+  if (enterClass !== void 0) {
+    globalThis.requestAnimationFrame(() => {
+      if (!state.dismissed) el.classList.add(enterClass);
+    });
+  }
+  const remove = () => {
+    disposeMount();
+    el.remove();
+    active.delete(dismiss);
   };
-  function dismiss() {
+  const finish = (instant) => {
     if (state.dismissed) return;
     state.dismissed = true;
     if (state.timer !== void 0) clearTimeout(state.timer);
-    disposeMount();
-    el.remove();
+    if (instant) {
+      remove();
+      return;
+    }
+    if (enterClass !== void 0) el.classList.remove(enterClass);
+    if (exitClass !== void 0) el.classList.add(exitClass);
+    if (exitClass !== void 0 || exitDuration > 0) {
+      setTimeout(remove, exitDuration);
+    } else {
+      remove();
+    }
+  };
+  function dismiss() {
+    finish(false);
   }
+  dismiss.removeNow = () => finish(true);
+  active.add(dismiss);
   if (duration > 0) state.timer = setTimeout(dismiss, duration);
-  return dismiss;
+  return { el, dismiss };
 }
 
-export { confirm, form, overlay, popover, prompt, toast };
+export { autoReposition, choice, confirm, form, overlay, popover, positionAnchored, prompt, toast, tooltip };
 //# sourceMappingURL=overlay.js.map
 //# sourceMappingURL=overlay.js.map