bit more

Author: huntabyte

packages/vaul-svelte/src/lib/components/drawer-content.svelte packages/vaul-svelte/src/lib/components/drawer/drawer-content.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { box, mergeProps } from "svelte-toolbelt";
+	import { useId } from "bits-ui";
+	import type { DrawerHandleProps } from "./types.js";
+	import { useDrawerHandle } from "$lib/vaul.svelte.js";
+
+	let {
+		id = useId(),
+		ref = $bindable(null),
+		preventCycle = false,
+		children,
+		...restProps
+	}: DrawerHandleProps = $props();
+
+	const handleState = useDrawerHandle({
+		id: box.with(() => id),
+		ref: box.with(
+			() => ref,
+			(v) => (ref = v)
+		),
+		preventCycle: box.with(() => preventCycle),
+	});
+
+	const mergedProps = $derived(mergeProps(restProps, handleState.props));
+</script>
+
+<div {...mergedProps}>
+	<span {...handleState.hitAreaProps}>
+		{@render children?.()}
+	</span>
+</div>

packages/vaul-svelte/src/lib/components/drawer/drawer-handle.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import DrawerRoot from "./drawer.svelte";
+	import type { DrawerRootProps } from "./types.js";
+	import { noop } from "$lib/internal/helpers/noop.js";
+	import { getDrawerRootContext } from "$lib/vaul.svelte.js";
+
+	let {
+		onOpenChange = noop,
+		onDrag = noop,
+		...restProps
+	}: Omit<DrawerRootProps, "nested" | "onRelease" | "onClose"> = $props();
+
+	const rootState = getDrawerRootContext();
+</script>
+
+<DrawerRoot
+	nested
+	onClose={() => rootState.onNestedOpenChange(false)}
+	onDrag={(e, p) => {
+		rootState.onNestedDrag(e, p);
+		onDrag(e, p);
+	}}
+	onOpenChange={(o) => {
+		if (o) {
+			rootState.onNestedOpenChange(o);
+		}
+		onOpenChange(o);
+	}}
+	onRelease={(e, o) => rootState.onNestedRelease(e, o)}
+	{...restProps}
+/>

packages/vaul-svelte/src/lib/components/drawer/drawer-nested.svelte

@@ -0,0 +1,27 @@
+import { Dialog as DrawerPrimitive } from "bits-ui";
+
+export { default as Root } from "./drawer.svelte";
+export { default as Content } from "./drawer-content.svelte";
+export { default as Overlay } from "./drawer-overlay.svelte";
+export { default as NestedRoot } from "./drawer-nested.svelte";
+export { default as Handle } from "./drawer-handle.svelte";
+
+export const Portal = DrawerPrimitive.Portal;
+export const Trigger = DrawerPrimitive.Trigger;
+export const Title = DrawerPrimitive.Title;
+export const Description = DrawerPrimitive.Description;
+export const Close = DrawerPrimitive.Close;
+
+export type PortalProps = DrawerPrimitive.PortalProps;
+export type TriggerProps = DrawerPrimitive.TriggerProps;
+export type TitleProps = DrawerPrimitive.TitleProps;
+export type DescriptionProps = DrawerPrimitive.DescriptionProps;
+export type CloseProps = DrawerPrimitive.CloseProps;
+
+export type {
+	DrawerRootProps as RootProps,
+	DrawerContentProps as ContentProps,
+	DrawerOverlayProps as OverlayProps,
+	DrawerRootProps as NestedRootProps,
+	DrawerHandleProps as HandleProps,
+} from "./types.js";

packages/vaul-svelte/src/lib/components/drawer-overlay.svelte packages/vaul-svelte/src/lib/components/drawer/drawer-overlay.svelte

@@ -5,6 +5,8 @@ import type {
 	DialogOverlayPropsWithoutHTML,
 	Dialog as DialogPrimitive,
 	DialogTitlePropsWithoutHTML,
+	PrimitiveDivAttributes,
+	WithChild,
 } from "bits-ui";
 import type { WithChildren, Without } from "svelte-toolbelt";
 import type { DrawerDirection, OnChangeFn } from "$lib/types.js";
@@ -176,3 +178,18 @@ export type DrawerCloseProps = DialogPrimitive.CloseProps;
 export type DrawerContentPropsWithoutHTML = DialogContentPropsWithoutHTML;
 
 export type DrawerContentProps = DialogPrimitive.ContentProps;
+
+export type DrawerHandlePropsWithoutHTML = Omit<
+	WithChild<{
+		/**
+		 * Whether to prevent cycling the snap points when the handle is pressed.
+		 *
+		 * @default false
+		 */
+		preventCycle?: boolean;
+	}>,
+	"child"
+>;
+
+export type DrawerHandleProps = DrawerHandlePropsWithoutHTML &
+	Without<PrimitiveDivAttributes, DrawerHandlePropsWithoutHTML>;

packages/vaul-svelte/src/lib/components/drawer.svelte packages/vaul-svelte/src/lib/components/drawer/drawer.svelte

@@ -0,0 +1 @@
+export * as Drawer from "./drawer/index.js";

packages/vaul-svelte/src/lib/components/drawer/index.ts

@@ -1 +1 @@
-export * from "./vaul/index.js";
+export * from "./components/index.js";

packages/vaul-svelte/src/lib/components/types.ts packages/vaul-svelte/src/lib/components/drawer/types.ts

@@ -1,4 +1,4 @@
-import { onMount, tick, untrack } from "svelte";
+import { tick, untrack } from "svelte";
 import {
 	type ReadableBoxedValues,
 	type WithRefProps,
@@ -8,7 +8,7 @@ import {
 	useRefById,
 } from "svelte-toolbelt";
 import { isBottomOrRight, isInput, isVertical } from "./internal/helpers/is.js";
-import { getTranslate, resetStyles, setStyles, styleToString } from "./internal/helpers/style.js";
+import { getTranslate, resetStyles, setStyles } from "./internal/helpers/style.js";
 import { TRANSITIONS, VELOCITY_THRESHOLD } from "./internal/constants.js";
 import { isIOS, preventScroll } from "./internal/prevent-scroll.js";
 import { PositionFixed } from "./position-fixed.svelte.js";
@@ -1133,6 +1133,10 @@ class DrawerRootState {
 	createOverlayState = (props: DrawerOverlayStateProps) => {
 		return new DrawerOverlayState(props, this);
 	};
+
+	createHandleState = (props: DrawerHandleStateProps) => {
+		return new DrawerHandleState(props, this);
+	};
 }
 
 type DrawerContentStateProps = WithRefProps;
@@ -1452,7 +1456,8 @@ class DrawerHandleState {
 // CONTEXT
 ////////////////////////////////////
 
-const [setDrawerRootContext, getDrawerRootContext] = createContext<DrawerRootState>("Drawer.Root");
+export const [setDrawerRootContext, getDrawerRootContext] =
+	createContext<DrawerRootState>("Drawer.Root");
 
 export function useDrawerRoot(props: DrawerRootStateProps) {
 	return setDrawerRootContext(new DrawerRootState(props));
@@ -1466,6 +1471,10 @@ export function useDrawerOverlay(props: DrawerOverlayStateProps) {
 	return getDrawerRootContext().createOverlayState(props);
 }
 
+export function useDrawerHandle(props: DrawerHandleStateProps) {
+	return getDrawerRootContext().createHandleState(props);
+}
+
 ////////////////////////////////////
 // HELPERS
 ////////////////////////////////////