@makolabs/ripple 1.0.6 → 1.0.7
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 +19 -8
- package/dist/modal/modal.d.ts +1 -0
- package/package.json +1 -1
package/dist/modal/Modal.svelte
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import { fade, scale } from 'svelte/transition';
|
|
3
3
|
import { quintOut } from 'svelte/easing';
|
|
4
4
|
import { modal, type ModalProps } from './modal.js';
|
|
5
|
+
import { cn } from 'tailwind-variants';
|
|
5
6
|
|
|
6
7
|
let {
|
|
7
8
|
open = $bindable(false),
|
|
@@ -16,6 +17,7 @@
|
|
|
16
17
|
titleclass: titleClassName = '',
|
|
17
18
|
headerclass: headerClassName = '',
|
|
18
19
|
backdropclass: backdropClassName = '',
|
|
20
|
+
footerclass: footerClassName = '',
|
|
19
21
|
children,
|
|
20
22
|
footer
|
|
21
23
|
}: ModalProps = $props();
|
|
@@ -46,28 +48,37 @@
|
|
|
46
48
|
document.removeEventListener('keydown', handleKeydown);
|
|
47
49
|
};
|
|
48
50
|
});
|
|
51
|
+
|
|
52
|
+
const computedClassName = $derived(cn(styles.base(), className));
|
|
53
|
+
const computedBackdropClassName = $derived(cn(styles.backdrop(), backdropClassName));
|
|
54
|
+
const computedContentClassName = $derived(cn(styles.container(), contentClassName));
|
|
55
|
+
const computedHeaderClassName = $derived(cn(styles.header(), headerClassName));
|
|
56
|
+
const computedBodyClassName = $derived(cn(styles.body(), bodyClassName));
|
|
57
|
+
const computedTitleClassName = $derived(cn(styles.title(), titleClassName));
|
|
58
|
+
const computedCloseClassName = $derived(cn(styles.close(), ''));
|
|
59
|
+
const computedFooterClassName = $derived(cn(styles.footer(), 'mt-auto', footerClassName));
|
|
49
60
|
</script>
|
|
50
61
|
|
|
51
62
|
{#if open}
|
|
52
|
-
<div class=
|
|
63
|
+
<div class={computedClassName} role="dialog" aria-modal="true">
|
|
53
64
|
<!-- Backdrop -->
|
|
54
65
|
<div
|
|
55
|
-
class=
|
|
66
|
+
class={computedBackdropClassName}
|
|
56
67
|
onclick={handleBackdropClick}
|
|
57
68
|
transition:fade={{ duration: 200 }}
|
|
58
69
|
role="presentation"></div>
|
|
59
70
|
|
|
60
71
|
<!-- Modal Container -->
|
|
61
72
|
<div
|
|
62
|
-
class=
|
|
73
|
+
class={computedContentClassName}
|
|
63
74
|
transition:scale={{ duration: 200, easing: quintOut, start: 0.95 }}
|
|
64
75
|
>
|
|
65
76
|
<!-- Header -->
|
|
66
77
|
{#if title || !hideCloseButton}
|
|
67
|
-
<header class=
|
|
78
|
+
<header class={computedHeaderClassName}>
|
|
68
79
|
<div class="flex-1">
|
|
69
80
|
{#if title}
|
|
70
|
-
<h2 class=
|
|
81
|
+
<h2 class={computedTitleClassName}>{title}</h2>
|
|
71
82
|
{/if}
|
|
72
83
|
{#if description}
|
|
73
84
|
<p class={styles.description()}>{description}</p>
|
|
@@ -77,7 +88,7 @@
|
|
|
77
88
|
{#if !hideCloseButton}
|
|
78
89
|
<button
|
|
79
90
|
type="button"
|
|
80
|
-
class={
|
|
91
|
+
class={computedCloseClassName}
|
|
81
92
|
onclick={onclose}
|
|
82
93
|
aria-label="Close"
|
|
83
94
|
>
|
|
@@ -96,14 +107,14 @@
|
|
|
96
107
|
|
|
97
108
|
<!-- Body -->
|
|
98
109
|
{#if children}
|
|
99
|
-
<div class=
|
|
110
|
+
<div class={computedBodyClassName}>
|
|
100
111
|
{@render children()}
|
|
101
112
|
</div>
|
|
102
113
|
{/if}
|
|
103
114
|
|
|
104
115
|
<!-- Footer -->
|
|
105
116
|
{#if footer}
|
|
106
|
-
<footer class={
|
|
117
|
+
<footer class={computedFooterClassName}>
|
|
107
118
|
{@render footer()}
|
|
108
119
|
</footer>
|
|
109
120
|
{/if}
|
package/dist/modal/modal.d.ts
CHANGED