modal title slow

hyvor · Jan 1, 2024 · ff8357f · ff8357f
1 parent d8a4da9
commit ff8357f
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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,15 +102,17 @@
     .header {
         padding: 20px 25px;
         border-bottom: 1px solid var(--box-border);
-        font-size: 1.2em;
-        font-weight: 600;
         display: flex;
         align-items: center;
     }
 
     .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
@@ -6,13 +6,18 @@
     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;
 
     let show2 = false;
     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>