fix: Drawer.Close asChild behavior (#22)

.changeset/fluffy-dancers-march.md

@@ -0,0 +1,5 @@
+---
+"vaul-svelte": patch
+---
+
+fix: close asChild behavior

.eslintrc.cjs

@@ -53,7 +53,7 @@ module.exports = {
 					"warn",
 					{
 						argsIgnorePattern: "^_",
-						varsIgnorePattern: "^\\$\\$(Props|Events|Slots|Generic)$"
+						varsIgnorePattern: "^(\\$\\$(Props|Events|Slots|Generic)|_*)$"
 					}
 				]
 			}

src/lib/vaul/components/close-wrapper.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	// This is kinda weird but we need to be able to pass the builder down somehow
+	// if someone uses `asChild` to modify it. Since it's only exposed as a slot prop
+	// we need something in between the `<DialogPrimitive.Trigger>` and the slot
+
+	import type { Builder } from "$lib/internal/types.js";
+	import { getCtx } from "../ctx.js";
+
+	export let meltBuilder: Builder;
+
+	const {
+		methods: { closeDrawer }
+	} = getCtx();
+
+	$: ({ _, ...rest } = meltBuilder);
+
+	// We're wrapping the melt action so we can set the triggerRef
+	// even if a user is using `asChild`
+	const wrappedAction = (node: HTMLElement) => {
+		const handleKeydown = (e: KeyboardEvent) => {
+			if (e.key === "Enter" || e.key === " ") {
+				e.preventDefault();
+				closeDrawer(true);
+			}
+		};
+
+		const handleClick = () => {
+			closeDrawer();
+		};
+
+		node.addEventListener("keydown", handleKeydown);
+		node.addEventListener("click", handleClick);
+
+		return () => {
+			node.removeEventListener("keydown", handleKeydown);
+			node.removeEventListener("click", handleClick);
+		};
+	};
+
+	$: Object.assign(rest, {
+		action: wrappedAction
+	});
+</script>
+
+<slot newBuilder={rest} />

src/lib/vaul/components/close.svelte

@@ -2,29 +2,56 @@
 	import { Dialog as DialogPrimitive } from "bits-ui";
 	import type { CloseProps } from "./types.js";
 	import { getCtx } from "../ctx.js";
+	import CloseWrapper from "./close-wrapper.svelte";
 
 	type $$Props = CloseProps;
 
 	export let el: $$Props["el"] = undefined;
+	export let asChild = false;
 
 	const {
 		methods: { closeDrawer }
 	} = getCtx();
 </script>
 
-<DialogPrimitive.Close
-	bind:el
-	on:click={(e) => {
-		e.preventDefault();
-		closeDrawer();
-	}}
-	on:keydown={(e) => {
-		if (e.detail.originalEvent.key === "Enter" || e.detail.originalEvent.key === " ") {
+{#if asChild}
+	<DialogPrimitive.Close
+		bind:el
+		on:click={(e) => {
 			e.preventDefault();
-			closeDrawer(true);
-		}
-	}}
-	{...$$restProps}
->
-	<slot />
-</DialogPrimitive.Close>
+			closeDrawer();
+		}}
+		on:keydown={(e) => {
+			if (e.detail.originalEvent.key === "Enter" || e.detail.originalEvent.key === " ") {
+				e.preventDefault();
+				closeDrawer(true);
+			}
+		}}
+		{...$$restProps}
+		{asChild}
+		let:builder
+	>
+		<CloseWrapper meltBuilder={builder} let:newBuilder>
+			<slot builder={newBuilder} />
+		</CloseWrapper>
+	</DialogPrimitive.Close>
+{:else}
+	<DialogPrimitive.Close
+		bind:el
+		on:click={(e) => {
+			e.preventDefault();
+			closeDrawer();
+		}}
+		on:keydown={(e) => {
+			if (e.detail.originalEvent.key === "Enter" || e.detail.originalEvent.key === " ") {
+				e.preventDefault();
+				closeDrawer(true);
+			}
+		}}
+		{...$$restProps}
+		{asChild}
+		let:builder
+	>
+		<slot {builder} />
+	</DialogPrimitive.Close>
+{/if}