This commit is contained in:
2025-12-02 01:54:59 +02:00
parent c5ca4162a3
commit 2c998d7ba8
33 changed files with 419 additions and 446 deletions
+12 -12
View File
@@ -55,20 +55,20 @@ export class App extends Boot {
let topBar = content.dxFind('.top-bar');
if (!topBar) {
topBar = El('div', { class: 'top-bar' });
topBar = El('div', { className: 'top-bar' });
content.prepend(topBar);
}
let topBarInner = topBar.dxFind('.top-bar-inner');
if (!topBarInner) {
topBarInner = topBar.appendChild( El('div', { class: 'top-bar-inner' }) );
topBarInner = topBar.appendChild( El('div', { className: 'top-bar-inner' }) );
}
let titleWrapper = topBarInner.dxFind('.title-wrapper');
if (!titleWrapper) {
titleWrapper = topBarInner.appendChild(El('div', { class: 'title-wrapper' }));
titleWrapper = topBarInner.appendChild(El('div', { className: 'title-wrapper' }));
}
return titleWrapper;
@@ -92,7 +92,7 @@ export class App extends Boot {
return;
}
elTitle = El('h2', { class: 'title' });
elTitle = El('h2', { className: 'title' });
if (Ut.isStr(title)) {
elTitle.dxHtml(title);
@@ -122,7 +122,7 @@ export class App extends Boot {
return;
}
elDescr = El('p', { class: 'descr' });
elDescr = El('p', { className: 'descr' });
if (Ut.isStr(title)) {
elTitle.dxHtml(title);
@@ -480,7 +480,7 @@ export class App extends Boot {
icon.className = 'fa' + (props['icon-type'] || 's') + ' fa-'+ props.icon;
}
else {
target.prepend(El('i', { class: 'fa' + (props['icon-type'] || 's') + ' fa-'+ props.icon }) );
target.prepend(El('i', { className: 'fa' + (props['icon-type'] || 's') + ' fa-'+ props.icon }) );
}
}
@@ -640,8 +640,8 @@ export class App extends Boot {
let menuItem = App.leftMenuItems.appendChild( El('li', {},
El('a', {},
El('span', { class: 'menu-item' }, dataItem.text),
El('i', { class: 'fa' + (dataItem['icon-type'] || 's') + ' fa-'+ dataItem.icon })
El('span', { className: 'menu-item' }, dataItem.text),
El('i', { className: 'fa' + (dataItem['icon-type'] || 's') + ' fa-'+ dataItem.icon })
)
));
@@ -677,8 +677,8 @@ export class App extends Boot {
let submenuItem = submenu.appendChild( El('li', {},
El('a', {},
El('span', { class: 'menu-item' }, secDataItem.text),
El('i', { class: 'fa' + (secDataItem['icon-type'] || 's') + ' fa-'+ secDataItem.icon })
El('span', { className: 'menu-item' }, secDataItem.text),
El('i', { className: 'fa' + (secDataItem['icon-type'] || 's') + ' fa-'+ secDataItem.icon })
)
));
@@ -718,8 +718,8 @@ export class App extends Boot {
let menuItem = App.dropdownMenuItems.appendChild( El('li', {},
El('a', {},
El('span', { class: 'menu-item' }, dataItem.text),
El('i', { class: 'fa' + (dataItem['icon-type'] || 's') + ' fa-'+ dataItem.icon })
El('span', { className: 'menu-item' }, dataItem.text),
El('i', { className: 'fa' + (dataItem['icon-type'] || 's') + ' fa-'+ dataItem.icon })
)
));
+3
View File
@@ -16,6 +16,9 @@
ENTRY_EXISTS: 409, // Entry already exists (conflict)
DELETED: 410, // Entry deleted
TOO_LARGE: 413, // Reqquest too large
UNSUPPORTED_TYPE: 415, // Unsupported media type
INVALID_CSRF: 419, // Page Expired (non-standard, CSRF failure)
NOT_MATCH: 422, // Data mismatch / validation failed
+51 -51
View File
@@ -17,7 +17,7 @@ export class Render {
node.outline = Ut.isSet(node.outline) ? node.outline : 1;
let card = El('div', { class: 'sp-card' });
let card = El('div', { className: 'sp-card' });
if (node.name) {
card.className += ' card-' + node.name;
@@ -30,12 +30,12 @@ export class Render {
let content = card;
if (node.outline == 1) {
content = card.appendChild( El('div', { class: 'content-card' }) );
content = card.appendChild( El('div', { className: 'content-card' }) );
}
if (node.children && node.children.tabmenu) {
let tabMenu = content.appendChild(El('div', { class: 'tab-menu' }));
let tabMenu = content.appendChild(El('div', { className: 'tab-menu' }));
let active = false;
@@ -46,7 +46,7 @@ export class Render {
}
let item = tabMenu.appendChild(El('a', {},
El('i', { class: 'fa' + (dataItem['icon-type'] || 's') + ' fa-'+ dataItem.icon }),
El('i', { className: 'fa' + (dataItem['icon-type'] || 's') + ' fa-'+ dataItem.icon }),
El('span', {}, dataItem.text)
));
@@ -72,38 +72,38 @@ export class Render {
if (node['hide-toolbar'] != 1) {
let topBar = El('div', { class: 'top-bar' });
let topBar = El('div', { className: 'top-bar' });
content.append(topBar);
if (node.title || node.descr || (node.children && node.children.toolbar)) {
let topBarInner = El('div', { class: 'top-bar-inner' });
let topBarInner = El('div', { className: 'top-bar-inner' });
topBar.append(topBarInner);
if (node.title || node.descr) {
let titleWrapper = topBarInner.appendChild(El('div', { class: 'title-wrapper' }));
let titleWrapper = topBarInner.appendChild(El('div', { className: 'title-wrapper' }));
if (node.title) {
titleWrapper.append( El('h2', { class: 'title' }, Ut.tplString(node.title, node.template) ));
titleWrapper.append( El('h2', { className: 'title' }, Ut.tplString(node.title, node.template) ));
}
if (node.descr) {
titleWrapper.append( El('p', { class: 'descr' }, Ut.tplString(node.descr, node.template)) );
titleWrapper.append( El('p', { className: 'descr' }, Ut.tplString(node.descr, node.template)) );
}
}
if (node.children && node.children.toolbar) {
Render.makeUiElements(Ut.objVal(node.children.toolbar).children, topBarInner.appendChild(El('div', { class: 'ml10 flex v-center no-shrink' })) );
Render.makeUiElements(Ut.objVal(node.children.toolbar).children, topBarInner.appendChild(El('div', { className: 'ml10 flex v-center no-shrink' })) );
}
}
}
let container = (node['hide-content'] == 1)
? content
: content.appendChild(El('div', { class: 'container' }));
: content.appendChild(El('div', { className: 'container' }));
if (parent) {
parent.append(card);
@@ -123,7 +123,7 @@ export class Render {
*/
static makeBlockElement(node, parent) {
let block = El('div', { class: 'sp-block block-'+ node.name });
let block = El('div', { className: 'sp-block block-'+ node.name });
if (node.cls) {
block.className += ' ' + node.cls;
@@ -167,7 +167,7 @@ export class Render {
let form = El('form', {
novalidate: true,
class: 'sp-form form-'+ node.name + (node.cls ? ' ' + node.cls : ''),
className: 'sp-form form-'+ node.name + (node.cls ? ' ' + node.cls : ''),
autocomplete: 'off',
method: 'post'
});
@@ -196,7 +196,7 @@ export class Render {
*/
static makeListElement(node, parent) {
let list = El('ul', { class: 'sp-list list-'+ node.name + (node.cls ? ' ' + node.cls : ''),
let list = El('ul', { className: 'sp-list list-'+ node.name + (node.cls ? ' ' + node.cls : ''),
id: node.id || null
});
@@ -209,17 +209,17 @@ export class Render {
Ut.each (node.children.item, (item, action) => {
let itm = El('li', {
class: 'item-'+ (item.type || 'text') + (item.type == 'link' ? ' cmd-' : ' item-') + action + (item.cls ? ' ' + item.cls : ''),
className: 'item-'+ (item.type || 'text') + (item.type == 'link' ? ' cmd-' : ' item-') + action + (item.cls ? ' ' + item.cls : ''),
'data-id': item.id || null,
});
if (item.icon) {
let icon = item.icon.split(' ');
itm.append(El('i', { class: 'fa-'+ (icon[1] || 'solid') +' fa-'+ icon[0] }) );
itm.append(El('i', { className: 'fa-'+ (icon[1] || 'solid') +' fa-'+ icon[0] }) );
}
if (item.label) {
itm.append(El('span', { class: 'item-label' }, Ut.tplString(item.label, node.template) ));
itm.append(El('span', { className: 'item-label' }, Ut.tplString(item.label, node.template) ));
}
list.append(itm);
@@ -238,7 +238,7 @@ export class Render {
*/
static makeTitleElement(node, parent) {
let blockTitle = El('div', { class: 'sp-title mb'+ (node.mb || 30) +' title-'+ node.name });
let blockTitle = El('div', { className: 'sp-title mb'+ (node.mb || 30) +' title-'+ node.name });
if (node.mt) {
blockTitle.classList.add('mt' + node.mt);
@@ -249,10 +249,10 @@ export class Render {
}
if (node.icon) {
blockTitle.appendChild(El('i', { class: 'fa' + (field['icon-type'] || 's') + ' fa-'+ field.icon }) );
blockTitle.appendChild(El('i', { className: 'fa' + (field['icon-type'] || 's') + ' fa-'+ field.icon }) );
}
let title = blockTitle.appendChild(El('h2', { class: 'text-semibold fz' + (node.size || 22) }));
let title = blockTitle.appendChild(El('h2', { className: 'text-semibold fz' + (node.size || 22) }));
if (node.label) {
title.textContent = Ut.tplString(node.label, node.template);
@@ -270,7 +270,7 @@ export class Render {
*/
static makeCaptionElement(node, parent) {
let blockTitle = El('div', { class: 'sp-caption mb'+ (node.mb || 30) +' caption-'+ node.name });
let blockTitle = El('div', { className: 'sp-caption mb'+ (node.mb || 30) +' caption-'+ node.name });
if (node.mt) {
blockTitle.classList.add('mt' + node.mt);
@@ -281,10 +281,10 @@ export class Render {
}
if (node.icon) {
blockTitle.appendChild(El('i', { class: 'fa' + (field['icon-type'] || 's') + ' fa-'+ field.icon }) );
blockTitle.appendChild(El('i', { className: 'fa' + (field['icon-type'] || 's') + ' fa-'+ field.icon }) );
}
let title = blockTitle.appendChild(El('h3', { class: 'text-medium fz' + (node.size || 18) }));
let title = blockTitle.appendChild(El('h3', { className: 'text-medium fz' + (node.size || 18) }));
if (node.label) {
title.textContent = Ut.tplString(node.label, node.template);
@@ -302,7 +302,7 @@ export class Render {
*/
static makeInfoElement(field, parent) {
let labelWrapper = El('div', { class: 'form-field field-info' });
let labelWrapper = El('div', { className: 'form-field field-info' });
if (field.name) {
labelWrapper.dataset.name = field.name;
@@ -317,16 +317,16 @@ export class Render {
}
if (field.icon) {
labelWrapper.append( El('i', { class: 'fa' + (field['icon-type'] || 's') + ' fa-'+ field.icon + ' ic-info fz' + (field['icon-size'] || 32) + ' color-' + (field['icon-color'] || 'black') }) );
labelWrapper.append( El('i', { className: 'fa' + (field['icon-type'] || 's') + ' fa-'+ field.icon + ' ic-info fz' + (field['icon-size'] || 32) + ' color-' + (field['icon-color'] || 'black') }) );
}
let group = El('div');
if (field.label) {
group.append(El('label', { class: 'label-name' }, Ut.tplString(field.label, field.template)));
group.append(El('label', { className: 'label-name' }, Ut.tplString(field.label, field.template)));
}
let labelValue = El('div', { class: 'label-value' });
let labelValue = El('div', { className: 'label-value' });
if (field.wrap) {
labelValue.className += ' text-wrap';
@@ -356,7 +356,7 @@ export class Render {
*/
static makeLinkElement(node, parent) {
let elem = El('a', { class: 'link' });
let elem = El('a', { className: 'link' });
if (node.name) {
elem.className += ' link-' + node.name;
@@ -371,7 +371,7 @@ export class Render {
}
if (node.icon) {
elem.prepend(El('i', { class: 'fa' + (node['icon-type'] || 's') + ' fa-'+ node.icon }) );
elem.prepend(El('i', { className: 'fa' + (node['icon-type'] || 's') + ' fa-'+ node.icon }) );
}
if (node.label) {
@@ -414,7 +414,7 @@ export class Render {
*/
static makeCardMenu(node, parent) {
let cardMenu = El('div', { class: 'sp-card-menu' });
let cardMenu = El('div', { className: 'sp-card-menu' });
if (node?.children?.item) {
@@ -424,11 +424,11 @@ export class Render {
return;
}
const menuItem = cardMenu.appendChild( El('a', { class: 'card-menu-item' },
El('div', { class: 'card-icon-wrapper' },
El('i', { class: 'fa' + (item['icon-type'] || 's') + ' fa-'+ (item.icon || 'cog') + ' fz' + (item['icon-size'] || 36) })
const menuItem = cardMenu.appendChild( El('a', { className: 'card-menu-item' },
El('div', { className: 'card-icon-wrapper' },
El('i', { className: 'fa' + (item['icon-type'] || 's') + ' fa-'+ (item.icon || 'cog') + ' fz' + (item['icon-size'] || 36) })
),
El('div', { class:'card-menu-title' }, item.title)
El('div', { className: 'card-menu-title' }, item.title)
) );
if (item.id) {
@@ -440,7 +440,7 @@ export class Render {
}
if (item.descr) {
menuItem.append(El('div', { class: 'card-menu-descr' }, item.descr));
menuItem.append(El('div', { className: 'card-menu-descr' }, item.descr));
}
cardMenu.append(menuItem);
@@ -492,7 +492,7 @@ export class Render {
}
if (node.icon) {
elem.append( El('i', { class: 'icon-' + (node['icon-align'] || 'left') + ' fa' + (node['icon-type'] || 's') + ' fa-' + node.icon + ' fz' + (node['icon-size'] || 14) + ' color-' + (node['icon-color'] || 'white') }) );
elem.append( El('i', { className: 'icon-' + (node['icon-align'] || 'left') + ' fa' + (node['icon-type'] || 's') + ' fa-' + node.icon + ' fz' + (node['icon-size'] || 14) + ' color-' + (node['icon-color'] || 'white') }) );
}
if (node.tooltip) {
@@ -548,7 +548,7 @@ export class Render {
*/
static makeFieldWrapper(field, parent) {
let wrapper = El('div', { class: 'form-field field-' + field.type });
let wrapper = El('div', { className: 'form-field field-' + field.type });
if (field.name) {
wrapper.className += ' field-' + field.name;
@@ -559,14 +559,14 @@ export class Render {
}
if (field.label) {
wrapper.append( El('label', { class: 'field-label' }, Ut.tplString(field.label, field.template)) );
wrapper.append( El('label', { className: 'field-label' }, Ut.tplString(field.label, field.template)) );
}
let inputWrapper = null;
if (field.type == 'text' || field.type == 'password' || field.type == 'select') {
inputWrapper = El('div', { class: 'input-wrapper' });
inputWrapper = El('div', { className: 'input-wrapper' });
wrapper.append(inputWrapper);
@@ -576,12 +576,12 @@ export class Render {
if (field['icon-tooltip'] || field['icon-action']) {
icon = El('a', { class: 'icon-' + (field['icon-align'] || 'left') },
El('i', { class: 'fa' + (field['icon-type'] || 's') + ' fa-' + field.icon + ' fz' + (field['icon-size'] || 14) + ' color-' + (field['icon-color'] || 'black') })
icon = El('a', { className: 'icon-' + (field['icon-align'] || 'left') },
El('i', { className: 'fa' + (field['icon-type'] || 's') + ' fa-' + field.icon + ' fz' + (field['icon-size'] || 14) + ' color-' + (field['icon-color'] || 'black') })
);
}
else {
icon = El('i', { class: 'icon-' + (field['icon-align'] || 'left') + ' fa' + (field['icon-type'] || 's') + ' fa-' + field.icon + ' fz' + (field['icon-size'] || 14) + ' color-' + (field['icon-color'] || 'black') });
icon = El('i', { className: 'icon-' + (field['icon-align'] || 'left') + ' fa' + (field['icon-type'] || 's') + ' fa-' + field.icon + ' fz' + (field['icon-size'] || 14) + ' color-' + (field['icon-color'] || 'black') });
}
if (field['icon-tooltip']) {
@@ -613,7 +613,7 @@ export class Render {
*/
static makeInputElement(field, parent) {
let input = El('input', { type: field.type, class: 'sp-form-control' });
let input = El('input', { type: field.type, className: 'sp-form-control' });
if (field.value) {
input.value = field.value;
@@ -656,7 +656,7 @@ export class Render {
*/
static makeInputPwdElement(field, parent) {
let elem = El('input', { type: 'password', class: 'sp-form-control' });
let elem = El('input', { type: 'password', className: 'sp-form-control' });
if (field.placeholder) {
elem.placeholder = field.placeholder;
@@ -674,7 +674,7 @@ export class Render {
*/
static makeTextareaElement(field, parent) {
let textarea = El('textarea', { class: 'sp-form-control' });
let textarea = El('textarea', { className: 'sp-form-control' });
if (field.rows) {
textarea.setAttribute('rows', field.rows);
@@ -796,7 +796,7 @@ export class Render {
let input = El('input', { type: 'color' });
let elem = El('div', { class: 'input-color-wrapper' }, input);
let elem = El('div', { className: 'input-color-wrapper' }, input);
Render.setInputAttr(input, field);
@@ -826,7 +826,7 @@ export class Render {
*/
static makeSelectElement(field, parent) {
let elem = El('select', { class: 'sp-form-control' });
let elem = El('select', { className: 'sp-form-control' });
if (field.multiple == '1') {
elem.multiple = true;
@@ -863,7 +863,7 @@ export class Render {
return false;
}
let elem = El('div', { class: 'sp-control ' + field.type +'-control' });
let elem = El('div', { className: 'sp-control ' + field.type +'-control' });
Ut.each (field.option, (text, val) => {
@@ -877,7 +877,7 @@ export class Render {
input.value = val;
let label = El('label', {}, input, El('span', { class: 'ctrl-indicator' }), text);
let label = El('label', {}, input, El('span', { className: 'ctrl-indicator' }), text);
label.className = 'radio-label';
@@ -916,7 +916,7 @@ export class Render {
});
}
let elem = El('div', { class: 'sp-radio-box' });
let elem = El('div', { className: 'sp-radio-box' });
Ut.each (field.option, (text, val) => {
@@ -938,7 +938,7 @@ export class Render {
label.append(input);
let indicator = El('span', { class: 'ctrl-indicator label-color-'+ (colors[i] ? colors[i] : 'default') });
let indicator = El('span', { className: 'ctrl-indicator label-color-'+ (colors[i] ? colors[i] : 'default') });
indicator.textContent = text;