@blukavantui/community 0.0.0-stage → 1.1.0

package/src/runtime/transfer.js

@@ -0,0 +1,88 @@
+// ../blu-grid/docs/scripts/modules/tree-transfer.js
+import { global, runtime, state, register } from "./kernel.js";
+function array(json, name) {
+  var value = JSON.parse(json || "[]");
+  if (!Array.isArray(value)) throw new Error(name + " must be a JSON array.");
+  return value;
+}
+function items(json, tree) {
+  var list = array(json, "Items"), map = /* @__PURE__ */ new Map();
+  list.forEach(function(item) {
+    if (!item || typeof item.Key !== "string" || !item.Key.trim()) throw new Error("Every item needs a nonempty Text Key.");
+    if (map.has(item.Key)) throw new Error("Duplicate Key: " + item.Key);
+    if (typeof item.Label !== "string" || !item.Label.trim()) throw new Error("Every item needs a Label.");
+    if (item.IsDisabled !== void 0 && typeof item.IsDisabled !== "boolean") throw new Error("IsDisabled must be Boolean.");
+    if (tree && item.ParentKey !== void 0 && typeof item.ParentKey !== "string") throw new Error("ParentKey must be Text.");
+    if (!tree && item.Description !== void 0 && typeof item.Description !== "string") throw new Error("Description must be Text.");
+    map.set(item.Key, Object.assign({}, item, { ParentKey: item.ParentKey || "", IsDisabled: item.IsDisabled === true, children: [] }));
+  });
+  var ordered = list.map(function(item) {
+    return map.get(item.Key);
+  });
+  if (tree) {
+    ordered.forEach(function(item) {
+      if (item.ParentKey && !map.has(item.ParentKey)) throw new Error("Missing parent for " + item.Key);
+      if (item.ParentKey) map.get(item.ParentKey).children.push(item);
+    });
+    var done = /* @__PURE__ */ new Set();
+    ordered.forEach(function(item) {
+      var path = /* @__PURE__ */ new Set(), current = item;
+      while (current && !done.has(current.Key)) {
+        if (path.has(current.Key)) throw new Error("Tree contains a parent cycle.");
+        path.add(current.Key);
+        current = map.get(current.ParentKey);
+      }
+      path.forEach(function(key) {
+        done.add(key);
+      });
+    });
+  }
+  return { list: ordered, map, roots: ordered.filter(function(item) {
+    return !item.ParentKey;
+  }) };
+}
+function keys(json, model) {
+  var result = /* @__PURE__ */ new Set();
+  array(json, "Keys").forEach(function(key) {
+    if (typeof key !== "string" || !model.map.has(key)) throw new Error("Unknown or invalid key: " + String(key));
+    result.add(key);
+  });
+  return result;
+}
+function selectedJson(model, selection) {
+  return JSON.stringify(model.list.filter(function(item) {
+    return selection.has(item.Key);
+  }).map(function(item) {
+    return item.Key;
+  }));
+}
+function project(itemsJson, selectedKeysJson, availableSearch, selectedSearch) {
+  var model = items(itemsJson, false), selection = keys(selectedKeysJson, model);
+  function rows(chosen, query) {
+    query = String(query || "").trim().toLocaleLowerCase();
+    return model.list.filter(function(item) {
+      return selection.has(item.Key) === chosen && (item.Label + " " + (item.Description || "")).toLocaleLowerCase().indexOf(query) !== -1;
+    }).map(function(item) {
+      return { Key: item.Key, Label: item.Label, Description: item.Description || "", IsDisabled: item.IsDisabled, IsMarked: false };
+    });
+  }
+  return { AvailableRowsJson: JSON.stringify(rows(false, availableSearch)), SelectedRowsJson: JSON.stringify(rows(true, selectedSearch)), AvailableCount: model.list.length - selection.size, SelectedCount: selection.size };
+}
+function move(itemsJson, selectedKeysJson, rowsJson, add) {
+  var model = items(itemsJson, false), selection = keys(selectedKeysJson, model);
+  array(rowsJson, "Rows").forEach(function(row) {
+    var item = row && model.map.get(row.Key);
+    if (!item) throw new Error("A marked row no longer exists. Refresh the list.");
+    if (row.IsMarked === true && !item.IsDisabled) {
+      if (add) selection.add(item.Key);
+      else selection.delete(item.Key);
+    }
+  });
+  return selectedJson(model, selection);
+}
+function installTransfer() {
+  return register("Transfer", () => Object.freeze({ project, move }));
+}
+export {
+  installTransfer
+};

