@tipolox/litgrid-web 1.0.3 → 1.2.0

package/src/index.ts

@@ -0,0 +1,20 @@
+export * from './components/DataGrid.js'
+export type { GridQuery, GridQueryFilter, GridQueryReason, GridQueryChangeDetail, GridQuerySnapshot, GridExternalTotal, GridExternalState, SortDirection } from './types.js'
+export type {
+  BestFitColumnWidth,
+  ColumnReorderDetail,
+  ColumnStateChangeDetail,
+  ColumnVisibilityChangeDetail,
+  DataGridElement,
+  GridFilter,
+  GridPaginationState,
+  GridSelection,
+  GridRowKey,
+  SelectedRowSnapshot,
+  SelectionChangeDetail,
+  SelectionIntent,
+  GridColumn,
+  GridTheme,
+  GridColumnState,
+  GridConfig
+} from './types.js'

package/src/sizing/columnSizing.ts

@@ -0,0 +1,25 @@
+import type { GridColumn } from '../types.js'
+import { DEFAULT_COLUMN_WIDTH, MIN_COLUMN_WIDTH } from './constants.js'
+
+export function normalizeColumnWidth(width: number) {
+  return Math.max(MIN_COLUMN_WIDTH, width)
+}
+
+export function resolveColumnWidth(
+  column: GridColumn,
+  resizedWidth: number | undefined
+) {
+  if (resizedWidth) {
+    return resizedWidth
+  }
+
+  if (typeof column.width === 'number') {
+    return column.width
+  }
+
+  if (typeof column.width === 'string' && /^\d+px$/.test(column.width)) {
+    return Number.parseInt(column.width, 10)
+  }
+
+  return DEFAULT_COLUMN_WIDTH
+}

package/src/sizing/constants.ts

@@ -0,0 +1,3 @@
+export const DEFAULT_COLUMN_WIDTH = 160
+export const MIN_COLUMN_WIDTH = 64
+export const MIN_ROW_HEIGHT = 28

package/src/sizing/rowSizing.ts

@@ -0,0 +1,5 @@
+import { MIN_ROW_HEIGHT } from './constants.js'
+
+export function normalizeRowHeight(height: number) {
+  return Math.max(MIN_ROW_HEIGHT, height)
+}

package/src/theme/darkTheme.ts

@@ -0,0 +1,34 @@
+import { css } from 'lit'
+
+/**
+ * Dark semantic color tokens for the Community Edition grid.
+ * Consumers can override these custom properties on `yc-grid`.
+ */
+export const darkThemeStyles = css`
+  :host([theme='dark']) {
+    --litgrid-color-text: #e2e8f0;
+    --litgrid-color-text-strong: #f8fafc;
+    --litgrid-color-text-muted: #cbd5e1;
+    --litgrid-color-text-subtle: #94a3b8;
+    --litgrid-color-text-header: #e2e8f0;
+    --litgrid-color-surface: #0f172a;
+    --litgrid-color-surface-subtle: #1e293b;
+    --litgrid-color-surface-hover: #334155;
+    --litgrid-color-row-start: rgba(30, 41, 59, 0.9);
+    --litgrid-color-row-end: rgba(15, 23, 42, 0.95);
+    --litgrid-color-border: #475569;
+    --litgrid-color-border-strong: #64748b;
+    --litgrid-color-border-subtle: #334155;
+    --litgrid-color-cell-border: #1e293b;
+    --litgrid-color-row-border: #334155;
+    --litgrid-color-accent: #60a5fa;
+    --litgrid-color-accent-soft: #1e3a5f;
+    --litgrid-color-accent-selected: #1d4ed8;
+    --litgrid-color-accent-text: #dbeafe;
+    --litgrid-color-resize-indicator: #94a3b8;
+    --litgrid-color-control-hover: rgba(148, 163, 184, 0.2);
+    --litgrid-shadow-shell: 0 12px 32px rgba(0, 0, 0, 0.35);
+    --litgrid-shadow-menu: 0 12px 24px rgba(0, 0, 0, 0.45);
+    --litgrid-shadow-dialog: 0 8px 20px rgba(0, 0, 0, 0.5);
+  }
+`

