From b2c30f2bc6c1183713bfa9f38297383a80703cb4 Mon Sep 17 00:00:00 2001 From: Serhii Pimenov Date: Wed, 18 Dec 2024 23:49:12 +0200 Subject: [PATCH] add remote-table --- __html__/remote-table.html | 20 ++++++++++++++++++- lib/metro.all.js | 19 ++++++++++-------- lib/metro.js | 19 ++++++++++-------- .../components/remote-table/remote-table.js | 14 ++++++++++--- source/extensions/string.js | 4 +--- 5 files changed, 53 insertions(+), 23 deletions(-) diff --git a/__html__/remote-table.html b/__html__/remote-table.html index 2e4f96792..411de7694 100644 --- a/__html__/remote-table.html +++ b/__html__/remote-table.html @@ -6,6 +6,17 @@ Test Remote Table - Metro UI :: Popular HTML, CSS and JS library + @@ -18,12 +29,14 @@

Remote Table Test

data-data-key="products" data-fields="id, title, price, discountPercentage" data-sortable-fields="id, title, price, discountPercentage" + data-col-size="30,,150,150" data-cls-table="table-border striped row-hover responsive-sm" data-cls-pagination="mt-4 d-flex flex-justify-center" data-captions="ID, Title, Price, Discount" data-url='https://dummyjson.com/products' data-search-url='https://dummyjson.com/products/search' data-search-key="q" + data-on-draw-cell="drawCell" > @@ -31,7 +44,12 @@

Remote Table Test

