feat(tooltip): support disabling unmounted content

Author: dvcol

src/lib/floating/dialog/NeoDialog.svelte

@@ -142,6 +142,8 @@
 </dialog>
 
 <style lang="scss">
+  @use 'src/lib/styles/mixin' as mixin;
+
   .neo-dialog {
     margin: auto;
     padding: 0;
@@ -156,60 +158,12 @@
     }
 
     &.neo-fade {
-      opacity: 0;
-      transition: opacity, scale, display, overlay;
-      transition-timing-function: ease;
-      transition-duration: 0.2s;
-      transition-behavior: allow-discrete;
-      scale: 0.95;
+      @include mixin.fade-in($backdrop-color-end: --neo-dialog-backdrop-color, $backdrop-filter-end: --neo-dialog-backdrop-filter);
 
       &[data-modal='true'] {
         position: fixed;
         inset: 0;
       }
-
-      &::backdrop {
-        background: transparent;
-        backdrop-filter: blur(0);
-        transition:
-          background 0.4s,
-          backdrop-filter 0.4s,
-          display 0.2s,
-          overlay 0.2s;
-        transition-timing-function: ease;
-        transition-behavior: allow-discrete;
-      }
-
-      &[open] {
-        display: block;
-        opacity: 1;
-        transition-timing-function: ease-out;
-        transition-duration: 0.3s;
-        scale: 1;
-
-        &::backdrop {
-          background: var(--neo-dialog-backdrop-color, var(--neo-background-color-backdrop));
-          backdrop-filter: var(--neo-dialog-backdrop-filter, blur(2px));
-          transition:
-            background 0.4s,
-            backdrop-filter 0.4s,
-            display 0.3s,
-            overlay 0.3s;
-          transition-timing-function: ease-out;
-        }
-      }
-
-      @starting-style {
-        &[open] {
-          opacity: 0;
-          scale: 0.95;
-
-          &::backdrop {
-            background: transparent;
-            backdrop-filter: blur(0);
-          }
-        }
-      }
     }
   }
 

src/lib/floating/tooltips/NeoTooltip.svelte

@@ -13,7 +13,6 @@
     useInteractions,
     useRole,
   } from '@skeletonlabs/floating-ui-svelte';
-
   import { innerHeight, innerWidth } from 'svelte/reactivity/window';
   import { scale } from 'svelte/transition';
 
@@ -75,6 +74,10 @@
     closeOnDismiss = true,
     dismissOptions,
 
+    // Mounting
+    unmountOnClose = true,
+    fade = !unmountOnClose,
+
     // Events
     onChange,
     onOpen,
@@ -258,7 +261,6 @@
   $effect(() => addMethods(triggerRef));
 
   const computeSize = <T extends 'width' | 'height'>(value: NeoTooltipProps[T], dimension: T): SizeOption<T> | undefined => {
-    if (!open) return;
     const tSize = dimension === 'width' ? triggerRef?.offsetWidth : triggerRef?.offsetHeight;
     if (value === NeoTooltipSizeStrategy.Match) return { absolute: toPixel(tSize) };
     if (value === NeoTooltipSizeStrategy.Min) return { min: toPixel(tSize) };
@@ -283,6 +285,7 @@
       onChange?.(open);
       if (open) onOpen?.();
       else onClose?.();
+      if (!unmountOnClose && open) floating.update();
     },
     () => open,
     { skip: 1 },
@@ -303,11 +306,13 @@
   </svelte:element>
 {/if}
 
-{#if floating.open}
+{#if !unmountOnClose || floating.open}
   <svelte:element
     this={tag}
     bind:this={ref}
+    hidden={!floating.open}
     class:neo-tooltip={true}
+    class:neo-fade={fade}
     class:neo-rounded={rounded}
     class:neo-tinted={tinted}
     class:neo-filled={filled}
@@ -363,6 +368,27 @@
       max-height: inherit;
     }
 
+    &[hidden] {
+      display: none;
+    }
+
+    &.neo-fade {
+      @include mixin.fade-in(
+        $toggle: ':not([hidden])',
+
+        $enter-duration: 0.2s,
+        $exit-duration: 0.15s,
+
+        $enter-timing: ease-out,
+        $exit-timing: ease-out
+      );
+
+      &[data-modal='true'] {
+        position: fixed;
+        inset: 0;
+      }
+    }
+
     &.neo-borderless {
       --neo-tooltip-border-color: transparent;
     }

src/lib/floating/tooltips/neo-tooltip.model.ts

@@ -207,6 +207,21 @@ export type NeoTooltipProps = {
    */
   dismissOptions?: UseDismissOptions;
 
+  // Mounting
+
+  /**
+   * Whether to unmount the dialog content when closed.
+   *
+   * @default true
+   */
+  unmountOnClose?: boolean;
+  /**
+   * Whether to apply in/out transition with a fade effect.
+   *
+   * @default true
+   */
+  fade?: boolean;
+
   // Events
   /**
    * Event Handlers that fires on state change.

src/lib/styles/mixin.scss

@@ -410,3 +410,71 @@
     grid-area: $area;
   }
 }
+
+@mixin fade-in(
+  $toggle: [open],
+  $opacity-start: 0,
+  $opacity-end: 1,
+
+  $scale-start: 0.95,
+  $scale-end: 1,
+
+  $enter-duration: 0.3s,
+  $exit-duration: 0.2s,
+
+  $enter-timing: ease,
+  $exit-timing: ease-out,
+
+  $backdrop-color-start: transparent,
+  $backdrop-color-end: --neo-fade-in-backdrop-color,
+  $backdrop-filter-start: blur(0),
+  $backdrop-filter-end: --neo-fade-in-backdrop-filter
+) {
+  opacity: $opacity-start;
+  transition: opacity, scale, display, overlay;
+  transition-timing-function: $exit-timing;
+  transition-duration: $exit-duration;
+  transition-behavior: allow-discrete;
+  scale: $scale-start;
+
+  &::backdrop {
+    background: $backdrop-color-start;
+    backdrop-filter: $backdrop-filter-start;
+    transition:
+      backdrop-filter $exit-duration,
+      display $exit-duration,
+      overlay $exit-duration;
+    transition-timing-function: $exit-timing;
+    transition-behavior: allow-discrete;
+  }
+
+  &#{$toggle} {
+    display: block;
+    opacity: $opacity-end;
+    transition-timing-function: $enter-timing;
+    transition-duration: $enter-duration;
+    scale: $scale-end;
+
+    &::backdrop {
+      background: var($backdrop-color-end, var(--neo-background-color-backdrop));
+      backdrop-filter: var($backdrop-filter-end, blur(2px));
+      transition:
+        backdrop-filter $enter-duration,
+        display $enter-duration,
+        overlay $enter-duration;
+      transition-timing-function: $enter-timing;
+    }
+  }
+
+  @starting-style {
+    &#{$toggle} {
+      opacity: $opacity-start;
+      scale: $scale-start;
+
+      &::backdrop {
+        background: $backdrop-color-start;
+        backdrop-filter: $backdrop-filter-start;
+      }
+    }
+  }
+}