@blukavantui/community 0.0.0-stage → 1.1.0

package/src/runtime/tree.js

@@ -0,0 +1,302 @@
+// ../blu-grid/docs/scripts/modules/tree-transfer.js
+import { global, runtime, state, register } from "./kernel.js";
+var shared = /* @__PURE__ */ state("tree", () => ({ trees: /* @__PURE__ */ new Map() }));
+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 element(tag, className, text) {
+  var el = document.createElement(tag);
+  if (className) el.className = className;
+  if (text !== void 0) el.textContent = text;
+  return el;
+}
+function notify(entry, name, value) {
+  if (!entry.events[name]) return;
+  function report(error) {
+    if (!entry.events.Error) return;
+    try {
+      Promise.resolve(entry.events.Error(error.message)).catch(function() {
+      });
+    } catch (ignored) {
+    }
+  }
+  try {
+    Promise.resolve(entry.events[name](value)).catch(report);
+  } catch (error) {
+    report(error);
+  }
+}
+function revealSelection(entry) {
+  var node = entry.model.map.get(entry.selected);
+  while (node && node.ParentKey) {
+    entry.expanded.add(node.ParentKey);
+    node = entry.model.map.get(node.ParentKey);
+  }
+}
+function render(entry, takeFocus) {
+  var oldFocus = entry.focusKey, nodes = /* @__PURE__ */ new Map(), previous = entry.dom || /* @__PURE__ */ new Map();
+  var root = entry.root || element("ul", "blu-tree__list");
+  entry.root = root;
+  root.setAttribute("role", "tree");
+  root.setAttribute("aria-label", entry.options.AccessibleLabel || "Tree");
+  root.setAttribute("aria-disabled", String(entry.options.IsDisabled === true));
+  root.removeAttribute("tabindex");
+  var stack = [{ children: entry.model.roots, parent: root, depth: 1 }];
+  while (stack.length) {
+    var frame = stack.pop(), groups = [];
+    frame.children.forEach(function(item, index) {
+      var li = previous.get(item.Key), row, toggle2, label;
+      if (!li) {
+        li = element("li", "blu-tree__item");
+        li.dataset.key = item.Key;
+        li.setAttribute("role", "treeitem");
+        row = element("div", "blu-tree__row");
+        toggle2 = element("span", "blu-tree__toggle");
+        toggle2.dataset.toggle = "true";
+        toggle2.setAttribute("aria-hidden", "true");
+        row.appendChild(toggle2);
+        row.appendChild(element("span", "blu-tree__label"));
+        li.appendChild(row);
+      }
+      row = li.firstElementChild;
+      toggle2 = row.firstElementChild;
+      label = row.lastElementChild;
+      if (label.textContent !== item.Label) label.textContent = item.Label;
+      var symbol = item.children.length ? entry.expanded.has(item.Key) ? "\u25BE" : "\u25B8" : "";
+      if (toggle2.textContent !== symbol) toggle2.textContent = symbol;
+      li.setAttribute("aria-label", item.Label);
+      li.setAttribute("aria-level", String(frame.depth));
+      li.setAttribute("aria-posinset", String(index + 1));
+      li.setAttribute("aria-setsize", String(frame.children.length));
+      li.setAttribute("aria-selected", String(entry.selected === item.Key));
+      li.setAttribute("aria-disabled", String(entry.options.IsDisabled === true || item.IsDisabled));
+      li.tabIndex = -1;
+      if (frame.parent.children[index] !== li) frame.parent.insertBefore(li, frame.parent.children[index] || null);
+      nodes.set(item.Key, li);
+      var group = li.children[1];
+      if (item.children.length) {
+        li.setAttribute("aria-expanded", String(entry.expanded.has(item.Key)));
+        if (!group) {
+          group = element("ul", "blu-tree__group");
+          group.setAttribute("role", "group");
+          li.appendChild(group);
+        }
+        group.hidden = !entry.expanded.has(item.Key);
+        groups.push({ children: item.children, parent: group, depth: frame.depth + 1 });
+      } else {
+        li.removeAttribute("aria-expanded");
+        if (group) group.remove();
+      }
+    });
+    for (var i = groups.length - 1; i >= 0; i--) stack.push(groups[i]);
+  }
+  previous.forEach(function(li, key) {
+    if (!nodes.has(key)) li.remove();
+  });
+  if (root.parentNode !== entry.host) entry.host.replaceChildren(root);
+  var visible = Array.from(root.querySelectorAll('[role="treeitem"]')).filter(function(li) {
+    return !li.closest("[hidden]");
+  }).map(function(li) {
+    return li.dataset.key;
+  });
+  entry.visible = visible;
+  entry.dom = nodes;
+  if (entry.empty) {
+    entry.empty.remove();
+    entry.empty = null;
+  }
+  if (!visible.length) {
+    root.tabIndex = 0;
+    entry.focusKey = "";
+    entry.empty = element("p", "blu-tree__empty", entry.options.EmptyText || "No items.");
+    entry.host.appendChild(entry.empty);
+    if (takeFocus && document.activeElement !== root) root.focus({ preventScroll: true });
+    return;
+  }
+  while (oldFocus && visible.indexOf(oldFocus) === -1) {
+    var parent = entry.model.map.get(oldFocus);
+    oldFocus = parent ? parent.ParentKey : "";
+  }
+  entry.focusKey = oldFocus || (visible.indexOf(entry.selected) !== -1 ? entry.selected : visible[0]);
+  var focused = nodes.get(entry.focusKey);
+  focused.tabIndex = 0;
+  if (takeFocus && document.activeElement !== focused) focused.focus({ preventScroll: true });
+}
+function focus(entry, key) {
+  if (!entry.dom.has(key)) return;
+  entry.dom.forEach(function(li2) {
+    li2.tabIndex = -1;
+  });
+  entry.focusKey = key;
+  var li = entry.dom.get(key);
+  li.tabIndex = 0;
+  li.focus({ preventScroll: true });
+  li.querySelector(".blu-tree__row").scrollIntoView({ block: "nearest" });
+}
+function toggle(entry, key) {
+  var item = entry.model.map.get(key);
+  if (entry.options.IsDisabled || item.IsDisabled || !item.children.length) return;
+  if (entry.expanded.has(key)) entry.expanded.delete(key);
+  else entry.expanded.add(key);
+  render(entry, true);
+  notify(entry, "ExpandedChanged", JSON.stringify(Array.from(entry.expanded)));
+}
+function select(entry, key) {
+  if (entry.options.IsDisabled || entry.model.map.get(key).IsDisabled || entry.selected === key) return;
+  entry.selected = key;
+  render(entry, true);
+  notify(entry, "SelectionChanged", key);
+}
+function validateTree(options) {
+  var model = items(options.NodesJson, true), selected = options.SelectedKey || "";
+  if (selected && !model.map.has(selected)) throw new Error("SelectedKey does not exist in Nodes.");
+  return model;
+}
+function create(hostId, options, events) {
+  if (shared.trees.has(hostId)) throw new Error("Tree already exists: " + hostId);
+  var host = document.getElementById(hostId);
+  if (!host) throw new Error("Tree host was not found.");
+  var model = validateTree(options), expanded = keys(options.InitialExpandedKeysJson, model);
+  var entry = { host, options, model, selected: options.SelectedKey || "", expanded, events: events || {}, focusKey: "", typed: "", typedAt: 0 };
+  entry.click = function(event) {
+    var li = event.target.closest('[role="treeitem"]');
+    if (!li || !host.contains(li)) return;
+    focus(entry, li.dataset.key);
+    if (event.target.closest("[data-toggle]")) toggle(entry, li.dataset.key);
+    else select(entry, li.dataset.key);
+  };
+  entry.key = function(event) {
+    var li = event.target.closest('[role="treeitem"]');
+    if (!li || !host.contains(li) || event.altKey || event.ctrlKey || event.metaKey) return;
+    var key = li.dataset.key, item = entry.model.map.get(key), index = entry.visible.indexOf(key), target;
+    switch (event.key) {
+      case "ArrowDown":
+        target = entry.visible[Math.min(index + 1, entry.visible.length - 1)];
+        break;
+      case "ArrowUp":
+        target = entry.visible[Math.max(0, index - 1)];
+        break;
+      case "Home":
+        target = entry.visible[0];
+        break;
+      case "End":
+        target = entry.visible[entry.visible.length - 1];
+        break;
+      case "ArrowRight":
+        if (item.children.length && !entry.expanded.has(key)) toggle(entry, key);
+        else if (item.children.length) target = item.children[0].Key;
+        break;
+      case "ArrowLeft":
+        if (item.children.length && entry.expanded.has(key)) toggle(entry, key);
+        else target = item.ParentKey;
+        break;
+      case "Enter":
+      case " ":
+        select(entry, key);
+        break;
+      default:
+        if (event.key.length !== 1) return;
+        entry.typed = Date.now() - entry.typedAt < 700 ? entry.typed + event.key.toLocaleLowerCase() : event.key.toLocaleLowerCase();
+        entry.typedAt = Date.now();
+        for (var n = 1; n <= entry.visible.length; n++) {
+          var candidate = entry.visible[(index + n) % entry.visible.length];
+          if (entry.model.map.get(candidate).Label.toLocaleLowerCase().indexOf(entry.typed) === 0) {
+            target = candidate;
+            break;
+          }
+        }
+    }
+    event.preventDefault();
+    if (target) focus(entry, target);
+  };
+  entry.focus = function(event) {
+    var li = event.target.closest('[role="treeitem"]');
+    if (li && host.contains(li)) {
+      entry.focusKey = li.dataset.key;
+      entry.dom.forEach(function(node) {
+        node.tabIndex = node === li ? 0 : -1;
+      });
+    }
+  };
+  revealSelection(entry);
+  shared.trees.set(hostId, entry);
+  render(entry, false);
+  host.addEventListener("click", entry.click);
+  host.addEventListener("keydown", entry.key);
+  host.addEventListener("focusin", entry.focus);
+}
+function update(hostId, options) {
+  var entry = shared.trees.get(hostId);
+  if (!entry) throw new Error("Tree is not ready.");
+  var model = validateTree(options), selected = options.SelectedKey || "", hadFocus = entry.host.contains(document.activeElement);
+  var selectionChanged = selected !== entry.selected;
+  entry.model = model;
+  entry.options = options;
+  entry.selected = selected;
+  entry.expanded.forEach(function(key) {
+    if (!model.map.has(key)) entry.expanded.delete(key);
+  });
+  if (selectionChanged) revealSelection(entry);
+  render(entry, hadFocus);
+}
+function destroy(hostId) {
+  var entry = shared.trees.get(hostId);
+  if (!entry) return;
+  entry.host.removeEventListener("click", entry.click);
+  entry.host.removeEventListener("keydown", entry.key);
+  entry.host.removeEventListener("focusin", entry.focus);
+  entry.host.replaceChildren();
+  shared.trees.delete(hostId);
+}
+function installTree() {
+  return register("Tree", () => Object.freeze({ create, update, destroy, validate: validateTree }));
+}
+export {
+  installTree
+};

package/src/runtime/upload-manager.d.ts

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