diff --git a/lib/metro.all.js b/lib/metro.all.js index 374da01a8..b8bb141d6 100644 --- a/lib/metro.all.js +++ b/lib/metro.all.js @@ -9044,7 +9044,7 @@ (function($5) { "use strict"; globalThis.__version__ = "5.1.0"; - globalThis.__build_time__ = "18.12.2024, 12:28:32"; + globalThis.__build_time__ = "18.12.2024, 23:49:05"; var meta_init = $5.meta("metro:init").attr("content"); var meta_locale = $5.meta("metro:locale").attr("content"); var meta_week_start = $5.meta("metro:week_start").attr("content"); @@ -9306,7 +9306,7 @@ }; var Metro2 = { version: "5.1.0", - build_time: "18.12.2024, 12:28:32", + build_time: "18.12.2024, 23:49:05", buildNumber: 0, isTouchable: isTouch3, fullScreenEnabled: document.fullscreenEnabled, @@ -10096,11 +10096,9 @@ // source/extensions/string.js (function() { "use strict"; - String.prototype.toArray = function(delimiter, type, format, locale) { + String.prototype.toArray = function(delimiter = ",", type = "string", format, locale) { var str3 = this; var a2; - type = type || "string"; - delimiter = delimiter || ","; format = format === void 0 || format === null ? false : format; a2 = ("" + str3).split(delimiter); return a2.map(function(s2) { @@ -26478,6 +26476,7 @@ offset: 0, fields: "", sortableFields: "", + colSize: "", sort: "", sortOrder: "asc", captions: null, @@ -26519,6 +26518,7 @@ this.fields = o3.fields.toArray(","); this.captions = o3.captions ? o3.captions.toArray(",") : null; this.rowSteps = o3.rowsSteps.toArray(","); + this.colSize = o3.colSize.toArray(","); this.limit = +o3.rows; this.url = o3.url; this.search = ""; @@ -26660,7 +26660,10 @@ cell.addClass(`sort-${this.sortOrder}`); } } - cell.appendTo(headerRow); + cell.appendTo(headerRow).addClass(`head-cell-${key}`); + if (this.colSize[hIndex]) { + cell.css("width", this.colSize[hIndex]); + } hIndex++; } this.entries.forEach((entry, index) => { @@ -26672,9 +26675,9 @@ if (this.fields.length && !this.fields.includes(key)) { continue; } - const cell = $5("").attr("data-label", this.captions ? this.captions[hIndex2] : key).addClass("table-cell").html(entry[key]); + const cell = $5("").attr("data-label", this.captions ? this.captions[hIndex2] : key).addClass(`data-cell-${key}`).html(entry[key]); row.append(cell); - Metro2.utils.exec(o3.onDrawCell, [cell, entry[key], key, entry, index], this); + Metro2.utils.exec(o3.onDrawCell, [cell[0], entry[key], key, entry, index], this); hIndex2++; } }); diff --git a/lib/metro.js b/lib/metro.js index 006c98148..e90249f13 100644 --- a/lib/metro.js +++ b/lib/metro.js @@ -9044,7 +9044,7 @@ (function($5) { "use strict"; globalThis.__version__ = "5.1.0"; - globalThis.__build_time__ = "18.12.2024, 12:28:30"; + globalThis.__build_time__ = "18.12.2024, 23:49:03"; var meta_init = $5.meta("metro:init").attr("content"); var meta_locale = $5.meta("metro:locale").attr("content"); var meta_week_start = $5.meta("metro:week_start").attr("content"); @@ -9306,7 +9306,7 @@ }; var Metro2 = { version: "5.1.0", - build_time: "18.12.2024, 12:28:30", + build_time: "18.12.2024, 23:49:03", buildNumber: 0, isTouchable: isTouch3, fullScreenEnabled: document.fullscreenEnabled, @@ -10096,11 +10096,9 @@ // source/extensions/string.js (function() { "use strict"; - String.prototype.toArray = function(delimiter, type, format, locale) { + String.prototype.toArray = function(delimiter = ",", type = "string", format, locale) { var str3 = this; var a2; - type = type || "string"; - delimiter = delimiter || ","; format = format === void 0 || format === null ? false : format; a2 = ("" + str3).split(delimiter); return a2.map(function(s2) { @@ -26478,6 +26476,7 @@ offset: 0, fields: "", sortableFields: "", + colSize: "", sort: "", sortOrder: "asc", captions: null, @@ -26519,6 +26518,7 @@ this.fields = o3.fields.toArray(","); this.captions = o3.captions ? o3.captions.toArray(",") : null; this.rowSteps = o3.rowsSteps.toArray(","); + this.colSize = o3.colSize.toArray(","); this.limit = +o3.rows; this.url = o3.url; this.search = ""; @@ -26660,7 +26660,10 @@ cell.addClass(`sort-${this.sortOrder}`); } } - cell.appendTo(headerRow); + cell.appendTo(headerRow).addClass(`head-cell-${key}`); + if (this.colSize[hIndex]) { + cell.css("width", this.colSize[hIndex]); + } hIndex++; } this.entries.forEach((entry, index) => { @@ -26672,9 +26675,9 @@ if (this.fields.length && !this.fields.includes(key)) { continue; } - const cell = $5("").attr("data-label", this.captions ? this.captions[hIndex2] : key).addClass("table-cell").html(entry[key]); + const cell = $5("").attr("data-label", this.captions ? this.captions[hIndex2] : key).addClass(`data-cell-${key}`).html(entry[key]); row.append(cell); - Metro2.utils.exec(o3.onDrawCell, [cell, entry[key], key, entry, index], this); + Metro2.utils.exec(o3.onDrawCell, [cell[0], entry[key], key, entry, index], this); hIndex2++; } }); diff --git a/source/components/remote-table/remote-table.js b/source/components/remote-table/remote-table.js index dad082fe0..0ba8cf61f 100644 --- a/source/components/remote-table/remote-table.js +++ b/source/components/remote-table/remote-table.js @@ -10,6 +10,7 @@ offset: 0, fields: "", sortableFields: "", + colSize: "", sort: "", sortOrder: "asc", captions: null, @@ -58,6 +59,7 @@ this.fields = o.fields.toArray(",") this.captions = o.captions ? o.captions.toArray(",") : null this.rowSteps = o.rowsSteps.toArray(",") + this.colSize = o.colSize.toArray(",") this.limit = +o.rows this.url = o.url this.search = "" @@ -204,7 +206,10 @@ cell.addClass(`sort-${this.sortOrder}`) } } - cell.appendTo(headerRow); + cell.appendTo(headerRow).addClass(`head-cell-${key}`); + if (this.colSize[hIndex]) { + cell.css("width", this.colSize[hIndex]) + } hIndex++ } @@ -217,9 +222,12 @@ if (this.fields.length && !this.fields.includes(key)) { continue; } - const cell = $("").attr("data-label", this.captions ? this.captions[hIndex] : key).addClass("table-cell").html(entry[key]); + const cell = $("").attr("data-label", this.captions ? this.captions[hIndex] : key) + .addClass(`data-cell-${key}`) + .html(entry[key]); + row.append(cell); - Metro.utils.exec(o.onDrawCell, [cell, entry[key], key, entry, index], this); + Metro.utils.exec(o.onDrawCell, [cell[0], entry[key], key, entry, index], this); hIndex++ } }); diff --git a/source/extensions/string.js b/source/extensions/string.js index ca638044e..520e06c43 100644 --- a/source/extensions/string.js +++ b/source/extensions/string.js @@ -3,12 +3,10 @@ (function() { 'use strict'; - String.prototype.toArray = function(delimiter, type, format, locale){ + String.prototype.toArray = function(delimiter = ",", type = "string", format, locale){ var str = this; var a; - type = type || "string"; - delimiter = delimiter || ","; format = format === undefined || format === null ? false : format; a = (""+str).split(delimiter);