@coreui/data-grid 0.1.0-rc.0

package/src/ui/header.ts

@@ -0,0 +1,441 @@
+/**
+ * --------------------------------------------------------------------------
+ * CoreUI PRO data-grid ui/header.ts
+ * License (https://coreui.io/pro/license/)
+ * --------------------------------------------------------------------------
+ */
+
+import { interpolate } from '../labels'
+import type {
+ DataGridColumn, DataGridItem, DataGridLabels, DataGridSlot, SortingState, Table
+} from '../types'
+import { applyPinnedCell, type GridPinning } from './pinning'
+
+const CLASS_NAME_HEADER = 'data-grid-header'
+const CLASS_NAME_HEADER_CELL = 'data-grid-header-cell'
+const CLASS_NAME_HEADER_LABEL = 'data-grid-header-label'
+const CLASS_NAME_FILTER_ROW = 'data-grid-filter-row'
+const CLASS_NAME_RESIZER = 'data-grid-resizer'
+const CLASS_NAME_RESIZER_ACTIVE = 'data-grid-resizer-active'
+const CLASS_NAME_SELECT_CELL = 'data-grid-select-cell'
+const CLASS_NAME_SORTABLE = 'data-grid-sortable'
+const CLASS_NAME_SORT_BUTTON = 'data-grid-sort-button'
+const CLASS_NAME_SORT_ICON = 'data-grid-sort-icon'
+
+export interface GridHeaderContext {
+  // With cellNavigation on, the label row joins the roving-tabindex grid: its
+  // cells carry grid roles and neither they nor their buttons are tabbable.
+  // The filter row keeps native tab semantics (an input row, not grid cells).
+  cellNavigation: boolean
+  columns: DataGridColumn[]
+  draggable: boolean
+  filterRow: boolean
+  hasMenu: (column: DataGridColumn) => boolean
+  icons: {
+    columnMenu: string
+    filter: string
+    sortAscending: string
+    sortDescending: string
+    sortNeutral: string
+  }
+  hasFilterMenu: (column: DataGridColumn) => boolean
+  isFilterable: (column: DataGridColumn) => boolean
+  isResizable: (column: DataGridColumn) => boolean
+  isSortable: (column: DataGridColumn) => boolean
+  labels: DataGridLabels
+  resizable: boolean
+  selection: boolean
+  selectAll: boolean
+  table: Table<DataGridItem>
+}
+
+export interface GridHeaderState {
+  // Columns with any active filter value - drives the filter button indicator.
+  // Null when column filters are off.
+  filteredColumns: string[] | null
+  // Visible leaf column ids in table order (pinning + columnOrder + visibility).
+  order: string[]
+  pinning: GridPinning | null
+  resizingColumn: string | false
+  sizes: Record<string, number> | null
+  sorting: SortingState
+  selectAll: {
+    checked: boolean
+    indeterminate: boolean
+  } | null
+}
+
+export interface GridHeader {
+  element: HTMLTableSectionElement
+  rowCount: number
+  update: (state: GridHeaderState) => void
+  dispose: () => void
+}
+
+type SortDirection = 'ascending' | 'descending' | 'neutral'
+
+const sortDirection = (columnSort: SortingState[number] | undefined): SortDirection => {
+  if (!columnSort) {
+    return 'neutral'
+  }
+
+  return columnSort.desc ? 'descending' : 'ascending'
+}
+
+const iconForDirection = (direction: SortDirection, icons: GridHeaderContext['icons']): string => {
+  if (direction === 'ascending') {
+    return icons.sortAscending
+  }
+
+  if (direction === 'descending') {
+    return icons.sortDescending
+  }
+
+  return icons.sortNeutral
+}
+
+const createSelectAllCell = (context: GridHeaderContext): { cell: HTMLTableCellElement; input: HTMLInputElement | null } => {
+  const cell = document.createElement('th')
+  cell.classList.add(CLASS_NAME_SELECT_CELL)
+  cell.setAttribute('scope', 'col')
+
+  if (!context.selectAll) {
+    return { cell, input: null }
+  }
+
+  const input = document.createElement('input')
+  input.type = 'checkbox'
+  input.classList.add('form-check-input')
+  input.setAttribute('aria-label', context.labels.selectAllRows)
+  input.dataset.coreuiSelectAll = ''
+  cell.append(input)
+
+  return { cell, input }
+}
+
+const createResizer = (): HTMLElement => {
+  const resizer = document.createElement('span')
+  resizer.classList.add(CLASS_NAME_RESIZER)
+  resizer.setAttribute('aria-hidden', 'true')
+  resizer.dataset.coreuiResizer = ''
+  return resizer
+}
+
+const createLabelRow = (
+  context: GridHeaderContext,
+  cells: Map<string, HTMLTableCellElement>,
+  resizers: Map<string, HTMLElement>,
+  sortIcons: Map<string, HTMLElement>
+): {
+  row: HTMLTableRowElement
+  selectAllInput: HTMLInputElement | null
+  selectCell: HTMLTableCellElement | null
+} => {
+  const row = document.createElement('tr')
+  let selectAllInput: HTMLInputElement | null = null
+  let selectCell: HTMLTableCellElement | null = null
+
+  if (context.cellNavigation) {
+    row.setAttribute('role', 'row')
+  }
+
+  if (context.selection) {
+    const { cell, input } = createSelectAllCell(context)
+    selectAllInput = input
+    selectCell = cell
+    if (context.cellNavigation) {
+      cell.setAttribute('role', 'columnheader')
+      if (input) {
+        input.tabIndex = -1
+      }
+    }
+
+    row.append(cell)
+  }
+
+  for (const column of context.columns) {
+    const cell = document.createElement('th')
+    cell.setAttribute('scope', 'col')
+    cell.dataset.coreuiColumn = column.key
+    if (context.cellNavigation) {
+      cell.setAttribute('role', 'columnheader')
+      cell.tabIndex = -1
+    }
+
+    if (column.style) {
+      Object.assign(cell.style, column.style)
+    }
+
+    if (column.width !== undefined) {
+      cell.style.width = `${column.width}px`
+    }
+
+    const content = document.createElement('div')
+    content.classList.add(CLASS_NAME_HEADER_CELL)
+
+    if (context.isSortable(column)) {
+      cell.classList.add(CLASS_NAME_SORTABLE)
+      const button = document.createElement('button')
+      button.type = 'button'
+      button.classList.add(CLASS_NAME_SORT_BUTTON)
+      button.append(column.label ?? column.key)
+      const icon = document.createElement('span')
+      icon.classList.add(CLASS_NAME_SORT_ICON)
+      icon.setAttribute('aria-hidden', 'true')
+      icon.innerHTML = context.icons.sortNeutral
+      icon.dataset.coreuiSort = 'neutral'
+      button.append(icon)
+      sortIcons.set(column.key, icon)
+      content.append(button)
+    } else {
+      const label = document.createElement('span')
+      label.classList.add(CLASS_NAME_HEADER_LABEL)
+      label.textContent = column.label ?? column.key
+      content.append(label)
+    }
+
+    if (context.hasFilterMenu(column)) {
+      const button = document.createElement('button')
+      button.type = 'button'
+      button.classList.add('btn', 'btn-ghost', 'btn-sm', 'data-grid-filter-button')
+      button.innerHTML = context.icons.filter
+      button.dataset.coreuiFilter = column.key
+      button.setAttribute('aria-haspopup', 'dialog')
+      button.setAttribute('aria-expanded', 'false')
+      const filterLabel = interpolate(context.labels.filterColumn, { column: column.label ?? column.key })
+      button.setAttribute('aria-label', filterLabel)
+      button.setAttribute('data-coreui-tooltip', filterLabel)
+      content.append(button)
+    }
+
+    if (context.hasMenu(column)) {
+      const button = document.createElement('button')
+      button.type = 'button'
+      button.classList.add('btn', 'btn-ghost', 'btn-sm', 'data-grid-menu-button')
+      button.innerHTML = context.icons.columnMenu
+      button.dataset.coreuiMenu = column.key
+      button.setAttribute('aria-haspopup', 'menu')
+      button.setAttribute('aria-expanded', 'false')
+      const menuLabel = interpolate(context.labels.columnMenu, { column: column.label ?? column.key })
+      button.setAttribute('aria-label', menuLabel)
+      button.setAttribute('data-coreui-tooltip', menuLabel)
+      content.append(button)
+    }
+
+    cell.append(content)
+
+    if (context.cellNavigation) {
+      for (const button of content.querySelectorAll('button')) {
+        button.tabIndex = -1
+      }
+    }
+
+    if (context.resizable && context.isResizable(column)) {
+      const resizer = createResizer()
+      resizers.set(column.key, resizer)
+      cell.append(resizer)
+    }
+
+    cells.set(column.key, cell)
+    row.append(cell)
+  }
+
+  return { row, selectAllInput, selectCell }
+}
+
+const createFilterRow = (
+  context: GridHeaderContext,
+  filterCells: Map<string, HTMLTableCellElement>,
+  filterSlots: DataGridSlot[]
+): { row: HTMLTableRowElement; selectCell: HTMLTableCellElement | null } => {
+  const row = document.createElement('tr')
+  row.classList.add(CLASS_NAME_FILTER_ROW)
+  if (context.cellNavigation) {
+    row.setAttribute('role', 'row')
+  }
+
+  let selectCell: HTMLTableCellElement | null = null
+
+  if (context.selection) {
+    selectCell = document.createElement('th')
+    row.append(selectCell)
+  }
+
+  for (const column of context.columns) {
+    const cell = document.createElement('th')
+    const tableColumn = context.table.getColumn(column.key)
+    if (context.isFilterable(column) && column.filter && tableColumn) {
+      const slot = column.filter({ column: tableColumn, table: context.table, labels: context.labels })
+      filterSlots.push(slot)
+      cell.append(slot.element)
+    }
+
+    filterCells.set(column.key, cell)
+    row.append(cell)
+  }
+
+  return { row, selectCell }
+}
+
+export const createHeader = (context: GridHeaderContext): GridHeader => {
+  const element = document.createElement('thead')
+  element.classList.add(CLASS_NAME_HEADER)
+
+  const cells = new Map<string, HTMLTableCellElement>()
+  const resizers = new Map<string, HTMLElement>()
+  const sortIcons = new Map<string, HTMLElement>()
+  const filterCells = new Map<string, HTMLTableCellElement>()
+  const filterSlots: DataGridSlot[] = []
+  const movableColumns = new Map(context.columns.map(column => [column.key, column.movable !== false]))
+
+  const { row, selectAllInput, selectCell } = createLabelRow(context, cells, resizers, sortIcons)
+  element.append(row)
+
+  let filterRowElement: HTMLTableRowElement | null = null
+  let filterSelectCell: HTMLTableCellElement | null = null
+  if (context.filterRow) {
+    const filterRow = createFilterRow(context, filterCells, filterSlots)
+    filterSelectCell = filterRow.selectCell
+    filterRowElement = filterRow.row
+    element.append(filterRow.row)
+  }
+
+  // Cells are created once per config column; ordering/visibility re-appends
+  // the existing nodes (appending moves them), so sort buttons, resizers and
+  // custom filter UIs keep their DOM state.
+  let orderSignature: string | null = null
+  const applyOrder = (order: string[]) => {
+    const visible = new Set(order)
+    const reorderRow = (
+      rowElement: HTMLTableRowElement,
+      cellMap: Map<string, HTMLTableCellElement>,
+      leading: HTMLTableCellElement | null
+    ) => {
+      const ordered: HTMLTableCellElement[] = leading ? [leading] : []
+      for (const id of order) {
+        const cell = cellMap.get(id)
+        if (cell) {
+          ordered.push(cell)
+        }
+      }
+
+      rowElement.append(...ordered)
+      if (context.cellNavigation) {
+        for (const [index, cell] of ordered.entries()) {
+          cell.setAttribute('aria-colindex', String(index + 1))
+        }
+      }
+
+      for (const [key, cell] of cellMap) {
+        if (!visible.has(key)) {
+          cell.remove()
+        }
+      }
+    }
+
+    reorderRow(row, cells, selectCell)
+    if (filterRowElement) {
+      reorderRow(filterRowElement, filterCells, filterSelectCell)
+    }
+  }
+
+  return {
+    element,
+    rowCount: context.filterRow ? 2 : 1,
+    update(state) {
+      const signature = state.order.join('|')
+      if (signature !== orderSignature) {
+        orderSignature = signature
+        applyOrder(state.order)
+      }
+
+      for (const [key, cell] of cells) {
+        const columnSort = state.sorting.find(sort => sort.id === key)
+        const direction = sortDirection(columnSort)
+        if (direction === 'neutral') {
+          cell.removeAttribute('aria-sort')
+        } else {
+          cell.setAttribute('aria-sort', direction)
+        }
+
+        const sortIcon = sortIcons.get(key)
+        if (sortIcon && sortIcon.dataset.coreuiSort !== direction) {
+          sortIcon.dataset.coreuiSort = direction
+          sortIcon.innerHTML = iconForDirection(direction, context.icons)
+        }
+
+        if (state.sizes && state.sizes[key] !== undefined) {
+          cell.style.width = `${state.sizes[key]}px`
+        }
+
+        if (state.pinning) {
+          applyPinnedCell(cell, state.pinning.columns[key] ?? null)
+        }
+      }
+
+      // A column is draggable only when reordering is on and its pinned region
+      // holds another movable column to swap with - reordering never crosses a
+      // pinning boundary, so a column alone in its region has no valid target.
+      if (context.draggable) {
+        const regionOf = (key: string): string => state.pinning?.columns[key]?.side ?? 'center'
+        const movablePerRegion = new Map<string, number>()
+        for (const key of state.order) {
+          if (movableColumns.get(key)) {
+            const region = regionOf(key)
+            movablePerRegion.set(region, (movablePerRegion.get(region) ?? 0) + 1)
+          }
+        }
+
+        for (const [key, cell] of cells) {
+          const draggable = Boolean(movableColumns.get(key)) && (movablePerRegion.get(regionOf(key)) ?? 0) > 1
+          cell.draggable = draggable
+          if (draggable) {
+            cell.dataset.coreuiDraggable = ''
+          } else {
+            delete cell.dataset.coreuiDraggable
+          }
+        }
+      }
+
+      for (const [key, resizer] of resizers) {
+        resizer.classList.toggle(CLASS_NAME_RESIZER_ACTIVE, state.resizingColumn === key)
+      }
+
+      if (state.filteredColumns) {
+        for (const [key, cell] of cells) {
+          cell
+            .querySelector('[data-coreui-filter]')
+            ?.classList.toggle('data-grid-filter-button-filtered', state.filteredColumns.includes(key))
+        }
+      }
+
+      if (state.pinning) {
+        for (const [key, cell] of filterCells) {
+          applyPinnedCell(cell, state.pinning.columns[key] ?? null)
+        }
+
+        if (selectCell) {
+          applyPinnedCell(selectCell, state.pinning.select)
+        }
+
+        if (filterSelectCell) {
+          applyPinnedCell(filterSelectCell, state.pinning.select)
+        }
+      }
+
+      if (selectAllInput && state.selectAll) {
+        selectAllInput.checked = state.selectAll.checked
+        selectAllInput.indeterminate = state.selectAll.indeterminate
+      }
+
+      for (const slot of filterSlots) {
+        slot.update?.()
+      }
+    },
+    dispose() {
+      for (const slot of filterSlots) {
+        slot.dispose?.()
+      }
+    }
+  }
+}

