@blukavantui/community 0.0.0-stage → 1.1.0

package/src/runtime/notification.js

@@ -0,0 +1,347 @@
+// ../blu-grid/docs/scripts/modules/qr-encoder.js
+import { global } from "./kernel.js";
+
+// ../blu-grid/docs/scripts/modules/common.js
+import { global as global2, runtime, state, register } from "./kernel.js";
+var shared = /* @__PURE__ */ state("common", () => ({ instances: /* @__PURE__ */ new Map(), hosts: /* @__PURE__ */ new Map(), serial: 0, overlays: [], inertState: /* @__PURE__ */ new Map(), oldOverflow: void 0 }));
+var colors = /* @__PURE__ */ "default primary secondary success processing warning error danger magenta red volcano orange gold lime green cyan blue geekblue purple".split(" ");
+function el(tag, cls, text) {
+  var n = document.createElement(tag);
+  if (cls) n.className = cls;
+  if (text !== void 0) n.textContent = text;
+  return n;
+}
+function at(n, key, value) {
+  n.setAttribute(key, String(value));
+  return n;
+}
+function clear(n) {
+  while (n.firstChild) n.removeChild(n.firstChild);
+}
+function listen(s, n, event, fn, options) {
+  n.addEventListener(event, fn, options);
+  s.cleanup.push(function() {
+    n.removeEventListener(event, fn, options);
+  });
+}
+function btn(text, fn, primary) {
+  var n = el("button", "blu-common-button" + (primary ? " blu-common-button--primary" : ""), text);
+  n.type = "button";
+  n.addEventListener("click", fn);
+  return n;
+}
+function int(v, fallback, min, max) {
+  v = v === void 0 ? fallback : Number(v);
+  if (!Number.isInteger(v) || v < min || v > max) throw Error("Expected an integer between " + min + " and " + max + ".");
+  return v;
+}
+function choice(v, values, fallback) {
+  v = v || fallback;
+  if (values.indexOf(v) < 0) throw Error("Expected one of: " + values.join(", ") + ".");
+  return v;
+}
+function color(v) {
+  v = String(v || "Default").toLowerCase();
+  if (colors.indexOf(v) < 0) throw Error("Unknown ComponentColor: " + v);
+  return v;
+}
+function tint(n, v) {
+  v = color(v);
+  n.style.setProperty("--blu-common-color", "var(--bluui-color-" + v + "-text)");
+  n.style.setProperty("--blu-common-soft", "var(--bluui-color-" + v + "-soft)");
+  n.style.setProperty("--blu-common-solid", "var(--bluui-color-" + v + "-solid)");
+}
+function emit(s, name) {
+  if (s.dead || s.host._bluCommonOwner !== s.key || !s.events[name]) return;
+  var args = Array.prototype.slice.call(arguments, 2);
+  try {
+    Promise.resolve(s.events[name].apply(null, args)).catch(function(e) {
+      if (name !== "Error") error(s, e.message || String(e));
+    });
+  } catch (e) {
+    if (name !== "Error") error(s, e.message || String(e));
+  }
+}
+function error(s, message) {
+  if (!s.error) {
+    s.error = at(el("p", "blu-common-error"), "role", "alert");
+    s.host.append(s.error);
+  }
+  s.error.textContent = message;
+  s.error.hidden = !message;
+  if (message && message !== s.lastError) emit(s, "Error", message);
+  s.lastError = message;
+}
+function begin(id, options, events, key, kind) {
+  var host = document.getElementById(id);
+  if (!host) return null;
+  key = key || id;
+  var s = shared.instances.get(key);
+  if (s && s.host !== host) {
+    destroy(key);
+    s = null;
+  }
+  if (host._bluCommonOwner && host._bluCommonOwner !== key) destroy(host._bluCommonOwner);
+  if (!s) {
+    s = { host, key, kind, uid: "blu-common-" + ++shared.serial, cleanup: [], events: {}, options: {} };
+    shared.instances.set(key, s);
+  }
+  host._bluCommonOwner = key;
+  s.options = options || {};
+  s.events = events || {};
+  at(host, "data-blu-ready", "true");
+  return s;
+}
+function destroy(key) {
+  var s = shared.instances.get(key);
+  if (!s) return;
+  s.dead = true;
+  closeOverlay(s);
+  if (s.dispose) s.dispose();
+  s.cleanup.forEach(function(f) {
+    f();
+  });
+  if (s.host._bluCommonOwner === key) {
+    delete s.host._bluCommonOwner;
+    s.host.removeAttribute("data-blu-ready");
+    if (!s.preserve) clear(s.host);
+  }
+  shared.instances.delete(key);
+}
+function body(s, cls) {
+  if (!s.body) {
+    s.body = el("div", cls);
+    s.host.append(s.body);
+  }
+  return s.body;
+}
+function refreshInert() {
+  shared.inertState.forEach(function(v, n) {
+    n.inert = v;
+  });
+  shared.inertState.clear();
+  var top = shared.overlays[shared.overlays.length - 1];
+  if (!top) {
+    if (shared.oldOverflow !== void 0) document.body.style.overflow = shared.oldOverflow;
+    shared.oldOverflow = void 0;
+    return;
+  }
+  if (shared.oldOverflow === void 0) shared.oldOverflow = document.body.style.overflow;
+  document.body.style.overflow = "hidden";
+  var node = top.layer;
+  while (node && node.parentElement) {
+    Array.from(node.parentElement.children).forEach(function(sibling) {
+      if (sibling !== node && sibling instanceof HTMLElement) {
+        shared.inertState.set(sibling, sibling.inert);
+        sibling.inert = true;
+      }
+    });
+    node = node.parentElement;
+    if (node === document.body) break;
+  }
+}
+function closeOverlay(s) {
+  if (s.stopTracking) s.stopTracking();
+  if (!s.overlayOpen) return;
+  s.overlayOpen = false;
+  var wasTop = shared.overlays[shared.overlays.length - 1] === s;
+  shared.overlays = shared.overlays.filter(function(x) {
+    return x !== s;
+  });
+  document.removeEventListener("keydown", s.overlayKey, true);
+  document.removeEventListener("focusin", s.overlayFocus, true);
+  if (s.layer.hidePopover) {
+    try {
+      s.layer.hidePopover();
+    } catch (_) {
+    }
+  }
+  s.layer.hidden = true;
+  refreshInert();
+  if (wasTop && s.returnFocus && s.returnFocus.isConnected && !s.returnFocus.closest("[inert],[hidden]")) s.returnFocus.focus();
+}
+function syncNotification(s) {
+  var o = s.options, key = o.HostKey || "global", existing = shared.hosts.get(key);
+  if (existing && existing !== s) throw Error("Notification HostKey is already in use: " + key);
+  var placement = choice(o.Placement, ["TopRight", "TopLeft", "BottomRight", "BottomLeft"], "TopRight");
+  int(o.MaxVisible, 4, 1, 10);
+  if (s.notificationKey && s.notificationKey !== key) shared.hosts.delete(s.notificationKey);
+  shared.hosts.set(key, s);
+  s.notificationKey = key;
+  var root = body(s, "blu-notifications");
+  at(root, "data-placement", placement);
+  at(root, "aria-label", o.AccessibleLabel || "Notifications");
+  at(root, "role", "region");
+  if (!s.messages) {
+    s.messages = /* @__PURE__ */ new Map();
+    s.announcers = ["status", "alert"].map(function(role) {
+      var nodes = [0, 1].map(function() {
+        var node = at(el("div", "blu-notification__announcer"), "role", role);
+        at(node, "aria-atomic", "true");
+        s.host.append(node);
+        return node;
+      });
+      return { nodes, next: 0, pending: /* @__PURE__ */ new Map(), timer: 0 };
+    });
+    listen(s, document, "visibilitychange", function() {
+      s.messages.forEach(function(m) {
+        notificationTimer(s, m);
+      });
+    });
+    s.dispose = function() {
+      s.messages.forEach(function(m) {
+        clearTimeout(m.timer);
+      });
+      s.announcers.forEach(function(a) {
+        clearTimeout(a.timer);
+        a.pending.clear();
+      });
+      if (shared.hosts.get(s.notificationKey) === s) shared.hosts.delete(s.notificationKey);
+    };
+  }
+  while (s.messages.size > (o.MaxVisible || 4)) dismissNotification(s, s.messages.keys().next().value, "Limit");
+}
+function announceNotification(s, key, message, urgent) {
+  s.announcers.forEach(function(a) {
+    a.pending.delete(key);
+  });
+  var channel = s.announcers[urgent ? 1 : 0];
+  channel.pending.set(key, message);
+  channel.nodes.forEach(function(node) {
+    node.textContent = "";
+  });
+  if (!channel.timer) channel.timer = setTimeout(function() {
+    channel.timer = 0;
+    if (!s.dead) {
+      channel.nodes[channel.next].textContent = Array.from(channel.pending.values()).join("\n");
+      channel.next = 1 - channel.next;
+    }
+    channel.pending.clear();
+  }, 100);
+}
+function notificationTimer(s, m) {
+  clearTimeout(m.timer);
+  if (m.started) {
+    m.remaining -= Date.now() - m.started;
+    m.started = 0;
+  }
+  if (m.duration && !m.hover && !m.focus && !document.hidden) {
+    m.started = Date.now();
+    m.timer = setTimeout(function() {
+      dismissNotification(s, m.key, "Timeout");
+    }, Math.max(0, m.remaining));
+  }
+}
+function dismissNotification(s, key, reason) {
+  var m = s.messages.get(key);
+  if (!m) return;
+  clearTimeout(m.timer);
+  s.announcers.forEach(function(a) {
+    a.pending.delete(key);
+  });
+  var focused = m.element.contains(document.activeElement);
+  s.messages.delete(key);
+  m.element.remove();
+  if (focused) {
+    var next = s.body.querySelector("button");
+    if (next) next.focus();
+    else if (m.returnFocus && m.returnFocus.isConnected) m.returnFocus.focus();
+  }
+  emit(s, "Dismissed", key, reason);
+}
+function notificationShow(hostKey, message, updateOnly) {
+  var s = shared.hosts.get(hostKey || "global");
+  if (!s) throw Error("Notification host is not mounted: " + (hostKey || "global"));
+  var r = typeof message === "string" ? JSON.parse(message) : message;
+  if (!r || typeof r.Key !== "string" || !r.Key.trim()) throw Error("Notification requires a nonempty Key.");
+  var c = color(r.Color), duration = int(r.Duration, 0, 0, 86400), existing = s.messages.get(r.Key);
+  if (updateOnly && !existing) throw Error("Notification key was not found: " + r.Key);
+  if (existing) {
+    clearTimeout(existing.timer);
+    existing.element.remove();
+    s.messages.delete(r.Key);
+  }
+  var card = el("article", "blu-notification");
+  tint(card, c);
+  var icon = at(el("span", "blu-notification__icon", c === "success" ? "\u2713" : c === "error" || c === "danger" ? "!" : c === "warning" ? "!" : "i"), "aria-hidden", "true"), copy = el("div", "blu-notification__copy");
+  copy.append(el("strong", "", r.Title || ""));
+  if (r.Description) copy.append(el("p", "", r.Description));
+  var m = { key: r.Key, element: card, duration, remaining: duration * 1e3, returnFocus: existing ? existing.returnFocus : document.activeElement };
+  var close = btn("\xD7", function() {
+    dismissNotification(s, r.Key, "Close");
+  });
+  at(close, "aria-label", "Dismiss " + (r.Title || "notification"));
+  card.append(icon, copy, close);
+  if (r.ActionLabel) copy.append(btn(r.ActionLabel, function() {
+    emit(s, "Action", r.Key);
+    dismissNotification(s, r.Key, "Action");
+  }));
+  card.onmouseenter = function() {
+    m.hover = true;
+    notificationTimer(s, m);
+  };
+  card.onmouseleave = function() {
+    m.hover = false;
+    notificationTimer(s, m);
+  };
+  card.onfocusin = function() {
+    m.focus = true;
+    notificationTimer(s, m);
+  };
+  card.onfocusout = function(e) {
+    if (!card.contains(e.relatedTarget)) {
+      m.focus = false;
+      notificationTimer(s, m);
+    }
+  };
+  s.messages.set(r.Key, m);
+  s.body.append(card);
+  announceNotification(s, r.Key, [r.Title, r.Description].filter(Boolean).join(". "), c === "error" || c === "danger");
+  notificationTimer(s, m);
+  while (s.messages.size > (s.options.MaxVisible || 4)) dismissNotification(s, s.messages.keys().next().value, "Limit");
+  return r.Key;
+}
+function api(kind, render, cached) {
+  return { sync: function(id, options, events, key) {
+    var s = begin(id, options, events, key, kind);
+    if (!s) return;
+    try {
+      var signature = cached ? JSON.stringify(s.options) : null;
+      if (!cached || s.renderSignature !== signature) {
+        render(s);
+        s.renderSignature = signature;
+      }
+      error(s, "");
+      return "";
+    } catch (e) {
+      s.renderSignature = void 0;
+      s.cascaderSignature = null;
+      closeOverlay(s);
+      error(s, e.message || String(e));
+      return e.message || String(e);
+    }
+  }, destroy };
+}
+function installNotification() {
+  return register("Notification", () => {
+    var result = api("Notification", syncNotification, false);
+    result.show = function(hostKey, message) {
+      return notificationShow(hostKey, message, false);
+    };
+    result.update = function(hostKey, message) {
+      return notificationShow(hostKey, message, true);
+    };
+    result.dismiss = function(hostKey, key) {
+      var s = shared.hosts.get(hostKey || "global");
+      if (!s) throw Error("Notification host is not mounted.");
+      if (key) dismissNotification(s, key, "Programmatic");
+      else Array.from(s.messages.keys()).forEach(function(k) {
+        dismissNotification(s, k, "Programmatic");
+      });
+    };
+    return result;
+  });
+}
+export {
+  installNotification
+};

