feat: nested drawers (#814)

huntabyte · Feb 24, 2024 · 5745b1c · 5745b1c
1 parent b84d72f
commit 5745b1c
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 0 deletions.
diff --git a/apps/www/src/lib/registry/default/ui/drawer/drawer-nested.svelte b/apps/www/src/lib/registry/default/ui/drawer/drawer-nested.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { Drawer as DrawerPrimitive } from "vaul-svelte";
+
+	type $$Props = DrawerPrimitive.Props;
+	export let shouldScaleBackground: $$Props["shouldScaleBackground"] = true;
+	export let open: $$Props["open"] = false;
+	export let activeSnapPoint: $$Props["activeSnapPoint"] = undefined;
+</script>
+
+<DrawerPrimitive.NestedRoot {shouldScaleBackground} bind:open bind:activeSnapPoint {...$$restProps}>
+	<slot />
+</DrawerPrimitive.NestedRoot>
diff --git a/apps/www/src/lib/registry/default/ui/drawer/index.ts b/apps/www/src/lib/registry/default/ui/drawer/index.ts
@@ -7,13 +7,15 @@ import Overlay from "./drawer-overlay.svelte";
 import Footer from "./drawer-footer.svelte";
 import Header from "./drawer-header.svelte";
 import Title from "./drawer-title.svelte";
+import NestedRoot from "./drawer-nested.svelte";
 
 const Trigger = DrawerPrimitive.Trigger;
 const Portal = DrawerPrimitive.Portal;
 const Close = DrawerPrimitive.Close;
 
 export {
 	Root,
+	NestedRoot,
 	Content,
 	Description,
 	Overlay,
@@ -23,8 +25,10 @@ export {
 	Trigger,
 	Portal,
 	Close,
+
 	//
 	Root as Drawer,
+	NestedRoot as DrawerNestedRoot,
 	Content as DrawerContent,
 	Description as DrawerDescription,
 	Overlay as DrawerOverlay,

diff --git a/apps/www/src/lib/registry/new-york/ui/drawer/drawer-nested.svelte b/apps/www/src/lib/registry/new-york/ui/drawer/drawer-nested.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	import { Drawer as DrawerPrimitive } from "vaul-svelte";
+
+	type $$Props = DrawerPrimitive.Props;
+	export let shouldScaleBackground: $$Props["shouldScaleBackground"] = true;
+	export let open: $$Props["open"] = false;
+	export let activeSnapPoint: $$Props["activeSnapPoint"] = undefined;
+</script>
+
+<DrawerPrimitive.NestedRoot {shouldScaleBackground} bind:open bind:activeSnapPoint {...$$restProps}>
+	<slot />
+</DrawerPrimitive.NestedRoot>
diff --git a/apps/www/src/lib/registry/new-york/ui/drawer/index.ts b/apps/www/src/lib/registry/new-york/ui/drawer/index.ts
@@ -7,13 +7,15 @@ import Overlay from "./drawer-overlay.svelte";
 import Footer from "./drawer-footer.svelte";
 import Header from "./drawer-header.svelte";
 import Title from "./drawer-title.svelte";
+import NestedRoot from "./drawer-nested.svelte";
 
 const Trigger = DrawerPrimitive.Trigger;
 const Portal = DrawerPrimitive.Portal;
 const Close = DrawerPrimitive.Close;
 
 export {
 	Root,
+	NestedRoot,
 	Content,
 	Description,
 	Overlay,
@@ -25,6 +27,7 @@ export {
 	Close,
 	//
 	Root as Drawer,
+	NestedRoot as DrawerNestedRoot,
 	Content as DrawerContent,
 	Description as DrawerDescription,
 	Overlay as DrawerOverlay,