@makolabs/ripple 1.0.9 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/modal/Modal.svelte +45 -10
- package/package.json +1 -1
package/dist/modal/Modal.svelte
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
import { fade, scale } from 'svelte/transition';
|
|
3
3
|
import { quintOut } from 'svelte/easing';
|
|
4
|
+
import { cn } from '../helper/cls.js';
|
|
4
5
|
import { modal, type ModalProps } from './modal.js';
|
|
5
6
|
|
|
6
7
|
let {
|
|
@@ -21,6 +22,21 @@
|
|
|
21
22
|
}: ModalProps = $props();
|
|
22
23
|
|
|
23
24
|
const styles = $derived(modal({ size }));
|
|
25
|
+
|
|
26
|
+
const baseClass = $derived(cn(styles.base(), className));
|
|
27
|
+
const backdropClass = $derived(cn(styles.backdrop(), backdropClassName));
|
|
28
|
+
const containerClass = $derived(cn(styles.container(), contentClassName));
|
|
29
|
+
const headerClass = $derived(cn(styles.header(), headerClassName));
|
|
30
|
+
const titleClass = $derived(cn(styles.title(), titleClassName));
|
|
31
|
+
const bodyClass = $derived(cn(
|
|
32
|
+
'flex-1 px-6 overflow-y-auto',
|
|
33
|
+
// Adjust top padding based on header presence
|
|
34
|
+
title || description ? 'py-4' : 'pt-6 pb-4',
|
|
35
|
+
bodyClassName
|
|
36
|
+
));
|
|
37
|
+
const footerClass = $derived(cn(styles.footer(), ''));
|
|
38
|
+
const closeClass = $derived(cn(styles.close(), ''));
|
|
39
|
+
const descriptionClass = $derived(cn(styles.description(), ''));
|
|
24
40
|
|
|
25
41
|
function handleBackdropClick() {
|
|
26
42
|
onclose();
|
|
@@ -49,35 +65,35 @@
|
|
|
49
65
|
</script>
|
|
50
66
|
|
|
51
67
|
{#if open}
|
|
52
|
-
<div class=
|
|
68
|
+
<div class={baseClass} role="dialog" aria-modal="true">
|
|
53
69
|
<!-- Backdrop -->
|
|
54
70
|
<div
|
|
55
|
-
class=
|
|
71
|
+
class={backdropClass}
|
|
56
72
|
onclick={handleBackdropClick}
|
|
57
73
|
transition:fade={{ duration: 200 }}
|
|
58
74
|
role="presentation"></div>
|
|
59
75
|
|
|
60
76
|
<!-- Modal Container -->
|
|
61
77
|
<div
|
|
62
|
-
class=
|
|
78
|
+
class={containerClass}
|
|
63
79
|
transition:scale={{ duration: 200, easing: quintOut, start: 0.95 }}
|
|
64
80
|
>
|
|
65
81
|
<!-- Header -->
|
|
66
|
-
{#if title ||
|
|
67
|
-
<header class=
|
|
82
|
+
{#if title || description}
|
|
83
|
+
<header class={headerClass}>
|
|
68
84
|
<div class="flex-1">
|
|
69
85
|
{#if title}
|
|
70
|
-
<h2 class=
|
|
86
|
+
<h2 class={titleClass}>{title}</h2>
|
|
71
87
|
{/if}
|
|
72
88
|
{#if description}
|
|
73
|
-
<p class={
|
|
89
|
+
<p class={descriptionClass}>{description}</p>
|
|
74
90
|
{/if}
|
|
75
91
|
</div>
|
|
76
92
|
|
|
77
93
|
{#if !hideCloseButton}
|
|
78
94
|
<button
|
|
79
95
|
type="button"
|
|
80
|
-
class={
|
|
96
|
+
class={closeClass}
|
|
81
97
|
onclick={onclose}
|
|
82
98
|
aria-label="Close"
|
|
83
99
|
>
|
|
@@ -94,16 +110,35 @@
|
|
|
94
110
|
</header>
|
|
95
111
|
{/if}
|
|
96
112
|
|
|
113
|
+
<!-- Close button only (positioned absolutely when no header) -->
|
|
114
|
+
{#if !title && !description && !hideCloseButton}
|
|
115
|
+
<button
|
|
116
|
+
type="button"
|
|
117
|
+
class="absolute top-4 right-4 p-2 rounded-lg text-gray-400 hover:text-gray-600 hover:bg-gray-100 transition-colors z-10"
|
|
118
|
+
onclick={onclose}
|
|
119
|
+
aria-label="Close"
|
|
120
|
+
>
|
|
121
|
+
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
122
|
+
<path
|
|
123
|
+
d="M15 5L5 15M5 5L15 15"
|
|
124
|
+
stroke="currentColor"
|
|
125
|
+
stroke-width="2"
|
|
126
|
+
stroke-linecap="round"
|
|
127
|
+
/>
|
|
128
|
+
</svg>
|
|
129
|
+
</button>
|
|
130
|
+
{/if}
|
|
131
|
+
|
|
97
132
|
<!-- Body -->
|
|
98
133
|
{#if children}
|
|
99
|
-
<div class=
|
|
134
|
+
<div class={bodyClass}>
|
|
100
135
|
{@render children()}
|
|
101
136
|
</div>
|
|
102
137
|
{/if}
|
|
103
138
|
|
|
104
139
|
<!-- Footer -->
|
|
105
140
|
{#if footer}
|
|
106
|
-
<footer class={
|
|
141
|
+
<footer class={footerClass}>
|
|
107
142
|
{@render footer()}
|
|
108
143
|
</footer>
|
|
109
144
|
{/if}
|