|
@@ -1,21 +1,19 @@
|
|
<script lang="ts">
|
|
<script lang="ts">
|
|
- import { afterUpdate } from 'svelte';
|
|
|
|
-
|
|
|
|
export let open = false;
|
|
export let open = false;
|
|
export let className = '';
|
|
export let className = '';
|
|
|
|
|
|
// Manage the max-height of the collapsible content for snappy transitions
|
|
// Manage the max-height of the collapsible content for snappy transitions
|
|
let contentElement: HTMLElement;
|
|
let contentElement: HTMLElement;
|
|
let maxHeight = '0px'; // Initial max-height
|
|
let maxHeight = '0px'; // Initial max-height
|
|
- // After any state update, adjust the max-height for the transition
|
|
|
|
- afterUpdate(() => {
|
|
|
|
|
|
+
|
|
|
|
+ $: if (contentElement?.scrollHeight) {
|
|
if (open) {
|
|
if (open) {
|
|
// Ensure the element is visible before measuring
|
|
// Ensure the element is visible before measuring
|
|
maxHeight = `${contentElement.scrollHeight}px`;
|
|
maxHeight = `${contentElement.scrollHeight}px`;
|
|
} else {
|
|
} else {
|
|
maxHeight = '0px';
|
|
maxHeight = '0px';
|
|
}
|
|
}
|
|
- });
|
|
|
|
|
|
+ }
|
|
</script>
|
|
</script>
|
|
|
|
|
|
<div class={className}>
|
|
<div class={className}>
|