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

fix: copy paste keydown listener and checkbox padding in inline editor By: AICoder

Browse Source
This commit is contained in:
AI Engineer 2026-06-11 23:20:08 +08:00
parent fc835f5a10
commit ba7fccd6a7
8 changed files with 46 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
dist/datatable.js vendored
View File

@ -623,13 +623,12 @@
form.data = row;
form.state.schema = [{ ...field, type: formType, options: ((_b = field.settings) == null ? void 0 : _b.options) || field.options, name: field.id, label: "" }];
}
const isComplex = ["textarea", "TagsInput", "checkbox", "radio"].includes(formType);
Object.assign(overlay.style, {
display: "flex",
left: rect.left - rootRect.left - 1 + "px",
top: rect.top - rootRect.top - 1 + "px",
minWidth: rect.width + 2 + "px",
width: "max-content",
maxWidth: "400px",
width: Math.max(rect.width + 2, isComplex ? 300 : 0) + "px",
height: "auto",
minHeight: rect.height + 2 + "px",
padding: "0"
@ -838,6 +837,16 @@
if ((overlay == null ? void 0 : overlay.style.display) !== "none" && !overlay.contains(e.target)) container.hideEditor(true);
if (!container.contains(e.target) && !(overlay == null ? void 0 : overlay.contains(e.target)) && !(menu == null ? void 0 : menu.contains(e.target))) selection.clearAllActive();
});
container.addEventListener("keydown", (e) => {
if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "c") {
e.preventDefault();
selection.copy();
}
if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "v") {
e.preventDefault();
selection.paste();
}
});
state._MODE_ICONS = MODE_ICONS;
}, globalThis.Util.makeDom(
/*html*/
@ -968,6 +977,7 @@
.menu-item-row:hover .only-btn { opacity: 1; }
.dt-editor-overlay .auto-form-root form { gap: 0 !important; margin: 0 !important; }
.dt-editor-overlay [control-wrapper] { width: 100%; margin: 0 !important; min-height: 100% !important; align-items: stretch !important; }
.dt-editor-overlay [control-wrapper] > .d-flex { padding: 0 0.5rem; justify-content: flex-start !important; align-items: center !important; }
</style>
`
));

2
dist/datatable.min.js vendored
View File

File diff suppressed because one or more lines are too long

4
package-lock.json generated
View File

@ -1,12 +1,12 @@
{
"name": "@web/datatable",
"version": "1.0.11",
"version": "1.0.12",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "@web/datatable",
"version": "1.0.11",
"version": "1.0.12",
"devDependencies": {
"@playwright/test": "^1.40.0",
"@rollup/plugin-terser": "^1.0.0",

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "@web/datatable",
"version": "1.0.11",
"version": "1.0.12",
"type": "module",
"main": "dist/datatable.js",
"module": "dist/datatable.js",

17
src/DataTable.js
View File

@ -435,13 +435,12 @@ globalThis.Component.register('DataTable', container => {
form.data = row;
form.state.schema = [{ ...field, type: formType, options: field.settings?.options || field.options, name: field.id, label: '' }];
}
const isComplex = ['textarea', 'TagsInput', 'checkbox', 'radio'].includes(formType);
Object.assign(overlay.style, {
display: 'flex',
left: (rect.left - rootRect.left - 1) + 'px',
top: (rect.top - rootRect.top - 1) + 'px',
minWidth: (rect.width + 2) + 'px',
width: 'max-content',
maxWidth: '400px',
width: Math.max(rect.width + 2, isComplex ? 300 : 0) + 'px',
height: 'auto',
minHeight: (rect.height + 2) + 'px',
padding: '0'
@ -616,6 +615,17 @@ globalThis.Component.register('DataTable', container => {
if (overlay?.style.display !== 'none' && !overlay.contains(e.target)) container.hideEditor(true);
if (!container.contains(e.target) && !overlay?.contains(e.target) && !menu?.contains(e.target)) selection.clearAllActive();
});
container.addEventListener('keydown', e => {
if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'c') {
e.preventDefault();
selection.copy();
}
if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'v') {
e.preventDefault();
selection.paste();
}
});
state._MODE_ICONS = MODE_ICONS;
}, globalThis.Util.makeDom(/*html*/`
@ -742,6 +752,7 @@ globalThis.Component.register('DataTable', container => {
.menu-item-row:hover .only-btn { opacity: 1; }
.dt-editor-overlay .auto-form-root form { gap: 0 !important; margin: 0 !important; }
.dt-editor-overlay [control-wrapper] { width: 100%; margin: 0 !important; min-height: 100% !important; align-items: stretch !important; }
.dt-editor-overlay [control-wrapper] > .d-flex { padding: 0 0.5rem; justify-content: flex-start !important; align-items: center !important; }
</style>
`))

2
test/lib/base.js
View File

@ -129,7 +129,7 @@
<div $if="['checkbox', 'radio'].includes(item.type)" class="d-flex align-items-center flex-wrap gap-3 h-100">
<label $each="item.options || [item.text||item.label||item.name]" as="opt" class="form-check mb-0 d-flex align-items-center" style="padding-left:0; cursor:pointer;">
<input $name="item.name" class="form-check-input m-0 me-2" style="float:none;" $type="item.type" $.="item.setting || {}" $value="item.options?opt:'on'" $bind="this.data[item.name]">
<input $name="item.name" class="form-check-input m-0 me-2" style="float:none;" $type="item.type" $.="item.setting || {}" $value="item.options ? (opt.value !== undefined ? opt.value : opt) : 'on'" $bind="this.data[item.name]">
<span $if="!this.inline || (item.options && item.options.length > 0)" $text="opt.label || opt" class="form-check-label"></span>
</label>
</div>

16
test/lib/datatable.js
View File

@ -623,13 +623,12 @@
form.data = row;
form.state.schema = [{ ...field, type: formType, options: ((_b = field.settings) == null ? void 0 : _b.options) || field.options, name: field.id, label: "" }];
}
const isComplex = ["textarea", "TagsInput", "checkbox", "radio"].includes(formType);
Object.assign(overlay.style, {
display: "flex",
left: rect.left - rootRect.left - 1 + "px",
top: rect.top - rootRect.top - 1 + "px",
minWidth: rect.width + 2 + "px",
width: "max-content",
maxWidth: "400px",
width: Math.max(rect.width + 2, isComplex ? 300 : 0) + "px",
height: "auto",
minHeight: rect.height + 2 + "px",
padding: "0"
@ -838,6 +837,16 @@
if ((overlay == null ? void 0 : overlay.style.display) !== "none" && !overlay.contains(e.target)) container.hideEditor(true);
if (!container.contains(e.target) && !(overlay == null ? void 0 : overlay.contains(e.target)) && !(menu == null ? void 0 : menu.contains(e.target))) selection.clearAllActive();
});
container.addEventListener("keydown", (e) => {
if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "c") {
e.preventDefault();
selection.copy();
}
if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "v") {
e.preventDefault();
selection.paste();
}
});
state._MODE_ICONS = MODE_ICONS;
}, globalThis.Util.makeDom(
/*html*/
@ -968,6 +977,7 @@
.menu-item-row:hover .only-btn { opacity: 1; }
.dt-editor-overlay .auto-form-root form { gap: 0 !important; margin: 0 !important; }
.dt-editor-overlay [control-wrapper] { width: 100%; margin: 0 !important; min-height: 100% !important; align-items: stretch !important; }
.dt-editor-overlay [control-wrapper] > .d-flex { padding: 0 0.5rem; justify-content: flex-start !important; align-items: center !important; }
</style>
`
));

2
test/lib/datatable.min.js vendored
View File

File diff suppressed because one or more lines are too long