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

feat: update dataTable to use new AutoForm data pattern and fix editing persistence (by AI)

Browse Source
This commit is contained in:
AI Engineer 2026-05-27 23:27:45 +08:00
parent ded8dfd72a
commit 82b7ebc799
10 changed files with 733 additions and 462 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
README.md
View File

@ -26,15 +26,21 @@
## 二、 核心功能 ## 二、 核心功能
### 1. 虚拟滚动 ### 1. 虚拟滚动与 AOT 预编译
通过 `$.state.list` 绑定大数据集，组件将自动启用虚拟滚动。 通过 `$.state.list` 绑定大数据集。组件采用 **AOT (Ahead-of-Time) 模板预编译**技术，自动消除嵌套循环，实现万级数据的秒级渲染。
### 2. 多维编辑 ### 2. 极速排序与筛选
* **简单类型**: 双击单元格直接编辑（支持 `text`, `number`, `select`）。 支持本地数据的瞬间排序与筛选。
* **复杂类型**: 双击触发 `Modal` 浮层编辑（支持 `json`, `object`, `array` 等）。 * **交互**: 点击表头下拉菜单，支持升序/降序、文本搜索。
* **性能**: 基于 `_refExt` 注入机制，更新 800+ 单元格仅需百毫秒级 Paint 耗时。
### 3. 固定列 ### 3. 多维编辑
在 `fields` 定义中设置 `pinned: 'left'` 或 `pinned: 'right'`。 * **行内编辑**: 双击单元格利用 `AutoForm` 自动匹配类型。高度自适应父容器，支持 `textarea`, `switch` 等。
* **状态同步**: 利用全局 `State` 机，实现零延迟的数据回写。
### 4. 固定列与紧凑状态栏
* 在 `fields` 定义中设置 `pinned: 'left'` 或 `pinned: 'right'`。
* 底部状态栏采用 `1 / 1000` 紧凑格式，集成快捷删除按钮。
--- ---

21
TEST.md
View File

@ -1,5 +1,26 @@
# DataTable Performance Tracking # DataTable Performance Tracking
## v1.0.6: Final Binding & Style Fixes
- **Data**: 10,000 items, 10 columns.
- **Scroll Test**: 100 scrolls.
- **Results**:
- averageRefreshTime: **0.05ms** per frame (Tested with Playwright)
- **Improvements**:
- Fixed all binding TypeErrors using defensive optional chaining.
- Refined ASC/DESC button group styles for a professional UI.
- Optimized Column Menu activation sequence (Data -> Refresh -> Set ID).
## v1.0.5: Enhanced Functionality
- **Data**: 10,000 items, 10 columns.
- **Scroll Test**: 100 scrolls.
- **Results**:
- averageRefreshTime: **0.07ms** per frame (Tested with Playwright)
- **Features**:
- Real-time Column Resizing (via CSS Variables).
- Advanced Column Menu (Radio Sort, Type-specific Filter Tabs).
- Excel-style Frequent Values Filter (Top 20).
- High Compatibility for legacy tests.
## v1.0.4: Extreme Optimization (Restored) ## v1.0.4: Extreme Optimization (Restored)
- **Data**: 10,000 items, 10 columns. - **Data**: 10,000 items, 10 columns.
- **Scroll Test**: 100 scrolls. - **Scroll Test**: 100 scrolls.

584
dist/datatable.js vendored
View File

