From ff8357fd826e076f78479fefe0bc1acc0be83d2b Mon Sep 17 00:00:00 2001
From: SupunKavinda <supunkavinda1125@gmail.com>
Date: Mon, 1 Jan 2024 17:46:08 +0100
Subject: [PATCH] modal title slow

---
 CHANGELOG.md                          |  3 ++
 package.json                          |  2 +-
 src/lib/components/Modal/Modal.svelte | 12 ++++--
 src/routes/[[slug]]/docs/Modal.svelte | 60 +++++++++++++++++++++++++++
 4 files changed, 73 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ff34592f..60ccf293 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,6 @@
+## 0.0.32 - 2024-01-01
+- added Modal title slot
+
 ## 0.0.31 - 2024-01-01
 - added color picker
 
diff --git a/package.json b/package.json
index 6050ecf3..4f5dbd4c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@hyvor/design",
-	"version": "0.0.31",
+	"version": "0.0.32",
 	"license": "MIT",
 	"private": false,
 	"scripts": {
diff --git a/src/lib/components/Modal/Modal.svelte b/src/lib/components/Modal/Modal.svelte
index 593f3d36..0d5d928a 100644
--- a/src/lib/components/Modal/Modal.svelte
+++ b/src/lib/components/Modal/Modal.svelte
@@ -35,7 +35,11 @@
             <div class="header">
 
                 <div class="title">
-                    {title}
+                    {#if $$slots.title}
+                        <slot name="title" />
+                    {:else}
+                        <span>{title}</span>
+                    {/if}
                 </div>
 
                 <div class="close-wrap">
@@ -98,8 +102,6 @@
     .header {
         padding: 20px 25px;
         border-bottom: 1px solid var(--box-border);
-        font-size: 1.2em;
-        font-weight: 600;
         display: flex;
         align-items: center;
     }
@@ -107,6 +109,10 @@
     .title {
         flex: 1;
     }
+    .title span {
+        font-size: 1.2em;
+        font-weight: 600;
+    }
 
     .content {
         padding: 20px 25px;
diff --git a/src/routes/[[slug]]/docs/Modal.svelte b/src/routes/[[slug]]/docs/Modal.svelte
index 87b97ec6..97a1fc9f 100644
--- a/src/routes/[[slug]]/docs/Modal.svelte
+++ b/src/routes/[[slug]]/docs/Modal.svelte
@@ -6,6 +6,9 @@
     import CodeBlock from "./../../../lib/components/CodeBlock/CodeBlock.svelte";
     import CodeResult from "./Helper/CodeResult.svelte";
     import toast from './../../../lib/components/Toast/toast.js';
+    import TabNavItem from "../../../lib/components/TabNav/TabNavItem.svelte";
+    import { IconLink45deg, IconSearch } from "@hyvor/icons";
+  import TabNav from "../../../lib/components/TabNav/TabNav.svelte";
 
     let show1 = false;
 
@@ -13,6 +16,8 @@
     let show3 = false;
     let show4 = false;
 
+    let show5 = false;
+
 </script>
 
 <h1>Modal</h1>
@@ -191,4 +196,59 @@
         <Button variant="invisible" on:click={() => show4 = false}>Close</Button>
     </div>
 
+</Modal>
+
+<h3 id="slot">Title Slot</h3>
+
+<p>
+    You can use the <code>title</code> slot to customize the title of the modal.
+</p>
+
+<CodeBlock code={`
+    <Modal bind:show={show} size="large">
+
+        <TabNav active="paste" slot="title">
+            <TabNavItem name="paste">
+                <IconLink45deg slot="start" />
+                Paste Link
+            </TabNavItem>
+            <TabNavItem name="posts">
+                <IconSearch slot="start" />
+                Search Posts
+            </TabNavItem>
+        </TabNav>
+
+        This is a modal with a tab navigation in the title.
+
+        <div slot="footer">
+            <Button variant="invisible" on:click={() => show5 = false}>Close</Button>
+        </div>
+
+    </Modal>
+`} />
+
+
+<CodeResult style="display:flex;flex-direction:column;gap:6px;align-items:flex-start;">
+    <Button on:click={() => show5 = true}>Title Slot Modal</Button>
+</CodeResult>
+
+<Modal bind:show={show5} size="large">
+
+    <TabNav active="paste" slot="title">
+        <TabNavItem name="paste">
+            <IconLink45deg slot="start" />
+            Paste Link
+        </TabNavItem>
+        <TabNavItem name="posts">
+            <IconSearch slot="start" size={13} />
+            Search Posts
+        </TabNavItem>
+    </TabNav>
+    
+    This is a modal with a tab navigation in the title.
+
+    <div slot="footer">
+        <Button variant="invisible" on:click={() => show5 = false}>Close</Button>
+    </div>
+
 </Modal>
\ No newline at end of file