@coreui/data-grid 0.1.0-rc.0

package/src/ui/column-chooser.ts

@@ -0,0 +1,183 @@
+/**
+ * --------------------------------------------------------------------------
+ * CoreUI PRO data-grid ui/column-chooser.ts
+ * License (https://coreui.io/pro/license/)
+ * --------------------------------------------------------------------------
+ */
+
+import type { DataGridLabels } from '../types'
+
+const CLASS_NAME_COLUMN_CHOOSER = 'data-grid-column-chooser'
+const CLASS_NAME_OPTION = 'data-grid-column-chooser-option'
+const CLASS_NAME_FOOTER = 'data-grid-column-chooser-footer'
+
+export interface ColumnChooserColumn {
+  id: string
+  label: string
+  canHide: boolean
+  visible: boolean
+}
+
+export interface GridColumnChooserContext {
+  root: HTMLElement
+  labels: DataGridLabels
+  getColumns: () => ColumnChooserColumn[]
+  toggleVisibility: (columnId: string, visible: boolean) => void
+  showAll: () => void
+  reset: () => void
+}
+
+export interface GridColumnChooser {
+  toggle: (button: HTMLElement) => void
+  close: () => void
+  dispose: () => void
+}
+
+let columnChooserCount = 0
+
+export const createColumnChooser = (context: GridColumnChooserContext): GridColumnChooser => {
+  const element = document.createElement('div')
+  element.classList.add(CLASS_NAME_COLUMN_CHOOSER)
+  element.setAttribute('role', 'dialog')
+  element.setAttribute('aria-label', context.labels.toolbarColumns)
+  element.id = `data-grid-column-chooser-${++columnChooserCount}`
+
+  let trigger: HTMLElement | null = null
+
+  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()
+    }
+  }
+
+  const onWindowChange = (event?: Event) => {
+    if (event?.target instanceof Node && element.contains(event.target)) {
+      return
+    }
+
+    close()
+  }
+
+  const onKeydown = (event: KeyboardEvent) => {
+    if (event.key === 'Escape') {
+      event.stopPropagation()
+      close(true)
+    }
+  }
+
+  element.addEventListener('keydown', onKeydown)
+
+  const buildContent = () => {
+    const list = document.createElement('div')
+
+    for (const column of context.getColumns()) {
+      const label = document.createElement('label')
+      label.classList.add('form-check', CLASS_NAME_OPTION)
+      const input = document.createElement('input')
+      input.type = 'checkbox'
+      input.classList.add('form-check-input')
+      input.checked = column.visible
+      input.dataset.coreuiColumnChooserOption = column.id
+      if (!column.canHide) {
+        input.disabled = true
+        input.setAttribute('aria-disabled', 'true')
+      }
+
+      input.addEventListener('change', () => {
+        context.toggleVisibility(column.id, input.checked)
+      })
+      const text = document.createElement('span')
+      text.classList.add('form-check-label')
+      text.textContent = column.label
+      label.append(input, text)
+      list.append(label)
+    }
+
+    const footer = document.createElement('div')
+    footer.classList.add(CLASS_NAME_FOOTER)
+
+    const showAll = document.createElement('button')
+    showAll.type = 'button'
+    showAll.classList.add('btn', 'btn-link', 'btn-sm')
+    showAll.textContent = context.labels.showAllColumns
+    showAll.dataset.coreuiColumnChooserShowAll = ''
+    showAll.addEventListener('click', () => {
+      context.showAll()
+      element.replaceChildren(buildContent())
+    })
+
+    const reset = document.createElement('button')
+    reset.type = 'button'
+    reset.classList.add('btn', 'btn-link', 'btn-sm')
+    reset.textContent = context.labels.resetColumns
+    reset.dataset.coreuiColumnChooserReset = ''
+    reset.addEventListener('click', () => {
+      context.reset()
+      element.replaceChildren(buildContent())
+    })
+
+    footer.append(showAll, reset)
+
+    const content = document.createDocumentFragment()
+    content.append(list, footer)
+    return content
+  }
+
+  const open = (button: HTMLElement) => {
+    close()
+    element.replaceChildren(buildContent())
+
+    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`
+    element.style.left = `${Math.max(buttonRect.left - rootRect.left, 0)}px`
+
+    document.addEventListener('pointerdown', onOutsidePointerDown, true)
+    window.addEventListener('scroll', onWindowChange, true)
+    window.addEventListener('resize', onWindowChange)
+    element.querySelector<HTMLElement>('input:not(:disabled)')?.focus()
+  }
+
+  return {
+    toggle(button) {
+      if (trigger === button) {
+        close(true)
+        return
+      }
+
+      close()
+      open(button)
+    },
+    close() {
+      close()
+    },
+    dispose() {
+      close()
+      element.removeEventListener('keydown', onKeydown)
+    }
+  }
+}

package/src/ui/editor.ts

@@ -0,0 +1,98 @@
+/**
+ * --------------------------------------------------------------------------
+ * CoreUI PRO data-grid ui/editor.ts
+ * License (https://coreui.io/pro/license/)
+ * --------------------------------------------------------------------------
+ */
+
+import type {
+  DataGridEditableOptions, DataGridEditor, DataGridEditorContext
+} from '../types'
+
+const CLASS_NAME_EDITOR = 'data-grid-cell-editor'
+
+const createTextEditor = (context: DataGridEditorContext): DataGridEditor => {
+  const input = document.createElement('input')
+  input.type = 'text'
+  input.classList.add('form-control', 'form-control-sm', CLASS_NAME_EDITOR)
+  input.value = String(context.value ?? '')
+
+  return {
+    element: input,
+    focus() {
+      input.focus()
+      input.select()
+    },
+    getValue: () => input.value
+  }
+}
+
+const createNumberEditor = (context: DataGridEditorContext, options: DataGridEditableOptions): DataGridEditor => {
+  const input = document.createElement('input')
+  input.type = 'number'
+  input.classList.add('form-control', 'form-control-sm', CLASS_NAME_EDITOR)
+  if (options.min !== undefined) {
+    input.min = String(options.min)
+  }
+
+  if (options.max !== undefined) {
+    input.max = String(options.max)
+  }
+
+  if (options.step !== undefined) {
+    input.step = String(options.step)
+  }
+
+  input.value = context.value === undefined || context.value === null ? '' : String(context.value)
+
+  return {
+    element: input,
+    focus() {
+      input.focus()
+      input.select()
+    },
+    getValue: () => (input.value === '' ? undefined : Number(input.value))
+  }
+}
+
+const createSelectEditor = (context: DataGridEditorContext, options: DataGridEditableOptions): DataGridEditor => {
+  const select = document.createElement('select')
+  select.classList.add('form-select', 'form-select-sm', CLASS_NAME_EDITOR)
+
+  // Option values can be arbitrary (not just strings) - keep the originals
+  // and resolve the committed value by index.
+  const values: unknown[] = []
+  for (const option of options.options ?? []) {
+    const optionElement = document.createElement('option')
+    const value = typeof option === 'object' && option !== null ? option.value : option
+    optionElement.textContent = typeof option === 'object' && option !== null ? option.label : String(option)
+    optionElement.value = String(values.length)
+    if (value === context.value) {
+      optionElement.selected = true
+    }
+
+    values.push(value)
+    select.append(optionElement)
+  }
+
+  return {
+    element: select,
+    focus: () => select.focus(),
+    getValue: () => values[Number(select.value)]
+  }
+}
+
+export const createBuiltInEditor = (
+  options: DataGridEditableOptions,
+  context: DataGridEditorContext
+): DataGridEditor => {
+  if (options.type === 'number') {
+    return createNumberEditor(context, options)
+  }
+
+  if (options.type === 'select') {
+    return createSelectEditor(context, options)
+  }
+
+  return createTextEditor(context)
+}

package/src/ui/filter-menu.ts

@@ -0,0 +1,398 @@
+/**
+ * --------------------------------------------------------------------------
+ * CoreUI PRO data-grid ui/filter-menu.ts
+ * License (https://coreui.io/pro/license/)
+ * --------------------------------------------------------------------------
+ */
+
+import { FILTER_OPERATORS, VALUELESS_OPERATORS } from '../filters'
+import { interpolate } from '../labels'
+import type {
+  DataGridColumn,
+  DataGridColumnFilterValue,
+  DataGridFilterCondition,
+  DataGridFilterOperator,
+  DataGridFilterType,
+  DataGridLabels
+} from '../types'
+
+const CLASS_NAME_FILTER_MENU = 'data-grid-filter-menu'
+const CLASS_NAME_CONDITION = 'data-grid-filter-menu-condition'
+const CLASS_NAME_JOIN = 'data-grid-filter-menu-join'
+const CLASS_NAME_FOOTER = 'data-grid-filter-menu-footer'
+const CLASS_NAME_VALUES = 'data-grid-filter-menu-values'
+
+const SEARCH_THRESHOLD = 10
+const MAX_CONDITIONS = 2
+
+const OPERATOR_LABEL_KEYS: Record<DataGridFilterOperator, keyof DataGridLabels> = {
+  contains: 'operatorContains',
+  notContains: 'operatorNotContains',
+  equals: 'operatorEquals',
+  notEquals: 'operatorNotEquals',
+  startsWith: 'operatorStartsWith',
+  endsWith: 'operatorEndsWith',
+  blank: 'operatorBlank',
+  notBlank: 'operatorNotBlank',
+  greaterThan: 'operatorGreaterThan',
+  greaterThanOrEqual: 'operatorGreaterThanOrEqual',
+  lessThan: 'operatorLessThan',
+  lessThanOrEqual: 'operatorLessThanOrEqual',
+  between: 'operatorBetween'
+}
+
+export interface GridFilterMenuContext {
+  root: HTMLElement
+  labels: DataGridLabels
+  getColumn: (columnKey: string) => DataGridColumn | null
+  getFacetedValues: (columnKey: string) => unknown[]
+  getFilterValue: (columnKey: string) => DataGridColumnFilterValue | undefined
+  applyFilter: (columnKey: string, value?: DataGridColumnFilterValue) => void
+}
+
+export interface GridFilterMenu {
+  toggle: (button: HTMLElement, columnKey: string) => void
+  close: () => void
+  dispose: () => void
+}
+
+let filterMenuCount = 0
+
+const inputTypeFor = (filterType: DataGridFilterType): string =>
+  (filterType === 'number' ? 'number' : (filterType === 'date' ? 'date' : 'text'))
+
+export const createFilterMenu = (context: GridFilterMenuContext): GridFilterMenu => {
+  const element = document.createElement('div')
+  element.classList.add(CLASS_NAME_FILTER_MENU)
+  element.setAttribute('role', 'dialog')
+  element.id = `data-grid-filter-menu-${++filterMenuCount}`
+
+  let trigger: HTMLElement | null = null
+
+  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()
+    }
+  }
+
+  const onWindowChange = (event?: Event) => {
+    if (event?.target instanceof Node && element.contains(event.target)) {
+      return
+    }
+
+    close()
+  }
+
+  const onKeydown = (event: KeyboardEvent) => {
+    if (event.key === 'Escape') {
+      event.stopPropagation()
+      close(true)
+    }
+  }
+
+  element.addEventListener('keydown', onKeydown)
+
+  const buildConditionRow = (
+    filterType: Exclude<DataGridFilterType, 'select'>,
+    condition: DataGridFilterCondition | null
+  ): HTMLElement => {
+    const row = document.createElement('div')
+    row.classList.add(CLASS_NAME_CONDITION)
+
+    const select = document.createElement('select')
+    select.classList.add('form-select', 'form-select-sm')
+    select.setAttribute('aria-label', context.labels.filterAction)
+    for (const operator of FILTER_OPERATORS[filterType]) {
+      const option = document.createElement('option')
+      option.value = operator
+      option.textContent = context.labels[OPERATOR_LABEL_KEYS[operator]]
+      select.append(option)
+    }
+
+    select.value = condition?.operator ?? FILTER_OPERATORS[filterType][0]
+
+    const value = document.createElement('input')
+    value.type = inputTypeFor(filterType)
+    value.classList.add('form-control', 'form-control-sm')
+    value.dataset.coreuiFilterValue = ''
+    value.value = condition?.value === undefined ? '' : String(condition.value)
+
+    const value2 = document.createElement('input')
+    value2.type = inputTypeFor(filterType)
+    value2.classList.add('form-control', 'form-control-sm')
+    value2.dataset.coreuiFilterValue2 = ''
+    value2.value = condition?.value2 === undefined ? '' : String(condition.value2)
+
+    const syncVisibility = () => {
+      const operator = select.value as DataGridFilterOperator
+      value.hidden = VALUELESS_OPERATORS.has(operator)
+      value2.hidden = operator !== 'between'
+    }
+
+    select.addEventListener('change', syncVisibility)
+    row.append(select, value, value2)
+    syncVisibility()
+    return row
+  }
+
+  const readCondition = (row: HTMLElement): DataGridFilterCondition | null => {
+    const operator = row.querySelector('select')!.value as DataGridFilterOperator
+    const { value } = (row.querySelector<HTMLInputElement>('[data-coreui-filter-value]')!)
+    const value2 = row.querySelector<HTMLInputElement>('[data-coreui-filter-value2]')!.value
+
+    if (VALUELESS_OPERATORS.has(operator)) {
+      return { operator }
+    }
+
+    if (value.trim() === '') {
+      return null
+    }
+
+    return {
+      operator,
+      value,
+      ...(operator === 'between' && value2.trim() !== '' && { value2 })
+    }
+  }
+
+  const buildFooter = (onApply: () => void, columnKey: string): HTMLElement => {
+    const footer = document.createElement('div')
+    footer.classList.add(CLASS_NAME_FOOTER)
+
+    const apply = document.createElement('button')
+    apply.type = 'button'
+    apply.classList.add('btn', 'btn-primary', 'btn-sm')
+    apply.textContent = context.labels.applyFilter
+    apply.addEventListener('click', onApply)
+
+    const clear = document.createElement('button')
+    clear.type = 'button'
+    clear.classList.add('btn', 'btn-outline-secondary', 'btn-sm')
+    clear.textContent = context.labels.clearFilter
+    clear.addEventListener('click', () => {
+      context.applyFilter(columnKey)
+      close(true)
+    })
+
+    footer.append(apply, clear)
+    return footer
+  }
+
+  const buildConditionsContent = (columnKey: string, filterType: Exclude<DataGridFilterType, 'select'>) => {
+    const current = context.getFilterValue(columnKey)
+    const conditions =
+      current && typeof current !== 'string' && 'conditions' in current ? current.conditions : []
+    const join = current && typeof current !== 'string' && 'conditions' in current ? current.join : 'and'
+
+    const rows: HTMLElement[] = [buildConditionRow(filterType, conditions[0] ?? null)]
+    const body = document.createElement('div')
+    body.append(rows[0])
+
+    const joinRow = document.createElement('div')
+    joinRow.classList.add(CLASS_NAME_JOIN)
+    const joinName = `${element.id}-join`
+    for (const option of ['and', 'or'] as const) {
+      const label = document.createElement('label')
+      const radio = document.createElement('input')
+      radio.type = 'radio'
+      radio.classList.add('form-check-input')
+      radio.name = joinName
+      radio.value = option
+      radio.checked = join === option
+      label.append(radio, ` ${option === 'and' ? context.labels.joinAnd : context.labels.joinOr}`)
+      joinRow.append(label)
+    }
+
+    const addButton = document.createElement('button')
+    addButton.type = 'button'
+    addButton.classList.add('btn', 'btn-link', 'btn-sm')
+    addButton.textContent = context.labels.addCondition
+
+    const showSecond = () => {
+      if (rows.length >= MAX_CONDITIONS) {
+        return
+      }
+
+      rows.push(buildConditionRow(filterType, conditions[1] ?? null))
+      addButton.before(joinRow, rows[1])
+      addButton.hidden = true
+    }
+
+    addButton.addEventListener('click', showSecond)
+    body.append(addButton)
+    if (conditions.length > 1) {
+      showSecond()
+    }
+
+    const onApply = () => {
+      const collected = rows
+        .map(row => readCondition(row))
+        .filter((condition): condition is DataGridFilterCondition => condition !== null)
+      const joinValue =
+        (joinRow.querySelector<HTMLInputElement>('input:checked')?.value as 'and' | 'or') ?? 'and'
+      context.applyFilter(
+        columnKey,
+        collected.length === 0 ? undefined : { conditions: collected, join: joinValue }
+      )
+      close(true)
+    }
+
+    body.append(buildFooter(onApply, columnKey))
+    return body
+  }
+
+  const buildSelectContent = (columnKey: string) => {
+    const values = context.getFacetedValues(columnKey)
+    const current = context.getFilterValue(columnKey)
+    const selected =
+      current && typeof current !== 'string' && 'operator' in current ?
+        new Set(current.value.map(String)) :
+        null
+
+    const body = document.createElement('div')
+    const list = document.createElement('div')
+    list.classList.add(CLASS_NAME_VALUES)
+
+    const checkboxes: HTMLInputElement[] = []
+    const rowFor = (labelText: string, checked: boolean): HTMLInputElement => {
+      const label = document.createElement('label')
+      label.classList.add('form-check')
+      const input = document.createElement('input')
+      input.type = 'checkbox'
+      input.classList.add('form-check-input')
+      input.checked = checked
+      const text = document.createElement('span')
+      text.classList.add('form-check-label')
+      text.textContent = labelText
+      label.append(input, text)
+      list.append(label)
+      return input
+    }
+
+    const selectAll = rowFor(context.labels.selectAllValues, selected === null)
+    selectAll.dataset.coreuiSelectAllValues = ''
+
+    for (const value of values) {
+      const input = rowFor(String(value), selected === null || selected.has(String(value)))
+      input.dataset.coreuiFilterOption = String(value)
+      checkboxes.push(input)
+    }
+
+    const syncSelectAll = () => {
+      selectAll.checked = checkboxes.every(input => input.checked)
+    }
+
+    selectAll.addEventListener('change', () => {
+      for (const input of checkboxes) {
+        input.checked = selectAll.checked
+      }
+    })
+    list.addEventListener('change', event => {
+      if (event.target !== selectAll) {
+        syncSelectAll()
+      }
+    })
+    syncSelectAll()
+
+    if (values.length > SEARCH_THRESHOLD) {
+      const search = document.createElement('input')
+      search.type = 'text'
+      search.classList.add('form-control', 'form-control-sm')
+      search.setAttribute('aria-label', context.labels.searchValues)
+      search.placeholder = context.labels.searchValues
+      search.addEventListener('input', () => {
+        const needle = search.value.toLowerCase()
+        for (const input of checkboxes) {
+          input.closest('label')!.hidden = !input.dataset.coreuiFilterOption!.toLowerCase().includes(needle)
+        }
+      })
+      body.append(search)
+    }
+
+    body.append(list)
+
+    const onApply = () => {
+      const checked = checkboxes.filter(input => input.checked)
+      context.applyFilter(
+        columnKey,
+        checked.length === checkboxes.length ?
+          undefined :
+          { operator: 'in', value: checked.map(input => input.dataset.coreuiFilterOption!) }
+      )
+      close(true)
+    }
+
+    body.append(buildFooter(onApply, columnKey))
+    return body
+  }
+
+  const open = (button: HTMLElement, columnKey: string) => {
+    close()
+    const column = context.getColumn(columnKey)
+    if (!column) {
+      return
+    }
+
+    element.setAttribute(
+      'aria-label',
+      interpolate(context.labels.filterColumn, { column: column.label ?? column.key })
+    )
+    const filterType = column.filterType ?? 'text'
+    element.replaceChildren(
+      filterType === 'select' ? buildSelectContent(columnKey) : buildConditionsContent(columnKey, filterType)
+    )
+
+    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`
+    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)
+    element.querySelector<HTMLElement>('select, input')?.focus()
+  }
+
+  return {
+    toggle(button, columnKey) {
+      if (trigger === button) {
+        close(true)
+        return
+      }
+
+      close()
+      open(button, columnKey)
+    },
+    close() {
+      close()
+    },
+    dispose() {
+      close()
+      element.removeEventListener('keydown', onKeydown)
+    }
+  }
+}