blue-react 10.0.3 → 10.0.4

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.
Files changed (4) hide show
  1. package/dist/components/Layout.d.ts +0 -1
  2. package/dist/components/Layout.js +45 -46
  3. package/dist/components/shared.js +7 -1
  4. package/package.json +2 -2
package/dist/components/Layout.d.ts CHANGED
@@ -1,5 +1,4 @@
1
1
  import React from "react";
2
- import "blue-web/dist/js/side-layout.js";
3
2
  export interface LayoutProps {
4
3
  children?: React.ReactNode;
5
4
  header?: React.ReactNode;
package/dist/components/Layout.js CHANGED
@@ -1,8 +1,7 @@
1
1
  import React from "react";
2
- import "blue-web/dist/js/side-layout.js";
3
2
  import LayoutHeader from "./Layout/LayoutHeader.js";
4
3
  import LayoutMain from "./Layout/LayoutMain.js";
5
- var SideLayout = "side-layout";
4
+ import { getPhrase } from "./shared.js";
6
5
  /**
7
6
  * A layout with header, side and main content area. Side is collapsible.
8
7
  */
@@ -13,75 +12,75 @@ export default function Layout(_ref) {
13
12
  _ref$noPageBorder = _ref.noPageBorder,
14
13
  noPageBorder = _ref$noPageBorder === void 0 ? false : _ref$noPageBorder;
15
14
  return /*#__PURE__*/React.createElement("div", {
16
- className: "vh-100"
17
- }, /*#__PURE__*/React.createElement(SideLayout, {
18
- style: {
19
- "--base-z-index": 500,
20
- "--side-width": "var(--blue-sidebar-width)",
21
- "--toggler-size": "var(--blue-menu-item-height)"
22
- }
23
- }, /*#__PURE__*/React.createElement("div", {
24
- slot: "expand-toggler",
25
- className: "w-100 h-100",
26
- style: {
27
- color: "var(--blue-sidebar-color)",
28
- background: "var(--blue-sidebar-bg)"
29
- }
30
- }, /*#__PURE__*/React.createElement("div", {
31
- className: "btn blue-menu-item w-100 h-100 d-flex align-items-center justify-content-center p-0",
32
- style: {
33
- boxShadow: "var(--trigger-box-shadow)"
34
- }
15
+ className: "blue-layout"
16
+ }, /*#__PURE__*/React.createElement("input", {
17
+ id: "layout-expand",
18
+ type: "checkbox",
19
+ className: "blue-layout-state blue-layout-state-expand",
20
+ defaultChecked: true
21
+ }), /*#__PURE__*/React.createElement("label", {
22
+ className: "blue-layout-toggle blue-layout-toggle-expand",
23
+ htmlFor: "layout-expand",
24
+ title: getPhrase("Toggle menu"),
25
+ role: "button"
26
+ }, /*#__PURE__*/React.createElement("span", {
27
+ className: "btn blue-menu-item w-100 h-100 d-flex align-items-center justify-content-center p-0"
35
28
  }, /*#__PURE__*/React.createElement("svg", {
36
29
  xmlns: "http://www.w3.org/2000/svg",
37
30
  viewBox: "0 0 16 16",
38
31
  "aria-hidden": "true",
32
+ tabIndex: -1,
39
33
  width: "1em",
40
34
  height: "1em",
41
35
  fill: "currentColor",
42
36
  className: "bi bi-layout-sidebar"
43
37
  }, /*#__PURE__*/React.createElement("path", {
38
+ tabIndex: -1,
44
39
  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"
45
- })))), /*#__PURE__*/React.createElement("div", {
46
- slot: "drawer-toggler",
47
- className: "w-100 h-100",
48
- style: {
49
- color: "var(--blue-sidebar-color)",
50
- background: "var(--blue-sidebar-bg)"
51
- }
52
- }, /*#__PURE__*/React.createElement("div", {
53
- className: "btn blue-menu-item w-100 h-100 d-flex align-items-center justify-content-center p-0",
54
- style: {
55
- boxShadow: "var(--trigger-box-shadow)"
56
- }
40
+ })))), /*#__PURE__*/React.createElement("input", {
41
+ id: "layout-drawer",
42
+ type: "checkbox",
43
+ className: "blue-layout-state blue-layout-state-drawer"
44
+ }), /*#__PURE__*/React.createElement("label", {
45
+ className: "blue-layout-toggle blue-layout-toggle-drawer",
46
+ htmlFor: "layout-drawer",
47
+ title: getPhrase("Toggle menu"),
48
+ role: "button"
49
+ }, /*#__PURE__*/React.createElement("span", {
50
+ className: "btn blue-menu-item w-100 h-100 d-flex align-items-center justify-content-center p-0"
57
51
  }, /*#__PURE__*/React.createElement("svg", {
58
52
  xmlns: "http://www.w3.org/2000/svg",
59
53
  viewBox: "0 0 16 16",
60
54
  "aria-hidden": "true",
55
+ tabIndex: -1,
61
56
  width: "1em",
62
57
  height: "1em",
63
58
  fill: "currentColor",
64
59
  className: "bi bi-layout-sidebar-inset"
65
60
  }, /*#__PURE__*/React.createElement("path", {
61
+ tabIndex: -1,
66
62
  d: "M14 2a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1zM2 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2z"
67
63
  }), /*#__PURE__*/React.createElement("path", {
64
+ tabIndex: -1,
68
65
  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
- })))), /*#__PURE__*/React.createElement("div", {
70
- slot: "overlay",
71
- className: "bg-dark w-100 h-100",
72
- style: {
73
- "--bs-bg-opacity": 0.5
74
- }
75
- }), /*#__PURE__*/React.createElement(LayoutHeader, {
76
- slot: "header"
77
- }, header), /*#__PURE__*/React.createElement("div", {
78
- slot: "side",
79
- className: "overflow-x-hidden overflow-y-auto h-100",
66
+ })))), /*#__PURE__*/React.createElement("header", {
67
+ className: "blue-layout-header"
68
+ }, /*#__PURE__*/React.createElement(LayoutHeader, null, header)), /*#__PURE__*/React.createElement("aside", {
69
+ className: "blue-layout-side blue-sidebar-state open h-100 overflow-y-auto overflow-x-hidden",
80
70
  style: {
81
71
  color: "var(--blue-sidebar-color)",
82
72
  background: "var(--blue-sidebar-bg)"
83
73
  }
84
- }, side), /*#__PURE__*/React.createElement(LayoutMain, {
74
+ }, side), /*#__PURE__*/React.createElement("main", {
75
+ className: "blue-layout-main"
76
+ }, /*#__PURE__*/React.createElement(LayoutMain, {
85
77
  noPageBorder: noPageBorder
86
- }, children)));
78
+ }, children)), /*#__PURE__*/React.createElement("label", {
79
+ "aria-label": "Close sidebar",
80
+ htmlFor: "layout-drawer",
81
+ className: "blue-layout-overlay bg-dark w-100 h-100",
82
+ style: {
83
+ "--bs-bg-opacity": 0.5
84
+ }
85
+ }));
87
86
  }
package/dist/components/shared.js CHANGED
@@ -11,7 +11,13 @@ var phrases = {
11
11
  export function getPhrase(keyword) {
12
12
  var countryCode = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
13
13
  var _phrases = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
14
- countryCode = countryCode || navigator.language.toLowerCase().indexOf("de") > -1 ? "de-DE" : "en-US";
14
+ if (!countryCode) {
15
+ if (typeof navigator !== "undefined" && navigator.language) {
16
+ countryCode = navigator.language.toLowerCase().indexOf("de") > -1 ? "de-DE" : "en-US";
17
+ } else {
18
+ countryCode = "en-US";
19
+ }
20
+ }
15
21
  _phrases = _phrases || phrases;
16
22
  if (_phrases[keyword]) {
17
23
  if (countryCode.indexOf("de-") > -1) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "blue-react",
3
- "version": "10.0.3",
3
+ "version": "10.0.4",
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.13.0",
38
+ "blue-web": "^1.14.0",
39
39
  "bootstrap": "~5.3.3",
40
40
  "clsx": "^1.1.1"
41
41
  },