@blukavantui/community 0.0.0-stage → 1.1.0

package/src/runtime/dashboard-canvas.js

@@ -0,0 +1,493 @@
+// ../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 }));
+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 int(value, fallback, min, max) {
+  var n = value == null ? fallback : Number(value);
+  if (!Number.isInteger(n) || n < min || n > max) throw Error("Expected a whole number from " + min + " to " + max + ".");
+  return n;
+}
+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 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 labelControl(label, control) {
+  var f = el("label", "blu-platform__field");
+  f.append(el("span", "blu-platform__label", label), control);
+  return f;
+}
+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 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 busy(s) {
+  return !!s.pending;
+}
+function startSave(s, snapshot, event, args) {
+  if (busy(s)) return;
+  var hadFocus = s.root.contains(document.activeElement);
+  s.pending = { id: uid("save"), data: copy(snapshot) };
+  announce(s, "Saving changes\u2026");
+  s.draw();
+  if (hadFocus) {
+    at(s.status, "tabindex", "-1");
+    s.status.focus({ preventScroll: true });
+  }
+  emit.apply(null, [s, event, s.pending.id].concat(args));
+}
+function result(s, accept) {
+  var o = s.options;
+  if (!s.pending || o.SaveResultRequestId !== s.pending.id) return;
+  var pending = s.pending;
+  s.pending = null;
+  if (o.SaveResultSuccess) {
+    s.baseline = copy(pending.data);
+    accept && accept();
+    announce(s, o.SaveResultMessage || "Changes saved.");
+  } else announce(s, o.SaveResultMessage || "Changes could not be saved. Your edits are retained.");
+}
+function saveBar(s, dirty, save, discard) {
+  var bar = el("div", "blu-platform__savebar");
+  bar.hidden = !dirty && !busy(s);
+  var b = button(busy(s) ? "Saving\u2026" : "Save changes", save, "save", "blu-platform__button--primary");
+  b.disabled = busy(s);
+  var d = button("Discard", discard, "discard");
+  d.disabled = busy(s);
+  bar.append(el("span", "", dirty + (dirty === 1 ? " change" : " changes")), d, b);
+  return bar;
+}
+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 dashboardPanels(raw, columns) {
+  return keyed(list(raw, "Panels", 200), "Panels").map(function(p) {
+    return { Key: p.Key, Title: text(p.Title) || p.Key, ColumnSpan: Math.min(columns, int(p.ColumnSpan, 6, 1, 12)), RowSpan: int(p.RowSpan, 2, 1, 12), IsHidden: !!p.IsHidden };
+  });
+}
+function dashboardInit(s) {
+  s.editing = false;
+  s.panels = [];
+  s.baseline = [];
+  s.panelNodes = /* @__PURE__ */ new Map();
+  s.content = Array.from(s.host.children).find(function(n) {
+    return n.classList.contains("blu-common-slot--content");
+  });
+  if (!s.content) throw Error("DashboardCanvas requires a Content slot containing DashboardPanel blocks.");
+  s.content.classList.add("blu-dashboard-canvas__grid");
+  s.root.insertBefore(s.content, s.status);
+  s.change = function() {
+    s.draw();
+    emit(s, "LayoutChanged", json(s.panels));
+  };
+  s.move = function(key, index) {
+    if (s.options.IsDisabled || busy(s)) return;
+    var old = s.panels.findIndex(function(p) {
+      return p.Key === key;
+    });
+    if (old < 0 || index < 0 || index >= s.panels.length || old === index) return;
+    s.panels.splice(index, 0, s.panels.splice(old, 1)[0]);
+    announce(s, "Panel moved to position " + (index + 1) + ".");
+    s.change();
+  };
+  s.draw = function() {
+    var f = focusState(s.root), o = s.options, editing = s.editing && o.AllowEditing !== false, locked = !!o.IsDisabled || busy(s);
+    s.root.classList.toggle("blu-dashboard-canvas--editing", editing);
+    s.content.style.setProperty("--blu-dashboard-columns", s.columns);
+    s.content.style.setProperty("--blu-dashboard-row", s.rowHeight + "px");
+    clear(s.body);
+    var tools = el("div", "blu-platform__toolbar");
+    tools.append(el("span", "blu-platform__muted", s.panels.filter(function(p) {
+      return !p.IsHidden;
+    }).length + " visible panels"));
+    if (o.AllowEditing !== false) {
+      var edit = button(editing ? "Done editing" : "Edit layout", function() {
+        s.editing = !s.editing;
+        s.draw();
+      }, "edit-layout");
+      edit.disabled = locked;
+      tools.append(edit);
+      if (editing) {
+        var hidden = s.panels.filter(function(p) {
+          return p.IsHidden;
+        });
+        if (hidden.length) {
+          var restore = select([{ value: "", label: "Restore a hidden panel" }].concat(hidden.map(function(p) {
+            return { value: p.Key, label: p.Title };
+          })), "", "Restore a hidden panel", function(key) {
+            var p = s.panels.find(function(p2) {
+              return p2.Key === key;
+            });
+            if (p) {
+              p.IsHidden = false;
+              s.change();
+              announce(s, p.Title + " restored.");
+            }
+          }, "restore-panel");
+          restore.disabled = locked;
+          tools.append(restore);
+        }
+      }
+    }
+    s.body.append(tools);
+    var dirty = s.panels.reduce(function(n, p, i) {
+      return n + (json(p) !== json(s.baseline[i]) ? 1 : 0);
+    }, 0);
+    s.body.append(saveBar(s, dirty, function() {
+      startSave(s, s.panels, "SaveRequested", [json(s.panels)]);
+    }, function() {
+      s.panels = copy(s.baseline);
+      s.change();
+      announce(s, "Layout changes discarded.");
+    }));
+    var panelElements = Array.from(s.content.querySelectorAll("[data-blu-panel-key]")).filter(function(n) {
+      return n.closest(".blu-dashboard-canvas") === s.root;
+    });
+    var wrappers = panelElements.map(function(n) {
+      var w = n;
+      while (w.parentElement !== s.content && w.parentElement.querySelectorAll("[data-blu-panel-key]").length === 1) w = w.parentElement;
+      return w;
+    });
+    if (wrappers.length && wrappers.every(function(w) {
+      return w.parentElement === wrappers[0].parentElement;
+    })) {
+      var parent = wrappers[0].parentElement, ordered = wrappers.slice().sort(function(a, b) {
+        return s.panels.findIndex(function(p) {
+          return p.Key === (a.matches("[data-blu-panel-key]") ? a : a.querySelector("[data-blu-panel-key]")).getAttribute("data-blu-panel-key");
+        }) - s.panels.findIndex(function(p) {
+          return p.Key === (b.matches("[data-blu-panel-key]") ? b : b.querySelector("[data-blu-panel-key]")).getAttribute("data-blu-panel-key");
+        });
+      });
+      var current = Array.from(parent.children).filter(function(n) {
+        return wrappers.indexOf(n) >= 0;
+      });
+      if (ordered.some(function(n, i) {
+        return n !== current[i];
+      })) ordered.forEach(function(n) {
+        parent.append(n);
+      });
+    }
+    panelElements.forEach(function(node) {
+      var key = node.getAttribute("data-blu-panel-key"), index = s.panels.findIndex(function(p2) {
+        return p2.Key === key;
+      }), p = s.panels[index];
+      var chrome = Array.from(node.children).find(function(n) {
+        return n.classList.contains("blu-dashboard-canvas__panel-header");
+      });
+      if (chrome) chrome.remove();
+      node.classList.add("blu-dashboard-canvas__panel");
+      node.hidden = !p || p.IsHidden;
+      if (!p) return;
+      s.panelNodes.set(key, node);
+      var parent2 = node.parentElement;
+      while (parent2 && parent2 !== s.content) {
+        parent2.classList.add("blu-dashboard-canvas__bridge");
+        parent2 = parent2.parentElement;
+      }
+      node.style.order = String(index);
+      node.style.setProperty("--blu-dashboard-span", p.ColumnSpan);
+      node.style.setProperty("--blu-dashboard-rows", p.RowSpan);
+      at(node, "role", "group");
+      at(node, "aria-label", p.Title);
+      chrome = el("div", "blu-dashboard-canvas__panel-header");
+      chrome.append(el("h3", "blu-dashboard-canvas__panel-title", p.Title));
+      if (editing) {
+        var handle = button("\u283F", function() {
+        }, "drag-" + key, "blu-dashboard-canvas__drag");
+        at(handle, "aria-label", "Drag " + p.Title + "; use Layout options to move without dragging");
+        handle.disabled = locked;
+        handle.addEventListener("pointerdown", function(e) {
+          if (e.button !== 0 || locked) return;
+          e.preventDefault();
+          s.drag = { key, x: e.clientX, y: e.clientY, index, handle };
+          handle.setPointerCapture(e.pointerId);
+        });
+        var details = el("details", "blu-dashboard-canvas__settings");
+        var summary = el("summary", "", "Layout options");
+        at(summary, "data-focus", "settings-" + key);
+        details.append(summary);
+        var choices = el("div", "blu-dashboard-canvas__settings-body"), before = button("Move earlier", function() {
+          s.move(key, index - 1);
+        }, "earlier-" + key), after = button("Move later", function() {
+          s.move(key, index + 1);
+        }, "later-" + key);
+        before.disabled = locked || index === 0;
+        after.disabled = locked || index === s.panels.length - 1;
+        var widths = Array.from({ length: s.columns }, function(_, i) {
+          return { value: String(i + 1), label: i + 1 + " columns" };
+        });
+        var heights = Array.from({ length: 12 }, function(_, i) {
+          return { value: String(i + 1), label: i + 1 + " row units" };
+        });
+        var width = select(widths, p.ColumnSpan, "Width of " + p.Title, function(v) {
+          p.ColumnSpan = Number(v);
+          s.change();
+        }, "width-" + key), height = select(heights, p.RowSpan, "Height of " + p.Title, function(v) {
+          p.RowSpan = Number(v);
+          s.change();
+        }, "height-" + key);
+        width.disabled = height.disabled = locked;
+        var hide = button("Hide panel", function() {
+          p.IsHidden = true;
+          s.change();
+          announce(s, p.Title + " hidden.");
+          var b = s.root.querySelector('[data-focus="restore-panel"]');
+          if (b) b.focus();
+        }, "hide-" + key);
+        hide.disabled = locked;
+        choices.append(before, after, labelControl("Width", width), labelControl("Height", height), hide);
+        details.append(choices);
+        chrome.append(handle, details);
+      }
+      node.prepend(chrome);
+    });
+    restoreFocus(s.root, f);
+  };
+  on(s, document, "pointermove", function(e) {
+    var d = s.drag;
+    if (!d) return;
+    if (!d.ghost && Math.hypot(e.clientX - d.x, e.clientY - d.y) > 5) {
+      var source = s.panelNodes.get(d.key);
+      d.ghost = source.cloneNode(true);
+      d.ghost.querySelectorAll("[id]").forEach(function(n) {
+        n.removeAttribute("id");
+      });
+      d.ghost.removeAttribute("id");
+      d.ghost.className = "blu-dashboard-canvas__ghost";
+      at(d.ghost, "aria-hidden", "true");
+      d.ghost.inert = true;
+      d.ghost.style.width = Math.min(source.getBoundingClientRect().width, 360) + "px";
+      document.body.append(d.ghost);
+    }
+    if (d.ghost) {
+      d.ghost.style.left = e.clientX + 14 + "px";
+      d.ghost.style.top = e.clientY + 14 + "px";
+      var under = document.elementFromPoint(e.clientX, e.clientY), target = under && under.closest("[data-blu-panel-key]");
+      s.panelNodes.forEach(function(n) {
+        n.classList.remove("blu-dashboard-canvas__drop");
+      });
+      if (target && s.content.contains(target)) {
+        d.index = s.panels.findIndex(function(p) {
+          return p.Key === target.getAttribute("data-blu-panel-key");
+        });
+        target.classList.add("blu-dashboard-canvas__drop");
+      }
+    }
+  });
+  function finish(e) {
+    var d = s.drag;
+    if (!d) return;
+    s.drag = null;
+    if (d.ghost) d.ghost.remove();
+    s.panelNodes.forEach(function(n) {
+      n.classList.remove("blu-dashboard-canvas__drop");
+    });
+    if (e.type === "pointerup" && d.ghost) s.move(d.key, d.index);
+  }
+  on(s, document, "pointerup", finish);
+  on(s, document, "pointercancel", finish);
+  on(s, document, "keydown", function(e) {
+    if (e.key === "Escape" && s.drag) finish({ type: "pointercancel" });
+  });
+  var observer = new MutationObserver(function(changes) {
+    if (changes.some(function(c) {
+      return Array.from(c.addedNodes).some(function(n) {
+        return n.nodeType === 1 && (n.hasAttribute("data-blu-panel-key") || n.querySelector("[data-blu-panel-key]"));
+      });
+    })) s.draw();
+  });
+  observer.observe(s.content, { childList: true, subtree: true });
+  s.destroy = function() {
+    observer.disconnect();
+    if (s.drag && s.drag.ghost) s.drag.ghost.remove();
+    s.content.querySelectorAll(".blu-dashboard-canvas__panel-header").forEach(function(n) {
+      n.remove();
+    });
+    s.host.insertBefore(s.content, s.root);
+    s.content.classList.remove("blu-dashboard-canvas__grid");
+  };
+}
+function dashboardUpdate(s) {
+  var o = s.options;
+  s.columns = int(o.Columns, 12, 1, 12);
+  s.rowHeight = int(o.RowHeight, 100, 60, 320);
+  var raw = json(dashboardPanels(o.PanelsJson, s.columns));
+  if (s.lastPanels === void 0 || s.resetKey !== o.ResetKey && !busy(s)) {
+    s.panels = JSON.parse(raw);
+    s.baseline = copy(s.panels);
+    s.resetKey = o.ResetKey;
+  } else if (raw !== s.lastPanels && !busy(s) && raw !== json(s.panels)) {
+    s.panels = JSON.parse(raw);
+    s.baseline = copy(s.panels);
+  }
+  s.lastPanels = raw;
+  result(s);
+  s.draw();
+}
+function installDashboardCanvas() {
+  return register("DashboardCanvas", () => define("DashboardCanvas", "blu-dashboard-canvas", dashboardInit, dashboardUpdate));
+}
+export {
+  installDashboardCanvas
+};

package/src/runtime/date-picker.d.ts

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