@makolabs/ripple 1.2.0 → 1.2.2
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/index.d.ts
CHANGED
|
@@ -48,7 +48,24 @@ export type AnchorHTMLProps = {
|
|
|
48
48
|
href: string;
|
|
49
49
|
} & Record<string, unknown>;
|
|
50
50
|
export type ButtonProps = BaseButtonProps & (ButtonHTMLProps | AnchorHTMLProps);
|
|
51
|
-
export type
|
|
51
|
+
export type ModalProps = {
|
|
52
|
+
open?: boolean;
|
|
53
|
+
onclose?: () => void;
|
|
54
|
+
title?: string;
|
|
55
|
+
description?: string;
|
|
56
|
+
size?: VariantSizes;
|
|
57
|
+
hideCloseButton?: boolean;
|
|
58
|
+
class?: string;
|
|
59
|
+
contentclass?: string;
|
|
60
|
+
bodyclass?: string;
|
|
61
|
+
titleclass?: string;
|
|
62
|
+
headerclass?: string;
|
|
63
|
+
backdropclass?: string;
|
|
64
|
+
footerclass?: string;
|
|
65
|
+
children?: Snippet;
|
|
66
|
+
footer?: Snippet;
|
|
67
|
+
header?: Snippet;
|
|
68
|
+
};
|
|
52
69
|
export type DrawerProps = {
|
|
53
70
|
open?: boolean;
|
|
54
71
|
onclose?: () => void;
|
package/dist/modal/Modal.svelte
CHANGED
|
@@ -2,8 +2,9 @@
|
|
|
2
2
|
import { fade, scale } from 'svelte/transition';
|
|
3
3
|
import { quintOut } from 'svelte/easing';
|
|
4
4
|
import { cn } from '../helper/cls.js';
|
|
5
|
-
import { modal
|
|
6
|
-
|
|
5
|
+
import { modal } from './modal.js';
|
|
6
|
+
import type { ModalProps } from '../index.js';
|
|
7
|
+
|
|
7
8
|
let {
|
|
8
9
|
open = $bindable(false),
|
|
9
10
|
onclose = () => {},
|
|
@@ -18,7 +19,8 @@
|
|
|
18
19
|
headerclass: headerClassName = '',
|
|
19
20
|
backdropclass: backdropClassName = '',
|
|
20
21
|
children,
|
|
21
|
-
footer
|
|
22
|
+
footer,
|
|
23
|
+
header
|
|
22
24
|
}: ModalProps = $props();
|
|
23
25
|
|
|
24
26
|
const styles = $derived(modal({ size }));
|
|
@@ -28,26 +30,28 @@
|
|
|
28
30
|
const containerClass = $derived(cn(styles.container(), contentClassName));
|
|
29
31
|
const headerClass = $derived(cn(styles.header(), headerClassName));
|
|
30
32
|
const titleClass = $derived(cn(styles.title(), titleClassName));
|
|
31
|
-
const bodyClass = $derived(
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
33
|
+
const bodyClass = $derived(
|
|
34
|
+
cn(
|
|
35
|
+
'flex-1 px-6 overflow-y-auto',
|
|
36
|
+
// Adjust top padding based on header presence
|
|
37
|
+
title || description ? 'py-4' : 'pt-6 pb-4',
|
|
38
|
+
bodyClassName
|
|
39
|
+
)
|
|
40
|
+
);
|
|
37
41
|
const footerClass = $derived(cn(styles.footer(), ''));
|
|
38
42
|
const closeClass = $derived(cn(styles.close(), ''));
|
|
39
43
|
const descriptionClass = $derived(cn(styles.description(), ''));
|
|
40
|
-
|
|
44
|
+
|
|
41
45
|
function handleBackdropClick() {
|
|
42
46
|
onclose();
|
|
43
47
|
}
|
|
44
|
-
|
|
48
|
+
|
|
45
49
|
function handleKeydown(e: KeyboardEvent) {
|
|
46
50
|
if (e.key === 'Escape' && open) {
|
|
47
51
|
onclose();
|
|
48
52
|
}
|
|
49
53
|
}
|
|
50
|
-
|
|
54
|
+
|
|
51
55
|
$effect(() => {
|
|
52
56
|
if (open) {
|
|
53
57
|
document.body.style.overflow = 'hidden';
|
|
@@ -56,7 +60,7 @@
|
|
|
56
60
|
document.body.style.overflow = '';
|
|
57
61
|
document.removeEventListener('keydown', handleKeydown);
|
|
58
62
|
}
|
|
59
|
-
|
|
63
|
+
|
|
60
64
|
return () => {
|
|
61
65
|
document.body.style.overflow = '';
|
|
62
66
|
document.removeEventListener('keydown', handleKeydown);
|
|
@@ -64,78 +68,76 @@
|
|
|
64
68
|
});
|
|
65
69
|
</script>
|
|
66
70
|
|
|
71
|
+
{#snippet predefinedHeader()}
|
|
72
|
+
{#if title || description}
|
|
73
|
+
<header class={headerClass}>
|
|
74
|
+
<div class="flex-1">
|
|
75
|
+
{#if title}
|
|
76
|
+
<h2 class={titleClass}>{title}</h2>
|
|
77
|
+
{/if}
|
|
78
|
+
</div>
|
|
79
|
+
{#if !hideCloseButton}
|
|
80
|
+
<button type="button" class={closeClass} onclick={onclose} aria-label="Close">
|
|
81
|
+
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
82
|
+
<path
|
|
83
|
+
d="M15 5L5 15M5 5L15 15"
|
|
84
|
+
stroke="currentColor"
|
|
85
|
+
stroke-width="2"
|
|
86
|
+
stroke-linecap="round"
|
|
87
|
+
/>
|
|
88
|
+
</svg>
|
|
89
|
+
</button>
|
|
90
|
+
{/if}
|
|
91
|
+
</header>
|
|
92
|
+
|
|
93
|
+
{/if}
|
|
94
|
+
|
|
95
|
+
<!-- Close button only (positioned absolutely when no header) -->
|
|
96
|
+
{#if !title && !description && !hideCloseButton}
|
|
97
|
+
<button
|
|
98
|
+
type="button"
|
|
99
|
+
class="absolute top-4 right-4 z-10 rounded-lg p-2 text-gray-400 transition-colors hover:bg-gray-100 hover:text-gray-600"
|
|
100
|
+
onclick={onclose}
|
|
101
|
+
aria-label="Close"
|
|
102
|
+
>
|
|
103
|
+
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
104
|
+
<path
|
|
105
|
+
d="M15 5L5 15M5 5L15 15"
|
|
106
|
+
stroke="currentColor"
|
|
107
|
+
stroke-width="2"
|
|
108
|
+
stroke-linecap="round"
|
|
109
|
+
/>
|
|
110
|
+
</svg>
|
|
111
|
+
</button>
|
|
112
|
+
{/if}
|
|
113
|
+
{/snippet}
|
|
114
|
+
|
|
67
115
|
{#if open}
|
|
68
116
|
<div class={baseClass} role="dialog" aria-modal="true">
|
|
69
117
|
<!-- Backdrop -->
|
|
70
|
-
<div
|
|
118
|
+
<div
|
|
71
119
|
class={backdropClass}
|
|
72
120
|
onclick={handleBackdropClick}
|
|
73
121
|
transition:fade={{ duration: 200 }}
|
|
74
|
-
role="presentation"
|
|
75
|
-
|
|
122
|
+
role="presentation"
|
|
123
|
+
></div>
|
|
124
|
+
|
|
76
125
|
<!-- Modal Container -->
|
|
77
|
-
<div
|
|
78
|
-
class={containerClass}
|
|
79
|
-
transition:scale={{ duration: 200, easing: quintOut, start: 0.95 }}
|
|
80
|
-
>
|
|
126
|
+
<div class={containerClass} transition:scale={{ duration: 200, easing: quintOut, start: 0.95 }}>
|
|
81
127
|
<!-- Header -->
|
|
82
|
-
{#if
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
<h2 class={titleClass}>{title}</h2>
|
|
87
|
-
{/if}
|
|
88
|
-
{#if description}
|
|
89
|
-
<p class={descriptionClass}>{description}</p>
|
|
90
|
-
{/if}
|
|
91
|
-
</div>
|
|
92
|
-
|
|
93
|
-
{#if !hideCloseButton}
|
|
94
|
-
<button
|
|
95
|
-
type="button"
|
|
96
|
-
class={closeClass}
|
|
97
|
-
onclick={onclose}
|
|
98
|
-
aria-label="Close"
|
|
99
|
-
>
|
|
100
|
-
<svg width="20" height="20" viewBox="0 0 20 20" fill="none">
|
|
101
|
-
<path
|
|
102
|
-
d="M15 5L5 15M5 5L15 15"
|
|
103
|
-
stroke="currentColor"
|
|
104
|
-
stroke-width="2"
|
|
105
|
-
stroke-linecap="round"
|
|
106
|
-
/>
|
|
107
|
-
</svg>
|
|
108
|
-
</button>
|
|
109
|
-
{/if}
|
|
110
|
-
</header>
|
|
111
|
-
{/if}
|
|
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>
|
|
128
|
+
{#if header}
|
|
129
|
+
{@render header()}
|
|
130
|
+
{:else}
|
|
131
|
+
{@render predefinedHeader()}
|
|
130
132
|
{/if}
|
|
131
|
-
|
|
133
|
+
|
|
132
134
|
<!-- Body -->
|
|
133
135
|
{#if children}
|
|
134
136
|
<div class={bodyClass}>
|
|
135
137
|
{@render children()}
|
|
136
138
|
</div>
|
|
137
139
|
{/if}
|
|
138
|
-
|
|
140
|
+
|
|
139
141
|
<!-- Footer -->
|
|
140
142
|
{#if footer}
|
|
141
143
|
<footer class={footerClass}>
|
|
@@ -144,4 +146,4 @@
|
|
|
144
146
|
{/if}
|
|
145
147
|
</div>
|
|
146
148
|
</div>
|
|
147
|
-
{/if}
|
|
149
|
+
{/if}
|
package/dist/modal/modal.d.ts
CHANGED