@blukavantui/community 0.0.0-stage → 1.0.1

package/src/runtime/notification-center.js

@@ -0,0 +1,417 @@
+// ../blu-grid/docs/scripts/modules/platform.js
+import { global, runtime, state, register } from "./kernel.js";
+var shared = /* @__PURE__ */ state("platform", () => ({ states: /* @__PURE__ */ new Map(), sequence: 0 }));
+var ns = "http://www.w3.org/2000/svg";
+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, text2) {
+  var n = document.createElement(tag);
+  if (cls) n.className = cls;
+  if (text2 !== void 0) n.textContent = String(text2);
+  return n;
+}
+function at(n, k, v) {
+  n.setAttribute(k, String(v));
+  return n;
+}
+function clear(n) {
+  while (n.firstChild) n.removeChild(n.firstChild);
+}
+function copy(value) {
+  return JSON.parse(JSON.stringify(value));
+}
+function json(value) {
+  return JSON.stringify(value);
+}
+function text(value) {
+  return value == null ? "" : String(value);
+}
+function list(raw, name, max) {
+  var v = typeof raw === "string" ? JSON.parse(raw || "[]") : raw || [];
+  if (!Array.isArray(v) || v.length > (max || 1e4)) throw Error(name + " must be a list with at most " + (max || 1e4) + " items.");
+  return copy(v);
+}
+function keyed(rows, name) {
+  var keys = /* @__PURE__ */ new Set();
+  rows.forEach(function(r) {
+    if (!r || typeof r.Key !== "string" || !r.Key || keys.has(r.Key)) throw Error(name + " needs unique, nonempty text keys.");
+    keys.add(r.Key);
+  });
+  return rows;
+}
+function color(value) {
+  if (colors.indexOf(value || "Primary") < 0) throw Error("Unknown ComponentColor: " + value);
+  return (value || "Primary").toLowerCase();
+}
+function uid(prefix) {
+  return prefix + "-" + Date.now().toString(36) + "-" + ++shared.sequence;
+}
+function on(s, node, event, fn, capture) {
+  node.addEventListener(event, fn, !!capture);
+  s.cleanup.push(function() {
+    node.removeEventListener(event, fn, !!capture);
+  });
+}
+function announce(s, message) {
+  s.status.textContent = message || "";
+}
+function report(s, error) {
+  var message = error && error.message || text(error);
+  s.error.textContent = message;
+  s.error.hidden = !message;
+  if (message && s.lastError !== message) {
+    s.lastError = message;
+    if (s.events.Error) {
+      try {
+        Promise.resolve(s.events.Error(message)).catch(function() {
+        });
+      } catch (_) {
+      }
+    }
+  }
+  if (!message) s.lastError = "";
+}
+function emit(s, name) {
+  if (s.dead || !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 (!s.dead) report(s, e);
+    });
+  } catch (e) {
+    report(s, e);
+  }
+}
+function button(label, fn, key, cls) {
+  var b = el("button", "blu-platform__button " + (cls || ""), label);
+  b.type = "button";
+  if (key) at(b, "data-focus", key);
+  b.addEventListener("click", fn);
+  return b;
+}
+function select(values, value, label, fn, key) {
+  var n = el("select", "blu-platform__input");
+  at(n, "aria-label", label);
+  if (key) at(n, "data-focus", key);
+  values.forEach(function(v) {
+    var o = el("option", "", typeof v === "string" ? v : v.label);
+    o.value = typeof v === "string" ? v : v.value;
+    n.append(o);
+  });
+  n.value = text(value);
+  n.addEventListener("change", function() {
+    fn(n.value);
+  });
+  return n;
+}
+function input(value, label, fn, key, type) {
+  var n = el("input", "blu-platform__input");
+  n.type = type || "text";
+  n.value = text(value);
+  at(n, "aria-label", label);
+  if (key) at(n, "data-focus", key);
+  n.addEventListener("change", function() {
+    fn(n.value);
+  });
+  return n;
+}
+function focusState(root) {
+  var a = document.activeElement;
+  return a && root.contains(a) ? { key: a.getAttribute("data-focus"), start: a.selectionStart, end: a.selectionEnd } : null;
+}
+function restoreFocus(root, f) {
+  if (!f || !f.key) return false;
+  var n = Array.from(root.querySelectorAll("[data-focus]")).find(function(x) {
+    return x.getAttribute("data-focus") === f.key;
+  });
+  if (n && !n.disabled && !n.closest("[hidden]")) {
+    var details = n.closest("details");
+    if (details) details.open = true;
+    n.focus({ preventScroll: true });
+    if (typeof n.setSelectionRange === "function" && f.start != null) {
+      try {
+        n.setSelectionRange(f.start, f.end);
+      } catch (_) {
+      }
+    }
+    return true;
+  }
+  return false;
+}
+function empty(parent, title, detail) {
+  var n = el("div", "blu-platform__empty");
+  n.append(el("strong", "", title), el("p", "", detail || ""));
+  parent.append(n);
+  return n;
+}
+function svg(tag, attrs) {
+  var n = document.createElementNS(ns, tag);
+  Object.keys(attrs || {}).forEach(function(k) {
+    at(n, k, attrs[k]);
+  });
+  return n;
+}
+function dispose(key) {
+  var s = shared.states.get(key);
+  if (!s) return;
+  s.dead = true;
+  s.cleanup.forEach(function(f) {
+    f();
+  });
+  if (s.destroy) s.destroy();
+  s.root.remove();
+  if (s.host._bluPlatformOwner === key) delete s.host._bluPlatformOwner;
+  shared.states.delete(key);
+}
+function define(kind, cls, init, update) {
+  return { sync: function(id, options, events, owner) {
+    var host = document.getElementById(id);
+    if (!host) return "Component host was not found.";
+    var key = owner || id, s = shared.states.get(key);
+    if (s && (s.host !== host || s.kind !== kind)) {
+      dispose(key);
+      s = null;
+    }
+    if (host._bluPlatformOwner && host._bluPlatformOwner !== key) dispose(host._bluPlatformOwner);
+    if (!s) {
+      s = { host, key, kind, uid: uid("blu-platform"), cleanup: [], events: {}, options: {} };
+      s.root = el("section", "blu-platform " + cls);
+      s.body = el("div", "blu-platform__body");
+      s.status = at(el("p", "blu-platform__status"), "role", "status");
+      at(s.status, "aria-live", "polite");
+      s.error = at(el("p", "blu-platform__error"), "role", "alert");
+      s.error.hidden = true;
+      s.root.append(s.body, s.status, s.error);
+      host.append(s.root);
+      shared.states.set(key, s);
+      s.needsInit = true;
+    }
+    host._bluPlatformOwner = key;
+    s.options = options || {};
+    s.events = events || {};
+    at(s.root, "aria-label", s.options.AccessibleLabel || kind.replace(/([a-z])([A-Z])/g, "$1 $2"));
+    var preview = host.nextElementSibling;
+    if (preview && preview.classList.contains("blu-component-preview")) preview.hidden = true;
+    try {
+      if (s.needsInit) {
+        init(s);
+        s.needsInit = false;
+      }
+      update(s);
+      report(s, "");
+      return "";
+    } catch (e) {
+      report(s, e);
+      return e.message || String(e);
+    }
+  }, destroy: dispose };
+}
+function inboxItems(raw) {
+  return keyed(list(raw, "Items", 1e4), "Items").map(function(item) {
+    color(item.Color);
+    if (item.Timestamp && !Number.isFinite(Date.parse(item.Timestamp))) throw Error("Notification timestamps must be valid ISO dates.");
+    return { Key: item.Key, Title: text(item.Title), Description: text(item.Description), Category: text(item.Category), Timestamp: text(item.Timestamp), Color: item.Color || "Primary", IsRead: !!item.IsRead, IsArchived: !!item.IsArchived, ActionLabel: text(item.ActionLabel) };
+  });
+}
+function inboxInit(s) {
+  s.items = [];
+  s.search = "";
+  s.filter = "All";
+  s.category = "";
+  s.open = false;
+  s.panel = el("section", "blu-platform blu-notification-center__panel");
+  s.panel.id = s.uid + "-inbox";
+  s.position = function() {
+    if (s.options.DisplayMode === "Inline" || !s.open || !s.bell) return;
+    var r = s.bell.getBoundingClientRect(), width = Math.min(420, global.innerWidth - 24), height = Math.min(580, global.innerHeight - 32), left = Math.max(12, Math.min(r.right - width, global.innerWidth - width - 12)), below = global.innerHeight - r.bottom - 12, top = below >= Math.min(height, 280) ? r.bottom + 8 : Math.max(12, r.top - height - 8);
+    s.panel.style.width = width + "px";
+    s.panel.style.left = left + "px";
+    s.panel.style.top = top + "px";
+    s.panel.style.maxHeight = Math.max(160, global.innerHeight - top - 12) + "px";
+  };
+  s.toggle = function(value, restore) {
+    s.open = value;
+    s.draw();
+    emit(s, "OpenChanged", value);
+    if (value) {
+      var search = s.panel.querySelector('input[type="search"]');
+      if (search) search.focus();
+    } else if (restore && s.bell) s.bell.focus();
+  };
+  s.mutate = function(key, reason) {
+    if (s.options.IsDisabled) return;
+    s.items.forEach(function(item) {
+      if (key && item.Key !== key) return;
+      if (reason === "Read" || reason === "ReadAll") item.IsRead = true;
+      if (reason === "Unread") item.IsRead = false;
+      if (reason === "Archive") item.IsArchived = true;
+      if (reason === "Restore") item.IsArchived = false;
+    });
+    s.draw();
+    emit(s, "ItemsChanged", json(s.items), key, reason);
+    announce(s, reason === "ReadAll" ? "All notifications marked read." : "Notification " + ({ Read: "marked read", Unread: "marked unread", Archive: "archived", Restore: "restored" }[reason] || "updated") + ".");
+  };
+  s.draw = function() {
+    var f = focusState(s.panel) || focusState(s.root), o = s.options, inline = o.DisplayMode === "Inline", unread = s.items.filter(function(i) {
+      return !i.IsRead && !i.IsArchived;
+    }).length;
+    clear(s.body);
+    if (!inline) {
+      s.bell = button("", function() {
+        s.toggle(!s.open, true);
+      }, "inbox-bell", "blu-notification-center__bell");
+      var icon = svg("svg", { viewBox: "0 0 24 24", "aria-hidden": "true", width: 22, height: 22, fill: "none", stroke: "currentColor", "stroke-width": 1.8 });
+      icon.append(svg("path", { d: "M18 8a6 6 0 0 0-12 0c0 7-3 7-3 9h18c0-2-3-2-3-9M10 21h4" }));
+      s.bell.append(icon, el("span", "", unread ? String(unread) : "Notifications"));
+      at(s.bell, "aria-label", (o.Title || "Notifications") + ", " + unread + " unread");
+      at(s.bell, "aria-expanded", s.open);
+      at(s.bell, "aria-controls", s.panel.id);
+      at(s.bell, "aria-haspopup", "dialog");
+      s.body.append(s.bell);
+    }
+    s.panel.classList.toggle("blu-notification-center__panel--popover", !inline);
+    s.panel.hidden = !inline && !s.open;
+    if (inline) {
+      s.panel.removeAttribute("role");
+      s.panel.style.cssText = "";
+      s.root.insertBefore(s.panel, s.status);
+    } else {
+      at(s.panel, "role", "dialog");
+      at(s.panel, "aria-modal", "false");
+      document.body.append(s.panel);
+    }
+    at(s.panel, "aria-label", o.Title || "Notifications");
+    clear(s.panel);
+    var header = el("div", "blu-platform__toolbar");
+    header.append(el("h3", "blu-platform__heading", o.Title || "Notifications"), el("span", "blu-platform__count", unread + " unread"));
+    if (!inline) header.append(button("Close", function() {
+      s.toggle(false, true);
+    }, "close-inbox"));
+    s.panel.append(header);
+    var search = input(s.search, "Search notifications", function(v) {
+      s.search = v;
+      s.draw();
+    }, "search-notifications", "search");
+    search.placeholder = "Search notifications";
+    search.addEventListener("input", function() {
+      s.search = search.value;
+      s.draw();
+    });
+    s.panel.append(search);
+    var filters = el("div", "blu-platform__toolbar");
+    ["All", "Unread", "Archived"].forEach(function(value) {
+      var b = button(value, function() {
+        s.filter = value;
+        s.draw();
+      }, "inbox-filter-" + value);
+      at(b, "aria-pressed", s.filter === value);
+      filters.append(b);
+    });
+    var cats = Array.from(new Set(s.items.map(function(i) {
+      return i.Category;
+    }).filter(Boolean)));
+    if (cats.length) {
+      if (s.category && cats.indexOf(s.category) < 0) s.category = "";
+      filters.append(select([{ value: "", label: "All categories" }].concat(cats.map(function(c) {
+        return { value: c, label: c };
+      })), s.category, "Notification category", function(v) {
+        s.category = v;
+        s.draw();
+      }, "inbox-category"));
+    }
+    s.panel.append(filters);
+    var mark = button("Mark all read", function() {
+      s.mutate("", "ReadAll");
+    }, "mark-all-read");
+    mark.disabled = !!o.IsDisabled || !unread;
+    s.panel.append(mark);
+    var query = s.search.toLowerCase(), items = s.items.filter(function(i) {
+      return (s.filter === "Archived" ? i.IsArchived : !i.IsArchived) && (s.filter !== "Unread" || !i.IsRead) && (!s.category || i.Category === s.category) && (!query || (i.Title + " " + i.Description).toLowerCase().indexOf(query) >= 0);
+    });
+    var listNode = el("ul", "blu-notification-center__list");
+    items.forEach(function(item) {
+      var li = el("li", "blu-notification-center__item" + (item.IsRead ? "" : " blu-notification-center__item--unread"));
+      li.style.setProperty("--blu-inbox-color", "var(--bluui-color-" + color(item.Color) + "-text)");
+      li.append(el("h4", "", item.Title));
+      if (!item.IsRead) li.append(el("span", "blu-platform__sr", "Unread"));
+      if (item.Description) li.append(el("p", "", item.Description));
+      var meta = el("div", "blu-platform__muted");
+      if (item.Category) meta.append(el("span", "", item.Category));
+      if (item.Timestamp) {
+        var date = el("time", "", new Date(item.Timestamp).toLocaleString(void 0, { dateStyle: "medium", timeStyle: "short" }));
+        date.dateTime = item.Timestamp;
+        meta.append(date);
+      }
+      li.append(meta);
+      var actions = el("div", "blu-notification-center__actions");
+      var read = button(item.IsRead ? "Mark unread" : "Mark read", function() {
+        s.mutate(item.Key, item.IsRead ? "Unread" : "Read");
+      }, "read-" + item.Key), archive = button(item.IsArchived ? "Restore" : "Archive", function() {
+        s.mutate(item.Key, item.IsArchived ? "Restore" : "Archive");
+      }, "archive-" + item.Key);
+      read.disabled = archive.disabled = !!o.IsDisabled;
+      actions.append(read, archive);
+      if (item.ActionLabel) {
+        var action = button(item.ActionLabel, function() {
+          if (!item.IsRead) s.mutate(item.Key, "Read");
+          emit(s, "Action", item.Key);
+        }, "action-" + item.Key, "blu-platform__button--primary");
+        action.disabled = !!o.IsDisabled;
+        actions.append(action);
+      }
+      li.append(actions);
+      listNode.append(li);
+    });
+    if (items.length) s.panel.append(listNode);
+    else empty(s.panel, o.IsLoading ? "Loading notifications\u2026" : "You\u2019re all caught up", s.search || s.category ? "No notifications match these filters." : "Notifications will appear here.");
+    if (o.HasMore) {
+      var more = button(o.IsLoading ? "Loading\u2026" : "Load more", function() {
+        emit(s, "LoadMore", s.items.length);
+      }, "load-notifications");
+      more.disabled = !!o.IsLoading || !!o.IsDisabled;
+      s.panel.append(more);
+    } else if (o.IsLoading && items.length) s.panel.append(el("p", "blu-platform__muted", "Loading notifications\u2026"));
+    s.position();
+    var restored = restoreFocus(s.panel, f) || restoreFocus(s.root, f);
+    if (f && !restored && !s.panel.hidden) {
+      var fallback = s.panel.querySelector(".blu-notification-center__actions button:not(:disabled)") || s.panel.querySelector("input");
+      if (fallback) fallback.focus({ preventScroll: true });
+    }
+  };
+  on(s, document, "pointerdown", function(e) {
+    if (s.open && s.options.DisplayMode !== "Inline" && !s.panel.contains(e.target) && !s.root.contains(e.target)) s.toggle(false, false);
+  });
+  on(s, document, "keydown", function(e) {
+    if (e.key === "Escape" && s.open && s.options.DisplayMode !== "Inline") {
+      e.preventDefault();
+      s.toggle(false, true);
+    }
+  });
+  on(s, document, "focusin", function(e) {
+    if (s.open && s.options.DisplayMode !== "Inline" && !s.panel.contains(e.target) && !s.root.contains(e.target)) s.toggle(false, false);
+  });
+  on(s, global, "resize", s.position);
+  on(s, document, "scroll", s.position, true);
+  s.destroy = function() {
+    s.panel.remove();
+  };
+}
+function inboxUpdate(s) {
+  var o = s.options;
+  if (o.DisplayMode && ["Inline", "Popover"].indexOf(o.DisplayMode) < 0) throw Error("DisplayMode must be Inline or Popover.");
+  var items = inboxItems(o.ItemsJson), raw = json(items);
+  if (raw !== s.lastItems) {
+    s.items = items;
+    s.lastItems = raw;
+  }
+  if (s.lastOpen !== o.IsOpen) {
+    s.open = !!o.IsOpen;
+    s.lastOpen = o.IsOpen;
+  }
+  s.draw();
+}
+function installNotificationCenter() {
+  return register("NotificationCenter", () => define("NotificationCenter", "blu-notification-center", inboxInit, inboxUpdate));
+}
+export {
+  installNotificationCenter
+};

package/src/runtime/notification.d.ts

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