api page

Author: mattjennings

src/lib/store.d.ts

@@ -3,12 +3,17 @@ import { SvelteComponentDev } from 'svelte/internal'
 import { Writable } from 'svelte/store'
 
 /**
- * Adds a Modal component to the stack
+ * Opens a new modal
  */
 export const openModal: <T>(
   component: SvelteComponent | SvelteComponentTyped<T> | SvelteComponentDev,
   props?: T,
-  options?: { replace?: boolean }
+  options?: {
+    /**
+     * This modal will replace the last modal in the stack
+     */
+    replace?: boolean
+  }
 ) => void
 
 /**
@@ -37,9 +42,7 @@ export const stack: Writable<Array<{ component: SvelteComponent; props?: unknown
 export const transitioning: Writable<null | 'in' | 'out'>
 
 /**
- * A store describing how the current modal came to be active. "push" means it was
- * newly added (from openModal), "pop" means the modal ahead of it was closed (closeModal).
- *
- * This can be useful for animations
+ * A Svelte store describing how the current modal came to be active ("push" or "pop").
+ * This can be useful for transitions if they should animate differently based on the action.
  */
 export const action: Writable<null | 'push' | 'pop'>

src/routes/_components/Sidebar.svelte

@@ -32,11 +32,12 @@
 
       <div class="mt-5 flex-1 h-0 overflow-y-auto">
         <nav class="px-2 space-y-1">
-          <a href="/" class:active={$page.path === '/'}>Getting Started</a>
+          <a href="/" class:active={$page.path === '/'}>Intro</a>
           <a href="/stacking-modals" class:active={$page.path === '/stacking-modals'}
             >Stacking Modals</a
           >
           <a href="/animation" class:active={$page.path === '/animation'}>Animation</a>
+          <a href="/api" class:active={$page.path === '/api'}>API</a>
         </nav>
       </div>
     </div>
@@ -54,11 +55,12 @@
     <div class="border-r border-gray-200  pb-4 flex flex-col flex-grow overflow-y-auto">
       <div class="flex-grow mt-5 flex flex-col">
         <nav class="flex-1 bg-white px-2 space-y-1">
-          <a href="/" class:active={$page.path === '/'}>Getting Started</a>
+          <a href="/" class:active={$page.path === '/'}>Intro</a>
           <a href="/stacking-modals" class:active={$page.path === '/stacking-modals'}
             >Stacking Modals</a
           >
           <a href="/animation" class:active={$page.path === '/animation'}>Animation</a>
+          <a href="/api" class:active={$page.path === '/api'}>API</a>
         </nav>
       </div>
     </div>

src/routes/animation/index.md

@@ -12,7 +12,7 @@
   }
 </script>
 
-## Animations
+# Animations
 
 You can use Svelte transitions just like you would any other component.
 

src/routes/api.md

@@ -0,0 +1,126 @@
+# API
+
+<style>
+h2 {
+  @apply border-b-2 pb-2 border-gray-200;
+}
+</style>
+
+## ModalStack
+
+Handles the rendering of your modals in the stack
+
+### Slots
+
+#### `backdrop`
+
+Renders when any modals are open. The slot is empty by default.
+
+```svelte
+<script>
+  import { ModalStack, closeModal } from 'svelte-modal-stack'
+</script>
+
+<ModalStack>
+  <div
+    slot="backdrop"
+    class="backdrop"
+    on:click={closeModal}
+  />
+</ModalStack>
+
+<style>
+  .backdrop {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    background: rgba(0, 0, 0, 0.5);
+}
+</style>
+```
+
+<br />
+
+#### `modals`
+
+Renders all modals in the stack. If you want to take over how they're rendered yourself, you can
+do so here.
+
+```svelte
+<script>
+  import { ModalStack, stack } from 'svelte-modal-stack'
+</script>
+
+<ModalStack>
+  <slot name="modals">
+    {#each $stack as modal, i (i)}
+      <svelte:component
+        this={modal.component}
+        isOpen={i === $stack.length - 1}
+        {...modal.props || {}}
+      />
+    {/each}
+  </slot>
+</ModalStack>
+```
+
+## openModal
+
+Opens a new modal
+
+```js
+import { openModal } from 'svelte-modal-stack'
+
+openModal(component, props, options)
+```
+
+| Param           | Type                         | Required | Description                                         |
+| --------------- | ---------------------------- | -------- | --------------------------------------------------- |
+| component       | <code>SvelteComponent</code> | Yes      | Your Svelte modal component                         |
+| props           | <code>any</code>             | No       | Props for the modal                                 |
+| options         | <code>object</code>          | No       |                                                     |
+| options.replace | <code>boolean</code>         | No       | This modal will replace the last modal in the stack |
+
+## closeModal
+
+Closes the last modal in the stack
+
+```js
+import { closeModal } from 'svelte-modal-stack'
+
+closeModal()
+```
+
+## closeModals
+
+Closes the provided amount of modals
+
+```js
+import { closeModals } from 'svelte-modal-stack'
+
+closeModals(2)
+```
+
+| Param  | Type                | Required | Description                   |
+| ------ | ------------------- | -------- | ----------------------------- |
+| amount | <code>number</code> | Yes      | The number of modals to close |
+
+## closeAllModals
+
+Closes all modals in the stack
+
+```js
+import { closeAllModals } from 'svelte-modal-stack'
+
+closeAllModals()
+```
+
+## stack
+
+A Svelte store containing the modal components and their props
+
+## action
+
+A Svelte store describing how the current modal came to be active ("push" or "pop"). This can be useful for transitions if they should animate differently based on the action.

src/routes/index.md

@@ -6,12 +6,14 @@
 
 # svelte-modal-stack
 
+A simple, flexible, zero-dependency modal stack manager for Svelte.
+
+## Getting Started
+
 ```
 npm install svelte-modal-stack
 ```
 
-## Basic Usage
-
 Add `ModalStack` at the root of your app (or in your \_\_layout if using SvelteKit)
 
 ```svelte