@schukai/monster 3.85.1 → 3.85.2
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +11 -0
- package/package.json +1 -1
- package/source/components/content/copy.mjs +1 -3
- package/source/components/datatable/columnbar.mjs +15 -36
- package/source/components/datatable/datasource/dom.mjs +1 -0
- package/source/components/datatable/datatable.mjs +757 -765
- package/source/components/datatable/stylesheet/datatable.mjs +7 -14
- package/source/components/datatable/util.mjs +1 -0
- package/source/dom/ready.mjs +1 -1
package/CHANGELOG.md
CHANGED
@@ -2,6 +2,17 @@
|
|
2
2
|
|
3
3
|
|
4
4
|
|
5
|
+
## [3.85.2] - 2024-11-12
|
6
|
+
|
7
|
+
### Bug Fixes
|
8
|
+
|
9
|
+
- update some issues and documentaion [#260](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/260)
|
10
|
+
### Changes
|
11
|
+
|
12
|
+
- code tidy
|
13
|
+
|
14
|
+
|
15
|
+
|
5
16
|
## [3.85.1] - 2024-11-12
|
6
17
|
|
7
18
|
### Bug Fixes
|
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.85.
|
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.85.2"}
|
@@ -21,14 +21,12 @@ import {
|
|
21
21
|
ATTRIBUTE_ERRORMESSAGE,
|
22
22
|
ATTRIBUTE_ROLE,
|
23
23
|
} from "../../dom/constants.mjs";
|
24
|
-
import {CustomElement
|
24
|
+
import {CustomElement} from "../../dom/customelement.mjs";
|
25
25
|
import {
|
26
26
|
assembleMethodSymbol,
|
27
27
|
registerCustomElement,
|
28
28
|
} from "../../dom/customelement.mjs";
|
29
29
|
import {getDocument} from "../../dom/util.mjs";
|
30
|
-
import {isString} from "../../types/is.mjs";
|
31
|
-
import {validateString} from "../../types/validate.mjs";
|
32
30
|
import {STYLE_DISPLAY_MODE_BLOCK} from "../form/constants.mjs";
|
33
31
|
import {CopyStyleSheet} from "./stylesheet/copy.mjs";
|
34
32
|
import {fireCustomEvent} from "../../dom/events.mjs";
|
@@ -55,43 +55,17 @@ const dotsContainerElementSymbol = Symbol("dotsContainerElement");
|
|
55
55
|
*/
|
56
56
|
const popperInstanceSymbol = Symbol("popperInstance");
|
57
57
|
|
58
|
+
|
58
59
|
/**
|
59
|
-
*
|
60
|
-
*
|
61
|
-
* <img src="./images/column-bar.png">
|
62
|
-
*
|
63
|
-
* You can create this control either by specifying the HTML tag <monster-column-bar />` directly in the HTML or using
|
64
|
-
* Javascript via the `document.createElement('monster-column-bar');` method.
|
65
|
-
*
|
66
|
-
* ```html
|
67
|
-
* <monster-column-bar></monster-column-bar>
|
68
|
-
* ```
|
60
|
+
* A column bar for a datatable
|
69
61
|
*
|
70
|
-
*
|
62
|
+
* @fragments /fragments/components/datatable/datatable/
|
71
63
|
*
|
72
|
-
*
|
73
|
-
* import '@schukai/monster/components/datatable/column-bar.mjs';
|
74
|
-
* document.createElement('monster-column-bar');
|
75
|
-
* ```
|
76
|
-
*
|
77
|
-
* The Body should have a class "hidden" to ensure that the styles are applied correctly.
|
78
|
-
*
|
79
|
-
* ```css
|
80
|
-
* body.hidden {
|
81
|
-
* visibility: hidden;
|
82
|
-
* }
|
83
|
-
* ```
|
84
|
-
*
|
85
|
-
* @startuml column-bar.png
|
86
|
-
* skinparam monochrome true
|
87
|
-
* skinparam shadowing false
|
88
|
-
* HTMLElement <|-- CustomElement
|
89
|
-
* CustomElement <|-- ColumnBar
|
90
|
-
* @enduml
|
64
|
+
* @example /examples/components/datatable/empty
|
91
65
|
*
|
92
66
|
* @copyright schukai GmbH
|
93
|
-
* @summary
|
94
|
-
|
67
|
+
* @summary The ColumnBar component is used to show and configure the columns of a datatable.
|
68
|
+
**/
|
95
69
|
class ColumnBar extends CustomElement {
|
96
70
|
/**
|
97
71
|
* This method is called by the `instanceof` operator.
|
@@ -137,7 +111,7 @@ class ColumnBar extends CustomElement {
|
|
137
111
|
|
138
112
|
/**
|
139
113
|
*
|
140
|
-
* @return {
|
114
|
+
* @return {void}
|
141
115
|
*/
|
142
116
|
[assembleMethodSymbol]() {
|
143
117
|
super[assembleMethodSymbol]();
|
@@ -147,7 +121,7 @@ class ColumnBar extends CustomElement {
|
|
147
121
|
}
|
148
122
|
|
149
123
|
/**
|
150
|
-
* @return {
|
124
|
+
* @return {CSSStyleSheet[]}
|
151
125
|
*/
|
152
126
|
static getCSSStyleSheet() {
|
153
127
|
return [ColumnBarStyleSheet];
|
@@ -156,7 +130,7 @@ class ColumnBar extends CustomElement {
|
|
156
130
|
|
157
131
|
/**
|
158
132
|
* @private
|
159
|
-
* @return {
|
133
|
+
* @return {ColumnBar}
|
160
134
|
*/
|
161
135
|
function initControlReferences() {
|
162
136
|
if (!this.shadowRoot) {
|
@@ -166,12 +140,15 @@ function initControlReferences() {
|
|
166
140
|
this[settingsButtonElementSymbol] = this.shadowRoot.querySelector(
|
167
141
|
"[data-monster-role=settings-button]",
|
168
142
|
);
|
143
|
+
|
169
144
|
this[settingsLayerElementSymbol] = this.shadowRoot.querySelector(
|
170
145
|
"[data-monster-role=settings-layer]",
|
171
146
|
);
|
147
|
+
|
172
148
|
this[dotsContainerElementSymbol] = this.shadowRoot.querySelector(
|
173
149
|
"[data-monster-role=dots]",
|
174
150
|
);
|
151
|
+
|
175
152
|
return this;
|
176
153
|
}
|
177
154
|
|
@@ -199,6 +176,7 @@ function initEventHandler() {
|
|
199
176
|
);
|
200
177
|
|
201
178
|
self[dotsContainerElementSymbol].addEventListener("click", function (event) {
|
179
|
+
|
202
180
|
const element = findTargetElementFromEvent(
|
203
181
|
event,
|
204
182
|
"data-monster-role",
|
@@ -220,6 +198,7 @@ function initEventHandler() {
|
|
220
198
|
});
|
221
199
|
|
222
200
|
self[settingsButtonEventHandlerSymbol] = (event) => {
|
201
|
+
|
223
202
|
const clickTarget = event.composedPath()?.[0];
|
224
203
|
if (
|
225
204
|
self[settingsLayerElementSymbol] === clickTarget ||
|
@@ -227,7 +206,7 @@ function initEventHandler() {
|
|
227
206
|
) {
|
228
207
|
return;
|
229
208
|
}
|
230
|
-
|
209
|
+
|
231
210
|
document.body.removeEventListener(
|
232
211
|
"click",
|
233
212
|
self[settingsButtonEventHandlerSymbol],
|