@zvndev/yable-vanilla 0.1.0

package/dist/index.js

@@ -0,0 +1,549 @@
+import { createTable, functionalUpdate } from '@zvndev/yable-core';
+export { aggregationFns, createColumnHelper, filterFns, functionalUpdate, sortingFns } from '@zvndev/yable-core';
+
+// src/index.ts
+
+// src/renderer.ts
+function esc(value) {
+  const s = String(value ?? "");
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function escAttr(value) {
+  const s = String(value ?? "");
+  return s.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+function renderTable(table, opts = {}) {
+  const classes = [
+    "yable",
+    opts.theme && `yable-theme-${escAttr(opts.theme)}`,
+    opts.stickyHeader && "yable--sticky-header",
+    opts.striped && "yable--striped",
+    opts.bordered && "yable--bordered",
+    opts.compact && "yable--compact"
+  ].filter(Boolean).join(" ");
+  const rows = table.getRowModel().rows;
+  let html = `<div class="${classes}" role="grid" aria-rowcount="${rows.length}" aria-colcount="${table.getVisibleLeafColumns().length}">`;
+  html += '<table class="yable-table">';
+  html += renderHeader(table);
+  html += renderBody(table, opts.clickableRows);
+  if (opts.footer) {
+    html += renderFooter(table);
+  }
+  html += "</table>";
+  if (rows.length === 0) {
+    html += `<div class="yable-empty"><div class="yable-empty-message">${esc(opts.emptyMessage ?? "No data")}</div></div>`;
+  }
+  html += "</div>";
+  return html;
+}
+function renderHeader(table) {
+  const headerGroups = table.getHeaderGroups();
+  let html = '<thead class="yable-thead">';
+  for (const headerGroup of headerGroups) {
+    html += `<tr class="yable-tr" data-yable-header-group="${escAttr(headerGroup.id)}">`;
+    for (const header of headerGroup.headers) {
+      html += renderHeaderCell(header);
+    }
+    html += "</tr>";
+  }
+  html += "</thead>";
+  return html;
+}
+function renderHeaderCell(header) {
+  if (header.isPlaceholder) {
+    return `<th class="yable-th" colspan="${header.colSpan}"></th>`;
+  }
+  const column = header.column;
+  const sortable = column.getCanSort();
+  const sortDir = column.getIsSorted();
+  const pinned = column.getIsPinned();
+  const classes = [
+    "yable-th",
+    sortable && "yable-th--sortable",
+    sortDir && `yable-th--sorted-${sortDir}`,
+    pinned && `yable-th--pinned-${pinned}`
+  ].filter(Boolean).join(" ");
+  const style = pinned ? getPinStyle(column) : "";
+  const ariaSort = sortDir === "asc" ? "ascending" : sortDir === "desc" ? "descending" : sortable ? "none" : void 0;
+  const ariaSortAttr = ariaSort ? ` aria-sort="${ariaSort}"` : "";
+  const headerDef = column.columnDef.header;
+  const content = typeof headerDef === "function" ? String(headerDef(header.getContext())) : String(headerDef ?? column.id);
+  let sortIndicator = "";
+  if (sortable) {
+    if (sortDir) {
+      sortIndicator = `<span class="yable-sort-indicator" data-active="true" data-direction="${sortDir}" aria-hidden="true">${sortDir === "asc" ? "&#9650;" : "&#9660;"}</span>`;
+    } else {
+      sortIndicator = `<span class="yable-sort-indicator" aria-hidden="true">&#9650;&#9660;</span>`;
+    }
+  }
+  let resizeHandle = "";
+  if (column.getCanResize()) {
+    resizeHandle = `<div class="yable-resize-handle" data-yable-resize="${escAttr(column.id)}"></div>`;
+  }
+  return `<th class="${classes}"${ariaSortAttr}${style ? ` style="${style}"` : ""} data-yable-column="${escAttr(column.id)}" data-yable-sortable="${sortable}" colspan="${header.colSpan}">${esc(content)}${sortIndicator}${resizeHandle}</th>`;
+}
+function renderBody(table, clickableRows) {
+  const rows = table.getRowModel().rows;
+  let html = '<tbody class="yable-tbody">';
+  for (const row of rows) {
+    html += renderRow(table, row, clickableRows);
+  }
+  html += "</tbody>";
+  return html;
+}
+function renderRow(table, row, clickable) {
+  const isSelected = row.getIsSelected();
+  const isExpanded = row.getIsExpanded();
+  const classes = [
+    "yable-tr",
+    clickable && "yable-tr--clickable",
+    isSelected && "yable-tr--selected"
+  ].filter(Boolean).join(" ");
+  let html = `<tr class="${classes}" data-yable-row="${escAttr(row.id)}"${isSelected ? ' aria-selected="true"' : ""}>`;
+  const cells = row.getVisibleCells();
+  for (const cell of cells) {
+    html += renderCell(table, cell);
+  }
+  html += "</tr>";
+  if (isExpanded) {
+    const colSpan = table.getVisibleLeafColumns().length;
+    html += `<tr class="yable-tr yable-tr--detail" data-yable-detail="${escAttr(row.id)}"><td class="yable-td yable-td--detail" colspan="${colSpan}"><div class="yable-detail-content" data-yable-detail-content="${escAttr(row.id)}"></div></td></tr>`;
+  }
+  return html;
+}
+function renderCell(table, cell) {
+  const column = cell.column;
+  const pinned = column.getIsPinned();
+  const isEditing = cell.getIsEditing();
+  const isAlwaysEditable = cell.getIsAlwaysEditable();
+  const classes = [
+    "yable-td",
+    pinned && `yable-td--pinned-${pinned}`,
+    (isEditing || isAlwaysEditable) && "yable-td--editing"
+  ].filter(Boolean).join(" ");
+  const style = pinned ? getPinStyle(column) : "";
+  const editConfig = column.columnDef.editConfig;
+  if (isEditing || isAlwaysEditable) {
+    if (editConfig) {
+      const value2 = table.getPendingValue(cell.row.id, column.id) ?? cell.getValue();
+      return `<td class="${classes}"${style ? ` style="${style}"` : ""} data-yable-cell="${escAttr(column.id)}" data-yable-row="${escAttr(cell.row.id)}">${renderFormElement(editConfig, value2, cell.row.id, column.id)}</td>`;
+    }
+  }
+  const value = cell.renderValue();
+  return `<td class="${classes}"${style ? ` style="${style}"` : ""} data-yable-cell="${escAttr(column.id)}" data-yable-row="${escAttr(cell.row.id)}">${esc(value)}</td>`;
+}
+function renderFooter(table) {
+  const footerGroups = table.getFooterGroups();
+  if (!footerGroups.length) return "";
+  let html = '<tfoot class="yable-tfoot">';
+  for (const footerGroup of footerGroups) {
+    html += '<tr class="yable-tr">';
+    for (const header of footerGroup.headers) {
+      const footerDef = header.column.columnDef.footer;
+      const content = header.isPlaceholder ? "" : typeof footerDef === "function" ? String(footerDef(header.getContext())) : String(footerDef ?? "");
+      html += `<td class="yable-td" colspan="${header.colSpan}">${esc(content)}</td>`;
+    }
+    html += "</tr>";
+  }
+  html += "</tfoot>";
+  return html;
+}
+function renderFormElement(editConfig, value, rowId, columnId) {
+  const type = editConfig.type ?? "text";
+  switch (type) {
+    case "select":
+      return renderSelect(editConfig.options ?? [], value, rowId, columnId, editConfig.placeholder);
+    case "checkbox":
+      return `<input type="checkbox" class="yable-checkbox" data-yable-input="${escAttr(columnId)}" data-yable-input-row="${escAttr(rowId)}"${value ? " checked" : ""} />`;
+    case "toggle":
+      return `<input type="checkbox" role="switch" class="yable-toggle" data-yable-input="${escAttr(columnId)}" data-yable-input-row="${escAttr(rowId)}"${value ? " checked" : ""} aria-checked="${Boolean(value)}" />`;
+    case "date":
+    case "datetime-local":
+    case "time":
+      return `<input type="${esc(type)}" class="yable-input" data-yable-input="${escAttr(columnId)}" data-yable-input-row="${escAttr(rowId)}" value="${esc(formatDateValue(value, type))}" />`;
+    default:
+      return `<input type="${esc(type)}" class="yable-input" data-yable-input="${escAttr(columnId)}" data-yable-input-row="${escAttr(rowId)}" value="${esc(String(value ?? ""))}"${editConfig.placeholder ? ` placeholder="${esc(editConfig.placeholder)}"` : ""} />`;
+  }
+}
+function renderSelect(options, value, rowId, columnId, placeholder) {
+  let html = `<select class="yable-select" data-yable-input="${escAttr(columnId)}" data-yable-input-row="${escAttr(rowId)}">`;
+  if (placeholder) {
+    html += `<option value="" disabled>${esc(placeholder)}</option>`;
+  }
+  for (const opt of options) {
+    const selected = String(opt.value) === String(value) ? " selected" : "";
+    html += `<option value="${esc(opt.value)}"${selected}>${esc(opt.label)}</option>`;
+  }
+  html += "</select>";
+  return html;
+}
+function formatDateValue(value, type) {
+  if (!value) return "";
+  if (typeof value === "string") return value;
+  if (value instanceof Date) {
+    if (type === "date") return value.toISOString().split("T")[0];
+    if (type === "datetime-local") return value.toISOString().slice(0, 16);
+    if (type === "time") return value.toISOString().slice(11, 16);
+  }
+  return String(value);
+}
+function getPinStyle(column) {
+  const pinned = column.getIsPinned();
+  if (!pinned) return "";
+  const offset = column.getPinnedIndex() * 150;
+  return `position: sticky; ${pinned}: ${offset}px; z-index: 1;`;
+}
+function renderPagination(table, opts = {}) {
+  const { showPageSize = true, pageSizes = [10, 20, 50, 100], showInfo = true } = opts;
+  const { pageIndex, pageSize } = table.getState().pagination;
+  const pageCount = table.getPageCount();
+  const totalRows = table.getPrePaginationRowModel().rows.length;
+  const from = pageIndex * pageSize + 1;
+  const to = Math.min((pageIndex + 1) * pageSize, totalRows);
+  let html = '<div class="yable-pagination">';
+  if (showInfo) {
+    html += '<div class="yable-pagination-info">';
+    html += totalRows > 0 ? `<span>${from}\u2013${to} of ${totalRows}</span>` : "<span>No results</span>";
+    if (showPageSize) {
+      html += '<select class="yable-pagination-select" data-yable-pagesize>';
+      for (const size of pageSizes) {
+        html += `<option value="${size}"${size === pageSize ? " selected" : ""}>${size} rows</option>`;
+      }
+      html += "</select>";
+    }
+    html += "</div>";
+  }
+  html += '<div class="yable-pagination-pages">';
+  html += `<button class="yable-pagination-btn" data-yable-page="first"${!table.getCanPreviousPage() ? " disabled" : ""} aria-label="First page">&#171;</button>`;
+  html += `<button class="yable-pagination-btn" data-yable-page="prev"${!table.getCanPreviousPage() ? " disabled" : ""} aria-label="Previous page">&#8249;</button>`;
+  const pages = getPageNumbers(pageIndex, pageCount);
+  for (let i = 0; i < pages.length; i++) {
+    const page = pages[i];
+    if (page === -1) {
+      html += '<span class="yable-pagination-btn" style="cursor:default;opacity:0.5">...</span>';
+    } else {
+      html += `<button class="yable-pagination-btn" data-yable-page="${page}"${page === pageIndex ? ' data-active="true" aria-current="page"' : ""} aria-label="Page ${page + 1}">${page + 1}</button>`;
+    }
+  }
+  html += `<button class="yable-pagination-btn" data-yable-page="next"${!table.getCanNextPage() ? " disabled" : ""} aria-label="Next page">&#8250;</button>`;
+  html += `<button class="yable-pagination-btn" data-yable-page="last"${!table.getCanNextPage() ? " disabled" : ""} aria-label="Last page">&#187;</button>`;
+  html += "</div></div>";
+  return html;
+}
+function getPageNumbers(current, total) {
+  if (total <= 7) return Array.from({ length: total }, (_, i) => i);
+  const pages = [0];
+  if (current > 3) pages.push(-1);
+  const start = Math.max(1, current - 1);
+  const end = Math.min(total - 2, current + 1);
+  for (let i = start; i <= end; i++) pages.push(i);
+  if (current < total - 4) pages.push(-1);
+  pages.push(total - 1);
+  return pages;
+}
+
+// src/events.ts
+function attachEventDelegation(root, table, handlers, onUpdate) {
+  const abortController = new AbortController();
+  const signal = abortController.signal;
+  root.addEventListener(
+    "click",
+    (e) => {
+      const target = e.target;
+      const pageBtn = target.closest("[data-yable-page]");
+      if (pageBtn) {
+        const page = pageBtn.dataset.yablePage;
+        if (page === "first") table.setPageIndex(0);
+        else if (page === "last") table.setPageIndex(table.getPageCount() - 1);
+        else if (page === "prev") table.previousPage();
+        else if (page === "next") table.nextPage();
+        else table.setPageIndex(Number(page));
+        onUpdate();
+        return;
+      }
+      const th = target.closest('[data-yable-sortable="true"]');
+      if (th) {
+        const columnId = th.dataset.yableColumn;
+        const column = table.getColumn(columnId);
+        if (column) {
+          column.toggleSorting();
+          onUpdate();
+        }
+        handlers["header:click"]?.({
+          type: "header:click",
+          columnId,
+          originalEvent: e
+        });
+        return;
+      }
+      const td = target.closest("[data-yable-cell]");
+      if (td) {
+        const columnId = td.dataset.yableCell;
+        const rowId = td.dataset.yableRow;
+        handlers["cell:click"]?.({
+          type: "cell:click",
+          rowId,
+          columnId,
+          originalEvent: e
+        });
+      }
+      const tr = target.closest("[data-yable-row]");
+      if (tr && !target.closest("input, select, button")) {
+        const rowId = tr.dataset.yableRow;
+        handlers["row:click"]?.({
+          type: "row:click",
+          rowId,
+          originalEvent: e
+        });
+      }
+    },
+    { signal }
+  );
+  root.addEventListener(
+    "dblclick",
+    (e) => {
+      const target = e.target;
+      const td = target.closest("[data-yable-cell]");
+      if (td) {
+        const columnId = td.dataset.yableCell;
+        const rowId = td.dataset.yableRow;
+        handlers["cell:dblclick"]?.({
+          type: "cell:dblclick",
+          rowId,
+          columnId,
+          originalEvent: e
+        });
+      }
+      const tr = target.closest("[data-yable-row]");
+      if (tr) {
+        const rowId = tr.dataset.yableRow;
+        handlers["row:dblclick"]?.({
+          type: "row:dblclick",
+          rowId,
+          originalEvent: e
+        });
+      }
+    },
+    { signal }
+  );
+  root.addEventListener(
+    "change",
+    (e) => {
+      const target = e.target;
+      const columnId = target.dataset.yableInput;
+      const rowId = target.dataset.yableInputRow;
+      if (!columnId || !rowId) return;
+      let value;
+      if (target instanceof HTMLInputElement && target.type === "checkbox") {
+        value = target.checked;
+      } else if (target instanceof HTMLInputElement && target.type === "number") {
+        value = Number(target.value);
+      } else {
+        value = target.value;
+      }
+      table.setPendingValue(rowId, columnId, value);
+      onUpdate();
+    },
+    { signal }
+  );
+  root.addEventListener(
+    "blur",
+    (e) => {
+      const target = e.target;
+      if (target.dataset.yableInput && target.dataset.yableInputRow) {
+        const editing = table.getState().editing;
+        if (editing.activeCell) {
+          table.commitEdit();
+          onUpdate();
+        }
+      }
+    },
+    { signal, capture: true }
+  );
+  root.addEventListener(
+    "change",
+    (e) => {
+      const target = e.target;
+      if (target.dataset.yablePagesize !== void 0) {
+        table.setPageSize(Number(target.value));
+        onUpdate();
+      }
+    },
+    { signal }
+  );
+  root.addEventListener(
+    "mousedown",
+    (e) => {
+      const target = e.target;
+      if (target.classList.contains("yable-resize-handle")) {
+        const columnId = target.dataset.yableResize;
+        for (const headerGroup of table.getHeaderGroups()) {
+          for (const header of headerGroup.headers) {
+            if (header.column.id === columnId) {
+              const handler = header.getResizeHandler();
+              if (handler) {
+                handler(e);
+                onUpdate();
+              }
+              break;
+            }
+          }
+        }
+      }
+    },
+    { signal }
+  );
+  return () => abortController.abort();
+}
+
+// src/createTableDOM.ts
+function createTableDOM(options) {
+  const { element, initialState, ...tableOpts } = options;
+  const {
+    stickyHeader,
+    striped,
+    bordered,
+    compact,
+    theme,
+    clickableRows,
+    footer,
+    emptyMessage,
+    pagination: paginationOpts,
+    ...coreOptions
+  } = tableOpts;
+  let state = {
+    sorting: [],
+    columnFilters: [],
+    globalFilter: "",
+    pagination: { pageIndex: 0, pageSize: 10 },
+    rowSelection: {},
+    columnVisibility: {},
+    columnOrder: [],
+    columnPinning: { left: [], right: [] },
+    columnSizing: {},
+    columnSizingInfo: {
+      startOffset: null,
+      startSize: null,
+      deltaOffset: null,
+      deltaPercentage: null,
+      isResizingColumn: false,
+      columnSizingStart: []
+    },
+    expanded: {},
+    rowPinning: { top: [], bottom: [] },
+    grouping: [],
+    editing: { activeCell: void 0, pendingValues: {} },
+    commits: { cells: {}, nextOpId: 1 },
+    keyboardNavigation: { focusedCell: null },
+    undoRedo: { undoStack: [], redoStack: [], maxSize: 50 },
+    fillHandle: { isDragging: false },
+    formulas: { enabled: false, formulas: {}, computedValues: {}, errors: {} },
+    rowDrag: { draggingRowId: null, overRowId: null, dropPosition: null },
+    pivot: {
+      enabled: false,
+      config: { rowFields: [], columnFields: [], valueFields: [] },
+      expandedRowGroups: {},
+      expandedColumnGroups: {}
+    },
+    ...initialState
+  };
+  let displayOpts = {
+    stickyHeader,
+    striped,
+    bordered,
+    compact,
+    theme,
+    clickableRows,
+    footer,
+    emptyMessage
+  };
+  let paginationDisplayOpts = typeof paginationOpts === "object" ? paginationOpts : paginationOpts ? {} : void 0;
+  const handlers = {};
+  const coreTable = createTable({
+    ...coreOptions,
+    state,
+    onStateChange: (updater) => {
+      state = functionalUpdate(updater, state);
+      render();
+    }
+  });
+  let cleanupEvents = null;
+  function render() {
+    coreTable.setOptions((prev) => ({
+      ...prev,
+      ...coreOptions,
+      state,
+      onStateChange: (updater) => {
+        state = functionalUpdate(updater, state);
+        render();
+      }
+    }));
+    cleanupEvents?.();
+    let html = renderTable(coreTable, displayOpts);
+    if (paginationDisplayOpts !== void 0) {
+      html += renderPagination(coreTable, paginationDisplayOpts);
+    }
+    element.innerHTML = html;
+    cleanupEvents = attachEventDelegation(element, coreTable, handlers, render);
+  }
+  render();
+  const instance = {
+    table: coreTable,
+    render,
+    setData(data) {
+      coreTable.setOptions((prev) => ({
+        ...prev,
+        data,
+        state,
+        onStateChange: (updater) => {
+          state = functionalUpdate(updater, state);
+          render();
+        }
+      }));
+      render();
+    },
+    getState() {
+      return state;
+    },
+    setOptions(opts) {
+      const { element: _el, initialState: _is, ...rest } = opts;
+      const {
+        stickyHeader: sh,
+        striped: st,
+        bordered: bd,
+        compact: cp,
+        theme: th,
+        clickableRows: cr,
+        footer: ft,
+        emptyMessage: em,
+        pagination: pg,
+        ...core
+      } = rest;
+      if (sh !== void 0 || st !== void 0 || bd !== void 0 || cp !== void 0 || th !== void 0 || cr !== void 0 || ft !== void 0 || em !== void 0) {
+        displayOpts = { ...displayOpts, stickyHeader: sh ?? displayOpts.stickyHeader, striped: st ?? displayOpts.striped, bordered: bd ?? displayOpts.bordered, compact: cp ?? displayOpts.compact, theme: th ?? displayOpts.theme, clickableRows: cr ?? displayOpts.clickableRows, footer: ft ?? displayOpts.footer, emptyMessage: em ?? displayOpts.emptyMessage };
+      }
+      if (pg !== void 0) {
+        paginationDisplayOpts = typeof pg === "object" ? pg : pg ? {} : void 0;
+      }
+      if (Object.keys(core).length > 0) {
+        Object.assign(coreOptions, core);
+      }
+      render();
+    },
+    on(event, handler) {
+      handlers[event] = handler;
+    },
+    off(event) {
+      delete handlers[event];
+    },
+    destroy() {
+      cleanupEvents?.();
+      element.innerHTML = "";
+    }
+  };
+  return instance;
+}
+
+export { createTableDOM, renderPagination, renderTable };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map