@blukavantui/community 0.0.0-stage → 1.1.0

package/src/runtime/float-button.js

@@ -0,0 +1,171 @@
+// ../blu-grid/docs/scripts/chat/shared.js
+import { state, register } from "./kernel.js";
+var shared = state("chat", () => ({ instances: /* @__PURE__ */ new Map(), serial: 0 }));
+var uid = (prefix) => prefix + "-" + ++shared.serial;
+function node(tag, cls, text) {
+  const n = document.createElement(tag);
+  if (cls) n.className = cls;
+  if (text !== void 0) n.textContent = String(text);
+  return n;
+}
+function attr(n, name, value) {
+  n.setAttribute(name, String(value));
+  return n;
+}
+function button(label, action, cls = "blu-chat__button") {
+  const n = node("button", cls, label);
+  n.type = "button";
+  n.addEventListener("click", action);
+  return n;
+}
+function emit(s, name, ...args) {
+  if (s.dead || !s.events[name]) return;
+  try {
+    Promise.resolve(s.events[name](...args)).catch((e) => report(s, e));
+  } catch (e) {
+    report(s, e);
+  }
+}
+function report(s, e) {
+  if (s.dead) return;
+  const message = e?.message || String(e);
+  s.notice.textContent = message;
+  if (s.lastError !== message) {
+    s.lastError = message;
+    emit(s, "Error", message);
+  }
+}
+function createAPI(kind, init, update) {
+  const destroy = (key) => {
+    const s = shared.instances.get(key);
+    if (!s || s.kind !== kind) return;
+    s.dead = true;
+    s.dispose?.();
+    s.root.remove();
+    s.notice.remove();
+    if (s.host._bluChatOwner === key) delete s.host._bluChatOwner;
+    shared.instances.delete(key);
+  };
+  return register(kind, () => ({ sync(id, options = {}, events = {}, owner) {
+    const host = document.getElementById(id);
+    if (!host) return "Chat component host was not found.";
+    const key = owner || id;
+    let s = shared.instances.get(key);
+    if (s && (s.host !== host || s.kind !== kind)) {
+      s.destroy(s.key);
+      s = null;
+    }
+    const old = shared.instances.get(host._bluChatOwner);
+    if (old && old !== s) old.destroy(old.key);
+    if (!s) {
+      s = { key, host, kind, uid: uid("blu-chat"), events, options, dead: false, destroy };
+      s.root = node("div");
+      s.notice = attr(node("div", "blu-chat-sr"), "role", "status");
+      attr(s.notice, "aria-atomic", "true");
+      host.append(s.root, s.notice);
+      shared.instances.set(key, s);
+      host._bluChatOwner = key;
+      try {
+        init(s);
+      } catch (e) {
+        destroy(key);
+        throw e;
+      }
+    }
+    s.events = events;
+    s.options = options;
+    try {
+      update(s);
+      s.lastError = "";
+      host.dataset.bluRuntimeReady = "true";
+      return "";
+    } catch (e) {
+      report(s, e);
+      return e.message || String(e);
+    }
+  }, destroy }));
+}
+function icon(name) {
+  const paths = { Chat: "M21 11.5a8.4 8.4 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.4 8.4 0 0 1-3.8-.9L3 21l1.9-5.7a8.4 8.4 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.4 8.4 0 0 1 3.8-.9H13a8.5 8.5 0 0 1 8 8v.5Z", Plus: "M12 5v14M5 12h14", Up: "m5 12 7-7 7 7M12 5v14", Help: "M9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3m.1 4h.01M22 12a10 10 0 1 1-20 0 10 10 0 0 1 20 0", Feedback: "M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2ZM7 8h10M7 12h6", Close: "m6 6 12 12M6 18 18 6", Expand: "M8 3H3v5m13-5h5v5M3 16v5h5m13-5v5h-5", Send: "m22 2-7 20-4-9-9-4 20-7ZM22 2 11 13", Stop: "M6 6h12v12H6Z" };
+  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  for (const [k, v] of Object.entries({ viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.8", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true", focusable: "false" })) svg.setAttribute(k, v);
+  const p = document.createElementNS(svg.namespaceURI, "path");
+  p.setAttribute("d", paths[name] || paths.Chat);
+  svg.append(p);
+  return svg;
+}
+
+// ../blu-grid/docs/scripts/chat/float-button.js
+function syncIcon(s) {
+  const name = s.options.Icon || "Chat", url = String(s.options.IconUrl || "").trim();
+  if (s.iconName === name && s.iconUrl === url) return;
+  if (s.iconImage) s.iconImage.onload = s.iconImage.onerror = null;
+  s.iconName = name;
+  s.iconUrl = url;
+  s.iconImage = null;
+  s.glyph.replaceChildren(icon(name));
+  if (!url) return;
+  let source;
+  try {
+    source = new URL(url, document.baseURI);
+    if (!["https:", "http:"].includes(source.protocol)) throw Error();
+  } catch (_) {
+    report(s, "FloatButton IconUrl must be an HTTP(S) or relative image URL. Using the built-in Icon.");
+    return;
+  }
+  const img = node("img");
+  s.iconImage = img;
+  img.alt = "";
+  img.width = 24;
+  img.height = 24;
+  img.draggable = false;
+  img.onload = () => {
+    if (!s.dead && s.iconImage === img) s.glyph.replaceChildren(img);
+  };
+  img.onerror = () => {
+    if (!s.dead && s.iconImage === img) report(s, "FloatButton could not load IconUrl. Using the built-in Icon.");
+  };
+  img.src = source.href;
+}
+function installFloatButton() {
+  return createAPI("FloatButton", (s) => {
+    s.root.className = "blu-float";
+    s.button = button("", () => {
+      if (!s.options.IsDisabled) emit(s, "Click");
+    }, "blu-float__button");
+    s.glyph = node("span", "blu-float__icon");
+    s.label = node("span", "blu-float__label");
+    s.badge = node("span", "blu-float__badge");
+    attr(s.glyph, "aria-hidden", "true");
+    s.dispose = () => {
+      if (s.iconImage) s.iconImage.onload = s.iconImage.onerror = null;
+    };
+    attr(s.badge, "aria-hidden", "true");
+    s.button.append(s.glyph, s.label, s.badge);
+    s.root.append(s.button);
+  }, (s) => {
+    const o = s.options, label = String(o.Label || "Open chat"), placement = ["BottomLeft", "TopLeft", "TopRight"].includes(o.Placement) ? o.Placement : "BottomRight";
+    s.root.dataset.placement = placement;
+    s.root.dataset.position = o.Position === "Container" ? "Container" : "Viewport";
+    s.root.dataset.animate = String(o.Animate !== false);
+    s.root.dataset.shape = o.Shape === "Square" ? "Square" : "Circle";
+    s.root.style.setProperty("--blu-float-offset", Math.max(8, Math.min(160, Number(o.Offset) || 24)) + "px");
+    const color = String(o.Color || "Primary").toLowerCase().replace(/[^a-z]/g, "");
+    s.root.style.setProperty("--blu-float-solid", `var(--bluui-color-${color}-solid,var(--bluui-color-primary-solid,#4f46e5))`);
+    s.root.style.setProperty("--blu-float-contrast", `var(--bluui-color-${color}-contrast,#fff)`);
+    const target = o.Position === "Container" ? s.host : document.body;
+    if (s.root.parentNode !== target) target.append(s.root);
+    s.button.disabled = !!o.IsDisabled;
+    s.button.title = label;
+    const badge = Math.max(0, Math.floor(Number(o.BadgeCount) || 0));
+    attr(s.button, "aria-label", label + (badge ? `, ${badge} unread` : ""));
+    s.label.textContent = label;
+    s.label.hidden = !o.ShowLabel;
+    s.badge.textContent = badge > 99 ? "99+" : String(badge);
+    s.badge.hidden = !badge;
+    syncIcon(s);
+  });
+}
+export {
+  installFloatButton
+};

package/src/runtime/font-provider.d.ts

@@ -0,0 +1 @@
+export function installFontProvider(): unknown;