package/src/theme/lightTheme.ts

@@ -0,0 +1,35 @@
+import { css } from 'lit'
+
+/**
+ * Default semantic color tokens for the Community Edition grid.
+ * Consumers can override these custom properties on `yc-grid`.
+ */
+export const lightThemeStyles = css`
+  :host,
+  :host([theme='light']) {
+    --litgrid-color-text: #111827;
+    --litgrid-color-text-strong: #0f172a;
+    --litgrid-color-text-muted: #475569;
+    --litgrid-color-text-subtle: #64748b;
+    --litgrid-color-text-header: #334155;
+    --litgrid-color-surface: #ffffff;
+    --litgrid-color-surface-subtle: #f8fafc;
+    --litgrid-color-surface-hover: #f1f5f9;
+    --litgrid-color-row-start: rgba(249, 250, 251, 0.9);
+    --litgrid-color-row-end: rgba(255, 255, 255, 0.95);
+    --litgrid-color-border: #cbd5e1;
+    --litgrid-color-border-strong: #d1d5db;
+    --litgrid-color-border-subtle: #e2e8f0;
+    --litgrid-color-cell-border: #eef2f7;
+    --litgrid-color-row-border: #e5e7eb;
+    --litgrid-color-accent: #2563eb;
+    --litgrid-color-accent-soft: #dbeafe;
+    --litgrid-color-accent-selected: #bfdbfe;
+    --litgrid-color-accent-text: #1e3a8a;
+    --litgrid-color-resize-indicator: #94a3b8;
+    --litgrid-color-control-hover: rgba(148, 163, 184, 0.15);
+    --litgrid-shadow-shell: 0 12px 32px rgba(15, 23, 42, 0.08);
+    --litgrid-shadow-menu: 0 12px 24px rgba(15, 23, 42, 0.12);
+    --litgrid-shadow-dialog: 0 8px 20px rgba(15, 23, 42, 0.15);
+  }
+`

package/src/types.ts

