@blukavantui/community 0.0.0-stage → 1.1.0

package/src/runtime/upload-manager.js

@@ -0,0 +1,408 @@
+// ../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 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 bounds(value, fallback, min, max) {
+  value = Number(value);
+  return Number.isFinite(value) && value >= min && value <= max ? Math.floor(value) : fallback;
+}
+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 fileSize(n) {
+  return n < 1024 * 1024 ? Math.ceil(n / 1024) + " KB" : (n / 1024 / 1024).toFixed(1) + " MB";
+}
+function queueJson(s) {
+  return JSON.stringify(s.queue.map(function(r) {
+    return { Key: r.key, Name: r.file.name, Size: r.file.size, Type: r.file.type, Status: r.status, Progress: r.progress, ErrorMessage: r.message };
+  }));
+}
+function uploadChanged(s) {
+  renderUploads(s);
+  emit(s, "QueueChanged", queueJson(s));
+}
+function acceptFile(file, accept) {
+  var patterns = String(accept || "").split(",").map(function(x) {
+    return x.trim().toLowerCase();
+  }).filter(Boolean);
+  return !patterns.length || patterns.some(function(p) {
+    if (p[0] === ".") return file.name.toLowerCase().endsWith(p);
+    if (p.endsWith("/*")) return file.type.toLowerCase().startsWith(p.slice(0, -1));
+    return file.type.toLowerCase() === p;
+  });
+}
+function addFiles(s, files) {
+  if (s.options.IsDisabled) return;
+  var messages = [];
+  Array.from(files).forEach(function(f) {
+    if (s.queue.length >= s.maxFiles) {
+      messages.push("At most " + s.maxFiles + " files are allowed.");
+      return;
+    }
+    if (f.size > s.maxSize) {
+      messages.push(f.name + " exceeds " + fileSize(s.maxSize) + ".");
+      return;
+    }
+    if (!acceptFile(f, s.options.Accept)) {
+      messages.push(f.name + " is not an accepted file type.");
+      return;
+    }
+    if (s.queue.some(function(r) {
+      return r.file.name === f.name && r.file.size === f.size && r.file.lastModified === f.lastModified;
+    })) {
+      messages.push(f.name + " is already in the queue.");
+      return;
+    }
+    s.queue.push({ key: s.uid + "-file-" + ++shared.nextId, file: f, status: "queued", progress: 0, message: "", xhr: null, preview: /^image\/(png|jpeg|gif|webp)$/.test(f.type) ? URL.createObjectURL(f) : "" });
+  });
+  error(s, Array.from(new Set(messages)).join(" "));
+  uploadChanged(s);
+}
+function endpoint(s) {
+  if (!s.options.UploadUrl) throw new Error("Configure UploadUrl before starting uploads.");
+  var url = new URL(s.options.UploadUrl, location.href);
+  if (url.protocol !== "https:" && !(url.protocol === "http:" && (url.hostname === "localhost" || url.hostname === "127.0.0.1"))) throw new Error("UploadUrl must use HTTPS.");
+  if (url.username || url.password) throw new Error("Do not put credentials in UploadUrl.");
+  var headers = JSON.parse(s.options.HeadersJson || "{}");
+  if (!headers || Array.isArray(headers) || typeof headers !== "object") throw new Error("HeadersJson must be a JSON object.");
+  Object.keys(headers).forEach(function(k) {
+    if (typeof headers[k] !== "string") throw new Error("Header values must be Text.");
+    if (/^(content-type|content-length|host|cookie)$/i.test(k)) throw new Error("The browser manages header " + k + ".");
+  });
+  return { url: url.href, headers };
+}
+function startUpload(s, row, target) {
+  row.status = "uploading";
+  row.progress = 0;
+  row.message = "";
+  var xhr = new XMLHttpRequest();
+  row.xhr = xhr;
+  xhr.upload.onprogress = function(e) {
+    if (s.disposed || row.xhr !== xhr || !e.lengthComputable) return;
+    var progress = Math.min(99, Math.round(e.loaded / e.total * 100));
+    if (progress === row.progress) return;
+    row.progress = progress;
+    if (row.progressElement) row.progressElement.value = progress;
+  };
+  function finish(status, message) {
+    if (s.disposed || row.xhr !== xhr) return;
+    row.xhr = null;
+    row.status = status;
+    row.message = message || "";
+    if (status === "uploaded") row.progress = 100;
+    uploadChanged(s);
+    if (status === "uploaded") emit(s, "Uploaded", row.key, row.file.name, xhr.responseText.slice(0, 1048576));
+    else if (message) emit(s, "Error", row.file.name + ": " + message);
+    pumpUploads(s);
+  }
+  xhr.onload = function() {
+    finish(xhr.status >= 200 && xhr.status < 300 ? "uploaded" : "error", xhr.status >= 200 && xhr.status < 300 ? "" : "Server returned HTTP " + xhr.status + ".");
+  };
+  xhr.onerror = function() {
+    finish("error", "Upload failed. Check the connection, endpoint, and cross-origin configuration.");
+  };
+  xhr.ontimeout = function() {
+    finish("error", "Upload timed out. Retry when the endpoint is available.");
+  };
+  xhr.onabort = function() {
+    finish("canceled", "");
+  };
+  var body = new FormData();
+  body.append(s.options.FieldName || "file", row.file, row.file.name);
+  body.append("clientKey", row.key);
+  try {
+    xhr.open("POST", target.url);
+    xhr.withCredentials = !!s.options.WithCredentials;
+    xhr.timeout = 12e4;
+    Object.keys(target.headers).forEach(function(k) {
+      xhr.setRequestHeader(k, target.headers[k]);
+    });
+    xhr.send(body);
+  } catch (e) {
+    finish("error", e.message);
+  }
+}
+function pumpUploads(s) {
+  if (!s.running || s.disposed || s.options.IsDisabled) return;
+  var target;
+  try {
+    target = endpoint(s);
+  } catch (e) {
+    s.running = false;
+    error(s, e.message);
+    return;
+  }
+  var active = s.queue.filter(function(r) {
+    return r.status === "uploading";
+  }).length;
+  s.queue.filter(function(r) {
+    return r.status === "queued";
+  }).slice(0, Math.max(0, s.concurrent - active)).forEach(function(r) {
+    startUpload(s, r, target);
+  });
+  if (!s.queue.some(function(r) {
+    return r.status === "queued" || r.status === "uploading";
+  })) s.running = false;
+  renderUploads(s);
+}
+function removeUpload(s, row) {
+  if (row.xhr) {
+    var xhr = row.xhr;
+    row.xhr = null;
+    xhr.abort();
+  }
+  if (row.preview) URL.revokeObjectURL(row.preview);
+  s.queue.splice(s.queue.indexOf(row), 1);
+  uploadChanged(s);
+  pumpUploads(s);
+}
+function renderUploads(s) {
+  var active = s.list.contains(document.activeElement) ? document.activeElement : null, focusRow = active && active.closest("[data-upload-key]"), focusKey = focusRow && focusRow.dataset.uploadKey, focusAction = active && active.textContent;
+  clear(s.list);
+  var disabled = !!s.options.IsDisabled;
+  s.browse.disabled = disabled;
+  s.fileInput.disabled = disabled;
+  s.start.disabled = disabled || !s.queue.some(function(r) {
+    return r.status === "queued";
+  });
+  s.clear.disabled = disabled || !s.queue.some(function(r) {
+    return ["uploaded", "error", "canceled"].indexOf(r.status) >= 0;
+  });
+  var uploaded = s.queue.filter(function(r) {
+    return r.status === "uploaded";
+  }).length;
+  s.status.textContent = s.queue.length + " files \xB7 " + uploaded + " uploaded";
+  s.queue.forEach(function(r) {
+    r.progressElement = null;
+    var li = el("li", "blu-upload__row");
+    li.dataset.uploadKey = r.key;
+    if (r.preview) {
+      var img = el("img", "blu-upload__preview");
+      img.src = r.preview;
+      img.alt = "";
+      li.appendChild(img);
+    } else li.appendChild(attr(el("span", "blu-upload__file-icon", "\u2191"), "aria-hidden", true));
+    var copy = el("div", "blu-upload__copy");
+    copy.appendChild(el("strong", "", r.file.name));
+    copy.appendChild(el("small", "", fileSize(r.file.size) + " \xB7 " + r.status));
+    if (r.status === "uploading" || r.status === "uploaded") {
+      var progress = el("progress", "blu-upload__progress");
+      progress.max = 100;
+      progress.value = r.progress;
+      r.progressElement = progress;
+      attr(progress, "aria-label", r.file.name + " upload progress");
+      copy.appendChild(progress);
+    }
+    if (r.message) copy.appendChild(el("span", "blu-component-error", r.message));
+    li.appendChild(copy);
+    var commands = el("div", "blu-upload__commands");
+    if (r.status === "uploading") commands.appendChild(attr(button("Cancel", function() {
+      r.xhr.abort();
+    }, "", disabled), "aria-label", "Cancel upload of " + r.file.name));
+    else {
+      if (r.status === "error" || r.status === "canceled") commands.appendChild(attr(button("Retry", function() {
+        r.status = "queued";
+        r.message = "";
+        s.running = true;
+        pumpUploads(s);
+        uploadChanged(s);
+      }, "", disabled), "aria-label", "Retry upload of " + r.file.name));
+      commands.appendChild(attr(button("\xD7", function() {
+        removeUpload(s, r);
+      }, "blu-control--icon", disabled), "aria-label", "Remove " + r.file.name));
+    }
+    li.appendChild(commands);
+    s.list.appendChild(li);
+  });
+  if (focusKey) {
+    var row = Array.from(s.list.children).find(function(n) {
+      return n.dataset.uploadKey === focusKey;
+    }), next = row && Array.from(row.querySelectorAll("button")).find(function(n) {
+      return n.textContent === focusAction;
+    });
+    (next || row && row.querySelector("button") || s.browse).focus();
+  }
+}
+function updateUploads(s, o) {
+  s.options = o;
+  s.maxFiles = bounds(o.MaxFiles, 20, 1, 100);
+  s.maxSize = bounds(o.MaxFileSizeMB, 10, 1, 100) * 1024 * 1024;
+  s.concurrent = bounds(o.ConcurrentUploads, 2, 1, 6);
+  if (!s.ready) {
+    shell(s, "blu-upload");
+    s.queue = [];
+    s.running = false;
+    s.drop = el("div", "blu-upload__drop");
+    s.drop.appendChild(attr(el("span", "blu-upload__symbol", "\u2191"), "aria-hidden", true));
+    s.drop.appendChild(el("strong", "", "Drop files here"));
+    s.hint = el("p", "blu-upload__hint");
+    s.drop.appendChild(s.hint);
+    s.browse = button("Browse files", function() {
+      s.fileInput.click();
+    }, "blu-control--primary");
+    s.drop.appendChild(s.browse);
+    s.fileInput = input("file", "", "Choose files");
+    s.fileInput.multiple = true;
+    s.fileInput.hidden = true;
+    s.drop.appendChild(s.fileInput);
+    s.root.appendChild(s.drop);
+    s.list = attr(el("ul", "blu-upload__list"), "aria-label", "Upload queue");
+    s.root.appendChild(s.list);
+    var foot = el("div", "blu-upload__footer");
+    s.status = attr(el("span"), "role", "status");
+    foot.appendChild(s.status);
+    s.clear = button("Clear finished", function() {
+      s.queue.slice().filter(function(r) {
+        return ["uploaded", "error", "canceled"].indexOf(r.status) >= 0;
+      }).forEach(function(r) {
+        removeUpload(s, r);
+      });
+    });
+    foot.appendChild(s.clear);
+    s.start = button("Upload files", function() {
+      s.running = true;
+      error(s, "");
+      pumpUploads(s);
+    }, "blu-control--primary");
+    foot.appendChild(s.start);
+    s.root.appendChild(foot);
+    listen(s, s.fileInput, "change", function() {
+      addFiles(s, s.fileInput.files);
+      s.fileInput.value = "";
+    });
+    listen(s, s.drop, "dragover", function(e) {
+      e.preventDefault();
+      if (!s.options.IsDisabled) s.drop.classList.add("is-dragging");
+    });
+    listen(s, s.drop, "dragleave", function() {
+      s.drop.classList.remove("is-dragging");
+    });
+    listen(s, s.drop, "drop", function(e) {
+      e.preventDefault();
+      s.drop.classList.remove("is-dragging");
+      addFiles(s, e.dataTransfer.files);
+    });
+    s.dispose = function() {
+      s.queue.forEach(function(r) {
+        if (r.xhr) r.xhr.abort();
+        if (r.preview) URL.revokeObjectURL(r.preview);
+      });
+    };
+    s.ready = true;
+  }
+  s.fileInput.accept = o.Accept || "";
+  s.hint.textContent = (o.Accept || "Any file type") + " \xB7 Up to " + fileSize(s.maxSize) + " each \xB7 " + s.maxFiles + " files";
+  attr(s.drop, "aria-disabled", !!o.IsDisabled);
+  renderUploads(s);
+  if (!o.IsDisabled) pumpUploads(s);
+}
+function installUploadManager() {
+  return register("UploadManager", () => api("UploadManager", updateUploads));
+}
+export {
+  installUploadManager
+};

package/src/runtime/video-lightbox.d.ts

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