fullstacked 0.12.2-1414 → 0.12.2-1419

package/fullstacked_modules/@fullstacked/ui/index.js

@@ -1,669 +0,0 @@
-// node_modules/@fullstacked/ui/primitives/icon/index.ts
-var iconsDirectory = "/node_modules/@fullstacked/ui/icons";
-function setIconsDirectory(directory) {
-  iconsDirectory = directory;
-}
-function Icon(name) {
-  const container = document.createElement("div");
-  container.classList.add("icon");
-  loadIcon(name).then((svgData) => container.innerHTML = svgData);
-  return container;
-}
-var iconCache = /* @__PURE__ */ new Map();
-function loadIcon(name) {
-  let icon = iconCache.get(name);
-  if (!icon) {
-    icon = fetchIcon(name);
-    iconCache.set(name, icon);
-  }
-  return icon;
-}
-async function fetchIcon(name) {
-  const response = await fetch(`${iconsDirectory}/${name}.svg`);
-  return response.text();
-}
-
-// node_modules/@fullstacked/ui/primitives/button/index.ts
-function Button(opts) {
-  const button = document.createElement("button");
-  if (!opts?.style?.startsWith("icon")) {
-    button.innerText = opts?.text || "";
-  }
-  if (opts?.style && opts?.style !== "default") {
-    button.classList.add(opts.style);
-  }
-  if (opts?.color) {
-    button.classList.add(opts.color);
-  }
-  if (opts?.iconLeft) {
-    button.prepend(Icon(opts.iconLeft));
-  }
-  if (opts?.iconRight) {
-    button.append(Icon(opts.iconRight));
-  }
-  return button;
-}
-
-// node_modules/@fullstacked/ui/primitives/badge/index.ts
-function Badge(opts) {
-  const container = document.createElement("label");
-  container.classList.add("badge");
-  if (opts?.type) {
-    container.classList.add(opts.type);
-  }
-  container.innerText = opts?.text || "";
-  return container;
-}
-
-// node_modules/@fullstacked/ui/inputs/text/index.ts
-function InputText(opts) {
-  const container = document.createElement("div");
-  container.classList.add("input-text");
-  if (opts?.label) {
-    container.innerHTML = `<label>${opts.label}</label>`;
-  }
-  const inputContainer = document.createElement("div");
-  inputContainer.classList.add("input-container");
-  const input = document.createElement("input");
-  input.autocapitalize = "off";
-  inputContainer.append(input);
-  if (opts?.clear) {
-    const buttonContainer = document.createElement("div");
-    buttonContainer.classList.add("button-container");
-    const clearButton = Button({
-      style: "icon-small",
-      iconRight: "Close"
-    });
-    clearButton.type = "button";
-    clearButton.onclick = (e) => {
-      input.value = "";
-      buttonContainer.classList.remove("show");
-      input.dispatchEvent(new KeyboardEvent("keyup"));
-    };
-    buttonContainer.append(clearButton);
-    inputContainer.append(buttonContainer);
-    input.addEventListener("keyup", () => {
-      if (input.value) {
-        buttonContainer.classList.add("show");
-      } else {
-        buttonContainer.classList.remove("show");
-      }
-    });
-  }
-  container.append(inputContainer);
-  return {
-    container,
-    input
-  };
-}
-
-// node_modules/@fullstacked/ui/inputs/observer.ts
-var updateOverriddenInputs = () => {
-  const inputsChecked = document.querySelectorAll(
-    "input[type=checkbox], input[type=radio]"
-  );
-  inputsChecked.forEach((input) => {
-    const parent = input.parentElement;
-    if (input.checked) parent.classList.add("checked");
-    else parent.classList.remove("checked");
-  });
-  const inputsFile = document.querySelectorAll("input[type=file]");
-  inputsFile.forEach((inputFile) => {
-    const file = inputFile.files[0];
-    const fileName = inputFile.nextElementSibling?.children?.[0];
-    if (!fileName) return;
-    fileName.innerText = file?.name || "No file chosen";
-  });
-  const inputsSelect = document.querySelectorAll("select");
-  inputsSelect.forEach((inputSelect) => {
-    if (inputSelect.selectedIndex) {
-      inputSelect.classList.remove("invalid");
-    } else {
-      inputSelect.classList.add("invalid");
-    }
-  });
-};
-var interval = null;
-function startObserverInterval() {
-  if (interval) return;
-  interval = setInterval(updateOverriddenInputs, 100);
-}
-
-// node_modules/@fullstacked/ui/inputs/file/index.ts
-function InputFile(opts) {
-  startObserverInterval();
-  const container = document.createElement("div");
-  container.classList.add("input-file");
-  if (opts?.label) {
-    container.innerHTML = `<label>${opts.label}</label>`;
-  }
-  const input = document.createElement("input");
-  input.type = "file";
-  container.append(input);
-  const overrideUI = document.createElement("div");
-  const fileName = document.createElement("span");
-  fileName.innerText = "No file chosen";
-  input.addEventListener("change", () => {
-    const file = input.files[0];
-    fileName.innerText = file?.name || "No file chosen";
-  });
-  const button = Button({
-    iconRight: "File",
-    text: "Select"
-  });
-  button.onclick = (e) => {
-    e.preventDefault();
-    input.click();
-  };
-  overrideUI.append(fileName, button);
-  container.append(overrideUI);
-  return {
-    container,
-    input
-  };
-}
-
-// node_modules/@fullstacked/ui/inputs/switch/index.ts
-function InputSwitch(opts) {
-  startObserverInterval();
-  const container = document.createElement("div");
-  container.classList.add("input-switch");
-  if (opts?.label) {
-    container.innerHTML = `<label>${opts.label}</label>`;
-  }
-  const input = document.createElement("input");
-  input.type = "checkbox";
-  input.addEventListener("change", () => {
-    if (input.checked) container.classList.add("checked");
-    else container.classList.remove("checked");
-  });
-  container.append(input);
-  const overrideUI = document.createElement("div");
-  const switchEl = document.createElement("div");
-  switchEl.onclick = () => input.click();
-  switchEl.innerHTML = `<div></div>`;
-  overrideUI.append(switchEl);
-  container.append(overrideUI);
-  return {
-    input,
-    container
-  };
-}
-
-// node_modules/@fullstacked/ui/inputs/checkbox/index.ts
-function InputCheckbox() {
-  startObserverInterval();
-  const container = document.createElement("div");
-  container.classList.add("input-checkbox");
-  const input = document.createElement("input");
-  input.type = "checkbox";
-  input.addEventListener("change", () => {
-    if (input.checked) container.classList.add("checked");
-    else container.classList.remove("checked");
-  });
-  const overrideUI = document.createElement("div");
-  overrideUI.onclick = () => input.click();
-  overrideUI.innerHTML = "<div></div>";
-  container.append(input, overrideUI);
-  return {
-    container,
-    input
-  };
-}
-
-// node_modules/@fullstacked/ui/inputs/radio/index.ts
-function InputRadio() {
-  startObserverInterval();
-  const container = document.createElement("div");
-  container.classList.add("input-radio");
-  const input = document.createElement("input");
-  input.type = "radio";
-  input.addEventListener("change", () => {
-    if (input.checked) container.classList.add("checked");
-    else container.classList.remove("checked");
-  });
-  const overrideUI = document.createElement("div");
-  overrideUI.onclick = () => input.click();
-  overrideUI.innerHTML = "<div></div>";
-  container.append(input, overrideUI);
-  return {
-    container,
-    input
-  };
-}
-
-// node_modules/@fullstacked/ui/inputs/predictive/index.ts
-var SPACE = String.fromCharCode(160);
-function InputPredictive(opts) {
-  const container = document.createElement("div");
-  container.classList.add("input-predictive");
-  if (opts?.label) {
-    container.innerHTML = `<label>${opts.label}</label>`;
-  }
-  const input = document.createElement("div");
-  input.contentEditable = "true";
-  input.autocapitalize = "off";
-  input.setAttribute("autocomplete", "off");
-  input.setAttribute("autocorrect", "off");
-  let prediction = document.createElement("span");
-  prediction.contentEditable = "false";
-  input.append(prediction);
-  const spaceRegex = new RegExp(SPACE, "g");
-  let predictions = [];
-  let predictionIndex = 0;
-  const prevPrediction = () => {
-    if (predictionIndex === 0) {
-      return;
-    }
-    predictionIndex -= 1;
-    prediction.innerText = predictions.at(predictionIndex);
-  };
-  const nextPrediction = () => {
-    if (predictionIndex === predictions.length - 1) {
-      return;
-    }
-    predictionIndex += 1;
-    prediction.innerText = predictions.at(predictionIndex);
-  };
-  const predict = async () => {
-    Array.from(input.children).forEach((child) => {
-      if (child.innerHTML === "" || child instanceof HTMLBRElement) {
-        child.remove();
-      }
-    });
-    if (prediction.getBoundingClientRect().height == 0) {
-      input.append(prediction);
-    }
-    let value = input.innerText.replace(spaceRegex, " ");
-    const prevP = prediction.innerText;
-    if (prevP) {
-      value = value.slice(0, 0 - prevP.length);
-    }
-    const onChangeResult = opts?.onChange?.(value);
-    if (onChangeResult instanceof Promise) {
-      predictions = await onChangeResult;
-    } else {
-      predictions = onChangeResult;
-    }
-    predictions = predictions.map((p) => p.replace(/ /g, SPACE));
-    if (predictions.length) {
-      predictionIndex = 0;
-      prediction.innerText = predictions.at(predictionIndex);
-    } else {
-      prediction.innerText = "";
-    }
-  };
-  const replaceCursor = () => {
-    const range = document.createRange();
-    const sel = window.getSelection();
-    const textNodes = Array.from(input.childNodes || []).filter(
-      (n) => n.nodeType === Node.TEXT_NODE
-    );
-    if (textNodes.length) {
-      input.innerText = textNodes.map((n) => n.textContent).join("");
-      range.setStart(input.childNodes[0], getValue().length);
-    } else {
-      range.setStart(input, 0);
-    }
-    range.collapse(true);
-    sel.removeAllRanges();
-    sel.addRange(range);
-  };
-  const getCursorPos = () => {
-    const sel = window.getSelection();
-    return sel.anchorOffset;
-  };
-  const applyPrediction = () => {
-    const p = prediction?.innerText || "";
-    if (p) {
-      prediction.innerText = "";
-      input.innerText += p;
-      replaceCursor();
-    }
-  };
-  prediction.onclick = () => {
-    applyPrediction();
-  };
-  input.onpaste = () => {
-    prediction.innerText = "";
-    setTimeout(() => {
-      input.innerText = input.innerText;
-      predict();
-      setTimeout(replaceCursor);
-    });
-  };
-  input.onblur = () => {
-    prediction.remove();
-  };
-  input.onfocus = () => {
-    predict();
-    let value = input.innerText;
-    const prevP = prediction.innerText;
-    if (prevP) {
-      value = value.slice(0, 0 - prevP.length);
-    }
-    if (value) {
-      setTimeout(replaceCursor);
-    }
-  };
-  input.onkeyup = (e) => {
-    const { key } = e;
-    if (key === "ArrowUp" || key === "ArrowDown") {
-      return;
-    }
-    predict();
-  };
-  input.onkeydown = (e) => {
-    const { key } = e;
-    if (key === "ArrowUp" || key === "ArrowDown") {
-      e.preventDefault();
-      return key === "ArrowUp" ? prevPrediction() : nextPrediction();
-    }
-    const prevP = prediction.innerText;
-    if (e.key === "Tab") {
-      e.preventDefault();
-      if (prediction.innerText != "") {
-        applyPrediction();
-      } else if (input.innerText && input.innerText.at(-1) !== SPACE) {
-        input.innerText += SPACE;
-        replaceCursor();
-      }
-    } else if (e.key === "ArrowRight" && prediction.innerText && getCursorPos() === getValue().length) {
-      e.preventDefault();
-      applyPrediction();
-    } else if (prevP && key == prevP.at(0)) {
-      prediction.innerText = prediction.innerText.slice(1);
-    } else {
-      prediction.innerText = "";
-    }
-  };
-  const getValue = () => {
-    const clone = input.cloneNode(true);
-    clone.querySelector("span")?.remove();
-    return clone.innerText.replace(spaceRegex, " ");
-  };
-  container.append(input);
-  return {
-    container,
-    input,
-    getValue,
-    clear: () => {
-      input.innerText = "";
-      replaceCursor();
-    }
-  };
-}
-
-// node_modules/@fullstacked/ui/inputs/select/index.ts
-function InputSelect(opts) {
-  startObserverInterval();
-  const container = document.createElement("div");
-  container.classList.add("input-select");
-  if (opts.label) {
-    container.innerHTML = `<label>${opts.label}</label>`;
-  }
-  const selectAndIconContainer = document.createElement("div");
-  selectAndIconContainer.classList.add("select-container");
-  const select = document.createElement("select");
-  const icon = document.createElement("div");
-  icon.append(Icon("Arrow"));
-  selectAndIconContainer.append(select, icon);
-  container.append(selectAndIconContainer);
-  const placeholderOption = document.createElement("option");
-  placeholderOption.selected = true;
-  placeholderOption.innerText = opts.placeholder || "Choose an option";
-  select.append(placeholderOption);
-  select.classList.add("invalid");
-  const selectOptions = [];
-  const addOptions = (option) => {
-    selectOptions.push(option);
-    const el = document.createElement("option");
-    el.innerText = option.name;
-    el.disabled = option.disabled;
-    if (!el.disabled) {
-      el.value = selectOptions.length.toString();
-    }
-    el.selected = option.selected;
-    select.append(el);
-  };
-  const disablePlaceholder = () => {
-    placeholderOption.disabled = true;
-  };
-  select.onfocus = disablePlaceholder;
-  select.ontouchstart = disablePlaceholder;
-  select.onclick = disablePlaceholder;
-  select.onblur = () => {
-    placeholderOption.disabled = false;
-  };
-  const indexOfIdOrName = (idOrName) => {
-    return selectOptions.findIndex((item) => {
-      if (item.id) {
-        return item.id === idOrName;
-      }
-      return item.name === idOrName;
-    });
-  };
-  let selectAPI = {
-    get value() {
-      const index = select.selectedIndex - 1;
-      if (index === -1) {
-        return void 0;
-      }
-      const item = selectOptions.at(index);
-      return item.id || item.name;
-    },
-    set value(v) {
-      const indexOf = indexOfIdOrName(v);
-      if (indexOf === -1) return;
-      select.selectedIndex = indexOf + 1;
-    },
-    onchange: (item, index) => {
-      return { item, index };
-    }
-  };
-  select.onchange = () => {
-    const index = select.selectedIndex - 1;
-    const item = selectOptions.at(index);
-    const value = item.id || item.name;
-    selectAPI.value = value;
-    selectAPI.onchange(value, index);
-  };
-  return {
-    container,
-    select: selectAPI,
-    options: {
-      get() {
-        return selectOptions;
-      },
-      add(...options) {
-        options.forEach(addOptions);
-      },
-      remove(nameOrId) {
-        const indexOf = indexOfIdOrName(nameOrId);
-        if (indexOf === -1) return;
-        const selectedIndex = select.selectedIndex - 1;
-        if (indexOf === selectedIndex) {
-          select.selectedIndex = 0;
-        }
-        selectOptions.splice(indexOf, 1);
-      }
-    }
-  };
-}
-
-// node_modules/@fullstacked/ui/components/button-group/index.ts
-function ButtonGroup(buttons) {
-  const container = document.createElement("div");
-  container.classList.add("button-group");
-  container.append(...buttons);
-  return container;
-}
-
-// node_modules/@fullstacked/ui/components/dialog/index.ts
-function Dialog(content) {
-  const container = document.createElement("div");
-  container.classList.add("dialog");
-  const overlay = document.createElement("div");
-  overlay.classList.add("dialog-overlay");
-  container.append(content);
-  overlay.append(container);
-  document.body.append(overlay);
-  return {
-    remove: () => overlay.remove()
-  };
-}
-
-// node_modules/@fullstacked/ui/components/loader/index.ts
-function Loader() {
-  const container = document.createElement("div");
-  container.classList.add("loader");
-  const dummy = document.createElement("div");
-  container.append(dummy);
-  const icon = Icon("Loader");
-  container.append(icon);
-  return container;
-}
-
-// node_modules/@fullstacked/ui/components/message/index.ts
-function Message(opts) {
-  const container = document.createElement("div");
-  container.classList.add("message");
-  if (opts.style) {
-    container.classList.add(opts.style);
-  }
-  const iconName = opts.style === "warning" ? "Warning" : "Info";
-  const icon = Icon(iconName);
-  const text = document.createElement("b");
-  text.innerText = opts.text;
-  container.append(icon, text);
-  return container;
-}
-
-// node_modules/@fullstacked/ui/components/popover/index.ts
-function Popover(opts) {
-  const anchorBB = opts.anchor.getBoundingClientRect();
-  const container = document.createElement("div");
-  container.classList.add("popover");
-  let x = anchorBB.x + document.body.scrollLeft;
-  let y = anchorBB.y + document.body.scrollTop;
-  switch (opts.align.x) {
-    case "center":
-      container.classList.add("center-x");
-      x += anchorBB.width / 2;
-      break;
-    case "right":
-      container.classList.add("right");
-      x += anchorBB.width;
-      break;
-  }
-  switch (opts.align.y) {
-    case "center":
-      container.classList.add("center-y");
-      y += anchorBB.height / 2;
-      break;
-    case "bottom":
-      container.classList.add("bottom");
-      y += anchorBB.height;
-      break;
-  }
-  container.style.left = x + "px";
-  container.style.top = y + "px";
-  const overlay = document.createElement("div");
-  overlay.classList.add("popover-overlay");
-  container.append(opts.content);
-  const remove = () => {
-    overlay.remove();
-    container.remove();
-    window.removeEventListener("resize", remove);
-    unlockScroll(lockedElements);
-  };
-  container.addEventListener("click", (e) => {
-    e.stopPropagation();
-    remove();
-  });
-  container.addEventListener("scroll", (e) => {
-    e.stopPropagation();
-    remove();
-  });
-  overlay.onclick = (e) => {
-    e.stopPropagation();
-    remove();
-  };
-  window.addEventListener("resize", remove);
-  let lockedElements = lockScroll(opts.anchor);
-  document.body.append(overlay, container);
-  return {
-    remove
-  };
-}
-var lockedScroll = (e) => {
-  e.preventDefault();
-  e.stopPropagation();
-  return false;
-};
-var keys = ["ArrowDown", "ArrowUp", "PageUp", "PageDown"];
-var lockedKeys = (e) => {
-  if (keys.includes(e.key)) {
-    return lockedScroll(e);
-  }
-};
-function lockScroll(el, lockedElements = []) {
-  lockedElements.push(el);
-  el.addEventListener("scroll", lockedScroll);
-  el.addEventListener("wheel", lockedScroll);
-  el.addEventListener("touchmove", lockedScroll);
-  el.addEventListener("keydown", lockedKeys);
-  if (el.parentElement) {
-    lockScroll(el.parentElement, lockedElements);
-  }
-  return lockedElements;
-}
-function unlockScroll(els) {
-  els.forEach((el) => {
-    el.removeEventListener("scroll", lockedScroll);
-    el.removeEventListener("wheel", lockedScroll);
-    el.removeEventListener("touchmove", lockedScroll);
-    el.removeEventListener("keydown", lockedKeys);
-  });
-}
-
-// node_modules/@fullstacked/ui/components/list-item/index.ts
-function ListItem(opts) {
-  const container = document.createElement("div");
-  container.classList.add("list-item");
-  const inner = document.createElement("div");
-  inner.classList.add("inner");
-  container.append(inner);
-  if (opts?.content) {
-    inner.append(opts.content);
-  }
-  if (opts?.withProgress) {
-    const progressBar = document.createElement("div");
-    progressBar.classList.add("progress");
-    container.append(progressBar);
-    const setProgress = (p) => {
-      progressBar.style.width = p * 100 + "%";
-    };
-    return { container, setProgress };
-  }
-  return container;
-}
-export {
-  Badge,
-  Button,
-  ButtonGroup,
-  Dialog,
-  Icon,
-  InputCheckbox,
-  InputFile,
-  InputPredictive,
-  InputRadio,
-  InputSelect,
-  InputSwitch,
-  InputText,
-  ListItem,
-  Loader,
-  Message,
-  Popover,
-  setIconsDirectory
-};