@awes-io/ui 2.76.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 CHANGED
@@ -3,6 +3,46 @@
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
+
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)
27
+
28
+
29
+ ### Bug Fixes
30
+
31
+ * styles updated ([a8eaf37](https://github.com/awes-io/client/commit/a8eaf371af18a017ba3aac73a49684ca4ae15120))
32
+
33
+
34
+ ### Features
35
+
36
+ * add square for cropper if is square island avatar ([38cf594](https://github.com/awes-io/client/commit/38cf594435db8bce9eb738426b54fd65fee0bf5d))
37
+ * change style for button nav ([5ec3806](https://github.com/awes-io/client/commit/5ec3806326b6edb777a6e9248cfc57c3fb7812dd))
38
+ * change style for button nav ([5c1a0a3](https://github.com/awes-io/client/commit/5c1a0a34d9bfe2023cdbf1c8e141ccf551c5a720))
39
+ * change style for pagination ([0ca8d07](https://github.com/awes-io/client/commit/0ca8d075e79935d0c1dd02eedf935320930b3383))
40
+ * change style for tab nav and pagination ([b5ecc29](https://github.com/awes-io/client/commit/b5ecc293477ca8aa4dca1778dcb74ee142cca2b7))
41
+
42
+
43
+
44
+
45
+
6
46
  # [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
47
 
8
48
 
@@ -21,15 +21,12 @@
21
21
  }
22
22
 
23
23
  &__toggler {
24
- @apply bg-mono-800;
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: 1rem;
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
- padding: 0.875rem 1.25rem;
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: theme('boxShadow.default');
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-800);
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
- padding: 0.625rem 1.25rem;
203
+ height: 2.25rem;
157
204
  }
158
205
  }
159
206
 
@@ -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.5rem;
50
+ font-size: 0.5625rem;
51
51
  font-weight: 400;
52
- line-height: 0.58625rem;
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: 3.5rem;
99
- height: 2.875rem;
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: 4.5rem auto;
6
- grid-template-rows: 80px minmax(0, 2fr) minmax(0, 1fr) 80px minmax(0, auto);
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: theme('spacing.3');
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,10 +31,12 @@
27
31
 
28
32
  overflow-y: auto;
29
33
  overflow-y: overlay;
34
+ /* scrollbar-gutter: stable both-edges; */
30
35
  overscroll-behavior: contain;
31
36
 
32
37
  scrollbar-width: thin;
33
- scrollbar-color: rgba(var(--c-on-surface-rgb), 0.15) rgba(var(--c-on-surface-rgb), 0.1);
38
+ scrollbar-color: rgba(var(--c-on-surface-rgb), 0.15)
39
+ rgba(var(--c-on-surface-rgb), 0.1);
34
40
 
35
41
  &::-webkit-scrollbar {
36
42
  width: 6px;
@@ -53,7 +59,7 @@
53
59
 
54
60
  &__submenu {
55
61
  @apply bg-surface;
56
- width: 230px;
62
+ width: 220px;
57
63
  max-height: 100vh;
58
64
  border-left: 2px solid var(--c-mono-900);
59
65
 
@@ -2,9 +2,11 @@
2
2
  @apply py-8;
3
3
 
4
4
  &__title {
5
- @apply text-xl font-heading mb-5 px-8 truncate;
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
- @apply flex items-center py-2 px-8;
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(theme('spacing.10') + 16px);
81
+ padding-left: calc(2.1875rem + 16px);
79
82
  }
80
83
 
81
84
  &--active {
@@ -53,8 +53,3 @@
53
53
  left: -4px;
54
54
  }
55
55
  }
56
-
57
- :where([data-dark='true']) .aw-tooltip {
58
- background-color: var(--c-surface);
59
- color: rgba(var(--c-on-surface-rgb), 0.9);
60
- }
@@ -41,7 +41,7 @@ export default {
41
41
 
42
42
  iconColor: {
43
43
  type: String,
44
- default: 'mono-500'
44
+ default: 'mono-100'
45
45
  },
46
46
 
47
47
  title: {
@@ -114,6 +114,8 @@ export default {
114
114
  },
115
115
  enableOrientation: true
116
116
  })
117
+
118
+ setTimeout(() => this.croppie.setZoom(0), 60)
117
119
  },
118
120
 
119
121
  rotate() {
@@ -149,7 +149,11 @@
149
149
  :title="$t('Upload avatar')"
150
150
  theme="fullscreen"
151
151
  >
152
- <AwCropper :src="uploadedAvatar" @save="saveAvatar" />
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="icon"
29
+ theme="ghost"
30
+ color="default"
29
31
  size="sm"
30
- class="hidden lg:inline-flex mr-1"
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 class="w-8 h-8" tabindex="-1">
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
- class="hidden lg:inline-flex ml-1"
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"
@@ -2,10 +2,10 @@
2
2
  <div class="aw-page-single">
3
3
  <AwPageHeader
4
4
  ref="header"
5
- :progress="headerProgress"
6
- :primary="$screen.lg || isHeaderStuck"
5
+ :progress="isDesktop ? headerProgress : null"
6
+ :primary="isDesktop || isHeaderStuck"
7
7
  :title="_title"
8
- :hide-title="!$screen.lg && !isHeaderStuck"
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 && $screen.lg"
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="!$screen.lg && description"
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 && !$screen.lg"
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
- this.$options.$observer.disconnect()
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.76.0",
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": "2f8a95b6ec15499692d2f6375abd45d155109e66"
116
+ "gitHead": "9c3291403739bbdddd26c63898cc196525a7cb2e"
117
117
  }