@inglorious/web 2.0.1 → 2.1.0

package/src/table/logic.js

@@ -0,0 +1,401 @@
+/* eslint-disable no-magic-numbers */
+
+export const logic = {
+  init(entity) {
+    initTable(entity)
+  },
+
+  create(entity) {
+    initTable(entity)
+  },
+
+  sortChange(entity, columnId) {
+    const column = entity.columns.find((c) => c.id === columnId)
+    if (!column?.isSortable) return
+
+    const existingIndex = entity.sorts.findIndex((s) => s.column === columnId)
+
+    if (existingIndex !== -1) {
+      // Toggle direction
+      const existing = entity.sorts[existingIndex]
+      if (existing.direction === "asc") {
+        existing.direction = "desc"
+      } else {
+        // Remove from sort if going from desc back to nothing
+        entity.sorts.splice(existingIndex, 1)
+      }
+    } else {
+      // Add new sort
+      entity.sorts.push({ column: columnId, direction: "asc" })
+    }
+
+    if (entity.pagination) {
+      entity.pagination.page = 0
+    }
+  },
+
+  sortsClear(entity) {
+    entity.sorts = []
+  },
+
+  filterChange(entity, { columnId, value }) {
+    if (value == null || value === "") {
+      delete entity.filters[columnId]
+    } else {
+      entity.filters[columnId] = value
+    }
+
+    // Reset to first page when filtering
+    if (entity.pagination) {
+      entity.pagination.page = 0
+    }
+  },
+
+  filtersClear(entity) {
+    entity.filters = {}
+    if (entity.pagination) {
+      entity.pagination.page = 0
+    }
+  },
+
+  searchChange(entity, search) {
+    entity.search.value = search
+  },
+
+  pageChange(entity, page) {
+    if (!entity.pagination) return
+
+    const totalPages = Math.ceil(
+      getTotalRows(entity) / entity.pagination.pageSize,
+    )
+    entity.pagination.page = Math.max(0, Math.min(page, totalPages - 1))
+  },
+
+  pageNext(entity) {
+    if (!entity.pagination) return
+    const totalPages = Math.ceil(
+      getTotalRows(entity) / entity.pagination.pageSize,
+    )
+    entity.pagination.page = Math.min(
+      entity.pagination.page + 1,
+      totalPages - 1,
+    )
+  },
+
+  pagePrev(entity) {
+    if (!entity.pagination) return
+    entity.pagination.page = Math.max(entity.pagination.page - 1, 0)
+  },
+
+  pageSizeChange(entity, pageSize) {
+    if (!entity.pagination) return
+
+    entity.pagination.pageSize = pageSize
+    entity.pagination.page = 0
+  },
+
+  rowSelect(entity, rowId) {
+    if (!entity.isMultiSelect) {
+      entity.selection = []
+    }
+
+    if (!entity.selection.includes(rowId)) {
+      entity.selection.push(rowId)
+    }
+  },
+
+  rowDeselect(entity, rowId) {
+    const index = entity.selection.indexOf(rowId)
+    if (index !== -1) {
+      entity.selection.splice(index, 1)
+    }
+  },
+
+  rowToggle(entity, rowId) {
+    const index = entity.selection.indexOf(rowId)
+
+    if (index === -1) {
+      if (!entity.isMultiSelect) {
+        entity.selection = [rowId] // Replace entirely
+      } else {
+        entity.selection.push(rowId)
+      }
+    } else {
+      entity.selection.splice(index, 1)
+    }
+  },
+
+  rowsToggleAll(entity) {
+    const rows = getRows(entity)
+    const allSelected = rows.every((row) => entity.selection.includes(row.id))
+
+    if (allSelected) {
+      // Deselect all visible
+      rows.forEach((row) => {
+        const index = entity.selection.indexOf(row.id)
+        if (index !== -1) entity.selection.splice(index, 1)
+      })
+    } else {
+      // Select all visible
+      rows.forEach((row) => {
+        if (!entity.selection.includes(row.id)) {
+          entity.selection.push(row.id)
+        }
+      })
+    }
+  },
+
+  rowsSelectAll(entity) {
+    const rows = getRows(entity)
+    rows.forEach((row) => {
+      if (!entity.selection.includes(row.id)) {
+        entity.selection.push(row.id)
+      }
+    })
+  },
+
+  selectionClear(entity) {
+    entity.selection.length = 0
+  },
+}
+
+// Helper functions outside the type (like form helpers)
+
+export function getRows(entity) {
+  let rows = entity.data
+  rows = applyFilters(entity, rows)
+  rows = applySearch(entity, rows)
+  rows = applySorts(entity, rows)
+  rows = applyPagination(entity, rows)
+
+  return rows
+}
+
+export function getTotalRows(entity) {
+  let rows = entity.data
+  rows = applyFilters(entity, rows)
+  rows = applySearch(entity, rows)
+  return rows.length
+}
+
+export function getPaginationInfo(entity) {
+  if (!entity.pagination) return null
+
+  const totalRows = getTotalRows(entity)
+  const { page, pageSize } = entity.pagination
+  const totalPages = Math.ceil(totalRows / pageSize)
+  const start = page * pageSize
+  const end = Math.min((page + 1) * pageSize, totalRows)
+
+  return {
+    page,
+    pageSize,
+    totalPages,
+    totalRows,
+    start,
+    end,
+    hasNextPage: page < totalPages - 1,
+    hasPrevPage: page > 0,
+  }
+}
+
+export function getSortDirection(entity, columnId) {
+  const sort = entity.sorts.find((s) => s.column === columnId)
+  return sort?.direction || null
+}
+
+export function getSortIndex(entity, columnId) {
+  return entity.sorts.findIndex((s) => s.column === columnId)
+}
+
+export function getFilter(entity, columnId) {
+  return entity.filters[columnId]
+}
+
+export function isRowSelected(entity, rowId) {
+  return entity.selection.includes(rowId)
+}
+
+export function isAllSelected(entity) {
+  const rows = getRows(entity)
+  return rows.length && rows.every((row) => entity.selection.includes(row.id))
+}
+
+export function isSomeSelected(entity) {
+  const rows = getRows(entity)
+  const selectedCount = rows.filter((row) =>
+    entity.selection.includes(row.id),
+  ).length
+  return selectedCount && selectedCount < rows.length
+}
+
+function initTable(entity) {
+  entity.data ??= []
+
+  // Auto-generate columns from first data item if not provided
+  if (!entity.columns && entity.data.length) {
+    const [firstRow] = entity.data
+
+    entity.columns = Object.keys(firstRow).map((key) => {
+      const value = firstRow[key]
+      const type = getDefaultColumnType(value)
+      const filter = getDefaultColumnFilter(type)
+
+      return {
+        id: key,
+        title: capitalize(key),
+        type,
+        isSortable: false,
+        isFilterable: false,
+        filter,
+        width: getDefaultColumnWidth(filter.type),
+      }
+    })
+  } else {
+    entity.columns ??= []
+    entity.columns.forEach((column) => {
+      column.title ??= capitalize(column.id)
+      column.type ??= getDefaultColumnType()
+      column.filter ??= getDefaultColumnFilter(column.type)
+      column.width ??= getDefaultColumnWidth(column.filter.type)
+    })
+  }
+
+  // State
+  entity.sorts ??= []
+  entity.filters ??= {}
+  entity.search ??= null
+  if (entity.search) {
+    entity.search.value ??= ""
+  }
+  entity.selection ??= []
+
+  entity.pagination ??= null
+  if (entity.pagination) {
+    entity.pagination.page ??= 0
+  }
+}
+
+function getDefaultColumnType(value) {
+  if (typeof value === "number") return "number"
+  if (typeof value === "boolean") return "boolean"
+  if (value instanceof Date) return "date"
+  return "string"
+}
+
+function getDefaultColumnFilter(type) {
+  if (type === "number") return { type: "range" }
+  if (type === "boolean")
+    return { type: "select", options: [null, true, false] }
+  if (type === "date") return { type: "date" }
+  return { type: "text" }
+}
+
+function getDefaultColumnWidth(filterType) {
+  if (filterType === "number") return 100
+  if (filterType === "range") return 200
+  if (filterType === "select") return 70
+  if (filterType === "date") return 120
+  if (filterType === "time") return 120
+  if (filterType === "datetime") return 170
+  return 200
+}
+
+function applyFilters(entity, rows) {
+  if (!Object.keys(entity.filters).length) {
+    return rows
+  }
+
+  return rows.filter((row) => {
+    return Object.entries(entity.filters).every(([columnId, filterValue]) => {
+      const column = entity.columns.find((c) => c.id === columnId)
+      if (!column) return true
+
+      // Custom filter function
+      if (column.filterFn) {
+        return column.filterFn(row, filterValue)
+      }
+
+      // Default filters by type
+      const value = row[columnId]
+
+      if (["range", "date", "time", "datetime"].includes(column.filter.type)) {
+        const { min, max } = filterValue
+        if (min != null && value < min) return false
+        if (max != null && value > max) return false
+        return true
+      }
+
+      if (["number", "boolean", "select"].includes(column.filter.type)) {
+        return value === filterValue
+      }
+
+      // String filtering (case-insensitive contains)
+      return String(value)
+        .toLowerCase()
+        .includes(String(filterValue).toLowerCase())
+    })
+  })
+}
+
+function applySearch(entity, rows) {
+  if (!entity.search?.value) {
+    return rows
+  }
+
+  const searchLower = entity.search.value.toLowerCase()
+
+  return rows.filter((row) =>
+    entity.columns.some((column) => {
+      const value = row[column.id]
+      const formattedValue = column.format?.(value) ?? String(value)
+      return formattedValue.toLowerCase().includes(searchLower)
+    }),
+  )
+}
+
+function applySorts(entity, rows) {
+  if (!entity.sorts.length) {
+    return rows
+  }
+
+  return [...rows].sort((a, b) => {
+    for (const { column: columnId, direction } of entity.sorts) {
+      const column = entity.columns.find((c) => c.id === columnId)
+      let aVal = a[columnId]
+      let bVal = b[columnId]
+
+      // Custom sort function
+      if (column?.sortFn) {
+        const result =
+          direction === "asc" ? column.sortFn(a, b) : column.sortFn(b, a)
+        if (result !== 0) return result
+        continue
+      }
+
+      // Default sorting
+      if (aVal === bVal) continue
+      if (aVal == null) return 1
+      if (bVal == null) return -1
+
+      const comparison = aVal < bVal ? -1 : 1
+      return direction === "asc" ? comparison : -comparison
+    }
+    return 0
+  })
+}
+
+function applyPagination(entity, rows) {
+  if (!entity.pagination) {
+    return rows
+  }
+
+  const { page, pageSize } = entity.pagination
+  const start = page * pageSize
+  return rows.slice(start, start + pageSize)
+}
+
+function capitalize(str) {
+  const [firstChar, ...rest] = str
+  return [firstChar.toUpperCase(), ...rest].join("")
+}

