This commit is contained in:
2026-01-29 03:53:09 +02:00
parent 3e4992b0f7
commit 55f638b7f7
+50 -89
View File
@@ -513,28 +513,37 @@ export class Render {
* Set Input Default Attrs * Set Input Default Attrs
*/ */
static setInputAttr(input, field) { static setInputAttr(input, field) {
input.name = field.name;
if (field.title) {
input.title = field.title;
}
if (field.id) { Ut.each(field, (val, key) => {
input.id = field.id;
}
if (field.dataid) { if (key == 'readonly') {
input.dataset.id = field.dataid; key = 'readOnly';
} val = Boolean(val);
}
if (field.readonly == '1') { if (field.maxlength) {
input.readOnly = true; key = 'maxLength';
} val = Boolean(val);
}
if (field.required == '1') { if (key === 'required' || key === 'disabled') {
input.required = true; val = Boolean(val);
} }
if (input.constructor.prototype) {
if (key === 'type') {
return;
}
if (key === 'dataid') {
input.dataset.id = field.dataid;
return;
}
input[ key ] = val;
}
});
} }
/** /**
@@ -609,35 +618,22 @@ export class Render {
const input = El('input', { type: field.type, className: 'sp-form-control' }); const input = El('input', { type: field.type, className: 'sp-form-control' });
if (field.value) { if (field.type !== 'hidden' && field.placeholder) {
input.value = field.value;
}
if (field.type != 'hidden' && field.placeholder) {
input.placeholder = field.placeholder; input.placeholder = field.placeholder;
} }
if (field.type != 'hidden' && field.autocomplete) { if (field.type !== 'hidden' && field.autocomplete) {
input.setAttribute('autocomplete', field.autocomplete || 'off'); input.setAttribute('autocomplete', field.autocomplete || 'off');
} }
if (field.disabled == '1') {
input.disabled = true;
}
Render.setInputAttr(input, field); Render.setInputAttr(input, field);
let wrapper = Render.makeFieldWrapper(field, parent); Render.makeFieldWrapper(field, parent).append(input);
wrapper.appendChild(input);
if (field.cancelable == '1') { if (field.cancelable === '1') {
new Cancelable(input); new Cancelable(input);
} }
if (field.maxlength) {
input.maxLength = field.maxlength;
}
if (field['max-chars']) { if (field['max-chars']) {
input.Counter({ limit: field['max-chars'] }); input.Counter({ limit: field['max-chars'] });
} }
@@ -652,9 +648,7 @@ export class Render {
let elem = El('input', { type: 'password', className: 'sp-form-control' }); let elem = El('input', { type: 'password', className: 'sp-form-control' });
if (field.placeholder) {
elem.placeholder = field.placeholder;
}
Render.setInputAttr(elem, field); Render.setInputAttr(elem, field);
@@ -747,36 +741,6 @@ export class Render {
}); });
} }
/**
* Make Range Element
*/
static makeInputRangeElement(field, parent) {
let elem = El('input', { type: 'range' });
if (field.min) {
elem.setAttribute('min', field.min);
}
if (field.max) {
elem.setAttribute('max', field.max);
}
if (field.step) {
elem.setAttribute('step', field.step);
}
if (field.value) {
elem.value = field.value;
}
Render.setInputAttr(elem, field);
Render.makeFieldWrapper(field, parent).append(elem);
return elem;
}
/** /**
* Make Input Color Element * Make Input Color Element
*/ */
@@ -809,6 +773,18 @@ export class Render {
return input; return input;
} }
/**
* Make Default Input Element
*/
static makeDefaultInputElement(field, parent) {
const input = El('input', { type: field.type, className: 'sp-form-control' });
Render.setInputAttr(input, field);
return Render.makeFieldWrapper(field, parent).appendChild(input);
}
/** /**
* Make Select Element * Make Select Element
*/ */
@@ -816,15 +792,13 @@ export class Render {
let elem = El('select', { className: 'sp-form-control' }); let elem = El('select', { className: 'sp-form-control' });
if (field.multiple == '1') { if (field.multiple === '1') {
elem.multiple = true; elem.multiple = true;
} }
if (field.option) { if (field.option) {
Ut.each (field.option, (text, val) => { Ut.each (field.option, (text, val) => elem.append(new Option(text, val, val == field.value)) );
elem.append(new Option(text, val, val == field.value));
});
if (field.value) { if (field.value) {
elem.value = field.value; elem.value = field.value;
@@ -833,10 +807,6 @@ export class Render {
Render.setInputAttr(elem, field); Render.setInputAttr(elem, field);
if (field.cancelable == '1') {
new Cancelable(elem);
}
Render.makeFieldWrapper(field, parent).append(elem); Render.makeFieldWrapper(field, parent).append(elem);
return elem; return elem;
@@ -996,17 +966,7 @@ export class Render {
const input = parent.appendChild(El('input', { type: 'hidden' })); const input = parent.appendChild(El('input', { type: 'hidden' }));
if (field.name) { Ut.each(field, (val, key) => (key in HTMLInputElement.prototype) && (input[ key ] = val))
input.name = field.name;
}
if (field.id) {
input.id = field.id;
}
if (field.value) {
input.value = field.value;
}
return input; return input;
} }
@@ -1042,9 +1002,10 @@ export class Render {
switch (field.type) { switch (field.type) {
case 'text': return Render.makeInputElement(field, parent); case 'text': return Render.makeInputElement(field, parent);
case 'password': return Render.makeInputPwdElement(field, parent); case 'password': return Render.makeDefaultInputElement(field, parent);
case 'textarea': return Render.makeTextareaElement(field, parent); case 'textarea': return Render.makeTextareaElement(field, parent);
case 'range': return Render.makeInputRangeElement(field, parent); case 'number': return Render.makeDefaultInputElement(field, parent);
case 'range': return Render.makeDefaultInputElement(field, parent);
case 'color': return Render.makeInputColorElement(field, parent); case 'color': return Render.makeInputColorElement(field, parent);
case 'datepicker': return Render.makeDatePickerElement(field, parent); case 'datepicker': return Render.makeDatePickerElement(field, parent);
case 'twodatepicker': return Render.makeTwoDatePickerElement(field, parent); case 'twodatepicker': return Render.makeTwoDatePickerElement(field, parent);