From 275938ee969c59e0f5e1b2b88c48c3efd0f4392b Mon Sep 17 00:00:00 2001
From: Volker Schukai <volker.schukai@schukai.com>
Date: Mon, 23 Dec 2024 18:13:05 +0100
Subject: [PATCH] feat(log): set direction
---
source/components/state/log.mjs | 15 ++++++++++-----
source/components/state/state.mjs | 2 +-
2 files changed, 11 insertions(+), 6 deletions(-)
diff --git a/source/components/state/log.mjs b/source/components/state/log.mjs
index 9a4a40874..edfb98dbb 100644
--- a/source/components/state/log.mjs
+++ b/source/components/state/log.mjs
@@ -81,6 +81,8 @@ class Log extends CustomElement {
* @property {string} templates.main Main template
* @property {Object} labels Labels
* @property {string} labels.nothingToReport Label for empty state
+ * @property {Object} classes Classes
+ * @property {string} classes.direction Direction of the log: ascending or descending
* @property {number} updateFrequency Update frequency in milliseconds for the timestamp
*/
get defaults() {
@@ -93,8 +95,8 @@ class Log extends CustomElement {
nothingToReport: "There is nothing to report yet.",
},
- classes: {
- direction: "vertical",
+ features: {
+ direction: "ascending",
},
updateFrequency: 10000,
@@ -123,8 +125,7 @@ class Log extends CustomElement {
* @return {Log}
*/
clear() {
- this[logElementSymbol].innerHTML = "";
- this[emptyStateElementSymbol].style.display = "block";
+ this[logElementSymbol].setOption("entries", []);
return this;
}
@@ -141,7 +142,11 @@ class Log extends CustomElement {
}
const entries = this.getOption("entries");
- entries.push(entry);
+ if (this.getOption("features.direction") === "ascending") {
+ entries.unshift(entry);
+ } else {
+ entries.push(entry);
+ }
/** this field is not used, but triggers a change event */
this.setOption("length", entries.length - 1);
diff --git a/source/components/state/state.mjs b/source/components/state/state.mjs
index 199fdd0b3..657b91f12 100644
--- a/source/components/state/state.mjs
+++ b/source/components/state/state.mjs
@@ -25,7 +25,7 @@ export { State };
/**
* A state component
*
- * @fragments /fragments/components/state/state/
+ * @fragments /fragments/components/state/state
*
* @example /examples/components/state/state-simple
*
--
GitLab