@tak-ps/vue-tabler 5.0.0 → 5.1.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 +11 -0
- package/components/Slidedown.vue +26 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -10,6 +10,17 @@
|
|
|
10
10
|
|
|
11
11
|
## Version History
|
|
12
12
|
|
|
13
|
+
### Pending
|
|
14
|
+
|
|
15
|
+
### v5.1.0
|
|
16
|
+
|
|
17
|
+
- :bug: TablerSlidedown: `clickAnywhereExpand` no longer collapses an expanded slidedown - collapse is explicit via the arrow control (or opt-in via `clickAnywhereCollapse`)
|
|
18
|
+
|
|
19
|
+
### v5.0.1
|
|
20
|
+
|
|
21
|
+
- :bug: TablerSlidedown: reset wrapper scroll on expand so content focused while collapsed (ie autofocused inputs) cannot leave the top of the expanded content cut off
|
|
22
|
+
- :bug: TablerSlidedown: release the measured max-height once the expand transition completes so content that grows after expansion (async lists etc.) is not clipped
|
|
23
|
+
|
|
13
24
|
### v5.0.0
|
|
14
25
|
|
|
15
26
|
- :rocket: Remove `TablerList` as it used an outdated `window.std` requirement for fetching data
|
package/components/Slidedown.vue
CHANGED
|
@@ -74,8 +74,33 @@ function toggle() {
|
|
|
74
74
|
|
|
75
75
|
if (el) {
|
|
76
76
|
if (isExpanded.value) {
|
|
77
|
+
// The wrapper is overflow: hidden but can still be scrolled
|
|
78
|
+
// programmatically (ie by a browser focus() scrolling an input in
|
|
79
|
+
// the collapsed content into view) which would leave the top of
|
|
80
|
+
// the expanded content cut off
|
|
81
|
+
el.scrollTop = 0;
|
|
82
|
+
|
|
77
83
|
el.style.maxHeight = el.scrollHeight + 'px';
|
|
84
|
+
|
|
85
|
+
const release = (event: TransitionEvent) => {
|
|
86
|
+
if (event.target !== el) return;
|
|
87
|
+
el.removeEventListener('transitionend', release);
|
|
88
|
+
|
|
89
|
+
if (isExpanded.value) {
|
|
90
|
+
// Release the measured height so content that grows after
|
|
91
|
+
// expansion (async lists etc.) is not clipped
|
|
92
|
+
el.style.maxHeight = 'none';
|
|
93
|
+
el.scrollTop = 0;
|
|
94
|
+
}
|
|
95
|
+
};
|
|
96
|
+
|
|
97
|
+
el.addEventListener('transitionend', release);
|
|
78
98
|
} else {
|
|
99
|
+
// Re-fix the current height so the collapse can animate from it
|
|
100
|
+
// even if the max-height was released after expansion
|
|
101
|
+
el.style.maxHeight = el.scrollHeight + 'px';
|
|
102
|
+
void el.offsetHeight;
|
|
103
|
+
|
|
79
104
|
el.style.maxHeight = ''; // Reset to CSS default (0)
|
|
80
105
|
}
|
|
81
106
|
}
|
|
@@ -87,7 +112,7 @@ function handleClick(event: MouseEvent) {
|
|
|
87
112
|
if (el && el === event.target) return;
|
|
88
113
|
if (el && el.contains(event.target as Node)) return;
|
|
89
114
|
|
|
90
|
-
if (props.clickAnywhereExpand) {
|
|
115
|
+
if (props.clickAnywhereExpand && !isExpanded.value) {
|
|
91
116
|
toggle();
|
|
92
117
|
} else if (props.clickAnywhereCollapse && isExpanded.value) {
|
|
93
118
|
toggle();
|