blue-react 11.2.1 → 11.3.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.
|
@@ -38,7 +38,7 @@ export default function HeaderTitle(_ref) {
|
|
|
38
38
|
useEffect(setDocumentTitle, [children]);
|
|
39
39
|
return /*#__PURE__*/_jsxs("div", {
|
|
40
40
|
id: uniqueId,
|
|
41
|
-
className: "blue-header-title d-inline-flex gap-2 fw-medium align-items-center
|
|
41
|
+
className: "blue-header-title d-inline-flex gap-2 fw-medium align-items-center" + (className ? " ".concat(className) : "") + (sidebar ? " sidebar" : ""),
|
|
42
42
|
children: [logo && /*#__PURE__*/createElement(elementType, {
|
|
43
43
|
to: to,
|
|
44
44
|
href: href
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { CSSProperties } from "react";
|
|
1
|
+
import React, { CSSProperties, ReactNode } from "react";
|
|
2
2
|
export interface LayoutProps {
|
|
3
3
|
children?: React.ReactNode;
|
|
4
4
|
className?: string;
|
|
@@ -6,8 +6,9 @@ export interface LayoutProps {
|
|
|
6
6
|
header?: React.ReactNode;
|
|
7
7
|
side?: React.ReactNode;
|
|
8
8
|
noPageBorder?: boolean;
|
|
9
|
+
drawerTitle?: ReactNode;
|
|
9
10
|
}
|
|
10
11
|
/**
|
|
11
12
|
* A layout with header, side and main content area. Side is collapsible.
|
|
12
13
|
*/
|
|
13
|
-
export default function Layout({ children, className, style, header, side, noPageBorder }: LayoutProps): import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
export default function Layout({ children, className, style, header, side, noPageBorder, drawerTitle }: LayoutProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import React from "react";
|
|
1
|
+
import React, { useEffect, useId, useRef } from "react";
|
|
2
2
|
import clsx from "clsx";
|
|
3
|
+
import { init, dispose } from "blue-web/dist/js/layout.js";
|
|
3
4
|
import { getPhrase } from "./shared.js";
|
|
4
5
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
5
6
|
/**
|
|
@@ -12,54 +13,42 @@ export default function Layout(_ref) {
|
|
|
12
13
|
header = _ref.header,
|
|
13
14
|
side = _ref.side,
|
|
14
15
|
_ref$noPageBorder = _ref.noPageBorder,
|
|
15
|
-
noPageBorder = _ref$noPageBorder === void 0 ? false : _ref$noPageBorder
|
|
16
|
+
noPageBorder = _ref$noPageBorder === void 0 ? false : _ref$noPageBorder,
|
|
17
|
+
drawerTitle = _ref.drawerTitle;
|
|
18
|
+
var ref = useRef(null);
|
|
19
|
+
var idPrefix = useId();
|
|
20
|
+
var sideId = "".concat(idPrefix, "side");
|
|
21
|
+
var drawerId = "".concat(idPrefix, "drawer");
|
|
22
|
+
var drawerLabelId = "".concat(idPrefix, "drawerLabel");
|
|
23
|
+
useEffect(function () {
|
|
24
|
+
if (ref.current) {
|
|
25
|
+
init(ref.current);
|
|
26
|
+
}
|
|
27
|
+
return function () {
|
|
28
|
+
if (ref.current) {
|
|
29
|
+
dispose(ref.current);
|
|
30
|
+
}
|
|
31
|
+
};
|
|
32
|
+
}, []);
|
|
16
33
|
return /*#__PURE__*/_jsxs("div", {
|
|
34
|
+
ref: ref,
|
|
17
35
|
className: clsx("blue-layout", className),
|
|
18
36
|
style: style,
|
|
19
|
-
children: [/*#__PURE__*/
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
"aria-label": getPhrase("Toggle menu"),
|
|
29
|
-
role: "button",
|
|
30
|
-
children: /*#__PURE__*/_jsx("span", {
|
|
31
|
-
className: "btn blue-menu-item w-100 h-100 d-flex align-items-center justify-content-center p-0",
|
|
32
|
-
children: /*#__PURE__*/_jsx("svg", {
|
|
33
|
-
xmlns: "http://www.w3.org/2000/svg",
|
|
34
|
-
viewBox: "0 0 16 16",
|
|
35
|
-
"aria-hidden": "true",
|
|
36
|
-
width: "1em",
|
|
37
|
-
height: "1em",
|
|
38
|
-
fill: "currentColor",
|
|
39
|
-
className: "bi bi-layout-sidebar",
|
|
40
|
-
children: /*#__PURE__*/_jsx("path", {
|
|
41
|
-
d: "M0 3a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm5-1v12h9a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1zM4 2H2a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h2z"
|
|
42
|
-
})
|
|
43
|
-
})
|
|
44
|
-
})
|
|
45
|
-
}), /*#__PURE__*/_jsx("input", {
|
|
46
|
-
id: "layout-drawer",
|
|
47
|
-
type: "checkbox",
|
|
48
|
-
className: "blue-layout-state blue-layout-state-drawer"
|
|
49
|
-
}), /*#__PURE__*/_jsx("label", {
|
|
50
|
-
className: "blue-layout-toggle blue-layout-toggle-drawer",
|
|
51
|
-
htmlFor: "layout-drawer",
|
|
52
|
-
title: getPhrase("Toggle menu"),
|
|
53
|
-
"aria-label": getPhrase("Toggle menu"),
|
|
54
|
-
role: "button",
|
|
55
|
-
children: /*#__PURE__*/_jsx("span", {
|
|
56
|
-
className: "btn blue-menu-item w-100 h-100 d-flex align-items-center justify-content-center p-0",
|
|
37
|
+
children: [/*#__PURE__*/_jsxs("header", {
|
|
38
|
+
className: "blue-layout-header",
|
|
39
|
+
children: [/*#__PURE__*/_jsx("button", {
|
|
40
|
+
type: "button",
|
|
41
|
+
className: "btn blue-menu-item blue-btn-square d-flex d-lg-none"
|
|
42
|
+
/* @ts-ignore */,
|
|
43
|
+
command: "show-modal",
|
|
44
|
+
commandfor: drawerId,
|
|
45
|
+
"aria-label": getPhrase("Toggle menu"),
|
|
57
46
|
children: /*#__PURE__*/_jsxs("svg", {
|
|
58
47
|
xmlns: "http://www.w3.org/2000/svg",
|
|
59
48
|
viewBox: "0 0 16 16",
|
|
60
49
|
"aria-hidden": "true",
|
|
61
|
-
width: "
|
|
62
|
-
height: "
|
|
50
|
+
width: "16",
|
|
51
|
+
height: "16",
|
|
63
52
|
fill: "currentColor",
|
|
64
53
|
className: "bi bi-layout-sidebar-inset",
|
|
65
54
|
children: [/*#__PURE__*/_jsx("path", {
|
|
@@ -68,13 +57,67 @@ export default function Layout(_ref) {
|
|
|
68
57
|
d: "M3 4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z"
|
|
69
58
|
})]
|
|
70
59
|
})
|
|
71
|
-
})
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
60
|
+
}), /*#__PURE__*/_jsx("button", {
|
|
61
|
+
type: "button",
|
|
62
|
+
className: "btn blue-menu-item blue-btn-square d-none d-lg-flex",
|
|
63
|
+
"data-blue-toggle": "layout-side",
|
|
64
|
+
"aria-controls": sideId,
|
|
65
|
+
"aria-expanded": "true",
|
|
66
|
+
"aria-label": getPhrase("Toggle sidebar"),
|
|
67
|
+
children: /*#__PURE__*/_jsx("svg", {
|
|
68
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
69
|
+
viewBox: "0 0 16 16",
|
|
70
|
+
"aria-hidden": "true",
|
|
71
|
+
width: "16",
|
|
72
|
+
height: "16",
|
|
73
|
+
fill: "currentColor",
|
|
74
|
+
className: "bi bi-layout-sidebar",
|
|
75
|
+
children: /*#__PURE__*/_jsx("path", {
|
|
76
|
+
d: "M0 3a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm5-1v12h9a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1zM4 2H2a1 1 0 0 0-1 1v10a1 1 0 0 0 1 1h2z"
|
|
77
|
+
})
|
|
78
|
+
})
|
|
79
|
+
}), header]
|
|
80
|
+
}), /*#__PURE__*/_jsx("div", {
|
|
81
|
+
id: sideId,
|
|
76
82
|
className: "blue-layout-side",
|
|
77
|
-
children:
|
|
83
|
+
children: /*#__PURE__*/_jsxs("dialog", {
|
|
84
|
+
className: "blue-lg-modal blue-modal modal",
|
|
85
|
+
id: drawerId,
|
|
86
|
+
"aria-describedby": drawerLabelId,
|
|
87
|
+
children: [/*#__PURE__*/_jsxs("div", {
|
|
88
|
+
className: "offcanvas offcanvas-start show",
|
|
89
|
+
children: [/*#__PURE__*/_jsxs("div", {
|
|
90
|
+
className: "offcanvas-header",
|
|
91
|
+
children: [/*#__PURE__*/_jsx("h1", {
|
|
92
|
+
className: "h5 offcanvas-title",
|
|
93
|
+
id: drawerLabelId,
|
|
94
|
+
children: drawerTitle || getPhrase("Menu")
|
|
95
|
+
}), /*#__PURE__*/_jsx("form", {
|
|
96
|
+
method: "dialog",
|
|
97
|
+
style: {
|
|
98
|
+
display: "contents"
|
|
99
|
+
},
|
|
100
|
+
children: /*#__PURE__*/_jsx("button", {
|
|
101
|
+
type: "submit",
|
|
102
|
+
className: "btn-close",
|
|
103
|
+
"aria-label": getPhrase("Close")
|
|
104
|
+
})
|
|
105
|
+
})]
|
|
106
|
+
}), /*#__PURE__*/_jsx("div", {
|
|
107
|
+
className: "offcanvas-body",
|
|
108
|
+
children: /*#__PURE__*/_jsx("div", {
|
|
109
|
+
className: "blue-layout-side-body",
|
|
110
|
+
children: side
|
|
111
|
+
})
|
|
112
|
+
})]
|
|
113
|
+
}), /*#__PURE__*/_jsx("form", {
|
|
114
|
+
method: "dialog",
|
|
115
|
+
className: "blue-modal-backdrop",
|
|
116
|
+
children: /*#__PURE__*/_jsx("button", {
|
|
117
|
+
children: getPhrase("Close")
|
|
118
|
+
})
|
|
119
|
+
})]
|
|
120
|
+
})
|
|
78
121
|
}), /*#__PURE__*/_jsx("main", {
|
|
79
122
|
className: "blue-layout-main",
|
|
80
123
|
children: /*#__PURE__*/_jsx("div", {
|
|
@@ -83,13 +126,6 @@ export default function Layout(_ref) {
|
|
|
83
126
|
}),
|
|
84
127
|
children: children
|
|
85
128
|
})
|
|
86
|
-
}), /*#__PURE__*/_jsx("label", {
|
|
87
|
-
"aria-label": "Close sidebar",
|
|
88
|
-
htmlFor: "layout-drawer",
|
|
89
|
-
className: "blue-layout-overlay bg-dark w-100 h-100",
|
|
90
|
-
style: {
|
|
91
|
-
"--bs-bg-opacity": 0.5
|
|
92
|
-
}
|
|
93
129
|
})]
|
|
94
130
|
});
|
|
95
131
|
}
|
|
@@ -4,8 +4,11 @@ var phrases = {
|
|
|
4
4
|
No: ["No", "Nein"],
|
|
5
5
|
Message: ["Message", "Nachricht"],
|
|
6
6
|
"Toggle menu": ["Toggle menu", "Menü umschalten"],
|
|
7
|
+
Menu: ["Menu", "Menü"],
|
|
8
|
+
"Toggle sidebar": ["Toggle sidebar", "Seitenleiste umschalten"],
|
|
7
9
|
"Toggle details": ["Toggle details", "Details umschalten"],
|
|
8
10
|
"Close all": ["Close all", "Alle schließen"],
|
|
11
|
+
Close: ["Close", "Schließen"],
|
|
9
12
|
Error: ["Error", "Fehler"],
|
|
10
13
|
Information: ["Information", "Information"],
|
|
11
14
|
Search: ["Search", "Suche"],
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "blue-react",
|
|
3
|
-
"version": "11.
|
|
3
|
+
"version": "11.3.0",
|
|
4
4
|
"description": "Blue React Components",
|
|
5
5
|
"license": "LGPL-3.0-or-later",
|
|
6
6
|
"type": "module",
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
},
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@popperjs/core": "^2.11.5",
|
|
38
|
-
"blue-web": "^1.
|
|
38
|
+
"blue-web": "^1.27.1",
|
|
39
39
|
"bootstrap": "~5.3.3",
|
|
40
40
|
"clsx": "^1.1.1"
|
|
41
41
|
},
|
|
@@ -49,8 +49,8 @@
|
|
|
49
49
|
"@babel/preset-typescript": "^7.9.0",
|
|
50
50
|
"@react-docgen/cli": "^3.0.4",
|
|
51
51
|
"@types/bootstrap": "^5.0.17",
|
|
52
|
-
"@types/react": "^19.
|
|
53
|
-
"@types/react-dom": "^19.
|
|
52
|
+
"@types/react": "^19.2.15",
|
|
53
|
+
"@types/react-dom": "^19.2.3",
|
|
54
54
|
"@types/react-router-dom": "^5.3.3",
|
|
55
55
|
"@types/react-syntax-highlighter": "^13.5.0",
|
|
56
56
|
"@typescript-eslint/eslint-plugin": "^8.46.4",
|
|
@@ -64,15 +64,15 @@
|
|
|
64
64
|
"gh-pages": "^6.3.0",
|
|
65
65
|
"license-report": "^6.2.0",
|
|
66
66
|
"prettier": "2.4.1",
|
|
67
|
-
"react": "^19.
|
|
67
|
+
"react": "^19.2.6",
|
|
68
68
|
"react-bootstrap-icons": "^1.9.1",
|
|
69
69
|
"react-docgen": "^8.0.2",
|
|
70
|
-
"react-dom": "^19.
|
|
70
|
+
"react-dom": "^19.2.6",
|
|
71
71
|
"react-markdown": "^9.0.1",
|
|
72
72
|
"react-router-dom": "^5.3.3",
|
|
73
73
|
"react-syntax-highlighter": "^15.4.3",
|
|
74
74
|
"sass": "1.77.6",
|
|
75
|
-
"typescript": "^5.
|
|
75
|
+
"typescript": "^5.9.3",
|
|
76
76
|
"vite": "^5.3.4"
|
|
77
77
|
}
|
|
78
78
|
}
|