diff --git a/src/Collapse.svelte b/src/Collapse.svelte index 8f966899..294ce686 100644 --- a/src/Collapse.svelte +++ b/src/Collapse.svelte @@ -15,65 +15,63 @@ export let onEntered = () => dispatch('open'); export let onExiting = () => dispatch('closing'); export let onExited = () => dispatch('close'); - export let expand = false; export let toggler = null; + let transitioning = false; onMount(() => toggle(toggler, (e) => { - isOpen = !isOpen; - e.preventDefault(); + if (!transitioning) { + isOpen = !isOpen; + } })); $: classes = classnames(className, { 'collapse-horizontal': horizontal, - 'navbar-collapse': navbar + 'navbar-collapse': navbar, + 'd-none': !isOpen }); - let windowWidth = 0; - let _wasMaximized = false; - - // TODO wrong to hardcode these here - come from Bootstrap CSS only - const minWidth = {}; - minWidth['xs'] = 0; - minWidth['sm'] = 576; - minWidth['md'] = 768; - minWidth['lg'] = 992; - minWidth['xl'] = 1200; - function notify() { dispatch('update', isOpen); } + - $: if (navbar && expand) { - if (windowWidth >= minWidth[expand] && !isOpen) { - isOpen = true; - _wasMaximized = true; - notify(); - } else if (windowWidth < minWidth[expand] && _wasMaximized) { - isOpen = false; - _wasMaximized = false; - notify(); - } + function _onEntering(event) { + transitioning = true; + onEntering(event); + } + + function _onEntered(event) { + transitioning = false; + onEntered(event); + } + + function _onExiting(event) { + transitioning = true; + onExiting(event); + } + + function _onExited(event) { + transitioning = false; + onExited(event); } - - -{#if isOpen} +{#key isOpen}
-{/if} +{/key} diff --git a/src/Popover.svelte b/src/Popover.svelte index dc1a5b29..097bd17e 100644 --- a/src/Popover.svelte +++ b/src/Popover.svelte @@ -1,6 +1,6 @@