@schukai/monster 4.111.0 → 4.112.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.
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,14 @@
|
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
|
+
## [4.112.0] - 2026-01-29
|
|
6
|
+
|
|
7
|
+
### Add Features
|
|
8
|
+
|
|
9
|
+
- Add vertical tabs component for enhanced UI navigation [#380](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/380)
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
5
13
|
## [4.111.0] - 2026-01-28
|
|
6
14
|
|
|
7
15
|
### Add Features
|
package/package.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.4","@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":"4.
|
|
1
|
+
{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.4","@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":"4.112.0"}
|
|
@@ -0,0 +1,130 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright © Volker Schukai and all contributing authors, 2026. All rights reserved.
|
|
3
|
+
* Node module: @schukai/monster
|
|
4
|
+
*
|
|
5
|
+
* This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
|
|
6
|
+
* The full text of the license can be found at: https://www.gnu.org/licenses/agpl-3.0.en.html
|
|
7
|
+
*
|
|
8
|
+
* For those who do not wish to adhere to the AGPLv3, a commercial license is available.
|
|
9
|
+
* Acquiring a commercial license allows you to use this software without complying with the AGPLv3 terms.
|
|
10
|
+
* For more information about purchasing a commercial license, please contact Volker Schukai.
|
|
11
|
+
*/
|
|
12
|
+
|
|
13
|
+
import { addAttributeToken } from "../../../dom/attributes.mjs";
|
|
14
|
+
import { ATTRIBUTE_ERRORMESSAGE } from "../../../dom/constants.mjs";
|
|
15
|
+
|
|
16
|
+
export { VerticalTabsStyleSheet };
|
|
17
|
+
|
|
18
|
+
/**
|
|
19
|
+
* @private
|
|
20
|
+
* @type {CSSStyleSheet}
|
|
21
|
+
*/
|
|
22
|
+
const VerticalTabsStyleSheet = new CSSStyleSheet();
|
|
23
|
+
|
|
24
|
+
try {
|
|
25
|
+
VerticalTabsStyleSheet.insertRule(
|
|
26
|
+
`
|
|
27
|
+
@layer tabs {
|
|
28
|
+
[data-monster-role=control] {
|
|
29
|
+
align-items: stretch;
|
|
30
|
+
display: flex;
|
|
31
|
+
flex-direction: row;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
[data-monster-role=control] > slot[data-monster-role=slot] {
|
|
35
|
+
flex: 1 1 auto;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
nav[data-monster-role=nav] {
|
|
39
|
+
align-items: stretch;
|
|
40
|
+
border-bottom-width: 0;
|
|
41
|
+
border-right-style: var(--monster-border-style);
|
|
42
|
+
border-right-width: thin;
|
|
43
|
+
border-color: var(--monster-bg-color-primary-2);
|
|
44
|
+
flex-direction: column;
|
|
45
|
+
margin-bottom: 0;
|
|
46
|
+
margin-right: 0.75rem;
|
|
47
|
+
max-height: 100%;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
[data-monster-role=nav] button {
|
|
51
|
+
border-bottom-width: 0;
|
|
52
|
+
border-right-style: var(--monster-border-style);
|
|
53
|
+
border-right-width: var(--monster-border-width);
|
|
54
|
+
border-right-color: var(--monster-bg-color-primary-4);
|
|
55
|
+
flex-direction: column;
|
|
56
|
+
margin-bottom: 0.75rem;
|
|
57
|
+
margin-right: 0;
|
|
58
|
+
padding: 0.5rem 0.4rem;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
[data-monster-role=nav] button[data-monster-role=button]:last-of-type {
|
|
62
|
+
margin-bottom: 0;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
[data-monster-role=nav] button:not([disabled]):hover {
|
|
66
|
+
border-bottom-width: 0;
|
|
67
|
+
border-right-color: var(--monster-bg-color-secondary-3);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
[data-monster-role=nav] button[data-monster-state=active],
|
|
71
|
+
[data-monster-role=nav] button[data-monster-state=active]:not([disabled]):hover {
|
|
72
|
+
border-bottom-width: 0;
|
|
73
|
+
border-right-color: var(--monster-bg-color-secondary-3);
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
[data-monster-role=nav] > button[data-monster-role=button] > span:first-of-type {
|
|
77
|
+
display: inline-flex;
|
|
78
|
+
text-orientation: mixed;
|
|
79
|
+
white-space: nowrap;
|
|
80
|
+
writing-mode: vertical-rl;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
[data-monster-role=nav] button .remove-tab {
|
|
84
|
+
margin-top: 0.35rem;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
[data-monster-role=nav] button[data-monster-role=switch] {
|
|
88
|
+
border-right-width: 0;
|
|
89
|
+
margin-top: 0.5rem;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
[data-monster-role=nav] [data-monster-role=popper-nav] button {
|
|
93
|
+
flex-direction: row;
|
|
94
|
+
margin-bottom: 0;
|
|
95
|
+
padding-left: 15px;
|
|
96
|
+
padding-right: 15px;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
[data-monster-role=nav] [data-monster-role=popper-nav] button > span:first-of-type {
|
|
100
|
+
text-orientation: mixed;
|
|
101
|
+
writing-mode: horizontal-tb;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
::slotted([slot]) {
|
|
105
|
+
border-bottom-width: 0;
|
|
106
|
+
border-right-style: var(--monster-border-style);
|
|
107
|
+
border-right-width: var(--monster-border-width);
|
|
108
|
+
border-color: var(--monster-bg-color-primary-4);
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
::slotted([slot=start]) {
|
|
112
|
+
margin-bottom: 0.75rem;
|
|
113
|
+
margin-right: 0;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
::slotted([slot=end]) {
|
|
117
|
+
margin-left: 0;
|
|
118
|
+
margin-top: 0.75rem;
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
`,
|
|
122
|
+
0,
|
|
123
|
+
);
|
|
124
|
+
} catch (e) {
|
|
125
|
+
addAttributeToken(
|
|
126
|
+
document.getRootNode().querySelector("html"),
|
|
127
|
+
ATTRIBUTE_ERRORMESSAGE,
|
|
128
|
+
e + "",
|
|
129
|
+
);
|
|
130
|
+
}
|