fix: duplicate backdrops

Author: mateothegreat

demo/src/lib/basic.ts

@@ -5,13 +5,7 @@ import Basic from "./basic.svelte";
 export const openBasic = (): ModalInstance<CustomBasicProps> => {
   return manager.open<CustomBasicProps>({
     component: Basic,
-    // backdrop: {
-    //   class: "custom-backdrop-class",
-    //   attributes: {
-    //     "data-where-am-i": "backdrop",
-    //     "data-my-component-name": "basic.svelte"
-    //   }
-    // },
+    backdrop: true,
     dialog: {
       attributes: {
         "data-where-am-i": "dialog",

src/lib/manager.ts

@@ -33,7 +33,8 @@ export class ModalManager {
     const instance = new ModalInstance<P>(config);
 
     instance.manager = this;
-
+    this.instances.set(instance.config.id, instance as ModalInstance<void>);
+    instance.index = this.instances.size;
     instance.overlay = mount<any, ModalProps<P>>(Modal, {
       target: document.body,
       props: {
@@ -42,8 +43,6 @@ export class ModalManager {
       }
     });
 
-    this.instances.set(instance.config.id, instance as ModalInstance<void>);
-    instance.index = this.instances.size;
     this.reorder();
 
     return instance;
@@ -112,7 +111,6 @@ export class ModalManager {
 
       // Set the last modal as top
       if (i === modals.length - 1) {
-        console.log("setting last modal as top", modal.config.id, modal.index);
         modal.top = true;
       } else {
         modal.top = false;

src/lib/modal.svelte

@@ -52,29 +52,31 @@
   }
 
   const backdrop = (
-    v: typeof instance.config.backdrop | boolean
-  ): { class?: string; attributes?: Record<string, string> } | false => {
-    if (typeof v === "object") {
-      return v;
-    } else if (typeof v === "boolean" && v) {
+    v: typeof instance.config.backdrop
+  ): { class?: string; attributes?: Record<string, string> } | null => {
+    console.log(typeof v, v);
+    if (typeof v === "undefined") {
       return {
         class: "modal-backdrop",
         attributes: {}
       };
-    } else if (v === false) {
-      return false;
-    } else {
+    }
+    if (typeof v === "boolean" && v === false) {
+      return null;
+    }
+    if (v === true) {
       return {
         class: "modal-backdrop",
         attributes: {}
       };
     }
+    return v as { class?: string; attributes?: Record<string, string> };
   };
 
   const backdropConfig = backdrop(instance.config.backdrop);
 </script>
 
-{#if backdropConfig && instance.manager.instances.size === 0}
+{#if backdropConfig && instance.index === 0}
   <div
     onmousedown={handleClick}
     id={instance.config.id}
@@ -101,10 +103,7 @@
       class={instance.config.dialog?.class}
       class:modal-content={true}
       {...instance.config.dialog?.attributes}>
-      {JSON.stringify(instance.config.dialog)}
-      <div class="dialog-wrapper">
-        <instance.config.component {instance} />
-      </div>
+      <instance.config.component {instance} />
     </div>
   </div>
 {:else}
@@ -126,8 +125,6 @@
         justify-content: center;
         align-items: center;
       ">
-    <div class="dialog-wrapper">
-      <instance.config.component {instance} />
-    </div>
+    <instance.config.component {instance} />
   </div>
 {/if}

src/lib/props.ts

@@ -2,4 +2,15 @@ import type { ModalInstance } from "./instance.svelte";
 
 export type ModalProps<P = void> = {
   instance: ModalInstance<P>;
+  dialog?: {
+    class?: string;
+    attributes?: Record<string, string>;
+  };
+  backdrop?:
+    | boolean
+    | null
+    | {
+        class?: string;
+        attributes?: Record<string, string>;
+      };
 };