modal-docs

Author: mpiorowski

README.md

@@ -45,6 +45,7 @@ document.body.style.setProperty()
 -   [CheckboxGroup](https://github.com/mpiorowski/svelte-init/blob/main/docs/CHECKBOX-GROUP.md)
 -   [Toast](https://github.com/mpiorowski/svelte-init/blob/main/docs/TOAST.md)
 -   [Drawer](https://github.com/mpiorowski/svelte-init/blob/main/docs/DRAWER.md)
+-   [Modal](https://github.com/mpiorowski/svelte-init/blob/main/docs/MODAL.md)
 -   [Dropdown](https://github.com/mpiorowski/svelte-init/blob/main/docs/DROPDOWN.md)
 -   [Tooltip](https://github.com/mpiorowski/svelte-init/blob/main/docs/TOOLTIP.md)
 -   [Table](https://github.com/mpiorowski/svelte-init/blob/main/docs/TABLE.md)

docs/MODAL.md

@@ -0,0 +1,65 @@
+### [Go back](https://github.com/mpiorowski/svelte-init#components)
+
+# Modal
+
+```
+import { Modal } from "@mpiorowski/svelte-init";
+```
+
+# Usage
+
+```
+<script lang="ts">
+    import { Button, Modal } from "@mpiorowski/svelte-init";
+
+    let isOpen = false;
+    let size: 'sm' | 'md' | 'lg' = 'md';
+</script>
+
+<Modal {isOpen} onClose={() => (isOpen = false)} {size}>
+    <svelte:fragment slot="content">
+        <h2>Modal</h2>
+        <p>Modal content</p>
+    </svelte:fragment>
+    <svelte:fragment slot="footer">
+        <Button on:click={() => (isOpen = false)} type="ghost">
+            Close
+        </Button>
+        <Button on:click={() => (isOpen = false)}>Submit</Button>
+    </svelte:fragment>
+    <div>Modal</div>
+</Modal>
+
+<Button on:click={() => (isOpen = true)}>Open modal</Button>
+```
+
+# Confirmation Modal
+
+```
+import { Confirmation } from "@mpiorowski/svelte-init";
+```
+
+# Usage
+
+```
+<script lang="ts">
+    import { Confirmation } from "@mpiorowski/svelte-init";
+</script>
+
+<Confirmation
+    {size}
+    action={() => {
+        alert('Confirmed');
+    }}
+    actionBtn="primary"
+    cancelText="Cancel"
+    confirmBtn="error"
+    confirmText="Confirm"
+>
+    <svelte:fragment slot="button">Open confirmation modal</svelte:fragment>
+    <svelte:fragment slot="content">
+        <h2>Confirmation</h2>
+        <p>Do you really want to delete this item?</p>
+    </svelte:fragment>
+</Confirmation>
+```

package.json

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

src/lib/components/modal/confirmation.modal.svelte

@@ -3,7 +3,7 @@
 
     export let size: 'sm' | 'md' | 'lg' = 'md';
     export let actionBtn: 'primary' | 'ghost' | 'error' = 'error';
-    export let confirmBtm: 'primary' | 'ghost' | 'error' = 'error';
+    export let confirmBtn: 'primary' | 'ghost' | 'error' = 'error';
     export let action: () => Promise<void> | void;
     export let confirmText = 'Confirm';
     export let cancelText = 'Cancel';
@@ -31,7 +31,7 @@
                 loading = false;
                 isOpen = false;
             }}
-            type={confirmBtm}
+            type={confirmBtn}
             {loading}
         >
             {confirmText}

src/routes/modal/+page.svelte

@@ -34,13 +34,15 @@
         action={() => {
             alert('Confirmed');
         }}
+        actionBtn="primary"
+        cancelText="Cancel"
+        confirmBtn="error"
+        confirmText="Confirm"
     >
-    <svelte:fragment slot="button">
-        Open confirmation modal
-    </svelte:fragment>
-    <svelte:fragment slot="content">
-        <h2>Confirmation</h2>
-        <p>Confirmation content</p>
-    </svelte:fragment>
+        <svelte:fragment slot="button">Open confirmation modal</svelte:fragment>
+        <svelte:fragment slot="content">
+            <h2>Confirmation</h2>
+            <p>Confirmation content</p>
+        </svelte:fragment>
     </Confirmation>
 </div>