@awes-io/ui 2.109.0 → 2.111.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 (6) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/assets/css/components/button.css +11 -1
  3. package/assets/css/components/dock.css +88 -83
  4. package/components/1_atoms/AwDock.vue +14 -3
  5. package/components/3_organisms/AwBottomBar.vue +12 -1
  6. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -3,6 +3,28 @@
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.111.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.110.0...@awes-io/ui@2.111.0) (2024-09-30)
7
+
8
+
9
+ ### Features
10
+
11
+ * disabled buttons style updated ([e16b2c9](https://github.com/awes-io/client/commit/e16b2c901332fdf8ceca853b8883a1dc29bfc325))
12
+
13
+
14
+
15
+
16
+
17
+ # [2.110.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.109.0...@awes-io/ui@2.110.0) (2024-09-20)
18
+
19
+
20
+ ### Features
21
+
22
+ * aw-dock events + bottom bar scroll top ([5bc3b32](https://github.com/awes-io/client/commit/5bc3b322a0460f9ea9fa0323eb4e006886b1fa39))
23
+
24
+
25
+
26
+
27
+
6
28
  # [2.109.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.108.2...@awes-io/ui@2.109.0) (2024-09-13)
7
29
 
8
30
 
package/assets/css/components/button.css CHANGED
@@ -73,6 +73,14 @@
73
73
  }
74
74
  }
75
75
 
76
+ &:where(:disabled) .aw-button__icon-wrapper--highlighted {
77
+ background-color: color-mix(
78
+ in srgb,
79
+ var(--icon-color, var(--btn-color)) 8%,
80
+ rgba(255, 255, 255, 0.05)
81
+ );
82
+ }
83
+
76
84
  &__loader {
77
85
  height: 0.5rem;
78
86
  width: auto;
@@ -166,12 +174,14 @@
166
174
  --btn-bg-color: var(--c-accent);
167
175
  --btn-color: var(--c-on-accent);
168
176
  --btn-bg-hover: var(--c-accent-hover);
177
+ --btn-bg-disabled: var(--c-green);
169
178
  }
170
179
 
171
180
  &--color-error:where(&--theme-solid) {
172
181
  --btn-bg-color: var(--c-error);
173
182
  --btn-color: var(--c-on-error);
174
183
  --btn-bg-hover: var(--c-error-hover);
184
+ --btn-bg-disabled: var(--c-red);
175
185
  }
176
186
 
177
187
  &--color-dark:where(&--theme-solid) {
@@ -243,7 +253,7 @@
243
253
  }
244
254
 
245
255
  &--theme-solid:where(:not(&--loading, &--locked)):disabled {
246
- --btn-bg-color: var(--c-mono-800);
256
+ --btn-bg-color: var(--btn-bg-disabled, var(--c-mono-800));
247
257
  --btn-color: var(--c-mono-400);
248
258
  }
249
259
 
package/assets/css/components/dock.css CHANGED
@@ -1,86 +1,91 @@
1
1
  .aw-dock {
2
- --dock-bottom: env(safe-area-inset-bottom, 0px);
3
- --dock-height: calc(67vh - 2.75rem);
4
-
5
- display: flex;
6
- flex-direction: column;
7
-
8
- width: 100%;
9
- height: auto;
10
- max-height: 100%;
11
-
12
- position: fixed;
13
- left: 0;
14
- bottom: 0;
15
- z-index: 10;
16
-
17
- touch-action: pan-y;
18
-
19
- &--active {
20
- height: 100%;
21
- }
22
-
23
- &__panel {
24
- @apply bg-surface;
2
+ --dock-bottom: env(safe-area-inset-bottom, 0px);
3
+ --dock-height: calc(67vh - 2.75rem);
4
+
5
+ display: flex;
6
+ flex-direction: column;
7
+
8
+ width: 100%;
9
+ height: auto;
10
+ max-height: 100%;
11
+
12
+ position: fixed;
13
+ left: 0;
14
+ bottom: 0;
15
+ z-index: 10;
16
+
17
+ touch-action: pan-y;
18
+
19
+ &--active {
20
+ height: 100%;
21
+ }
22
+
23
+ &__panel {
24
+ @apply bg-surface;
25
+ display: flex;
26
+ flex-direction: column;
27
+
28
+ padding: 0 1.25rem calc(var(--dock-bottom, 0px) + 1.25rem);
29
+ border-radius: 1.25rem 1.25rem 0 0;
30
+ box-shadow: 0 -20px 25px -5px rgba(var(--c-overlay-rgb), 0.1),
31
+ 0 -10px 10px -5px rgba(var(--c-overlay-rgb), 0.04);
32
+ width: 100%;
33
+ height: auto;
34
+ max-height: 67vh;
35
+
36
+ position: relative;
37
+
38
+ &--padding {
39
+ padding-top: 1rem;
40
+ }
41
+ }
42
+
43
+ &__overlay {
44
+ @apply bg-overlay;
45
+
46
+ margin-bottom: -1.25rem;
47
+ flex: 1;
48
+ opacity: var(--dock-open-progress, 0);
49
+ }
50
+
51
+ &__toggler {
25
52
  display: flex;
26
- flex-direction: column;
27
-
28
- padding: 0 1.25rem calc(var(--dock-bottom, 0px) + 1.25rem);
29
- border-radius: 1.25rem 1.25rem 0 0;
30
- box-shadow: 0 -20px 25px -5px rgba(var(--c-overlay-rgb), 0.1),
31
- 0 -10px 10px -5px rgba(var(--c-overlay-rgb), 0.04);
53
+ align-items: center;
54
+ justify-content: center;
32
55
  width: 100%;
33
- height: auto;
34
- max-height: 67vh;
35
-
36
- position: relative;
37
- }
38
-
39
- &__overlay {
40
- @apply bg-overlay;
41
-
42
- margin-bottom: -1.25rem;
43
- flex: 1;
44
- opacity: var(--dock-open-progress, 0);
45
- }
46
-
47
- &__toggler {
48
- display: flex;
49
- align-items: center;
50
- justify-content: center;
51
- width: 100%;
52
- padding: 0.5rem;
53
-
54
- & > span {
55
- @apply bg-mono-700;
56
- display: block;
57
- width: 1.5rem;
58
- height: 0.25rem;
59
- border-radius: 0.125rem;
60
- }
61
- }
62
-
63
- &__content {
64
- overflow: hidden;
65
- opacity: calc(var(--dock-open-progress, 0) * 1.35 - 0.35);
66
- padding-bottom: calc(var(--dock-open-progress, 0) * 1rem);
67
- min-height: 0;
68
- max-height: calc(var(--dock-open-progress, 0) * var(--dock-height));
69
- transform: scaleX(
70
- min(1, calc(0.9 + 0.1 * var(--dock-open-progress, 0)))
71
- )
72
- translateY(max(0, calc(15% - 15% * var(--dock-open-progress, 0))));
73
- overflow: hidden;
74
- overscroll-behavior: contain;
75
-
76
- &--scroll {
77
- overflow: auto;
78
- padding-right: 0.75rem;
79
- margin-right: -0.75rem;
80
- }
81
- }
82
-
83
- &__visible {
84
- padding-top: 0.5rem;
85
- }
86
- }
56
+ padding: 0.5rem;
57
+
58
+ & > span {
59
+ @apply bg-mono-700;
60
+ display: block;
61
+ width: 1.5rem;
62
+ height: 0.25rem;
63
+ border-radius: 0.125rem;
64
+ }
65
+ }
66
+
67
+ &__content {
68
+ overflow: hidden;
69
+ opacity: calc(var(--dock-open-progress, 0) * 1.35 - 0.35);
70
+ padding-bottom: calc(var(--dock-open-progress, 0) * 1rem);
71
+ min-height: 0;
72
+ max-height: calc(var(--dock-open-progress, 0) * var(--dock-height));
73
+ transform: scaleX(
74
+ min(1, calc(0.9 + 0.1 * var(--dock-open-progress, 0)))
75
+ )
76
+ translateY(max(0, calc(15% - 15% * var(--dock-open-progress, 0))));
77
+ overflow: hidden;
78
+ overscroll-behavior: contain;
79
+
80
+ &--scroll {
81
+ overflow: auto;
82
+ padding-right: 0.75rem;
83
+ margin-right: -0.75rem;
84
+ }
85
+ }
86
+
87
+ &__visible {
88
+ padding-top: 0.5rem;
89
+ }
90
+ }
91
+
package/components/1_atoms/AwDock.vue CHANGED
@@ -8,8 +8,8 @@
8
8
  >
9
9
  <div ref="overlay" class="aw-dock__overlay"></div>
10
10
 
11
- <div class="aw-dock__panel">
12
- <button class="aw-dock__toggler">
11
+ <div class="aw-dock__panel" :class="{ 'aw-dock__panel--padding': !togglable }">
12
+ <button v-if="togglable" class="aw-dock__toggler">
13
13
  <span></span>
14
14
  </button>
15
15
 
@@ -45,6 +45,11 @@ export default {
45
45
  duration: {
46
46
  type: Number,
47
47
  default: 240
48
+ },
49
+
50
+ togglable: {
51
+ Boolean,
52
+ default: true
48
53
  }
49
54
  },
50
55
 
@@ -76,12 +81,14 @@ export default {
76
81
 
77
82
  beforeDestroy() {
78
83
  anime.remove(this)
84
+
85
+ enableBodyScroll(this.$el)
79
86
  },
80
87
 
81
88
  methods: {
82
89
  start($event) {
83
90
  // exit if click on action element or algeady started
84
- if (this.isSlideForbidden($event) || this.active) {
91
+ if (!this.togglable || this.isSlideForbidden($event) || this.active) {
85
92
  return
86
93
  }
87
94
 
@@ -134,6 +141,8 @@ export default {
134
141
  },
135
142
 
136
143
  open() {
144
+ this.$emit('open')
145
+
137
146
  disableBodyScroll(this.$el, {
138
147
  reserveScrollBarGap: true
139
148
  })
@@ -147,6 +156,8 @@ export default {
147
156
  },
148
157
 
149
158
  close() {
159
+ this.$emit('close')
160
+
150
161
  enableBodyScroll(this.$el)
151
162
 
152
163
  this._animate(
package/components/3_organisms/AwBottomBar.vue CHANGED
@@ -1,5 +1,5 @@
1
1
  <template>
2
- <div v-if="showMenu" class="aw-bottom-bar" :style="itemMaxWidthVar">
2
+ <div v-if="showMenu" class="aw-bottom-bar" :style="itemMaxWidthVar" @click="scrollToTopOnCurrent">
3
3
  <slot name="bottom-bar-items">
4
4
  <AwMenuItemIcon
5
5
  v-for="(item, i) in items"
@@ -41,6 +41,7 @@
41
41
 
42
42
  <script>
43
43
  import { viewOr, lensProp, omit } from 'rambdax'
44
+ import { getPath } from '@AwUtils/router'
44
45
  import AwMenuItemIcon from '@AwLayouts/_AwMenuItemIcon.vue'
45
46
 
46
47
  export const VISIBLE_ITEMS_COUNT = 4
@@ -131,6 +132,16 @@ export default {
131
132
  icon: props.hideText ? 'awesio/plus-fill-square' : props.icon,
132
133
  class: props.hideText ? 'aw-icon-menu-item--active' : ''
133
134
  }
135
+ },
136
+
137
+ scrollToTopOnCurrent($event) {
138
+ const link = $event.target.matches('a') ? $event.target : $event.target.closest('a')
139
+
140
+ if (!link) return
141
+
142
+ if (getPath(link.getAttribute('href')) === getPath(this.$route.path)) {
143
+ window.scrollTo({ top: 0, behavior: 'smooth' })
144
+ }
134
145
  }
135
146
  }
136
147
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@awes-io/ui",
3
- "version": "2.109.0",
3
+ "version": "2.111.0",
4
4
  "description": "User Interface (UI) components",
5
5
  "keywords": [
6
6
  "ui",
@@ -114,5 +114,5 @@
114
114
  "rollup-plugin-visualizer": "^2.6.0",
115
115
  "rollup-plugin-vue": "^5.0.1"
116
116
  },
117
- "gitHead": "06051e5291a5e5ba8351dd4cbbfd3bf0b63c34c6"
117
+ "gitHead": "4425bd4d524a3818f1fff86daa9af1ee732bbb57"
118
118
  }