Extracted dropdown params to allow closing it when clicking inside buttons

Author: mpiorowski

docs/DROPDOWN.md

@@ -11,21 +11,34 @@ import { Dropdown } from "@mpiorowski/svelte-init";
 ```
 <script lang="ts">
   import { Button, Dropdown } from "@mpiorowski/svelte-init";
+
+  let isOpen = false;
 </script>
 
-<Dropdown position="left">
+<Dropdown
+    position="left"
+    {isOpen}
+    onClickOutside={() => {
+        isOpen = false;
+    }}
+>
   <svelte:fragment slot="button">
     <Button type="ghost">Dropdown</Button>
   </svelte:fragment>
   <svelte:fragment slot="content">
-    <div>
-      <p>[email protected]</p>
-      <p>[email protected]</p>
-    </div>
+    <button 
+        on:click={() => {
+            isOpen = false;
+        }}
+    >
+        [email protected]
+    </button>
   </svelte:fragment>
 </Dropdown>
 ```
 
-| Prop     | Values                    | Default |
-| -------- | ------------------------- | ------- |
-| position | `left`, `right`, `center` | right   |
+| Prop           | Values                    | Default   |
+| -------------- | ------------------------- | --------- |
+| isOpen         | `boolean`                 |           |
+| onClickOutside | () => void                | undefined |
+| position       | `left`, `right`, `center` | right     |

package.json

@@ -15,7 +15,7 @@
     },
     "homepage": "https://svelte-init.vercel.app",
     "license": "MIT",
-    "version": "1.5.6",
+    "version": "1.6.0",
     "type": "module",
     "scripts": {
         "start": "vite dev",

src/lib/components/dropdown.svelte

@@ -4,16 +4,15 @@
     import { fade } from 'svelte/transition';
 
     export let position: 'left' | 'right' | 'center' = 'right';
-    export let isOpen = false;
+    export let isOpen: boolean;
+    export let onClickOutside: () => void = () => {
+        return;
+    };
 </script>
 
 <!-- Dropdown button -->
-<div use:useClickOutside={() => (isOpen = false)} class="dropdown">
-    <div
-        class="dropdown-btn"
-        on:click={() => (isOpen = !isOpen)}
-        on:keypress={() => (isOpen = !isOpen)}
-    >
+<div use:useClickOutside={onClickOutside} class="dropdown">
+    <div class="dropdown-btn">
         <slot name="button" />
     </div>
     <!-- Dropdown content -->

src/routes/dropdown/+page.svelte

@@ -14,20 +14,44 @@
     ];
 
     let group: 'left' | 'right' = 'left';
+    let isOpen = false;
 </script>
 
 <div in:fade class="content">
     <h1>Dropdown</h1>
     <CheckboxGroup values={position} type="radio" bind:group />
 
-    <Dropdown position={group}>
+    <Dropdown
+        position={group}
+        {isOpen}
+        onClickOutside={() => {
+            isOpen = false;
+        }}
+    >
         <svelte:fragment slot="button">
-            <Button type="ghost">Dropdown</Button>
+            <Button
+                type="ghost"
+                on:click={() => {
+                    isOpen = !isOpen;
+                }}
+            >
+                Dropdown
+            </Button>
         </svelte:fragment>
         <svelte:fragment slot="content">
             <div>
                 <div class="email">[email protected]</div>
-                <div class="logout">Logout</div>
+                <div
+                    on:click={() => {
+                        isOpen = false;
+                    }}
+                    on:keypress={() => {
+                        isOpen = false;
+                    }}
+                    class="logout"
+                >
+                    Logout
+                </div>
             </div>
         </svelte:fragment>
     </Dropdown>