@awes-io/ui 2.77.0 → 2.78.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 +20 -0
- package/assets/css/components/icon-menu-item.css +11 -45
- package/assets/css/components/layout-menu.css +9 -5
- package/assets/css/components/nav.css +7 -4
- package/assets/css/components/tooltip.css +0 -5
- package/components/4_pages/AwPageSingle.vue +38 -8
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,26 @@
|
|
|
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.78.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.77.0...@awes-io/ui@2.78.0) (2023-11-02)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* **aw-page-single:** progress hidden on mobile ([4b749c5](https://github.com/awes-io/client/commit/4b749c523669194629d05962f722e87a2764fe61))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
### Features
|
|
15
|
+
|
|
16
|
+
* change style for desktop menu ([3b41640](https://github.com/awes-io/client/commit/3b41640e555afa5a46b69ecc53437ad818ae4081))
|
|
17
|
+
* change style for menu ([cc041e7](https://github.com/awes-io/client/commit/cc041e7c8e3f0cbdfc7ec27ba9705b3f7d9afd0c))
|
|
18
|
+
* change style in menu ([de4f03d](https://github.com/awes-io/client/commit/de4f03d8818589f48844ba825ec3469910cedc8f))
|
|
19
|
+
* change style in menu ([616a726](https://github.com/awes-io/client/commit/616a726884356b878b070ccc15fc40f7247613ab))
|
|
20
|
+
* remove custom dark theme for desktop menu ([52f109e](https://github.com/awes-io/client/commit/52f109e187af884741fed932de8e638dae23ac7b))
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
|
|
6
26
|
# [2.77.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.76.0...@awes-io/ui@2.77.0) (2023-11-02)
|
|
7
27
|
|
|
8
28
|
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
justify-content: center;
|
|
38
38
|
flex-direction: column;
|
|
39
39
|
|
|
40
|
-
padding: 0.75rem;
|
|
40
|
+
padding: 0.515625rem 0.75rem;
|
|
41
41
|
|
|
42
42
|
width: 100%;
|
|
43
43
|
position: relative;
|
|
@@ -47,9 +47,9 @@
|
|
|
47
47
|
&__text {
|
|
48
48
|
display: block;
|
|
49
49
|
|
|
50
|
-
font-size: 0.
|
|
50
|
+
font-size: 0.5625rem;
|
|
51
51
|
font-weight: 400;
|
|
52
|
-
line-height: 0.
|
|
52
|
+
line-height: 0.659375rem;
|
|
53
53
|
color: var(--c-mono-300);
|
|
54
54
|
transition: 60ms color;
|
|
55
55
|
|
|
@@ -88,6 +88,12 @@
|
|
|
88
88
|
|
|
89
89
|
@screen lg {
|
|
90
90
|
.aw-icon-menu-item {
|
|
91
|
+
margin-bottom: 0.5rem;
|
|
92
|
+
|
|
93
|
+
&:last-of-type {
|
|
94
|
+
margin-bottom: 0;
|
|
95
|
+
}
|
|
96
|
+
|
|
91
97
|
&--active {
|
|
92
98
|
&:before {
|
|
93
99
|
border-radius: 0.625rem;
|
|
@@ -95,51 +101,11 @@
|
|
|
95
101
|
top: 50%;
|
|
96
102
|
left: 50%;
|
|
97
103
|
transform: translate(-50%, -50%);
|
|
98
|
-
width:
|
|
99
|
-
height:
|
|
104
|
+
width: 4rem;
|
|
105
|
+
height: 3.0625rem;
|
|
100
106
|
content: '';
|
|
101
107
|
background-color: var(--c-mono-800);
|
|
102
108
|
}
|
|
103
109
|
}
|
|
104
110
|
}
|
|
105
|
-
|
|
106
|
-
[data-dark='true'] {
|
|
107
|
-
.aw-icon-menu-item {
|
|
108
|
-
&--active {
|
|
109
|
-
&:before {
|
|
110
|
-
background-color: rgba(var(--c-mono-700-rgb), 0.5);
|
|
111
|
-
}
|
|
112
|
-
}
|
|
113
|
-
}
|
|
114
|
-
}
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
[data-dark='true'] {
|
|
118
|
-
.aw-icon-menu-item {
|
|
119
|
-
&:hover {
|
|
120
|
-
.aw-icon-menu-item {
|
|
121
|
-
&__icon,
|
|
122
|
-
&__text {
|
|
123
|
-
color: rgba(var(--c-on-surface-rgb), 0.9);
|
|
124
|
-
}
|
|
125
|
-
}
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
&--active {
|
|
129
|
-
.aw-icon-menu-item {
|
|
130
|
-
&__icon,
|
|
131
|
-
&__text {
|
|
132
|
-
color: rgba(var(--c-on-surface-rgb), 0.9);
|
|
133
|
-
}
|
|
134
|
-
}
|
|
135
|
-
}
|
|
136
|
-
|
|
137
|
-
&__icon {
|
|
138
|
-
color: rgba(var(--c-on-surface-rgb), 0.8);
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
&__text {
|
|
142
|
-
color: var(--c-mono-400);
|
|
143
|
-
}
|
|
144
|
-
}
|
|
145
111
|
}
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
@apply bg-surface;
|
|
3
3
|
|
|
4
4
|
display: grid;
|
|
5
|
-
grid-template-columns:
|
|
6
|
-
grid-template-rows:
|
|
5
|
+
grid-template-columns: 5rem auto;
|
|
6
|
+
grid-template-rows: 78px minmax(0, 2fr) minmax(0, 1fr) 60px minmax(0, auto);
|
|
7
7
|
|
|
8
8
|
z-index: 4;
|
|
9
9
|
|
|
@@ -12,10 +12,14 @@
|
|
|
12
12
|
display: flex;
|
|
13
13
|
justify-content: center;
|
|
14
14
|
width: 100%;
|
|
15
|
-
padding:
|
|
15
|
+
padding: 0.25rem 0.75rem 0.75rem;
|
|
16
16
|
margin: auto 0;
|
|
17
17
|
}
|
|
18
18
|
|
|
19
|
+
&__logo {
|
|
20
|
+
padding: 0 0.75rem 0;
|
|
21
|
+
}
|
|
22
|
+
|
|
19
23
|
&__menu,
|
|
20
24
|
&__secondary-menu {
|
|
21
25
|
--icon-color: var(--c-on-surface);
|
|
@@ -27,7 +31,7 @@
|
|
|
27
31
|
|
|
28
32
|
overflow-y: auto;
|
|
29
33
|
overflow-y: overlay;
|
|
30
|
-
scrollbar-gutter: stable both-edges;
|
|
34
|
+
/* scrollbar-gutter: stable both-edges; */
|
|
31
35
|
overscroll-behavior: contain;
|
|
32
36
|
|
|
33
37
|
scrollbar-width: thin;
|
|
@@ -55,7 +59,7 @@
|
|
|
55
59
|
|
|
56
60
|
&__submenu {
|
|
57
61
|
@apply bg-surface;
|
|
58
|
-
width:
|
|
62
|
+
width: 220px;
|
|
59
63
|
max-height: 100vh;
|
|
60
64
|
border-left: 2px solid var(--c-mono-900);
|
|
61
65
|
|
|
@@ -2,9 +2,11 @@
|
|
|
2
2
|
@apply py-8;
|
|
3
3
|
|
|
4
4
|
&__title {
|
|
5
|
-
@apply text-xl font-heading mb-5
|
|
5
|
+
@apply text-xl font-heading mb-5 truncate;
|
|
6
6
|
font-style: normal;
|
|
7
7
|
font-weight: bold;
|
|
8
|
+
padding-right: 1.6875rem;
|
|
9
|
+
padding-left: 1.6875rem;
|
|
8
10
|
}
|
|
9
11
|
|
|
10
12
|
&__item {
|
|
@@ -39,7 +41,9 @@
|
|
|
39
41
|
max-width: 100%;
|
|
40
42
|
min-width: 0;
|
|
41
43
|
color: inherit;
|
|
42
|
-
|
|
44
|
+
padding-right: 1.6875rem;
|
|
45
|
+
padding-left: 1.6875rem;
|
|
46
|
+
@apply flex items-center py-2;
|
|
43
47
|
|
|
44
48
|
& > svg {
|
|
45
49
|
@apply mr-2;
|
|
@@ -63,7 +67,6 @@
|
|
|
63
67
|
display: block;
|
|
64
68
|
width: 6px;
|
|
65
69
|
height: 6px;
|
|
66
|
-
margin-left: 5px;
|
|
67
70
|
margin-top: -3px;
|
|
68
71
|
border-radius: 50%;
|
|
69
72
|
background-color: var(--c-mono-100, green);
|
|
@@ -75,7 +78,7 @@
|
|
|
75
78
|
}
|
|
76
79
|
|
|
77
80
|
&--sub {
|
|
78
|
-
padding-left: calc(
|
|
81
|
+
padding-left: calc(2.1875rem + 16px);
|
|
79
82
|
}
|
|
80
83
|
|
|
81
84
|
&--active {
|
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
<div class="aw-page-single">
|
|
3
3
|
<AwPageHeader
|
|
4
4
|
ref="header"
|
|
5
|
-
:progress="headerProgress"
|
|
6
|
-
:primary="
|
|
5
|
+
:progress="isDesktop ? headerProgress : null"
|
|
6
|
+
:primary="isDesktop || isHeaderStuck"
|
|
7
7
|
:title="_title"
|
|
8
|
-
:hide-title="
|
|
8
|
+
:hide-title="!isDesktop && !isHeaderStuck"
|
|
9
9
|
:hide-menu="hideMenu"
|
|
10
10
|
class="aw-page-single__header"
|
|
11
11
|
:class="{ 'aw-page-single__header--is-stuck': isHeaderStuck }"
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
<slot name="buttons"></slot>
|
|
33
33
|
|
|
34
34
|
<AwButton
|
|
35
|
-
v-if="actionButton &&
|
|
35
|
+
v-if="actionButton && isDesktop"
|
|
36
36
|
v-bind="actionButton"
|
|
37
37
|
size="md"
|
|
38
38
|
@click="$emit('action')"
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
</div>
|
|
54
54
|
|
|
55
55
|
<AwDescription
|
|
56
|
-
v-if="
|
|
56
|
+
v-if="!isDesktop && description"
|
|
57
57
|
class="aw-page-single__mobile-description"
|
|
58
58
|
tag="div"
|
|
59
59
|
>
|
|
@@ -88,7 +88,7 @@
|
|
|
88
88
|
</div>
|
|
89
89
|
|
|
90
90
|
<div
|
|
91
|
-
v-if="actionButton &&
|
|
91
|
+
v-if="actionButton && !isDesktop"
|
|
92
92
|
class="aw-page-single__mobile-action-button"
|
|
93
93
|
:class="{
|
|
94
94
|
'aw-page-single__mobile-action-button--is-stuck': isActionButtonStuck
|
|
@@ -146,6 +146,11 @@ export default {
|
|
|
146
146
|
default: ''
|
|
147
147
|
},
|
|
148
148
|
|
|
149
|
+
desktopFrom: {
|
|
150
|
+
type: String,
|
|
151
|
+
default: 'lg'
|
|
152
|
+
},
|
|
153
|
+
|
|
149
154
|
reverse: Boolean,
|
|
150
155
|
|
|
151
156
|
hideMenu: Boolean
|
|
@@ -159,6 +164,10 @@ export default {
|
|
|
159
164
|
},
|
|
160
165
|
|
|
161
166
|
computed: {
|
|
167
|
+
isDesktop() {
|
|
168
|
+
return this.$screen[this.desktopFrom] || false
|
|
169
|
+
},
|
|
170
|
+
|
|
162
171
|
containerType() {
|
|
163
172
|
return CONTAINER_TYPES.includes(this.container)
|
|
164
173
|
? this.container
|
|
@@ -182,10 +191,25 @@ export default {
|
|
|
182
191
|
}
|
|
183
192
|
},
|
|
184
193
|
|
|
194
|
+
watch: {
|
|
195
|
+
isDesktop() {
|
|
196
|
+
if (this.$options.$observer) {
|
|
197
|
+
this.$nextTick(() => {
|
|
198
|
+
this._disableScrollWatcher()
|
|
199
|
+
this._initScrollWatcher()
|
|
200
|
+
})
|
|
201
|
+
}
|
|
202
|
+
}
|
|
203
|
+
},
|
|
204
|
+
|
|
185
205
|
mounted() {
|
|
186
206
|
this._initScrollWatcher()
|
|
187
207
|
},
|
|
188
208
|
|
|
209
|
+
beforeDestroy() {
|
|
210
|
+
this._disableScrollWatcher()
|
|
211
|
+
},
|
|
212
|
+
|
|
189
213
|
methods: {
|
|
190
214
|
_initScrollWatcher() {
|
|
191
215
|
if (this.$options.$observer) return
|
|
@@ -210,9 +234,15 @@ export default {
|
|
|
210
234
|
this.$options.$observer.observe(bottomScrollMark)
|
|
211
235
|
|
|
212
236
|
this.$once('hook:beforeDestroy', () => {
|
|
213
|
-
|
|
214
|
-
this.$options.$observer = null
|
|
237
|
+
|
|
215
238
|
})
|
|
239
|
+
},
|
|
240
|
+
|
|
241
|
+
_disableScrollWatcher() {
|
|
242
|
+
if (!this.$options.$observer) return
|
|
243
|
+
|
|
244
|
+
this.$options.$observer.disconnect()
|
|
245
|
+
this.$options.$observer = null
|
|
216
246
|
}
|
|
217
247
|
}
|
|
218
248
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@awes-io/ui",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.78.0",
|
|
4
4
|
"description": "User Interface (UI) components",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"ui",
|
|
@@ -113,5 +113,5 @@
|
|
|
113
113
|
"rollup-plugin-visualizer": "^2.6.0",
|
|
114
114
|
"rollup-plugin-vue": "^5.0.1"
|
|
115
115
|
},
|
|
116
|
-
"gitHead": "
|
|
116
|
+
"gitHead": "9c3291403739bbdddd26c63898cc196525a7cb2e"
|
|
117
117
|
}
|