blue-web 1.12.0 → 1.14.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.
Files changed (40) hide show
  1. package/README.md +15 -3
  2. package/dist/js/actions.bundle.js +1 -0
  3. package/dist/js/actions.d.ts +5 -0
  4. package/dist/js/actions.js +61 -0
  5. package/dist/js/color-mode.bundle.js +1 -0
  6. package/dist/js/color-mode.d.ts +4 -0
  7. package/dist/js/color-mode.js +37 -0
  8. package/dist/js/dialog.js +9 -17
  9. package/dist/js/edit-view.js +1 -8
  10. package/dist/js/progress.js +1 -7
  11. package/dist/js/read-view.js +1 -8
  12. package/dist/js/shared.js +1 -7
  13. package/dist/js/side-layout.js +1 -8
  14. package/dist/js/utils.js +9 -24
  15. package/dist/merged.scss +1019 -1048
  16. package/dist/style.css +101 -406
  17. package/dist/style.css.map +1 -1
  18. package/dist/style.min.css +4 -4
  19. package/dist/style.scss +4 -1
  20. package/dist/styles/_action-menu.scss +3 -15
  21. package/dist/styles/_actions.css +21 -0
  22. package/dist/styles/_bootstrap-variables.scss +1 -2
  23. package/dist/styles/_collapse.scss +0 -4
  24. package/dist/styles/_devexpress.css +33 -0
  25. package/dist/styles/_hover.scss +0 -7
  26. package/dist/styles/_menu-item.scss +6 -60
  27. package/dist/styles/_variables.scss +26 -34
  28. package/package.json +6 -4
  29. package/dist/js/all.bundle.js +0 -2
  30. package/dist/js/all.bundle.js.LICENSE.txt +0 -5
  31. package/dist/js/all.js +0 -3
  32. package/dist/js/button.bundle.js +0 -1
  33. package/dist/js/button.d.ts +0 -1
  34. package/dist/js/button.js +0 -21
  35. package/dist/js/dialog.bundle.js.LICENSE.txt +0 -5
  36. package/dist/legacy-styles/_grid-layout.scss +0 -42
  37. package/dist/legacy-styles/_layout.scss +0 -211
  38. package/dist/legacy-styles/_router.scss +0 -19
  39. package/dist/legacy-styles/_sidebar.scss +0 -54
  40. package/dist/legacy-styles/mixins/_sidebar.scss +0 -209