package/src/ui/loading.ts

@@ -0,0 +1,39 @@
+/**
+ * --------------------------------------------------------------------------
+ * CoreUI PRO data-grid ui/loading.ts
+ * License (https://coreui.io/pro/license/)
+ * --------------------------------------------------------------------------
+ */
+
+import type { DataGridLabels } from '../types'
+
+const CLASS_NAME_LOADING = 'data-grid-loading'
+
+export interface GridLoading {
+  element: HTMLDivElement
+  setVisible: (visible: boolean) => void
+}
+
+export const createLoading = (labels: DataGridLabels): GridLoading => {
+  const element = document.createElement('div')
+  element.classList.add(CLASS_NAME_LOADING)
+  element.hidden = true
+
+  const spinner = document.createElement('div')
+  spinner.classList.add('spinner-border')
+  spinner.setAttribute('role', 'status')
+
+  const label = document.createElement('span')
+  label.classList.add('visually-hidden')
+  label.textContent = labels.loading
+  spinner.append(label)
+
+  element.append(spinner)
+
+  return {
+    element,
+    setVisible(visible) {
+      element.hidden = !visible
+    }
+  }
+}

package/src/ui/menu.ts

@@ -0,0 +1,218 @@
+/**
+ * --------------------------------------------------------------------------
+ * CoreUI PRO data-grid ui/menu.ts
+ * License (https://coreui.io/pro/license/)
+ * --------------------------------------------------------------------------
+ */
+
+import type { DataGridMenuAction } from '../types'
+
+const CLASS_NAME_MENU = 'data-grid-menu'
+const CLASS_NAME_MENU_ITEM = 'data-grid-menu-item'
+const CLASS_NAME_MENU_ITEM_ICON = 'data-grid-menu-item-icon'
+const CLASS_NAME_MENU_DIVIDER = 'data-grid-menu-divider'
+
+export interface GridMenuContext {
+  root: HTMLElement
+  getActions: (columnKey: string) => DataGridMenuAction[]
+}
+
+export interface GridMenu {
+  toggle: (button: HTMLElement, columnKey: string) => void
+  close: () => void
+  dispose: () => void
+}
+
+let menuCount = 0
+
+export const createMenu = (context: GridMenuContext): GridMenu => {
+  const element = document.createElement('div')
+  element.classList.add(CLASS_NAME_MENU)
+  element.setAttribute('role', 'menu')
+  element.id = `data-grid-menu-${++menuCount}`
+
+  let trigger: HTMLElement | null = null
+
+  const items = (): HTMLButtonElement[] =>
+    [...element.querySelectorAll<HTMLButtonElement>(`.${CLASS_NAME_MENU_ITEM}`)]
+
+  const close = (refocus = false) => {
+    if (!trigger) {
+      return
+    }
+
+    trigger.setAttribute('aria-expanded', 'false')
+    trigger.removeAttribute('aria-controls')
+    if (refocus) {
+      trigger.focus()
+    }
+
+    trigger = null
+    element.remove()
+    document.removeEventListener('pointerdown', onOutsidePointerDown, true)
+    window.removeEventListener('scroll', onWindowChange, true)
+    window.removeEventListener('resize', onWindowChange)
+  }
+
+  const onOutsidePointerDown = (event: Event) => {
+    const target = event.target as Node
+    if (!element.contains(target) && !trigger?.contains(target)) {
+      close()
+    }
+  }
+
+  // Any scroll (viewport or page) or resize invalidates the anchored position;
+  // closing matches the native-select/AG Grid behavior.
+  const onWindowChange = (event?: Event) => {
+    if (event?.target instanceof Node && element.contains(event.target)) {
+      return
+    }
+
+    close()
+  }
+
+  const onMenuKeydown = (event: KeyboardEvent) => {
+    const enabled = items()
+    const activeIndex = enabled.indexOf(document.activeElement as HTMLButtonElement)
+
+    switch (event.key) {
+      case 'Escape': {
+        event.stopPropagation()
+        close(true)
+        break
+      }
+
+      case 'Tab': {
+        close()
+        break
+      }
+
+      case 'ArrowDown': {
+        event.preventDefault()
+        enabled[(activeIndex + 1) % enabled.length]?.focus()
+        break
+      }
+
+      case 'ArrowUp': {
+        event.preventDefault()
+        enabled[(activeIndex - 1 + enabled.length) % enabled.length]?.focus()
+        break
+      }
+
+      case 'Home': {
+        event.preventDefault()
+        enabled[0]?.focus()
+        break
+      }
+
+      case 'End': {
+        event.preventDefault()
+        enabled[enabled.length - 1]?.focus()
+        break
+      }
+
+      default:
+    }
+  }
+
+  element.addEventListener('keydown', onMenuKeydown)
+
+  const open = (button: HTMLElement, columnKey: string) => {
+    const actions = context.getActions(columnKey)
+    if (actions.length === 0) {
+      return
+    }
+
+    const nodes: Node[] = []
+    for (const [index, action] of actions.entries()) {
+      if (index > 0 && action.group !== actions[index - 1].group) {
+        const divider = document.createElement('div')
+        divider.classList.add(CLASS_NAME_MENU_DIVIDER)
+        divider.setAttribute('role', 'separator')
+        nodes.push(divider)
+      }
+
+      const item = document.createElement('button')
+      item.type = 'button'
+      item.classList.add(CLASS_NAME_MENU_ITEM)
+      item.setAttribute('role', 'menuitem')
+      if (action.icon) {
+        const icon = document.createElement('span')
+        icon.classList.add(CLASS_NAME_MENU_ITEM_ICON)
+        icon.setAttribute('aria-hidden', 'true')
+        icon.innerHTML = action.icon
+        item.append(icon)
+      }
+
+      item.append(action.label)
+      if (action.disabled) {
+        item.setAttribute('aria-disabled', 'true')
+      }
+
+      item.addEventListener('click', () => {
+        if (action.disabled) {
+          return
+        }
+
+        const previousTrigger = trigger
+        close()
+        action.run()
+        // The action may remove the trigger's header cell (hide column); the
+        // check has to run after the scheduled re-render.
+        requestAnimationFrame(() => {
+          // An action may have moved focus deliberately (the filter dialog);
+          // only restore it when it fell out of the grid.
+          const active = document.activeElement
+          if (active && active !== document.body && context.root.contains(active)) {
+            return
+          }
+
+          if (previousTrigger?.isConnected) {
+            previousTrigger.focus()
+          } else {
+            context.root.querySelector<HTMLElement>('[data-coreui-menu]')?.focus()
+          }
+        })
+      })
+      nodes.push(item)
+    }
+
+    element.replaceChildren(...nodes)
+
+    trigger = button
+    button.setAttribute('aria-expanded', 'true')
+    button.setAttribute('aria-controls', element.id)
+    context.root.append(element)
+
+    const rootRect = context.root.getBoundingClientRect()
+    const buttonRect = button.getBoundingClientRect()
+    element.style.top = `${buttonRect.bottom - rootRect.top}px`
+    // Right-align the menu to the trigger so it opens leftward — the menu button
+    // sits at the cell's right edge, where a left-aligned menu would overflow.
+    element.style.left = `${Math.max(buttonRect.right - rootRect.left - element.offsetWidth, 0)}px`
+
+    document.addEventListener('pointerdown', onOutsidePointerDown, true)
+    window.addEventListener('scroll', onWindowChange, true)
+    window.addEventListener('resize', onWindowChange)
+    items()[0]?.focus()
+  }
+
+  return {
+    toggle(button, columnKey) {
+      if (trigger === button) {
+        close(true)
+        return
+      }
+
+      close()
+      open(button, columnKey)
+    },
+    close() {
+      close()
+    },
+    dispose() {
+      close()
+      element.removeEventListener('keydown', onMenuKeydown)
+    }
+  }
+}