fix: expose/handle dismissible prop (#8)

.changeset/green-readers-admire.md

@@ -0,0 +1,5 @@
+---
+"vaul-svelte": patch
+---
+
+fix: dismissible prop

.eslintignore

@@ -6,6 +6,7 @@ node_modules
 .env
 .env.*
 !.env.example
+.changeset
 
 # Ignore files for PNPM, NPM and YARN
 pnpm-lock.yaml

.prettierignore

@@ -2,3 +2,4 @@
 pnpm-lock.yaml
 package-lock.json
 yarn.lock
+.changeset

README.md

@@ -30,7 +30,14 @@ Use the drawer in your app.
 
 ## Examples
 
-(Coming soon)
+Play around with the examples on StackBlitz:
+
+- [With scaled background](https://stackblitz.com/edit/vaul-svelte-scaled?file=src%2Froutes%2F%2Bpage.svelte)
+- [Without scaled background](https://stackblitz.com/edit/vaul-svelte-without-scale?file=src%2Froutes%2F%2Bpage.svelte)
+- [With snap points](https://stackblitz.com/edit/vaul-svelte-snap-points?file=src%2Froutes%2F%2Bpage.svelte)
+- [Scrollable with inputs](https://stackblitz.com/edit/vaul-svelte-scrollable-with-inputs?file=src%2Froutes%2F%2Bpage.svelte)
+- [Nested drawers](https://stackblitz.com/edit/vaul-svelte-nested-drawers?file=src%2Froutes%2F%2Bpage.svelte)
+- [Non-dismissible](https://stackblitz.com/edit/vaul-svelte-non-dismissible?file=src%2Froutes%2F%2Bpage.svelte)
 
 ## API Reference
 

src/lib/vaul/components/root.svelte

@@ -21,11 +21,12 @@
 	export let onRelease: $$Props['onRelease'] = undefined;
 	export let onDrag: $$Props['onDrag'] = undefined;
 	export let onClose: $$Props['onClose'] = undefined;
+	export let dismissible: $$Props['dismissible'] = undefined;
 
 	const {
 		states: { keyboardIsOpen, activeSnapPoint: localActiveSnapPoint, drawerId, openDrawerIds },
 		methods: { closeDrawer, openDrawer },
-		options: { dismissible },
+		options: { dismissible: localDismissible },
 		updateOption
 	} = setCtx({
 		defaultOpen: open,
@@ -60,7 +61,8 @@
 		onDrag,
 		onClose,
 		onRelease,
-		shouldScaleBackground
+		shouldScaleBackground,
+		dismissible
 	});
 
 	$: activeSnapPoint !== undefined && localActiveSnapPoint.set(activeSnapPoint);
@@ -71,6 +73,7 @@
 	$: updateOption('fadeFromIndex', fadeFromIndex);
 	$: updateOption('openFocus', openFocus);
 	$: updateOption('shouldScaleBackground', shouldScaleBackground);
+	$: updateOption('dismissible', dismissible);
 </script>
 
 <DialogPrimitive.Root
@@ -91,7 +94,7 @@
 			keyboardIsOpen.set(false);
 		}
 		e.preventDefault();
-		if (!$dismissible) {
+		if (!$localDismissible) {
 			return;
 		}
 		const $openDialogIds = get(openDrawerIds);

src/lib/vaul/components/types.ts

@@ -88,6 +88,16 @@ export type Props = {
 	 * A function called when the active snap point of the Drawer changes.
 	 */
 	onActiveSnapPointChange?: OnChangeFn<number | string | null>;
+
+	/**
+	 * Whether the drawer is able to be dismissed naturally.
+	 * If `true` the user can swipe or press outside the drawer to close it,
+	 * if `false` you must provide another way to close the drawer, via
+	 * programmatic control.
+	 *
+	 * @default true
+	 */
+	dismissible?: boolean;
 } & DialogPrimitive.Props;
 
 export type OverlayProps = DialogPrimitive.OverlayProps;