@awes-io/ui 2.73.1 → 2.74.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/CHANGELOG.md +19 -0
- package/assets/css/components/alert.css +14 -38
- package/assets/css/components/button-fixed.css +3 -4
- package/assets/css/components/button-nav.css +13 -34
- package/assets/css/components/context-menu.css +22 -0
- package/assets/css/components/mobile-menu-item-new.css +1 -1
- package/assets/css/components/mobile-menu-item.css +0 -1
- package/assets/css/components/mobile-menu-nav.css +7 -6
- package/assets/css/components/mobile-menu.css +24 -7
- package/assets/css/components/modal.css +5 -1
- package/assets/css/components/nav.css +9 -3
- package/assets/css/components/search.css +1 -0
- package/assets/css/components/table.css +4 -0
- package/assets/js/icons/mono.js +1 -1
- package/components/2_molecules/AwAlert.vue +6 -2
- package/components/3_organisms/AwContextMenu.vue +1 -0
- package/components/3_organisms/AwSearch.vue +2 -1
- package/components/3_organisms/AwTable/AwTableBuilder.vue +2 -2
- package/components/4_pages/AwPageMenuButtons.vue +0 -1
- package/components/5_layouts/AwLayoutProvider.vue +1 -1
- package/components/5_layouts/_AwMenuItemIcon.vue +1 -1
- package/components/5_layouts/_AwMobileMenu.vue +33 -26
- package/components/5_layouts/_AwMobileMenuItem.vue +2 -2
- package/components/5_layouts/_AwMobileMenuItemNew.vue +2 -2
- package/components/5_layouts/_AwUserMenu.vue +25 -2
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,25 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# [2.74.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.73.1...@awes-io/ui@2.74.0) (2023-10-10)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* fix style in component ([3b2dbb4](https://github.com/awes-io/client/commit/3b2dbb485ccbeab0aa96941e2f7f53ccb4e7ddaa))
|
|
12
|
+
* some fix style in menu and form components ([e64a877](https://github.com/awes-io/client/commit/e64a877ce0e4d8803a7c8b1edb59dac53bcf5aed))
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
### Features
|
|
16
|
+
|
|
17
|
+
* add check external link in user profile ([95e1f52](https://github.com/awes-io/client/commit/95e1f5253097847b06fbdcab808ea0e53a9513c3))
|
|
18
|
+
* change border radius in button nav ([9bb4252](https://github.com/awes-io/client/commit/9bb4252bdf7d4f1dc8744f025aa74f3ed3f8f89d))
|
|
19
|
+
* change search icon ([70553be](https://github.com/awes-io/client/commit/70553be865e11e8ddd7a9461cbffef5f129aed5d))
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
6
25
|
## [2.73.1](https://github.com/awes-io/client/compare/@awes-io/ui@2.73.0...@awes-io/ui@2.73.1) (2023-10-06)
|
|
7
26
|
|
|
8
27
|
|
|
@@ -1,16 +1,10 @@
|
|
|
1
1
|
.aw-alert {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
padding: theme('spacing.4', 1rem);
|
|
2
|
+
padding: 1rem 1.5rem;
|
|
5
3
|
border-radius: 0.625rem;
|
|
6
|
-
border: 1px solid var(--aw-alert-border);
|
|
7
4
|
background: var(--aw-alert-bg);
|
|
8
5
|
|
|
9
6
|
&__icon {
|
|
10
|
-
|
|
11
|
-
font-size: 1.5em;
|
|
12
|
-
line-height: 0.75em;
|
|
13
|
-
align-self: start;
|
|
7
|
+
margin-right: 0.625rem;
|
|
14
8
|
}
|
|
15
9
|
|
|
16
10
|
.aw-description {
|
|
@@ -24,22 +18,20 @@
|
|
|
24
18
|
&__title {
|
|
25
19
|
display: flex;
|
|
26
20
|
margin: 0;
|
|
21
|
+
|
|
22
|
+
&-text {
|
|
23
|
+
margin-top: 0.125rem;
|
|
24
|
+
}
|
|
27
25
|
}
|
|
28
26
|
|
|
29
27
|
&__buttons {
|
|
30
28
|
display: flex;
|
|
31
|
-
flex-wrap: wrap;
|
|
32
|
-
justify-content: flex-end;
|
|
33
29
|
|
|
34
|
-
justify-self: start;
|
|
35
30
|
align-items: center;
|
|
36
|
-
margin-left:
|
|
37
|
-
margin-
|
|
31
|
+
margin-left: 2.125rem;
|
|
32
|
+
margin-top: 0.5rem;
|
|
38
33
|
|
|
39
|
-
|
|
40
|
-
margin-top: theme('spacing.4', 1rem);
|
|
41
|
-
margin-left: theme('spacing.4', 1rem);
|
|
42
|
-
}
|
|
34
|
+
font-size: 0.875rem;
|
|
43
35
|
|
|
44
36
|
.aw-icon,
|
|
45
37
|
a {
|
|
@@ -60,29 +52,13 @@
|
|
|
60
52
|
|
|
61
53
|
@screen lg {
|
|
62
54
|
.aw-alert {
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
padding: theme('spacing.1', 0.25rem);
|
|
67
|
-
|
|
68
|
-
&__title {
|
|
69
|
-
align-self: center;
|
|
70
|
-
|
|
71
|
-
padding-top: theme('spacing.1', 0.25rem);
|
|
72
|
-
padding-bottom: theme('spacing.1', 0.25rem);
|
|
73
|
-
padding-left: theme('spacing.4', 1rem);
|
|
74
|
-
}
|
|
55
|
+
display: flex;
|
|
56
|
+
justify-content: space-between;
|
|
75
57
|
|
|
76
58
|
&__buttons {
|
|
77
|
-
|
|
78
|
-
margin-
|
|
79
|
-
margin-
|
|
80
|
-
margin-bottom: 0;
|
|
81
|
-
|
|
82
|
-
& > * {
|
|
83
|
-
margin-top: theme('spacing.1', 0.25rem);
|
|
84
|
-
margin-left: theme('spacing.1', 0.25rem);
|
|
85
|
-
}
|
|
59
|
+
justify-content: flex-end;
|
|
60
|
+
margin-left: 1rem;
|
|
61
|
+
margin-top: 0;
|
|
86
62
|
}
|
|
87
63
|
}
|
|
88
64
|
}
|
|
@@ -7,10 +7,9 @@
|
|
|
7
7
|
min-height: 3.5rem;
|
|
8
8
|
/* border-radius: 1rem; */
|
|
9
9
|
|
|
10
|
-
font-size: 0.
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
text-transform: uppercase;
|
|
10
|
+
font-size: 0.875rem;
|
|
11
|
+
line-height: 1rem;
|
|
12
|
+
font-weight: 500;
|
|
14
13
|
|
|
15
14
|
background-color: rgba(var(--btn-bg), var(--btn-bg-opacity, 1));
|
|
16
15
|
color: rgba(var(--btn-fg), 1);
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
font-size: theme('fontSize.sm');
|
|
4
4
|
@apply bg-mono-900;
|
|
5
5
|
border: none;
|
|
6
|
-
border-radius:
|
|
6
|
+
border-radius: 0.625rem;
|
|
7
7
|
|
|
8
8
|
/* & .aw-slider__scroller {
|
|
9
9
|
padding: theme('spacing.1') 0;
|
|
@@ -22,27 +22,26 @@
|
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
&__toggler {
|
|
25
|
-
@apply font-bold tracking-widest;
|
|
26
|
-
|
|
27
25
|
position: relative;
|
|
28
26
|
flex-shrink: 0;
|
|
29
27
|
padding: 0;
|
|
30
28
|
min-width: theme('spacing.8');
|
|
31
29
|
white-space: nowrap;
|
|
32
30
|
|
|
33
|
-
font-size:
|
|
34
|
-
line-height:
|
|
31
|
+
font-size: 1rem;
|
|
32
|
+
line-height: 1rem;
|
|
33
|
+
font-weight: 400;
|
|
35
34
|
border-radius: 0;
|
|
36
35
|
border-top: 2px solid var(--c-mono-800);
|
|
37
36
|
border-bottom: 2px solid var(--c-mono-800);
|
|
38
37
|
|
|
39
38
|
&:first-child {
|
|
40
|
-
border-radius:
|
|
39
|
+
border-radius: 0.625rem 0 0 0.625rem;
|
|
41
40
|
border-left: 2px solid var(--c-mono-800);
|
|
42
41
|
}
|
|
43
42
|
|
|
44
43
|
&:last-child {
|
|
45
|
-
border-radius: 0
|
|
44
|
+
border-radius: 0 0.625rem 0.625rem 0;
|
|
46
45
|
border-right: 2px solid var(--c-mono-800);
|
|
47
46
|
}
|
|
48
47
|
|
|
@@ -53,40 +52,19 @@
|
|
|
53
52
|
}
|
|
54
53
|
|
|
55
54
|
&__toggler > span {
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
padding: theme('spacing.1') 1rem;
|
|
55
|
+
padding: 1.125rem 1.25rem;
|
|
59
56
|
width: 100%;
|
|
60
|
-
border-radius:
|
|
57
|
+
border-radius: 0.5rem;
|
|
61
58
|
min-height: 2.75rem;
|
|
62
59
|
}
|
|
63
60
|
|
|
64
|
-
&__toggler > span:before {
|
|
65
|
-
@apply bg-mono-700 hidden;
|
|
66
|
-
content: '';
|
|
67
|
-
position: absolute;
|
|
68
|
-
left: 0;
|
|
69
|
-
top: theme('spacing.1');
|
|
70
|
-
bottom: theme('spacing.1');
|
|
71
|
-
width: 1px;
|
|
72
|
-
display: block;
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
&__toggler:first-child > span:before {
|
|
76
|
-
content: none;
|
|
77
|
-
}
|
|
78
|
-
|
|
79
61
|
&__toggler:focus, &__toggler > span:focus {
|
|
80
62
|
outline: none;
|
|
81
63
|
}
|
|
82
64
|
|
|
83
|
-
&__toggler:focus > span {
|
|
84
|
-
outline: theme('focusOutline', 'none');
|
|
85
|
-
}
|
|
86
|
-
|
|
87
65
|
&__toggler_active > span {
|
|
88
66
|
@apply bg-surface;
|
|
89
|
-
border-radius:
|
|
67
|
+
border-radius: 0.5rem;
|
|
90
68
|
box-shadow: theme('boxShadow.default');
|
|
91
69
|
}
|
|
92
70
|
|
|
@@ -139,7 +117,7 @@
|
|
|
139
117
|
border: 4px solid var(--c-mono-800);
|
|
140
118
|
|
|
141
119
|
& > span {
|
|
142
|
-
border-radius:
|
|
120
|
+
border-radius: 0.5rem;
|
|
143
121
|
min-height: 2.5rem;
|
|
144
122
|
}
|
|
145
123
|
}
|
|
@@ -176,7 +154,8 @@
|
|
|
176
154
|
|
|
177
155
|
& > span {
|
|
178
156
|
min-height: 2.25rem;
|
|
179
|
-
border-radius:
|
|
157
|
+
border-radius: 0.5rem;
|
|
158
|
+
padding: 0.875rem 1.25rem;
|
|
180
159
|
}
|
|
181
160
|
}
|
|
182
161
|
|
|
@@ -185,7 +164,7 @@
|
|
|
185
164
|
border: 2px solid var(--c-mono-800);
|
|
186
165
|
|
|
187
166
|
& > span {
|
|
188
|
-
border-radius:
|
|
167
|
+
border-radius: 0.5rem;
|
|
189
168
|
min-height: 2.25rem;
|
|
190
169
|
}
|
|
191
170
|
}
|
|
@@ -19,4 +19,26 @@
|
|
|
19
19
|
}
|
|
20
20
|
}
|
|
21
21
|
}
|
|
22
|
+
|
|
23
|
+
.aw-button {
|
|
24
|
+
.aw-button__text {
|
|
25
|
+
display: none;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
@screen lg {
|
|
31
|
+
.aw-context-menu {
|
|
32
|
+
&--text {
|
|
33
|
+
.aw-icon {
|
|
34
|
+
margin-right: 0.5rem;
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.aw-button {
|
|
39
|
+
.aw-button__text {
|
|
40
|
+
display: flex;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
}
|
|
22
44
|
}
|
|
@@ -3,10 +3,11 @@
|
|
|
3
3
|
|
|
4
4
|
h3, h4 {
|
|
5
5
|
color: var(--c-mono-400);
|
|
6
|
-
font-size:
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
6
|
+
font-size: 0.875rem;
|
|
7
|
+
line-height: 1rem;
|
|
8
|
+
font-weight: bold;
|
|
9
|
+
padding: 0 1.5rem;
|
|
10
|
+
margin-bottom: 1rem;
|
|
10
11
|
}
|
|
11
12
|
|
|
12
13
|
ol, ul {
|
|
@@ -28,8 +29,8 @@
|
|
|
28
29
|
|
|
29
30
|
position: absolute;
|
|
30
31
|
top: 0;
|
|
31
|
-
left: 1.
|
|
32
|
-
right: 1.
|
|
32
|
+
left: 1.5rem;
|
|
33
|
+
right: 1.5rem;
|
|
33
34
|
}
|
|
34
35
|
}
|
|
35
36
|
|
|
@@ -38,7 +38,8 @@
|
|
|
38
38
|
}
|
|
39
39
|
|
|
40
40
|
&__submenu-title {
|
|
41
|
-
margin:
|
|
41
|
+
margin: 1rem 0 1.5rem;
|
|
42
|
+
padding: 0 1.5rem;
|
|
42
43
|
}
|
|
43
44
|
|
|
44
45
|
&__user {
|
|
@@ -61,13 +62,12 @@
|
|
|
61
62
|
|
|
62
63
|
position: absolute;
|
|
63
64
|
bottom: 0;
|
|
64
|
-
left: 1.
|
|
65
|
-
right: 1.
|
|
65
|
+
left: 1.5rem;
|
|
66
|
+
right: 1.5rem;
|
|
66
67
|
}
|
|
67
68
|
|
|
68
69
|
.aw-avatar {
|
|
69
70
|
--ui-avatar-size: 2.5rem !important;
|
|
70
|
-
--ui-avatar-font-size: 1.875rem !important;
|
|
71
71
|
}
|
|
72
72
|
|
|
73
73
|
&-name {
|
|
@@ -77,6 +77,11 @@
|
|
|
77
77
|
font-weight: 400;
|
|
78
78
|
}
|
|
79
79
|
|
|
80
|
+
&-desc {
|
|
81
|
+
font-size: 0.875rem;
|
|
82
|
+
line-height: 1rem;
|
|
83
|
+
}
|
|
84
|
+
|
|
80
85
|
&-link {
|
|
81
86
|
color: inherit;
|
|
82
87
|
grid-column: 3;
|
|
@@ -119,6 +124,12 @@
|
|
|
119
124
|
|
|
120
125
|
&-switcher {
|
|
121
126
|
margin-left: auto;
|
|
127
|
+
padding-top: 0;
|
|
128
|
+
padding-bottom: 0;
|
|
129
|
+
|
|
130
|
+
.aw-switch-field__switch {
|
|
131
|
+
margin: 0.1875rem;
|
|
132
|
+
}
|
|
122
133
|
}
|
|
123
134
|
}
|
|
124
135
|
|
|
@@ -156,7 +167,7 @@
|
|
|
156
167
|
}
|
|
157
168
|
|
|
158
169
|
&__menu {
|
|
159
|
-
margin-bottom: 1.
|
|
170
|
+
margin-bottom: 1.5rem;
|
|
160
171
|
}
|
|
161
172
|
|
|
162
173
|
&--root &__menu h3 {
|
|
@@ -178,7 +189,13 @@
|
|
|
178
189
|
|
|
179
190
|
&__back.aw-button,
|
|
180
191
|
&__close.aw-button {
|
|
181
|
-
|
|
182
|
-
|
|
192
|
+
display: flex;
|
|
193
|
+
align-items: center;
|
|
194
|
+
justify-content: center;
|
|
195
|
+
border-radius: 0.625rem;
|
|
196
|
+
|
|
197
|
+
.aw-button__overlay {
|
|
198
|
+
border-radius: 0.625rem;
|
|
199
|
+
}
|
|
183
200
|
}
|
|
184
201
|
}
|
|
@@ -82,7 +82,11 @@ $modal-aside-width-large: 75vw;
|
|
|
82
82
|
}
|
|
83
83
|
|
|
84
84
|
&__title {
|
|
85
|
-
@apply m-0 pr-6 text-left
|
|
85
|
+
@apply m-0 pr-6 text-left leading-tight font-heading truncate;
|
|
86
|
+
|
|
87
|
+
font-size: 1.25rem;
|
|
88
|
+
line-height: 1.5rem;
|
|
89
|
+
font-weight: 700;
|
|
86
90
|
}
|
|
87
91
|
|
|
88
92
|
&__subtitle {
|
|
@@ -18,20 +18,26 @@
|
|
|
18
18
|
|
|
19
19
|
&__toggler {
|
|
20
20
|
@apply p-1;
|
|
21
|
-
margin-left:
|
|
21
|
+
margin-left: auto;
|
|
22
|
+
margin-right: 1.25rem;
|
|
22
23
|
|
|
23
24
|
svg {
|
|
24
|
-
|
|
25
|
+
@apply text-mono-400;
|
|
26
|
+
|
|
27
|
+
transform: rotate(180deg);
|
|
25
28
|
transition: 240ms transform;
|
|
26
29
|
}
|
|
27
30
|
|
|
28
31
|
&--open svg {
|
|
29
|
-
|
|
32
|
+
@apply text-on-surface;
|
|
33
|
+
|
|
34
|
+
transform: rotate(90deg);
|
|
30
35
|
}
|
|
31
36
|
}
|
|
32
37
|
|
|
33
38
|
&__child {
|
|
34
39
|
max-width: 100%;
|
|
40
|
+
min-width: 0;
|
|
35
41
|
color: inherit;
|
|
36
42
|
@apply flex items-center py-2 px-8;
|
|
37
43
|
|
package/assets/js/icons/mono.js
CHANGED
|
@@ -15,7 +15,7 @@ export default {
|
|
|
15
15
|
'menu-dots':
|
|
16
16
|
'M5.46 7.13a1.67 1.67 0 1 0 0-3.33 1.67 1.67 0 0 0 0 3.33Zm1.67 7.48a1.67 1.67 0 1 1-3.33 0 1.67 1.67 0 0 1 3.33 0Zm7.49-7.48a1.67 1.67 0 1 0 0-3.33 1.67 1.67 0 0 0 0 3.33Zm1.66 7.48a1.67 1.67 0 1 1-3.33 0 1.67 1.67 0 0 1 3.33 0Z',
|
|
17
17
|
search:
|
|
18
|
-
'
|
|
18
|
+
'M8.3 2.3A6 6 0 0 1 13 12l4.1 4.1a.6.6 0 0 1 0 .9.6.6 0 0 1-.8 0l-4.2-4a6 6 0 0 1-7.9-.4A6 6 0 0 1 8.3 2.3Zm0 1.2a4.8 4.8 0 1 0 0 9.6 4.8 4.8 0 0 0 0-9.6Z',
|
|
19
19
|
eye:
|
|
20
20
|
'M10 3.33C4 3.33.2 9.47.13 9.6A.67.67 0 000 10c.01.12.06.24.13.33 0 0 3.2 6.34 9.87 6.34 6.67 0 9.87-6.2 9.87-6.27a.67.67 0 000-.8c-.07-.13-3.94-6.27-9.87-6.27zm0 2a4.67 4.67 0 110 9.34 4.67 4.67 0 010-9.34zM10 8a2 2 0 100 4 2 2 0 000-4z',
|
|
21
21
|
'eye-no':
|
|
@@ -13,13 +13,17 @@
|
|
|
13
13
|
:style="{
|
|
14
14
|
color: iconColor ? `var(--c-${iconColor})` : null
|
|
15
15
|
}"
|
|
16
|
+
size="24"
|
|
16
17
|
/>
|
|
17
18
|
</slot>
|
|
18
19
|
</span>
|
|
19
|
-
|
|
20
|
+
|
|
21
|
+
<span class="aw-alert__title-text">
|
|
22
|
+
<slot name="title">{{ title }}</slot>
|
|
23
|
+
</span>
|
|
20
24
|
</AwDescription>
|
|
21
25
|
|
|
22
|
-
<div class="aw-alert__buttons">
|
|
26
|
+
<div v-if="$scopedSlots.default" class="aw-alert__buttons">
|
|
23
27
|
<slot />
|
|
24
28
|
</div>
|
|
25
29
|
</div>
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
<slot v-if="!isWatchParamsPresent" name="empty-container">
|
|
14
14
|
<!-- Block with icon, headline and slot for button. -->
|
|
15
15
|
<AwCard
|
|
16
|
-
class="flex items-center justify-center min-h-full mb-5"
|
|
16
|
+
class="aw-table-builder__empty-container flex items-center justify-center min-h-full mb-5"
|
|
17
17
|
:class="`h-${defaultHeight}`"
|
|
18
18
|
>
|
|
19
19
|
<div class="text-center">
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
<slot v-if="isWatchParamsPresent" name="empty-filter-container">
|
|
47
47
|
<!-- Block with icon, headline and slot for button. -->
|
|
48
48
|
<AwCard
|
|
49
|
-
class="flex items-center justify-center min-h-full mb-5"
|
|
49
|
+
class="aw-table-builder__empty-filter-container flex items-center justify-center min-h-full mb-5"
|
|
50
50
|
:class="`h-${defaultHeight}`"
|
|
51
51
|
>
|
|
52
52
|
<div class="text-center">
|
|
@@ -229,7 +229,7 @@ export default {
|
|
|
229
229
|
|
|
230
230
|
return acc.concat({
|
|
231
231
|
...pick(
|
|
232
|
-
'icon,iconBg,iconActive,class,expanded,target,rel,listeners,abstract,key,badge,back,isDivide,arrow',
|
|
232
|
+
'icon,iconBg,iconActive,class,expanded,target,rel,listeners,abstract,key,badge,back,isDivide,arrow,hideText',
|
|
233
233
|
props
|
|
234
234
|
),
|
|
235
235
|
text,
|
|
@@ -10,31 +10,26 @@
|
|
|
10
10
|
@click="_closeOnLinkClick"
|
|
11
11
|
>
|
|
12
12
|
<div class="aw-mobile-menu__header">
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
</
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
class="aw-mobile-menu__submenu-title truncate pr-2"
|
|
34
|
-
>
|
|
35
|
-
{{ submenuTitle }}
|
|
36
|
-
</AwHeadline>
|
|
37
|
-
</template>
|
|
13
|
+
<!-- back button -->
|
|
14
|
+
<AwButton
|
|
15
|
+
v-if="submenuOpened"
|
|
16
|
+
theme="ghost"
|
|
17
|
+
color="default"
|
|
18
|
+
class="aw-mobile-menu__back w-10 h-10 flex-shrink-0"
|
|
19
|
+
content-class="p-2"
|
|
20
|
+
@click="submenuOpened = false"
|
|
21
|
+
>
|
|
22
|
+
<template #icon>
|
|
23
|
+
<AwIconSystemMono
|
|
24
|
+
name="arrow"
|
|
25
|
+
size="16"
|
|
26
|
+
class="text-mono-400"
|
|
27
|
+
/>
|
|
28
|
+
</template>
|
|
29
|
+
<span class="sr-only">
|
|
30
|
+
{{ $t('Back') }}
|
|
31
|
+
</span>
|
|
32
|
+
</AwButton>
|
|
38
33
|
|
|
39
34
|
<!-- close button -->
|
|
40
35
|
<AwButton
|
|
@@ -45,7 +40,11 @@
|
|
|
45
40
|
@click="show = false"
|
|
46
41
|
>
|
|
47
42
|
<template #icon>
|
|
48
|
-
<AwIconSystemMono
|
|
43
|
+
<AwIconSystemMono
|
|
44
|
+
name="close"
|
|
45
|
+
size="16"
|
|
46
|
+
class="text-mono-400"
|
|
47
|
+
/>
|
|
49
48
|
</template>
|
|
50
49
|
<span class="sr-only">
|
|
51
50
|
{{ $t('Close') }}
|
|
@@ -61,6 +60,14 @@
|
|
|
61
60
|
/>
|
|
62
61
|
</slot>
|
|
63
62
|
|
|
63
|
+
<!-- subtitle -->
|
|
64
|
+
<AwHeadline
|
|
65
|
+
v-if="submenuOpened && submenuTitle"
|
|
66
|
+
class="aw-mobile-menu__submenu-title truncate"
|
|
67
|
+
>
|
|
68
|
+
{{ submenuTitle }}
|
|
69
|
+
</AwHeadline>
|
|
70
|
+
|
|
64
71
|
<!-- top level menu -->
|
|
65
72
|
<AwMobileMenuNav
|
|
66
73
|
v-show="!submenuOpened"
|
|
@@ -35,14 +35,14 @@
|
|
|
35
35
|
v-if="_linkExternal"
|
|
36
36
|
name="external"
|
|
37
37
|
size="24"
|
|
38
|
-
class="aw-mobile-menu-item__arrow"
|
|
38
|
+
class="aw-mobile-menu-item__arrow text-on-surface"
|
|
39
39
|
/>
|
|
40
40
|
|
|
41
41
|
<AwIconSystemMono
|
|
42
42
|
v-else-if="arrow"
|
|
43
43
|
name="angle"
|
|
44
44
|
rotate="180"
|
|
45
|
-
class="aw-mobile-menu-item__arrow"
|
|
45
|
+
class="aw-mobile-menu-item__arrow text-mono-400"
|
|
46
46
|
/>
|
|
47
47
|
</slot>
|
|
48
48
|
</Component>
|
|
@@ -41,14 +41,14 @@
|
|
|
41
41
|
<AwIconSystemMono
|
|
42
42
|
v-if="_linkExternal"
|
|
43
43
|
name="external"
|
|
44
|
-
class="aw-mobile-menu-item-new__arrow"
|
|
44
|
+
class="aw-mobile-menu-item-new__arrow text-on-surface"
|
|
45
45
|
/>
|
|
46
46
|
|
|
47
47
|
<AwIconSystemMono
|
|
48
48
|
v-else-if="arrow"
|
|
49
49
|
name="angle"
|
|
50
50
|
rotate="180"
|
|
51
|
-
class="aw-mobile-menu-item-new__arrow"
|
|
51
|
+
class="aw-mobile-menu-item-new__arrow text-mono-400"
|
|
52
52
|
/>
|
|
53
53
|
</slot>
|
|
54
54
|
</Component>
|
|
@@ -29,8 +29,8 @@
|
|
|
29
29
|
}"
|
|
30
30
|
>
|
|
31
31
|
<Component
|
|
32
|
-
:is="
|
|
33
|
-
|
|
32
|
+
:is="profileUrlAttr.is"
|
|
33
|
+
v-bind="profileUrlAttr"
|
|
34
34
|
class="aw-user-menu__header"
|
|
35
35
|
>
|
|
36
36
|
<AwUserpic v-bind="user" big-image />
|
|
@@ -102,6 +102,7 @@
|
|
|
102
102
|
import { mapGetters } from 'vuex'
|
|
103
103
|
import { pathOr, viewOr, lensProp, omit, isEmpty, isNil, isType } from 'rambdax'
|
|
104
104
|
import AwNavItem from '@AwLayouts/_AwNavItem.vue'
|
|
105
|
+
import { LINK_REGEX } from '@AwConfig'
|
|
105
106
|
|
|
106
107
|
export default {
|
|
107
108
|
name: 'AwUserMenu',
|
|
@@ -155,6 +156,28 @@ export default {
|
|
|
155
156
|
return isType('Function', profileUrl)
|
|
156
157
|
? profileUrl(this.$store.state, this.$store.getters)
|
|
157
158
|
: profileUrl
|
|
159
|
+
},
|
|
160
|
+
|
|
161
|
+
isExternalProfileUrl() {
|
|
162
|
+
return (
|
|
163
|
+
typeof this.profileUrl === 'string' &&
|
|
164
|
+
this.profileUrl &&
|
|
165
|
+
LINK_REGEX.test(this.profileUrl)
|
|
166
|
+
)
|
|
167
|
+
},
|
|
168
|
+
|
|
169
|
+
profileUrlAttr() {
|
|
170
|
+
if (this.isExternalProfileUrl) {
|
|
171
|
+
return {
|
|
172
|
+
href: this.profileUrl,
|
|
173
|
+
is: 'a'
|
|
174
|
+
}
|
|
175
|
+
} else {
|
|
176
|
+
return {
|
|
177
|
+
to: this.profileUrl || null,
|
|
178
|
+
is: this.profileUrl ? 'NLink' : 'div'
|
|
179
|
+
}
|
|
180
|
+
}
|
|
158
181
|
}
|
|
159
182
|
},
|
|
160
183
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@awes-io/ui",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.74.0",
|
|
4
4
|
"description": "User Interface (UI) components",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"ui",
|
|
@@ -112,5 +112,5 @@
|
|
|
112
112
|
"rollup-plugin-visualizer": "^2.6.0",
|
|
113
113
|
"rollup-plugin-vue": "^5.0.1"
|
|
114
114
|
},
|
|
115
|
-
"gitHead": "
|
|
115
|
+
"gitHead": "fb3404c7bd68d6380cb1bf4e5fc357aa7bdc9bfd"
|
|
116
116
|
}
|