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