@abhivarde/svelte-drawer 0.0.5 → 0.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/README.md
CHANGED
|
@@ -4,8 +4,9 @@ A drawer component for Svelte 5, inspired by [Vaul](https://github.com/emilkowal
|
|
|
4
4
|
|
|
5
5
|
## Features
|
|
6
6
|
|
|
7
|
-
- ✅ Smooth animations using Svelte 5's
|
|
7
|
+
- ✅ Smooth animations using Svelte 5's Tween motion
|
|
8
8
|
- ✅ Multiple directions (bottom, top, left, right)
|
|
9
|
+
- ✅ Prebuilt variants (default, sheet, dialog, minimal, sidebar)
|
|
9
10
|
- ✅ Nested drawers support
|
|
10
11
|
- ✅ Scrollable content
|
|
11
12
|
- ✅ Keyboard shortcuts (Escape to close, Tab navigation)
|
|
@@ -111,6 +112,59 @@ npm install @abhivarde/svelte-drawer
|
|
|
111
112
|
</Drawer>
|
|
112
113
|
```
|
|
113
114
|
|
|
115
|
+
### Using Variants
|
|
116
|
+
|
|
117
|
+
```svelte
|
|
118
|
+
<script>
|
|
119
|
+
import { Drawer, DrawerOverlay, DrawerVariants } from '@abhivarde/svelte-drawer';
|
|
120
|
+
|
|
121
|
+
let open = $state(false);
|
|
122
|
+
</script>
|
|
123
|
+
|
|
124
|
+
<!-- Sheet variant (iOS-style bottom sheet) -->
|
|
125
|
+
<Drawer bind:open>
|
|
126
|
+
<DrawerOverlay class="fixed inset-0 bg-black/40" />
|
|
127
|
+
<DrawerVariants variant="sheet">
|
|
128
|
+
<div class="p-6">
|
|
129
|
+
<h2>iOS-style Sheet</h2>
|
|
130
|
+
<p>Clean and modern bottom sheet design</p>
|
|
131
|
+
</div>
|
|
132
|
+
</DrawerVariants>
|
|
133
|
+
</Drawer>
|
|
134
|
+
|
|
135
|
+
<!-- Dialog variant (center modal) -->
|
|
136
|
+
<Drawer bind:open>
|
|
137
|
+
<DrawerOverlay class="fixed inset-0 bg-black/40" />
|
|
138
|
+
<DrawerVariants variant="dialog">
|
|
139
|
+
<div class="p-6">
|
|
140
|
+
<h2>Dialog Style</h2>
|
|
141
|
+
<p>Center-positioned modal dialog</p>
|
|
142
|
+
</div>
|
|
143
|
+
</DrawerVariants>
|
|
144
|
+
</Drawer>
|
|
145
|
+
|
|
146
|
+
<!-- Sidebar variant (navigation drawer) -->
|
|
147
|
+
<Drawer bind:open direction="right">
|
|
148
|
+
<DrawerOverlay class="fixed inset-0 bg-black/40" />
|
|
149
|
+
<DrawerVariants variant="sidebar">
|
|
150
|
+
<div class="p-6">
|
|
151
|
+
<h2>Sidebar Navigation</h2>
|
|
152
|
+
<p>Side navigation drawer</p>
|
|
153
|
+
</div>
|
|
154
|
+
</DrawerVariants>
|
|
155
|
+
</Drawer>
|
|
156
|
+
```
|
|
157
|
+
|
|
158
|
+
## Variants
|
|
159
|
+
|
|
160
|
+
Available variants for `DrawerVariants` component:
|
|
161
|
+
|
|
162
|
+
- `default` - Standard bottom drawer with gray background
|
|
163
|
+
- `sheet` - iOS-style bottom sheet (white, rounded, 85vh height)
|
|
164
|
+
- `dialog` - Center modal dialog style
|
|
165
|
+
- `minimal` - Simple bottom drawer without extra styling
|
|
166
|
+
- `sidebar` - Side navigation drawer (full height)
|
|
167
|
+
|
|
114
168
|
## Keyboard Shortcuts
|
|
115
169
|
|
|
116
170
|
- **Escape** - Close the drawer (can be disabled with `closeOnEscape={false}`)
|
|
@@ -147,6 +201,16 @@ Content container for the drawer.
|
|
|
147
201
|
- `class` (string, optional) - CSS classes for styling
|
|
148
202
|
- `trapFocus` (boolean, optional, default: true) - Whether to trap focus inside drawer
|
|
149
203
|
|
|
204
|
+
### DrawerVariants
|
|
205
|
+
|
|
206
|
+
Pre-styled drawer content with built-in variants.
|
|
207
|
+
|
|
208
|
+
**Props:**
|
|
209
|
+
|
|
210
|
+
- `variant` ('default' | 'sheet' | 'dialog' | 'minimal' | 'sidebar', default: 'default') - Preset style variant
|
|
211
|
+
- `class` (string, optional) - Additional CSS classes for styling
|
|
212
|
+
- `trapFocus` (boolean, optional, default: true) - Whether to trap focus inside drawer
|
|
213
|
+
|
|
150
214
|
## Demo
|
|
151
215
|
|
|
152
216
|
Visit [drawer.abhivarde.in](https://drawer.abhivarde.in) to see live examples.
|
|
@@ -19,12 +19,16 @@
|
|
|
19
19
|
if (open) {
|
|
20
20
|
previouslyFocusedElement = document.activeElement as HTMLElement;
|
|
21
21
|
|
|
22
|
+
document.body.style.overflow = "hidden";
|
|
23
|
+
|
|
22
24
|
overlayOpacity.set(1);
|
|
23
25
|
drawerPosition.set(0);
|
|
24
26
|
} else {
|
|
25
27
|
overlayOpacity.set(0);
|
|
26
28
|
drawerPosition.set(100);
|
|
27
29
|
|
|
30
|
+
document.body.style.overflow = "";
|
|
31
|
+
|
|
28
32
|
if (previouslyFocusedElement) {
|
|
29
33
|
previouslyFocusedElement.focus();
|
|
30
34
|
previouslyFocusedElement = null;
|
|
@@ -48,6 +52,7 @@
|
|
|
48
52
|
window.addEventListener("keydown", handleKeydown);
|
|
49
53
|
return () => {
|
|
50
54
|
window.removeEventListener("keydown", handleKeydown);
|
|
55
|
+
document.body.style.overflow = "";
|
|
51
56
|
};
|
|
52
57
|
});
|
|
53
58
|
|
|
@@ -167,7 +167,7 @@
|
|
|
167
167
|
<div
|
|
168
168
|
bind:this={contentElement}
|
|
169
169
|
class={className}
|
|
170
|
-
style="transform: {getTransform()}; z-index: 50; cursor: grab;"
|
|
170
|
+
style="transform: {getTransform()}; z-index: 50; cursor: grab; transition: transform 300ms cubic-bezier(0.33, 1, 0.68, 1);"
|
|
171
171
|
onpointerdown={onPointerDown}
|
|
172
172
|
tabindex="-1"
|
|
173
173
|
role="dialog"
|