From 07b3dcc58c45820967ce58621559c9f07c0b553d Mon Sep 17 00:00:00 2001
From: bestguy <7zark7@gmail.com>
Date: Mon, 7 Jun 2021 07:50:15 -0700
Subject: [PATCH] Update Fade

---
 src/Fade.d.ts                    |  1 +
 src/Fade.svelte                  | 44 ++++++++++++++++++--------------
 stories/Example.svelte           |  2 +-
 stories/fade/Index.svelte        |  9 +++++++
 stories/fade/RenderClosed.svelte | 13 ++++++++++
 5 files changed, 49 insertions(+), 20 deletions(-)
 create mode 100644 stories/fade/RenderClosed.svelte

diff --git a/src/Fade.d.ts b/src/Fade.d.ts
index 954ed4ed..261288b5 100644
--- a/src/Fade.d.ts
+++ b/src/Fade.d.ts
@@ -7,6 +7,7 @@ export interface FadeProps
   onEntered?: () => void;
   onExiting?: () => void;
   onExited?: () => void;
+  renderWhenClosed?: boolean;
   toggler?: string;
 }
 
diff --git a/src/Fade.svelte b/src/Fade.svelte
index c65b340c..ec1142a5 100644
--- a/src/Fade.svelte
+++ b/src/Fade.svelte
@@ -1,35 +1,41 @@
 <script>
   import { createEventDispatcher, onMount } from 'svelte';
-  import { fade } from 'svelte/transition';
   import toggle from './toggle';
+  import classnames from './utils';
 
   const dispatch = createEventDispatcher();
-
+  
   export let isOpen = false;
   let className = '';
   export { className as class };
-  export let onEntering = () => dispatch('opening');
+  export let onEntering = () => {
+    show = true;
+    dispatch('opening');
+  };
   export let onEntered = () => dispatch('open');
   export let onExiting = () => dispatch('closing');
-  export let onExited = () => dispatch('close');
+  export let onExited = () => {
+    show = false;
+    dispatch('close');
+  };
+  export let renderWhenClosed = false;
   export let toggler = null;
 
+  let show = false;
+
   onMount(() => toggle(toggler, () => isOpen = !isOpen));
+
+  $: classes = classnames('fade', className, { show: isOpen })
 </script>
 
-{#if isOpen}
-  <div
-    {...$$restProps}
-    transition:fade|local
-    on:introstart
-    on:introend
-    on:outrostart
-    on:outroend
-    on:introstart={onEntering}
-    on:introend={onEntered}
-    on:outrostart={onExiting}
-    on:outroend={onExited}
-    class={className}>
+<div
+  {...$$restProps}
+  on:transitionstart={() => isOpen ? onEntering() : onExiting()}
+  on:transitionend={() => isOpen ? onEntered() : onExited()}
+  class={classes}>
+  {#if renderWhenClosed}
     <slot />
-  </div>
-{/if}
+  {:else if isOpen || show}
+      <slot />
+  {/if}
+</div>
diff --git a/stories/Example.svelte b/stories/Example.svelte
index b00efc35..c6221d2a 100644
--- a/stories/Example.svelte
+++ b/stories/Example.svelte
@@ -4,7 +4,7 @@
 
   export let stacked: boolean = false;
   export let source: any;
-  export let title: any;
+  export let title: any = undefined;
 </script>
 
 <div class="py-3">
diff --git a/stories/fade/Index.svelte b/stories/fade/Index.svelte
index 7e3aa053..d2cb7f30 100644
--- a/stories/fade/Index.svelte
+++ b/stories/fade/Index.svelte
@@ -2,6 +2,8 @@
   import Example from '../Example.svelte';
   import Events from './Events.svelte';
   import eventsSource from '!!raw-loader!./Events.svelte';
+  import RenderClosed from './RenderClosed.svelte';
+  import renderClosedSource from '!!raw-loader!./RenderClosed.svelte';
   import Sample from './Sample.svelte';
   import sampleSource from '!!raw-loader!./Sample.svelte';
   import Uncontrolled from './Uncontrolled.svelte';
@@ -15,6 +17,13 @@ Carousels, ListGroups, Modals, and Navs.
   <Sample />
 </Example>
 
+<Example title="Render when closed" source={renderClosedSource}>
+  <p slot="info">
+    Use the <code>renderWhenClosed</code> prop for to keep Fade content slot in DOM when closed.
+  </p>
+  <RenderClosed />
+</Example>
+
 <Example title="Events" source={eventsSource}>
   <p slot="info">
     Use the on:opening, on:open, on:closing and on:close props for
diff --git a/stories/fade/RenderClosed.svelte b/stories/fade/RenderClosed.svelte
new file mode 100644
index 00000000..402d5744
--- /dev/null
+++ b/stories/fade/RenderClosed.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { Fade, Button, Card } from 'sveltestrap';
+  let isOpen = false;
+</script>
+
+<Button color="primary" on:click={() => (isOpen = !isOpen)} class="mb-3">
+  Toggle
+</Button>
+<Fade {isOpen} renderWhenClosed>
+  <Card body>
+    I've been here the whole time.
+  </Card>
+</Fade>