Dialog implementation as Svelte component

This component uses the standard HTML <dialog> element and adds some basic functionality to it.

For example it adds the possibility to

Click outside the dialog to close it.
Add a title via attribute.
Slots for custom header and/or footer.

Check out the implementation at github.com/shadovo/svelper/.../Dialog.svelte

Simple dialog

The follwing code will show the simplest of dialogs.

<Dialog title="Simple dialog" bind:show={showSimpleDialog}>
	<p>Hello world</p>
</Dialog>

Dialog with custom header element

The follwing code will show a dialog with a custom header.

<Dialog bind:show={showCustomHeaderDialog}>
	<div slot="header" class="flex-row">
		<img src={srcOscar} alt="Avatar of the author" height="50" width="50" />
		<h4>Hi! It's me!</h4>
	</div>
	<p>Hello world</p>
</Dialog>

Dialog with custom header and footer

The following code will show a dialog with a custom footer.

const acceptDialog = () => {
	acceptedDialogOption = true;
	showCustomFooterDialog = false;
};
const declinedDialog = () => {
	acceptedDialogOption = false;
	showCustomFooterDialog = false;
};

<Dialog bind:show={showCustomFooterDialog}>
	<div slot="header" class="flex-row">
		<img src={srcOscar} alt="Avatar of the author" height="50" width="50" />
		<h4>Hi! It's me!</h4>
	</div>
	<div class="flex">
		<p>This is a dialog with custom header and footer.</p>
	</div>
	<div class="dialog__footer" slot="footer">
		<button on:click={declinedDialog}>No way!</button>
		<button on:click={acceptDialog}>Sure!</button>
	</div>
</Dialog>

Dialog with scroll

This will show a dialog with scroll

<Dialog bind:show={showScrollingDialog}>
	<div class="dialog__header" slot="header">
		<h2>Hello!</h2>
	</div>
	<div class="flex">
		{#each longTextParagraphs as paragraph}
			<p>{paragraph}</p>
		{/each}
	</div>
</Dialog>

Check out the code at github.com/shadovo/svelper/../Dialog.svelte