@ozankurt/file-chips 0.0.0-stage → 1.1.0

package/dist/file-chips.cjs

@@ -0,0 +1,229 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// js/index.js
+var index_exports = {};
+__export(index_exports, {
+  close: () => close,
+  default: () => index_default,
+  getOpen: () => getOpen,
+  init: () => init,
+  position: () => position
+});
+module.exports = __toCommonJS(index_exports);
+
+// js/popover.js
+var GAP = 8;
+var EDGE = 8;
+var openPopover = null;
+var openChip = null;
+var clamp = (value, min, max) => Math.max(min, Math.min(max, value));
+var popoverFor = (chip) => chip.ownerDocument.getElementById(chip.dataset.fileChip);
+var position = (chip, popover) => {
+  const rect = chip.getBoundingClientRect();
+  const width = popover.offsetWidth;
+  const height = popover.offsetHeight;
+  let top = rect.bottom + GAP;
+  const left = clamp(rect.left, EDGE, Math.max(EDGE, window.innerWidth - width - EDGE));
+  if (top + height > window.innerHeight) {
+    const above = rect.top - height - GAP;
+    if (above >= EDGE) {
+      top = above;
+    }
+  }
+  top = clamp(top, EDGE, window.innerHeight - height - EDGE);
+  popover.style.top = "0px";
+  popover.style.left = "0px";
+  const origin = popover.getBoundingClientRect();
+  popover.style.top = `${Math.round(top - origin.top)}px`;
+  popover.style.left = `${Math.round(left - origin.left)}px`;
+};
+var close = ({ restoreFocus = false } = {}) => {
+  if (!openPopover) {
+    return;
+  }
+  const popover = openPopover;
+  const chip = openChip;
+  const hadFocus = popover.contains(popover.ownerDocument.activeElement);
+  popover.hidden = true;
+  chip?.setAttribute("aria-expanded", "false");
+  openPopover = null;
+  openChip = null;
+  if (restoreFocus && hadFocus) {
+    chip?.focus();
+  }
+};
+var open = (chip) => {
+  close();
+  const popover = popoverFor(chip);
+  if (!popover) {
+    return null;
+  }
+  popover.hidden = false;
+  chip.setAttribute("aria-expanded", "true");
+  openPopover = popover;
+  openChip = chip;
+  position(chip, popover);
+  if (typeof requestAnimationFrame === "function") {
+    requestAnimationFrame(() => openPopover === popover && position(chip, popover));
+  }
+  return popover;
+};
+var getOpen = () => openPopover;
+var getOpenChip = () => openChip;
+
+// js/marks.js
+var DEFAULT_MARKED = "Marked";
+var DEFAULT_UNMARKED = "Remove on save";
+var targetFor = (chip) => chip.closest("[data-file-chips]")?.querySelector("[data-file-chips-bucket]") ?? chip.closest("form");
+var findInput = (target, name, id) => [...target.querySelectorAll('input[type="hidden"]')].find((input) => input.name === name && input.value === id) ?? null;
+var render = (chip, button, marked) => {
+  chip.classList.toggle("fc-chip--marked", marked);
+  button.classList.toggle("fc-btn--active", marked);
+  button.setAttribute("aria-pressed", String(marked));
+  const label = button.querySelector("[data-file-chip-remove-label]") ?? button;
+  label.textContent = marked ? button.dataset.labelMarked ?? DEFAULT_MARKED : button.dataset.labelUnmarked ?? DEFAULT_UNMARKED;
+};
+var buttonIn = (popover) => popover.querySelector("[data-file-chip-remove]");
+var sync = (chip, popover) => {
+  const button = buttonIn(popover);
+  const target = targetFor(chip);
+  if (!button || !target) {
+    return;
+  }
+  render(chip, button, findInput(target, button.dataset.fileChipInput, button.dataset.fileChipId) !== null);
+};
+var toggle = (chip, button) => {
+  const target = targetFor(chip);
+  if (!target) {
+    console.warn("[FileChips] No [data-file-chips-bucket] or <form> found for this chip; cannot mark it for removal.");
+    return;
+  }
+  const name = button.dataset.fileChipInput;
+  const id = button.dataset.fileChipId;
+  const existing = findInput(target, name, id);
+  if (existing) {
+    existing.remove();
+  } else {
+    const input = chip.ownerDocument.createElement("input");
+    input.type = "hidden";
+    input.name = name;
+    input.value = id;
+    target.appendChild(input);
+  }
+  const marked = !existing;
+  render(chip, button, marked);
+  chip.dispatchEvent(new CustomEvent("file-chips:change", { bubbles: true, detail: { id, input: name, marked } }));
+};
+
+// js/index.js
+var documents = /* @__PURE__ */ new Map();
+var handled = (doc, element) => [...documents.get(doc)?.roots ?? []].some((root) => root.contains(element));
+var openWithState = (chip) => {
+  const popover = open(chip);
+  if (popover) {
+    sync(chip, popover);
+  }
+  return popover;
+};
+var listenersFor = (doc) => ({
+  click(event) {
+    const target = event.target;
+    const remove = target.closest?.("[data-file-chip-remove]");
+    if (remove && getOpen()?.contains(remove)) {
+      toggle(getOpenChip(), remove);
+      return;
+    }
+    const chip = target.closest?.("[data-file-chip]");
+    if (!chip || !handled(doc, chip)) {
+      return;
+    }
+    event.preventDefault();
+    if (getOpenChip() === chip) {
+      close();
+    } else {
+      openWithState(chip);
+    }
+  },
+  mousedown(event) {
+    const popover = getOpen();
+    if (popover && !popover.contains(event.target) && !event.target.closest?.("[data-file-chip]")) {
+      close();
+    }
+  },
+  keydown(event) {
+    if (event.key === "Escape" && getOpen()) {
+      close({ restoreFocus: true });
+    }
+  },
+  reposition() {
+    const popover = getOpen();
+    if (popover) {
+      position(getOpenChip(), popover);
+    }
+  }
+});
+var listen = (doc, listeners, method) => {
+  doc[method]("click", listeners.click);
+  doc[method]("mousedown", listeners.mousedown);
+  doc[method]("keydown", listeners.keydown);
+  doc.defaultView?.[method]("resize", listeners.reposition);
+  doc.defaultView?.[method]("scroll", listeners.reposition, true);
+};
+var init = ({ root = document } = {}) => {
+  const doc = root.ownerDocument ?? root;
+  if (handled(doc, root)) {
+    return () => {
+    };
+  }
+  if (!documents.has(doc)) {
+    const listeners = listenersFor(doc);
+    documents.set(doc, { roots: /* @__PURE__ */ new Set(), listeners });
+    listen(doc, listeners, "addEventListener");
+  }
+  const entry = documents.get(doc);
+  entry.roots.add(root);
+  return () => {
+    if (!entry.roots.delete(root)) {
+      return;
+    }
+    if (getOpenChip() && root.contains(getOpenChip())) {
+      close();
+    }
+    if (entry.roots.size === 0) {
+      listen(doc, entry.listeners, "removeEventListener");
+      documents.delete(doc);
+    }
+  };
+};
+var FileChips = {
+  init,
+  open: openWithState,
+  close: () => close(),
+  getOpen,
+  position
+};
+var index_default = FileChips;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  close,
+  getOpen,
+  init,
+  position
+});
+module.exports = module.exports.default;