@@ -0,0 +1,138 @@
+import type {
+  GridConfig,
+  GridFilter,
+  GridPaginationState,
+  GridSelection,
+  GridRowKey,
+  SelectionChangeDetail,
+  GridExternalState,
+  GridQuerySnapshot,
+  GridQueryChangeDetail,
+  SortDirection,
+  SelectionIntent
+} from '@tipolox/litgrid-core'
+import type { ColumnStateChangeDetail, GridColumnState } from './columnState/columnState.js'
+
+export type { ColumnStateChangeDetail, GridColumnState }
+export type { GridQuery, GridQueryFilter, GridQueryReason, GridQueryChangeDetail, GridQuerySnapshot, GridExternalTotal, GridExternalState, SortDirection } from '@tipolox/litgrid-core'
+
+export type {
+  GridRowKey,
+  SelectedRowSnapshot,
+  SelectionChangeDetail,
+  GridConfig,
+  GridFilter,
+  GridPaginationState,
+  GridSelection,
+  SelectionIntent
+} from '@tipolox/litgrid-core'
+
+export type GridTheme = 'light' | 'dark'
+
+export type GridColumn = {
+  key: string
+  header?: string
+  width?: number | string
+  hidden?: boolean
+  /** Show local sorting actions in the header menu. Defaults to true; does not change query state or imperative APIs. */
+  sortable?: boolean
+  /** Show local column filtering controls. Defaults to true; does not affect quick search or imperative APIs. */
+  filterable?: boolean
+  accessor?: (row: unknown, rowIndex: number) => unknown
+  render?: (value: unknown, row: unknown, rowIndex: number) => unknown
+}
+
+export type BestFitColumnWidth = {
+  key: string
+  width: number | null
+}
+
+export type ColumnReorderDetail = {
+  columnKey: string
+  previousIndex: number
+  currentIndex: number
+  columnOrder: string[]
+}
+
+export type ColumnVisibilityChangeDetail = {
+  columnKey: string
+  visible: boolean
+  visibleColumnKeys: string[]
+}
+
+export type DataGridElement = HTMLElement & {
+  /** Additive external-query capabilities; production DataGrid implements them. */
+  externalState?: GridExternalState | null
+  setExternalState?: (state: GridExternalState) => boolean
+  getQuery?: () => GridQuerySnapshot
+  refreshQuery?: () => void
+  sortBy?: (columnKey: string, direction: SortDirection) => void
+  clearSort?: () => void
+  data: unknown[]
+  columns: GridColumn[]
+  config: GridConfig
+  theme: GridTheme
+  ariaLabel: string
+  ariaDescription: string
+  screenReaderAnnouncements: boolean
+  viewportHeight: number
+  virtualRowHeight: number
+  overscanCount: number
+  columnOverscanCount: number
+  bestFitSampleSize: number
+  quickSearchDebounceThreshold: number
+  quickSearchDebounceMs: number
+  columnStateStorageKey: string | null
+  /** Additive capability; production DataGrid always implements it. */
+  inferColumns?: boolean
+  /** Additive capability; older structural implementations may omit it. */
+  updateColumnSchema?: (columns: GridColumn[], applyOrder?: boolean, storageKey?: string | null) => void
+  getRowHeight: (rowIndex: number) => number
+  getColumnWidth: (column: GridColumn) => number
+  setRowHeight: (rowIndex: number, height: number) => void
+  resetRowHeight: (rowIndex: number) => void
+  resetAllRowHeights: () => void
+  setColumnWidth: (columnKey: string, width: number) => void
+  resetColumnWidth: (columnKey: string) => void
+  resetAllColumnWidths: () => void
+  moveColumn: (columnKey: string, targetIndex: number) => void
+  getColumnOrder: () => string[]
+  setColumnOrder: (columnKeys: string[]) => void
+  resetColumnOrder: () => void
+  setColumnVisible: (columnKey: string, visible: boolean) => void
+  isColumnVisible: (columnKey: string) => boolean
+  getVisibleColumnKeys: () => string[]
+  resetColumnVisibility: () => void
+  getColumnState: () => GridColumnState
+  setColumnState: (state: GridColumnState) => void
+  resetColumnState: () => void
+  bestFitColumn: (columnKey: string) => number | null
+  bestFitAllColumns: () => BestFitColumnWidth[]
+  copySelectedCells: () => Promise<boolean>
+  copySelectedRows: () => Promise<boolean>
+  setQuickSearch: (query: string) => void
+  clearQuickSearch: () => void
+  getQuickSearch: () => string
+  setFilter: (filter: GridFilter) => void
+  clearFilter: (columnKey?: string) => void
+  getFilters: () => GridFilter[]
+  setPage: (pageIndex: number) => void
+  setPageSize: (pageSize: number) => void
+  getPagination: () => GridPaginationState
+  getTotalRowCount: () => number
+  selectRow: (rowIndex: number, intent?: SelectionIntent) => void
+  selectAllRows: () => void
+  clearSelection: () => void
+  getSelection: () => GridSelection
+  getSelectionSnapshot: () => SelectionChangeDetail
+  selectRowByKey: (key: GridRowKey, intent?: SelectionIntent) => boolean
+  isRowSelected: (rowIndex: number) => boolean
+  isCellSelected: (rowIndex: number, columnKey: string) => boolean
+}
+
+declare global {
+  interface HTMLElementEventMap {
+    'selection-change': CustomEvent<SelectionChangeDetail>
+    'query-change': CustomEvent<GridQueryChangeDetail>
+  }
+}