blue-web 1.10.1 → 1.11.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/README.md +43 -24
- package/dist/js/dialog.bundle.js +1 -1
- package/dist/js/dialog.js +45 -6
- package/dist/js/progress.bundle.js +1 -1
- package/dist/js/progress.js +3 -4
- package/dist/js/read-view.bundle.js +1 -1
- package/dist/js/read-view.js +41 -6
- package/dist/js/side-layout.bundle.js +1 -1
- package/dist/js/side-layout.js +139 -1
- package/dist/js/utils.js +3 -3
- package/dist/merged.scss +125 -5
- package/dist/neu.scss +2 -0
- package/dist/style.css +241 -188
- package/dist/style.css.map +1 -1
- package/dist/style.min.css +4 -4
- package/dist/style.scss +2 -1
- package/dist/styles/_action-menu.scss +2 -3
- package/dist/styles/_layout.scss +120 -0
- package/package.json +17 -24
package/dist/style.scss
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* Blue Web v1.
|
|
2
|
+
* Blue Web v1.11.0 (https://bruegmann.github.io/blue-web)
|
|
3
3
|
* Licensed under GNU General Public License v3.0 (https://github.com/bruegmann/blue-web/blob/master/LICENSE).
|
|
4
4
|
*/
|
|
5
5
|
|
|
@@ -36,3 +36,4 @@
|
|
|
36
36
|
@import "./styles/container-grid";
|
|
37
37
|
@import "./styles/tabs";
|
|
38
38
|
@import "./styles/modal";
|
|
39
|
+
@import "./styles/layout";
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
.blue-actions {
|
|
2
2
|
--max-width: calc(
|
|
3
|
-
var(--bs-btn-border-width, 1px) + var(--bs-btn-padding-x, 0.75rem) +
|
|
4
|
-
|
|
5
|
-
var(--bs-btn-border-width, 1px)
|
|
3
|
+
var(--bs-btn-border-width, 1px) + var(--bs-btn-padding-x, 0.75rem) + var(--bs-btn-font-size, 1rem) +
|
|
4
|
+
var(--bs-btn-padding-x, 0.75rem) + var(--bs-btn-border-width, 1px)
|
|
6
5
|
);
|
|
7
6
|
|
|
8
7
|
display: inline;
|
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* The new approach for a global layout with a sidebar, header and main content.
|
|
3
|
+
* Checkboxes are used for states for expanded or drawer.
|
|
4
|
+
*/
|
|
5
|
+
|
|
6
|
+
.blue-layout {
|
|
7
|
+
--spacing: 0.25rem;
|
|
8
|
+
--drawer-side-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
|
|
9
|
+
rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
|
|
10
|
+
--toggler-size: calc(
|
|
11
|
+
var(--bs-btn-border-width, 1px) + var(--bs-btn-padding-y, 0.375rem) +
|
|
12
|
+
(var(--bs-btn-font-size, 1rem) * var(--bs-btn-line-height, 1.5)) + var(--bs-btn-padding-y, 0.375rem) +
|
|
13
|
+
var(--bs-btn-border-width, 1px)
|
|
14
|
+
);
|
|
15
|
+
--side-width: 18rem;
|
|
16
|
+
--base-z-index: 0;
|
|
17
|
+
|
|
18
|
+
--base-z-index: 500;
|
|
19
|
+
--side-width: var(--blue-sidebar-width);
|
|
20
|
+
--toggler-size: var(--blue-menu-item-height);
|
|
21
|
+
|
|
22
|
+
min-height: 100dvh;
|
|
23
|
+
position: relative;
|
|
24
|
+
display: grid;
|
|
25
|
+
grid-template-columns: 0 var(--toggler-size) calc(var(--side-width) - var(--toggler-size)) auto;
|
|
26
|
+
grid-template-rows: var(--toggler-size) auto;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.blue-layout-state {
|
|
30
|
+
position: absolute;
|
|
31
|
+
--size: 0;
|
|
32
|
+
height: var(--size);
|
|
33
|
+
width: var(--size);
|
|
34
|
+
appearance: none;
|
|
35
|
+
opacity: 0;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.blue-layout-toggle {
|
|
39
|
+
grid-column-start: 2;
|
|
40
|
+
color: var(--blue-sidebar-color);
|
|
41
|
+
background-color: var(--blue-sidebar-bg);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.blue-layout-state:focus-visible + .blue-layout-toggle {
|
|
45
|
+
--trigger-box-shadow: var(--trigger-focus-box-shadow, inset 0 0 0.25rem);
|
|
46
|
+
box-shadow: var(--trigger-box-shadow);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
@media (width < 64rem) {
|
|
50
|
+
.blue-layout-toggle-expand,
|
|
51
|
+
#layout-expand {
|
|
52
|
+
display: none !important;
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
@media (width >= 64rem) {
|
|
57
|
+
.blue-layout-toggle-drawer,
|
|
58
|
+
#layout-drawer {
|
|
59
|
+
display: none !important;
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.blue-layout-header {
|
|
64
|
+
grid-column-start: 3;
|
|
65
|
+
grid-column-end: 5;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.blue-layout-side {
|
|
69
|
+
overflow: auto;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
@media (width < 64rem) {
|
|
73
|
+
.blue-layout-side {
|
|
74
|
+
translate: -100% 0;
|
|
75
|
+
height: 100%;
|
|
76
|
+
transition: translate 0.2s ease;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.blue-layout-state-drawer:checked ~ .blue-layout-side {
|
|
80
|
+
position: fixed;
|
|
81
|
+
top: 0;
|
|
82
|
+
left: 0;
|
|
83
|
+
z-index: calc(var(--base-z-index) + 1);
|
|
84
|
+
translate: 0;
|
|
85
|
+
width: calc(var(--spacing) * 80);
|
|
86
|
+
box-shadow: var(--drawer-side-shadow);
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
@media (width >= 64rem) {
|
|
91
|
+
.blue-layout-state-expand:checked ~ .blue-layout-side {
|
|
92
|
+
grid-column-start: 2;
|
|
93
|
+
grid-column-end: 4;
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.blue-layout-main {
|
|
98
|
+
overflow: auto;
|
|
99
|
+
grid-column-start: 2;
|
|
100
|
+
grid-column-end: 5;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
@media (width >= 64rem) {
|
|
104
|
+
.blue-layout-state-expand:checked ~ .blue-layout-main {
|
|
105
|
+
grid-column-start: 4;
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.blue-layout-overlay {
|
|
110
|
+
position: fixed;
|
|
111
|
+
z-index: var(--base-z-index);
|
|
112
|
+
inset: 0;
|
|
113
|
+
display: none;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
@media (width < 64rem) {
|
|
117
|
+
.blue-layout-state-drawer:checked ~ .blue-layout-overlay {
|
|
118
|
+
display: block;
|
|
119
|
+
}
|
|
120
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "blue-web",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.11.0",
|
|
4
4
|
"description": "UI components built on top of Bootstrap 5",
|
|
5
5
|
"license": "LGPL-3.0-or-later",
|
|
6
6
|
"homepage": "https://bruegmann.github.io/blue-web/v1",
|
|
@@ -12,64 +12,57 @@
|
|
|
12
12
|
"url": "https://github.com/bruegmann/blue-react/issues"
|
|
13
13
|
},
|
|
14
14
|
"scripts": {
|
|
15
|
-
"start": "
|
|
16
|
-
"build-docs": "
|
|
15
|
+
"start": "npm run dev",
|
|
16
|
+
"build-docs": "npm run build-astro",
|
|
17
17
|
"build-types": "tsc --declaration --emitDeclarationOnly --declarationDir ./dist/js --noEmit false --project tsconfig.build.json",
|
|
18
18
|
"build": "babel ./src/js --out-dir ./dist/js --extensions \".tsx,.js,.ts\"",
|
|
19
19
|
"build-bundles": "webpack",
|
|
20
|
-
"build-css-legacy": "node ./setVersionToStyleScss.js && node-sass ./dist/style.scss ./dist/style.css && npx postcss ./dist/style.css --use autoprefixer -r && npx postcss ./dist/style.css --use postcss-minify -o ./dist/style.min.css",
|
|
21
20
|
"build-css": "node ./setVersionToStyleScss.js && sass --load-path=. ./dist/style.scss:./dist/style.css && npx postcss ./dist/style.css --use autoprefixer -r && npx postcss ./dist/style.css --use postcss-minify -o ./dist/style.min.css",
|
|
22
|
-
"build-neu-css-legacy": "node-sass ./dist/neu.scss ./dist/neu.css && npx postcss ./dist/neu.css --use autoprefixer -r && npx postcss ./dist/neu.css --use postcss-minify -o ./dist/neu.min.css",
|
|
23
21
|
"build-neu-css": "sass --load-path=. ./dist/neu.scss:./dist/neu.css && npx postcss ./dist/neu.css --use autoprefixer -r && npx postcss ./dist/neu.css --use postcss-minify -o ./dist/neu.min.css",
|
|
24
|
-
"build-release": "npm run build-types && npm run build && npm run build-bundles && npm run build-css && node merge-scss.js dist/style.scss",
|
|
25
|
-
"
|
|
26
|
-
"
|
|
27
|
-
"predeploy": "npm run build-docs",
|
|
28
|
-
"deploy": "gh-pages --dist build --dest v1",
|
|
22
|
+
"build-release": "npm run build-types && npm run build && npm run build-bundles && npm run build-css && node merge-scss.js dist/style.scss && npm run license-report",
|
|
23
|
+
"predeploy": "npm run build-astro",
|
|
24
|
+
"deploy": "gh-pages --dist site/dist --dest v1",
|
|
29
25
|
"prepublishOnly": "npm i && npm run build-release",
|
|
30
26
|
"release": "npm publish && npm run deploy",
|
|
31
27
|
"prettier": "npx prettier --write .",
|
|
32
|
-
"license-report": "npx license-report --prod --output=json >
|
|
28
|
+
"license-report": "npx license-report --prod --output=json > site/src/assets/license-report.json",
|
|
29
|
+
"dev": "astro dev --root site",
|
|
30
|
+
"build-astro": "astro build --root site",
|
|
31
|
+
"preview-astro": "astro preview --root site"
|
|
33
32
|
},
|
|
34
33
|
"dependencies": {
|
|
35
34
|
"@popperjs/core": "^2.11.5",
|
|
36
35
|
"bootstrap": "~5.3.3"
|
|
37
36
|
},
|
|
38
37
|
"devDependencies": {
|
|
38
|
+
"@astrojs/mdx": "^4.2.3",
|
|
39
|
+
"@astrojs/react": "^4.2.3",
|
|
39
40
|
"@babel/cli": "^7.10.4",
|
|
40
41
|
"@babel/preset-env": "^7.10.4",
|
|
41
|
-
"@babel/preset-react": "^7.10.4",
|
|
42
42
|
"@babel/preset-typescript": "^7.9.0",
|
|
43
|
-
"@craco/craco": "^7.1.0",
|
|
44
|
-
"@testing-library/jest-dom": "^4.2.4",
|
|
45
|
-
"@testing-library/react": "^9.5.0",
|
|
46
|
-
"@testing-library/user-event": "^7.2.1",
|
|
47
43
|
"@types/bootstrap": "^5.0.17",
|
|
48
|
-
"@types/jest": "^24.9.1",
|
|
49
44
|
"@types/node": "^12.12.47",
|
|
50
45
|
"@types/react": "^19.0.8",
|
|
51
46
|
"@types/react-dom": "^19.0.3",
|
|
52
|
-
"@types/react-router-dom": "^5.3.3",
|
|
53
47
|
"@types/react-syntax-highlighter": "^13.5.0",
|
|
48
|
+
"astro": "^5.6.1",
|
|
54
49
|
"autoprefixer": "^10.3.6",
|
|
55
|
-
"
|
|
50
|
+
"babel-loader": "^8.4.1",
|
|
51
|
+
"blue-react": "^10.0.1",
|
|
56
52
|
"gh-pages": "^3.1.0",
|
|
57
53
|
"license-report": "^6.2.0",
|
|
58
54
|
"lint-staged": "^11.1.2",
|
|
59
|
-
"node-sass": "^9.0.0",
|
|
60
55
|
"postcss-cli": "^9.0.1",
|
|
61
56
|
"postcss-minify": "^1.1.0",
|
|
62
57
|
"postcss-only-vars": "^1.0.0",
|
|
63
|
-
"prettier": "
|
|
58
|
+
"prettier": "^3.5.3",
|
|
64
59
|
"react": "^19.0.0",
|
|
65
60
|
"react-bootstrap-icons": "^1.11.5",
|
|
66
61
|
"react-dom": "^19.0.0",
|
|
67
62
|
"react-markdown": "^8.0.3",
|
|
68
|
-
"react-router-dom": "^5.3.3",
|
|
69
|
-
"react-scripts": "^5.0.1",
|
|
70
63
|
"react-syntax-highlighter": "^15.4.3",
|
|
71
|
-
"reactstrap": "^9.0.0-0",
|
|
72
64
|
"sass": "~1.77.6",
|
|
65
|
+
"themify": "file:../themify/themify-0.0.6.tgz",
|
|
73
66
|
"typescript": "^4.3.5",
|
|
74
67
|
"webpack": "^5.95.0",
|
|
75
68
|
"webpack-cli": "^5.1.4"
|