package/dist/file-chips.css

@@ -0,0 +1,215 @@
+/*
+ * File Chips
+ * Every colour, radius and size is a custom property, so apps can theme the
+ * component by overriding the variables on :root or on any ancestor.
+ */
+
+:root {
+    --fc-font-size: 0.875rem;
+    --fc-gap: 0.5rem;
+    --fc-radius: 0.5rem;
+    --fc-chip-max-width: 220px;
+    --fc-chip-bg: #fff;
+    --fc-chip-bg-hover: rgba(0, 0, 0, 0.03);
+    --fc-border: rgba(0, 0, 0, 0.1);
+    --fc-text: inherit;
+    --fc-muted: #6b7280;
+    --fc-danger: #dc3545;
+    --fc-danger-bg: rgba(220, 53, 69, 0.06);
+    --fc-primary: #2563eb;
+    --fc-primary-text: #fff;
+    --fc-focus: rgba(37, 99, 235, 0.35);
+    --fc-ext-bg: rgba(0, 0, 0, 0.06);
+    --fc-popover-width: 520px;
+    --fc-popover-bg: #fff;
+    --fc-popover-border: rgba(0, 0, 0, 0.12);
+    --fc-popover-radius: 0.75rem;
+    --fc-popover-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
+    --fc-popover-z: 1080;
+    --fc-thumb-size: 80px;
+    --fc-thumb-bg: #fafafa;
+}
+
+.fc-chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--fc-gap);
+}
+
+.fc-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    max-width: var(--fc-chip-max-width);
+    padding: 0.375rem 0.5rem;
+    border: 1px solid var(--fc-border);
+    border-radius: var(--fc-radius);
+    background: var(--fc-chip-bg);
+    color: var(--fc-text);
+    font: inherit;
+    font-size: var(--fc-font-size);
+    line-height: 1.25;
+    text-decoration: none;
+    cursor: pointer;
+    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
+}
+
+.fc-chip:hover {
+    background: var(--fc-chip-bg-hover);
+}
+
+.fc-chip:focus-visible,
+.fc-btn:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px var(--fc-focus);
+}
+
+.fc-chip--marked {
+    border-color: var(--fc-danger);
+    background: var(--fc-danger-bg);
+}
+
+.fc-chip--marked .fc-chip__name {
+    text-decoration: line-through;
+    opacity: 0.8;
+}
+
+.fc-chip__name,
+.fc-popover__title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.fc-chip__ext {
+    flex: none;
+    padding: 0.0625rem 0.3125rem;
+    border-radius: 0.25rem;
+    background: var(--fc-ext-bg);
+    font-size: 0.6875rem;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    text-transform: uppercase;
+}
+
+.fc-popover {
+    position: fixed;
+    z-index: var(--fc-popover-z);
+    width: var(--fc-popover-width);
+    max-width: 92vw;
+    padding: 1rem;
+    border: 1px solid var(--fc-popover-border);
+    border-radius: var(--fc-popover-radius);
+    background: var(--fc-popover-bg);
+    box-shadow: var(--fc-popover-shadow);
+    color: var(--fc-text);
+    font-size: var(--fc-font-size);
+}
+
+.fc-popover[hidden] {
+    display: none;
+}
+
+.fc-popover__head {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.75rem;
+}
+
+.fc-popover__info {
+    min-width: 0;
+    flex: 1;
+}
+
+.fc-popover__title {
+    margin-bottom: 0.25rem;
+    font-weight: 600;
+}
+
+.fc-popover__meta,
+.fc-popover__excerpt {
+    color: var(--fc-muted);
+    font-size: 0.8125rem;
+}
+
+.fc-popover__meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+}
+
+.fc-popover__excerpt {
+    margin-top: 0.5rem;
+}
+
+.fc-popover__actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.5rem;
+    margin-top: 0.75rem;
+}
+
+.fc-popover__actions [data-file-chip-remove] {
+    margin-left: auto;
+}
+
+.fc-thumb {
+    display: flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    width: var(--fc-thumb-size);
+    height: var(--fc-thumb-size);
+    overflow: hidden;
+    border: 1px solid var(--fc-border);
+    border-radius: var(--fc-radius);
+    background: var(--fc-thumb-bg);
+}
+
+.fc-thumb img {
+    display: block;
+    max-width: 100%;
+    max-height: 100%;
+}
+
+.fc-thumb .fc-chip__ext {
+    font-size: 0.875rem;
+}
+
+.fc-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0.25rem 0.625rem;
+    border: 1px solid transparent;
+    border-radius: 0.375rem;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    font-size: 0.8125rem;
+    line-height: 1.5;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.fc-btn--primary {
+    border-color: var(--fc-primary);
+    background: var(--fc-primary);
+    color: var(--fc-primary-text);
+}
+
+.fc-btn--outline {
+    border-color: var(--fc-primary);
+    color: var(--fc-primary);
+}
+
+.fc-btn--danger {
+    border-color: var(--fc-danger);
+    color: var(--fc-danger);
+}
+
+.fc-btn--danger.fc-btn--active {
+    background: var(--fc-danger);
+    color: #fff;
+}

