From 7f260a8a8559fc8d2fe6a30edcbf7f7e3d62064f Mon Sep 17 00:00:00 2001
From: JulioHD <30412984+JulioHD@users.noreply.github.com>
Date: Fri, 4 Mar 2022 00:06:15 +0100
Subject: [PATCH 1/6] Fixed collapse animation behaviour in navbars

The component was having a short animation when opening a page with a navbar using it.
Also the transition between screen sizes was also animated (when using expand attribute).
This also fixes the hardcoded screen sizes and the corresponding pixels.
The component will no longer be removed and readded to the dom, when it's open state changes.
---
 src/Collapse.svelte | 65 +++++++++++++--------------------------------
 1 file changed, 19 insertions(+), 46 deletions(-)

diff --git a/src/Collapse.svelte b/src/Collapse.svelte
index 8f966899..0ec255be 100644
--- a/src/Collapse.svelte
+++ b/src/Collapse.svelte
@@ -15,7 +15,6 @@
   export let onEntered = () => dispatch('open');
   export let onExiting = () => dispatch('closing');
   export let onExited = () => dispatch('close');
-  export let expand = false;
   export let toggler = null;
 
   onMount(() => toggle(toggler, (e) => {
@@ -25,55 +24,29 @@
 
   $: 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();
-    }
-  }
 </script>
 
-<svelte:window bind:innerWidth={windowWidth} />
-
-{#if isOpen}
-  <div
-    style={navbar ? undefined : 'overflow: hidden;'}
-    {...$$restProps}
-    class={classes}
-    in:collapseIn={{ horizontal }}
-    out:collapseOut|local={{ horizontal }}
-    on:introstart
-    on:introend
-    on:outrostart
-    on:outroend
-    on:introstart={onEntering}
-    on:introend={onEntered}
-    on:outrostart={onExiting}
-    on:outroend={onExited}
-  >
-    <slot />
-  </div>
-{/if}
+<div
+  style={navbar ? undefined : 'overflow: hidden;'}
+  {...$$restProps}
+  class={classes}
+  in:collapseIn={{ horizontal }}
+  out:collapseOut|local={{ horizontal }}
+  on:introstart
+  on:introend
+  on:outrostart
+  on:outroend
+  on:introstart={onEntering}
+  on:introend={onEntered}
+  on:outrostart={onExiting}
+  on:outroend={onExited}
+>
+  <slot />
+</div>

From 3a2bd378b5dac39d817a8d6f67e90ad875cadc39 Mon Sep 17 00:00:00 2001
From: JulioHD <30412984+JulioHD@users.noreply.github.com>
Date: Fri, 4 Mar 2022 00:34:53 +0100
Subject: [PATCH 2/6] Fixed collapse animations not working

Animations work again and the collapse can't be triggered multiple times while still in transition, unless the isOpen attribute is directly manipulated.
The behaviour now mirrors bootstrap's js solution.
---
 src/Collapse.svelte | 70 ++++++++++++++++++++++++++++++---------------
 1 file changed, 47 insertions(+), 23 deletions(-)

diff --git a/src/Collapse.svelte b/src/Collapse.svelte
index 0ec255be..49a17fea 100644
--- a/src/Collapse.svelte
+++ b/src/Collapse.svelte
@@ -1,6 +1,6 @@
 <script>
-  import { createEventDispatcher, onMount } from 'svelte';
-  import { collapseIn, collapseOut } from './transitions';
+  import {createEventDispatcher, onMount} from 'svelte';
+  import {collapseIn, collapseOut} from './transitions';
   import classnames from './utils';
   import toggle from './toggle';
 
@@ -8,17 +8,38 @@
 
   export let isOpen = false;
   let className = '';
-  export { className as class };
+  export {className as class};
   export let horizontal = false;
   export let navbar = false;
-  export let onEntering = () => dispatch('opening');
-  export let onEntered = () => dispatch('open');
-  export let onExiting = () => dispatch('closing');
-  export let onExited = () => dispatch('close');
+  export let onEntering = () =>
+  {
+    transitioning = true;
+    dispatch('opening')
+  };
+  export let onEntered = () =>
+  {
+    transitioning = false;
+    dispatch('open')
+  };
+  export let onExiting = () =>
+  {
+    transitioning = true;
+    dispatch('closing')
+  };
+  export let onExited = () =>
+  {
+    transitioning = false;
+    dispatch('close')
+  };
   export let toggler = null;
+  let transitioning = false;
 
-  onMount(() => toggle(toggler, (e) => {
-    isOpen = !isOpen;
+  onMount(() => toggle(toggler, (e) =>
+  {
+    if(!transitioning)
+    {
+      isOpen = !isOpen;
+    }
     e.preventDefault();
   }));
 
@@ -28,25 +49,28 @@
     'd-none': !isOpen
   });
 
-  function notify() {
+  function notify()
+  {
     dispatch('update', isOpen);
   }
 </script>
 
+{#key isOpen}
 <div
-  style={navbar ? undefined : 'overflow: hidden;'}
-  {...$$restProps}
-  class={classes}
-  in:collapseIn={{ horizontal }}
-  out:collapseOut|local={{ horizontal }}
-  on:introstart
-  on:introend
-  on:outrostart
-  on:outroend
-  on:introstart={onEntering}
-  on:introend={onEntered}
-  on:outrostart={onExiting}
-  on:outroend={onExited}
+    style={navbar ? undefined : 'overflow: hidden;'}
+    {...$$restProps}
+    class={classes}
+    in:collapseIn={{ horizontal }}
+    out:collapseOut|local={{ horizontal }}
+    on:introstart
+    on:introend
+    on:outrostart
+    on:outroend
+    on:introstart={onEntering}
+    on:introend={onEntered}
+    on:outrostart={onExiting}
+    on:outroend={onExited}
 >
   <slot />
 </div>
+  {/key}

From ce5ab2e6cdf57b56b5d79f9a5ba2cf480b51b933 Mon Sep 17 00:00:00 2001
From: JulioHD <30412984+JulioHD@users.noreply.github.com>
Date: Fri, 4 Mar 2022 00:37:00 +0100
Subject: [PATCH 3/6] Fixed collapse's toggler not focusing when clicked

Also done some formatting
---
 src/Collapse.svelte | 37 ++++++++++++++++++-------------------
 1 file changed, 18 insertions(+), 19 deletions(-)

diff --git a/src/Collapse.svelte b/src/Collapse.svelte
index 49a17fea..3440a121 100644
--- a/src/Collapse.svelte
+++ b/src/Collapse.svelte
@@ -40,7 +40,6 @@
     {
       isOpen = !isOpen;
     }
-    e.preventDefault();
   }));
 
   $: classes = classnames(className, {
@@ -56,21 +55,21 @@
 </script>
 
 {#key isOpen}
-<div
-    style={navbar ? undefined : 'overflow: hidden;'}
-    {...$$restProps}
-    class={classes}
-    in:collapseIn={{ horizontal }}
-    out:collapseOut|local={{ horizontal }}
-    on:introstart
-    on:introend
-    on:outrostart
-    on:outroend
-    on:introstart={onEntering}
-    on:introend={onEntered}
-    on:outrostart={onExiting}
-    on:outroend={onExited}
->
-  <slot />
-</div>
-  {/key}
+  <div
+      style={navbar ? undefined : 'overflow: hidden;'}
+      {...$$restProps}
+      class={classes}
+      in:collapseIn={{ horizontal }}
+      out:collapseOut|local={{ horizontal }}
+      on:introstart
+      on:introend
+      on:outrostart
+      on:outroend
+      on:introstart={onEntering}
+      on:introend={onEntered}
+      on:outrostart={onExiting}
+      on:outroend={onExited}
+  >
+    <slot />
+  </div>
+{/key}

From efe10445d95fb649fb8a2c629eaa25106059490b Mon Sep 17 00:00:00 2001
From: JulioHD <30412984+JulioHD@users.noreply.github.com>
Date: Fri, 4 Mar 2022 00:52:20 +0100
Subject: [PATCH 4/6] Collapse component fix

With my previous commit it was possible to overwrite onEntering for example, causing transitioning not to be set.
Also I fixed some formatting
---
 src/Collapse.svelte | 63 ++++++++++++++++++++++++++-------------------
 1 file changed, 36 insertions(+), 27 deletions(-)

diff --git a/src/Collapse.svelte b/src/Collapse.svelte
index 3440a121..c711a90c 100644
--- a/src/Collapse.svelte
+++ b/src/Collapse.svelte
@@ -1,6 +1,6 @@
 <script>
-  import {createEventDispatcher, onMount} from 'svelte';
-  import {collapseIn, collapseOut} from './transitions';
+  import { createEventDispatcher, onMount } from 'svelte';
+  import { collapseIn, collapseOut } from './transitions';
   import classnames from './utils';
   import toggle from './toggle';
 
@@ -8,29 +8,13 @@
 
   export let isOpen = false;
   let className = '';
-  export {className as class};
+  export { className as class };
   export let horizontal = false;
   export let navbar = false;
-  export let onEntering = () =>
-  {
-    transitioning = true;
-    dispatch('opening')
-  };
-  export let onEntered = () =>
-  {
-    transitioning = false;
-    dispatch('open')
-  };
-  export let onExiting = () =>
-  {
-    transitioning = true;
-    dispatch('closing')
-  };
-  export let onExited = () =>
-  {
-    transitioning = false;
-    dispatch('close')
-  };
+  export let onEntering = () => dispatch('opening');
+  export let onEntered = () => dispatch('open');
+  export let onExiting = () => dispatch('closing');
+  export let onExited = () => dispatch('close');
   export let toggler = null;
   let transitioning = false;
 
@@ -52,6 +36,31 @@
   {
     dispatch('update', isOpen);
   }
+  
+
+  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);
+  }
 </script>
 
 {#key isOpen}
@@ -65,10 +74,10 @@
       on:introend
       on:outrostart
       on:outroend
-      on:introstart={onEntering}
-      on:introend={onEntered}
-      on:outrostart={onExiting}
-      on:outroend={onExited}
+      on:introstart={_onEntering}
+      on:introend={_onEntered}
+      on:outrostart={_onExiting}
+      on:outroend={_onExited}
   >
     <slot />
   </div>

From cadbed1cf443d71f7a1e0df86347cb097177444c Mon Sep 17 00:00:00 2001
From: JulioHD <30412984+JulioHD@users.noreply.github.com>
Date: Fri, 4 Mar 2022 00:55:38 +0100
Subject: [PATCH 5/6] Collapse.svelte formatting

---
 src/Collapse.svelte | 21 +++++++--------------
 1 file changed, 7 insertions(+), 14 deletions(-)

diff --git a/src/Collapse.svelte b/src/Collapse.svelte
index c711a90c..294ce686 100644
--- a/src/Collapse.svelte
+++ b/src/Collapse.svelte
@@ -18,10 +18,8 @@
   export let toggler = null;
   let transitioning = false;
 
-  onMount(() => toggle(toggler, (e) =>
-  {
-    if(!transitioning)
-    {
+  onMount(() => toggle(toggler, (e) => {
+    if (!transitioning) {
       isOpen = !isOpen;
     }
   }));
@@ -32,32 +30,27 @@
     'd-none': !isOpen
   });
 
-  function notify()
-  {
+  function notify() {
     dispatch('update', isOpen);
   }
   
 
-  function _onEntering(event)
-  {
+  function _onEntering(event) {
     transitioning = true;
     onEntering(event);
   }
   
-  function _onEntered(event)
-  {
+  function _onEntered(event) {
     transitioning = false;
     onEntered(event);
   }
   
-  function _onExiting(event)
-  {
+  function _onExiting(event) {
     transitioning = true;
     onExiting(event);
   }
   
-  function _onExited(event)
-  {
+  function _onExited(event) {
     transitioning = false;
     onExited(event);
   }

From 7f66dc110eac849d82ebb0065a418cde70eca12f Mon Sep 17 00:00:00 2001
From: Julio <30412984+JulioHD@users.noreply.github.com>
Date: Wed, 24 Aug 2022 12:14:53 +0200
Subject: [PATCH 6/6] Fix: error when starting with vite 3.0 - "Cannot use
 import statement outside a module" shouldn't happen any longer

---
 src/Popover.svelte | 4 ++--
 src/Tooltip.svelte | 4 ++--
 src/popper.js      | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

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 @@
 <script>
   import { onMount } from 'svelte';
-  import { createPopper } from '@popperjs/core/dist/esm/popper';
+  import { createPopper } from '@popperjs/core';
   import classnames from './utils';
   import InlineContainer from './InlineContainer.svelte';
   import Portal from './Portal.svelte';
@@ -134,4 +134,4 @@
       </div>
     </div>
   </svelte:component>
-{/if}
+{/if}
\ No newline at end of file
diff --git a/src/Tooltip.svelte b/src/Tooltip.svelte
index d7fb9eeb..cd342968 100644
--- a/src/Tooltip.svelte
+++ b/src/Tooltip.svelte
@@ -1,6 +1,6 @@
 <script>
   import { onDestroy, onMount } from 'svelte';
-  import { createPopper } from '@popperjs/core/dist/esm/popper';
+  import { createPopper } from '@popperjs/core';
   import classnames, { uuid } from './utils';
   import InlineContainer from './InlineContainer.svelte';
   import Portal from './Portal.svelte';
@@ -140,4 +140,4 @@
       </div>
     </div>
   </svelte:component>
-{/if}
+{/if}
\ No newline at end of file
diff --git a/src/popper.js b/src/popper.js
index 9f5f4eaf..db5427ff 100644
--- a/src/popper.js
+++ b/src/popper.js
@@ -1,4 +1,4 @@
-import { createPopper } from '@popperjs/core/dist/esm/popper';
+import { createPopper } from '@popperjs/core';
 
 // Code derived from https://github.com/bryanmylee/svelte-popperjs/blob/master/src/index.ts
 export function createPopperActions(initOptions) {
@@ -52,4 +52,4 @@ export function createPopperActions(initOptions) {
   };
 
   return [referenceAction, contentAction, () => popperInstance];
-}
+}
\ No newline at end of file