@schukai/monster 3.98.2 → 3.99.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 +22 -0
- package/package.json +1 -1
- package/source/components/datatable/columnbar.mjs +19 -20
- package/source/components/datatable/datatable.mjs +94 -80
- package/source/components/datatable/filter/date-range.mjs +19 -20
- package/source/components/datatable/filter/input.mjs +19 -20
- package/source/components/datatable/filter/range.mjs +19 -19
- package/source/components/datatable/filter-button.mjs +19 -20
- package/source/components/datatable/filter.mjs +48 -31
- package/source/components/datatable/pagination.mjs +19 -20
- package/source/components/datatable/save-button.mjs +19 -20
- package/source/components/datatable/stylesheet/datatable.mjs +13 -6
- package/source/components/form/action-button.mjs +2 -1
- package/source/components/form/api-button.mjs +4 -4
- package/source/components/form/button-bar.mjs +2 -3
- package/source/components/form/button.mjs +1 -0
- package/source/components/form/context-error.mjs +1 -0
- package/source/components/form/field-set.mjs +21 -21
- package/source/components/form/popper-button.mjs +274 -273
- package/source/components/form/reload.mjs +1 -0
- package/source/components/form/select.mjs +56 -34
- package/source/components/form/toggle-switch.mjs +2 -2
- package/source/components/layout/details.mjs +19 -20
- package/source/components/layout/tabs.mjs +19 -20
- package/source/components/notify/monitor-attribute-errors.mjs +184 -179
- package/source/data/buildtree.mjs +1 -1
- package/source/dom/customelement.mjs +944 -945
- package/source/dom/error.mjs +106 -0
- package/source/monster.mjs +1 -0
- package/source/types/version.mjs +1 -1
- package/test/cases/dom/customcontrol.mjs +1 -1
- package/test/cases/dom/customelement.mjs +3 -3
- package/test/cases/monster.mjs +1 -1
- package/test/web/test.html +2 -2
- package/test/web/tests.js +334 -63
@@ -10,27 +10,27 @@
|
|
10
10
|
* For more information about purchasing a commercial license, please contact schukai GmbH.
|
11
11
|
*/
|
12
12
|
|
13
|
-
import {instanceSymbol} from "../../constants.mjs";
|
14
|
-
import {addAttributeToken, hasObjectLink} from "../../dom/attributes.mjs";
|
13
|
+
import { instanceSymbol } from "../../constants.mjs";
|
14
|
+
import { addAttributeToken, hasObjectLink } from "../../dom/attributes.mjs";
|
15
15
|
import {
|
16
|
-
|
17
|
-
|
18
|
-
|
16
|
+
ATTRIBUTE_ERRORMESSAGE,
|
17
|
+
ATTRIBUTE_ROLE,
|
18
|
+
customElementUpdaterLinkSymbol,
|
19
19
|
} from "../../dom/constants.mjs";
|
20
|
-
import {CustomControl} from "../../dom/customcontrol.mjs";
|
21
|
-
import {CustomElement} from "../../dom/customelement.mjs";
|
20
|
+
import { CustomControl } from "../../dom/customcontrol.mjs";
|
21
|
+
import { CustomElement } from "../../dom/customelement.mjs";
|
22
22
|
import {
|
23
|
-
|
24
|
-
|
23
|
+
assembleMethodSymbol,
|
24
|
+
registerCustomElement,
|
25
25
|
} from "../../dom/customelement.mjs";
|
26
|
-
import {findTargetElementFromEvent} from "../../dom/events.mjs";
|
27
|
-
import {isFunction} from "../../types/is.mjs";
|
28
|
-
import {MonitorAttributeErrorsStyleSheet} from "./stylesheet/monitor-attribute-errors.mjs";
|
29
|
-
import {fireCustomEvent} from "../../dom/events.mjs";
|
30
|
-
import {getDocument} from "../../dom/util.mjs";
|
31
|
-
import {clone} from "../../util/clone.mjs";
|
26
|
+
import { findTargetElementFromEvent } from "../../dom/events.mjs";
|
27
|
+
import { isFunction } from "../../types/is.mjs";
|
28
|
+
import { MonitorAttributeErrorsStyleSheet } from "./stylesheet/monitor-attribute-errors.mjs";
|
29
|
+
import { fireCustomEvent } from "../../dom/events.mjs";
|
30
|
+
import { getDocument } from "../../dom/util.mjs";
|
31
|
+
import { clone } from "../../util/clone.mjs";
|
32
32
|
|
33
|
-
export {MonitorAttributeErrors};
|
33
|
+
export { MonitorAttributeErrors };
|
34
34
|
|
35
35
|
/**
|
36
36
|
* @private
|
@@ -50,88 +50,88 @@ const mutationObserversSymbol = Symbol("mutationObservers");
|
|
50
50
|
* @summary A beautiful MonitorAttributeErrors that can make your life easier and also looks good.
|
51
51
|
*/
|
52
52
|
class MonitorAttributeErrors extends CustomElement {
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
100
|
-
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
105
|
-
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
53
|
+
/**
|
54
|
+
* This method is called by the `instanceof` operator.
|
55
|
+
* @returns {symbol}
|
56
|
+
*/
|
57
|
+
static get [instanceSymbol]() {
|
58
|
+
return Symbol.for(
|
59
|
+
"@schukai/monster/components/notify/monitor-attribute-errors@@instance",
|
60
|
+
);
|
61
|
+
}
|
62
|
+
|
63
|
+
/**
|
64
|
+
*
|
65
|
+
* @return {Components.Notify.MonitorAttributeErrors
|
66
|
+
*/
|
67
|
+
[assembleMethodSymbol]() {
|
68
|
+
super[assembleMethodSymbol]();
|
69
|
+
return this;
|
70
|
+
}
|
71
|
+
|
72
|
+
/**
|
73
|
+
* @return {void}
|
74
|
+
*/
|
75
|
+
connectedCallback() {
|
76
|
+
super.connectedCallback();
|
77
|
+
setupMutationObserver.call(this, getDocument());
|
78
|
+
}
|
79
|
+
|
80
|
+
/**
|
81
|
+
* @return {void}
|
82
|
+
*/
|
83
|
+
disconnectedCallback() {
|
84
|
+
super.disconnectedCallback();
|
85
|
+
deactivateAllObservers.call(this);
|
86
|
+
}
|
87
|
+
|
88
|
+
/**
|
89
|
+
* To set the options via the HTML Tag, the attribute `data-monster-options` must be used.
|
90
|
+
* @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
|
91
|
+
*
|
92
|
+
* The individual configuration values can be found in the table.
|
93
|
+
*
|
94
|
+
* @property {Object} templates Template definitions
|
95
|
+
* @property {string} templates.main Main template
|
96
|
+
* @property {Object} features Features
|
97
|
+
* @property {boolean} features.notifyUser Notify user (monster-notify control is required)
|
98
|
+
* @property {Object} notifyUser Notify user
|
99
|
+
* @property {string} notifyUser.selector Selector for the notify user control (feature notifyUser must be enabled)
|
100
|
+
*/
|
101
|
+
get defaults() {
|
102
|
+
return Object.assign({}, super.defaults, {
|
103
|
+
templates: {
|
104
|
+
main: getTemplate(),
|
105
|
+
},
|
106
|
+
features: {
|
107
|
+
notifyUser: false,
|
108
|
+
},
|
109
|
+
|
110
|
+
notifyUser: {
|
111
|
+
selector: "monster-notify",
|
112
|
+
},
|
113
|
+
|
114
|
+
actions: {
|
115
|
+
click: () => {
|
116
|
+
throw new Error("the click action is not defined");
|
117
|
+
},
|
118
|
+
},
|
119
|
+
});
|
120
|
+
}
|
121
|
+
|
122
|
+
/**
|
123
|
+
* @return {string}
|
124
|
+
*/
|
125
|
+
static getTag() {
|
126
|
+
return "monster-monitor-attribute-errors";
|
127
|
+
}
|
128
|
+
|
129
|
+
/**
|
130
|
+
* @return {CSSStyleSheet[]}
|
131
|
+
*/
|
132
|
+
static getCSSStyleSheet() {
|
133
|
+
return [MonitorAttributeErrorsStyleSheet];
|
134
|
+
}
|
135
135
|
}
|
136
136
|
|
137
137
|
/**
|
@@ -139,88 +139,93 @@ class MonitorAttributeErrors extends CustomElement {
|
|
139
139
|
* @param root
|
140
140
|
*/
|
141
141
|
function setupMutationObserver(root) {
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
|
148
|
-
|
149
|
-
|
150
|
-
|
151
|
-
|
152
|
-
|
153
|
-
|
154
|
-
|
155
|
-
|
156
|
-
|
157
|
-
|
158
|
-
|
159
|
-
|
160
|
-
|
161
|
-
|
162
|
-
|
163
|
-
|
164
|
-
|
165
|
-
|
166
|
-
|
167
|
-
|
168
|
-
|
169
|
-
|
170
|
-
|
171
|
-
|
172
|
-
|
173
|
-
|
174
|
-
|
175
|
-
|
176
|
-
|
177
|
-
|
178
|
-
|
179
|
-
|
180
|
-
|
181
|
-
|
182
|
-
|
183
|
-
|
184
|
-
|
185
|
-
|
186
|
-
|
187
|
-
|
188
|
-
|
189
|
-
|
190
|
-
|
191
|
-
|
192
|
-
|
193
|
-
|
194
|
-
|
195
|
-
|
196
|
-
|
197
|
-
|
198
|
-
|
199
|
-
|
200
|
-
|
201
|
-
|
202
|
-
|
203
|
-
|
204
|
-
|
205
|
-
|
206
|
-
|
207
|
-
|
208
|
-
|
209
|
-
|
210
|
-
|
211
|
-
|
212
|
-
|
213
|
-
|
214
|
-
|
215
|
-
|
216
|
-
|
142
|
+
const self = this;
|
143
|
+
|
144
|
+
if (!this?.[mutationObserversSymbol]) {
|
145
|
+
this[mutationObserversSymbol] = [];
|
146
|
+
}
|
147
|
+
|
148
|
+
const config = {
|
149
|
+
childList: true,
|
150
|
+
subtree: true,
|
151
|
+
attributes: true,
|
152
|
+
attributeFilter: ["data-monster-error"],
|
153
|
+
};
|
154
|
+
|
155
|
+
const callback = (mutationsList, observer) => {
|
156
|
+
for (const mutation of mutationsList) {
|
157
|
+
if (mutation.type === "childList") {
|
158
|
+
mutation.addedNodes.forEach((node) => {
|
159
|
+
checkNodeForErrors(node);
|
160
|
+
observeShadowRoots(node);
|
161
|
+
});
|
162
|
+
}
|
163
|
+
if (
|
164
|
+
mutation.type === "attributes" &&
|
165
|
+
mutation.attributeName === "data-monster-error"
|
166
|
+
) {
|
167
|
+
const node = mutation.target;
|
168
|
+
|
169
|
+
checkNodeForErrors(node);
|
170
|
+
}
|
171
|
+
}
|
172
|
+
};
|
173
|
+
|
174
|
+
const observer = new MutationObserver(callback);
|
175
|
+
observer.observe(root, config);
|
176
|
+
this[mutationObserversSymbol].push(observer); // Speichert den Observer
|
177
|
+
|
178
|
+
root.querySelectorAll("*").forEach((node) => {
|
179
|
+
checkNodeForErrors(node);
|
180
|
+
observeShadowRoots(node);
|
181
|
+
});
|
182
|
+
|
183
|
+
function checkNodeForErrors(node) {
|
184
|
+
if (node.nodeType === 1 && node.hasAttribute("data-monster-error")) {
|
185
|
+
const fktOpen =
|
186
|
+
console.groupCollapsed ||
|
187
|
+
console.group ||
|
188
|
+
console.log ||
|
189
|
+
function () {};
|
190
|
+
const fktLog = console.log || function () {};
|
191
|
+
const fktClose = console.groupEnd || function () {};
|
192
|
+
|
193
|
+
fktOpen("MonitorAttributeErrors " + node.tagName);
|
194
|
+
fktLog(node);
|
195
|
+
|
196
|
+
const errors = node.getAttribute("data-monster-error").split("::");
|
197
|
+
errors.forEach((error) => {
|
198
|
+
fktLog(error);
|
199
|
+
});
|
200
|
+
fktClose();
|
201
|
+
|
202
|
+
if (self.getOption("features.notifyUser")) {
|
203
|
+
const notifyUser = getDocument().querySelector(
|
204
|
+
self.getOption("notifyUser.selector"),
|
205
|
+
);
|
206
|
+
if (notifyUser) {
|
207
|
+
notifyUser.push(node.getAttribute("data-monster-error"));
|
208
|
+
}
|
209
|
+
}
|
210
|
+
}
|
211
|
+
}
|
212
|
+
|
213
|
+
function observeShadowRoots(node) {
|
214
|
+
if (
|
215
|
+
node.nodeType === 1 &&
|
216
|
+
node.shadowRoot &&
|
217
|
+
node.shadowRoot.mode === "open"
|
218
|
+
) {
|
219
|
+
setupMutationObserver.call(self, node.shadowRoot);
|
220
|
+
}
|
221
|
+
}
|
217
222
|
}
|
218
223
|
|
219
224
|
function deactivateAllObservers() {
|
220
|
-
|
221
|
-
|
222
|
-
|
223
|
-
|
225
|
+
this[mutationObserversSymbol].forEach((observer) => {
|
226
|
+
observer.disconnect();
|
227
|
+
});
|
228
|
+
this[mutationObserversSymbol] = [];
|
224
229
|
}
|
225
230
|
|
226
231
|
/**
|
@@ -228,8 +233,8 @@ function deactivateAllObservers() {
|
|
228
233
|
* @return {string}
|
229
234
|
*/
|
230
235
|
function getTemplate() {
|
231
|
-
|
232
|
-
|
236
|
+
// language=HTML
|
237
|
+
return `<div></div>`;
|
233
238
|
}
|
234
239
|
|
235
240
|
registerCustomElement(MonitorAttributeErrors);
|
@@ -125,7 +125,7 @@ const rootSymbol = Symbol("root");
|
|
125
125
|
* @param {string} idKey - The property key to use as the unique ID of each node.
|
126
126
|
* @param {string} parentIDKey - The property key to use as the parent ID of each node.
|
127
127
|
* @param {object} [options] - Additional options to modify the function behavior.
|
128
|
-
* @param {Array
|
128
|
+
* @param {Array} [options.rootReferences=[null, undefined]] - An array of values to treat as root references when creating the tree.
|
129
129
|
* @param {function} [options.filter] - A filter function to apply to each node.
|
130
130
|
*
|
131
131
|
* @return {*} The resulting tree structure as a NodeList.
|