package/src/table/rendering.js

@@ -0,0 +1,239 @@
+import { html } from "lit-html"
+import { ref } from "lit-html/directives/ref.js"
+
+import { filters } from "./filters"
+import { getPaginationInfo, getRows, getSortDirection } from "./logic"
+
+const DIVISOR = 2
+const FIRST_PAGE = 0
+const LAST_PAGE = 1
+const PRETTY_PAGE = 1
+const PERCENTAGE_TO_FLEX = 0.01
+
+export const rendering = {
+  mount(entity, containerEl) {
+    const columns = containerEl.querySelectorAll(":scope > *")
+    ;[...columns].forEach((column, index) => {
+      entity.columns[index].width = column.offsetWidth
+    })
+  },
+
+  render(entity, api) {
+    const type = api.getType(entity.type)
+
+    return html`<div class="iw-table">
+      ${type.renderHeader(entity, api)} ${type.renderBody(entity, api)}
+      ${type.renderFooter(entity, api)}
+    </div> `
+  },
+
+  renderHeader(entity, api) {
+    const type = api.getType(entity.type)
+
+    return html`<div class="iw-table-header">
+      <div
+        class="iw-table-header-row"
+        ${ref((el) => {
+          if (
+            el &&
+            entity.columns.some(({ width }) => typeof width === "string")
+          ) {
+            queueMicrotask(() => {
+              api.notify(`#${entity.id}:mount`, el)
+            })
+          }
+        })}
+      >
+        ${entity.columns.map((column) =>
+          type.renderHeaderColumn(entity, column, api),
+        )}
+      </div>
+
+      ${entity.search && type.renderSearchbar(entity, api)}
+    </div>`
+  },
+
+  renderHeaderColumn(entity, column, api) {
+    return html`<div
+      class="iw-table-header-column"
+      style=${getColumnStyle(column)}
+    >
+      <div
+        @click=${() =>
+          column.isSortable &&
+          api.notify(`#${entity.id}:sortChange`, column.id)}
+        class="iw-table-header-title"
+      >
+        ${column.title} ${getSortIcon(getSortDirection(entity, column.id))}
+      </div>
+
+      ${column.isFilterable && filters.render(entity, column, api)}
+    </div>`
+  },
+
+  renderSearchbar(entity, api) {
+    return html`<input
+      name="search"
+      type="text"
+      placeholder=${entity.search.placeholder ?? "Fuzzy search..."}
+      value=${entity.search.value}
+      @input=${(event) =>
+        api.notify(`#${entity.id}:searchChange`, event.target.value)}
+      class="iw-table-searchbar"
+    />`
+  },
+
+  renderBody(entity, api) {
+    const type = api.getType(entity.type)
+
+    return html`<div class="iw-table-body">
+      ${getRows(entity).map((row, index) =>
+        type.renderRow(entity, row, index, api),
+      )}
+    </div>`
+  },
+
+  renderRow(entity, row, index, api) {
+    const type = api.getType(entity.type)
+    const rowId = row[entity.rowId ?? "id"]
+
+    return html`<div
+      @click=${() => api.notify(`#${entity.id}:rowToggle`, rowId)}
+      class="iw-table-row ${index % DIVISOR
+        ? "iw-table-row-even"
+        : "iw-table-row-odd"} ${entity.selection.includes(rowId)
+        ? "iw-table-row-selected"
+        : ""}"
+    >
+      ${Object.values(row).map((value, index) =>
+        type.renderCell(entity, value, index, api),
+      )}
+    </div>`
+  },
+
+  renderCell(entity, cell, index, api) {
+    const type = api.getType(entity.type)
+    const column = entity.columns[index]
+
+    return html`<div
+      class=${`iw-table-cell ${column.type === "number" ? "iw-table-cell-number" : ""} ${column.type === "date" ? "iw-table-cell-date" : ""} ${column.type === "boolean" ? "iw-table-cell-boolean" : ""}`}
+      style=${getColumnStyle(column)}
+    >
+      ${type.renderValue(cell, column, api)}
+    </div>`
+  },
+
+  renderValue(value) {
+    return value
+  },
+
+  renderFooter(entity, api) {
+    const type = api.getType(entity.type)
+    const pagination = getPaginationInfo(entity)
+
+    return html`<div class="iw-table-footer">
+        <div class="iw-table-footer-row">
+          <div>
+            ${pagination.start + PRETTY_PAGE} to ${pagination.end} of ${pagination.totalRows}
+            entries
+          </div>
+
+          ${type.renderPagination(entity, pagination, api)}
+
+          <div class="iw-table-footer-row">
+            <div>Page size:</div>
+            <select
+              name="pageSize"
+              @change=${(event) =>
+                api.notify(
+                  `#${entity.id}:pageSizeChange`,
+                  Number(event.target.value),
+                )}
+            >
+              <option>10</option>
+              <option>20</option>
+              <option>30</option>
+            </select>
+          </div>
+        </div>
+      </div>
+    </div>`
+  },
+
+  renderPagination(entity, pagination, api) {
+    return html`<div class="iw-table-row">
+      <button
+        ?disabled=${!pagination.hasPrevPage}
+        @click=${() => api.notify(`#${entity.id}:pageChange`, FIRST_PAGE)}
+        class="iw-table-pagination-button"
+      >
+        |&#10094;
+      </button>
+      <button
+        ?disabled=${!pagination.hasPrevPage}
+        @click=${() => api.notify(`#${entity.id}:pagePrev`)}
+        class="iw-table-pagination-button"
+      >
+        &#10094;
+      </button>
+      <input
+        name="page"
+        type="number"
+        min="1"
+        max=${pagination.totalPages}
+        value=${pagination.page + PRETTY_PAGE}
+        class=${`iw-table-page-input`}
+        @input=${(event) =>
+          api.notify(
+            `#${entity.id}:pageChange`,
+            Number(event.target.value) - PRETTY_PAGE,
+          )}
+      />
+      /
+      <span>${pagination.totalPages}</span>
+      <button
+        ?disabled="${!pagination.hasNextPage}"
+        @click=${() => api.notify(`#${entity.id}:pageNext`)}
+        class="iw-table-pagination-button"
+      >
+        &#10095;
+      </button>
+      <button
+        ?disabled=${!pagination.hasNextPage}
+        @click=${() =>
+          api.notify(
+            `#${entity.id}:pageChange`,
+            pagination.totalPages - LAST_PAGE,
+          )}
+        class="iw-table-pagination-button"
+      >
+        &#10095;|
+      </button>
+    </div>`
+  },
+}
+
+function getColumnStyle(column) {
+  if (typeof column.width === "string") {
+    if (column.width?.endsWith("%")) {
+      // eslint-disable-next-line no-magic-numbers
+      const percentage = Number(column.width.slice(0, -1))
+      return `flex: ${percentage * PERCENTAGE_TO_FLEX}`
+    }
+
+    return `width: ${column.width}`
+  }
+
+  return `width: ${column.width}px`
+}
+
+function getSortIcon(direction) {
+  switch (direction) {
+    case "asc":
+      return "▲"
+    case "desc":
+      return "▼"
+    default:
+      return "▲▼"
+  }
+}

package/src/table/theme.css

@@ -0,0 +1,83 @@
+.iw-table {
+  .iw-table-header {
+    border-bottom: 1px solid grey;
+    padding: 1em 0;
+    row-gap: 1em;
+  }
+
+  .iw-table-header-row {
+    align-items: flex-start;
+    column-gap: 1em;
+  }
+
+  .iw-table-header-column {
+    row-gap: 0.5em;
+  }
+
+  .iw-table-header-title {
+    font-weight: bold;
+    white-space: nowrap;
+  }
+
+  .iw-table-body {
+    max-height: 35em;
+    overflow: auto;
+    border-bottom: 1px solid grey;
+  }
+
+  .iw-table-row {
+    align-items: center;
+    column-gap: 1em;
+  }
+
+  .iw-table-row-even {
+    background-color: aliceblue;
+  }
+
+  .iw-table-row-selected {
+    border-left: 1px solid cornflowerblue;
+    border-right: 1px solid cornflowerblue;
+  }
+
+  :not(.iw-table-row-selected) + .iw-table-row-selected {
+    border-top: 1px solid cornflowerblue;
+    margin-top: -1px;
+  }
+
+  .iw-table-row-selected + :not(.iw-table-row-selected) {
+    border-top: 1px solid cornflowerblue;
+    margin-top: -1px;
+  }
+
+  .iw-table-cell {
+    padding: 1em;
+  }
+
+  .iw-table-cell-number,
+  .iw-table-cell-date {
+    text-align: right;
+  }
+
+  .iw-table-cell-boolean {
+    text-align: center;
+  }
+
+  .iw-table-footer {
+    padding: 1em 0;
+  }
+
+  .iw-table-footer-row {
+    justify-content: space-between;
+    align-items: center;
+    column-gap: 1em;
+  }
+
+  .iw-table-page-input {
+    min-width: 4em;
+    text-align: right;
+  }
+
+  .iw-table-pagination-button {
+    white-space: nowrap;
+  }
+}