Wait for user input from dialog in a promise

[moritz4]

Hi, been really struggling with this one for a couple hours, everything I try doesn't seem to quite work.
I want to create an Alert Dialog with two button: 'yes' and 'no'.

I want to wait for this input using a promise perhaps. Is there a way to do this?

E.g.

async function confirmResponse() {
    const result = await openDialog();
}

[Noah-2005]

This might help as an example even though it is using a form you should be able to modify it to your liking. https://www.bits-ui.com/docs/components/alert-dialog#working-with-forms This is from the component library that shadcn svelte is built on

[moritz4]

Thanks, but I'm not sure this is quite what I'm looking for. How can I tell the parent component to wait until the user has clicked either yes or no? I think I need to create a promise, but then pass the resolve function to the AlertDialog, but it's almost as if I would need to dynamically generate it when I create the promise?

let result = new Promise(function(resolve) {
  // Not possible!
  <AlertDialog resolve={resolve} />
});

[moritz4]

Here's how I think I solved it.

Card.svelte

<script lang="ts">
	import * as AlertDialog from '$lib/components/ui/alert-dialog/index.js';

	let { isOpen = $bindable(), resolve = $bindable() } = $props();

	function yes() {
		resolve(true);
		isOpen = false;
	}

	function no() {
		resolve(false);
		isOpen = false;
	}
</script>

<AlertDialog.Root bind:open={isOpen}>
	<AlertDialog.Content onEscapeKeydown={no}>
		<AlertDialog.Header>
			<AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>
			<AlertDialog.Description>This action cannot be undone. This will permanently delete your account and remove your data from our servers.</AlertDialog.Description>
		</AlertDialog.Header>
		<AlertDialog.Footer>
			<button onclick={no}>No</button>
			<button onclick={yes}>Yes</button>
		</AlertDialog.Footer>
	</AlertDialog.Content>
</AlertDialog.Root>

+page.svelte

<script lang="ts">
	import Card from './Card.svelte';

	let isOpen = $state(false);
	let resolve = $state<() => void>();

	function openDialog() {
		const result = new Promise<void>((res) => {
			resolve = res;
			isOpen = true;
		});

		result.then((value) => {
			console.log('resolved' + valeu);
		});
	}
</script>

<button onclick={openDialog}>Trigger</button>

<Card bind:isOpen bind:resolve />