@abhivarde/svelte-drawer 0.0.22 → 0.0.23
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/README.md
CHANGED
|
@@ -13,6 +13,8 @@ A drawer component for Svelte 5, inspired by [Vaul](https://github.com/emilkowal
|
|
|
13
13
|
- ✅ Prebuilt variants (**default, sheet, dialog, minimal, sidebar**)
|
|
14
14
|
- ✅ **Drag handle component** with auto-adaptive orientation
|
|
15
15
|
- ✅ **Snap points** for iOS-like multi-height drawers
|
|
16
|
+
- ✅ **Portal rendering** to escape z-index conflicts
|
|
17
|
+
- ✅ **Optional header & footer** components for quick setup
|
|
16
18
|
- ✅ Nested drawer support
|
|
17
19
|
- ✅ Scrollable content areas
|
|
18
20
|
- ✅ Keyboard shortcuts (**Escape to close**, Tab navigation)
|
|
@@ -12,11 +12,11 @@
|
|
|
12
12
|
} = $props();
|
|
13
13
|
</script>
|
|
14
14
|
|
|
15
|
-
<div class="
|
|
15
|
+
<div class="border-t border-gray-200 p-4 mt-auto {className}" {...restProps}>
|
|
16
16
|
{#if children}
|
|
17
17
|
{@render children()}
|
|
18
18
|
{:else if actions}
|
|
19
|
-
<div class="flex gap-3
|
|
19
|
+
<div class="flex justify-end gap-3">
|
|
20
20
|
{@render actions()}
|
|
21
21
|
</div>
|
|
22
22
|
{/if}
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
|
+
import { getContext } from "svelte";
|
|
3
|
+
|
|
2
4
|
let {
|
|
3
5
|
title,
|
|
4
6
|
description,
|
|
@@ -17,55 +19,49 @@
|
|
|
17
19
|
[key: string]: any;
|
|
18
20
|
} = $props();
|
|
19
21
|
|
|
20
|
-
import { getContext } from "svelte";
|
|
21
|
-
|
|
22
22
|
const drawer = getContext<any>("drawer");
|
|
23
23
|
|
|
24
24
|
function handleClose() {
|
|
25
|
-
if (onClose)
|
|
26
|
-
|
|
27
|
-
} else {
|
|
28
|
-
drawer?.closeDrawer();
|
|
29
|
-
}
|
|
25
|
+
if (onClose) onClose();
|
|
26
|
+
else drawer?.closeDrawer();
|
|
30
27
|
}
|
|
31
28
|
</script>
|
|
32
29
|
|
|
33
|
-
<div
|
|
34
|
-
class="flex items-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
{/if}
|
|
47
|
-
</div>
|
|
30
|
+
<div class="border-b border-gray-200 p-4 {className}" {...restProps}>
|
|
31
|
+
<div class="flex items-start justify-between gap-4">
|
|
32
|
+
{#if children}
|
|
33
|
+
{@render children()}
|
|
34
|
+
{:else}
|
|
35
|
+
<div class="flex-1">
|
|
36
|
+
{#if title}
|
|
37
|
+
<h2 class="text-lg font-semibold text-gray-900">{title}</h2>
|
|
38
|
+
{/if}
|
|
39
|
+
{#if description}
|
|
40
|
+
<p class="text-sm text-gray-600 mt-1">{description}</p>
|
|
41
|
+
{/if}
|
|
42
|
+
</div>
|
|
48
43
|
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
>
|
|
55
|
-
<svg
|
|
56
|
-
class="w-5 h-5 text-gray-500"
|
|
57
|
-
fill="none"
|
|
58
|
-
stroke="currentColor"
|
|
59
|
-
viewBox="0 0 24 24"
|
|
44
|
+
{#if showCloseButton}
|
|
45
|
+
<button
|
|
46
|
+
onclick={handleClose}
|
|
47
|
+
class="p-2 rounded-md hover:bg-gray-100 transition-colors"
|
|
48
|
+
aria-label="Close drawer"
|
|
60
49
|
>
|
|
61
|
-
<
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
stroke
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
50
|
+
<svg
|
|
51
|
+
class="w-5 h-5 text-gray-500"
|
|
52
|
+
fill="none"
|
|
53
|
+
stroke="currentColor"
|
|
54
|
+
viewBox="0 0 24 24"
|
|
55
|
+
>
|
|
56
|
+
<path
|
|
57
|
+
stroke-linecap="round"
|
|
58
|
+
stroke-linejoin="round"
|
|
59
|
+
stroke-width="2"
|
|
60
|
+
d="M6 18L18 6M6 6l12 12"
|
|
61
|
+
/>
|
|
62
|
+
</svg>
|
|
63
|
+
</button>
|
|
64
|
+
{/if}
|
|
69
65
|
{/if}
|
|
70
|
-
|
|
66
|
+
</div>
|
|
71
67
|
</div>
|