@kiva/kv-components 4.8.5 → 4.8.6
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 +11 -0
- package/dist/components/KvSideSheet.vue +5 -12
- package/package.json +2 -2
- package/vue/KvSideSheet.vue +5 -12
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,17 @@
|
|
|
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.8.6](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@4.8.5...@kiva/kv-components@4.8.6) (2025-01-16)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* adjust modal position and remove scroll when visible ([af17714](https://github.com/kiva/kv-ui-elements/commit/af17714803c84ca2b4f3d9f1a9f7730303429530))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
6
17
|
## [4.8.5](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@4.8.4...@kiva/kv-components@4.8.5) (2025-01-10)
|
|
7
18
|
|
|
8
19
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div
|
|
3
3
|
v-if="visible"
|
|
4
|
-
class="tw-block lg:tw-mt-0 tw-
|
|
4
|
+
class="tw-block lg:tw-mt-0 tw-fixed tw-inset-0
|
|
5
5
|
tw-bg-black tw-transition-all md:tw-duration-150 tw-z-modal"
|
|
6
6
|
:class="{
|
|
7
7
|
'tw-bg-opacity-0 tw-delay-300': !open,
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
@click.self="closeSideSheet"
|
|
11
11
|
>
|
|
12
12
|
<div
|
|
13
|
-
class="tw-
|
|
13
|
+
class="tw-fixed tw-right-0 tw-transition-all tw-duration-300 tw-bg-white
|
|
14
14
|
tw-overflow-y-auto tw-p-2"
|
|
15
15
|
:class="{
|
|
16
16
|
'tw-w-0 tw-delay-200 tw-opacity-0': !open,
|
|
@@ -47,7 +47,8 @@
|
|
|
47
47
|
</button>
|
|
48
48
|
</div>
|
|
49
49
|
<div
|
|
50
|
-
class="tw-p-4 tw-overflow-y-auto tw-transition-opacity tw-duration-500 tw-delay-200
|
|
50
|
+
class="tw-p-4 tw-overflow-y-auto tw-transition-opacity tw-duration-500 tw-delay-200
|
|
51
|
+
tw-overscroll-y-contain"
|
|
51
52
|
:class="{
|
|
52
53
|
'tw-opacity-0': !open,
|
|
53
54
|
'tw-opacity-full': open,
|
|
@@ -119,18 +120,12 @@ export default {
|
|
|
119
120
|
const open = ref(false);
|
|
120
121
|
const initialStyles = ref({});
|
|
121
122
|
const modalStyles = ref({});
|
|
122
|
-
const userScrollPosition = ref(0);
|
|
123
123
|
|
|
124
124
|
const closeSideSheet = () => {
|
|
125
125
|
open.value = false;
|
|
126
126
|
kvTrackFunction.value(trackEventCategory.value, 'click', 'side-sheet-closed');
|
|
127
127
|
|
|
128
|
-
if (animationSourceElement.value
|
|
129
|
-
window.scrollTo({
|
|
130
|
-
top: userScrollPosition.value,
|
|
131
|
-
behavior: 'smooth',
|
|
132
|
-
});
|
|
133
|
-
|
|
128
|
+
if (animationSourceElement.value) {
|
|
134
129
|
modalStyles.value = {
|
|
135
130
|
...initialStyles.value,
|
|
136
131
|
transition: 'all 0.5s ease-in-out',
|
|
@@ -160,8 +155,6 @@ export default {
|
|
|
160
155
|
const height = rect?.height ?? 0;
|
|
161
156
|
|
|
162
157
|
if (top || left || width || height) {
|
|
163
|
-
userScrollPosition.value = window.scrollY ?? 0;
|
|
164
|
-
|
|
165
158
|
initialStyles.value = {
|
|
166
159
|
position: 'fixed',
|
|
167
160
|
top: `${top}px`,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kiva/kv-components",
|
|
3
|
-
"version": "4.8.
|
|
3
|
+
"version": "4.8.6",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -98,5 +98,5 @@
|
|
|
98
98
|
"peerDependencies": {
|
|
99
99
|
"vue": ">=3.0.0"
|
|
100
100
|
},
|
|
101
|
-
"gitHead": "
|
|
101
|
+
"gitHead": "205d010ba5569aee5146faeb28040dd8a0adebde"
|
|
102
102
|
}
|
package/vue/KvSideSheet.vue
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div
|
|
3
3
|
v-if="visible"
|
|
4
|
-
class="tw-block lg:tw-mt-0 tw-
|
|
4
|
+
class="tw-block lg:tw-mt-0 tw-fixed tw-inset-0
|
|
5
5
|
tw-bg-black tw-transition-all md:tw-duration-150 tw-z-modal"
|
|
6
6
|
:class="{
|
|
7
7
|
'tw-bg-opacity-0 tw-delay-300': !open,
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
@click.self="closeSideSheet"
|
|
11
11
|
>
|
|
12
12
|
<div
|
|
13
|
-
class="tw-
|
|
13
|
+
class="tw-fixed tw-right-0 tw-transition-all tw-duration-300 tw-bg-white
|
|
14
14
|
tw-overflow-y-auto tw-p-2"
|
|
15
15
|
:class="{
|
|
16
16
|
'tw-w-0 tw-delay-200 tw-opacity-0': !open,
|
|
@@ -47,7 +47,8 @@
|
|
|
47
47
|
</button>
|
|
48
48
|
</div>
|
|
49
49
|
<div
|
|
50
|
-
class="tw-p-4 tw-overflow-y-auto tw-transition-opacity tw-duration-500 tw-delay-200
|
|
50
|
+
class="tw-p-4 tw-overflow-y-auto tw-transition-opacity tw-duration-500 tw-delay-200
|
|
51
|
+
tw-overscroll-y-contain"
|
|
51
52
|
:class="{
|
|
52
53
|
'tw-opacity-0': !open,
|
|
53
54
|
'tw-opacity-full': open,
|
|
@@ -119,18 +120,12 @@ export default {
|
|
|
119
120
|
const open = ref(false);
|
|
120
121
|
const initialStyles = ref({});
|
|
121
122
|
const modalStyles = ref({});
|
|
122
|
-
const userScrollPosition = ref(0);
|
|
123
123
|
|
|
124
124
|
const closeSideSheet = () => {
|
|
125
125
|
open.value = false;
|
|
126
126
|
kvTrackFunction.value(trackEventCategory.value, 'click', 'side-sheet-closed');
|
|
127
127
|
|
|
128
|
-
if (animationSourceElement.value
|
|
129
|
-
window.scrollTo({
|
|
130
|
-
top: userScrollPosition.value,
|
|
131
|
-
behavior: 'smooth',
|
|
132
|
-
});
|
|
133
|
-
|
|
128
|
+
if (animationSourceElement.value) {
|
|
134
129
|
modalStyles.value = {
|
|
135
130
|
...initialStyles.value,
|
|
136
131
|
transition: 'all 0.5s ease-in-out',
|
|
@@ -160,8 +155,6 @@ export default {
|
|
|
160
155
|
const height = rect?.height ?? 0;
|
|
161
156
|
|
|
162
157
|
if (top || left || width || height) {
|
|
163
|
-
userScrollPosition.value = window.scrollY ?? 0;
|
|
164
|
-
|
|
165
158
|
initialStyles.value = {
|
|
166
159
|
position: 'fixed',
|
|
167
160
|
top: `${top}px`,
|