web/dataTable
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): restore missing .dt-cell-selected CSS styles

Browse Source
This commit is contained in:
AI Engineer 2026-05-25 12:25:32 +08:00
parent 1d7b429b14
commit 4a06d906ce
1 changed files with 4 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/index.js
View File

@ -238,7 +238,7 @@ Component.register('DataTable', container => {
container.onMainMouseDown = e => { container.onMainMouseDown = e => {
const cell = e.target.closest('.dt-cell'), row = cell?.closest('.dt-row'); const cell = e.target.closest('.dt-cell'), row = cell?.closest('.dt-row');
if (!row || row.classList.contains('dt-header-row')) return; if (!row || row.classList.contains('dt-header-row')) return;
const fIdx = cell.dataset.fidx ? parseInt(cell.dataset.fidx) : Array.from(row.children).indexOf(cell); const fIdx = cell.dataset.fidx ? parseInt(cell.dataset.fidx) : Array.from(row.querySelectorAll('.dt-cell')).indexOf(cell);
const rIdx = row._ref?.rIdx ?? Array.from(container.querySelectorAll('.dt-body-row')).indexOf(row); const rIdx = row._ref?.rIdx ?? Array.from(container.querySelectorAll('.dt-body-row')).indexOf(row);
selection.startSelect(rIdx + state._listStartIndex, fIdx, e); selection.startSelect(rIdx + state._listStartIndex, fIdx, e);
}; };
@ -247,7 +247,7 @@ Component.register('DataTable', container => {
if (state.isSelecting) { if (state.isSelecting) {
const cell = e.target.closest('.dt-cell'), row = cell?.closest('.dt-row'); const cell = e.target.closest('.dt-cell'), row = cell?.closest('.dt-row');
if (row && !row.classList.contains('dt-header-row')) { if (row && !row.classList.contains('dt-header-row')) {
const fIdx = cell.dataset.fidx ? parseInt(cell.dataset.fidx) : Array.from(row.children).indexOf(cell); const fIdx = cell.dataset.fidx ? parseInt(cell.dataset.fidx) : Array.from(row.querySelectorAll('.dt-cell')).indexOf(cell);
const rIdx = row._ref?.rIdx ?? Array.from(container.querySelectorAll('.dt-body-row')).indexOf(row); const rIdx = row._ref?.rIdx ?? Array.from(container.querySelectorAll('.dt-body-row')).indexOf(row);
selection.updateSelect(rIdx + state._listStartIndex, fIdx); selection.updateSelect(rIdx + state._listStartIndex, fIdx);
} }
@ -257,7 +257,7 @@ Component.register('DataTable', container => {
container.onMainDblClick = e => { container.onMainDblClick = e => {
const cell = e.target.closest('.dt-cell'), row = cell?.closest('.dt-row'); const cell = e.target.closest('.dt-cell'), row = cell?.closest('.dt-row');
if (row && !row.classList.contains('dt-header-row')) { if (row && !row.classList.contains('dt-header-row')) {
const item = row._ref?.item, fIdx = cell.dataset.fidx ? parseInt(cell.dataset.fidx) : Array.from(row.children).indexOf(cell); const item = row._ref?.item, fIdx = cell.dataset.fidx ? parseInt(cell.dataset.fidx) : Array.from(row.querySelectorAll('.dt-cell')).indexOf(cell);
if (item && state.fields[fIdx]) container.editCell(item, state.fields[fIdx], cell); if (item && state.fields[fIdx]) container.editCell(item, state.fields[fIdx], cell);
} }
}; };
@ -350,6 +350,7 @@ Component.register('DataTable', container => {
.dt-row, .dt-header-row { display: grid; grid-template-columns: var(--dt-grid-template); width: var(--dt-row-width, max-content); min-width: 100%; height: 40px; contain: paint layout; } .dt-row, .dt-header-row { display: grid; grid-template-columns: var(--dt-grid-template); width: var(--dt-row-width, max-content); min-width: 100%; height: 40px; contain: paint layout; }
.dt-header-row { background-color: var(--bs-tertiary-bg); border-bottom: 1px solid var(--bs-border-color); } .dt-header-row { background-color: var(--bs-tertiary-bg); border-bottom: 1px solid var(--bs-border-color); }
.dt-cell { background: inherit; white-space: nowrap; flex-shrink: 0; contain: content; } .dt-cell { background: inherit; white-space: nowrap; flex-shrink: 0; contain: content; }
.dt-cell-selected { background-color: rgba(var(--bs-primary-rgb), 0.15) !important; outline: 1px solid var(--bs-primary); outline-offset: -1px; }
.dt-body-row:hover { background-color: var(--bs-secondary-bg) !important; } .dt-body-row:hover { background-color: var(--bs-secondary-bg) !important; }
.header-cell .header-menu-btn { opacity: 0; transition: opacity 0.2s; } .header-cell .header-menu-btn { opacity: 0; transition: opacity 0.2s; }
.header-cell:hover .header-menu-btn { opacity: 1; } .header-cell:hover .header-menu-btn { opacity: 1; }