@awes-io/ui 2.108.2 → 2.110.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,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.110.0](https://github.com/awes-io/client/compare/@awes-io/ui@2.109.0...@awes-io/ui@2.110.0) (2024-09-20)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* aw-dock events + bottom bar scroll top ([5bc3b32](https://github.com/awes-io/client/commit/5bc3b322a0460f9ea9fa0323eb4e006886b1fa39))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
# [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)
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
### Features
|
|
21
|
+
|
|
22
|
+
* add description for AwAlert ([874b900](https://github.com/awes-io/client/commit/874b900675b484fc1ba3d63c3925f9e1f01418f0))
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
6
28
|
## [2.108.2](https://github.com/awes-io/client/compare/@awes-io/ui@2.108.1...@awes-io/ui@2.108.2) (2024-08-23)
|
|
7
29
|
|
|
8
30
|
|
|
@@ -1,86 +1,91 @@
|
|
|
1
1
|
.aw-dock {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
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
|
-
|
|
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
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
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
|
+
|
|
@@ -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
|
|
|
@@ -81,7 +86,7 @@ export default {
|
|
|
81
86
|
methods: {
|
|
82
87
|
start($event) {
|
|
83
88
|
// exit if click on action element or algeady started
|
|
84
|
-
if (this.isSlideForbidden($event) || this.active) {
|
|
89
|
+
if (!this.togglable || this.isSlideForbidden($event) || this.active) {
|
|
85
90
|
return
|
|
86
91
|
}
|
|
87
92
|
|
|
@@ -134,6 +139,8 @@ export default {
|
|
|
134
139
|
},
|
|
135
140
|
|
|
136
141
|
open() {
|
|
142
|
+
this.$emit('open')
|
|
143
|
+
|
|
137
144
|
disableBodyScroll(this.$el, {
|
|
138
145
|
reserveScrollBarGap: true
|
|
139
146
|
})
|
|
@@ -147,6 +154,8 @@ export default {
|
|
|
147
154
|
},
|
|
148
155
|
|
|
149
156
|
close() {
|
|
157
|
+
this.$emit('close')
|
|
158
|
+
|
|
150
159
|
enableBodyScroll(this.$el)
|
|
151
160
|
|
|
152
161
|
this._animate(
|
|
@@ -20,6 +20,12 @@
|
|
|
20
20
|
|
|
21
21
|
<span class="aw-alert__title-text">
|
|
22
22
|
<slot name="title">{{ title }}</slot>
|
|
23
|
+
|
|
24
|
+
<slot name="description">
|
|
25
|
+
<span v-if="description" class="font-normal block mt-1">
|
|
26
|
+
{{ description }}
|
|
27
|
+
</span>
|
|
28
|
+
</slot>
|
|
23
29
|
</span>
|
|
24
30
|
</AwDescription>
|
|
25
31
|
|
|
@@ -54,6 +60,11 @@ export default {
|
|
|
54
60
|
title: {
|
|
55
61
|
type: String,
|
|
56
62
|
default: ''
|
|
63
|
+
},
|
|
64
|
+
|
|
65
|
+
description: {
|
|
66
|
+
type: String,
|
|
67
|
+
default: ''
|
|
57
68
|
}
|
|
58
69
|
},
|
|
59
70
|
|
|
@@ -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.
|
|
3
|
+
"version": "2.110.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": "
|
|
117
|
+
"gitHead": "a3cd8d0d4d5a0198f105839ffe71939864b6ffac"
|
|
118
118
|
}
|