@awes-io/ui 2.76.0 → 2.77.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/button-nav.css +57 -10
- package/assets/css/components/layout-menu.css +3 -1
- package/components/2_molecules/AwEmptyContainer.vue +1 -1
- package/components/3_organisms/AwCropper.vue +2 -0
- package/components/3_organisms/AwIslandAvatar.vue +5 -1
- package/components/3_organisms/AwPagination.vue +10 -6
- 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.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
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* styles updated ([a8eaf37](https://github.com/awes-io/client/commit/a8eaf371af18a017ba3aac73a49684ca4ae15120))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
### Features
|
|
15
|
+
|
|
16
|
+
* add square for cropper if is square island avatar ([38cf594](https://github.com/awes-io/client/commit/38cf594435db8bce9eb738426b54fd65fee0bf5d))
|
|
17
|
+
* change style for button nav ([5ec3806](https://github.com/awes-io/client/commit/5ec3806326b6edb777a6e9248cfc57c3fb7812dd))
|
|
18
|
+
* change style for button nav ([5c1a0a3](https://github.com/awes-io/client/commit/5c1a0a34d9bfe2023cdbf1c8e141ccf551c5a720))
|
|
19
|
+
* change style for pagination ([0ca8d07](https://github.com/awes-io/client/commit/0ca8d075e79935d0c1dd02eedf935320930b3383))
|
|
20
|
+
* change style for tab nav and pagination ([b5ecc29](https://github.com/awes-io/client/commit/b5ecc293477ca8aa4dca1778dcb74ee142cca2b7))
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
|
|
6
26
|
# [2.76.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.75.0...@awes-io/ui@2.76.0) (2023-10-25)
|
|
7
27
|
|
|
8
28
|
|
|
@@ -21,15 +21,12 @@
|
|
|
21
21
|
}
|
|
22
22
|
|
|
23
23
|
&__toggler {
|
|
24
|
-
@apply bg-mono-
|
|
24
|
+
@apply bg-mono-900;
|
|
25
25
|
|
|
26
26
|
position: relative;
|
|
27
|
-
flex-shrink: 0;
|
|
28
|
-
padding: 0;
|
|
29
|
-
min-width: theme('spacing.8');
|
|
30
27
|
white-space: nowrap;
|
|
31
28
|
|
|
32
|
-
font-size:
|
|
29
|
+
font-size: 0.875rem;
|
|
33
30
|
line-height: 1rem;
|
|
34
31
|
font-weight: 400;
|
|
35
32
|
border-radius: 0;
|
|
@@ -53,9 +50,17 @@
|
|
|
53
50
|
}
|
|
54
51
|
|
|
55
52
|
&__toggler > span {
|
|
56
|
-
|
|
53
|
+
display: flex;
|
|
54
|
+
align-items: center;
|
|
55
|
+
justify-content: center;
|
|
56
|
+
|
|
57
|
+
height: 2.75rem;
|
|
58
|
+
min-width: 6.25rem;
|
|
57
59
|
width: 100%;
|
|
58
60
|
border-radius: 0.5rem;
|
|
61
|
+
|
|
62
|
+
padding-left: 0.5rem;
|
|
63
|
+
padding-right: 0.5rem;
|
|
59
64
|
}
|
|
60
65
|
|
|
61
66
|
&__toggler:focus, &__toggler > span:focus {
|
|
@@ -65,7 +70,8 @@
|
|
|
65
70
|
&__toggler_active > span {
|
|
66
71
|
@apply bg-surface;
|
|
67
72
|
border-radius: 0.5rem;
|
|
68
|
-
box-shadow:
|
|
73
|
+
box-shadow: 0 2px 5px 0 rgba(var(--c-mono-100-rgb), 0.1);
|
|
74
|
+
z-index: 1;
|
|
69
75
|
}
|
|
70
76
|
|
|
71
77
|
&__toggler:hover > span {
|
|
@@ -81,10 +87,10 @@
|
|
|
81
87
|
|
|
82
88
|
|
|
83
89
|
&--fullwidth {
|
|
84
|
-
background-color: inherit;
|
|
85
90
|
margin-left: calc(-1 * var(--container-padding));
|
|
86
91
|
margin-right: calc(-1 * var(--container-padding));
|
|
87
92
|
max-width: calc(100% + 2 * var(--container-padding));
|
|
93
|
+
width: 100%;
|
|
88
94
|
|
|
89
95
|
.aw-slider__scroller:before,
|
|
90
96
|
.aw-slider__scroller:after {
|
|
@@ -113,7 +119,7 @@
|
|
|
113
119
|
|
|
114
120
|
&--fill {
|
|
115
121
|
.aw-button-nav__toggler {
|
|
116
|
-
background-color: var(--c-mono-
|
|
122
|
+
background-color: var(--c-mono-900);
|
|
117
123
|
border: 4px solid var(--c-mono-800);
|
|
118
124
|
|
|
119
125
|
& > span {
|
|
@@ -121,6 +127,47 @@
|
|
|
121
127
|
}
|
|
122
128
|
}
|
|
123
129
|
}
|
|
130
|
+
|
|
131
|
+
&__arrow-btn.aw-button.theme-ghost {
|
|
132
|
+
align-items: center;
|
|
133
|
+
|
|
134
|
+
width: 2.5rem;
|
|
135
|
+
height: 2.5rem;
|
|
136
|
+
|
|
137
|
+
border-radius: 0.625rem;
|
|
138
|
+
|
|
139
|
+
.aw-button__overlay {
|
|
140
|
+
border-radius: 0.625rem;
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
&--pagination {
|
|
145
|
+
.aw-button-nav {
|
|
146
|
+
&__toggler {
|
|
147
|
+
border-top: 1px solid var(--c-mono-800);
|
|
148
|
+
border-bottom: 1px solid var(--c-mono-800);
|
|
149
|
+
|
|
150
|
+
&:first-child {
|
|
151
|
+
border-radius: 0.625rem 0 0 0.625rem;
|
|
152
|
+
border-left: 1px solid var(--c-mono-800);
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
&:last-child {
|
|
156
|
+
border-radius: 0 0.625rem 0.625rem 0;
|
|
157
|
+
border-right: 1px solid var(--c-mono-800);
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
& > span {
|
|
161
|
+
height: 2.375rem;
|
|
162
|
+
min-width: 0;
|
|
163
|
+
width: 2.6rem;
|
|
164
|
+
|
|
165
|
+
padding-left: 0.125rem;
|
|
166
|
+
padding-right: 0.125rem;
|
|
167
|
+
}
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
}
|
|
124
171
|
}
|
|
125
172
|
|
|
126
173
|
@screen md {
|
|
@@ -153,7 +200,7 @@
|
|
|
153
200
|
|
|
154
201
|
& > span {
|
|
155
202
|
border-radius: 0.5rem;
|
|
156
|
-
|
|
203
|
+
height: 2.25rem;
|
|
157
204
|
}
|
|
158
205
|
}
|
|
159
206
|
|
|
@@ -27,10 +27,12 @@
|
|
|
27
27
|
|
|
28
28
|
overflow-y: auto;
|
|
29
29
|
overflow-y: overlay;
|
|
30
|
+
scrollbar-gutter: stable both-edges;
|
|
30
31
|
overscroll-behavior: contain;
|
|
31
32
|
|
|
32
33
|
scrollbar-width: thin;
|
|
33
|
-
scrollbar-color: rgba(var(--c-on-surface-rgb), 0.15)
|
|
34
|
+
scrollbar-color: rgba(var(--c-on-surface-rgb), 0.15)
|
|
35
|
+
rgba(var(--c-on-surface-rgb), 0.1);
|
|
34
36
|
|
|
35
37
|
&::-webkit-scrollbar {
|
|
36
38
|
width: 6px;
|
|
@@ -149,7 +149,11 @@
|
|
|
149
149
|
:title="$t('Upload avatar')"
|
|
150
150
|
theme="fullscreen"
|
|
151
151
|
>
|
|
152
|
-
<AwCropper
|
|
152
|
+
<AwCropper
|
|
153
|
+
:src="uploadedAvatar"
|
|
154
|
+
@save="saveAvatar"
|
|
155
|
+
:square="squareAvatar"
|
|
156
|
+
/>
|
|
153
157
|
</AwModal>
|
|
154
158
|
</template>
|
|
155
159
|
</AwIsland>
|
|
@@ -22,12 +22,14 @@
|
|
|
22
22
|
>
|
|
23
23
|
<AwIconSystemMono name="arrow" size="16" />
|
|
24
24
|
</AwButton>
|
|
25
|
+
|
|
25
26
|
<AwButton
|
|
26
27
|
:data-page="prevPage"
|
|
27
28
|
:disabled="prevPage === null"
|
|
28
|
-
theme="
|
|
29
|
+
theme="ghost"
|
|
30
|
+
color="default"
|
|
29
31
|
size="sm"
|
|
30
|
-
class="hidden lg:inline-flex mr-
|
|
32
|
+
class="aw-button-nav__arrow-btn hidden lg:inline-flex mr-4"
|
|
31
33
|
>
|
|
32
34
|
<AwIconSystemMono name="arrow" size="16" />
|
|
33
35
|
</AwButton>
|
|
@@ -36,7 +38,7 @@
|
|
|
36
38
|
{{ $t('Page {page} of {pagesTotal}', { page, pagesTotal }) }}
|
|
37
39
|
</span>
|
|
38
40
|
<div
|
|
39
|
-
class="hidden lg:inline-flex aw-button-nav aw-button-nav__wrapper"
|
|
41
|
+
class="hidden lg:inline-flex aw-button-nav aw-button-nav__wrapper aw-button-nav--pagination"
|
|
40
42
|
>
|
|
41
43
|
<Component
|
|
42
44
|
v-for="({ component, text }, i) in pageButtons"
|
|
@@ -50,7 +52,7 @@
|
|
|
50
52
|
}"
|
|
51
53
|
class="aw-button-nav__toggler"
|
|
52
54
|
>
|
|
53
|
-
<span
|
|
55
|
+
<span tabindex="-1">
|
|
54
56
|
{{ text }}
|
|
55
57
|
</span>
|
|
56
58
|
</Component>
|
|
@@ -59,12 +61,14 @@
|
|
|
59
61
|
<AwButton
|
|
60
62
|
:data-page="nextPage"
|
|
61
63
|
:disabled="nextPage === null"
|
|
62
|
-
theme="icon"
|
|
63
64
|
size="sm"
|
|
64
|
-
|
|
65
|
+
theme="ghost"
|
|
66
|
+
color="default"
|
|
67
|
+
class="aw-button-nav__arrow-btn hidden lg:inline-flex ml-4"
|
|
65
68
|
>
|
|
66
69
|
<AwIconSystemMono name="arrow" rotate="180" size="16" />
|
|
67
70
|
</AwButton>
|
|
71
|
+
|
|
68
72
|
<AwButton
|
|
69
73
|
:data-page="nextPage"
|
|
70
74
|
:disabled="nextPage === null"
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@awes-io/ui",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.77.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": "c25bfd73e3141b0aed68fc34d181000dbbd53d16"
|
|
117
117
|
}
|