fix: unhide option labels in inline editor By: AICoder
This commit is contained in:
AI Engineer
parent
ef40cf529b
commit
fc835f5a10
21
dist/datatable.js
vendored
21
dist/datatable.js
vendored
@ -623,15 +623,16 @@
|
||||
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);
|
||||
const minWidth = isComplex ? 300 : 200;
|
||||
Object.assign(overlay.style, {
|
||||
display: "flex",
|
||||
left: rect.left - rootRect.left + "px",
|
||||
top: rect.top - rootRect.top + "px",
|
||||
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",
|
||||
minHeight: rect.height + "px"
|
||||
minHeight: rect.height + 2 + "px",
|
||||
padding: "0"
|
||||
});
|
||||
setTimeout(() => {
|
||||
var _a2;
|
||||
@ -916,13 +917,13 @@
|
||||
</template>
|
||||
</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'">
|
||||
<div slot="body"><AutoForm nobutton class="p-3"></AutoForm></div>
|
||||
<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-primary" data-bs-dismiss="modal" $onclick="this.closest('Modal').result=2">Save</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="thisNode.closest('Modal').result=2">Save</button>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
@ -965,6 +966,8 @@
|
||||
.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; }
|
||||
.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>
|
||||
`
|
||||
));
|
||||
|
||||
2
dist/datatable.min.js
vendored
2
dist/datatable.min.js
vendored
File diff suppressed because one or more lines are too long
4
package-lock.json
generated
4
package-lock.json
generated
@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "@web/datatable",
|
||||
"version": "1.0.10",
|
||||
"version": "1.0.11",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "@web/datatable",
|
||||
"version": "1.0.10",
|
||||
"version": "1.0.11",
|
||||
"devDependencies": {
|
||||
"@playwright/test": "^1.40.0",
|
||||
"@rollup/plugin-terser": "^1.0.0",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@web/datatable",
|
||||
"version": "1.0.10",
|
||||
"version": "1.0.11",
|
||||
"type": "module",
|
||||
"main": "dist/datatable.js",
|
||||
"module": "dist/datatable.js",
|
||||
|
||||
@ -435,13 +435,16 @@ 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);
|
||||
const minWidth = isComplex ? 300 : 200;
|
||||
Object.assign(overlay.style, {
|
||||
display: 'flex', left: (rect.left - rootRect.left) + 'px', top: (rect.top - rootRect.top) + 'px',
|
||||
width: Math.max(rect.width, minWidth) + 'px',
|
||||
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',
|
||||
height: 'auto',
|
||||
minHeight: rect.height + 'px'
|
||||
minHeight: (rect.height + 2) + 'px',
|
||||
padding: '0'
|
||||
});
|
||||
setTimeout(() => overlay.querySelector('input, textarea, select, .form-control')?.focus(), 30);
|
||||
};
|
||||
@ -691,13 +694,13 @@ globalThis.Component.register('DataTable', container => {
|
||||
</template>
|
||||
</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'">
|
||||
<div slot="body"><AutoForm nobutton class="p-3"></AutoForm></div>
|
||||
<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-primary" data-bs-dismiss="modal" $onclick="this.closest('Modal').result=2">Save</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="thisNode.closest('Modal').result=2">Save</button>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
@ -737,6 +740,8 @@ globalThis.Component.register('DataTable', container => {
|
||||
.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; }
|
||||
.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>
|
||||
`))
|
||||
|
||||
|
||||
@ -623,15 +623,16 @@
|
||||
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);
|
||||
const minWidth = isComplex ? 300 : 200;
|
||||
Object.assign(overlay.style, {
|
||||
display: "flex",
|
||||
left: rect.left - rootRect.left + "px",
|
||||
top: rect.top - rootRect.top + "px",
|
||||
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",
|
||||
minHeight: rect.height + "px"
|
||||
minHeight: rect.height + 2 + "px",
|
||||
padding: "0"
|
||||
});
|
||||
setTimeout(() => {
|
||||
var _a2;
|
||||
@ -916,13 +917,13 @@
|
||||
</template>
|
||||
</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'">
|
||||
<div slot="body"><AutoForm nobutton class="p-3"></AutoForm></div>
|
||||
<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-primary" data-bs-dismiss="modal" $onclick="this.closest('Modal').result=2">Save</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="thisNode.closest('Modal').result=2">Save</button>
|
||||
</div>
|
||||
</Modal>
|
||||
|
||||
@ -965,6 +966,8 @@
|
||||
.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; }
|
||||
.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>
|
||||
`
|
||||
));
|
||||
|
||||
2
test/lib/datatable.min.js
vendored
2
test/lib/datatable.min.js
vendored
File diff suppressed because one or more lines are too long
Loading…
x
Reference in New Issue
Block a user