package/src/runtime/page-layout.d.ts

@@ -0,0 +1 @@
+export function installPageLayout(): any;

package/src/runtime/page-layout.js

@@ -0,0 +1,105 @@
+// ../blu-grid/docs/scripts/modules/foundations.js
+import { global, runtime, state, register } from "./kernel.js";
+var shared = /* @__PURE__ */ state("foundations", () => ({ instances: /* @__PURE__ */ new Map(), serial: 0 }));
+function el(tag, cls, text) {
+  var n = document.createElement(tag);
+  if (cls) n.className = cls;
+  if (text !== void 0) n.textContent = text;
+  return n;
+}
+function attr(n, key, value) {
+  n.setAttribute(key, String(value));
+  return n;
+}
+function slot(s, name) {
+  return Array.from(s.host.children).find(function(child) {
+    return child.classList.contains("blu-common-slot--" + name.toLowerCase());
+  });
+}
+function report(s, message) {
+  if (!s.error) {
+    s.error = attr(el("p", "blu-common-error"), "role", "alert");
+    s.host.append(s.error);
+  }
+  s.error.textContent = message;
+  s.error.hidden = !message;
+  if (message && s.lastError !== message && s.events.Error) {
+    s.lastError = message;
+    try {
+      s.events.Error(message);
+    } catch (_) {
+    }
+  }
+  if (!message) s.lastError = "";
+}
+function integer(value, fallback, min, max) {
+  value = value === void 0 ? fallback : Number(value);
+  if (!Number.isInteger(value) || value < min || value > max) throw Error("Expected an integer between " + min + " and " + max + ".");
+  return value;
+}
+function destroy(key) {
+  var s = shared.instances.get(key);
+  if (!s) return;
+  s.dead = true;
+  s.cleanup.forEach(function(f) {
+    f();
+  });
+  s.owned.forEach(function(n) {
+    n.remove();
+  });
+  if (s.host._bluFoundationOwner === key) {
+    delete s.host._bluFoundationOwner;
+    s.host.removeAttribute("data-blu-ready");
+  }
+  shared.instances.delete(key);
+}
+function pageLayout(s) {
+  var o = s.options, variant = o.Variant || "Standard";
+  if (["Standard", "Aside", "Workspace"].indexOf(variant) < 0) throw Error("Variant must be Standard, Aside or Workspace.");
+  s.host.classList.add("blu-page-layout");
+  ["standard", "aside", "workspace"].forEach(function(v) {
+    s.host.classList.toggle("blu-page-layout--" + v, v === variant.toLowerCase());
+  });
+  s.host.style.setProperty("--blu-page-aside-width", integer(o.AsideWidth, 340, 200, 640) + "px");
+  var aside = slot(s, "Aside"), footer = slot(s, "Footer");
+  if (aside) aside.hidden = variant === "Standard";
+  if (footer) footer.hidden = !o.ShowFooter;
+}
+function api(kind, render) {
+  return { sync: function(id, options, events, key) {
+    var host = document.getElementById(id);
+    if (!host) return "Component host was not found.";
+    key = key || id;
+    var s = shared.instances.get(key);
+    if (s && s.host !== host) {
+      destroy(key);
+      s = null;
+    }
+    if (host._bluFoundationOwner && host._bluFoundationOwner !== key) destroy(host._bluFoundationOwner);
+    if (!s) {
+      s = { host, key, uid: "blu-foundation-" + ++shared.serial, owned: [], cleanup: [] };
+      shared.instances.set(key, s);
+    }
+    var preview = host.nextElementSibling;
+    if (preview && preview.classList.contains("blu-component-preview")) preview.hidden = true;
+    host._bluFoundationOwner = key;
+    s.options = options || {};
+    s.events = events || {};
+    attr(host, "data-blu-ready", "true");
+    try {
+      render(s);
+      report(s, "");
+      return "";
+    } catch (e) {
+      s.renderSignature = void 0;
+      report(s, e.message || String(e));
+      return e.message || String(e);
+    }
+  }, destroy };
+}
+function installPageLayout() {
+  return register("PageLayout", () => api("PageLayout", pageLayout));
+}
+export {
+  installPageLayout
+};

package/src/runtime/pagination.d.ts

@@ -0,0 +1 @@
+export function installPagination(): any;