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

fix: unhide option labels in inline editor By: AICoder

Browse Source
This commit is contained in:
AI Engineer 2026-06-11 22:51:18 +08:00
parent ef40cf529b
commit fc835f5a10
7 changed files with 42 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
dist/datatable.js vendored
View File

@ -623,15 +623,16 @@
form.data = row; form.data = row;
form.state.schema = [{ ...field, type: formType, options: ((_b = field.settings) == null ? void 0 : _b.options) || field.options, name: field.id, label: "" }]; 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);
const minWidth = isComplex ? 300 : 200;
Object.assign(overlay.style, { Object.assign(overlay.style, {
display: "flex", display: "flex",
left: rect.left - rootRect.left + "px", left: rect.left - rootRect.left - 1 + "px",
top: rect.top - rootRect.top + "px", top: rect.top - rootRect.top - 1 + "px",
width: Math.max(rect.width, minWidth) + "px", minWidth: rect.width + 2 + "px",
width: "max-content",
maxWidth: "400px",
height: "auto", height: "auto",
minHeight: rect.height + "px" minHeight: rect.height + 2 + "px",
padding: "0"
}); });
setTimeout(() => { setTimeout(() => {
var _a2; var _a2;
@ -916,13 +917,13 @@
</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 nobutton vertical style="display: block; width: 100%; height: 100%; padding: 4px;" $onsubmit="event.preventDefault(); thisNode.closest('DataTable').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); padding: 0;"><AutoForm nobutton inline class="h-100 w-100" $onsubmit="event.preventDefault(); thisNode.closest('DataTable').hideEditor(true)"></AutoForm></div>
<Modal $.id="this.id + '_field_modal'"> <Modal $.id="this.id + '_field_modal'">
<div slot="body"><AutoForm nobutton class="p-3"></AutoForm></div> <div slot="body"><AutoForm nobutton class="p-3"></AutoForm></div>
<div slot="footer"> <div slot="footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" $onclick="this.closest('Modal').result=1">Cancel</button> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" $onclick="thisNode.closest('Modal').result=1">Cancel</button>
<button type="button" class="btn btn-primary" data-bs-dismiss="modal" $onclick="this.closest('Modal').result=2">Save</button> <button type="button" class="btn btn-primary" data-bs-dismiss="modal" $onclick="thisNode.closest('Modal').result=2">Save</button>
</div> </div>
</Modal> </Modal>
@ -965,6 +966,8 @@
.dt-filter-tabs div:hover i { color: var(--bs-primary); } .dt-filter-tabs div:hover i { color: var(--bs-primary); }
.menu-item-row .only-btn { opacity: 0; } .menu-item-row .only-btn { opacity: 0; }
.menu-item-row:hover .only-btn { opacity: 1; } .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; }
</style> </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", "name": "@web/datatable",
"version": "1.0.10", "version": "1.0.11",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "@web/datatable", "name": "@web/datatable",
"version": "1.0.10", "version": "1.0.11",
"devDependencies": { "devDependencies": {
"@playwright/test": "^1.40.0", "@playwright/test": "^1.40.0",
"@rollup/plugin-terser": "^1.0.0", "@rollup/plugin-terser": "^1.0.0",

2
package.json
View File

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

21
src/DataTable.js
View File

@ -435,13 +435,16 @@ globalThis.Component.register('DataTable', container => {
form.data = row; form.data = row;
form.state.schema = [{ ...field, type: formType, options: field.settings?.options || field.options, name: field.id, label: '' }]; form.state.schema = [{ ...field, type: formType, options: field.settings?.options || field.options, name: field.id, label: '' }];
} }
const isComplex = ['textarea', 'TagsInput', 'checkbox', 'radio'].includes(formType);
const minWidth = isComplex ? 300 : 200;
Object.assign(overlay.style, { Object.assign(overlay.style, {
display: 'flex', left: (rect.left - rootRect.left) + 'px', top: (rect.top - rootRect.top) + 'px', display: 'flex',
width: Math.max(rect.width, minWidth) + 'px', left: (rect.left - rootRect.left - 1) + 'px',
top: (rect.top - rootRect.top - 1) + 'px',
minWidth: (rect.width + 2) + 'px',
width: 'max-content',
maxWidth: '400px',
height: 'auto', height: 'auto',
minHeight: rect.height + 'px' minHeight: (rect.height + 2) + 'px',
padding: '0'
}); });
setTimeout(() => overlay.querySelector('input, textarea, select, .form-control')?.focus(), 30); setTimeout(() => overlay.querySelector('input, textarea, select, .form-control')?.focus(), 30);
}; };
@ -691,13 +694,13 @@ globalThis.Component.register('DataTable', container => {
</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 nobutton vertical style="display: block; width: 100%; height: 100%; padding: 4px;" $onsubmit="event.preventDefault(); thisNode.closest('DataTable').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); padding: 0;"><AutoForm nobutton inline class="h-100 w-100" $onsubmit="event.preventDefault(); thisNode.closest('DataTable').hideEditor(true)"></AutoForm></div>
<Modal $.id="this.id + '_field_modal'"> <Modal $.id="this.id + '_field_modal'">
<div slot="body"><AutoForm nobutton class="p-3"></AutoForm></div> <div slot="body"><AutoForm nobutton class="p-3"></AutoForm></div>
<div slot="footer"> <div slot="footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" $onclick="this.closest('Modal').result=1">Cancel</button> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" $onclick="thisNode.closest('Modal').result=1">Cancel</button>
<button type="button" class="btn btn-primary" data-bs-dismiss="modal" $onclick="this.closest('Modal').result=2">Save</button> <button type="button" class="btn btn-primary" data-bs-dismiss="modal" $onclick="thisNode.closest('Modal').result=2">Save</button>
</div> </div>
</Modal> </Modal>
@ -737,6 +740,8 @@ globalThis.Component.register('DataTable', container => {
.dt-filter-tabs div:hover i { color: var(--bs-primary); } .dt-filter-tabs div:hover i { color: var(--bs-primary); }
.menu-item-row .only-btn { opacity: 0; } .menu-item-row .only-btn { opacity: 0; }
.menu-item-row:hover .only-btn { opacity: 1; } .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; }
</style> </style>
`)) `))

21
test/lib/datatable.js
View File

@ -623,15 +623,16 @@
form.data = row; form.data = row;
form.state.schema = [{ ...field, type: formType, options: ((_b = field.settings) == null ? void 0 : _b.options) || field.options, name: field.id, label: "" }]; 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);
const minWidth = isComplex ? 300 : 200;
Object.assign(overlay.style, { Object.assign(overlay.style, {
display: "flex", display: "flex",
left: rect.left - rootRect.left + "px", left: rect.left - rootRect.left - 1 + "px",
top: rect.top - rootRect.top + "px", top: rect.top - rootRect.top - 1 + "px",
width: Math.max(rect.width, minWidth) + "px", minWidth: rect.width + 2 + "px",
width: "max-content",
maxWidth: "400px",
height: "auto", height: "auto",
minHeight: rect.height + "px" minHeight: rect.height + 2 + "px",
padding: "0"
}); });
setTimeout(() => { setTimeout(() => {
var _a2; var _a2;
@ -916,13 +917,13 @@
</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 nobutton vertical style="display: block; width: 100%; height: 100%; padding: 4px;" $onsubmit="event.preventDefault(); thisNode.closest('DataTable').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); padding: 0;"><AutoForm nobutton inline class="h-100 w-100" $onsubmit="event.preventDefault(); thisNode.closest('DataTable').hideEditor(true)"></AutoForm></div>
<Modal $.id="this.id + '_field_modal'"> <Modal $.id="this.id + '_field_modal'">
<div slot="body"><AutoForm nobutton class="p-3"></AutoForm></div> <div slot="body"><AutoForm nobutton class="p-3"></AutoForm></div>
<div slot="footer"> <div slot="footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" $onclick="this.closest('Modal').result=1">Cancel</button> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" $onclick="thisNode.closest('Modal').result=1">Cancel</button>
<button type="button" class="btn btn-primary" data-bs-dismiss="modal" $onclick="this.closest('Modal').result=2">Save</button> <button type="button" class="btn btn-primary" data-bs-dismiss="modal" $onclick="thisNode.closest('Modal').result=2">Save</button>
</div> </div>
</Modal> </Modal>
@ -965,6 +966,8 @@
.dt-filter-tabs div:hover i { color: var(--bs-primary); } .dt-filter-tabs div:hover i { color: var(--bs-primary); }
.menu-item-row .only-btn { opacity: 0; } .menu-item-row .only-btn { opacity: 0; }
.menu-item-row:hover .only-btn { opacity: 1; } .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; }
</style> </style>
` `
)); ));

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

File diff suppressed because one or more lines are too long