@schukai/monster 3.65.21 → 3.67.0
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +32 -4
- package/package.json +1 -1
- package/source/components/datatable/change-button.mjs +5 -6
- package/source/components/datatable/dataset.mjs +202 -202
- package/source/components/datatable/datasource/dom.mjs +1 -1
- package/source/components/datatable/datatable.mjs +10 -6
- package/source/components/datatable/filter.mjs +20 -5
- package/source/components/datatable/pagination.mjs +4 -4
- package/source/components/datatable/save-button.mjs +4 -5
- package/source/components/datatable/status.mjs +4 -5
- package/source/components/datatable/stylesheet/embedded-pagination.mjs +2 -4
- package/source/components/form/select.mjs +132 -82
- package/source/components/form/style/select.pcss +1 -1
- package/source/components/form/stylesheet/select.mjs +2 -4
- package/source/components/host/call-button.mjs +5 -4
- package/source/components/layout/stylesheet/collapse.mjs +2 -4
- package/source/components/notify/message.mjs +6 -3
- package/source/components/style/mixin/property.pcss +8 -8
- package/source/components/stylesheet/link.mjs +1 -3
- package/source/components/stylesheet/mixin/property.mjs +1 -3
- package/source/data/datasource/dom.mjs +85 -85
- package/source/dom/resource/data.mjs +122 -122
- package/source/dom/template.mjs +113 -113
@@ -12,28 +12,28 @@
|
|
12
12
|
* SPDX-License-Identifier: AGPL-3.0
|
13
13
|
*/
|
14
14
|
|
15
|
-
import {internalStateSymbol} from "../../constants.mjs";
|
16
|
-
import {extend} from "../../data/extend.mjs";
|
17
|
-
import {getGlobalFunction} from "../../types/global.mjs";
|
18
|
-
import {addAttributeToken} from "../attributes.mjs";
|
15
|
+
import { internalStateSymbol } from "../../constants.mjs";
|
16
|
+
import { extend } from "../../data/extend.mjs";
|
17
|
+
import { getGlobalFunction } from "../../types/global.mjs";
|
18
|
+
import { addAttributeToken } from "../attributes.mjs";
|
19
19
|
import {
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
20
|
+
ATTRIBUTE_CLASS,
|
21
|
+
ATTRIBUTE_ERRORMESSAGE,
|
22
|
+
ATTRIBUTE_ID,
|
23
|
+
ATTRIBUTE_SRC,
|
24
|
+
ATTRIBUTE_TITLE,
|
25
|
+
ATTRIBUTE_TYPE,
|
26
|
+
TAG_SCRIPT,
|
27
27
|
} from "../constants.mjs";
|
28
28
|
import {
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
29
|
+
KEY_DOCUMENT,
|
30
|
+
KEY_QUERY,
|
31
|
+
referenceSymbol,
|
32
|
+
Resource,
|
33
33
|
} from "../resource.mjs";
|
34
|
-
import {instanceSymbol} from "../../constants.mjs";
|
34
|
+
import { instanceSymbol } from "../../constants.mjs";
|
35
35
|
|
36
|
-
export {Data};
|
36
|
+
export { Data };
|
37
37
|
|
38
38
|
/**
|
39
39
|
* This class is used by the resource manager to embed data.
|
@@ -45,59 +45,59 @@ export {Data};
|
|
45
45
|
* @summary A Data Resource class
|
46
46
|
*/
|
47
47
|
class Data extends Resource {
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
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
|
-
|
48
|
+
/**
|
49
|
+
* @property {string} mode=cors https://developer.mozilla.org/en-US/docs/Web/API/fetch
|
50
|
+
* @property {string} credentials=same-origin https://developer.mozilla.org/en-US/docs/Web/API/fetch
|
51
|
+
* @property {string} type=application/json {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-type}
|
52
|
+
*/
|
53
|
+
get defaults() {
|
54
|
+
return extend({}, super.defaults, {
|
55
|
+
mode: "cors",
|
56
|
+
credentials: "same-origin",
|
57
|
+
type: "application/json",
|
58
|
+
});
|
59
|
+
}
|
60
|
+
|
61
|
+
/**
|
62
|
+
*
|
63
|
+
* @return {Monster.DOM.Resource.Data}
|
64
|
+
*/
|
65
|
+
create() {
|
66
|
+
createElement.call(this);
|
67
|
+
return this;
|
68
|
+
}
|
69
|
+
|
70
|
+
/**
|
71
|
+
* This method appends the HTMLElement to the specified document
|
72
|
+
*
|
73
|
+
* throws {Error} target not found
|
74
|
+
* @return {Monster.DOM.Resource}
|
75
|
+
*/
|
76
|
+
connect() {
|
77
|
+
const self = this;
|
78
|
+
if (!(this[referenceSymbol] instanceof HTMLElement)) {
|
79
|
+
this.create();
|
80
|
+
}
|
81
|
+
|
82
|
+
appendToDocument.call(this);
|
83
|
+
return this;
|
84
|
+
}
|
85
|
+
|
86
|
+
/**
|
87
|
+
* This method is called by the `instanceof` operator.
|
88
|
+
* @returns {symbol}
|
89
|
+
* @since 2.1.0
|
90
|
+
*/
|
91
|
+
static get [instanceSymbol]() {
|
92
|
+
return Symbol.for("@schukai/monster/dom/resource/data");
|
93
|
+
}
|
94
|
+
|
95
|
+
/**
|
96
|
+
* @return {string}
|
97
|
+
*/
|
98
|
+
static getURLAttribute() {
|
99
|
+
return ATTRIBUTE_SRC;
|
100
|
+
}
|
101
101
|
}
|
102
102
|
|
103
103
|
/**
|
@@ -105,21 +105,21 @@ class Data extends Resource {
|
|
105
105
|
* @return {Monster.DOM.Resource.Data}
|
106
106
|
*/
|
107
107
|
function createElement() {
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
108
|
+
const document = this.getOption(KEY_DOCUMENT);
|
109
|
+
this[referenceSymbol] = document.createElement(TAG_SCRIPT);
|
110
|
+
|
111
|
+
for (const key of [
|
112
|
+
ATTRIBUTE_TYPE,
|
113
|
+
ATTRIBUTE_ID,
|
114
|
+
ATTRIBUTE_CLASS,
|
115
|
+
ATTRIBUTE_TITLE,
|
116
|
+
]) {
|
117
|
+
if (this.getOption(key) !== undefined) {
|
118
|
+
this[referenceSymbol][key] = this.getOption(key);
|
119
|
+
}
|
120
|
+
}
|
121
|
+
|
122
|
+
return this;
|
123
123
|
}
|
124
124
|
|
125
125
|
/**
|
@@ -128,41 +128,41 @@ function createElement() {
|
|
128
128
|
* throws {Error} target not found
|
129
129
|
*/
|
130
130
|
function appendToDocument() {
|
131
|
-
|
132
|
-
|
133
|
-
|
134
|
-
|
135
|
-
|
136
|
-
|
137
|
-
|
138
|
-
|
139
|
-
|
140
|
-
|
141
|
-
|
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
|
-
|
131
|
+
const targetNode = document.querySelector(this.getOption(KEY_QUERY, "head"));
|
132
|
+
if (!(targetNode instanceof HTMLElement)) {
|
133
|
+
throw new Error("target not found");
|
134
|
+
}
|
135
|
+
|
136
|
+
targetNode.appendChild(this[referenceSymbol]);
|
137
|
+
|
138
|
+
getGlobalFunction("fetch")(this.getOption(ATTRIBUTE_SRC), {
|
139
|
+
method: "GET", // *GET, POST, PUT, DELETE, etc.
|
140
|
+
mode: this.getOption("mode", "cors"), // no-cors, *cors, same-origin
|
141
|
+
cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
|
142
|
+
credentials: this.getOption("credentials", "same-origin"), // include, *same-origin, omit
|
143
|
+
headers: {
|
144
|
+
Accept: this.getOption("type", "application/json"),
|
145
|
+
},
|
146
|
+
redirect: "follow", // manual, *follow, error
|
147
|
+
referrerPolicy: "no-referrer", // no-referrer,
|
148
|
+
})
|
149
|
+
.then((response) => {
|
150
|
+
return response.text();
|
151
|
+
})
|
152
|
+
.then((text) => {
|
153
|
+
const textNode = document.createTextNode(text);
|
154
|
+
this[referenceSymbol].appendChild(textNode);
|
155
|
+
|
156
|
+
this[internalStateSymbol].getSubject()["loaded"] = true;
|
157
|
+
})
|
158
|
+
.catch((e) => {
|
159
|
+
this[internalStateSymbol].setSubject({
|
160
|
+
loaded: true,
|
161
|
+
error: e.toString(),
|
162
|
+
});
|
163
|
+
|
164
|
+
targetNode.setAttribute(ATTRIBUTE_ERRORMESSAGE, e.toString());
|
165
|
+
});
|
166
|
+
|
167
|
+
return this;
|
168
168
|
}
|
package/source/dom/template.mjs
CHANGED
@@ -12,15 +12,15 @@
|
|
12
12
|
* SPDX-License-Identifier: AGPL-3.0
|
13
13
|
*/
|
14
14
|
|
15
|
-
import {Base} from "../types/base.mjs";
|
16
|
-
import {getGlobalFunction, getGlobalObject} from "../types/global.mjs";
|
17
|
-
import {validateInstance, validateString} from "../types/validate.mjs";
|
18
|
-
import {ATTRIBUTE_TEMPLATE_PREFIX} from "./constants.mjs";
|
19
|
-
import {getDocumentTheme} from "./theme.mjs";
|
20
|
-
import {instanceSymbol} from "../constants.mjs";
|
21
|
-
import {findElementWithIdUpwards} from "./util.mjs";
|
15
|
+
import { Base } from "../types/base.mjs";
|
16
|
+
import { getGlobalFunction, getGlobalObject } from "../types/global.mjs";
|
17
|
+
import { validateInstance, validateString } from "../types/validate.mjs";
|
18
|
+
import { ATTRIBUTE_TEMPLATE_PREFIX } from "./constants.mjs";
|
19
|
+
import { getDocumentTheme } from "./theme.mjs";
|
20
|
+
import { instanceSymbol } from "../constants.mjs";
|
21
|
+
import { findElementWithIdUpwards } from "./util.mjs";
|
22
22
|
|
23
|
-
export {Template};
|
23
|
+
export { Template };
|
24
24
|
|
25
25
|
/**
|
26
26
|
* The template class provides methods for creating templates.
|
@@ -32,45 +32,45 @@ export {Template};
|
|
32
32
|
* @summary A template class
|
33
33
|
*/
|
34
34
|
class Template extends Base {
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
35
|
+
/**
|
36
|
+
*
|
37
|
+
* @param {HTMLTemplateElement} template
|
38
|
+
* @throws {TypeError} value is not an instance of
|
39
|
+
* @throws {TypeError} value is not a function
|
40
|
+
* @throws {Error} the function is not defined
|
41
|
+
*/
|
42
|
+
constructor(template) {
|
43
|
+
super();
|
44
|
+
const HTMLTemplateElement = getGlobalFunction("HTMLTemplateElement");
|
45
|
+
validateInstance(template, HTMLTemplateElement);
|
46
|
+
this.template = template;
|
47
|
+
}
|
48
|
+
|
49
|
+
/**
|
50
|
+
* This method is called by the `instanceof` operator.
|
51
|
+
* @returns {symbol}
|
52
|
+
* @since 2.1.0
|
53
|
+
*/
|
54
|
+
static get [instanceSymbol]() {
|
55
|
+
return Symbol.for("@schukai/monster/dom/resource/template");
|
56
|
+
}
|
57
|
+
|
58
|
+
/**
|
59
|
+
*
|
60
|
+
* @returns {HTMLTemplateElement}
|
61
|
+
*/
|
62
|
+
getTemplateElement() {
|
63
|
+
return this.template;
|
64
|
+
}
|
65
|
+
|
66
|
+
/**
|
67
|
+
*
|
68
|
+
* @return {DocumentFragment}
|
69
|
+
* @throws {TypeError} value is not an instance of
|
70
|
+
*/
|
71
|
+
createDocumentFragment() {
|
72
|
+
return this.template.content.cloneNode(true);
|
73
|
+
}
|
74
74
|
}
|
75
75
|
|
76
76
|
/**
|
@@ -137,70 +137,70 @@ class Template extends Base {
|
|
137
137
|
* @throws {TypeError} value is not a string
|
138
138
|
*/
|
139
139
|
export function findDocumentTemplate(id, currentNode) {
|
140
|
-
|
141
|
-
|
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
|
-
|
140
|
+
validateString(id);
|
141
|
+
|
142
|
+
const document = getGlobalObject("document");
|
143
|
+
const HTMLTemplateElement = getGlobalFunction("HTMLTemplateElement");
|
144
|
+
const DocumentFragment = getGlobalFunction("DocumentFragment");
|
145
|
+
const Document = getGlobalFunction("Document");
|
146
|
+
|
147
|
+
let prefixID;
|
148
|
+
|
149
|
+
if (
|
150
|
+
!(
|
151
|
+
currentNode instanceof Document || currentNode instanceof DocumentFragment
|
152
|
+
)
|
153
|
+
) {
|
154
|
+
if (currentNode instanceof Node) {
|
155
|
+
if (currentNode.hasAttribute(ATTRIBUTE_TEMPLATE_PREFIX)) {
|
156
|
+
prefixID = currentNode.getAttribute(ATTRIBUTE_TEMPLATE_PREFIX);
|
157
|
+
}
|
158
|
+
|
159
|
+
currentNode = currentNode.getRootNode();
|
160
|
+
|
161
|
+
if (
|
162
|
+
!(
|
163
|
+
currentNode instanceof Document ||
|
164
|
+
currentNode instanceof DocumentFragment
|
165
|
+
)
|
166
|
+
) {
|
167
|
+
currentNode = currentNode.ownerDocument;
|
168
|
+
}
|
169
|
+
}
|
170
|
+
|
171
|
+
if (
|
172
|
+
!(
|
173
|
+
currentNode instanceof Document ||
|
174
|
+
currentNode instanceof DocumentFragment
|
175
|
+
)
|
176
|
+
) {
|
177
|
+
currentNode = document;
|
178
|
+
}
|
179
|
+
}
|
180
|
+
|
181
|
+
let template;
|
182
|
+
const theme = getDocumentTheme();
|
183
|
+
|
184
|
+
if (prefixID) {
|
185
|
+
const themedPrefixID = `${prefixID}-${id}-${theme.getName()}`;
|
186
|
+
|
187
|
+
template = findElementWithIdUpwards(currentNode, themedPrefixID);
|
188
|
+
if (template instanceof HTMLTemplateElement) {
|
189
|
+
return new Template(template);
|
190
|
+
}
|
191
|
+
}
|
192
|
+
|
193
|
+
const themedID = `${id}-${theme.getName()}`;
|
194
|
+
|
195
|
+
template = findElementWithIdUpwards(currentNode, themedID);
|
196
|
+
if (template instanceof HTMLTemplateElement) {
|
197
|
+
return new Template(template);
|
198
|
+
}
|
199
|
+
|
200
|
+
template = findElementWithIdUpwards(currentNode, id);
|
201
|
+
if (template instanceof HTMLTemplateElement) {
|
202
|
+
return new Template(template);
|
203
|
+
}
|
204
|
+
|
205
|
+
throw new Error(`template ${id} not found.`);
|
206
206
|
}
|