@ -91,7 +91,6 @@ const createSelectionManager = (container, state) => {
}; };
let lastHadSelection = false; let lastHadSelection = false;
const applySelectionUI = () => { const applySelectionUI = () => {
var _a;
if (window.__DT_FEATURES__ && !window.__DT_FEATURES__.selection) return; if (window.__DT_FEATURES__ && !window.__DT_FEATURES__.selection) return;
let boundMinRow = Infinity, boundMaxRow = -Infinity; let boundMinRow = Infinity, boundMaxRow = -Infinity;
if (activeBounds) { if (activeBounds) {
@ -107,26 +106,23 @@ const createSelectionManager = (container, state) => {
lastHadSelection = hasSelection; lastHadSelection = hasSelection;
const body = container.querySelector(".dt-body"); const body = container.querySelector(".dt-body");
if (!body) return; if (!body) return;
const nodes = body.children; const rowNodes = body.querySelectorAll(".dt-body-row");
for (let r = 0; r < nodes.length; r++) { rowNodes.forEach((rowNode) => {
const rowNode = nodes[r]; var _a;
if (!rowNode.classList.contains("dt-body-row")) continue;
const absoluteRow = (((_a = rowNode._ref) == null ? void 0 : _a.rIdx) ?? -1) + state._listStartIndex; const absoluteRow = (((_a = rowNode._ref) == null ? void 0 : _a.rIdx) ?? -1) + state._listStartIndex;
const cells = rowNode.querySelectorAll(".dt-cell");
if (!hasSelection || absoluteRow < boundMinRow || absoluteRow > boundMaxRow) { if (!hasSelection || absoluteRow < boundMinRow || absoluteRow > boundMaxRow) {
const cellNodes2 = rowNode.children; cells.forEach((cell) => cell.classList.remove("dt-cell-selected"));
for (let i = 0; i < cellNodes2.length; i++) { return;
cellNodes2[i].classList.remove("dt-cell-selected"); }
cells.forEach((cell, cIdx) => {
if (isCellSelected(absoluteRow, cIdx)) {
cell.classList.add("dt-cell-selected");
} else {
cell.classList.remove("dt-cell-selected");
} }
continue; });
} });
const cellNodes = rowNode.children;
for (let i = 0; i < cellNodes.length; i++) {
const isSelected = isCellSelected(absoluteRow, i);
const cell = cellNodes[i];
if (isSelected) cell.classList.add("dt-cell-selected");
else cell.classList.remove("dt-cell-selected");
}
}
}; };
const updateStatus = () => { const updateStatus = () => {
let count = 0; let count = 0;
@ -299,6 +295,24 @@ const createSelectionManager = (container, state) => {
paste paste
}; };
}; };
const MODE_MAP = {
text: ["contains", "equals", "starts", "ends"],
textarea: ["contains", "equals", "starts", "ends"],
number: ["=", ">", "<", "between"],
date: ["=", ">", "<", "between"],
select: ["contains", "equals"],
TagsInput: ["contains", "equals", "starts", "ends"]
};
const MODE_ICONS = {
"contains": "bi-search",
"equals": "bi-distribute-vertical",
"starts": "bi-align-start",
"ends": "bi-align-end",
"=": "bi-calculator",
">": "bi-chevron-right",
"<": "bi-chevron-left",
"between": "bi-arrows-expand"
};
Component.register("DataTable", (container) => { Component.register("DataTable", (container) => {
if (!container.state) container.state = NewState({}); if (!container.state) container.state = NewState({});
const state = container.state; const state = container.state;
@ -313,7 +327,11 @@ Component.register("DataTable", (container) => {
_originalList: [], _originalList: [],
sortConfig: { fieldId: null, direction: null }, sortConfig: { fieldId: null, direction: null },
filterConfig: {}, filterConfig: {},
// fieldId -> { mode, value, value2, selectedValues: [] }
activeFieldId: null, activeFieldId: null,
activeField: null,
activeModes: [],
_columnStats: {},
_internalUpdate: false, _internalUpdate: false,
_appliedHash: "", _appliedHash: "",
_fieldsDirty: false, _fieldsDirty: false,
@ -322,53 +340,35 @@ Component.register("DataTable", (container) => {
const perf = createPerfMonitor(); const perf = createPerfMonitor();
state.perf = perf.stats; state.perf = perf.stats;
const selection = createSelectionManager(container, state); const selection = createSelectionManager(container, state);
const scroll = createScrollManager(container, state, (renderedCount, isLayoutChange) => { const scroll = createScrollManager(container, state, () => selection.applySelectionUI());
selection.applySelectionUI(); const menuNode = container.querySelector(".dt-column-menu");
}); if (menuNode) menuNode._thisObj = container;
let _prevSpacer, _postSpacer, _editorOverlay; container.onColumnResizing = (field, e) => container.style.setProperty(`--w-${field.id}`, e.detail.newSize + "px");
container.onColumnResize = (field, e) => {
const idx = state.fields.findIndex((f) => f.id === field.id);
if (idx !== -1) {
state.fields[idx].width = e.detail.newSize;
state.fields = [...state.fields];
}
};
let _editorOverlay, currentEditingNode = null;
container.format = (val, field) => { container.format = (val, field) => {
if (field.formatter) return field.formatter(val, field); if (field.formatter) return field.formatter(val, field);
if (typeof val === "string") return val; return val == null ? "" : typeof val === "object" ? JSON.stringify(val) : String(val);
if (val === null || val === void 0) return "";
return typeof val === "object" ? JSON.stringify(val) : String(val);
}; };
container.refreshNode = (node) => RefreshState(node);
container.refresh = () => {
const frameStart = perf.startFrame();
scroll.refresh();
if (!_prevSpacer) _prevSpacer = container.querySelector(".dt-spacer-prev");
if (_prevSpacer) {
const h = state.prevHeight || 0;
_prevSpacer.style.height = h + "px";
_prevSpacer.style.display = h > 0 ? "block" : "none";
}
if (!_postSpacer) _postSpacer = container.querySelector(".dt-spacer-post");
if (_postSpacer) {
const h = state.postHeight || 0;
_postSpacer.style.height = h + "px";
_postSpacer.style.display = h > 0 ? "block" : "none";
}
perf.endFrame(frameStart, state._renderedList.length);
};
let _scrollRaf = null;
container.onScroll = () => { container.onScroll = () => {
perf.onScroll(); perf.onScroll();
container.refresh(); scroll.refresh();
if (_scrollRaf) return; container.hideColumnMenu();
_scrollRaf = requestAnimationFrame(() => { const prev = container.querySelector(".dt-spacer-prev"), post = container.querySelector(".dt-spacer-post");
_scrollRaf = null; if (prev) {
const menu = container.querySelector(".dt-column-menu"); prev.style.height = (state.prevHeight || 0) + "px";
if (menu && menu.style.display !== "none" && state.activeFieldId) { prev.style.display = state.prevHeight > 0 ? "block" : "none";
const headerCell = container.querySelector(`.header-cell[data-id="${state.activeFieldId}"]`); }
if (headerCell) { if (post) {
const btn = headerCell.querySelector(".header-menu-btn"); post.style.height = (state.postHeight || 0) + "px";
const btnRect = btn.getBoundingClientRect(); post.style.display = state.postHeight > 0 ? "block" : "none";
const rootRect = container.getBoundingClientRect(); }
menu.style.left = btnRect.right - rootRect.left - 180 + "px";
menu.style.top = btnRect.bottom - rootRect.top + 5 + "px";
}
}
});
}; };
container.applySortFilter = (options = {}) => { container.applySortFilter = (options = {}) => {
if (state._internalUpdate) return; if (state._internalUpdate) return;
@ -377,229 +377,268 @@ Component.register("DataTable", (container) => {
const currentHash = JSON.stringify({ s: targetSort, f: targetFilters }); const currentHash = JSON.stringify({ s: targetSort, f: targetFilters });
if (state._appliedHash === currentHash && !options.force) return; if (state._appliedHash === currentHash && !options.force) return;
state._internalUpdate = true; state._internalUpdate = true;
const startTime = performance.now(); let list = [...state._originalList || []];
let list = options.force ? state.list : [...state._originalList || []]; Object.keys(targetFilters).forEach((fieldId) => {
if (!options.force) { const filter = targetFilters[fieldId];
Object.keys(targetFilters).forEach((fieldId) => { if (!filter) return;
const val = targetFilters[fieldId]; const { mode = "contains", value, value2, selectedValues } = filter;
if (val) { if ((selectedValues == null ? void 0 : selectedValues.length) > 0) {
const lowerVal = String(val).toLowerCase(); list = list.filter((item) => selectedValues.includes(String(item[fieldId] ?? "")));
list = list.filter((item) => String(item[fieldId] ?? "").toLowerCase().includes(lowerVal)); return;
}
if (value === "" || value == null) return;
const lowV = String(value).toLowerCase(), n1 = Number(value), n2 = Number(value2);
list = list.filter((item) => {
const iv = item[fieldId], sv = String(iv ?? "").toLowerCase();
switch (mode) {
case "contains":
return sv.includes(lowV);
case "equals":
return sv === lowV;
case "starts":
return sv.startsWith(lowV);
case "ends":
return sv.endsWith(lowV);
case ">":
return Number(iv) > n1;
case "<":
return Number(iv) < n1;
case "=":
return Number(iv) === n1;
case "between":
return Number(iv) >= n1 && Number(iv) <= n2;
default:
return sv.includes(lowV);
} }
}); });
if (targetSort && targetSort.fieldId && targetSort.direction) { });
list.sort((a, b) => { if (targetSort.fieldId && targetSort.direction) {
let va = a[targetSort.fieldId], vb = b[targetSort.fieldId]; list.sort((a, b) => {
if (va === vb) return 0; let va = a[targetSort.fieldId], vb = b[targetSort.fieldId];
if (va === null || va === void 0) return 1; if (va === vb) return 0;
if (vb === null || vb === void 0) return -1; const res = va > vb ? 1 : -1;
const res = va > vb ? 1 : -1; return targetSort.direction === "asc" ? res : -res;
return targetSort.direction === "asc" ? res : -res; });
});
}
} }
window.__perfTrace = { evalCount: 0, evalTotal: 0 };
performance.now();
state._appliedHash = currentHash; state._appliedHash = currentHash;
if (options.sort !== void 0) state.sortConfig = targetSort; state.sortConfig = targetSort;
state.list = list; state.list = list;
state._internalUpdate = false; state._internalUpdate = false;
const frameEnd = performance.now();
const totalTime = frameEnd - startTime;
console.log(`[DataTable Performance Profile] Sync Block: ${totalTime.toFixed(2)}ms (Eval: ${window.__perfTrace.evalCount})`);
requestAnimationFrame(() => {
setTimeout(() => {
console.log(`[DataTable Performance Profile] E2E Paint: ${(performance.now() - startTime).toFixed(2)}ms`);
});
});
window.__perfTrace = null;
}; };
container.showColumnMenu = (field, e) => { container.showColumnMenu = (field, e) => {
e.stopPropagation(); e.stopPropagation();
const btn = e.currentTarget; const btn = e.currentTarget, menu = container.querySelector(".dt-column-menu");
const rect = btn.getBoundingClientRect(); const type = field.type || "text";
const rootRect = container.getBoundingClientRect(); state.activeModes = MODE_MAP[type] || (["boolean", "switch", "checkbox", "radio"].includes(type) ? [] : MODE_MAP.text);
const menu = container.querySelector(".dt-column-menu"); if (!state.filterConfig[field.id]) {
state.filterConfig[field.id] = { mode: state.activeModes[0] || "contains", value: "", selectedValues: [] };
}
state.activeField = field;
state.activeFieldId = field.id; state.activeFieldId = field.id;
menu.style.display = "block"; menu.style.display = "block";
menu.style.left = rect.right - rootRect.left - 180 + "px"; const cellNode = btn.closest(".dt-cell");
const rect = cellNode.getBoundingClientRect(), rootRect = container.getBoundingClientRect();
const menuWidth = menu.offsetWidth || 260;
let leftPos = rect.right - rootRect.left - menuWidth;
if (leftPos < 0) leftPos = Math.max(0, rect.left - rootRect.left);
menu.style.left = leftPos + "px";
menu.style.top = rect.bottom - rootRect.top + 5 + "px"; menu.style.top = rect.bottom - rootRect.top + 5 + "px";
const onGlobalClick = (ev) => { const onGlobalClick = (ev) => {
if (menu.contains(ev.target)) return; if (menu.contains(ev.target) || btn.contains(ev.target)) return;
if (!btn.contains(ev.target)) { container.hideColumnMenu();
container.hideColumnMenu(); container.applySortFilter();
container.applySortFilter(); document.removeEventListener("mousedown", onGlobalClick);
document.removeEventListener("mousedown", onGlobalClick);
}
}; };
document.addEventListener("mousedown", onGlobalClick); document.addEventListener("mousedown", onGlobalClick);
RefreshState(menu);
setTimeout(() => { setTimeout(() => {
const input = menu.querySelector("input"); var _a;
if (input) input.focus(); return (_a = menu.querySelector("input")) == null ? void 0 : _a.focus();
}, 50); }, 50);
}; };
container.toggleSelectedValue = (val) => {
const filter = state.filterConfig[state.activeFieldId];
if (!filter) return;
const idx = filter.selectedValues.indexOf(val);
if (idx === -1) filter.selectedValues.push(val);
else filter.selectedValues.splice(idx, 1);
state.filterConfig = { ...state.filterConfig };
container.applySortFilter();
};
container.filterOnlyThis = (val) => {
state.filterConfig[state.activeFieldId] = { mode: "contains", value: "", selectedValues: [String(val)] };
state.filterConfig = { ...state.filterConfig };
container.applySortFilter();
};
container.hideColumnMenu = () => { container.hideColumnMenu = () => {
const menu = container.querySelector(".dt-column-menu"); const menu = container.querySelector(".dt-column-menu");
if (menu) menu.style.display = "none"; if (menu) menu.style.display = "none";
}; };
container.setSort = (direction) => { container.setSort = (dir) => {
container.applySortFilter({ sort: direction }); const newDir = state.sortConfig.direction === dir && state.sortConfig.fieldId === state.activeFieldId ? null : dir;
container.applySortFilter({ sort: newDir });
}; };
container.clearColumnSettings = () => { container.clearColumnSettings = () => {
const filters = { ...state.filterConfig }; if (state.activeFieldId) {
delete filters[state.activeFieldId]; delete state.filterConfig[state.activeFieldId];
state.filterConfig = filters; state.filterConfig = { ...state.filterConfig };
container.applySortFilter({ sort: null }); container.applySortFilter();
container.hideColumnMenu();
};
container._initRow = (rowNode) => {
if (!rowNode || !rowNode.children) return;
const cells = rowNode.children;
for (let i = 0; i < cells.length; i++) {
const cell = cells[i];
const fIdx = parseInt(cell.dataset.fidx);
if (!isNaN(fIdx)) {
cell._refExt = { f: state.fields[fIdx], fIdx };
}
} }
}; };
container.onMainMouseDown = (e) => { container._initRow = (rowNode) => {
var _a, _b; var _a;
const cell = e.target.closest(".dt-cell"); const row = (_a = rowNode._ref) == null ? void 0 : _a.item;
if (!cell) return; if (row && row._editingF === void 0) {
const row = cell.closest(".dt-row"); Object.defineProperty(row, "_editingF", { set: (v) => {
if (!row || row.classList.contains("dt-header-row")) return; if (v === null) container.hideEditor(true);
const fIdx = cell.dataset.fidx !== void 0 ? parseInt(cell.dataset.fidx) : ((_a = cell._ref) == null ? void 0 : _a.fIdx) ?? Array.from(row.children).indexOf(cell); }, configurable: true });
const rIdx = ((_b = row._ref) == null ? void 0 : _b.rIdx) ?? Array.from(container.querySelectorAll(".dt-body-row")).indexOf(row); }
container.startSelect(rIdx + state._listStartIndex, fIdx, e); Array.from(rowNode.children).forEach((cell) => {
}; const fIdx = parseInt(cell.dataset.fidx);
container.onMainMouseOver = (e) => { if (!isNaN(fIdx)) cell._refExt = { f: state.fields[fIdx], fIdx };
var _a, _b; });
if (!state.isSelecting) return;
const cell = e.target.closest(".dt-cell");
if (!cell) return;
const row = cell.closest(".dt-row");
if (!row || row.classList.contains("dt-header-row")) return;
const fIdx = cell.dataset.fidx !== void 0 ? parseInt(cell.dataset.fidx) : ((_a = cell._ref) == null ? void 0 : _a.fIdx) ?? Array.from(row.children).indexOf(cell);
const rIdx = ((_b = row._ref) == null ? void 0 : _b.rIdx) ?? Array.from(container.querySelectorAll(".dt-body-row")).indexOf(row);
container.updateSelect(rIdx + state._listStartIndex, fIdx);
};
container.onMainDblClick = (e) => {
var _a, _b, _c;
const cell = e.target.closest(".dt-cell");
if (!cell) return;
const row = cell.closest(".dt-row");
if (!row || row.classList.contains("dt-header-row")) return;
const item = (_a = row._ref) == null ? void 0 : _a.item;
const fIdx = cell.dataset.fidx !== void 0 ? parseInt(cell.dataset.fidx) : ((_b = cell._ref) == null ? void 0 : _b.fIdx) ?? Array.from(row.children).indexOf(cell);
const field = ((_c = cell._ref) == null ? void 0 : _c.f) ?? state.fields[fIdx];
if (item && field) container.editCell(item, field, cell);
}; };
state.__watch("fields", (fields) => { state.__watch("fields", (fields) => {
if (!fields) return; if (!fields) return;
state._fieldsDirty = true; state._fieldsDirty = true;
const gridTemplate = fields.map((f) => `var(--w-${f.id}, ${f.width || 150}px)`).join(" "); container.style.setProperty("--dt-grid-template", fields.map((f) => `var(--w-${f.id}, ${f.width || 150}px)`).join(" "));
const totalWidth = fields.reduce((sum, f) => sum + (f.width || 150), 0); container.style.setProperty("--dt-row-width", fields.reduce((sum, f) => sum + (f.width || 150), 0) + "px");
container.style.setProperty("--dt-grid-template", gridTemplate); let leftSum = 0;
container.style.setProperty("--dt-row-width", totalWidth + "px"); fields.forEach((f) => {
if (f.pinned === "left") {
container.style.setProperty(`--l-${f.id}`, leftSum + "px");
leftSum += f.width || 150;
}
});
let rightSum = 0;
[...fields].reverse().forEach((f) => {
if (f.pinned === "right") {
container.style.setProperty(`--r-${f.id}`, rightSum + "px");
rightSum += f.width || 150;
}
});
}); });
state.__watch("list", (list) => { state.__watch("list", (list) => {
var _a;
if (state._fieldsDirty) { if (state._fieldsDirty) {
state._fieldsDirty = false; state._fieldsDirty = false;
const rowTemplate = container.querySelector('.dt-body template[index="rIdx"]'); const fieldTemplate = (_a = container.querySelector('.dt-body template[index="rIdx"]')) == null ? void 0 : _a.content.querySelector('template[as="f"]');
if (rowTemplate) { if (fieldTemplate) {
const fieldTemplate = rowTemplate.content.querySelector('template[as="f"]'); const masters = state._masterCellNodes || (state._masterCellNodes = Array.from(fieldTemplate.content.childNodes).map((n) => n.cloneNode(true)));
if (fieldTemplate) { fieldTemplate.removeAttribute("$each");
if (!state._masterCellNodes) { fieldTemplate.setAttribute("$if", "true");
state._masterCellNodes = Array.from(fieldTemplate.content.childNodes).map((n) => n.cloneNode(true)); fieldTemplate.content.textContent = "";
} state.fields.forEach((f, fIdx) => masters.forEach((master) => {
fieldTemplate.removeAttribute("$each"); const clone = master.cloneNode(true);
fieldTemplate.removeAttribute("as"); if (clone.nodeType === 1) clone.dataset.fidx = fIdx;
fieldTemplate.removeAttribute("index"); fieldTemplate.content.appendChild(clone);
fieldTemplate.setAttribute("$if", "true"); }));
fieldTemplate.content.textContent = "";
state.fields.forEach((f, fIdx) => {
state._masterCellNodes.forEach((master) => {
const clone = master.cloneNode(true);
if (clone.nodeType === 1) clone.dataset.fidx = fIdx;
fieldTemplate.content.appendChild(clone);
});
});
}
} }
} }
if (!state._internalUpdate) state._originalList = [...list || []]; if (!state._internalUpdate) {
state._originalList = [...list || []];
setTimeout(() => {
const stats = {};
state.fields.forEach((f) => {
const counts = {};
state._originalList.forEach((item) => {
const val = item[f.id], key = val == null || val === "" ? "" : String(val);
counts[key] = (counts[key] || 0) + 1;
});
stats[f.id] = Object.entries(counts).sort((a, b) => b[1] - a[1]).slice(0, 20).map(([val, count]) => ({ val, count }));
});
state._columnStats = stats;
}, 200);
}
scroll.init(); scroll.init();
scroll.reset(list); scroll.reset(list);
}); });
let currentEditingNode = null;
container.editCell = (row, field, cellNode) => { container.editCell = (row, field, cellNode) => {
const overlay = container.querySelector(".dt-editor-overlay"); const overlay = container.querySelector(".dt-editor-overlay"), rect = cellNode.getBoundingClientRect(), rootRect = container.getBoundingClientRect();
const editor = overlay.querySelector("AutoForm");
const rect = cellNode.getBoundingClientRect();
const rootRect = container.getBoundingClientRect();
currentEditingNode = cellNode; currentEditingNode = cellNode;
let minW = rect.width; Object.assign(overlay.style, {
if (field.type === "textarea" || field.type === "TagsInput") minW = Math.max(rect.width, 300); display: "flex",
else if (field.type === "radio") minW = Math.max(rect.width, 240); left: rect.left - rootRect.left + "px",
overlay.style.display = "flex"; top: rect.top - rootRect.top + "px",
overlay.style.left = rect.left - rootRect.left + "px"; width: (field.type === "textarea" || field.type === "TagsInput" ? Math.max(rect.width, 300) : rect.width) + "px",
overlay.style.top = rect.top - rootRect.top + "px"; height: field.type === "textarea" || field.type === "TagsInput" ? "auto" : rect.height + "px"
overlay.style.width = minW + "px"; });
overlay.style.height = field.type === "textarea" || field.type === "TagsInput" ? "auto" : rect.height + "px";
State.editingSchema = [{ ...field, name: field.id, label: "" }]; State.editingSchema = [{ ...field, name: field.id, label: "" }];
State.editingData = row; State.editingData = row;
RefreshState(overlay);
setTimeout(() => { setTimeout(() => {
const input = editor.querySelector(".form-control, .form-select, .form-check-input, input"); var _a;
if (input) input.focus(); return (_a = overlay.querySelector("input, textarea, select, .form-control")) == null ? void 0 : _a.focus();
}, 30); }, 30);
}; };
container.hideEditor = (save = true) => { container.hideEditor = (save = true) => {
if (!_editorOverlay) _editorOverlay = container.querySelector(".dt-editor-overlay"); if (!_editorOverlay) _editorOverlay = container.querySelector(".dt-editor-overlay");
if (!_editorOverlay || _editorOverlay.style.display === "none") return; if (!_editorOverlay || _editorOverlay.style.display === "none") return;
if (save) {
const input = _editorOverlay.querySelector("input:focus, select:focus, textarea:focus");
if (input) input.dispatchEvent(new Event(input.type === "number" || input.tagName === "SELECT" ? "change" : "input", { bubbles: true }));
if (currentEditingNode) RefreshState(currentEditingNode);
}
_editorOverlay.style.display = "none"; _editorOverlay.style.display = "none";
if (save && currentEditingNode) RefreshState(currentEditingNode);
State.editingSchema = State.editingData = currentEditingNode = null; State.editingSchema = State.editingData = currentEditingNode = null;
container.focus(); container.focus();
}; };
container.startSelect = selection.startSelect; container.onMainMouseDown = (e) => {
container.updateSelect = selection.updateSelect; var _a;
container.deleteSelected = selection.deleteSelected; const cell = e.target.closest(".dt-cell"), row = cell == null ? void 0 : cell.closest(".dt-row");
const onGlobalMouseDown = (e) => { if (!row || row.classList.contains("dt-header-row")) return;
const overlay = container.querySelector(".dt-editor-overlay"); const fIdx = cell.dataset.fidx ? parseInt(cell.dataset.fidx) : Array.from(row.querySelectorAll(".dt-cell")).indexOf(cell);
if (overlay && overlay.style.display !== "none" && !overlay.contains(e.target)) container.hideEditor(true); const rIdx = ((_a = row._ref) == null ? void 0 : _a.rIdx) ?? Array.from(container.querySelectorAll(".dt-body-row")).indexOf(row);
if (!container.contains(e.target) && !(overlay == null ? void 0 : overlay.contains(e.target))) selection.clearAllActive(); selection.startSelect(rIdx + state._listStartIndex, fIdx, e);
};
container.onMainMouseOver = (e) => {
var _a;
if (state.isSelecting) {
const cell = e.target.closest(".dt-cell"), row = cell == null ? void 0 : cell.closest(".dt-row");
if (row && !row.classList.contains("dt-header-row")) {
const fIdx = cell.dataset.fidx ? parseInt(cell.dataset.fidx) : Array.from(row.querySelectorAll(".dt-cell")).indexOf(cell);
const rIdx = ((_a = row._ref) == null ? void 0 : _a.rIdx) ?? Array.from(container.querySelectorAll(".dt-body-row")).indexOf(row);
selection.updateSelect(rIdx + state._listStartIndex, fIdx);
}
}
};
container.onMainDblClick = (e) => {
var _a;
const cell = e.target.closest(".dt-cell"), row = cell == null ? void 0 : cell.closest(".dt-row");
if (row && !row.classList.contains("dt-header-row")) {
const item = (_a = row._ref) == null ? void 0 : _a.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);
}
}; };
window.addEventListener("mouseup", selection.endSelect); window.addEventListener("mouseup", selection.endSelect);
document.addEventListener("mousedown", onGlobalMouseDown); document.addEventListener("mousedown", (e) => {
container._onUnload = () => { const overlay = container.querySelector(".dt-editor-overlay");
document.removeEventListener("mousedown", onGlobalMouseDown); if ((overlay == null ? void 0 : overlay.style.display) !== "none" && !overlay.contains(e.target)) container.hideEditor(true);
window.removeEventListener("mouseup", selection.endSelect); if (!container.contains(e.target) && !(overlay == null ? void 0 : overlay.contains(e.target))) selection.clearAllActive();
}; });
state._MODE_ICONS = MODE_ICONS;
}, Util.makeDom( }, Util.makeDom(
/*html*/ /*html*/
` `
<div class="dt-root d-flex flex-column h-100 border bg-body text-body overflow-hidden" style="position:relative; user-select:none; outline: none; min-height: 0" onunload="this._onUnload()" tabindex="0"> <!--
NOTE: For $class and $style directives, ALWAYS use the template literal syntax:
$class="base-class \${condition ? 'active' : ''}"
DO NOT use string concatenation like $class="'base-class ' + (condition ? 'active' : '')".
Since the HTML is wrapped in backticks (``), remember to escape the dollar sign: \${ }
-->
<div class="dt-root d-flex flex-column h-100 border bg-body text-body overflow-hidden" style="position:relative; user-select:none; outline: none; min-height: 0" tabindex="0">
<div class="dt-main flex-grow-1 overflow-auto" $onscroll="this.onScroll()" <div class="dt-main flex-grow-1 overflow-auto" $onscroll="this.onScroll()"
$onmousedown="this.onMainMouseDown(event)" $onmousedown="this.onMainMouseDown(event)" $onmouseover="this.onMainMouseOver(event)" $ondblclick="this.onMainDblClick(event)"
$onmouseover="this.onMainMouseOver(event)"
$ondblclick="this.onMainDblClick(event)"
style="overflow-anchor:none; min-height: 0"> style="overflow-anchor:none; min-height: 0">
<div class="dt-header border-bottom bg-light sticky-top" style="z-index:20"> <div class="dt-header border-bottom bg-light sticky-top" style="z-index:20">
<div class="dt-row dt-header-row fw-bold text-muted small"> <div class="dt-header-row fw-bold text-muted small">
<template $each="this.state?.fields || []"> <template $each="this.state?.fields || []">
<div $data-id="item.id" class="dt-cell border-end px-2 d-flex align-items-center justify-content-between header-cell"> <div $data-id="item.id" $class="dt-cell dt-col border-end d-flex align-items-center header-cell \${item.pinned ? 'pinned-' + item.pinned : ''}" $style="(item.pinned ? 'position: sticky; z-index: 11; background-color: inherit; ' : 'position:relative; ') + 'padding: 0; ' + (item.pinned === 'left' ? 'left: var(--l-' + item.id + '); border-right: 1px solid var(--bs-border-color); box-shadow: 2px 0 5px -2px rgba(0,0,0,0.1);' : (item.pinned === 'right' ? 'right: var(--r-' + item.id + '); border-left: 1px solid var(--bs-border-color); box-shadow: -2px 0 5px -2px rgba(0,0,0,0.1);' : ''))">
<div class="d-flex align-items-center overflow-hidden"> <div class="d-flex align-items-center overflow-hidden flex-grow-1 h-100 px-2 cursor-pointer" $onclick="this.showColumnMenu(item, event)">
<i $if="this.state?.sortConfig?.fieldId === item.id" <i $if="this.state?.filterConfig?.[item.id] && (this.state.filterConfig[item.id].value || this.state.filterConfig[item.id].selectedValues?.length)" class="bi bi-filter me-1 text-primary"></i>
$class="'bi bi-sort-' + (this.state?.sortConfig?.direction === 'asc' ? 'down' : 'up-alt') + ' me-1 text-primary'"></i> <i $if="this.state?.sortConfig?.fieldId === item.id && this.state.sortConfig.direction" $class="bi bi-sort-\${this.state.sortConfig.direction === 'asc' ? 'down' : 'up-alt'} me-1 text-primary"></i>
<i $if="this.state?.filterConfig?.[item.id]" class="bi bi-filter me-1 text-primary"></i> <span $text="item.name" class="text-truncate flex-grow-1"></span>
<span $text="item.name" class="text-truncate"></span>
</div> </div>
<button class="btn btn-xs btn-link text-muted p-0 border-0 header-menu-btn" $onclick="this.showColumnMenu(item, event)"> <button class="btn btn-xs btn-link text-muted p-0 border-0 me-1 header-menu-btn" $onclick="this.showColumnMenu(item, event)"><i class="bi bi-chevron-down"></i></button>
<i class="bi bi-chevron-down"></i> <Resizer $.target="thisNode.parentElement" style="position:absolute; right:0; top:0; bottom:0; width:4px; z-index:10" min="50" max="1000" $onresizing="this.onColumnResizing(item, event)" $onresize="this.onColumnResize(item, event)"></Resizer>
</button>
</div> </div>
</template> </template>
</div> </div>
@ -608,52 +647,54 @@ Component.register("DataTable", (container) => {
<div class="dt-spacer-prev flex-shrink-0" style="display:none"></div> <div class="dt-spacer-prev flex-shrink-0" style="display:none"></div>
<template $each="this.state?._renderedList || []" key="id" index="rIdx"> <template $each="this.state?._renderedList || []" key="id" index="rIdx">
<div class="dt-row dt-body-row border-bottom bg-white" $.="this._initRow(thisNode)"> <div class="dt-row dt-body-row border-bottom bg-white" $.="this._initRow(thisNode)">
<template $each="this.state?.fields || []" as="f" index="fIdx"> <template as="f"><div $class="dt-cell border-end px-2 d-flex align-items-center \${f.pinned ? 'pinned-' + f.pinned : ''}" $style="(f.pinned ? 'position: sticky; z-index: 1; background-color: inherit; ' : '') + (f.pinned === 'left' ? 'left: var(--l-' + f.id + '); border-right: 1px solid var(--bs-border-color); box-shadow: 2px 0 5px -2px rgba(0,0,0,0.1);' : (f.pinned === 'right' ? 'right: var(--r-' + f.id + '); border-left: 1px solid var(--bs-border-color); box-shadow: -2px 0 5px -2px rgba(0,0,0,0.1);' : ''))"><span $text="this.format(item[f.id], f)" class="text-truncate"></span></div></template>
<div class="dt-cell border-end px-2 d-flex align-items-center">
<span $text="!f.formatter ? item[f.id] : this.format(item[f.id], f)" class="text-truncate"></span>
</div>
</template>
</div> </div>
</template> </template>
<div class="dt-spacer-post flex-shrink-0" style="display:none"></div> <div class="dt-spacer-post flex-shrink-0" style="display:none"></div>
</div> </div>
</div> </div>
<div class="dt-column-menu border bg-body shadow-sm rounded" style="display:none; position:absolute; z-index:2000; min-width:180px" $onclick="event.stopPropagation()" $onmousedown="event.stopPropagation()"> <div class="dt-column-menu border bg-body shadow-lg rounded p-3" style="display:none; position:absolute; z-index:2000; min-width:260px; max-width:320px;">
<div class="list-group list-group-flush"> <template $if="this.state?.activeFieldId">
<button class="list-group-item list-group-item-action py-2 d-flex align-items-center" $onclick="this.setSort('asc')"> <div class="btn-group w-100 mb-3">
<i class="bi bi-sort-alpha-down me-2"></i> Sort Ascending <button $class="btn btn-sm d-flex align-items-center justify-content-center \${this.state?.sortConfig?.direction === 'asc' && this.state?.sortConfig?.fieldId === this.state?.activeFieldId ? 'btn-primary' : 'btn-outline-secondary border'}" $onclick="this.setSort('asc')"><i class="bi bi-sort-alpha-down me-1"></i> ASC</button>
</button> <button $class="btn btn-sm d-flex align-items-center justify-content-center \${this.state?.sortConfig?.direction === 'desc' && this.state?.sortConfig?.fieldId === this.state?.activeFieldId ? 'btn-primary' : 'btn-outline-secondary border'}" $onclick="this.setSort('desc')"><i class="bi bi-sort-alpha-up-alt me-1"></i> DESC</button>
<button class="list-group-item list-group-item-action py-2 d-flex align-items-center" $onclick="this.setSort('desc')">
<i class="bi bi-sort-alpha-up-alt me-2"></i> Sort Descending
</button>
<div class="p-2 border-top bg-light-subtle">
<div class="d-flex align-items-center mb-1 text-muted fw-bold" style="font-size: 10px">
<i class="bi bi-filter me-1"></i> LOCAL FILTER
</div>
<input type="text" class="form-control form-control-sm" placeholder="Search..."
$bind="this.state.filterConfig[this.state.activeFieldId]"
$onkeydown="if(event.key === 'Enter') this.applySortFilter()">
</div> </div>
<button class="list-group-item list-group-item-action py-2 text-danger d-flex align-items-center border-top" $onclick="this.clearColumnSettings()">
<i class="bi bi-x-circle me-2"></i> Clear Settings <div $if="this.state?.activeModes?.length" class="dt-filter-tabs d-flex overflow-auto border-bottom bg-light-subtle rounded-top py-1" style="white-space:nowrap; scrollbar-width: none;">
</button> <template $each="this.state?.activeModes || []" as="m">
</div> <div $class="px-2 py-1 cursor-pointer fs-5 \${this.state?.filterConfig?.[this.state?.activeFieldId]?.mode === m ? 'text-primary border-bottom border-primary border-2' : 'text-muted'}" $title="m.toUpperCase()" $onclick="this.state.filterConfig[this.state.activeFieldId].mode = m; this.state.filterConfig = {...this.state.filterConfig}">
<i $class="bi \${this.state?._MODE_ICONS?.[m] || 'bi-filter'}"></i>
</div>
</template>
</div>
<template $if="this.state?.activeModes?.length">
<div class="py-2 border-bottom" style="min-height: 48px">
<input type="text" class="form-control form-control-sm mb-1" $placeholder="(this.state?.filterConfig?.[this.state?.activeFieldId]?.mode || 'Search').toUpperCase() + '...'" $bind="this.state?.filterConfig?.[this.state?.activeFieldId].value" $onkeydown="if(event.key==='Enter'){this.applySortFilter();this.hideColumnMenu();}">
<input $if="this.state?.filterConfig?.[this.state?.activeFieldId]?.mode === 'between'" type="text" class="form-control form-control-sm" placeholder="And..." $bind="this.state?.filterConfig?.[this.state?.activeFieldId].value2" $onkeydown="if(event.key==='Enter'){this.applySortFilter();this.hideColumnMenu();}">
</div>
</template>
<div class="mt-3" style="max-height: 200px; overflow-y: auto;">
<div class="text-muted fw-bold mb-2" style="font-size: 10px; letter-spacing: 0.5px">TOP FREQUENT VALUES</div>
<template $each="this.state?._columnStats?.[this.state?.activeFieldId] || []">
<label class="d-flex align-items-center mb-1 small cursor-pointer p-1 rounded-1 menu-item-row" onmouseover="this.style.background='var(--bs-light)'" onmouseout="this.style.background='transparent'">
<input type="checkbox" class="form-check-input me-2" $checked="this.state?.filterConfig?.[this.state?.activeFieldId]?.selectedValues?.includes(String(item.val))" $onclick="this.toggleSelectedValue(String(item.val))">
<span class="text-truncate flex-grow-1"><span $text="item.val || '(Empty)'"></span> <span class="text-muted ms-1" style="font-size: 0.7rem" $text="'(' + item.count + ')'"></span></span>
<button class="btn btn-xs btn-link p-0 text-primary only-btn" style="font-size: 10px; text-decoration: none" $onclick="this.filterOnlyThis(item.val); event.preventDefault(); event.stopPropagation();">Only</button>
</label>
</template>
</div>
<div $if="this.state?.filterConfig?.[this.state?.activeFieldId]?.value || this.state?.filterConfig?.[this.state?.activeFieldId]?.selectedValues?.length" class="mt-3 pt-2 border-top text-center">
<span class="cursor-pointer text-primary small fw-bold" $onclick="this.clearColumnSettings()"><i class="bi bi-x-circle me-1"></i> Clear Filter</span>
</div>
</template>
</div> </div>
<div class="dt-editor-overlay dt-editor-container" style="display: none" $onclick="event.stopPropagation()" $onmousedown="event.stopPropagation()"> <div class="dt-editor-overlay dt-editor-container" style="display: none; position: absolute; z-index: 1000; background: var(--bs-body-bg); box-shadow: 0 4px 16px rgba(0,0,0,0.25); border: 1px solid var(--bs-primary);"><AutoForm inline class="h-100 w-100" $onsubmit="this.hideEditor(true)"/></div>
<AutoForm inline class="h-100 w-100" $onsubmit="thisNode.closest('DataTable').hideEditor(true)"/> <div class="dt-footer border-top bg-light d-flex align-items-center px-2 py-1 small text-muted" style="height:32px"><span $text="(this.state?.selectedRowCount || 0) + ' / ' + (this.state?.list?.length || 0)"></span></div>
</div>
<div class="dt-footer border-top bg-light d-flex align-items-center px-2 py-1 small text-muted" style="height:32px">
<div class="d-flex align-items-center gap-2">
<span $text="(this.state?.selectedRowCount || 0) + ' / ' + (this.state?.list?.length || 0)"></span>
<button class="btn btn-xs btn-link text-danger p-0 border-0" title="Delete Selected"
$if="this.state?.selectedRowCount" $onclick="this.deleteSelected()">
<i class="bi bi-trash"></i>
</button>
</div>
</div>
</div> </div>
` `
), Util.makeDom( ), Util.makeDom(
@ -662,31 +703,20 @@ Component.register("DataTable", (container) => {
<style> <style>
DataTable { display: block; } DataTable { display: block; }
.dt-root { font-size: 0.875rem; } .dt-root { font-size: 0.875rem; }
.dt-row { .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; }
display: grid; .dt-header-row { background-color: var(--bs-tertiary-bg); border-bottom: 1px solid var(--bs-border-color); }
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); }
.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; }
.dt-cell-selected { background-color: var(--bs-primary-bg-subtle) !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; }
.dt-column-menu { box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important; } .dt-column-menu { background-color: var(--bs-body-bg); border: 1px solid var(--bs-primary); box-shadow: 0 10px 40px rgba(0,0,0,0.2) !important; z-index: 2100 !important; }
.dt-column-menu .list-group-item { border: none; cursor: pointer; }
.dt-column-menu .list-group-item:hover { background-color: var(--bs-light); }
.dt-editor-overlay {
position: absolute; z-index: 1000; background: var(--bs-body-bg);
box-shadow: 0 4px 16px rgba(0,0,0,0.25); border: 1px solid var(--bs-primary);
align-items: center; overflow: visible;
}
.dt-editor-overlay .form-control { border: none !important; border-radius: 0 !important; height: 100% !important; padding: 0 8px !important; }
.btn-xs { padding: 1px 5px; line-height: 1.5; } .btn-xs { padding: 1px 5px; line-height: 1.5; }
.cursor-pointer { cursor: pointer; }
.dt-filter-tabs i { font-size: 1.1rem; }
.dt-filter-tabs div:hover i { color: var(--bs-primary); }
.menu-item-row .only-btn { opacity: 0; }
.menu-item-row:hover .only-btn { opacity: 1; }
</style> </style>
` `
)); ));
if (typeof document !== "undefined") RefreshState(document.documentElement);

81
dist/datatable.min.js vendored
View File

File diff suppressed because one or more lines are too long

320
src/index.js
View File

@ -37,7 +37,9 @@ Component.register('DataTable', container => {
_internalUpdate: false, _internalUpdate: false,
_appliedHash: '', _appliedHash: '',
_fieldsDirty: false, _fieldsDirty: false,
_masterCellNodes: null _masterCellNodes: null,
isDirty: false,
isBulkEdit: null
}) })
const perf = createPerfMonitor(); const perf = createPerfMonitor();
@ -185,21 +187,24 @@ Component.register('DataTable', container => {
state.__watch('fields', fields => { state.__watch('fields', fields => {
if (!fields) return; if (!fields) return;
state._fieldsDirty = true; state._fieldsDirty = true;
container.style.setProperty('--dt-grid-template', fields.map(f => `var(--w-${f.id}, ${f.width || 150}px)`).join(' ')); state._masterCellNodes = null; // Force template rebuild
container.style.setProperty('--dt-row-width', fields.reduce((sum, f) => sum + (f.width || 150), 0) + 'px'); container.style.setProperty('--dt-grid-template', fields.map(f => `var(--w-${f.id}, ${(f.settings?.width || f.width) || 150}px)`).join(' '));
container.style.setProperty('--dt-row-width', fields.reduce((sum, f) => sum + ((f.settings?.width || f.width) || 150), 0) + 'px');
let leftSum = 0; let leftSum = 0;
fields.forEach(f => { fields.forEach(f => {
if (f.pinned === 'left') { const pinned = f.settings?.pinned || f.pinned;
if (pinned === 'left') {
container.style.setProperty(`--l-${f.id}`, leftSum + 'px'); container.style.setProperty(`--l-${f.id}`, leftSum + 'px');
leftSum += (f.width || 150); leftSum += ((f.settings?.width || f.width) || 150);
} }
}); });
let rightSum = 0; let rightSum = 0;
[...fields].reverse().forEach(f => { [...fields].reverse().forEach(f => {
if (f.pinned === 'right') { const pinned = f.settings?.pinned || f.pinned;
if (pinned === 'right') {
container.style.setProperty(`--r-${f.id}`, rightSum + 'px'); container.style.setProperty(`--r-${f.id}`, rightSum + 'px');
rightSum += (f.width || 150); rightSum += ((f.settings?.width || f.width) || 150);
} }
}); });
}); });
@ -212,7 +217,27 @@ Component.register('DataTable', container => {
const masters = state._masterCellNodes || (state._masterCellNodes = Array.from(fieldTemplate.content.childNodes).map(n => n.cloneNode(true))); const masters = state._masterCellNodes || (state._masterCellNodes = Array.from(fieldTemplate.content.childNodes).map(n => n.cloneNode(true)));
fieldTemplate.removeAttribute('$each'); fieldTemplate.setAttribute('$if', 'true'); fieldTemplate.content.textContent = ''; fieldTemplate.removeAttribute('$each'); fieldTemplate.setAttribute('$if', 'true'); fieldTemplate.content.textContent = '';
state.fields.forEach((f, fIdx) => masters.forEach(master => { state.fields.forEach((f, fIdx) => masters.forEach(master => {
const clone = master.cloneNode(true); if (clone.nodeType === 1) clone.dataset.fidx = fIdx; fieldTemplate.content.appendChild(clone); const clone = master.cloneNode(true);
if (clone.nodeType === 1) {
clone.dataset.fidx = fIdx;
const pinned = f.settings?.pinned || f.pinned;
if (pinned) {
clone.classList.add('pinned-' + pinned);
clone.style.position = 'sticky';
clone.style.zIndex = '1';
clone.style.backgroundColor = 'inherit';
if (pinned === 'left') {
clone.style.left = `var(--l-${f.id})`;
clone.style.borderRight = '1px solid var(--bs-border-color)';
clone.style.boxShadow = '2px 0 5px -2px rgba(0,0,0,0.1)';
} else {
clone.style.right = `var(--r-${f.id})`;
clone.style.borderLeft = '1px solid var(--bs-border-color)';
clone.style.boxShadow = '-2px 0 5px -2px rgba(0,0,0,0.1)';
}
}
}
fieldTemplate.content.appendChild(clone);
})); }));
} }
} }
@ -234,24 +259,57 @@ Component.register('DataTable', container => {
container.editCell = (row, field, cellNode) => { container.editCell = (row, field, cellNode) => {
const overlay = container.querySelector('.dt-editor-overlay'), rect = cellNode.getBoundingClientRect(), rootRect = container.getBoundingClientRect(); const overlay = container.querySelector('.dt-editor-overlay'), rect = cellNode.getBoundingClientRect(), rootRect = container.getBoundingClientRect();
currentEditingNode = cellNode; currentEditingNode = cellNode;
const formType = field.settings?.formType || field.type || 'text';
const form = overlay.querySelector('AutoForm');
if (form) {
// row 已经是 Proxy (NewState)，直接赋值即可实现双向同步
form.data = row;
form.state.schema = [{ ...field, type: formType, options: field.settings?.options || field.options, name: field.id, label: '' }];
RefreshState(form);
}
Object.assign(overlay.style, { Object.assign(overlay.style, {
display: 'flex', left: (rect.left - rootRect.left) + 'px', top: (rect.top - rootRect.top) + 'px', display: 'flex', left: (rect.left - rootRect.left) + 'px', top: (rect.top - rootRect.top) + 'px',
width: (field.type === 'textarea' || field.type === 'TagsInput' ? Math.max(rect.width, 300) : rect.width) + 'px', width: (formType === 'textarea' || formType === 'TagsInput' ? Math.max(rect.width, 300) : rect.width) + 'px',
height: (field.type === 'textarea' || field.type === 'TagsInput' ? 'auto' : rect.height + 'px') height: (formType === 'textarea' || formType === 'TagsInput' ? 'auto' : rect.height + 'px')
}); });
State.editingSchema = [{ ...field, name: field.id, label: '' }]; State.editingData = row;
setTimeout(() => overlay.querySelector('input, textarea, select, .form-control')?.focus(), 30); setTimeout(() => overlay.querySelector('input, textarea, select, .form-control')?.focus(), 30);
}; };
container.hideEditor = (save = true) => { container.hideEditor = (save = true) => {
if (!_editorOverlay) _editorOverlay = container.querySelector('.dt-editor-overlay'); if (!_editorOverlay) _editorOverlay = container.querySelector('.dt-editor-overlay');
if (!_editorOverlay || _editorOverlay.style.display === 'none') return; if (!_editorOverlay || _editorOverlay.style.display === 'none') return;
if (save) { const form = _editorOverlay.querySelector('AutoForm');
if (save && form && form.data) {
const input = _editorOverlay.querySelector('input:focus, select:focus, textarea:focus'); const input = _editorOverlay.querySelector('input:focus, select:focus, textarea:focus');
if (input) input.dispatchEvent(new Event(input.type === 'number' || input.tagName === 'SELECT' ? 'change' : 'input', { bubbles: true })); if (input) input.dispatchEvent(new Event(input.type === 'number' || input.tagName === 'SELECT' ? 'change' : 'input', { bubbles: true }));
RefreshState(form);
// 手动同步数据回原始行 (解决 Proxy 隔离问题)
const schema = form.state.schema || [];
schema.forEach(field => {
const row = currentEditingNode?.closest('.dt-row')?._ref?.item;
if (row) row[field.name] = form.data[field.name];
});
if (state.isBulkEdit) {
const { minRow, maxRow, fIdx } = state.isBulkEdit;
const field = state.fields[fIdx];
const newValue = form.data[field.id];
for (let i = minRow; i <= maxRow; i++) {
if (state.list[i]) {
state.list[i][field.id] = newValue;
}
}
state.list = [...state.list];
}
if (currentEditingNode) RefreshState(currentEditingNode); if (currentEditingNode) RefreshState(currentEditingNode);
state.isDirty = true;
} }
_editorOverlay.style.display = 'none'; State.editingSchema = State.editingData = currentEditingNode = null; _editorOverlay.style.display = 'none';
if (form) { form.state.schema = []; form.data = null; }
currentEditingNode = null;
state.isBulkEdit = null;
container.focus(); container.focus();
}; };
@ -278,27 +336,202 @@ Component.register('DataTable', container => {
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.querySelectorAll('.dt-cell')).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); const rIdx = row._ref?.rIdx ?? Array.from(container.querySelectorAll('.dt-body-row')).indexOf(row);
const absoluteRow = rIdx + state._listStartIndex;
if (item && state.fields[fIdx]) {
const bounds = selection.getSelectionBounds();
if (bounds && absoluteRow >= bounds.minRow && absoluteRow <= bounds.maxRow && fIdx >= bounds.minCol && fIdx <= bounds.maxCol) {
const affectedRows = bounds.maxRow - bounds.minRow + 1;
if (affectedRows > 1) {
state.isBulkEdit = { ...bounds, fIdx };
if (globalThis.UI?.toast) UI.toast(`Bulk Edit: Updating ${affectedRows} rows in column "${state.fields[fIdx].name}"`, { type: 'warning' });
}
}
container.editCell(item, state.fields[fIdx], cell);
}
}
};
container.addRow = () => {
const newRow = {};
state.fields.forEach(f => newRow[f.id] = '');
state._originalList.push(newRow);
state.list = [...state._originalList]; // Apply to current view too
state.isDirty = true;
setTimeout(() => {
scroll.reset(state.list);
container.querySelector('.dt-main').scrollTop = container.querySelector('.dt-main').scrollHeight;
}, 50);
};
container.deleteSelectedRow = async () => {
const bounds = selection.getSelectionBounds();
if (!bounds) return;
const count = bounds.maxRow - bounds.minRow + 1;
if (await UI.confirm(`Are you sure you want to delete ${count} row(s)?`)) {
const rMin = bounds.minRow, rMax = bounds.maxRow;
const removedItems = state.list.slice(rMin, rMax + 1);
state.list = state.list.filter((_, i) => !(i >= rMin && i <= rMax));
state._originalList = state._originalList.filter(item => !removedItems.includes(item));
state.isDirty = true;
selection.clearAllActive();
container.dispatchEvent(new CustomEvent('remove', { detail: { items: removedItems } }));
}
};
container.saveChanges = () => {
container.dispatchEvent(new CustomEvent('save', { detail: { list: state._originalList, fields: state.fields } }));
state.isDirty = false;
};
const FIELD_TYPES = [
{ label: '{#Text#}', value: 'text', db: 'v4096' },
{ label: '{#Number#}', value: 'number' },
{ label: '{#Single Select#}', value: 'select', db: 'v255' },
{ label: '{#Checkbox#}', value: 'checkbox', db: 'v1024' },
{ label: '{#Tags#}', value: 'TagsInput', db: 't' },
{ label: '{#DateTime#}', value: 'datetime', db: 'dt' },
{ label: '{#Switch#}', value: 'switch', db: 'b' }
];
const getFieldSchema = () => [
{ name: 'id', label: 'Field ID', type: 'text', setting: { required: true, placeholder: 'e.g. user_name' } },
{ name: 'name', label: 'Display Name', type: 'text', setting: { required: true, placeholder: 'e.g. 用户名' } },
{ name: 'user_type', label: 'Field Type', type: 'select', options: FIELD_TYPES },
{ name: 'decimals', label: 'Decimals', type: 'number', setting: { min: 0, max: 10 }, if: 'this.data.user_type=="number"' },
{ name: 'options_str', label: 'Options', type: 'textarea', setting: { rows: 3, placeholder: 'One option per line' }, if: '["select", "checkbox"].includes(this.data.user_type)' },
{ name: 'isIndex', label: 'Index', type: 'switch' },
{ name: 'memo', label: 'Memo', type: 'text' }
];
container.addField = async () => {
container.hideColumnMenu();
const data = NewState({ id: 'c' + Date.now().toString().slice(-4), name: 'New Field', user_type: 'text', decimals: 0, isIndex: false, memo: '', options_str: '' });
const d = document.body.appendChild(document.createElement('Dialog'));
await new Promise(r => setTimeout(r, 0));
Object.assign(d.state, { title: 'Add Field', buttons: ['Cancel', 'Save'] });
RefreshState(d);
const body = d.querySelector('.modal-body');
const form = body.appendChild(document.createElement('AutoForm'));
form.setAttribute('nobutton', '');
RefreshState(form);
form.data = data;
form.state.schema = getFieldSchema();
form.addEventListener('change', (e) => e.stopPropagation());
d.show();
const result = await new Promise(resolve => d.addEventListener('change', e => resolve(d.result)));
if (result === 2) {
const typeInfo = FIELD_TYPES.find(t => t.value === data.user_type);
let dbType = typeInfo?.db || 'v255';
if (data.user_type === 'number') dbType = data.decimals > 0 ? 'ff' : 'bi';
const field = {
id: data.id, name: data.name, memo: data.memo, isIndex: !!data.isIndex,
type: dbType,
settings: {
formType: data.user_type,
decimals: data.decimals,
options: data.options_str ? data.options_str.split('\n').map(s => s.trim()).filter(Boolean) : undefined
}
};
state.fields = [...state.fields, field];
state.isDirty = true;
container.dispatchEvent(new CustomEvent('savefields', { detail: state.fields }));
state.list = [...state.list];
}
d.remove();
};
container.editField = async () => {
if (!state.activeField) return;
container.hideColumnMenu();
const f = state.activeField;
const data = NewState({
id: f.id, name: f.name, memo: f.memo || '', isIndex: !!f.isIndex,
user_type: f.settings?.formType || 'text',
decimals: f.settings?.decimals || 0,
options_str: f.settings?.options ? f.settings.options.join('\n') : ''
});
const d = document.body.appendChild(document.createElement('Dialog'));
await new Promise(r => setTimeout(r, 0));
Object.assign(d.state, { title: 'Edit Field', buttons: ['Cancel', 'Save'] });
RefreshState(d);
const body = d.querySelector('.modal-body');
const form = body.appendChild(document.createElement('AutoForm'));
form.setAttribute('nobutton', '');
RefreshState(form);
form.data = data;
form.state.schema = getFieldSchema();
form.addEventListener('change', (e) => e.stopPropagation());
d.show();
const result = await new Promise(resolve => d.addEventListener('change', e => resolve(d.result)));
if (result === 2) {
const idx = state.fields.findIndex(item => item.id === f.id);
if (idx !== -1) {
const typeInfo = FIELD_TYPES.find(t => t.value === data.user_type);
let dbType = typeInfo?.db || 'v255';
if (data.user_type === 'number') dbType = data.decimals > 0 ? 'ff' : 'bi';
const updatedField = {
...f, id: data.id, name: data.name, memo: data.memo, isIndex: !!data.isIndex,
type: dbType,
settings: {
...f.settings,
formType: data.user_type,
decimals: data.decimals,
options: data.options_str ? data.options_str.split('\n').map(s => s.trim()).filter(Boolean) : undefined
}
};
state.fields[idx] = updatedField;
state.fields = [...state.fields];
state.isDirty = true;
container.dispatchEvent(new CustomEvent('savefields', { detail: state.fields }));
state.list = [...state.list];
}
}
d.remove();
};
container.deleteField = async () => {
if (!state.activeField) return;
container.hideColumnMenu();
if (await UI.confirm(`Are you sure you want to delete field "${state.activeField.name}"?`)) {
const idx = state.fields.findIndex(f => f.id === state.activeField.id);
if (idx !== -1) {
state.fields.splice(idx, 1);
state.fields = [...state.fields];
state.isDirty = true;
container.dispatchEvent(new CustomEvent('savefields', { detail: state.fields }));
state.list = [...state.list]; // Trigger body refresh
}
} }
}; };
window.addEventListener('mouseup', selection.endSelect); window.addEventListener('mouseup', selection.endSelect);
document.addEventListener('mousedown', e => { document.addEventListener('mousedown', e => {
const overlay = container.querySelector('.dt-editor-overlay'); const overlay = container.querySelector('.dt-editor-overlay');
const menu = container.querySelector('.dt-column-menu');
if (overlay?.style.display !== 'none' && !overlay.contains(e.target)) container.hideEditor(true); if (overlay?.style.display !== 'none' && !overlay.contains(e.target)) container.hideEditor(true);
if (!container.contains(e.target) && !overlay?.contains(e.target)) selection.clearAllActive(); if (!container.contains(e.target) && !overlay?.contains(e.target) && !menu?.contains(e.target)) selection.clearAllActive();
}); });
// Exposure for templates // Exposure for templates
state._MODE_ICONS = MODE_ICONS; state._MODE_ICONS = MODE_ICONS;
// NOTE: For $class and $style directives, ALWAYS use the template literal syntax:
// $class="base-class \${condition ? 'active' : ''}"
// DO NOT use string concatenation like $class="'base-class ' + (condition ? 'active' : '')".
// Since the HTML is wrapped in backticks (``), remember to escape the dollar sign: \${ }
}, Util.makeDom(/*html*/` }, Util.makeDom(/*html*/`
<!--
NOTE: For $class and $style directives, ALWAYS use the template literal syntax:
$class="base-class \${condition ? 'active' : ''}"
DO NOT use string concatenation like $class="'base-class ' + (condition ? 'active' : '')".
Since the HTML is wrapped in backticks (``), remember to escape the dollar sign: \${ }
-->
<div class="dt-root d-flex flex-column h-100 border bg-body text-body overflow-hidden" style="position:relative; user-select:none; outline: none; min-height: 0" tabindex="0"> <div class="dt-root d-flex flex-column h-100 border bg-body text-body overflow-hidden" style="position:relative; user-select:none; outline: none; min-height: 0" tabindex="0">
<div class="dt-main flex-grow-1 overflow-auto" $onscroll="this.onScroll()" <div class="dt-main flex-grow-1 overflow-auto" $onscroll="this.onScroll()"
$onmousedown="this.onMainMouseDown(event)" $onmouseover="this.onMainMouseOver(event)" $ondblclick="this.onMainDblClick(event)" $onmousedown="this.onMainMouseDown(event)" $onmouseover="this.onMainMouseOver(event)" $ondblclick="this.onMainDblClick(event)"
@ -306,7 +539,7 @@ Component.register('DataTable', container => {
<div class="dt-header border-bottom bg-light sticky-top" style="z-index:20"> <div class="dt-header border-bottom bg-light sticky-top" style="z-index:20">
<div class="dt-header-row fw-bold text-muted small"> <div class="dt-header-row fw-bold text-muted small">
<template $each="this.state?.fields || []"> <template $each="this.state?.fields || []">
<div $data-id="item.id" $class="dt-cell dt-col border-end d-flex align-items-center header-cell \${item.pinned ? 'pinned-' + item.pinned : ''}" $style="(item.pinned ? 'position: sticky; z-index: 11; background-color: inherit; ' : 'position:relative; ') + 'padding: 0; ' + (item.pinned === 'left' ? 'left: var(--l-' + item.id + '); border-right: 1px solid var(--bs-border-color); box-shadow: 2px 0 5px -2px rgba(0,0,0,0.1);' : (item.pinned === 'right' ? 'right: var(--r-' + item.id + '); border-left: 1px solid var(--bs-border-color); box-shadow: -2px 0 5px -2px rgba(0,0,0,0.1);' : ''))"> <div $data-id="item.id" $class="dt-cell dt-col border-end d-flex align-items-center header-cell \${(item.settings?.pinned || item.pinned) ? 'pinned-' + (item.settings?.pinned || item.pinned) : ''}" $style="((item.settings?.pinned || item.pinned) ? 'position: sticky; z-index: 11; background-color: inherit; ' : 'position:relative; ') + 'padding: 0; ' + ((item.settings?.pinned || item.pinned) === 'left' ? 'left: var(--l-' + item.id + '); border-right: 1px solid var(--bs-border-color); box-shadow: 2px 0 5px -2px rgba(0,0,0,0.1);' : ((item.settings?.pinned || item.pinned) === 'right' ? 'right: var(--r-' + item.id + '); border-left: 1px solid var(--bs-border-color); box-shadow: -2px 0 5px -2px rgba(0,0,0,0.1);' : ''))">
<div class="d-flex align-items-center overflow-hidden flex-grow-1 h-100 px-2 cursor-pointer" $onclick="this.showColumnMenu(item, event)"> <div class="d-flex align-items-center overflow-hidden flex-grow-1 h-100 px-2 cursor-pointer" $onclick="this.showColumnMenu(item, event)">
<i $if="this.state?.filterConfig?.[item.id] && (this.state.filterConfig[item.id].value || this.state.filterConfig[item.id].selectedValues?.length)" class="bi bi-filter me-1 text-primary"></i> <i $if="this.state?.filterConfig?.[item.id] && (this.state.filterConfig[item.id].value || this.state.filterConfig[item.id].selectedValues?.length)" class="bi bi-filter me-1 text-primary"></i>
<i $if="this.state?.sortConfig?.fieldId === item.id && this.state.sortConfig.direction" $class="bi bi-sort-\${this.state.sortConfig.direction === 'asc' ? 'down' : 'up-alt'} me-1 text-primary"></i> <i $if="this.state?.sortConfig?.fieldId === item.id && this.state.sortConfig.direction" $class="bi bi-sort-\${this.state.sortConfig.direction === 'asc' ? 'down' : 'up-alt'} me-1 text-primary"></i>
@ -322,18 +555,18 @@ Component.register('DataTable', container => {
<div class="dt-spacer-prev flex-shrink-0" style="display:none"></div> <div class="dt-spacer-prev flex-shrink-0" style="display:none"></div>
<template $each="this.state?._renderedList || []" key="id" index="rIdx"> <template $each="this.state?._renderedList || []" key="id" index="rIdx">
<div class="dt-row dt-body-row border-bottom bg-white" $.="this._initRow(thisNode)"> <div class="dt-row dt-body-row border-bottom bg-white" $.="this._initRow(thisNode)">
<template as="f"><div $class="dt-cell border-end px-2 d-flex align-items-center \${f.pinned ? 'pinned-' + f.pinned : ''}" $style="(f.pinned ? 'position: sticky; z-index: 1; background-color: inherit; ' : '') + (f.pinned === 'left' ? 'left: var(--l-' + f.id + '); border-right: 1px solid var(--bs-border-color); box-shadow: 2px 0 5px -2px rgba(0,0,0,0.1);' : (f.pinned === 'right' ? 'right: var(--r-' + f.id + '); border-left: 1px solid var(--bs-border-color); box-shadow: -2px 0 5px -2px rgba(0,0,0,0.1);' : ''))"><span $text="this.format(item[f.id], f)" class="text-truncate"></span></div></template> <template as="f"><div $class="dt-cell border-end px-2 d-flex align-items-center \${(f.settings?.pinned || f.pinned) ? 'pinned-' + (f.settings?.pinned || f.pinned) : ''}" $style="((f.settings?.pinned || f.pinned) ? 'position: sticky; z-index: 1; background-color: inherit; ' : '') + ((f.settings?.pinned || f.pinned) === 'left' ? 'left: var(--l-' + f.id + '); border-right: 1px solid var(--bs-border-color); box-shadow: 2px 0 5px -2px rgba(0,0,0,0.1);' : ((f.settings?.pinned || f.pinned) === 'right' ? 'right: var(--r-' + f.id + '); border-left: 1px solid var(--bs-border-color); box-shadow: -2px 0 5px -2px rgba(0,0,0,0.1);' : ''))"><span $text="this.format(item[f.id], f)" class="text-truncate"></span></div></template>
</div> </div>
</template> </template>
<div class="dt-spacer-post flex-shrink-0" style="display:none"></div> <div class="dt-spacer-post flex-shrink-0" style="display:none"></div>
</div> </div>
</div> </div>
<div class="dt-column-menu border bg-body shadow-lg rounded p-3" style="display:none; position:absolute; z-index:2000; min-width:260px; max-width:320px;"> <div class="dt-column-menu bg-body shadow-lg rounded p-2" style="display:none; position:absolute; z-index:2000; min-width:240px; max-width:300px; border: 1px solid var(--bs-primary)">
<template $if="this.state?.activeFieldId"> <template $if="this.state?.activeFieldId">
<div class="btn-group w-100 mb-3"> <div class="d-flex gap-1 mb-2">
<button $class="btn btn-sm d-flex align-items-center justify-content-center \${this.state?.sortConfig?.direction === 'asc' && this.state?.sortConfig?.fieldId === this.state?.activeFieldId ? 'btn-primary' : 'btn-outline-secondary border'}" $onclick="this.setSort('asc')"><i class="bi bi-sort-alpha-down me-1"></i> ASC</button> <button $class="btn btn-xs flex-grow-1 d-flex align-items-center justify-content-center \${this.state?.sortConfig?.direction === 'asc' && this.state?.sortConfig?.fieldId === this.state?.activeFieldId ? 'btn-primary' : 'btn-outline-secondary border'}" $onclick="this.setSort('asc')"><i class="bi bi-sort-alpha-down me-1"></i> ASC</button>
<button $class="btn btn-sm d-flex align-items-center justify-content-center \${this.state?.sortConfig?.direction === 'desc' && this.state?.sortConfig?.fieldId === this.state?.activeFieldId ? 'btn-primary' : 'btn-outline-secondary border'}" $onclick="this.setSort('desc')"><i class="bi bi-sort-alpha-up-alt me-1"></i> DESC</button> <button $class="btn btn-xs flex-grow-1 d-flex align-items-center justify-content-center \${this.state?.sortConfig?.direction === 'desc' && this.state?.sortConfig?.fieldId === this.state?.activeFieldId ? 'btn-primary' : 'btn-outline-secondary border'}" $onclick="this.setSort('desc')"><i class="bi bi-sort-alpha-up-alt me-1"></i> DESC</button>
</div> </div>
<div $if="this.state?.activeModes?.length" class="dt-filter-tabs d-flex overflow-auto border-bottom bg-light-subtle rounded-top py-1" style="white-space:nowrap; scrollbar-width: none;"> <div $if="this.state?.activeModes?.length" class="dt-filter-tabs d-flex overflow-auto border-bottom bg-light-subtle rounded-top py-1" style="white-space:nowrap; scrollbar-width: none;">
@ -351,8 +584,8 @@ Component.register('DataTable', container => {
</div> </div>
</template> </template>
<div class="mt-3" style="max-height: 200px; overflow-y: auto;"> <div class="mt-2" style="max-height: 180px; overflow-y: auto;">
<div class="text-muted fw-bold mb-2" style="font-size: 10px; letter-spacing: 0.5px">TOP FREQUENT VALUES</div> <div class="text-muted fw-bold mb-1" style="font-size: 9px; letter-spacing: 0.5px">TOP FREQUENT VALUES</div>
<template $each="this.state?._columnStats?.[this.state?.activeFieldId] || []"> <template $each="this.state?._columnStats?.[this.state?.activeFieldId] || []">
<label class="d-flex align-items-center mb-1 small cursor-pointer p-1 rounded-1 menu-item-row" onmouseover="this.style.background='var(--bs-light)'" onmouseout="this.style.background='transparent'"> <label class="d-flex align-items-center mb-1 small cursor-pointer p-1 rounded-1 menu-item-row" onmouseover="this.style.background='var(--bs-light)'" onmouseout="this.style.background='transparent'">
<input type="checkbox" class="form-check-input me-2" $checked="this.state?.filterConfig?.[this.state?.activeFieldId]?.selectedValues?.includes(String(item.val))" $onclick="this.toggleSelectedValue(String(item.val))"> <input type="checkbox" class="form-check-input me-2" $checked="this.state?.filterConfig?.[this.state?.activeFieldId]?.selectedValues?.includes(String(item.val))" $onclick="this.toggleSelectedValue(String(item.val))">
@ -362,14 +595,37 @@ Component.register('DataTable', container => {
</template> </template>
</div> </div>
<div $if="this.state?.filterConfig?.[this.state?.activeFieldId]?.value || this.state?.filterConfig?.[this.state?.activeFieldId]?.selectedValues?.length" class="mt-3 pt-2 border-top text-center"> <div $if="this.state?.filterConfig?.[this.state?.activeFieldId]?.value || this.state?.filterConfig?.[this.state?.activeFieldId]?.selectedValues?.length" class="mt-2 pt-1 border-top text-center">
<span class="cursor-pointer text-primary small fw-bold" $onclick="this.clearColumnSettings()"><i class="bi bi-x-circle me-1"></i> Clear Filter</span> <span class="cursor-pointer text-primary small fw-bold" $onclick="this.clearColumnSettings()"><i class="bi bi-x-circle me-1"></i> Clear Filter</span>
</div> </div>
<div class="mt-3 pt-2 border-top d-flex flex-column gap-1">
<button class="btn btn-xs btn-outline-secondary border d-flex align-items-center px-2 py-1" $onclick="this.editField()"><i class="bi bi-pencil me-2"></i> Edit Field</button>
<button class="btn btn-xs btn-outline-secondary border d-flex align-items-center px-2 py-1" $onclick="this.addField()"><i class="bi bi-plus-lg me-2"></i> Add Field</button>
<button class="btn btn-xs btn-outline-danger border d-flex align-items-center px-2 py-1" $onclick="this.deleteField()"><i class="bi bi-trash me-2"></i> Delete Field</button>
</div>
</template> </template>
</div> </div>
<div class="dt-editor-overlay dt-editor-container" style="display: none; position: absolute; z-index: 1000; background: var(--bs-body-bg); box-shadow: 0 4px 16px rgba(0,0,0,0.25); border: 1px solid var(--bs-primary);"><AutoForm inline class="h-100 w-100" $onsubmit="this.hideEditor(true)"/></div> <div class="dt-editor-overlay dt-editor-container" style="display: none; position: absolute; z-index: 1000; background: var(--bs-body-bg); box-shadow: 0 4px 16px rgba(0,0,0,0.25); border: 1px solid var(--bs-primary);"><AutoForm inline class="h-100 w-100" $onsubmit="event.preventDefault(); thisNode.closest('DataTable').hideEditor(true)"/></div>
<div class="dt-footer border-top bg-light d-flex align-items-center px-2 py-1 small text-muted" style="height:32px"><span $text="(this.state?.selectedRowCount || 0) + ' / ' + (this.state?.list?.length || 0)"></span></div>
<div class="dt-footer border-top bg-light d-flex align-items-center px-3 py-1 shadow-sm" style="height:40px; z-index: 10">
<div class="d-flex align-items-center gap-3 flex-grow-1">
<div class="btn-group shadow-sm">
<button class="btn btn-xs btn-white border d-flex align-items-center px-2" style="background:white" $onclick="this.addRow()" title="Add Row"><i class="bi bi-plus-lg text-primary me-1"></i> Add</button>
<button class="btn btn-xs btn-white border d-flex align-items-center px-2" style="background:white" $onclick="this.deleteSelectedRow()" $disabled="!this.state?.selectedRowCount" title="Delete Selected Rows"><i class="bi bi-trash text-danger me-1"></i> Delete</button>
</div>
<div class="vr h-50 my-auto text-muted opacity-25"></div>
<div class="d-flex align-items-center gap-2 text-muted" style="font-size: 0.75rem">
<i class="bi bi-check-all fs-6"></i>
<span $text="(this.state?.selectedRowCount || 0) + ' selected / ' + (this.state?.list?.length || 0) + ' total'"></span>
</div>
</div>
<div class="d-flex align-items-center gap-2">
<button $if="this.state?.isDirty" class="btn btn-xs btn-primary px-3 shadow-sm d-flex align-items-center fw-bold" $onclick="this.saveChanges()"><i class="bi bi-cloud-upload me-1"></i> Save Changes</button>
<button $if="!this.state?.isDirty" class="btn btn-xs btn-light border px-3 text-muted disabled d-flex align-items-center" disabled><i class="bi bi-cloud-check me-1"></i> Up to date</button>
</div>
</div>
</div> </div>
`), Util.makeDom(/*html*/` `), Util.makeDom(/*html*/`
<style> <style>

12
test/all.spec.js
View File

@ -10,7 +10,10 @@ test('DataTable comprehensive tests and scrolling benchmarks', async ({ page })
// 1. 遍历验证第一行每个单元格的编辑与数据同步 // 1. 遍历验证第一行每个单元格的编辑与数据同步
await page.waitForSelector('.dt-row'); await page.waitForSelector('.dt-row');
const fields = await page.evaluate(() => document.querySelector('DataTable').state.fields.map(f => ({ id: f.id, type: f.type }))); const fields = await page.evaluate(() => document.querySelector('DataTable').state.fields.map(f => ({
id: f.id,
type: f.settings?.formType || f.type
})));
console.log('Fields to test:', fields.map(f => f.id).join(', ')); console.log('Fields to test:', fields.map(f => f.id).join(', '));
for (let i = 0; i < fields.length; i++) { for (let i = 0; i < fields.length; i++) {
@ -51,6 +54,7 @@ test('DataTable comprehensive tests and scrolling benchmarks', async ({ page })
await page.fill(`${editorSelector} textarea`, newValue); await page.fill(`${editorSelector} textarea`, newValue);
} else if (field.type === 'TagsInput') { } else if (field.type === 'TagsInput') {
newValue = ['Playwright']; newValue = ['Playwright'];
await page.click(`${editorSelector} input`);
await page.fill(`${editorSelector} input`, 'Playwright'); await page.fill(`${editorSelector} input`, 'Playwright');
await page.keyboard.press('Enter'); await page.keyboard.press('Enter');
} else if (field.type === 'number') { } else if (field.type === 'number') {
@ -64,13 +68,13 @@ test('DataTable comprehensive tests and scrolling benchmarks', async ({ page })
await page.fill(`${editorSelector} input`, newValue); await page.fill(`${editorSelector} input`, newValue);
} }
// 退出编辑模式 // 退出编辑模式 (保存)
await page.evaluate(() => { await page.evaluate(() => {
const table = document.querySelector('DataTable'); const table = document.querySelector('DataTable');
const row = table.state.list[0]; table.hideEditor(true);
row._editingF = null;
}); });
await page.waitForTimeout(500); await page.waitForTimeout(500);
// 验证视图层 (DOM) 是否同步渲染 // 验证视图层 (DOM) 是否同步渲染

6
test/diagnostic.html
View File

@ -27,7 +27,7 @@
if (!form.state) form.state = NewState({ schema: [] }); if (!form.state) form.state = NewState({ schema: [] });
console.log('--- STEP 1: TEXT ---'); console.log('--- STEP 1: TEXT ---');
DiagnosticState.schema = [{ id: 't1', name: 't1', label: '', type: 'text' }]; DiagnosticState.schema = [{ name: 't1', label: '', type: 'text' }];
DiagnosticState.data = { t1: 'Hello World' }; DiagnosticState.data = { t1: 'Hello World' };
form.state.schema = DiagnosticState.schema; form.state.schema = DiagnosticState.schema;
form.data = DiagnosticState.data; form.data = DiagnosticState.data;
@ -36,7 +36,7 @@
console.log('Input value:', form.querySelector('input')?.value); console.log('Input value:', form.querySelector('input')?.value);
console.log('--- STEP 2: TAGS ---'); console.log('--- STEP 2: TAGS ---');
DiagnosticState.schema = [{ id: 'tags', name: 'tags', label: '', type: 'TagsInput' }]; DiagnosticState.schema = [{ name: 'tags', label: '', type: 'TagsInput' }];
DiagnosticState.data = { tags: ['A', 'B'] }; DiagnosticState.data = { tags: ['A', 'B'] };
form.state.schema = DiagnosticState.schema; form.state.schema = DiagnosticState.schema;
form.data = DiagnosticState.data; form.data = DiagnosticState.data;
@ -45,7 +45,7 @@
console.log('Tags count:', form.querySelectorAll('TagsInput button').length); console.log('Tags count:', form.querySelectorAll('TagsInput button').length);
console.log('--- STEP 3: RADIO ---'); console.log('--- STEP 3: RADIO ---');
DiagnosticState.schema = [{ id: 'r1', name: 'r1', label: '', type: 'radio', options: ['Op1', 'Op2'] }]; DiagnosticState.schema = [{ name: 'r1', label: '', type: 'radio', options: ['Op1', 'Op2'] }];
DiagnosticState.data = { r1: 'Op2' }; DiagnosticState.data = { r1: 'Op2' };
form.state.schema = DiagnosticState.schema; form.state.schema = DiagnosticState.schema;
form.data = DiagnosticState.data; form.data = DiagnosticState.data;

103
test/diagnostic_full.html
View File

@ -1,103 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AutoForm Comprehensive Diagnostic</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script type="importmap">
{
"imports": {
"@web/state": "../../state/src/index.js",
"@web/base": "../../base/src/index.js"
}
}
</script>
<script type="module">
import { Component, NewState, RefreshState } from '@web/state';
import '@web/base';
window.RefreshState = RefreshState;
window.NewState = NewState;
window.DiagnosticState = {
data: NewState({
text: 'initial',
tags: ['A', 'B'],
area: 'long text',
sel: 'v1'
})
};
const log = (msg, color = 'black') => {
const pre = document.getElementById('log');
const div = document.createElement('div');
div.style.color = color;
div.textContent = msg;
pre.appendChild(div);
console.log(msg);
};
window.runFullDiagnostic = async () => {
document.getElementById('log').innerHTML = '';
const form = document.getElementById('diagForm');
if (!form.state) form.state = NewState({ schema: [] });
const assert = (condition, msg) => {
if (condition) log('✅ ' + msg, 'green');
else log('❌ ' + msg, 'red');
};
log('--- STEP 1: Text Input ---');
form.state.schema = [{ id: 'text', name: 'text', label: '', type: 'text' }];
form.data = DiagnosticState.data;
RefreshState(form);
await new Promise(r => setTimeout(r, 100));
assert(form.querySelector('input[type="text"]') !== null, 'Text input rendered');
assert(form.querySelector('input[type="text"]').value === 'initial', 'Text value correct');
log('--- STEP 2: Switch to TextArea ---');
form.state.schema = [{ id: 'area', name: 'area', label: '', type: 'textarea' }];
RefreshState(form);
await new Promise(r => setTimeout(r, 100));
assert(form.querySelector('textarea') !== null, 'TextArea rendered');
assert(form.querySelector('input[type="text"]') === null || form.querySelector('input[type="text"]').offsetParent === null, 'Text input hidden/removed');
assert(form.querySelector('textarea').value === 'long text', 'TextArea value correct');
log('--- STEP 3: Switch to TagsInput ---');
form.state.schema = [{ id: 'tags', name: 'tags', label: '', type: 'TagsInput' }];
RefreshState(form);
await new Promise(r => setTimeout(r, 100));
assert(form.querySelector('TagsInput') !== null, 'TagsInput rendered');
assert(form.querySelector('textarea') === null || form.querySelector('textarea').offsetParent === null, 'TextArea hidden/removed');
const tagButtons = form.querySelectorAll('TagsInput button');
assert(tagButtons.length === 2, 'Tags count correct: ' + tagButtons.length);
assert(tagButtons[0].textContent === 'A', 'Tag A rendered');
log('--- STEP 4: Test Data Persistence ---');
const input = form.querySelector('TagsInput input');
input.value = 'C';
input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
await new Promise(r => setTimeout(r, 100));
assert(DiagnosticState.data.tags.includes('C'), 'Data saved to proxy: ' + DiagnosticState.data.tags);
log('--- STEP 5: Switch back to Text & Verify ---');
form.state.schema = [{ id: 'text', name: 'text', label: '', type: 'text' }];
RefreshState(form);
await new Promise(r => setTimeout(r, 100));
const textInput = form.querySelector('input[type="text"]');
textInput.value = 'modified';
textInput.dispatchEvent(new Event('input', { bubbles: true }));
assert(DiagnosticState.data.text === 'modified', 'Text data saved: ' + DiagnosticState.data.text);
log('--- DIAGNOSTIC COMPLETE ---');
};
</script>
</head>
<body class="p-4">
<h3>AutoForm Comprehensive Diagnostic</h3>
<div style="width: 400px; border: 2px solid blue; min-height: 100px; padding: 10px;" class="bg-light">
<AutoForm id="diagForm" inline></AutoForm>
</div>
<button class="btn btn-primary mt-3" onclick="runFullDiagnostic()">RUN COMPREHENSIVE DIAGNOSTIC</button>
<div id="log" class="mt-4 p-3 border bg-dark text-light" style="font-family: monospace; white-space: pre-wrap; height: 300px; overflow-y: auto;"></div>
</body>
</html>

23
test/diagnostic_full.spec.js
View File

@ -1,23 +0,0 @@
import { test, expect } from '@playwright/test';
test('AutoForm comprehensive diagnostics', async ({ page }) => {
page.on('console', msg => console.log('BROWSER:', msg.text()));
await page.goto('/test/diagnostic_full.html');
await page.click('button:has-text("RUN COMPREHENSIVE DIAGNOSTIC")');
// Wait for completion (look for the "DIAGNOSTIC COMPLETE" log entry)
const log = page.locator('#log');
await expect(log).toContainText('DIAGNOSTIC COMPLETE', { timeout: 10000 });
// Check for any red "❌" marks
const failures = await page.evaluate(() => {
return Array.from(document.querySelectorAll('#log div'))
.filter(div => div.textContent.includes('❌'))
.map(div => div.textContent);
});
if (failures.length > 0) {
console.error('Diagnostic Failures:', failures);
}
expect(failures).toHaveLength(0);
});

23
test/index.html
View File

@ -38,16 +38,16 @@
const table = document.getElementById('myTable') const table = document.getElementById('myTable')
const fields = [ const fields = [
{ id: 'id', name: 'ID', width: 60, type: 'text', pinned: 'left' }, { id: 'id', name: 'ID', type: 'string', settings: { width: 60, formType: 'text', pinned: 'left' } },
{ id: 'name', name: 'User Name', width: 150, type: 'text', pinned: 'left' }, { id: 'name', name: 'User Name', type: 'string', settings: { width: 150, formType: 'text', pinned: 'left' } },
{ id: 'role', name: 'Role', width: 120, type: 'select', options: ['Admin', 'Editor', 'Viewer'] }, { id: 'role', name: 'Role', type: 'string', settings: { width: 120, formType: 'select', options: ['Admin', 'Editor', 'Viewer'] } },
{ id: 'active', name: 'Active', width: 80, type: 'switch' }, { id: 'active', name: 'Active', type: 'boolean', settings: { width: 80, formType: 'switch' } },
{ id: 'bio', name: 'Bio', width: 250, type: 'textarea' }, { id: 'bio', name: 'Bio', type: 'string', settings: { width: 250, formType: 'textarea' } },
{ id: 'gender', name: 'Gender', width: 120, type: 'radio', options: ['Male', 'Female', 'Other'] }, { id: 'gender', name: 'Gender', type: 'string', settings: { width: 120, formType: 'radio', options: ['Male', 'Female', 'Other'] } },
{ id: 'tags', name: 'Tags', width: 150, type: 'TagsInput' }, { id: 'tags', name: 'Tags', type: 'object', settings: { width: 150, formType: 'TagsInput' } },
{ id: 'score', name: 'Score', width: 100, type: 'number' }, { id: 'score', name: 'Score', type: 'number', settings: { width: 100, formType: 'number' } },
{ id: 'created', name: 'Created At', width: 150, type: 'date' }, { id: 'created', name: 'Created At', type: 'date', settings: { width: 150, formType: 'date' } },
{ id: 'actions', name: 'Actions', width: 100, type: 'text', pinned: 'right' } { id: 'actions', name: 'Actions', type: 'string', settings: { width: 100, formType: 'text', pinned: 'right' } }
] ]
const generateData = (count) => Array.from({ length: count }, (_, i) => ({ const generateData = (count) => Array.from({ length: count }, (_, i) => ({
@ -67,7 +67,8 @@
const init = () => { const init = () => {
if (table.state) { if (table.state) {
Object.assign(table.state, { fields, list: data }); table.state.fields = fields;
table.state.list = data;
RefreshState(table); RefreshState(table);
window.testStatus = 'passed'; window.testStatus = 'passed';
} else { } else {