2026-07-13 22:24:23 +08:00
|
|
|
const AUTOFORM_BLUEPRINT=globalThis.Util.makeDom('\n<div class="auto-form-root">\n <form $class="${this.inline ? \'d-flex flex-wrap align-items-center gap-3\' : (this.vertical ? \'d-flex flex-column\' : (this.horizontal ? \'auto-grid-form forced-horizontal\' : \'auto-grid-form\'))}" $onsubmit="event.stopPropagation();event.preventDefault();this.submit()">\n\n <template $each="this.state._schema || []">\n <template $$if="item.if || \'true\'">\n <template $if="item.type === \'divider\'">\n <div style="grid-column:1/-1" class="pt-2 pb-1"><hr class="my-2"><div $if="item.label" $text="item.label" class="small fw-semibold text-muted text-uppercase"></div></div>\n </template>\n <template $if="item.type !== \'divider\'">\n <div style="display:contents">\n <label $name="item.name" $class="${this.inline ? \'mb-0 text-muted text-nowrap\' : \'col-form-label text-muted\'}" $text="item.label"></label>\n <div control-wrapper $class="${this.inline ? \'d-flex align-items-center\' : \'mb-3 d-flex align-items-center\'}">\n <template $if="[\'text\', \'password\', \'email\', \'number\', \'date\', \'datetime\', \'file\'].includes(item.type)"><input $name="item.name" $type="item.type" $.="item.setting || {}" $bind="this.state.data[item.name]" $class="form-control ${item.type === \'number\' ? \'text-end\' : \'\'}"></template>\n\n <template $if="item.type === \'select\'"><select $name="item.name" $.="item.setting || {}" $bind="this.state.data[item.name]" class="form-select">\n <option value="" $if="item.placeholder" $text="item.placeholder" disabled selected></option>\n <option $each="item.options" as="opt" $value="opt.value !== undefined ? opt.value : opt" $text="opt.label || opt"></option>\n </select></template>\n\n <template $if="[\'checkbox\', \'radio\'].includes(item.type)"><div class="d-flex align-items-center flex-wrap gap-3 h-100" style="padding: 0 0.75rem; min-height: calc(2.25rem + 2px);">\n <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;">\n <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.state.data[item.name]">\n <span $if="!this.inline || (item.options && item.options.length > 0)" $text="opt.label || opt" class="form-check-label"></span>\n </label>\n </div></template>\n\n <template $if="item.type === \'switch\'"><div class="form-check form-switch fs-5 d-flex align-items-center m-0" style="padding: 0 0.75rem; min-height: calc(2.25rem + 2px); display:flex !important;">\n <input $name="item.name" class="form-check-input m-0" style="float:none; cursor:pointer" type="checkbox" $bind="this.state.data[item.name]">\n </div></template>\n\n <template $if="item.type === \'textarea\'"><textarea $name="item.name" class="form-control" $.="item.setting || {}" $bind="this.state.data[item.name]"></textarea></template>\n\n <template $if="item.type === \'label\'"><span $name="item.name" $.="item.setting || {}" $text="item.value ?? this.state.data[item.name] ?? \'\'" class="form-control-plaintext text-break py-1"></span></template>\n </div>\n </div>\n </template>\n </template>\n </template>\n\n <div $class="${this.inline ? \'\' : \'d-flex justify-content-end align-items-baseline gap-3 mt-2\'}" $style="${this.inline ? \'\' : \'grid-column:1/-1\'}">\n <div slot-id="actions"></div>\n <button $if="!this.nobutton" type="submit" class="btn btn-primary" $text="this.submitlabel || \'{#Submit#}\'"></button>\n </div>\n </form>\n</div>\n'),AUTOFORM_STYLE=globalThis.Util.makeDom("<style>\n .auto-grid-form { display: block; }\n .auto-grid-form .col-form-label { text-align: left; margin-bottom: 0.25rem; padding-top: 0; }\n\n @medi
|