package/dist/file-chips.d.ts

@@ -0,0 +1,43 @@
+// Type declarations for @ozankurt/file-chips.
+
+export interface InitOptions {
+    /** Handle chips inside this element only. Default: the whole document. */
+    root?: Document | Element;
+}
+
+/** Detail of the bubbling `file-chips:change` event dispatched on a chip. */
+export interface FileChipChangeDetail {
+    id: string;
+    input: string;
+    marked: boolean;
+}
+
+/**
+ * Start handling chips inside `root`. A root that is already handled, itself
+ * or through an ancestor, is a no-op. Returns a function that stops handling it.
+ */
+export declare function init(options?: InitOptions): () => void;
+export declare function close(): void;
+export declare function getOpen(): HTMLElement | null;
+export declare function position(chip: HTMLElement, popover: HTMLElement): void;
+
+declare const FileChips: {
+    init: typeof init;
+    /** Open a chip's popover; returns the popover, or null when it has none. */
+    open(chip: HTMLElement): HTMLElement | null;
+    close: typeof close;
+    getOpen: typeof getOpen;
+    position: typeof position;
+};
+
+export default FileChips;
+
+declare global {
+    interface HTMLElementEventMap {
+        'file-chips:change': CustomEvent<FileChipChangeDetail>;
+    }
+
+    interface DocumentEventMap {
+        'file-chips:change': CustomEvent<FileChipChangeDetail>;
+    }
+}