package/src/runtime/tree-select.d.ts

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

package/src/runtime/tree-select.js

@@ -0,0 +1,420 @@
+// ../blu-grid/docs/scripts/modules/interactive.js
+import { global, runtime, state, register } from "./kernel.js";
+var shared = /* @__PURE__ */ state("interactive", () => ({ instances: /* @__PURE__ */ new Map(), nextId: 0 }));
+function el(tag, cls, text) {
+  var x = document.createElement(tag);
+  if (cls) x.className = cls;
+  if (text !== void 0) x.textContent = text;
+  return x;
+}
+function attr(x, name, value) {
+  x.setAttribute(name, String(value));
+  return x;
+}
+function clear(x) {
+  while (x.firstChild) x.removeChild(x.firstChild);
+}
+function button(text, fn, cls, disabled) {
+  var b = el("button", "blu-control " + (cls || ""), text);
+  b.type = "button";
+  b.disabled = !!disabled;
+  b.addEventListener("click", fn);
+  return b;
+}
+function input(type, value, label, fn) {
+  var x = el("input", "blu-input");
+  x.type = type;
+  x.value = value === void 0 ? "" : String(value);
+  attr(x, "aria-label", label);
+  if (fn) x.addEventListener("change", function() {
+    fn(x.value);
+  });
+  return x;
+}
+function array(s, label) {
+  var x = typeof s === "string" ? JSON.parse(s || "[]") : s;
+  if (!Array.isArray(x)) throw new Error(label + " must be a JSON array.");
+  return x;
+}
+function unique(list, label) {
+  var map = /* @__PURE__ */ new Map();
+  if (list.length > 2e3) throw new Error(label + " supports up to 2,000 local items.");
+  list.forEach(function(x) {
+    if (!x || typeof x.Key !== "string" || !x.Key.trim() || typeof x.Label !== "string" || !x.Label.trim()) throw new Error(label + ": every item needs a Key and Label.");
+    if (map.has(x.Key)) throw new Error("Duplicate key: " + x.Key);
+    map.set(x.Key, x);
+  });
+  return map;
+}
+function emit(s, name) {
+  if (s.disposed || !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") emit(s, "Error", e.message || String(e));
+    });
+  } catch (e) {
+    if (name !== "Error") emit(s, "Error", e.message || String(e));
+  }
+}
+function error(s, message) {
+  s.error.textContent = message;
+  s.error.hidden = !message;
+  if (message) emit(s, "Error", message);
+}
+function shell(s, cls) {
+  s.root = el("div", cls);
+  s.error = attr(el("div", "blu-component-error"), "role", "alert");
+  s.error.hidden = true;
+  clear(s.host);
+  s.host.appendChild(s.root);
+  s.host.appendChild(s.error);
+}
+function listen(s, target, name, fn, capture) {
+  target.addEventListener(name, fn, capture);
+  s.cleanup.push(function() {
+    target.removeEventListener(name, fn, capture);
+  });
+}
+function keys(raw, map) {
+  var seen = /* @__PURE__ */ new Set();
+  array(raw, "SelectedKeysJson").forEach(function(k) {
+    if (typeof k !== "string" || !map.has(k)) throw new Error("Unknown selected key: " + k);
+    seen.add(k);
+  });
+  return seen;
+}
+function serializeKeys(s) {
+  return JSON.stringify(s.items.filter(function(x) {
+    return s.selected.has(x.Key);
+  }).map(function(x) {
+    return x.Key;
+  }));
+}
+function begin(hostId, kind, options, events, ownerKey) {
+  var mapKey = ownerKey || hostId;
+  var host = document.getElementById(hostId);
+  if (!host) throw new Error(kind + " host was not found.");
+  var old = shared.instances.get(mapKey);
+  if (old && (old.kind !== kind || old.host !== host)) destroy(mapKey);
+  var s = shared.instances.get(mapKey);
+  if (!s) {
+    s = { host, id: hostId, key: mapKey, uid: "blu-interactive-" + ++shared.nextId, kind, cleanup: [], options: {}, events: events || {}, disposed: false };
+    shared.instances.set(mapKey, s);
+  }
+  host._bluOwnerKey = mapKey;
+  s.events = events || s.events;
+  return s;
+}
+function destroy(hostId) {
+  var s = shared.instances.get(hostId);
+  if (!s) return;
+  s.disposed = true;
+  if (s.dispose) s.dispose();
+  s.cleanup.forEach(function(f) {
+    f();
+  });
+  if (s.host._bluOwnerKey === s.key) {
+    clear(s.host);
+    delete s.host._bluOwnerKey;
+  }
+  shared.instances.delete(hostId);
+}
+function api(kind, update) {
+  return Object.freeze({ sync: function(id, options, events, ownerKey) {
+    var mapKey = ownerKey || id;
+    var s = begin(id, kind, options, events, ownerKey);
+    try {
+      update(s, options);
+      return "";
+    } catch (e) {
+      destroy(mapKey);
+      s = begin(id, kind, options, events, ownerKey);
+      shell(s, "blu-interactive");
+      error(s, e.message);
+      return e.message;
+    }
+  }, destroy: function(key) {
+    var s = shared.instances.get(key);
+    if (s && s.kind === kind) destroy(key);
+  } });
+}
+function treeModel(items) {
+  var map = unique(items, "Nodes"), children = /* @__PURE__ */ new Map(), done = /* @__PURE__ */ new Set();
+  items.forEach(function(n2) {
+    var parent = n2.ParentKey || "";
+    if (parent && !map.has(parent)) throw new Error("Missing parent: " + parent);
+    if (!children.has(parent)) children.set(parent, []);
+    children.get(parent).push(n2);
+  });
+  items.forEach(function(n2) {
+    var path = /* @__PURE__ */ new Set(), cur = n2;
+    while (cur && !done.has(cur.Key)) {
+      if (path.has(cur.Key)) throw new Error("Tree contains a cycle.");
+      path.add(cur.Key);
+      cur = map.get(cur.ParentKey);
+    }
+    path.forEach(function(key) {
+      done.add(key);
+    });
+  });
+  var order = (children.get("") || []).slice(), totals = /* @__PURE__ */ new Map();
+  for (var i = 0; i < order.length; i++) (children.get(order[i].Key) || []).forEach(function(n2) {
+    order.push(n2);
+  });
+  for (var j = order.length - 1; j >= 0; j--) {
+    var n = order[j], kids = children.get(n.Key) || [];
+    totals.set(n.Key, n.IsDisabled ? 0 : kids.length ? kids.reduce(function(sum, child) {
+      return sum + totals.get(child.Key);
+    }, 0) : 1);
+  }
+  return { map, children, order, totals };
+}
+function treeLeaves(s, key) {
+  var result = [], queue = [s.map.get(key)];
+  for (var i = 0; i < queue.length; i++) {
+    var x = queue[i];
+    if (x.IsDisabled) continue;
+    var kids = s.children.get(x.Key) || [];
+    if (kids.length) kids.forEach(function(n) {
+      queue.push(n);
+    });
+    else result.push(x.Key);
+  }
+  return result;
+}
+function treeCheckedCounts(s) {
+  var counts = /* @__PURE__ */ new Map();
+  for (var i = s.model.order.length - 1; i >= 0; i--) {
+    var n = s.model.order[i], kids = s.children.get(n.Key) || [];
+    counts.set(n.Key, n.IsDisabled ? 0 : kids.length ? kids.reduce(function(sum, child) {
+      return sum + counts.get(child.Key);
+    }, 0) : s.selected.has(n.Key) ? 1 : 0);
+  }
+  return counts;
+}
+function treeSelection(s, item) {
+  if (s.options.IsDisabled || item.IsDisabled) return;
+  if (s.options.IsMultiple) {
+    var leaves = treeLeaves(s, item.Key), remove = leaves.length && leaves.every(function(k) {
+      return s.selected.has(k);
+    });
+    leaves.forEach(function(k) {
+      if (remove) s.selected.delete(k);
+      else s.selected.add(k);
+    });
+  } else {
+    if (s.options.LeavesOnly && (s.children.get(item.Key) || []).length) {
+      s.expanded.has(item.Key) ? s.expanded.delete(item.Key) : s.expanded.add(item.Key);
+      renderTreeOptions(s, item.Key);
+      return;
+    }
+    s.selected = /* @__PURE__ */ new Set([item.Key]);
+  }
+  s.lastSelection = serializeKeys(s);
+  emit(s, "SelectionChanged", s.lastSelection);
+  renderTreeTrigger(s);
+  renderTreeOptions(s, item.Key);
+  if (!s.options.IsMultiple) treeOpen(s, false);
+}
+function treeOpen(s, open) {
+  if (s.options.IsDisabled) open = false;
+  s.open = open;
+  s.popup.hidden = !open;
+  attr(s.trigger, "aria-expanded", open);
+  if (open) {
+    s.search.focus();
+    renderTreeOptions(s);
+  } else if (s.popup.contains(document.activeElement)) s.trigger.focus();
+}
+function renderTreeTrigger(s) {
+  clear(s.tokens);
+  s.trigger.textContent = s.selected.size ? s.selected.size + (s.options.IsMultiple ? " selected" : ": " + s.map.get(Array.from(s.selected)[0]).Label) : s.options.Placeholder || "Select items\u2026";
+  attr(s.trigger, "aria-label", (s.options.AccessibleLabel || "Select items") + ": " + s.trigger.textContent);
+  s.trigger.disabled = !!s.options.IsDisabled;
+  s.items.filter(function(x) {
+    return s.selected.has(x.Key);
+  }).forEach(function(x) {
+    var token = el("span", "blu-tree-select__token", x.Label);
+    var remove = button("\xD7", function() {
+      s.selected.delete(x.Key);
+      s.lastSelection = serializeKeys(s);
+      emit(s, "SelectionChanged", s.lastSelection);
+      renderTreeTrigger(s);
+      renderTreeOptions(s);
+      s.trigger.focus();
+    }, "blu-control--icon", s.options.IsDisabled || x.IsDisabled);
+    attr(remove, "aria-label", "Remove " + x.Label);
+    token.appendChild(remove);
+    s.tokens.appendChild(token);
+  });
+}
+function renderTreeOptions(s, focusKey) {
+  clear(s.tree);
+  var query = s.search.value.trim().toLocaleLowerCase(), visible = /* @__PURE__ */ new Set(), rows = [], checked = s.options.IsMultiple ? treeCheckedCounts(s) : null;
+  if (query) s.items.forEach(function(n) {
+    if (n.Label.toLocaleLowerCase().indexOf(query) >= 0) {
+      var cur = n;
+      while (cur && !visible.has(cur.Key)) {
+        visible.add(cur.Key);
+        cur = s.map.get(cur.ParentKey);
+      }
+    }
+  });
+  function group(parent, target) {
+    (s.children.get(parent) || []).forEach(function(n) {
+      if (query && !visible.has(n.Key)) return;
+      var kids = s.children.get(n.Key) || [], open = query ? true : s.expanded.has(n.Key), li = el("li", "blu-tree-select__item"), row = el("div", "blu-tree-select__row");
+      attr(li, "role", "treeitem");
+      attr(li, "aria-label", n.Label);
+      attr(li, "aria-disabled", !!n.IsDisabled);
+      li.dataset.key = n.Key;
+      li.tabIndex = -1;
+      var total = s.model.totals.get(n.Key), chosen = checked ? checked.get(n.Key) : s.selected.has(n.Key) ? 1 : 0;
+      attr(li, s.options.IsMultiple ? "aria-checked" : "aria-selected", s.options.IsMultiple && chosen > 0 && chosen < total ? "mixed" : chosen > 0);
+      if (kids.length) attr(li, "aria-expanded", open);
+      row.appendChild(el("span", "blu-tree-select__chevron", kids.length ? open ? "\u25BE" : "\u25B8" : ""));
+      row.firstChild.dataset.expand = "1";
+      if (s.options.IsMultiple) row.appendChild(attr(el("span", "blu-tree-select__check", chosen ? chosen === total ? "\u2713" : "\u2212" : ""), "aria-hidden", "true"));
+      row.appendChild(el("span", "", n.Label));
+      li.appendChild(row);
+      target.appendChild(li);
+      rows.push(li);
+      if (kids.length && open) {
+        var ul = attr(el("ul", "blu-tree-select__branch"), "role", "group");
+        li.appendChild(ul);
+        group(n.Key, ul);
+      }
+    });
+  }
+  group("", s.tree);
+  s.rows = rows;
+  if (!rows.length) s.tree.appendChild(el("li", "blu-interactive__empty", s.items.length ? "No matching items." : "No items."));
+  var focus = rows.find(function(x) {
+    return x.dataset.key === focusKey;
+  }) || rows[0];
+  if (focus) {
+    focus.tabIndex = 0;
+    if (focusKey) focus.focus();
+  }
+}
+function updateTreeSelect(s, o) {
+  var nodesKey = typeof o.NodesJson === "string" ? o.NodesJson : JSON.stringify(o.NodesJson);
+  var sameNodes = s.model && s.nodesKey === nodesKey;
+  var same = s.ready && sameNodes && s.lastSelection === o.SelectedKeysJson && s.options.IsMultiple === o.IsMultiple && s.options.LeavesOnly === o.LeavesOnly && s.options.IsDisabled === o.IsDisabled && s.options.Placeholder === o.Placeholder && s.options.AccessibleLabel === o.AccessibleLabel;
+  if (same) return;
+  var items = sameNodes ? s.items : array(o.NodesJson, "Nodes"), model = sameNodes ? s.model : treeModel(items), selected = keys(o.SelectedKeysJson, model.map);
+  if (!o.IsMultiple && selected.size > 1) throw new Error("Single selection accepts at most one selected key.");
+  if (o.IsMultiple) selected.forEach(function(k) {
+    if ((model.children.get(k) || []).length) throw new Error("Multiple selection expects leaf keys, not parent keys.");
+  });
+  s.options = o;
+  s.items = items;
+  s.model = model;
+  s.nodesKey = nodesKey;
+  s.map = model.map;
+  s.children = model.children;
+  s.selected = selected;
+  s.lastSelection = serializeKeys(s);
+  if (!s.ready) {
+    shell(s, "blu-tree-select");
+    s.expanded = /* @__PURE__ */ new Set();
+    s.open = false;
+    s.trigger = button("", function() {
+      treeOpen(s, !s.open);
+    }, "blu-tree-select__trigger");
+    attr(s.trigger, "aria-haspopup", "tree");
+    attr(s.trigger, "aria-expanded", "false");
+    attr(s.trigger, "aria-controls", s.uid + "-tree");
+    s.root.appendChild(s.trigger);
+    s.tokens = el("div", "blu-tree-select__tokens");
+    s.root.appendChild(s.tokens);
+    s.popup = el("div", "blu-tree-select__popup");
+    s.popup.hidden = true;
+    s.search = input("search", "", "Search tree items");
+    s.search.placeholder = "Search items\u2026";
+    s.popup.appendChild(s.search);
+    s.tree = attr(el("ul", "blu-tree-select__tree"), "role", "tree");
+    s.tree.id = s.uid + "-tree";
+    s.popup.appendChild(s.tree);
+    s.root.appendChild(s.popup);
+    listen(s, s.search, "input", function() {
+      renderTreeOptions(s);
+    });
+    listen(s, document, "pointerdown", function(e) {
+      if (s.open && !s.root.contains(e.target)) treeOpen(s, false);
+    });
+    listen(s, s.root, "focusout", function(e) {
+      if (s.open && e.relatedTarget && !s.root.contains(e.relatedTarget)) treeOpen(s, false);
+    });
+    listen(s, s.root, "keydown", function(e) {
+      if (e.key === "Escape" && s.open) {
+        e.stopPropagation();
+        e.preventDefault();
+        treeOpen(s, false);
+      }
+      if (e.target === s.search && e.key === "ArrowDown" && s.rows[0]) {
+        e.preventDefault();
+        s.rows[0].focus();
+      }
+      if (e.target === s.trigger && e.key === "ArrowDown") {
+        e.preventDefault();
+        treeOpen(s, true);
+      }
+    });
+    listen(s, s.tree, "click", function(e) {
+      var row = e.target.closest(".blu-tree-select__row");
+      if (!row) return;
+      var li = row.parentNode, item = s.map.get(li.dataset.key);
+      if (e.target.dataset.expand && (s.children.get(item.Key) || []).length) {
+        s.expanded.has(item.Key) ? s.expanded.delete(item.Key) : s.expanded.add(item.Key);
+        renderTreeOptions(s, item.Key);
+      } else treeSelection(s, item);
+    });
+    listen(s, s.tree, "keydown", function(e) {
+      var li = e.target.closest('[role="treeitem"]');
+      if (!li) return;
+      var key = li.dataset.key, item = s.map.get(key), index = s.rows.indexOf(li), next;
+      if (e.key === "ArrowDown") next = s.rows[Math.min(index + 1, s.rows.length - 1)];
+      else if (e.key === "ArrowUp") next = s.rows[Math.max(0, index - 1)];
+      else if (e.key === "Home") next = s.rows[0];
+      else if (e.key === "End") next = s.rows[s.rows.length - 1];
+      else if (e.key === "Enter" || e.key === " ") treeSelection(s, item);
+      else if (e.key === "ArrowRight") {
+        if (!s.expanded.has(key)) {
+          s.expanded.add(key);
+          renderTreeOptions(s, key);
+        } else next = s.rows[index + 1];
+      } else if (e.key === "ArrowLeft") {
+        if (s.expanded.has(key)) {
+          s.expanded.delete(key);
+          renderTreeOptions(s, key);
+        } else next = s.rows.find(function(r) {
+          return r.dataset.key === item.ParentKey;
+        });
+      } else return;
+      e.preventDefault();
+      e.stopPropagation();
+      if (next) {
+        s.rows.forEach(function(r) {
+          r.tabIndex = -1;
+        });
+        next.tabIndex = 0;
+        next.focus();
+      }
+    });
+    s.ready = true;
+  }
+  attr(s.tree, "aria-label", o.AccessibleLabel || "Select items");
+  attr(s.tree, "aria-multiselectable", !!o.IsMultiple);
+  if (o.IsDisabled) treeOpen(s, false);
+  renderTreeTrigger(s);
+  renderTreeOptions(s);
+  error(s, "");
+}
+function installTreeSelect() {
+  return register("TreeSelect", () => api("TreeSelect", updateTreeSelect));
+}
+export {
+  installTreeSelect
+};

package/src/runtime/tree.d.ts

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