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
+19 -19
View File
@@ -114,14 +114,14 @@ export class Table {
}
makeInfoLabel() {
this.info = El('div', { class: 'sp-table-info' });
this.info = El('div', { className: 'sp-table-info' });
this.ui.append(this.info);
}
// Make UI container
makeUiTable() {
this.ui = El('div', { class: 'sp-table-ui' });
this.ui = El('div', { className: 'sp-table-ui' });
this.target.append(this.ui);
}
@@ -131,7 +131,7 @@ export class Table {
let that = this;
this.filterForm = El('form', { novalidate: true, class: 'sp-form filter-main' });
this.filterForm = El('form', { novalidate: true, className: 'sp-form filter-main' });
Render.makeUiElements(Ut.objVal(this.opts.filter).children, this.filterForm);
@@ -162,7 +162,7 @@ export class Table {
makeToolbarHeader() {
this.toolbarHeader = El('div', { class: 'sp-toolbar toolbar-header' + (this.opts.toolbar_header.cls ? ' ' + this.opts.toolbar_header.cls : '') });
this.toolbarHeader = El('div', { className: 'sp-toolbar toolbar-header' + (this.opts.toolbar_header.cls ? ' ' + this.opts.toolbar_header.cls : '') });
Render.makeUiElements(Ut.objVal(this.opts.toolbar_header).children, this.toolbarHeader);
@@ -175,7 +175,7 @@ export class Table {
makePagination() {
this.paginationEl = this.ui.appendChild(El('div', { class: 'sp-pagination' }));
this.paginationEl = this.ui.appendChild(El('div', { className: 'sp-pagination' }));
this.paginationEl.dxOn('click', 'a', (e, t) => {
@@ -211,7 +211,7 @@ export class Table {
makeToolbarFooter() {
this.toolbarFooter = El('div', { class: 'sp-toolbar toolbar-footer' + (this.opts.toolbar_footer.cls ? ' ' + this.opts.toolbar_footer.cls : '') });
this.toolbarFooter = El('div', { className: 'sp-toolbar toolbar-footer' + (this.opts.toolbar_footer.cls ? ' ' + this.opts.toolbar_footer.cls : '') });
Render.makeUiElements(Ut.objVal(this.opts.toolbar_footer).children, this.toolbarFooter);
@@ -223,7 +223,7 @@ export class Table {
// Make new ui table
makeNewTable() {
this.table = El('div', { class: 'sp-table layout-' + this.opts.layout + (!this.setHeader ? ' no-header' : '') + (this.opts.cls ? ' ' + this.opts.cls : '')});
this.table = El('div', { className: 'sp-table layout-' + this.opts.layout + (!this.setHeader ? ' no-header' : '') + (this.opts.cls ? ' ' + this.opts.cls : '')});
this.ui.append(this.table);
}
@@ -237,13 +237,13 @@ export class Table {
let header = this.opts.header;
let thead = El('div', { class: 'thead' + (header.cls ? ' ' + header.cls : '') });
let thead = El('div', { className: 'thead' + (header.cls ? ' ' + header.cls : '') });
let n = 1;
for (; n < this.data.items[0].length; n++) {
let cell = header.cell ? (header.cell[ n - 1 ] || {}) : {};
thead.append( El('div', { class: 'th' + (cell.cls ? ' ' + cell.cls : '') }, (cell.text || '') ) );
thead.append( El('div', { className: 'th' + (cell.cls ? ' ' + cell.cls : '') }, (cell.text || '') ) );
}
this.table.prepend(thead);
@@ -271,9 +271,9 @@ export class Table {
let cell = that.opts.header.cell ? (that.opts.header.cell[ n - 1 ] || {}) : {};
let column = El('div', { class: 't-col' });
let column = El('div', { className: 't-col' });
row.append( El('div', { class: 'td' + (cell.cls ? ' ' + cell.cls : ''), 'data-label': cell.text },
row.append( El('div', { className: 'td' + (cell.cls ? ' ' + cell.cls : ''), 'data-label': cell.text },
column
));
@@ -283,7 +283,7 @@ export class Table {
if (n == 1 && that.opts.sortable) {
column.classList.add('flex', 'v-center');
column.prepend( El('i', { class: 'handle' }) );
column.prepend( El('i', { className: 'handle' }) );
}
}
}
@@ -293,7 +293,7 @@ export class Table {
this.data.items.forEach((data, i) => {
let tbody = El('div', {
class: 'tbody' + (that.opts.body && that.opts.body.cls ? ' ' + that.opts.body.cls : ''),
className: 'tbody' + (that.opts.body && that.opts.body.cls ? ' ' + that.opts.body.cls : ''),
'data-id': data[0],
'data-pos': i
});
@@ -304,9 +304,9 @@ export class Table {
let cell = that.opts.header.cell ? (that.opts.header.cell[ n - 1 ] || {}) : {};
let column = El('div', { class: 't-col' });
let column = El('div', { className: 't-col' });
tbody.append( El('div', { class: 'td' + (cell.cls ? ' ' + cell.cls : ''), 'data-label': cell.text },
tbody.append( El('div', { className: 'td' + (cell.cls ? ' ' + cell.cls : ''), 'data-label': cell.text },
column
));
@@ -316,7 +316,7 @@ export class Table {
if (n == 1 && that.opts.sortable) {
column.classList.add('flex', 'v-center');
column.prepend( El('i', { class: 'handle' }) );
column.prepend( El('i', { className: 'handle' }) );
}
if (that.mode == Table.PREPEND) {
@@ -515,7 +515,7 @@ export class Table {
pg_btn = El('a', {
'data-id': dat[0],
class: (dat[2] ? 'disabled' : '')}, dat[1]
className: (dat[2] ? 'disabled' : '')}, dat[1]
);
this.paginationEl.append(pg_btn);
@@ -524,11 +524,11 @@ export class Table {
else if (this.data.before || this.data.after) { // update UI
if (this.data.before) {
this.paginationEl.append( El('a', { 'data-id': this.data.before, class: 'btn-before' }, '&lt') );
this.paginationEl.append( El('a', { 'data-id': this.data.before, className: 'btn-before' }, '&lt') );
}
if (this.data.after) {
this.paginationEl.append( El('a', { 'data-id': this.data.after, class: 'btn-after' }, '&gt;') );
this.paginationEl.append( El('a', { 'data-id': this.data.after, className: 'btn-after' }, '&gt;') );
}
}
}