package/dist/file-chips.js

@@ -0,0 +1,206 @@
+(() => {
+  // js/popover.js
+  var GAP = 8;
+  var EDGE = 8;
+  var openPopover = null;
+  var openChip = null;
+  var clamp = (value, min, max) => Math.max(min, Math.min(max, value));
+  var popoverFor = (chip) => chip.ownerDocument.getElementById(chip.dataset.fileChip);
+  var position = (chip, popover) => {
+    const rect = chip.getBoundingClientRect();
+    const width = popover.offsetWidth;
+    const height = popover.offsetHeight;
+    let top = rect.bottom + GAP;
+    const left = clamp(rect.left, EDGE, Math.max(EDGE, window.innerWidth - width - EDGE));
+    if (top + height > window.innerHeight) {
+      const above = rect.top - height - GAP;
+      if (above >= EDGE) {
+        top = above;
+      }
+    }
+    top = clamp(top, EDGE, window.innerHeight - height - EDGE);
+    popover.style.top = "0px";
+    popover.style.left = "0px";
+    const origin = popover.getBoundingClientRect();
+    popover.style.top = `${Math.round(top - origin.top)}px`;
+    popover.style.left = `${Math.round(left - origin.left)}px`;
+  };
+  var close = ({ restoreFocus = false } = {}) => {
+    if (!openPopover) {
+      return;
+    }
+    const popover = openPopover;
+    const chip = openChip;
+    const hadFocus = popover.contains(popover.ownerDocument.activeElement);
+    popover.hidden = true;
+    chip?.setAttribute("aria-expanded", "false");
+    openPopover = null;
+    openChip = null;
+    if (restoreFocus && hadFocus) {
+      chip?.focus();
+    }
+  };
+  var open = (chip) => {
+    close();
+    const popover = popoverFor(chip);
+    if (!popover) {
+      return null;
+    }
+    popover.hidden = false;
+    chip.setAttribute("aria-expanded", "true");
+    openPopover = popover;
+    openChip = chip;
+    position(chip, popover);
+    if (typeof requestAnimationFrame === "function") {
+      requestAnimationFrame(() => openPopover === popover && position(chip, popover));
+    }
+    return popover;
+  };
+  var getOpen = () => openPopover;
+  var getOpenChip = () => openChip;
+
+  // js/marks.js
+  var DEFAULT_MARKED = "Marked";
+  var DEFAULT_UNMARKED = "Remove on save";
+  var targetFor = (chip) => chip.closest("[data-file-chips]")?.querySelector("[data-file-chips-bucket]") ?? chip.closest("form");
+  var findInput = (target, name, id) => [...target.querySelectorAll('input[type="hidden"]')].find((input) => input.name === name && input.value === id) ?? null;
+  var render = (chip, button, marked) => {
+    chip.classList.toggle("fc-chip--marked", marked);
+    button.classList.toggle("fc-btn--active", marked);
+    button.setAttribute("aria-pressed", String(marked));
+    const label = button.querySelector("[data-file-chip-remove-label]") ?? button;
+    label.textContent = marked ? button.dataset.labelMarked ?? DEFAULT_MARKED : button.dataset.labelUnmarked ?? DEFAULT_UNMARKED;
+  };
+  var buttonIn = (popover) => popover.querySelector("[data-file-chip-remove]");
+  var sync = (chip, popover) => {
+    const button = buttonIn(popover);
+    const target = targetFor(chip);
+    if (!button || !target) {
+      return;
+    }
+    render(chip, button, findInput(target, button.dataset.fileChipInput, button.dataset.fileChipId) !== null);
+  };
+  var toggle = (chip, button) => {
+    const target = targetFor(chip);
+    if (!target) {
+      console.warn("[FileChips] No [data-file-chips-bucket] or <form> found for this chip; cannot mark it for removal.");
+      return;
+    }
+    const name = button.dataset.fileChipInput;
+    const id = button.dataset.fileChipId;
+    const existing = findInput(target, name, id);
+    if (existing) {
+      existing.remove();
+    } else {
+      const input = chip.ownerDocument.createElement("input");
+      input.type = "hidden";
+      input.name = name;
+      input.value = id;
+      target.appendChild(input);
+    }
+    const marked = !existing;
+    render(chip, button, marked);
+    chip.dispatchEvent(new CustomEvent("file-chips:change", { bubbles: true, detail: { id, input: name, marked } }));
+  };
+
+  // js/index.js
+  var documents = /* @__PURE__ */ new Map();
+  var handled = (doc, element) => [...documents.get(doc)?.roots ?? []].some((root) => root.contains(element));
+  var openWithState = (chip) => {
+    const popover = open(chip);
+    if (popover) {
+      sync(chip, popover);
+    }
+    return popover;
+  };
+  var listenersFor = (doc) => ({
+    click(event) {
+      const target = event.target;
+      const remove = target.closest?.("[data-file-chip-remove]");
+      if (remove && getOpen()?.contains(remove)) {
+        toggle(getOpenChip(), remove);
+        return;
+      }
+      const chip = target.closest?.("[data-file-chip]");
+      if (!chip || !handled(doc, chip)) {
+        return;
+      }
+      event.preventDefault();
+      if (getOpenChip() === chip) {
+        close();
+      } else {
+        openWithState(chip);
+      }
+    },
+    mousedown(event) {
+      const popover = getOpen();
+      if (popover && !popover.contains(event.target) && !event.target.closest?.("[data-file-chip]")) {
+        close();
+      }
+    },
+    keydown(event) {
+      if (event.key === "Escape" && getOpen()) {
+        close({ restoreFocus: true });
+      }
+    },
+    reposition() {
+      const popover = getOpen();
+      if (popover) {
+        position(getOpenChip(), popover);
+      }
+    }
+  });
+  var listen = (doc, listeners, method) => {
+    doc[method]("click", listeners.click);
+    doc[method]("mousedown", listeners.mousedown);
+    doc[method]("keydown", listeners.keydown);
+    doc.defaultView?.[method]("resize", listeners.reposition);
+    doc.defaultView?.[method]("scroll", listeners.reposition, true);
+  };
+  var init = ({ root = document } = {}) => {
+    const doc = root.ownerDocument ?? root;
+    if (handled(doc, root)) {
+      return () => {
+      };
+    }
+    if (!documents.has(doc)) {
+      const listeners = listenersFor(doc);
+      documents.set(doc, { roots: /* @__PURE__ */ new Set(), listeners });
+      listen(doc, listeners, "addEventListener");
+    }
+    const entry = documents.get(doc);
+    entry.roots.add(root);
+    return () => {
+      if (!entry.roots.delete(root)) {
+        return;
+      }
+      if (getOpenChip() && root.contains(getOpenChip())) {
+        close();
+      }
+      if (entry.roots.size === 0) {
+        listen(doc, entry.listeners, "removeEventListener");
+        documents.delete(doc);
+      }
+    };
+  };
+  var FileChips = {
+    init,
+    open: openWithState,
+    close: () => close(),
+    getOpen,
+    position
+  };
+  var index_default = FileChips;
+
+  // js/browser.js
+  window.FileChips = index_default;
+  var script = document.currentScript;
+  if (!script?.hasAttribute("data-manual")) {
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", () => index_default.init(), { once: true });
+    } else {
+      index_default.init();
+    }
+  }
+})();
+//# sourceMappingURL=file-chips.js.map