package/dist/js/button.js DELETED
@@ -1,21 +0,0 @@
1
- "use strict";
2
-
3
- Object.defineProperty(exports, "__esModule", {
4
- value: true
5
- });
6
- exports.enhance = enhance;
7
- function enhance(el) {
8
- if (el && el.classList.contains("icon-link")) {
9
- const svgs = el.querySelectorAll("svg");
10
- svgs.forEach(svg => {
11
- svg.setAttribute("aria-hidden", "true");
12
- if (!svg.classList.contains("bi")) {
13
- svg.classList.add("bi");
14
- }
15
- });
16
- }
17
- }
18
- window.blueWeb = window.blueWeb || {};
19
- window.blueWeb.button = {
20
- enhance
21
- };
@@ -1,5 +0,0 @@
1
- /*!
2
- * Bootstrap v5.3.3 (https://getbootstrap.com/)
3
- * Copyright 2011-2024 The Bootstrap Authors (https://github.com/twbs/bootstrap/graphs/contributors)
4
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
5
- */
@@ -1,42 +0,0 @@
1
- // New approach to use the `Layout` component by using CSS `display: grid`.
2
- // Markup should look something like this:
3
- // ```html
4
- // <div class="blue-layout blue-grid-layout">
5
- // <header class="blue-grid-layout-header"></header>
6
- // <nav class="blue-grid-layout-side"></nav>
7
- // <main class="blue-grid-layout-main"></main>
8
- // </div>
9
- // ```
10
-
11
- .blue-grid-layout {
12
- display: grid;
13
- grid-template-columns: 0 auto;
14
- grid-template-rows: $normal-size;
15
- height: 100vh;
16
- height: 100dvh;
17
- }
18
-
19
- @if $sidebar-shrink {
20
- @media (min-width: $sidebar-shrink-breakpoint) {
21
- .blue-grid-layout {
22
- grid-template-columns: $normal-size auto;
23
- }
24
- }
25
- }
26
-
27
- @media (min-width: $sidebar-expanded-breakpoint) {
28
- .blue-grid-layout.expandSidebar {
29
- grid-template-columns: var(--blue-sidebar-width) auto;
30
- }
31
- }
32
-
33
- .blue-grid-layout-header {
34
- grid-column: 1 / 3;
35
- }
36
-
37
- .blue-grid-layout-main {
38
- overflow: auto;
39
- --bs-bg-opacity: 1;
40
- background-color: #{rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity))};
41
- border-radius: var(--bs-border-radius);
42
- }
@@ -1,211 +0,0 @@
1
- .blue-layout {
2
- position: relative;
3
- min-height: 100vh;
4
- min-height: 100dvh;
5
-
6
- &.hasNoSidebarMenu {
7
- .blue-page,
8
- .blue-header {
9
- padding-left: 0;
10
- }
11
-
12
- .blue-sidebar-toggler {
13
- display: none;
14
- }
15
-
16
- .blue-page {
17
- margin-left: 0;
18
- }
19
-
20
- .blue-header-extension {
21
- left: 0;
22
- padding-right: 0;
23
- }
24
- }
25
-
26
- &.open {
27
- @media screen and (max-width: $sidebar-expanded-breakpoint) {
28
- .router-page.active {
29
- .blue-page {
30
- filter: blur(3px) brightness(0.8);
31
- }
32
- }
33
- }
34
-
35
- @include openSidebarMenu();
36
- }
37
-
38
- &:not(.open) {
39
- .blue-sidebar-visible-on-open,
40
- .blue-sidebar-d-flex-on-open,
41
- .blue-sidebar-d-block-on-open {
42
- display: none !important;
43
- }
44
-
45
- .blue-sidebar-hidden-on-open {
46
- animation: fade-in 1s;
47
-
48
- @media (prefers-reduced-motion) {
49
- animation-duration: 0s;
50
- }
51
- }
52
- }
53
-
54
- &:not(.expandSidebar):not(.open) .blue-sidebar {
55
- .blue-sidebar-top,
56
- .blue-menu,
57
- .blue-sidebar-bottom {
58
- @include blue-menu-item-dropdown-for-shrunk-sidebar();
59
- }
60
- }
61
- }
62
-
63
- .blue-sidebar-toggler {
64
- position: fixed;
65
- width: $normal-size;
66
- height: $normal-size;
67
- left: 0;
68
- top: 0;
69
- z-index: 5;
70
- }
71
-
72
- @include blue-sidebar(0);
73
- .blue-layout:not(.open) .blue-sidebar {
74
- left: -$normal-size;
75
- }
76
-
77
- .blue-page {
78
- margin-left: 0;
79
- }
80
-
81
- .blue-page {
82
- margin-left: $normal-size;
83
- animation: enabledBlueAppPage 0.5s;
84
-
85
- @media (prefers-reduced-motion) {
86
- animation-duration: 0s;
87
- }
88
-
89
- border-top-left-radius: var(--bs-border-radius, 0.5rem);
90
- border-top-right-radius: var(--bs-border-radius, 0.5rem);
91
- --bs-bg-opacity: 1;
92
- background-color: rgba(var(--bs-body-bg-rgb, 255, 255, 255), var(--bs-bg-opacity));
93
-
94
- &::before,
95
- &::after {
96
- content: "";
97
- display: table;
98
- }
99
- }
100
-
101
- .blue-layout.disableHeaders {
102
- .blue-page {
103
- padding-top: $normal-size;
104
- }
105
- }
106
-
107
- .blue-sidebar-toggler {
108
- transition: transform 0.5s;
109
-
110
- @media (prefers-reduced-motion) {
111
- transition: none;
112
- }
113
- }
114
-
115
- .blue-layout:not(.open).disableHeaders .blue-sidebar-toggler {
116
- transform: translate(0.25rem, 0.25rem);
117
- border-radius: $border-radius;
118
- overflow: hidden;
119
- }
120
-
121
- @if $sidebar-shrink {
122
- @media (min-width: $sidebar-shrink-breakpoint) {
123
- @include blue-sidebar($normal-size);
124
-
125
- .blue-layout:not(.open) .blue-sidebar {
126
- left: 0;
127
- }
128
-
129
- .blue-page {
130
- margin-left: $normal-size;
131
- }
132
-
133
- .blue-layout:not(.open).disableHeaders .blue-sidebar-toggler {
134
- transform: translate(0, 0);
135
- }
136
- }
137
- }
138
-
139
- @media (min-width: $sidebar-expanded-breakpoint) {
140
- .blue-layout.expandSidebar {
141
- @include openSidebarMenu();
142
-
143
- .blue-sidebar {
144
- left: 0;
145
- box-shadow: none !important;
146
- }
147
-
148
- .blue-page {
149
- margin-left: $bla-sidebar-width;
150
- }
151
-
152
- .blue-sidebar-toggler {
153
- display: none;
154
- }
155
-
156
- &.hideToggleExpandSidebar .blue-header {
157
- left: 0;
158
- }
159
- }
160
-
161
- .blue-layout .blue-header-title {
162
- padding-left: $spacer;
163
- }
164
- }
165
-
166
- .blue-open-menu {
167
- position: absolute !important;
168
- margin-top: 0 !important;
169
- left: 0;
170
- justify-content: center;
171
-
172
- &,
173
- &:hover,
174
- &:focus {
175
- color: var(--blue-sidebar-color);
176
- background-color: var(--blue-sidebar-bg);
177
- border-color: transparent;
178
- }
179
- }
180
-
181
- .blue-sidebar {
182
- overflow-y: auto;
183
- }
184
-
185
- .blue-sidebar-bottom {
186
- width: auto;
187
- background-color: var(--blue-sidebar-bg);
188
- transition: box-shadow 0.2s;
189
-
190
- @media (prefers-reduced-motion) {
191
- transition: none;
192
- }
193
-
194
- &.has-shadow {
195
- box-shadow: 0 -2rem 2rem rgba(black, 0.1);
196
- }
197
- }
198
-
199
- .blue-page {
200
- min-height: calc(100vh - #{$normal-size});
201
- min-height: calc(100dvh - #{$normal-size});
202
- margin-top: $normal-size;
203
- }
204
-
205
- .blue-layout.disableHeaders {
206
- .blue-page {
207
- margin-top: initial;
208
- min-height: calc(100vh);
209
- min-height: calc(100dvh);
210
- }
211
- }
@@ -1,19 +0,0 @@
1
- body {
2
- overflow: hidden;
3
- }
4
-
5
- .router-page {
6
- /* This is nessesary, because scrolling on iOS devices would not be smooth without it */
7
- -webkit-overflow-scrolling: touch;
8
-
9
- overflow-y: auto;
10
- overflow-x: hidden;
11
- width: 100vw;
12
-
13
- height: 100vh;
14
- height: 100dvh;
15
-
16
- &:not(.active) {
17
- display: none;
18
- }
19
- }
@@ -1,54 +0,0 @@
1
- .blue-sidebar-state {
2
- &.open {
3
- @include openSidebarMenu();
4
-
5
- .blue-menu-item {
6
- width: $bla-sidebar-width;
7
- max-width: 100%;
8
- }
9
-
10
- .blue-menu-item {
11
- & > * {
12
- width: auto;
13
- }
14
- }
15
- }
16
-
17
- &:not(.open) {
18
- .blue-sidebar-visible-on-open,
19
- .blue-sidebar-d-flex-on-open,
20
- .blue-sidebar-d-block-on-open {
21
- display: none !important;
22
- }
23
-
24
- .blue-sidebar-hidden-on-open {
25
- animation: fade-in 1s;
26
-
27
- @media (prefers-reduced-motion) {
28
- animation-duration: 0s;
29
- }
30
- }
31
- }
32
- }
33
-
34
- @keyframes blue-menu-item-dropdown-from-start {
35
- from {
36
- transform: translateX(-50%);
37
- opacity: 0;
38
- }
39
- }
40
-
41
- .blue-menu-item-dropdown-from-start {
42
- animation: blue-menu-item-dropdown-from-start 0.15s;
43
-
44
- @media (prefers-reduced-motion) {
45
- animation-duration: 0s;
46
- }
47
- }
48
-
49
- .blue-sidebar {
50
- .blue-menu-item-label {
51
- display: none;
52
- max-height: 100%;
53
- }
54
- }
@@ -1,209 +0,0 @@
1
- @mixin openSidebarMenu() {
2
- .blue-sidebar-hidden-on-open,
3
- .blue-sidebar-before-hidden-on-open::before,
4
- .blue-sidebar-after-hidden-on-open::after,
5
- .blue-sidebar-pseudo-hidden-on-open::before,
6
- .blue-sidebar-pseudo-hidden-on-open::after {
7
- display: none !important;
8
- }
9
-
10
- .blue-sidebar-visible-on-open,
11
- .blue-sidebar-d-flex-on-open,
12
- .blue-sidebar-d-block-on-open {
13
- animation: fade-in 1s;
14
-
15
- @media (prefers-reduced-motion) {
16
- animation-duration: 0s;
17
- }
18
- }
19
-
20
- .blue-sidebar-visible-on-open,
21
- .blue-sidebar-d-flex-on-open {
22
- display: flex !important;
23
- }
24
-
25
- .blue-sidebar-d-block-on-open {
26
- display: block !important;
27
- }
28
-
29
- .blue-menu-item-label {
30
- display: inline-block;
31
- }
32
- .blue-sidebar {
33
- z-index: 42;
34
- box-shadow: 0.6rem 6rem 6rem rgba(0, 0, 0, 0.4);
35
- // background-color: darken($theme, 30%);
36
- }
37
-
38
- --blue-sidebar-width: #{$bla-sidebar-width};
39
-
40
- .blue-sidebar,
41
- .blue-sidebar .blue-menu-item {
42
- width: $bla-sidebar-width;
43
- max-width: 100%;
44
- }
45
-
46
- .blue-sidebar .blue-menu-item {
47
- & > * {
48
- width: auto;
49
- }
50
- }
51
-
52
- .blue-sub-sidebar {
53
- left: $bla-sidebar-width;
54
- }
55
-
56
- .blue-menu-item-dropdown-caret.blue-caret {
57
- display: flex;
58
- }
59
-
60
- /* search */
61
- .blue-search:not(.blue-search-body) {
62
- background-color: $sidebar-search-bg;
63
- }
64
-
65
- .blue-search-btn {
66
- display: none;
67
- }
68
-
69
- .blue-search-input-group {
70
- display: flex;
71
- align-items: center;
72
- }
73
-
74
- .blue-header-title.sidebar {
75
- transform: translateX(0);
76
- }
77
-
78
- .blue-sidebar-menu-horizontal-on-open {
79
- .blue-menu-item {
80
- &.active::after {
81
- @include blue-menu-item-indicator-horizontal();
82
- }
83
- }
84
- }
85
-
86
- .blue-sidebar-menu-vertical-on-open {
87
- .blue-menu-item {
88
- &.active::after {
89
- @include blue-menu-item-indicator();
90
- }
91
- }
92
- }
93
- }
94
-
95
- @mixin blue-sidebar($width) {
96
- .blue-menu-item {
97
- color: inherit;
98
- width: $normal-size;
99
- font-size: $bla-btn-font-size;
100
- display: flex;
101
- align-items: center;
102
- border-color: transparent;
103
- @include slide-transition();
104
-
105
- &::before {
106
- content: "";
107
- position: absolute;
108
- top: 0.25rem;
109
- right: 0.25rem;
110
- bottom: 0.25rem;
111
- left: 0.25rem;
112
- background-color: currentColor;
113
- border-radius: $border-radius;
114
- transform: scale(0.9);
115
- opacity: 0;
116
- transition: all 0.2s;
117
-
118
- @media (prefers-reduced-motion) {
119
- transition: none;
120
- }
121
- }
122
-
123
- &[draggable] {
124
- cursor: grab;
125
-
126
- &:active {
127
- box-shadow: inset 0 0 0.25rem;
128
- }
129
- }
130
-
131
- &:hover,
132
- &:active,
133
- &.highlighted {
134
- color: inherit;
135
- border-color: transparent;
136
-
137
- &::before {
138
- transform: scale(1);
139
- opacity: 0.25;
140
- }
141
- }
142
-
143
- &.highlighted {
144
- &::before {
145
- opacity: 0.16;
146
- }
147
- }
148
-
149
- &:hover,
150
- &:active {
151
- &::before {
152
- opacity: 0.25;
153
- }
154
- }
155
-
156
- &.active::after {
157
- @include blue-menu-item-indicator();
158
- }
159
-
160
- & > * + .blue-menu-item-label {
161
- margin-left: 0.5rem;
162
- }
163
- }
164
-
165
- :root {
166
- --blue-sidebar-width: #{$width};
167
- }
168
-
169
- .blue-sidebar {
170
- width: $width;
171
- color: var(--blue-sidebar-color);
172
- background: var(--blue-sidebar-bg);
173
- position: fixed;
174
- left: 0;
175
- top: $normal-size;
176
- bottom: 0;
177
- z-index: 3;
178
- display: flex;
179
- flex-direction: column;
180
- @include slide-transition();
181
-
182
- .blue-menu {
183
- overflow-y: auto;
184
- flex: 1;
185
- @include scroll-shadow(var(--blue-sidebar-bg), $sidebar-bg);
186
- }
187
-
188
- .blue-menu-item {
189
- & > * {
190
- width: 100%;
191
- }
192
- }
193
- }
194
- }
195
-
196
- .blue-sidebar-visible-on-open,
197
- .blue-sidebar-d-flex-on-open,
198
- .blue-sidebar-d-block-on-open {
199
- display: none !important;
200
- }
201
-
202
- .blue-sidebar.open .blue-sidebar-visible-on-open,
203
- .blue-sidebar.open .blue-sidebar-d-flex-on-open {
204
- display: flex !important;
205
- }
206
-
207
- .blue-sidebar.open .blue-sidebar-d-block-on-open {
208
- display: block !important;
209
- }