@redseed/redseed-ui-vue3 8.12.1 → 8.13.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/package.json
CHANGED
|
@@ -51,15 +51,32 @@ async function resetContentMaxHeight() {
|
|
|
51
51
|
contentRef.value.style.removeProperty('min-height')
|
|
52
52
|
}
|
|
53
53
|
|
|
54
|
+
// After open transition ends, remove inline min-height so h-auto handles dynamic content
|
|
55
|
+
function handleContentTransitionEnd(e) {
|
|
56
|
+
if (e.propertyName !== 'min-height' || !contentRef.value) return
|
|
57
|
+
|
|
58
|
+
if (isOpen.value) {
|
|
59
|
+
contentRef.value.style.removeProperty('min-height')
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
|
|
54
63
|
watchEffect(() => {
|
|
55
64
|
if (isOpen.value) {
|
|
56
65
|
setContentMaxHeight()
|
|
57
66
|
return
|
|
58
67
|
}
|
|
59
68
|
|
|
69
|
+
// Removing inline min-height after class change triggers the closing transition
|
|
60
70
|
resetContentMaxHeight()
|
|
61
71
|
})
|
|
62
72
|
|
|
73
|
+
// Before closing: synchronously set min-height to current height so closing transition has a start value
|
|
74
|
+
watch(isOpen, (open, wasOpen) => {
|
|
75
|
+
if (!open && wasOpen && contentRef.value) {
|
|
76
|
+
contentRef.value.style.minHeight = contentRef.value.offsetHeight + 'px'
|
|
77
|
+
}
|
|
78
|
+
}, { flush: 'sync' })
|
|
79
|
+
|
|
63
80
|
const canTeleportTrigger = ref(false)
|
|
64
81
|
const canTeleportContent = ref(false)
|
|
65
82
|
|
|
@@ -133,6 +150,7 @@ onMounted(() => {
|
|
|
133
150
|
'rsui-disclosure__content--open': isOpen,
|
|
134
151
|
}
|
|
135
152
|
]"
|
|
153
|
+
@transitionend="handleContentTransitionEnd"
|
|
136
154
|
>
|
|
137
155
|
<slot name="content"></slot>
|
|
138
156
|
</div>
|
|
@@ -15,6 +15,14 @@ const props = defineProps({
|
|
|
15
15
|
type: Boolean,
|
|
16
16
|
default: true,
|
|
17
17
|
},
|
|
18
|
+
headerPadded: {
|
|
19
|
+
type: Boolean,
|
|
20
|
+
default: false,
|
|
21
|
+
},
|
|
22
|
+
contentPadded: {
|
|
23
|
+
type: Boolean,
|
|
24
|
+
default: false,
|
|
25
|
+
},
|
|
18
26
|
showGap: {
|
|
19
27
|
type: Boolean,
|
|
20
28
|
default: true,
|
|
@@ -40,6 +48,8 @@ const variantClass = computed(() => [
|
|
|
40
48
|
{
|
|
41
49
|
'rsui-section--bordered': props.bordered,
|
|
42
50
|
'rsui-section--padded': props.padded,
|
|
51
|
+
'rsui-section--header-padded': props.headerPadded,
|
|
52
|
+
'rsui-section--content-padded': props.contentPadded,
|
|
43
53
|
'rsui-section--show-gap': showGapDelayed.value,
|
|
44
54
|
'rsui-section--primary': props.variant === 'primary',
|
|
45
55
|
'rsui-section--secondary': props.variant === 'secondary',
|