blue-react 8.8.1 → 9.0.0-alpha1
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/dist/components/ActionMenu.js +109 -98
- package/dist/components/ActionMenuSwitch.js +55 -44
- package/dist/components/Body.js +50 -38
- package/dist/components/Caret.js +32 -19
- package/dist/components/DocumentView.js +88 -76
- package/dist/components/Header.js +34 -22
- package/dist/components/HeaderTitle.js +66 -54
- package/dist/components/Intro.js +48 -35
- package/dist/components/Layout.js +295 -283
- package/dist/components/MenuItem.js +139 -130
- package/dist/components/Modal.js +173 -164
- package/dist/components/ModalProvider.js +195 -184
- package/dist/components/Outside.js +63 -50
- package/dist/components/Page.js +74 -62
- package/dist/components/Search.js +168 -157
- package/dist/components/SidebarMenu.js +69 -56
- package/dist/components/SlimContainer.js +34 -21
- package/dist/components/Status.js +76 -64
- package/dist/components/StatusProvider.js +79 -68
- package/dist/components/Switch.js +70 -57
- package/dist/components/Utilities.js +192 -178
- package/dist/components/shared.js +37 -23
- package/dist/style.css +10 -139
- package/dist/style.min.css +4 -4
- package/dist/style.scss +7 -8
- package/dist/styles/_action-menu.scss +1 -1
- package/dist/styles/_bootstrap-optimizations.scss +0 -8
- package/dist/styles/_caret.scss +3 -3
- package/dist/styles/_general.scss +0 -17
- package/dist/styles/_layout.scss +1 -1
- package/dist/styles/mixins/_sidebar.scss +1 -1
- package/package.json +3 -3
- package/dist/styles/_switch.scss +0 -21
|
@@ -1,207 +1,221 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
exports
|
|
9
|
-
|
|
10
|
-
exports
|
|
11
|
-
|
|
12
|
-
exports.hideSuccess = hideSuccess;
|
|
13
|
-
exports.removeClass = removeClass;
|
|
14
|
-
exports.resetAlertMessage = resetAlertMessage;
|
|
15
|
-
exports.scrollToTop = scrollToTop;
|
|
16
|
-
exports.setAlertMessage = setAlertMessage;
|
|
17
|
-
exports.showSuccess = showSuccess;
|
|
18
|
-
exports.startLoading = startLoading;
|
|
19
|
-
exports.toggleActions = toggleActions;
|
|
20
|
-
exports.toggleClass = toggleClass;
|
|
21
|
-
|
|
22
|
-
function hasClass(el, className) {
|
|
23
|
-
if (el.classList) return el.classList.contains(className);else return !!el.className.match(new RegExp("(\\s|^)" + className + "(\\s|$)"));
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
function addClass(el, className) {
|
|
27
|
-
if (el.classList) el.classList.add(className);else if (!hasClass(el, className)) el.className += " " + className;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
function removeClass(el, className) {
|
|
31
|
-
if (el.classList) el.classList.remove(className);else if (hasClass(el, className)) el.className = el.className.replace(new RegExp("(\\s|^)" + className + "(\\s|$)"), " ");
|
|
32
|
-
}
|
|
33
|
-
/**
|
|
34
|
-
* @deprecated Use (el as HTMLElement).classList.toggle("my-class") instead.
|
|
35
|
-
*/
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
function toggleClass(element, className) {
|
|
39
|
-
if (!element || !className) {
|
|
40
|
-
return;
|
|
1
|
+
(function (global, factory) {
|
|
2
|
+
if (typeof define === "function" && define.amd) {
|
|
3
|
+
define(["exports"], factory);
|
|
4
|
+
} else if (typeof exports !== "undefined") {
|
|
5
|
+
factory(exports);
|
|
6
|
+
} else {
|
|
7
|
+
var mod = {
|
|
8
|
+
exports: {}
|
|
9
|
+
};
|
|
10
|
+
factory(mod.exports);
|
|
11
|
+
global.Utilities = mod.exports;
|
|
41
12
|
}
|
|
13
|
+
})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports) {
|
|
14
|
+
"use strict";
|
|
42
15
|
|
|
43
|
-
|
|
44
|
-
|
|
16
|
+
Object.defineProperty(_exports, "__esModule", {
|
|
17
|
+
value: true
|
|
18
|
+
});
|
|
19
|
+
_exports.addClass = addClass;
|
|
20
|
+
_exports.default = void 0;
|
|
21
|
+
_exports.fetchData = fetchData;
|
|
22
|
+
_exports.finishLoading = finishLoading;
|
|
23
|
+
_exports.guid = void 0;
|
|
24
|
+
_exports.hasClass = hasClass;
|
|
25
|
+
_exports.hideSuccess = hideSuccess;
|
|
26
|
+
_exports.removeClass = removeClass;
|
|
27
|
+
_exports.resetAlertMessage = resetAlertMessage;
|
|
28
|
+
_exports.scrollToTop = scrollToTop;
|
|
29
|
+
_exports.setAlertMessage = setAlertMessage;
|
|
30
|
+
_exports.showSuccess = showSuccess;
|
|
31
|
+
_exports.startLoading = startLoading;
|
|
32
|
+
_exports.toggleActions = toggleActions;
|
|
33
|
+
_exports.toggleClass = toggleClass;
|
|
34
|
+
|
|
35
|
+
function hasClass(el, className) {
|
|
36
|
+
if (el.classList) return el.classList.contains(className);else return !!el.className.match(new RegExp("(\\s|^)" + className + "(\\s|$)"));
|
|
37
|
+
}
|
|
45
38
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
} else {
|
|
49
|
-
classString = classString.substr(0, nameIndex) + classString.substr(nameIndex + className.length);
|
|
39
|
+
function addClass(el, className) {
|
|
40
|
+
if (el.classList) el.classList.add(className);else if (!hasClass(el, className)) el.className += " " + className;
|
|
50
41
|
}
|
|
51
42
|
|
|
52
|
-
|
|
53
|
-
|
|
43
|
+
function removeClass(el, className) {
|
|
44
|
+
if (el.classList) el.classList.remove(className);else if (hasClass(el, className)) el.className = el.className.replace(new RegExp("(\\s|^)" + className + "(\\s|$)"), " ");
|
|
45
|
+
}
|
|
46
|
+
/**
|
|
47
|
+
* @deprecated Use (el as HTMLElement).classList.toggle("my-class") instead.
|
|
48
|
+
*/
|
|
54
49
|
|
|
55
|
-
function startLoading() {
|
|
56
|
-
;
|
|
57
|
-
document.querySelector(".blue-loading").style.display = "block";
|
|
58
|
-
}
|
|
59
50
|
|
|
60
|
-
function
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
}
|
|
51
|
+
function toggleClass(element, className) {
|
|
52
|
+
if (!element || !className) {
|
|
53
|
+
return;
|
|
54
|
+
}
|
|
64
55
|
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
document.querySelector(".blue-status-success").style.display = "flex";
|
|
68
|
-
}
|
|
56
|
+
var classString = element.className,
|
|
57
|
+
nameIndex = classString.indexOf(className);
|
|
69
58
|
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
59
|
+
if (nameIndex === -1) {
|
|
60
|
+
classString += " " + className;
|
|
61
|
+
} else {
|
|
62
|
+
classString = classString.substr(0, nameIndex) + classString.substr(nameIndex + className.length);
|
|
63
|
+
}
|
|
74
64
|
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
toggleClass(document.querySelector(".blue-layout"), "wrapper-in");
|
|
78
|
-
var els = document.querySelectorAll(".blue-actions");
|
|
65
|
+
element.className = classString;
|
|
66
|
+
}
|
|
79
67
|
|
|
80
|
-
|
|
81
|
-
|
|
68
|
+
function startLoading() {
|
|
69
|
+
;
|
|
70
|
+
document.querySelector(".blue-loading").style.display = "block";
|
|
82
71
|
}
|
|
83
|
-
}
|
|
84
|
-
/**
|
|
85
|
-
* Resets alert messages that was set with `setAlertMessage`.
|
|
86
|
-
* @param alertClassName Leave empty to reset messages of any status type
|
|
87
|
-
*/
|
|
88
72
|
|
|
73
|
+
function finishLoading() {
|
|
74
|
+
;
|
|
75
|
+
document.querySelector(".blue-loading").style.display = "";
|
|
76
|
+
}
|
|
89
77
|
|
|
90
|
-
function
|
|
91
|
-
if (!alertClassName) {
|
|
78
|
+
function showSuccess() {
|
|
92
79
|
;
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
});
|
|
96
|
-
} else {
|
|
97
|
-
var alertElement = document.querySelector(".blue-status-alert");
|
|
98
|
-
var statusElement = document.querySelector(".blue-status-" + alertClassName);
|
|
99
|
-
if (statusElement) statusElement.style.display = "";
|
|
80
|
+
document.querySelector(".blue-status-success").style.display = "flex";
|
|
81
|
+
}
|
|
100
82
|
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
}
|
|
83
|
+
function hideSuccess() {
|
|
84
|
+
;
|
|
85
|
+
document.querySelector(".blue-status-success").style.display = "";
|
|
105
86
|
}
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
function setAlertMessage(message) {
|
|
109
|
-
var alertClassName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "info";
|
|
110
|
-
var close = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
|
|
111
|
-
var detailText = arguments.length > 3 ? arguments[3] : undefined;
|
|
112
|
-
var alertElement = document.querySelector(".blue-status-alert");
|
|
113
|
-
var statusElement = document.querySelector(".blue-status-" + alertClassName);
|
|
114
|
-
if (statusElement) statusElement.style.display = "flex";
|
|
115
|
-
|
|
116
|
-
if (alertElement) {
|
|
117
|
-
alertElement.style.display = "block";
|
|
118
|
-
addClass(alertElement, "alert-" + (alertClassName === "loading" ? "info" : alertClassName));
|
|
119
|
-
alertElement.querySelector(".alert-body").innerHTML = "<h2>" + message + "</h2>";
|
|
120
|
-
|
|
121
|
-
if (detailText) {
|
|
122
|
-
alertElement.querySelector(".alert-body").innerHTML += "<span>" + detailText + "</span>";
|
|
123
|
-
}
|
|
124
87
|
|
|
125
|
-
|
|
88
|
+
function toggleActions() {
|
|
89
|
+
toggleClass(document.querySelector(".blue-wrapper"), "active");
|
|
90
|
+
toggleClass(document.querySelector(".blue-layout"), "wrapper-in");
|
|
91
|
+
var els = document.querySelectorAll(".blue-actions");
|
|
92
|
+
|
|
93
|
+
for (var i = 0; i < els.length; i++) {
|
|
94
|
+
toggleClass(els[i], "open");
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
/**
|
|
98
|
+
* Resets alert messages that was set with `setAlertMessage`.
|
|
99
|
+
* @param alertClassName Leave empty to reset messages of any status type
|
|
100
|
+
*/
|
|
126
101
|
|
|
127
|
-
if (close) {
|
|
128
|
-
btnCloseElement.style.display = "inline-block";
|
|
129
102
|
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
103
|
+
function resetAlertMessage(alertClassName) {
|
|
104
|
+
if (!alertClassName) {
|
|
105
|
+
;
|
|
106
|
+
["loading", "success", "info", "warning", "danger"].forEach(function (status) {
|
|
107
|
+
resetAlertMessage(status);
|
|
108
|
+
});
|
|
133
109
|
} else {
|
|
134
|
-
|
|
110
|
+
var alertElement = document.querySelector(".blue-status-alert");
|
|
111
|
+
var statusElement = document.querySelector(".blue-status-" + alertClassName);
|
|
112
|
+
if (statusElement) statusElement.style.display = "";
|
|
113
|
+
|
|
114
|
+
if (alertElement) {
|
|
115
|
+
alertElement.style.display = "";
|
|
116
|
+
removeClass(alertElement, "alert-" + (alertClassName === "loading" ? "info" : alertClassName));
|
|
117
|
+
}
|
|
135
118
|
}
|
|
136
119
|
}
|
|
137
|
-
}
|
|
138
120
|
|
|
139
|
-
function
|
|
140
|
-
|
|
141
|
-
|
|
121
|
+
function setAlertMessage(message) {
|
|
122
|
+
var alertClassName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "info";
|
|
123
|
+
var close = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
|
|
124
|
+
var detailText = arguments.length > 3 ? arguments[3] : undefined;
|
|
125
|
+
var alertElement = document.querySelector(".blue-status-alert");
|
|
126
|
+
var statusElement = document.querySelector(".blue-status-" + alertClassName);
|
|
127
|
+
if (statusElement) statusElement.style.display = "flex";
|
|
142
128
|
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
129
|
+
if (alertElement) {
|
|
130
|
+
alertElement.style.display = "block";
|
|
131
|
+
addClass(alertElement, "alert-" + (alertClassName === "loading" ? "info" : alertClassName));
|
|
132
|
+
alertElement.querySelector(".alert-body").innerHTML = "<h2>" + message + "</h2>";
|
|
146
133
|
|
|
147
|
-
|
|
134
|
+
if (detailText) {
|
|
135
|
+
alertElement.querySelector(".alert-body").innerHTML += "<span>" + detailText + "</span>";
|
|
136
|
+
}
|
|
148
137
|
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
}
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
401: "Unauthorized",
|
|
161
|
-
403: "Forbidden",
|
|
162
|
-
404: "Not Found",
|
|
163
|
-
405: "Method Not Allowed",
|
|
164
|
-
408: "Request Timeout",
|
|
165
|
-
409: "Conflict",
|
|
166
|
-
500: "Internal Server Error",
|
|
167
|
-
502: "Bad Gateway"
|
|
168
|
-
};
|
|
169
|
-
|
|
170
|
-
function fetchData(input, init) {
|
|
171
|
-
var showErrorDetail = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
|
|
172
|
-
var onError = arguments.length > 3 ? arguments[3] : undefined;
|
|
173
|
-
return fetch(input, init).then(function (response) {
|
|
174
|
-
if (!response.ok) throw response;
|
|
175
|
-
return response;
|
|
176
|
-
}).catch(function (reason) {
|
|
177
|
-
if (reason.text) {
|
|
178
|
-
reason.text().then(function (errorMessage) {
|
|
179
|
-
setAlertMessage("".concat(reason.status, " - ").concat(reason.statusText || httpStatusCodes[reason.status] || "Error"), "danger", true, showErrorDetail ? errorMessage.toString().replace(/(<style[\w\W]+style>)/g, "").replace(/<[^>]+>/g, "") : undefined);
|
|
180
|
-
|
|
181
|
-
if (onError) {
|
|
182
|
-
onError(errorMessage, reason);
|
|
183
|
-
}
|
|
184
|
-
});
|
|
138
|
+
var btnCloseElement = alertElement.querySelector(".btn-close");
|
|
139
|
+
|
|
140
|
+
if (close) {
|
|
141
|
+
btnCloseElement.style.display = "inline-block";
|
|
142
|
+
|
|
143
|
+
btnCloseElement.onclick = function () {
|
|
144
|
+
resetAlertMessage(alertClassName);
|
|
145
|
+
};
|
|
146
|
+
} else {
|
|
147
|
+
btnCloseElement.style.display = "none";
|
|
148
|
+
}
|
|
185
149
|
}
|
|
150
|
+
}
|
|
186
151
|
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
}
|
|
190
|
-
|
|
191
|
-
var
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
152
|
+
function s4() {
|
|
153
|
+
return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
var guid = function guid() {
|
|
157
|
+
return s4() + s4() + "-" + s4() + "-" + s4() + "-" + s4() + "-" + s4() + s4() + s4();
|
|
158
|
+
};
|
|
159
|
+
|
|
160
|
+
_exports.guid = guid;
|
|
161
|
+
|
|
162
|
+
function scrollToTop() {
|
|
163
|
+
var routerPage = document.querySelector(".router-page.active");
|
|
164
|
+
routerPage.scroll({
|
|
165
|
+
behavior: "smooth",
|
|
166
|
+
left: 0,
|
|
167
|
+
top: 0
|
|
168
|
+
});
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
var httpStatusCodes = {
|
|
172
|
+
400: "Bad Request",
|
|
173
|
+
401: "Unauthorized",
|
|
174
|
+
403: "Forbidden",
|
|
175
|
+
404: "Not Found",
|
|
176
|
+
405: "Method Not Allowed",
|
|
177
|
+
408: "Request Timeout",
|
|
178
|
+
409: "Conflict",
|
|
179
|
+
500: "Internal Server Error",
|
|
180
|
+
502: "Bad Gateway"
|
|
181
|
+
};
|
|
182
|
+
|
|
183
|
+
function fetchData(input, init) {
|
|
184
|
+
var showErrorDetail = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
|
|
185
|
+
var onError = arguments.length > 3 ? arguments[3] : undefined;
|
|
186
|
+
return fetch(input, init).then(function (response) {
|
|
187
|
+
if (!response.ok) throw response;
|
|
188
|
+
return response;
|
|
189
|
+
}).catch(function (reason) {
|
|
190
|
+
if (reason.text) {
|
|
191
|
+
reason.text().then(function (errorMessage) {
|
|
192
|
+
setAlertMessage("".concat(reason.status, " - ").concat(reason.statusText || httpStatusCodes[reason.status] || "Error"), "danger", true, showErrorDetail ? errorMessage.toString().replace(/(<style[\w\W]+style>)/g, "").replace(/<[^>]+>/g, "") : undefined);
|
|
193
|
+
|
|
194
|
+
if (onError) {
|
|
195
|
+
onError(errorMessage, reason);
|
|
196
|
+
}
|
|
197
|
+
});
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
throw reason;
|
|
201
|
+
});
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
var _default = {
|
|
205
|
+
hasClass: hasClass,
|
|
206
|
+
addClass: addClass,
|
|
207
|
+
removeClass: removeClass,
|
|
208
|
+
toggleClass: toggleClass,
|
|
209
|
+
startLoading: startLoading,
|
|
210
|
+
finishLoading: finishLoading,
|
|
211
|
+
showSuccess: showSuccess,
|
|
212
|
+
hideSuccess: hideSuccess,
|
|
213
|
+
toggleActions: toggleActions,
|
|
214
|
+
resetAlertMessage: resetAlertMessage,
|
|
215
|
+
setAlertMessage: setAlertMessage,
|
|
216
|
+
guid: guid,
|
|
217
|
+
scrollToTop: scrollToTop,
|
|
218
|
+
fetchData: fetchData
|
|
219
|
+
};
|
|
220
|
+
_exports.default = _default;
|
|
221
|
+
});
|
|
@@ -1,31 +1,45 @@
|
|
|
1
|
-
|
|
1
|
+
(function (global, factory) {
|
|
2
|
+
if (typeof define === "function" && define.amd) {
|
|
3
|
+
define(["exports"], factory);
|
|
4
|
+
} else if (typeof exports !== "undefined") {
|
|
5
|
+
factory(exports);
|
|
6
|
+
} else {
|
|
7
|
+
var mod = {
|
|
8
|
+
exports: {}
|
|
9
|
+
};
|
|
10
|
+
factory(mod.exports);
|
|
11
|
+
global.shared = mod.exports;
|
|
12
|
+
}
|
|
13
|
+
})(typeof globalThis !== "undefined" ? globalThis : typeof self !== "undefined" ? self : this, function (_exports) {
|
|
14
|
+
"use strict";
|
|
2
15
|
|
|
3
|
-
Object.defineProperty(
|
|
4
|
-
|
|
5
|
-
});
|
|
6
|
-
|
|
7
|
-
var phrases = {
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
};
|
|
16
|
+
Object.defineProperty(_exports, "__esModule", {
|
|
17
|
+
value: true
|
|
18
|
+
});
|
|
19
|
+
_exports.getPhrase = getPhrase;
|
|
20
|
+
var phrases = {
|
|
21
|
+
Cancel: ["Cancel", "Abbrechen"],
|
|
22
|
+
Yes: ["Yes", "Ja"],
|
|
23
|
+
No: ["No", "Nein"],
|
|
24
|
+
Message: ["Message", "Nachricht"]
|
|
25
|
+
};
|
|
13
26
|
|
|
14
|
-
function getPhrase(keyword) {
|
|
15
|
-
|
|
27
|
+
function getPhrase(keyword) {
|
|
28
|
+
var countryCode = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
|
|
16
29
|
|
|
17
|
-
|
|
30
|
+
var _phrases = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
|
|
18
31
|
|
|
19
|
-
|
|
20
|
-
|
|
32
|
+
countryCode = countryCode || navigator.language.toLowerCase().indexOf("de") > -1 ? "de-DE" : "en-US";
|
|
33
|
+
_phrases = _phrases || phrases;
|
|
21
34
|
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
35
|
+
if (_phrases[keyword]) {
|
|
36
|
+
if (countryCode.indexOf("de-") > -1) {
|
|
37
|
+
return _phrases[keyword][1];
|
|
38
|
+
} else {
|
|
39
|
+
return _phrases[keyword][0];
|
|
40
|
+
}
|
|
25
41
|
} else {
|
|
26
|
-
return
|
|
42
|
+
return keyword;
|
|
27
43
|
}
|
|
28
|
-
} else {
|
|
29
|
-
return keyword;
|
|
30
44
|
}
|
|
31
|
-
}
|
|
45
|
+
});
|