@schukai/monster 3.94.0 → 3.95.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/package.json +1 -1
  3. package/source/components/state/log.mjs +10 -5
  4. package/source/components/state/state.mjs +1 -1
  5. package/source/components/state/style/log.pcss +20 -3
  6. package/source/components/state/stylesheet/log.mjs +1 -1
package/CHANGELOG.md CHANGED
@@ -2,6 +2,22 @@
2
2
 
3
3
 
4
4
 
5
+ ## [3.95.0] - 2024-12-23
6
+
7
+ ### Add Features
8
+
9
+ - **log:** set direction
10
+
11
+
12
+
13
+ ## [3.94.1] - 2024-12-22
14
+
15
+ ### Bug Fixes
16
+
17
+ - **log:** optimize layout [#270](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/270)
18
+
19
+
20
+
5
21
  ## [3.94.0] - 2024-12-22
6
22
 
7
23
  ### Add Features
package/package.json CHANGED
@@ -1 +1 @@
1
- {"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.6.12","@popperjs/core":"^2.11.8"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"3.94.0"}
1
+ {"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.6.12","@popperjs/core":"^2.11.8"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"3.95.0"}
package/source/components/state/log.mjs CHANGED
@@ -81,6 +81,8 @@ class Log extends CustomElement {
81
81
  * @property {string} templates.main Main template
82
82
  * @property {Object} labels Labels
83
83
  * @property {string} labels.nothingToReport Label for empty state
84
+ * @property {Object} classes Classes
85
+ * @property {string} classes.direction Direction of the log: ascending or descending
84
86
  * @property {number} updateFrequency Update frequency in milliseconds for the timestamp
85
87
  */
86
88
  get defaults() {
@@ -93,8 +95,8 @@ class Log extends CustomElement {
93
95
  nothingToReport: "There is nothing to report yet.",
94
96
  },
95
97
 
96
- classes: {
97
- direction: "vertical",
98
+ features: {
99
+ direction: "ascending",
98
100
  },
99
101
 
100
102
  updateFrequency: 10000,
@@ -123,8 +125,7 @@ class Log extends CustomElement {
123
125
  * @return {Log}
124
126
  */
125
127
  clear() {
126
- this[logElementSymbol].innerHTML = "";
127
- this[emptyStateElementSymbol].style.display = "block";
128
+ this[logElementSymbol].setOption("entries", []);
128
129
  return this;
129
130
  }
130
131
 
@@ -141,7 +142,11 @@ class Log extends CustomElement {
141
142
  }
142
143
 
143
144
  const entries = this.getOption("entries");
144
- entries.push(entry);
145
+ if (this.getOption("features.direction") === "ascending") {
146
+ entries.unshift(entry);
147
+ } else {
148
+ entries.push(entry);
149
+ }
145
150
 
146
151
  /** this field is not used, but triggers a change event */
147
152
  this.setOption("length", entries.length - 1);
package/source/components/state/state.mjs CHANGED
@@ -25,7 +25,7 @@ export { State };
25
25
  /**
26
26
  * A state component
27
27
  *
28
- * @fragments /fragments/components/state/state/
28
+ * @fragments /fragments/components/state/state
29
29
  *
30
30
  * @example /examples/components/state/state-simple
31
31
  *
package/source/components/state/style/log.pcss CHANGED
@@ -41,11 +41,28 @@
41
41
 
42
42
  & ul li {
43
43
  margin: 0;
44
- padding: 0.1rem 0.3rem;
44
+ padding: 0.35rem 0.3rem;
45
45
  color: var(--monster-color-primary-1);
46
46
  background-color: var(--monster-bg-color-primary-1);
47
- border-radius: 5px;
47
+
48
48
  position: relative;
49
+
50
+
51
+ & .message {
52
+
53
+ }
54
+
55
+ & .title {
56
+ font-stretch: expanded;
57
+ font-weight: bolder;
58
+ }
59
+
60
+ & .title:before {
61
+ content: "—";
62
+ font-weight: normal;
63
+ margin-right: 0.3rem;
64
+ }
65
+
49
66
  }
50
67
 
51
68
  & ul li:before {
@@ -58,6 +75,6 @@
58
75
  border: 1px solid var(--monster-color-primary-2);
59
76
  position: absolute;
60
77
  left: calc(-1rem + (5px / 4));
61
- top: 0.6rem;
78
+ top: 0.85rem;
62
79
  }
63
80
  }
package/source/components/state/stylesheet/log.mjs CHANGED
@@ -24,7 +24,7 @@ const LogStyleSheet = new CSSStyleSheet();
24
24
  try {
25
25
  LogStyleSheet.insertRule(`
26
26
  @layer log {
27
- [data-monster-role=control]{box-sizing:border-box;outline:none;width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}:host{box-sizing:border-box;display:block}.block{display:block}.inline{display:inline}.inline-block{display:inline-block}.grid{display:grid}.inline-grid{display:inline-grid}.flex{display:flex}.inline-flex{display:inline-flex}.hidden,.hide,.none{display:none}.visible{visibility:visible}.invisible{visibility:hidden}.monster-border-primary-1,.monster-border-primary-2,.monster-border-primary-3,.monster-border-primary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-0{border-radius:0;border-style:none;border-width:0}.monster-border-primary-1{border-color:var(--monster-bg-color-primary-1)}.monster-border-primary-2{border-color:var(--monster-bg-color-primary-2)}.monster-border-primary-3{border-color:var(--monster-bg-color-primary-3)}.monster-border-primary-4{border-color:var(--monster-bg-color-primary-4)}.monster-border-secondary-1,.monster-border-secondary-2,.monster-border-secondary-3,.monster-border-secondary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-secondary-1{border-color:var(--monster-bg-color-secondary-1)}.monster-border-secondary-2{border-color:var(--monster-bg-color-secondary-2)}.monster-border-secondary-3{border-color:var(--monster-bg-color-secondary-3)}.monster-border-secondary-4{border-color:var(--monster-bg-color-secondary-4)}.monster-border-tertiary-1,.monster-border-tertiary-2,.monster-border-tertiary-3,.monster-border-tertiary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-tertiary-1{border-color:var(--monster-bg-color-tertiary-1)}.monster-border-tertiary-2{border-color:var(--monster-bg-color-tertiary-2)}.monster-border-tertiary-3{border-color:var(--monster-bg-color-tertiary-3)}.monster-border-tertiary-4{border-color:var(--monster-bg-color-tertiary-4)}[data-monster-role=entries]{align-items:flex-start;border:0;box-sizing:border-box;display:flex;flex-direction:column;margin:0;padding:0;position:relative}[data-monster-role=entries] ul{list-style-type:none;margin:0;padding:0 0 0 1.8rem;width:100%}[data-monster-role=entries] ul:before{border-left:1px dotted var(--monster-bg-color-primary-3);bottom:0;content:\"\";display:block;height:100%;left:1rem;position:absolute;top:0;width:2px}[data-monster-role=entries] ul li{background-color:var(--monster-bg-color-primary-1);border-radius:5px;color:var(--monster-color-primary-1);margin:0;padding:.1rem .3rem;position:relative}[data-monster-role=entries] ul li:before{background:var(--monster-bg-color-primary-3);border:1px solid var(--monster-color-primary-2);border-radius:50%;box-sizing:border-box;content:\"\";height:6px;left:calc(-1rem + 1.25px);position:absolute;top:.6rem;width:6px}
27
+ [data-monster-role=control]{box-sizing:border-box;outline:none;width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}:host{box-sizing:border-box;display:block}.block{display:block}.inline{display:inline}.inline-block{display:inline-block}.grid{display:grid}.inline-grid{display:inline-grid}.flex{display:flex}.inline-flex{display:inline-flex}.hidden,.hide,.none{display:none}.visible{visibility:visible}.invisible{visibility:hidden}.monster-border-primary-1,.monster-border-primary-2,.monster-border-primary-3,.monster-border-primary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-0{border-radius:0;border-style:none;border-width:0}.monster-border-primary-1{border-color:var(--monster-bg-color-primary-1)}.monster-border-primary-2{border-color:var(--monster-bg-color-primary-2)}.monster-border-primary-3{border-color:var(--monster-bg-color-primary-3)}.monster-border-primary-4{border-color:var(--monster-bg-color-primary-4)}.monster-border-secondary-1,.monster-border-secondary-2,.monster-border-secondary-3,.monster-border-secondary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-secondary-1{border-color:var(--monster-bg-color-secondary-1)}.monster-border-secondary-2{border-color:var(--monster-bg-color-secondary-2)}.monster-border-secondary-3{border-color:var(--monster-bg-color-secondary-3)}.monster-border-secondary-4{border-color:var(--monster-bg-color-secondary-4)}.monster-border-tertiary-1,.monster-border-tertiary-2,.monster-border-tertiary-3,.monster-border-tertiary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-tertiary-1{border-color:var(--monster-bg-color-tertiary-1)}.monster-border-tertiary-2{border-color:var(--monster-bg-color-tertiary-2)}.monster-border-tertiary-3{border-color:var(--monster-bg-color-tertiary-3)}.monster-border-tertiary-4{border-color:var(--monster-bg-color-tertiary-4)}[data-monster-role=entries]{align-items:flex-start;border:0;box-sizing:border-box;display:flex;flex-direction:column;margin:0;padding:0;position:relative}[data-monster-role=entries] ul{list-style-type:none;margin:0;padding:0 0 0 1.8rem;width:100%}[data-monster-role=entries] ul:before{border-left:1px dotted var(--monster-bg-color-primary-3);bottom:0;content:\"\";display:block;height:100%;left:1rem;position:absolute;top:0;width:2px}[data-monster-role=entries] ul li{background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1);margin:0;padding:.35rem .3rem;position:relative}:is([data-monster-role=entries] ul li) .title{font-stretch:expanded;font-weight:bolder}:is([data-monster-role=entries] ul li) .title:before{content:\"—\";font-weight:400;margin-right:.3rem}[data-monster-role=entries] ul li:before{background:var(--monster-bg-color-primary-3);border:1px solid var(--monster-color-primary-2);border-radius:50%;box-sizing:border-box;content:\"\";height:6px;left:calc(-1rem + 1.25px);position:absolute;top:.85rem;width:6px}
28
28
  }`, 0);
29
29
  } catch (e) {
30
30
  addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");