@kiva/kv-components 4.2.2 → 4.3.1
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 +22 -0
- package/dist/components/KvSideSheet.vue +11 -1
- package/package.json +2 -2
- package/vue/KvSideSheet.vue +11 -1
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
|
+
## [4.3.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@4.3.0...@kiva/kv-components@4.3.1) (2024-12-11)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* resolve issue when screen size is changed and opening behavior changes ([c51d62e](https://github.com/kiva/kv-ui-elements/commit/c51d62e6b2f4efaee4ddcb6efa33cfe9523fd69f))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
# [4.3.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@4.2.2...@kiva/kv-components@4.3.0) (2024-12-10)
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
### Features
|
|
21
|
+
|
|
22
|
+
* scroll user to original position when sheet is opening in mobile ([0c783fa](https://github.com/kiva/kv-ui-elements/commit/0c783fae5f61cb2958fb6220baa284c4287bedac))
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
6
28
|
## [4.2.2](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@4.2.1...@kiva/kv-components@4.2.2) (2024-12-09)
|
|
7
29
|
|
|
8
30
|
|
|
@@ -119,12 +119,18 @@ export default {
|
|
|
119
119
|
const open = ref(false);
|
|
120
120
|
const initialStyles = ref({});
|
|
121
121
|
const modalStyles = ref({});
|
|
122
|
+
const userScrollPosition = ref(0);
|
|
122
123
|
|
|
123
124
|
const closeSideSheet = () => {
|
|
124
125
|
open.value = false;
|
|
125
126
|
kvTrackFunction.value(trackEventCategory.value, 'click', 'side-sheet-closed');
|
|
126
127
|
|
|
127
|
-
if (animationSourceElement.value) {
|
|
128
|
+
if (animationSourceElement.value && window.scrollTo) {
|
|
129
|
+
window.scrollTo({
|
|
130
|
+
top: userScrollPosition.value,
|
|
131
|
+
behavior: 'smooth',
|
|
132
|
+
});
|
|
133
|
+
|
|
128
134
|
modalStyles.value = {
|
|
129
135
|
...initialStyles.value,
|
|
130
136
|
transition: 'all 0.5s ease-in-out',
|
|
@@ -154,6 +160,8 @@ export default {
|
|
|
154
160
|
const height = rect?.height ?? 0;
|
|
155
161
|
|
|
156
162
|
if (top || left || width || height) {
|
|
163
|
+
userScrollPosition.value = window.scrollY ?? 0;
|
|
164
|
+
|
|
157
165
|
initialStyles.value = {
|
|
158
166
|
position: 'fixed',
|
|
159
167
|
top: `${top}px`,
|
|
@@ -176,6 +184,8 @@ export default {
|
|
|
176
184
|
transition: 'all 0.5s ease-in-out',
|
|
177
185
|
};
|
|
178
186
|
}, 10);
|
|
187
|
+
} else {
|
|
188
|
+
modalStyles.value = {};
|
|
179
189
|
}
|
|
180
190
|
}
|
|
181
191
|
});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kiva/kv-components",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.3.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -96,5 +96,5 @@
|
|
|
96
96
|
"peerDependencies": {
|
|
97
97
|
"vue": ">=3.0.0"
|
|
98
98
|
},
|
|
99
|
-
"gitHead": "
|
|
99
|
+
"gitHead": "d9c8a22eb715ff4d9f3a2ca655b610ea4ed69ddc"
|
|
100
100
|
}
|
package/vue/KvSideSheet.vue
CHANGED
|
@@ -119,12 +119,18 @@ export default {
|
|
|
119
119
|
const open = ref(false);
|
|
120
120
|
const initialStyles = ref({});
|
|
121
121
|
const modalStyles = ref({});
|
|
122
|
+
const userScrollPosition = ref(0);
|
|
122
123
|
|
|
123
124
|
const closeSideSheet = () => {
|
|
124
125
|
open.value = false;
|
|
125
126
|
kvTrackFunction.value(trackEventCategory.value, 'click', 'side-sheet-closed');
|
|
126
127
|
|
|
127
|
-
if (animationSourceElement.value) {
|
|
128
|
+
if (animationSourceElement.value && window.scrollTo) {
|
|
129
|
+
window.scrollTo({
|
|
130
|
+
top: userScrollPosition.value,
|
|
131
|
+
behavior: 'smooth',
|
|
132
|
+
});
|
|
133
|
+
|
|
128
134
|
modalStyles.value = {
|
|
129
135
|
...initialStyles.value,
|
|
130
136
|
transition: 'all 0.5s ease-in-out',
|
|
@@ -154,6 +160,8 @@ export default {
|
|
|
154
160
|
const height = rect?.height ?? 0;
|
|
155
161
|
|
|
156
162
|
if (top || left || width || height) {
|
|
163
|
+
userScrollPosition.value = window.scrollY ?? 0;
|
|
164
|
+
|
|
157
165
|
initialStyles.value = {
|
|
158
166
|
position: 'fixed',
|
|
159
167
|
top: `${top}px`,
|
|
@@ -176,6 +184,8 @@ export default {
|
|
|
176
184
|
transition: 'all 0.5s ease-in-out',
|
|
177
185
|
};
|
|
178
186
|
}, 10);
|
|
187
|
+
} else {
|
|
188
|
+
modalStyles.value = {};
|
|
179
189
|
}
|
|
180
190
|
}
|
|
181
191
|
});
|