apex-grid 3.1.0 → 3.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +101 -0
- package/README.md +201 -53
- package/components/cell.d.ts +14 -1
- package/components/cell.js +48 -6
- package/components/cell.js.map +1 -1
- package/components/filter-row.d.ts +3 -6
- package/components/filter-row.js +79 -109
- package/components/filter-row.js.map +1 -1
- package/components/grid.d.ts +416 -70
- package/components/grid.js +398 -11
- package/components/grid.js.map +1 -1
- package/components/group-header-row.d.ts +34 -0
- package/components/group-header-row.js +125 -0
- package/components/group-header-row.js.map +1 -0
- package/components/header-row.d.ts +13 -2
- package/components/header-row.js +33 -18
- package/components/header-row.js.map +1 -1
- package/components/header.d.ts +11 -0
- package/components/header.js +136 -6
- package/components/header.js.map +1 -1
- package/components/paginator.d.ts +6 -1
- package/components/paginator.js +17 -11
- package/components/paginator.js.map +1 -1
- package/components/row.d.ts +28 -0
- package/components/row.js +100 -3
- package/components/row.js.map +1 -1
- package/components/toolbar.d.ts +8 -1
- package/components/toolbar.js +25 -7
- package/components/toolbar.js.map +1 -1
- package/controllers/data-operation.js +1 -0
- package/controllers/data-operation.js.map +1 -1
- package/controllers/dom.d.ts +24 -6
- package/controllers/dom.js +62 -5
- package/controllers/dom.js.map +1 -1
- package/controllers/editing.d.ts +68 -1
- package/controllers/editing.js +129 -44
- package/controllers/editing.js.map +1 -1
- package/controllers/filter.d.ts +1 -1
- package/controllers/filter.js +16 -5
- package/controllers/filter.js.map +1 -1
- package/controllers/history.d.ts +86 -0
- package/controllers/history.js +118 -0
- package/controllers/history.js.map +1 -0
- package/controllers/navigation.d.ts +15 -0
- package/controllers/navigation.js +53 -0
- package/controllers/navigation.js.map +1 -1
- package/controllers/reorder.js +3 -1
- package/controllers/reorder.js.map +1 -1
- package/controllers/row-pin.d.ts +59 -0
- package/controllers/row-pin.js +75 -0
- package/controllers/row-pin.js.map +1 -0
- package/controllers/row-reorder.d.ts +161 -0
- package/controllers/row-reorder.js +332 -0
- package/controllers/row-reorder.js.map +1 -0
- package/controllers/sort.d.ts +1 -1
- package/controllers/sort.js +11 -3
- package/controllers/sort.js.map +1 -1
- package/controllers/state.d.ts +33 -0
- package/controllers/state.js +37 -2
- package/controllers/state.js.map +1 -1
- package/controllers/tree.d.ts +8 -0
- package/controllers/tree.js +0 -0
- package/controllers/tree.js.map +1 -1
- package/custom-elements.json +4415 -875
- package/docs/assets/hierarchy.js +1 -1
- package/docs/assets/highlight.css +28 -0
- package/docs/assets/navigation.js +1 -1
- package/docs/assets/search.js +1 -1
- package/docs/functions/custom.html +3 -0
- package/docs/functions/interpolate.html +4 -0
- package/docs/functions/localize.html +8 -0
- package/docs/functions/max.html +3 -0
- package/docs/functions/min.html +3 -0
- package/docs/functions/pattern.html +3 -0
- package/docs/functions/required.html +3 -0
- package/docs/hierarchy.html +1 -1
- package/docs/index.html +185 -55
- package/docs/interfaces/ApexCellValidationFailedEvent.html +13 -0
- package/docs/interfaces/ApexCellValueChangedEvent.html +1 -1
- package/docs/interfaces/ApexCellValueChangingEvent.html +2 -2
- package/docs/interfaces/ApexColumnGroupContext.html +6 -0
- package/docs/interfaces/ApexColumnMovedEvent.html +2 -2
- package/docs/interfaces/ApexColumnMovingEvent.html +1 -1
- package/docs/interfaces/ApexDetailContext.html +2 -2
- package/docs/interfaces/ApexGridEventMap.html +37 -9
- package/docs/interfaces/ApexHistoryChangedEvent.html +6 -0
- package/docs/interfaces/ApexPageChangedEvent.html +1 -1
- package/docs/interfaces/ApexRowMovingEvent.html +9 -0
- package/docs/interfaces/ApexRowPinningEvent.html +8 -0
- package/docs/interfaces/ApexStateChangedEvent.html +4 -0
- package/docs/interfaces/BaseApexCellContext.html +1 -1
- package/docs/interfaces/BaseApexEditorContext.html +1 -1
- package/docs/interfaces/BaseColumnConfiguration.html +42 -17
- package/docs/interfaces/CSVExportOptions.html +2 -2
- package/docs/interfaces/ColumnGroupConfiguration.html +12 -0
- package/docs/interfaces/ColumnLayoutState.html +2 -0
- package/docs/interfaces/ColumnSchema.html +22 -0
- package/docs/interfaces/DataPipelineConfiguration.html +2 -2
- package/docs/interfaces/EditingHistoryConfiguration.html +10 -0
- package/docs/interfaces/ExportFormat.html +2 -2
- package/docs/interfaces/ExportOptions.html +1 -1
- package/docs/interfaces/FilterStateSnapshot.html +4 -0
- package/docs/interfaces/GetStateOptions.html +4 -0
- package/docs/interfaces/GridCapabilities.html +8 -0
- package/docs/interfaces/GridEditingConfiguration.html +4 -2
- package/docs/interfaces/GridRowPinningConfiguration.html +5 -0
- package/docs/interfaces/GridRowReorderingConfiguration.html +22 -0
- package/docs/interfaces/GridSchema.html +19 -0
- package/docs/interfaces/GridState.html +41 -0
- package/docs/interfaces/GridTreeConfiguration.html +2 -2
- package/docs/interfaces/PaginationConfiguration.html +1 -1
- package/docs/interfaces/PaginationState.html +1 -1
- package/docs/interfaces/SetStateOptions.html +9 -0
- package/docs/interfaces/SetStateResult.html +11 -0
- package/docs/interfaces/SortStateSnapshot.html +2 -0
- package/docs/interfaces/ValidatorContext.html +8 -0
- package/docs/media/_tokens.scss +131 -44
- package/docs/media/package.json +1 -1
- package/docs/media/state-persistence.html +189 -0
- package/docs/modules.html +1 -1
- package/docs/types/DataPipelineParams.html +2 -2
- package/docs/types/EditMode.html +2 -2
- package/docs/types/GridLocaleKey.html +3 -0
- package/docs/types/GridLocaleText.html +5 -0
- package/docs/types/LocaleParams.html +2 -0
- package/docs/types/PaginationMode.html +1 -1
- package/docs/types/RowDropPosition.html +2 -0
- package/docs/types/RowPinPosition.html +2 -0
- package/docs/types/RowRef.html +3 -0
- package/docs/types/Validator.html +4 -0
- package/docs/variables/EN_LOCALE.html +9 -0
- package/docs/variables/esLocale.html +8 -0
- package/i18n/en.d.ts +151 -0
- package/i18n/en.js +125 -0
- package/i18n/en.js.map +1 -0
- package/i18n/es.d.ts +18 -0
- package/i18n/es.js +125 -0
- package/i18n/es.js.map +1 -0
- package/i18n/index.d.ts +3 -0
- package/i18n/index.js +4 -0
- package/i18n/index.js.map +1 -0
- package/i18n/localize.d.ts +23 -0
- package/i18n/localize.js +15 -0
- package/i18n/localize.js.map +1 -0
- package/index.d.ts +8 -2
- package/index.js +2 -0
- package/index.js.map +1 -1
- package/internal/feature-module.d.ts +46 -0
- package/internal/feature-module.js +11 -0
- package/internal/feature-module.js.map +1 -1
- package/internal/flip.js +1 -1
- package/internal/flip.js.map +1 -1
- package/internal/icons.d.ts +9 -7
- package/internal/icons.js +75 -35
- package/internal/icons.js.map +1 -1
- package/internal/index.d.ts +5 -3
- package/internal/index.js +2 -1
- package/internal/index.js.map +1 -1
- package/internal/state-schema.d.ts +85 -0
- package/internal/state-schema.js +27 -0
- package/internal/state-schema.js.map +1 -0
- package/internal/state-snapshot.d.ts +152 -0
- package/internal/state-snapshot.js +115 -0
- package/internal/state-snapshot.js.map +1 -0
- package/internal/tags.d.ts +1 -0
- package/internal/tags.js +1 -0
- package/internal/tags.js.map +1 -1
- package/internal/types.d.ts +162 -2
- package/internal/types.js.map +1 -1
- package/internal/utils.d.ts +12 -0
- package/internal/utils.js +17 -0
- package/internal/utils.js.map +1 -1
- package/internal/validators.d.ts +31 -0
- package/internal/validators.js +44 -0
- package/internal/validators.js.map +1 -0
- package/package.json +1 -1
- package/styles/_tokens.css.js +1 -1
- package/styles/_tokens.css.js.map +1 -1
- package/styles/body-cell/body-cell.css.js +1 -1
- package/styles/body-cell/body-cell.css.js.map +1 -1
- package/styles/body-row/body-row.css.js +1 -1
- package/styles/body-row/body-row.css.js.map +1 -1
- package/styles/filter-row/filter-row.css.js +1 -1
- package/styles/filter-row/filter-row.css.js.map +1 -1
- package/styles/grid/_grid.base.css.js +1 -1
- package/styles/grid/_grid.base.css.js.map +1 -1
- package/styles/grid/grid.css.js +1 -1
- package/styles/grid/grid.css.js.map +1 -1
- package/styles/group-header-row/group-header-row.css.d.ts +1 -0
- package/styles/group-header-row/group-header-row.css.js +3 -0
- package/styles/group-header-row/group-header-row.css.js.map +1 -0
- package/styles/header-cell/header-cell.css.js +1 -1
- package/styles/header-cell/header-cell.css.js.map +1 -1
- package/styles/header-row/header-row.base.css.js +1 -1
- package/styles/header-row/header-row.base.css.js.map +1 -1
- package/styles/paginator/paginator.css.js +1 -1
- package/styles/paginator/paginator.css.js.map +1 -1
- package/styles/toolbar/toolbar.css.js +1 -1
- package/styles/toolbar/toolbar.css.js.map +1 -1
- package/docs/classes/ApexGrid.html +0 -393
package/components/header.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"header.js","sourceRoot":"","sources":["../../src/components/header.ts"],"names":[],"mappings":"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","sourcesContent":["import { consume } from '@lit/context';\nimport { html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { gridStateContext, type StateController } from '../controllers/state.js';\nimport { MIN_COL_RESIZE_WIDTH } from '../internal/constants.js';\nimport { renderSortArrows } from '../internal/icons.js';\nimport { partNameMap } from '../internal/part-map.js';\nimport { registerComponent } from '../internal/register.js';\nimport { GRID_HEADER_TAG } from '../internal/tags.js';\nimport type { ApexHeaderContext, ColumnConfiguration } from '../internal/types.js';\nimport { styles } from '../styles/header-cell/header-cell.css.js';\n\n/** Pixels of pointer travel before a hold turns into a drag — avoids\n * accidental drags on click. */\nconst DRAG_THRESHOLD_PX = 4;\n\nexport default class ApexGridHeader<T extends object> extends LitElement {\n public static get tagName() {\n return GRID_HEADER_TAG;\n }\n\n public static override styles = styles;\n\n public static register(): void {\n registerComponent(ApexGridHeader);\n }\n\n protected get context(): ApexHeaderContext<T> {\n return {\n parent: this,\n column: this.column,\n };\n }\n\n protected get isSortable() {\n return Boolean(this.column.sort);\n }\n\n protected get resizeController() {\n return this.state.resizing;\n }\n\n protected get reorderController() {\n return this.state.reordering;\n }\n\n protected get isDraggable() {\n return Boolean(this.state?.reordering?.isDraggable(this.column));\n }\n\n @consume({ context: gridStateContext, subscribe: true })\n @property({ attribute: false })\n public state!: StateController<T>;\n\n @property({ attribute: false })\n public column!: ColumnConfiguration<T>;\n\n /** 1-based column index passed in by the parent header row for `aria-colindex`. */\n @property({ attribute: false, type: Number })\n public colindex = 0;\n\n #addResizeEventHandlers() {\n const config: AddEventListenerOptions = { once: true };\n\n this.addEventListener(\n 'gotpointercapture',\n () => {\n this.resizeController.indicatorActive = true;\n },\n config\n );\n this.addEventListener('lostpointercapture', this.#handlePointerLost, config);\n this.addEventListener('pointerup', (e) => this.releasePointerCapture(e.pointerId), config);\n this.addEventListener('pointermove', this.#handleResize);\n }\n\n #handleClick(e: Event) {\n e.stopPropagation();\n this.state.sorting.sortFromHeaderClick(this.column);\n }\n\n #handleResize = ({ clientX }: PointerEvent) => {\n const { left } = this.getBoundingClientRect();\n const width = Math.max(clientX - left, MIN_COL_RESIZE_WIDTH);\n const x = this.offsetLeft + width;\n\n this.resizeController.resize(this.column, width, x);\n };\n\n #handleResizeStart(ev: PointerEvent) {\n const { target, pointerId } = ev;\n\n ev.preventDefault();\n // Resize takes priority over reorder — stop the event so the header's\n // pointerdown listener doesn't also start arming a drag.\n ev.stopPropagation();\n\n this.#addResizeEventHandlers();\n this.resizeController.start(this);\n\n (target as HTMLElement).setPointerCapture(pointerId);\n }\n\n #handlePointerLost = () => {\n this.resizeController.indicatorActive = false;\n this.removeEventListener('pointermove', this.#handleResize);\n this.resizeController.stop();\n };\n\n #handleAutosize = () => this.resizeController.autosize(this.column, this);\n\n // --- Reorder (pointer-driven) ------------------------------------------\n\n #dragStartX = 0;\n #dragStartY = 0;\n #dragPointerId = -1;\n #isDragging = false;\n\n #handleReorderPointerDown = (event: PointerEvent) => {\n if (!this.isDraggable) return;\n if (event.button !== 0) return;\n // Skip if the user grabbed an interactive sub-part of the header — the\n // resize handle or the sort/action icons. Those have their own handlers\n // and should not arm a drag.\n const path = event.composedPath();\n const target = path[0];\n if (target instanceof Element && target.closest?.('[part~=\"resizable\"], [part~=\"action\"]')) {\n return;\n }\n this.#dragStartX = event.clientX;\n this.#dragStartY = event.clientY;\n this.#dragPointerId = event.pointerId;\n this.addEventListener('pointermove', this.#handleReorderPointerMove);\n this.addEventListener('pointerup', this.#handleReorderPointerUp);\n this.addEventListener('pointercancel', this.#handleReorderPointerUp);\n };\n\n #handleReorderPointerMove = (event: PointerEvent) => {\n if (event.pointerId !== this.#dragPointerId) return;\n if (!this.#isDragging) {\n const dx = event.clientX - this.#dragStartX;\n const dy = event.clientY - this.#dragStartY;\n if (Math.hypot(dx, dy) < DRAG_THRESHOLD_PX) return;\n // Threshold crossed — start the drag in earnest.\n this.#isDragging = true;\n this.setPointerCapture(event.pointerId);\n this.setAttribute('data-dragging', '');\n const rect = this.getBoundingClientRect();\n const label = this.column.headerText ?? String(this.column.key);\n this.reorderController.start(\n this.column.key,\n rect,\n this.#dragStartX,\n this.#dragStartY,\n label\n );\n }\n this.reorderController.move(event.clientX, event.clientY);\n };\n\n #handleReorderPointerUp = (event: PointerEvent) => {\n if (event.pointerId !== this.#dragPointerId) return;\n this.removeEventListener('pointermove', this.#handleReorderPointerMove);\n this.removeEventListener('pointerup', this.#handleReorderPointerUp);\n this.removeEventListener('pointercancel', this.#handleReorderPointerUp);\n try {\n if (this.hasPointerCapture(event.pointerId)) {\n this.releasePointerCapture(event.pointerId);\n }\n } catch {\n /* capture was already released */\n }\n if (this.#isDragging) {\n this.#isDragging = false;\n this.removeAttribute('data-dragging');\n this.reorderController.end();\n }\n this.#dragPointerId = -1;\n };\n\n protected override updated() {\n // Reflect reorderability as an attribute so SCSS can show the grab\n // cursor only on columns that can actually be dragged. Tracks both the\n // grid-level `columnReordering` flag (arriving via context) and the\n // per-column `reorderable: false` opt-out at runtime.\n if (this.isDraggable) {\n this.setAttribute('data-reorderable', '');\n } else {\n this.removeAttribute('data-reorderable');\n }\n // aria-colindex stays in sync with the parent header row's numbering.\n if (this.colindex > 0) {\n this.setAttribute('aria-colindex', String(this.colindex));\n }\n // aria-sort communicates current sort direction for this column to AT.\n if (this.isSortable) {\n const sort = this.state?.sorting.state.get(this.column.key);\n const dir = sort?.direction;\n this.setAttribute(\n 'aria-sort',\n dir === 'ascending' ? 'ascending' : dir === 'descending' ? 'descending' : 'none'\n );\n } else {\n this.removeAttribute('aria-sort');\n }\n }\n\n public override connectedCallback(): void {\n super.connectedCallback();\n this.setAttribute('role', 'columnheader');\n this.addEventListener('pointerdown', this.#handleReorderPointerDown);\n }\n\n public override disconnectedCallback(): void {\n this.removeEventListener('pointerdown', this.#handleReorderPointerDown);\n super.disconnectedCallback();\n }\n\n protected renderSortPart() {\n const state = this.state.sorting.state.get(this.column.key);\n const idx = Array.from(this.state.sorting.state.values()).indexOf(state!);\n const attr = this.state.host.sortConfiguration.multiple\n ? idx > -1\n ? idx + 1\n : nothing\n : nothing;\n const direction = state?.direction ?? 'none';\n\n const label =\n state?.direction === 'ascending'\n ? 'Sorted ascending. Activate to sort descending.'\n : state?.direction === 'descending'\n ? 'Sorted descending. Activate to clear sort.'\n : 'Not sorted. Activate to sort ascending.';\n\n return state || this.isSortable\n ? this.isSortable\n ? html`<button\n type=\"button\"\n part=${partNameMap({ action: true, sorted: !!state?.direction })}\n data-sort-active=${direction}\n data-sort-index=${attr === nothing ? '' : (attr as number)}\n aria-label=${label}\n @click=${this.#handleClick}\n >\n ${renderSortArrows()}\n </button>`\n : html`<span\n part=${partNameMap({ action: true, sorted: !!state?.direction })}\n data-sort-active=${direction}\n data-sort-index=${attr === nothing ? '' : (attr as number)}\n aria-hidden=\"true\"\n >\n ${renderSortArrows()}\n </span>`\n : nothing;\n }\n\n protected renderContentPart() {\n const defaultContent = this.column.headerText ?? this.column.key;\n const template = this.column.headerTemplate;\n\n return html`\n <span part=\"title\">\n <span>${template ? template(this.context) : html`${defaultContent}`}</span>\n </span>\n `;\n }\n\n protected renderResizePart() {\n return this.column.resizable\n ? html`<span\n part=\"resizable\"\n @dblclick=${this.#handleAutosize}\n @pointerdown=${this.#handleResizeStart}\n ></span>`\n : nothing;\n }\n\n protected override render() {\n return html`\n <div\n part=${partNameMap({\n content: true,\n sortable: this.isSortable,\n resizing: this.resizeController.indicatorActive,\n })}\n >\n ${this.renderContentPart()}\n <div part=\"actions\">${this.renderSortPart()}</div>\n </div>\n ${this.renderResizePart()}\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [ApexGridHeader.tagName]: ApexGridHeader<object>;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"header.js","sourceRoot":"","sources":["../../src/components/header.ts"],"names":[],"mappings":"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","sourcesContent":["import { consume } from '@lit/context';\nimport { html, LitElement, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { gridStateContext, type StateController } from '../controllers/state.js';\nimport { MIN_COL_RESIZE_WIDTH } from '../internal/constants.js';\nimport { renderIcon, renderSortArrows } from '../internal/icons.js';\nimport { partNameMap } from '../internal/part-map.js';\nimport { registerComponent } from '../internal/register.js';\nimport { GRID_HEADER_TAG } from '../internal/tags.js';\nimport type { ApexHeaderContext, ColumnConfiguration } from '../internal/types.js';\nimport { styles } from '../styles/header-cell/header-cell.css.js';\n\n/** Pixels of pointer travel before a hold turns into a drag — avoids\n * accidental drags on click. */\nconst DRAG_THRESHOLD_PX = 4;\n\nexport default class ApexGridHeader<T extends object> extends LitElement {\n public static get tagName() {\n return GRID_HEADER_TAG;\n }\n\n public static override styles = styles;\n\n public static register(): void {\n registerComponent(ApexGridHeader);\n }\n\n protected get context(): ApexHeaderContext<T> {\n return {\n parent: this,\n column: this.column,\n };\n }\n\n protected get isSortable() {\n // Sort affordances are hidden while a manual row order is active (F5):\n // sorting and manual order are mutually exclusive.\n return Boolean(this.column.sort) && !this.state?.rowReorder?.hasManualOrder;\n }\n\n protected get isFilterable() {\n return Boolean(this.column.filter);\n }\n\n protected get hasActiveFilter() {\n return Boolean(this.state?.filtering?.state.has(this.column.key));\n }\n\n protected get resizeController() {\n return this.state.resizing;\n }\n\n protected get reorderController() {\n return this.state.reordering;\n }\n\n protected get isDraggable() {\n return Boolean(this.state?.reordering?.isDraggable(this.column));\n }\n\n @consume({ context: gridStateContext, subscribe: true })\n @property({ attribute: false })\n public state!: StateController<T>;\n\n @property({ attribute: false })\n public column!: ColumnConfiguration<T>;\n\n /** 1-based column index passed in by the parent header row for `aria-colindex`. */\n @property({ attribute: false, type: Number })\n public colindex = 0;\n\n /**\n * Spreadsheet column letter (A, B, C, ...) shown as a prefix while formula\n * coordinate hints are active. Empty string hides it.\n */\n @property({ attribute: false })\n public coordinateLetter = '';\n\n @state()\n protected menuOpen = false;\n\n #addResizeEventHandlers() {\n const config: AddEventListenerOptions = { once: true };\n\n this.addEventListener(\n 'gotpointercapture',\n () => {\n this.resizeController.indicatorActive = true;\n },\n config\n );\n this.addEventListener('lostpointercapture', this.#handlePointerLost, config);\n this.addEventListener('pointerup', (e) => this.releasePointerCapture(e.pointerId), config);\n this.addEventListener('pointermove', this.#handleResize);\n }\n\n #handleClick(e: MouseEvent) {\n e.stopPropagation();\n // Ctrl/Cmd+click appends to a multi-column sort; a plain click sorts by\n // this column alone. Keyboard activation (Enter/Space) fires a click whose\n // modifier flags mirror the keys held, so Ctrl/Cmd+Enter is additive too.\n this.state.sorting.sortFromHeaderClick(this.column, e.ctrlKey || e.metaKey);\n }\n\n #handleResize = ({ clientX }: PointerEvent) => {\n const { left } = this.getBoundingClientRect();\n const width = Math.max(clientX - left, MIN_COL_RESIZE_WIDTH);\n const x = this.offsetLeft + width;\n\n this.resizeController.resize(this.column, width, x);\n };\n\n #handleResizeStart(ev: PointerEvent) {\n const { target, pointerId } = ev;\n\n ev.preventDefault();\n // Resize takes priority over reorder — stop the event so the header's\n // pointerdown listener doesn't also start arming a drag.\n ev.stopPropagation();\n\n this.#addResizeEventHandlers();\n this.resizeController.start(this);\n\n (target as HTMLElement).setPointerCapture(pointerId);\n }\n\n #handlePointerLost = () => {\n this.resizeController.indicatorActive = false;\n this.removeEventListener('pointermove', this.#handleResize);\n this.resizeController.stop();\n };\n\n #handleAutosize = () => this.resizeController.autosize(this.column, this);\n\n // --- Reorder (pointer-driven) ------------------------------------------\n\n #dragStartX = 0;\n #dragStartY = 0;\n #dragPointerId = -1;\n #isDragging = false;\n\n #handleReorderPointerDown = (event: PointerEvent) => {\n if (!this.isDraggable) return;\n if (event.button !== 0) return;\n // Skip if the user grabbed an interactive sub-part of the header — the\n // resize handle, sort/action icons, filter button, menu button, or the\n // column menu dropdown. Those have their own handlers and should not arm\n // a drag.\n const path = event.composedPath();\n const target = path[0];\n if (\n target instanceof Element &&\n target.closest?.('[part~=\"resizable\"], [part~=\"action\"], [part~=\"col-menu\"]')\n ) {\n return;\n }\n this.#dragStartX = event.clientX;\n this.#dragStartY = event.clientY;\n this.#dragPointerId = event.pointerId;\n this.addEventListener('pointermove', this.#handleReorderPointerMove);\n this.addEventListener('pointerup', this.#handleReorderPointerUp);\n this.addEventListener('pointercancel', this.#handleReorderPointerUp);\n };\n\n #handleReorderPointerMove = (event: PointerEvent) => {\n if (event.pointerId !== this.#dragPointerId) return;\n if (!this.#isDragging) {\n const dx = event.clientX - this.#dragStartX;\n const dy = event.clientY - this.#dragStartY;\n if (Math.hypot(dx, dy) < DRAG_THRESHOLD_PX) return;\n // Threshold crossed — start the drag in earnest.\n this.#isDragging = true;\n this.setPointerCapture(event.pointerId);\n this.setAttribute('data-dragging', '');\n const rect = this.getBoundingClientRect();\n const label = this.column.headerText ?? String(this.column.key);\n this.reorderController.start(\n this.column.key,\n rect,\n this.#dragStartX,\n this.#dragStartY,\n label\n );\n }\n this.reorderController.move(event.clientX, event.clientY);\n };\n\n #handleReorderPointerUp = (event: PointerEvent) => {\n if (event.pointerId !== this.#dragPointerId) return;\n this.removeEventListener('pointermove', this.#handleReorderPointerMove);\n this.removeEventListener('pointerup', this.#handleReorderPointerUp);\n this.removeEventListener('pointercancel', this.#handleReorderPointerUp);\n try {\n if (this.hasPointerCapture(event.pointerId)) {\n this.releasePointerCapture(event.pointerId);\n }\n } catch {\n /* capture was already released */\n }\n if (this.#isDragging) {\n this.#isDragging = false;\n this.removeAttribute('data-dragging');\n this.reorderController.end();\n }\n this.#dragPointerId = -1;\n };\n\n // --- Filter button --------------------------------------------------\n\n #handleFilterClick = (e: MouseEvent) => {\n e.stopPropagation();\n const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();\n this.state.filtering.setActiveColumn(this.column, rect);\n };\n\n // --- Column menu button ---------------------------------------------\n\n #handleMenuClick = (e: MouseEvent) => {\n e.stopPropagation();\n // Offer the column menu to a feature module first: the enterprise context\n // menu opens its richer, shared menu (sort / pin / hide / group / chart)\n // anchored at this button and calls preventDefault(). When nothing handles\n // it (the community grid), fall back to the built-in inline menu below.\n // Event name is a stable string contract (mirrored in the enterprise\n // context-menu controller), like the native 'contextmenu'.\n const request = new CustomEvent('apex-grid-column-menu', {\n detail: { column: this.column, anchor: e.currentTarget as HTMLElement },\n bubbles: true,\n composed: true,\n cancelable: true,\n });\n this.dispatchEvent(request);\n if (request.defaultPrevented) return;\n this.menuOpen = !this.menuOpen;\n };\n\n #handleMenuOutside = (e: PointerEvent) => {\n if (!this.menuOpen) return;\n if (e.composedPath().includes(this)) return;\n this.menuOpen = false;\n };\n\n protected override updated() {\n // Mirror the column's data type onto the host so the header label can match\n // the body cell alignment by default (numeric/currency cells right-align,\n // so their headers should too). Kept in sync on every update because the\n // column config can change at runtime (reorder, reconfigure).\n this.setAttribute('data-cell-type', this.column.type ?? 'string');\n // Reflect reorderability as an attribute so SCSS can show the grab\n // cursor only on columns that can actually be dragged. Tracks both the\n // grid-level `columnReordering` flag (arriving via context) and the\n // per-column `reorderable: false` opt-out at runtime.\n if (this.isDraggable) {\n this.setAttribute('data-reorderable', '');\n } else {\n this.removeAttribute('data-reorderable');\n }\n // aria-colindex stays in sync with the parent header row's numbering.\n if (this.colindex > 0) {\n this.setAttribute('aria-colindex', String(this.colindex));\n }\n // aria-sort communicates current sort direction for this column to AT.\n if (this.isSortable) {\n const sort = this.state?.sorting.state.get(this.column.key);\n const dir = sort?.direction;\n this.setAttribute(\n 'aria-sort',\n dir === 'ascending' ? 'ascending' : dir === 'descending' ? 'descending' : 'none'\n );\n } else {\n this.removeAttribute('aria-sort');\n }\n }\n\n public override connectedCallback(): void {\n super.connectedCallback();\n this.setAttribute('role', 'columnheader');\n this.addEventListener('pointerdown', this.#handleReorderPointerDown);\n document.addEventListener('pointerdown', this.#handleMenuOutside, true);\n }\n\n public override disconnectedCallback(): void {\n this.removeEventListener('pointerdown', this.#handleReorderPointerDown);\n document.removeEventListener('pointerdown', this.#handleMenuOutside, true);\n super.disconnectedCallback();\n }\n\n protected renderSortPart() {\n const state = this.state.sorting.state.get(this.column.key);\n const idx = Array.from(this.state.sorting.state.values()).indexOf(state!);\n const attr = this.state.host.sortConfiguration.multiple\n ? idx > -1\n ? idx + 1\n : nothing\n : nothing;\n const direction = state?.direction ?? 'none';\n\n const label =\n state?.direction === 'ascending'\n ? 'Sorted ascending. Activate to sort descending.'\n : state?.direction === 'descending'\n ? 'Sorted descending. Activate to clear sort.'\n : 'Not sorted. Activate to sort ascending.';\n\n return state || this.isSortable\n ? this.isSortable\n ? html`<button\n type=\"button\"\n part=${partNameMap({ action: true, sorted: !!state?.direction })}\n data-sort-active=${direction}\n data-sort-index=${attr === nothing ? '' : (attr as number)}\n aria-label=${label}\n @click=${this.#handleClick}\n >\n ${renderSortArrows()}\n </button>`\n : html`<span\n part=${partNameMap({ action: true, sorted: !!state?.direction })}\n data-sort-active=${direction}\n data-sort-index=${attr === nothing ? '' : (attr as number)}\n aria-hidden=\"true\"\n >\n ${renderSortArrows()}\n </span>`\n : nothing;\n }\n\n protected renderFilterButton() {\n if (!this.isFilterable) return nothing;\n const count = this.state?.filtering?.state.get(this.column.key)?.length ?? 0;\n return html`<button\n type=\"button\"\n part=${partNameMap({ action: true, 'filter-btn': true, 'filter-active': this.hasActiveFilter })}\n aria-label=\"Filter column\"\n @click=${this.#handleFilterClick}\n >\n ${renderIcon('filter')}\n ${count > 1 ? html`<span part=\"filter-count\">${count}</span>` : nothing}\n </button>`;\n }\n\n protected renderMenuButton() {\n // Suppress the kebab entirely when the grid opts out.\n if (this.state?.host?.columnMenu === false) return nothing;\n // Show the kebab when this column has built-in menu items (sort / autosize)\n // or when a feature module provides a richer column menu (the enterprise\n // context menu: pin / hide / group / chart), so the affordance appears even\n // on columns that are neither sortable nor resizable.\n const hasMenuItems =\n this.isSortable || this.column.resizable || Boolean(this.state?.hasColumnMenu);\n if (!hasMenuItems) return nothing;\n return html`<button\n type=\"button\"\n part=${partNameMap({ action: true, 'menu-btn': true })}\n aria-label=\"Column menu\"\n aria-expanded=${this.menuOpen ? 'true' : 'false'}\n aria-haspopup=\"menu\"\n @click=${this.#handleMenuClick}\n >\n ${renderIcon('more-vert')}\n </button>`;\n }\n\n protected renderColumnMenu() {\n if (!this.menuOpen) return nothing;\n return html`<div part=\"col-menu\" role=\"menu\">\n ${\n this.isSortable\n ? html`\n <button\n type=\"button\"\n part=\"col-menu-item\"\n role=\"menuitem\"\n @click=${() => {\n this.state.sorting.sort({ key: this.column.key, direction: 'ascending' } as any);\n this.menuOpen = false;\n }}\n >\n ${renderIcon('sort-asc')} Sort Ascending\n </button>\n <button\n type=\"button\"\n part=\"col-menu-item\"\n role=\"menuitem\"\n @click=${() => {\n this.state.sorting.sort({ key: this.column.key, direction: 'descending' } as any);\n this.menuOpen = false;\n }}\n >\n ${renderIcon('sort-desc')} Sort Descending\n </button>\n `\n : nothing\n }\n ${\n this.column.resizable\n ? html`<button\n type=\"button\"\n part=\"col-menu-item\"\n role=\"menuitem\"\n @click=${() => {\n this.state.resizing.autosize(this.column, this);\n this.menuOpen = false;\n }}\n >\n ${renderIcon('arrow-upward')} Autosize Column\n </button>`\n : nothing\n }\n </div>`;\n }\n\n protected renderContentPart() {\n const defaultContent = this.column.headerText ?? this.column.key;\n const template = this.column.headerTemplate;\n\n return html`\n <span part=\"title\">\n ${\n this.coordinateLetter\n ? html`<span part=\"coord-letter\" aria-hidden=\"true\">${this.coordinateLetter}</span>`\n : nothing\n }\n <span>${template ? template(this.context) : html`${defaultContent}`}</span>\n </span>\n `;\n }\n\n protected renderResizePart() {\n return this.column.resizable\n ? html`<span\n part=\"resizable\"\n @dblclick=${this.#handleAutosize}\n @pointerdown=${this.#handleResizeStart}\n ></span>`\n : nothing;\n }\n\n protected override render() {\n return html`\n <div\n part=${partNameMap({\n content: true,\n sortable: this.isSortable,\n resizing: this.resizeController.indicatorActive,\n })}\n >\n ${this.renderContentPart()}\n <div part=\"actions\">\n ${this.renderSortPart()}\n ${this.renderFilterButton()}\n ${this.renderMenuButton()}\n </div>\n </div>\n ${this.renderResizePart()}\n ${this.renderColumnMenu()}\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [ApexGridHeader.tagName]: ApexGridHeader<object>;\n }\n}\n"]}
|
|
@@ -34,9 +34,14 @@ export default class ApexGridPaginator<T extends object> extends LitElement {
|
|
|
34
34
|
pageSizeOptions: number[];
|
|
35
35
|
/**
|
|
36
36
|
* Accessible label for the rows-per-page selector.
|
|
37
|
+
*
|
|
38
|
+
* @remarks
|
|
39
|
+
* When unset, falls back to the grid's localized `pagination.rowsPerPage`
|
|
40
|
+
* text (see {@link ApexGrid.localeText}).
|
|
37
41
|
*/
|
|
38
|
-
pageSizeLabel
|
|
42
|
+
pageSizeLabel?: string;
|
|
39
43
|
protected get controller(): import("../controllers/pagination.js").PaginationController<T>;
|
|
44
|
+
protected get sizeLabel(): string;
|
|
40
45
|
protected renderSizeSelect(): import("lit-html").TemplateResult<1>;
|
|
41
46
|
protected renderInfo(): import("lit-html").TemplateResult<1>;
|
|
42
47
|
protected renderButton(opts: {
|
package/components/paginator.js
CHANGED
|
@@ -16,7 +16,6 @@ export default class ApexGridPaginator extends LitElement {
|
|
|
16
16
|
constructor() {
|
|
17
17
|
super(...arguments);
|
|
18
18
|
this.pageSizeOptions = [10, 25, 50, 100];
|
|
19
|
-
this.pageSizeLabel = 'Rows per page';
|
|
20
19
|
this.#handleSizeChange = (event) => {
|
|
21
20
|
event.stopPropagation();
|
|
22
21
|
const next = Number(event.target.value);
|
|
@@ -43,14 +42,17 @@ export default class ApexGridPaginator extends LitElement {
|
|
|
43
42
|
get controller() {
|
|
44
43
|
return this.state.pagination;
|
|
45
44
|
}
|
|
45
|
+
get sizeLabel() {
|
|
46
|
+
return this.pageSizeLabel ?? this.state.localize('pagination.rowsPerPage');
|
|
47
|
+
}
|
|
46
48
|
#handleSizeChange;
|
|
47
49
|
renderSizeSelect() {
|
|
48
50
|
const current = this.controller.pageSize;
|
|
49
51
|
return html `
|
|
50
52
|
<label part="paginator-size">
|
|
51
|
-
<span class="visually-hidden">${this.
|
|
53
|
+
<span class="visually-hidden">${this.sizeLabel}</span>
|
|
52
54
|
<select
|
|
53
|
-
aria-label=${this.
|
|
55
|
+
aria-label=${this.sizeLabel}
|
|
54
56
|
.value=${String(current)}
|
|
55
57
|
@change=${this.#handleSizeChange}
|
|
56
58
|
>
|
|
@@ -62,11 +64,15 @@ export default class ApexGridPaginator extends LitElement {
|
|
|
62
64
|
renderInfo() {
|
|
63
65
|
const { page, pageSize, totalItems } = this.controller.state;
|
|
64
66
|
if (totalItems === 0) {
|
|
65
|
-
return html `<span part="paginator-info" aria-live="polite"
|
|
67
|
+
return html `<span part="paginator-info" aria-live="polite"
|
|
68
|
+
>${this.state.localize('pagination.summaryEmpty')}</span
|
|
69
|
+
>`;
|
|
66
70
|
}
|
|
67
71
|
const start = page * pageSize + 1;
|
|
68
72
|
const end = Math.min(totalItems, (page + 1) * pageSize);
|
|
69
|
-
return html `<span part="paginator-info" aria-live="polite"
|
|
73
|
+
return html `<span part="paginator-info" aria-live="polite"
|
|
74
|
+
>${this.state.localize('pagination.summary', { start, end, total: totalItems })}</span
|
|
75
|
+
>`;
|
|
70
76
|
}
|
|
71
77
|
renderButton(opts) {
|
|
72
78
|
return html `<button
|
|
@@ -90,20 +96,20 @@ export default class ApexGridPaginator extends LitElement {
|
|
|
90
96
|
<div
|
|
91
97
|
part="paginator-controls"
|
|
92
98
|
role="group"
|
|
93
|
-
aria-label
|
|
99
|
+
aria-label=${this.state.localize('pagination.controls')}
|
|
94
100
|
@keydown=${this.#handleControlsKeydown}
|
|
95
101
|
>
|
|
96
102
|
${this.renderButton({
|
|
97
103
|
id: 'first',
|
|
98
104
|
icon: 'page-first',
|
|
99
|
-
label: '
|
|
105
|
+
label: this.state.localize('pagination.firstPage'),
|
|
100
106
|
disabled: onFirst,
|
|
101
107
|
onClick: () => this.controller.firstPage(),
|
|
102
108
|
})}
|
|
103
109
|
${this.renderButton({
|
|
104
110
|
id: 'previous',
|
|
105
111
|
icon: 'page-previous',
|
|
106
|
-
label: '
|
|
112
|
+
label: this.state.localize('pagination.previousPage'),
|
|
107
113
|
disabled: onFirst,
|
|
108
114
|
onClick: () => this.controller.previousPage(),
|
|
109
115
|
})}
|
|
@@ -111,14 +117,14 @@ export default class ApexGridPaginator extends LitElement {
|
|
|
111
117
|
${this.renderButton({
|
|
112
118
|
id: 'next',
|
|
113
119
|
icon: 'page-next',
|
|
114
|
-
label: '
|
|
120
|
+
label: this.state.localize('pagination.nextPage'),
|
|
115
121
|
disabled: onLast,
|
|
116
122
|
onClick: () => this.controller.nextPage(),
|
|
117
123
|
})}
|
|
118
124
|
${this.renderButton({
|
|
119
125
|
id: 'last',
|
|
120
126
|
icon: 'page-last',
|
|
121
|
-
label: '
|
|
127
|
+
label: this.state.localize('pagination.lastPage'),
|
|
122
128
|
disabled: onLast,
|
|
123
129
|
onClick: () => this.controller.lastPage(),
|
|
124
130
|
})}
|
|
@@ -129,7 +135,7 @@ export default class ApexGridPaginator extends LitElement {
|
|
|
129
135
|
if (!this.state)
|
|
130
136
|
return nothing;
|
|
131
137
|
return html `
|
|
132
|
-
<div part="paginator" role="navigation" aria-label
|
|
138
|
+
<div part="paginator" role="navigation" aria-label=${this.state.localize('pagination.label')}>
|
|
133
139
|
${this.renderSizeSelect()} ${this.renderInfo()} ${this.renderControls()}
|
|
134
140
|
</div>
|
|
135
141
|
`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"paginator.js","sourceRoot":"","sources":["../../src/components/paginator.ts"],"names":[],"mappings":"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","sourcesContent":["import { consume } from '@lit/context';\nimport { html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { gridStateContext, type StateController } from '../controllers/state.js';\nimport { renderIcon } from '../internal/icons.js';\nimport { registerComponent } from '../internal/register.js';\nimport { GRID_PAGINATOR_TAG } from '../internal/tags.js';\nimport { styles } from '../styles/paginator/paginator.css.js';\n\n/**\n * Pagination toolbar rendered beneath the grid body.\n *\n * @remarks\n * Drives {@link PaginationController} on the host grid. The component is purely\n * presentational — page transitions go through the controller so they emit the\n * cancellable `pageChanging` event and the post-update `pageChanged` event.\n *\n * @element apex-grid-paginator\n *\n * @csspart paginator - The root container.\n * @csspart paginator-size - The page-size selector wrapper.\n * @csspart paginator-info - The \"1–25 of 100\" status label.\n * @csspart paginator-controls - The first/prev/next/last button cluster.\n * @csspart paginator-page - The \"Page X of N\" status label.\n */\nexport default class ApexGridPaginator<T extends object> extends LitElement {\n public static get tagName() {\n return GRID_PAGINATOR_TAG;\n }\n\n public static override styles = styles;\n\n /**\n * Registers the `<apex-grid-paginator>` element and its dependencies. Idempotent.\n */\n public static register() {\n registerComponent(ApexGridPaginator);\n }\n\n @consume({ context: gridStateContext, subscribe: true })\n @property({ attribute: false })\n public state!: StateController<T>;\n\n /**\n * The page-size choices rendered in the rows-per-page selector.\n *\n * @remarks\n * Defaults to `[10, 25, 50, 100]`.\n */\n @property({ attribute: false })\n public pageSizeOptions: number[] = [10, 25, 50, 100];\n\n /**\n * Accessible label for the rows-per-page selector.\n */\n @property({ type: String, attribute: 'page-size-label' })\n public pageSizeLabel = 'Rows per page';\n\n protected get controller() {\n return this.state.pagination;\n }\n\n #handleSizeChange = (event: Event) => {\n event.stopPropagation();\n const next = Number((event.target as HTMLSelectElement).value);\n if (Number.isFinite(next)) {\n this.controller.setPageSize(next);\n }\n };\n\n protected renderSizeSelect() {\n const current = this.controller.pageSize;\n return html`\n <label part=\"paginator-size\">\n <span class=\"visually-hidden\">${this.pageSizeLabel}</span>\n <select\n aria-label=${this.pageSizeLabel}\n .value=${String(current)}\n @change=${this.#handleSizeChange}\n >\n ${this.pageSizeOptions.map(\n (size) =>\n html`<option .value=${String(size)} ?selected=${size === current}>${size}</option>`\n )}\n </select>\n </label>\n `;\n }\n\n protected renderInfo() {\n const { page, pageSize, totalItems } = this.controller.state;\n if (totalItems === 0) {\n return html`<span part=\"paginator-info\" aria-live=\"polite\">0 of 0</span>`;\n }\n const start = page * pageSize + 1;\n const end = Math.min(totalItems, (page + 1) * pageSize);\n return html`<span part=\"paginator-info\" aria-live=\"polite\">${start}–${end} of ${totalItems}</span>`;\n }\n\n protected renderButton(opts: {\n id: string;\n icon: string;\n label: string;\n disabled: boolean;\n onClick: () => void;\n }) {\n return html`<button\n part=\"paginator-button\"\n id=${opts.id}\n type=\"button\"\n aria-label=${opts.label}\n title=${opts.label}\n ?disabled=${opts.disabled}\n @click=${opts.onClick}\n >\n ${renderIcon(opts.icon)}\n </button>`;\n }\n\n #handleControlsKeydown = (event: KeyboardEvent) => {\n // Keep arrow-key navigation inside the paginator instead of bubbling into the grid.\n if (\n event.key === 'ArrowLeft' ||\n event.key === 'ArrowRight' ||\n event.key === 'ArrowUp' ||\n event.key === 'ArrowDown'\n ) {\n event.stopPropagation();\n }\n };\n\n protected renderControls() {\n const { page, pageCount, totalItems } = this.controller.state;\n const onFirst = page <= 0 || totalItems === 0;\n const onLast = page >= pageCount - 1 || totalItems === 0;\n\n return html`\n <div\n part=\"paginator-controls\"\n role=\"group\"\n aria-label=\"Pagination controls\"\n @keydown=${this.#handleControlsKeydown}\n >\n ${this.renderButton({\n id: 'first',\n icon: 'page-first',\n label: 'Go to first page',\n disabled: onFirst,\n onClick: () => this.controller.firstPage(),\n })}\n ${this.renderButton({\n id: 'previous',\n icon: 'page-previous',\n label: 'Go to previous page',\n disabled: onFirst,\n onClick: () => this.controller.previousPage(),\n })}\n <span part=\"paginator-page\" aria-live=\"polite\">${page + 1} / ${pageCount}</span>\n ${this.renderButton({\n id: 'next',\n icon: 'page-next',\n label: 'Go to next page',\n disabled: onLast,\n onClick: () => this.controller.nextPage(),\n })}\n ${this.renderButton({\n id: 'last',\n icon: 'page-last',\n label: 'Go to last page',\n disabled: onLast,\n onClick: () => this.controller.lastPage(),\n })}\n </div>\n `;\n }\n\n protected override render() {\n if (!this.state) return nothing;\n return html`\n <div part=\"paginator\" role=\"navigation\" aria-label=\"Grid pagination\">\n ${this.renderSizeSelect()} ${this.renderInfo()} ${this.renderControls()}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [ApexGridPaginator.tagName]: ApexGridPaginator<object>;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"paginator.js","sourceRoot":"","sources":["../../src/components/paginator.ts"],"names":[],"mappings":"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","sourcesContent":["import { consume } from '@lit/context';\nimport { html, LitElement, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { gridStateContext, type StateController } from '../controllers/state.js';\nimport { renderIcon } from '../internal/icons.js';\nimport { registerComponent } from '../internal/register.js';\nimport { GRID_PAGINATOR_TAG } from '../internal/tags.js';\nimport { styles } from '../styles/paginator/paginator.css.js';\n\n/**\n * Pagination toolbar rendered beneath the grid body.\n *\n * @remarks\n * Drives {@link PaginationController} on the host grid. The component is purely\n * presentational — page transitions go through the controller so they emit the\n * cancellable `pageChanging` event and the post-update `pageChanged` event.\n *\n * @element apex-grid-paginator\n *\n * @csspart paginator - The root container.\n * @csspart paginator-size - The page-size selector wrapper.\n * @csspart paginator-info - The \"1–25 of 100\" status label.\n * @csspart paginator-controls - The first/prev/next/last button cluster.\n * @csspart paginator-page - The \"Page X of N\" status label.\n */\nexport default class ApexGridPaginator<T extends object> extends LitElement {\n public static get tagName() {\n return GRID_PAGINATOR_TAG;\n }\n\n public static override styles = styles;\n\n /**\n * Registers the `<apex-grid-paginator>` element and its dependencies. Idempotent.\n */\n public static register() {\n registerComponent(ApexGridPaginator);\n }\n\n @consume({ context: gridStateContext, subscribe: true })\n @property({ attribute: false })\n public state!: StateController<T>;\n\n /**\n * The page-size choices rendered in the rows-per-page selector.\n *\n * @remarks\n * Defaults to `[10, 25, 50, 100]`.\n */\n @property({ attribute: false })\n public pageSizeOptions: number[] = [10, 25, 50, 100];\n\n /**\n * Accessible label for the rows-per-page selector.\n *\n * @remarks\n * When unset, falls back to the grid's localized `pagination.rowsPerPage`\n * text (see {@link ApexGrid.localeText}).\n */\n @property({ type: String, attribute: 'page-size-label' })\n public pageSizeLabel?: string;\n\n protected get controller() {\n return this.state.pagination;\n }\n\n protected get sizeLabel() {\n return this.pageSizeLabel ?? this.state.localize('pagination.rowsPerPage');\n }\n\n #handleSizeChange = (event: Event) => {\n event.stopPropagation();\n const next = Number((event.target as HTMLSelectElement).value);\n if (Number.isFinite(next)) {\n this.controller.setPageSize(next);\n }\n };\n\n protected renderSizeSelect() {\n const current = this.controller.pageSize;\n return html`\n <label part=\"paginator-size\">\n <span class=\"visually-hidden\">${this.sizeLabel}</span>\n <select\n aria-label=${this.sizeLabel}\n .value=${String(current)}\n @change=${this.#handleSizeChange}\n >\n ${this.pageSizeOptions.map(\n (size) =>\n html`<option .value=${String(size)} ?selected=${size === current}>${size}</option>`\n )}\n </select>\n </label>\n `;\n }\n\n protected renderInfo() {\n const { page, pageSize, totalItems } = this.controller.state;\n if (totalItems === 0) {\n return html`<span part=\"paginator-info\" aria-live=\"polite\"\n >${this.state.localize('pagination.summaryEmpty')}</span\n >`;\n }\n const start = page * pageSize + 1;\n const end = Math.min(totalItems, (page + 1) * pageSize);\n return html`<span part=\"paginator-info\" aria-live=\"polite\"\n >${this.state.localize('pagination.summary', { start, end, total: totalItems })}</span\n >`;\n }\n\n protected renderButton(opts: {\n id: string;\n icon: string;\n label: string;\n disabled: boolean;\n onClick: () => void;\n }) {\n return html`<button\n part=\"paginator-button\"\n id=${opts.id}\n type=\"button\"\n aria-label=${opts.label}\n title=${opts.label}\n ?disabled=${opts.disabled}\n @click=${opts.onClick}\n >\n ${renderIcon(opts.icon)}\n </button>`;\n }\n\n #handleControlsKeydown = (event: KeyboardEvent) => {\n // Keep arrow-key navigation inside the paginator instead of bubbling into the grid.\n if (\n event.key === 'ArrowLeft' ||\n event.key === 'ArrowRight' ||\n event.key === 'ArrowUp' ||\n event.key === 'ArrowDown'\n ) {\n event.stopPropagation();\n }\n };\n\n protected renderControls() {\n const { page, pageCount, totalItems } = this.controller.state;\n const onFirst = page <= 0 || totalItems === 0;\n const onLast = page >= pageCount - 1 || totalItems === 0;\n\n return html`\n <div\n part=\"paginator-controls\"\n role=\"group\"\n aria-label=${this.state.localize('pagination.controls')}\n @keydown=${this.#handleControlsKeydown}\n >\n ${this.renderButton({\n id: 'first',\n icon: 'page-first',\n label: this.state.localize('pagination.firstPage'),\n disabled: onFirst,\n onClick: () => this.controller.firstPage(),\n })}\n ${this.renderButton({\n id: 'previous',\n icon: 'page-previous',\n label: this.state.localize('pagination.previousPage'),\n disabled: onFirst,\n onClick: () => this.controller.previousPage(),\n })}\n <span part=\"paginator-page\" aria-live=\"polite\">${page + 1} / ${pageCount}</span>\n ${this.renderButton({\n id: 'next',\n icon: 'page-next',\n label: this.state.localize('pagination.nextPage'),\n disabled: onLast,\n onClick: () => this.controller.nextPage(),\n })}\n ${this.renderButton({\n id: 'last',\n icon: 'page-last',\n label: this.state.localize('pagination.lastPage'),\n disabled: onLast,\n onClick: () => this.controller.lastPage(),\n })}\n </div>\n `;\n }\n\n protected override render() {\n if (!this.state) return nothing;\n return html`\n <div part=\"paginator\" role=\"navigation\" aria-label=${this.state.localize('pagination.label')}>\n ${this.renderSizeSelect()} ${this.renderInfo()} ${this.renderControls()}\n </div>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n [ApexGridPaginator.tagName]: ApexGridPaginator<object>;\n }\n}\n"]}
|
package/components/row.d.ts
CHANGED
|
@@ -23,6 +23,12 @@ export default class ApexGridRow<T extends object> extends LitElement {
|
|
|
23
23
|
selected: boolean;
|
|
24
24
|
/** Reflects current expansion state so SCSS can rotate the chevron. */
|
|
25
25
|
expanded: boolean;
|
|
26
|
+
/** Reflects pointer-drag state (row reorder) so SCSS can dim the source. */
|
|
27
|
+
dragging: boolean;
|
|
28
|
+
/** Reflects keyboard-grab state (row reorder) so SCSS can outline the row. */
|
|
29
|
+
grabbed: boolean;
|
|
30
|
+
/** Reveal the spreadsheet row-number gutter cell (transient formula coordinate hint). */
|
|
31
|
+
coordinateHints: boolean;
|
|
26
32
|
/** The column key currently being edited in this row, or `null`. */
|
|
27
33
|
editingKey: Keys<T> | null;
|
|
28
34
|
/**
|
|
@@ -31,13 +37,35 @@ export default class ApexGridRow<T extends object> extends LitElement {
|
|
|
31
37
|
* for the community grid.
|
|
32
38
|
*/
|
|
33
39
|
decorationVersion: number;
|
|
40
|
+
/**
|
|
41
|
+
* Reactive token from {@link EditingController.validationVersion}, forwarded to
|
|
42
|
+
* each cell so a validation-only change re-renders the row's cells (toggling
|
|
43
|
+
* `aria-invalid` and the inline error node). Stays `0` until the first
|
|
44
|
+
* validation failure.
|
|
45
|
+
*/
|
|
46
|
+
validationVersion: number;
|
|
34
47
|
connectedCallback(): void;
|
|
48
|
+
disconnectedCallback(): void;
|
|
35
49
|
/**
|
|
36
50
|
* The number of "chrome" rows (header + filter) above the body. Used to
|
|
37
51
|
* derive `aria-rowindex` from {@link index}. Set by the parent grid.
|
|
38
52
|
*/
|
|
39
53
|
ariaRowOffset: number;
|
|
40
54
|
protected willUpdate(): void;
|
|
55
|
+
/**
|
|
56
|
+
* Leading row-number gutter cell (transient spreadsheet coordinate hint). Shown
|
|
57
|
+
* only while `coordinateHints` is on; pinned rows render an empty spacer (their
|
|
58
|
+
* band-local index is not a meaningful A1 row number) so the track stays
|
|
59
|
+
* aligned. Presentational: the accessible row index is `aria-rowindex`.
|
|
60
|
+
*/
|
|
61
|
+
protected renderRowNumber(): import("lit-html").TemplateResult<1> | typeof nothing;
|
|
62
|
+
/**
|
|
63
|
+
* Leading drag-handle (grip) cell. Rendered only in handle mode; pinned rows
|
|
64
|
+
* get an empty spacer so the grid track stays aligned. The cell is
|
|
65
|
+
* presentational (`aria-hidden`) — the accessible reorder path is the keyboard
|
|
66
|
+
* grab flow, not this pointer affordance.
|
|
67
|
+
*/
|
|
68
|
+
protected renderReorderHandle(): import("lit-html").TemplateResult<1> | typeof nothing;
|
|
41
69
|
protected renderExpansionToggle(colindex: number): import("lit-html").TemplateResult<1> | typeof nothing;
|
|
42
70
|
protected renderDetailPanel(): import("lit-html").TemplateResult<1> | typeof nothing;
|
|
43
71
|
protected renderSelectionCell(colindex: number): import("lit-html").TemplateResult<1> | typeof nothing;
|
package/components/row.js
CHANGED
|
@@ -14,6 +14,20 @@ import { GRID_ROW_TAG } from '../internal/tags.js';
|
|
|
14
14
|
import { getPinEdge } from '../internal/utils.js';
|
|
15
15
|
import { styles } from '../styles/body-row/body-row.css.js';
|
|
16
16
|
import ApexGridCell from './cell.js';
|
|
17
|
+
const GRIP_ICON = html `<svg
|
|
18
|
+
part="reorder-grip"
|
|
19
|
+
viewBox="0 0 16 16"
|
|
20
|
+
width="16"
|
|
21
|
+
height="16"
|
|
22
|
+
aria-hidden="true"
|
|
23
|
+
>
|
|
24
|
+
<circle cx="6" cy="3.5" r="1.25" />
|
|
25
|
+
<circle cx="10" cy="3.5" r="1.25" />
|
|
26
|
+
<circle cx="6" cy="8" r="1.25" />
|
|
27
|
+
<circle cx="10" cy="8" r="1.25" />
|
|
28
|
+
<circle cx="6" cy="12.5" r="1.25" />
|
|
29
|
+
<circle cx="10" cy="12.5" r="1.25" />
|
|
30
|
+
</svg>`;
|
|
17
31
|
export default class ApexGridRow extends LitElement {
|
|
18
32
|
constructor() {
|
|
19
33
|
super(...arguments);
|
|
@@ -22,9 +36,40 @@ export default class ApexGridRow extends LitElement {
|
|
|
22
36
|
this.index = -1;
|
|
23
37
|
this.selected = false;
|
|
24
38
|
this.expanded = false;
|
|
39
|
+
this.dragging = false;
|
|
40
|
+
this.grabbed = false;
|
|
41
|
+
this.coordinateHints = false;
|
|
25
42
|
this.editingKey = null;
|
|
26
43
|
this.decorationVersion = 0;
|
|
44
|
+
this.validationVersion = 0;
|
|
27
45
|
this.#presented = null;
|
|
46
|
+
this.#dragStartX = 0;
|
|
47
|
+
this.#dragStartY = 0;
|
|
48
|
+
this.#handleReorderPointerDown = (event) => {
|
|
49
|
+
const reorder = this.state?.rowReorder;
|
|
50
|
+
if (!reorder?.enabled || event.button !== 0 || !this.data)
|
|
51
|
+
return;
|
|
52
|
+
if (this.state.rowPin.isPinned(this.data))
|
|
53
|
+
return;
|
|
54
|
+
const path = event.composedPath();
|
|
55
|
+
const onHandle = path.some((node) => node instanceof Element && (node.getAttribute?.('part') ?? '').includes('reorder-handle'));
|
|
56
|
+
if (reorder.handleMode) {
|
|
57
|
+
if (!onHandle)
|
|
58
|
+
return;
|
|
59
|
+
event.preventDefault();
|
|
60
|
+
event.stopPropagation();
|
|
61
|
+
}
|
|
62
|
+
else {
|
|
63
|
+
const target = path[0];
|
|
64
|
+
if (target instanceof Element &&
|
|
65
|
+
target.closest?.('input, button, a, select, textarea, [data-apex-editor]')) {
|
|
66
|
+
return;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
this.#dragStartX = event.clientX;
|
|
70
|
+
this.#dragStartY = event.clientY;
|
|
71
|
+
reorder.armPointerDrag(this.data, () => this.#captureGhost(this.#dragStartX, this.#dragStartY), event);
|
|
72
|
+
};
|
|
28
73
|
this.ariaRowOffset = 1;
|
|
29
74
|
}
|
|
30
75
|
static get tagName() {
|
|
@@ -38,10 +83,30 @@ export default class ApexGridRow extends LitElement {
|
|
|
38
83
|
return Array.from(this._cells);
|
|
39
84
|
}
|
|
40
85
|
#presented;
|
|
86
|
+
#dragStartX;
|
|
87
|
+
#dragStartY;
|
|
88
|
+
#handleReorderPointerDown;
|
|
89
|
+
#captureGhost(clientX, clientY) {
|
|
90
|
+
const rect = this.getBoundingClientRect();
|
|
91
|
+
const cells = this.cells.map((cell) => {
|
|
92
|
+
const el = cell;
|
|
93
|
+
return {
|
|
94
|
+
text: (el.textContent ?? '').replace(/\s+/g, ' ').trim(),
|
|
95
|
+
width: el.getBoundingClientRect().width,
|
|
96
|
+
align: getComputedStyle(el).textAlign,
|
|
97
|
+
};
|
|
98
|
+
});
|
|
99
|
+
return { rect, clientX, clientY, cells };
|
|
100
|
+
}
|
|
41
101
|
connectedCallback() {
|
|
42
102
|
super.connectedCallback();
|
|
43
103
|
this.setAttribute('exportparts', 'cell');
|
|
44
104
|
this.setAttribute('role', 'row');
|
|
105
|
+
this.addEventListener('pointerdown', this.#handleReorderPointerDown);
|
|
106
|
+
}
|
|
107
|
+
disconnectedCallback() {
|
|
108
|
+
this.removeEventListener('pointerdown', this.#handleReorderPointerDown);
|
|
109
|
+
super.disconnectedCallback();
|
|
45
110
|
}
|
|
46
111
|
willUpdate() {
|
|
47
112
|
this.setAttribute('aria-rowindex', String(this.index + this.ariaRowOffset + 1));
|
|
@@ -94,6 +159,23 @@ export default class ApexGridRow extends LitElement {
|
|
|
94
159
|
}
|
|
95
160
|
}
|
|
96
161
|
}
|
|
162
|
+
renderRowNumber() {
|
|
163
|
+
if (!this.coordinateHints)
|
|
164
|
+
return nothing;
|
|
165
|
+
const pinned = Boolean(this.state?.rowPin?.isPinned(this.data));
|
|
166
|
+
return html `<div part="row-number-cell" data-pinned="start" aria-hidden="true">
|
|
167
|
+
${pinned ? nothing : html `<span part="row-number">${this.index + 1}</span>`}
|
|
168
|
+
</div>`;
|
|
169
|
+
}
|
|
170
|
+
renderReorderHandle() {
|
|
171
|
+
const reorder = this.state?.rowReorder;
|
|
172
|
+
if (!reorder?.showHandleColumn)
|
|
173
|
+
return nothing;
|
|
174
|
+
const draggable = !this.state?.rowPin?.isPinned(this.data);
|
|
175
|
+
return html `<div part="reorder-handle-cell" data-pinned="start" aria-hidden="true">
|
|
176
|
+
${draggable ? html `<span part="reorder-handle">${GRIP_ICON}</span>` : nothing}
|
|
177
|
+
</div>`;
|
|
178
|
+
}
|
|
97
179
|
renderExpansionToggle(colindex) {
|
|
98
180
|
const expansion = this.state?.expansion;
|
|
99
181
|
if (!expansion?.showToggleColumn)
|
|
@@ -115,7 +197,7 @@ export default class ApexGridRow extends LitElement {
|
|
|
115
197
|
<button
|
|
116
198
|
type="button"
|
|
117
199
|
part="expansion-toggle"
|
|
118
|
-
aria-label=${expanded ? '
|
|
200
|
+
aria-label=${expanded ? this.state.localize('row.collapse') : this.state.localize('row.expand')}
|
|
119
201
|
aria-expanded=${expanded ? 'true' : 'false'}
|
|
120
202
|
?disabled=${!canExpand}
|
|
121
203
|
@click=${handleClick}
|
|
@@ -151,7 +233,7 @@ export default class ApexGridRow extends LitElement {
|
|
|
151
233
|
rowIndex: this.index,
|
|
152
234
|
parent: this.state.host,
|
|
153
235
|
});
|
|
154
|
-
return html `<div part="detail-panel" role="region" aria-label
|
|
236
|
+
return html `<div part="detail-panel" role="region" aria-label=${this.state.localize('row.detail')}>${content}</div>`;
|
|
155
237
|
}
|
|
156
238
|
renderSelectionCell(colindex) {
|
|
157
239
|
if (!this.state?.selection.showCheckboxColumn)
|
|
@@ -184,7 +266,7 @@ export default class ApexGridRow extends LitElement {
|
|
|
184
266
|
<input
|
|
185
267
|
type="checkbox"
|
|
186
268
|
part="selection-checkbox"
|
|
187
|
-
aria-label
|
|
269
|
+
aria-label=${this.state.localize('row.select')}
|
|
188
270
|
.checked=${selected}
|
|
189
271
|
@click=${handleClick}
|
|
190
272
|
@change=${handleChange}
|
|
@@ -204,6 +286,8 @@ export default class ApexGridRow extends LitElement {
|
|
|
204
286
|
const selectionCol = this.state?.selection.showCheckboxColumn ? ++colCursor : 0;
|
|
205
287
|
const expansionCol = this.state?.expansion.showToggleColumn ? ++colCursor : 0;
|
|
206
288
|
return html `
|
|
289
|
+
${this.renderRowNumber()}
|
|
290
|
+
${this.renderReorderHandle()}
|
|
207
291
|
${this.renderSelectionCell(selectionCol)}
|
|
208
292
|
${this.renderExpansionToggle(expansionCol)}
|
|
209
293
|
${repeat(this.columns, (column) => String(column.key), (column, colIndex) => {
|
|
@@ -227,6 +311,7 @@ export default class ApexGridRow extends LitElement {
|
|
|
227
311
|
.value=${this.data[column.key]}
|
|
228
312
|
.colindex=${ariaColindex}
|
|
229
313
|
.decorationVersion=${this.decorationVersion}
|
|
314
|
+
.validationVersion=${this.validationVersion}
|
|
230
315
|
></apex-grid-cell>`;
|
|
231
316
|
})}
|
|
232
317
|
${this.renderDetailPanel()}
|
|
@@ -261,12 +346,24 @@ __decorate([
|
|
|
261
346
|
__decorate([
|
|
262
347
|
property({ type: Boolean, reflect: true })
|
|
263
348
|
], ApexGridRow.prototype, "expanded", void 0);
|
|
349
|
+
__decorate([
|
|
350
|
+
property({ type: Boolean, reflect: true })
|
|
351
|
+
], ApexGridRow.prototype, "dragging", void 0);
|
|
352
|
+
__decorate([
|
|
353
|
+
property({ type: Boolean, reflect: true })
|
|
354
|
+
], ApexGridRow.prototype, "grabbed", void 0);
|
|
355
|
+
__decorate([
|
|
356
|
+
property({ type: Boolean })
|
|
357
|
+
], ApexGridRow.prototype, "coordinateHints", void 0);
|
|
264
358
|
__decorate([
|
|
265
359
|
property({ attribute: false })
|
|
266
360
|
], ApexGridRow.prototype, "editingKey", void 0);
|
|
267
361
|
__decorate([
|
|
268
362
|
property({ attribute: false, type: Number })
|
|
269
363
|
], ApexGridRow.prototype, "decorationVersion", void 0);
|
|
364
|
+
__decorate([
|
|
365
|
+
property({ attribute: false, type: Number })
|
|
366
|
+
], ApexGridRow.prototype, "validationVersion", void 0);
|
|
270
367
|
__decorate([
|
|
271
368
|
property({ attribute: false, type: Number })
|
|
272
369
|
], ApexGridRow.prototype, "ariaRowOffset", void 0);
|