Modal - Lithesome

Preview

Code

<script lang="ts">
	import { fade, fly } from 'svelte/transition';
	import { Modal, ModalBackdrop, ModalContent, ModalDescription, ModalTitle, ModalTrigger } from 'lithesome';
	import Button from '$site/components/Button.svelte';
	import Container from '$site/components/Container.svelte';

	let visible = $state(false);

	let inputValue = $state('');

	const deleteAccount = () => {
		inputValue = '';
		visible = false;
	};
</script>

<Modal bind:visible>
	<ModalTrigger>
		{#snippet custom({ props })}
			<Button variant="secondary" {...props}>Delete Account</Button>
		{/snippet}
	</ModalTrigger>

	<ModalBackdrop>
		{#snippet custom({ props, state })}
			{#if state.visible}
				<div class="fixed inset-0 z-50 bg-black/25 backdrop-blur" {...props} transition:fade={{ duration: 150 }}></div>
			{/if}
		{/snippet}
	</ModalBackdrop>
	<ModalContent>
		{#snippet custom({ props, state })}
			{#if state.visible}
				<div
					{...props}
					transition:fly={{ y: 5, duration: 200 }}
					class="fixed top-1/2 left-1/2 z-50 w-[700px] -translate-1/2"
				>
					<Container>
						{#snippet header()}
							<ModalTitle class="text-2xl text-black dark:text-white">Delete Account</ModalTitle>
							<ModalDescription class="mt-2 text-sm">
								This action will remove all data related to you from our systems.
							</ModalDescription>
						{/snippet}

						<p class="mb-6 text-zinc-600 dark:text-zinc-300">
							To confirm this action, type "<b class="text-black dark:text-white">hamburger</b>" in the field below.
						</p>
						<input
							type="text"
							bind:value={inputValue}
							class={[
								'w-full border border-zinc-400 px-4 py-3 dark:border-zinc-800',
								'hover:border-zinc-600 dark:hover:border-zinc-700',
								'focus:border-teal-500 focus:outline-none dark:focus:border-teal-500',
								'text-black dark:text-zinc-200'
							]}
							placeholder="Type hamburger to delete account..."
						/>

						{#snippet footer()}
							<Button variant="text" onclick={() => (visible = false)}>Cancel</Button>
							<Button variant="danger" disabled={inputValue !== 'hamburger'} onclick={deleteAccount}>
								Delete my Account
							</Button>
						{/snippet}
					</Container>
				</div>
			{/if}
		{/snippet}
	</ModalContent>
</Modal>

Basic Example

<script>
	import { Modal, ModalBackdrop, ModalContent, ModalDescription, ModalTitle, ModalTrigger } from 'lithesome';
</script>

<Modal>
	<ModalTrigger>Click me</ModalTrigger>

	<ModalBackdrop />
	<ModalContent>
		<ModalTitle>Modal Title</ModalTitle>
		<ModalDescription>Modal Description</ModalDescription>
	</ModalContent>
</Modal>

API Reference

Property	Type	Description
`closeOnBackdropClick`	boolean	Allows the backdrop to close the modal if the user clicks on it.
`children`	Snippet<[ S extends Record<string, any> ? S : never ]>	The default snippet to render.

State	Type	Description
`visible`	boolean	True if the contents are visible.

<ModalTrigger />

Property	Type	Description
`ref`	E	The reference to the underlying element.
`children`	Snippet<[ S extends Record<string, any> ? S : never ]>	The default snippet to render.
`custom`	Snippet<[ S extends Record<string, any> ? { props: P; state: S; } : { props: P; } ]>	Snippet to be used when wanting a custom implementation. This will tell Lithesome not the render the default element and any state along with it.

State	Type	Description
`visible`	boolean	True if the contents are visible.

<ModalBackdrop />

Property	Type	Description
`ref`	E	The reference to the underlying element.
`children`	Snippet<[ S extends Record<string, any> ? S : never ]>	The default snippet to render.
`custom`	Snippet<[ S extends Record<string, any> ? { props: P; state: S; } : { props: P; } ]>	Snippet to be used when wanting a custom implementation. This will tell Lithesome not the render the default element and any state along with it.

State	Type	Description
`visible`	boolean	True if the contents are visible.

<ModalContent />

Property	Type	Description
`ref`	E	The reference to the underlying element.
`children`	Snippet<[ S extends Record<string, any> ? S : never ]>	The default snippet to render.
`custom`	Snippet<[ S extends Record<string, any> ? { props: P; state: S; } : { props: P; } ]>	Snippet to be used when wanting a custom implementation. This will tell Lithesome not the render the default element and any state along with it.

State	Type	Description
`visible`	boolean	True if the contents are visible.

<ModalTitle />

Property	Type	Description
`ref`	E	The reference to the underlying element.
`children`	Snippet<[ S extends Record<string, any> ? S : never ]>	The default snippet to render.
`custom`	Snippet<[ S extends Record<string, any> ? { props: P; state: S; } : { props: P; } ]>	Snippet to be used when wanting a custom implementation. This will tell Lithesome not the render the default element and any state along with it.

<ModalDescription />

Property	Type	Description
`ref`	E	The reference to the underlying element.
`children`	Snippet<[ S extends Record<string, any> ? S : never ]>	The default snippet to render.
`custom`	Snippet<[ S extends Record<string, any> ? { props: P; state: S; } : { props: P; } ]>	Snippet to be used when wanting a custom implementation. This will tell Lithesome not the render the default element and any state along with it.

Lithesome

Basic Example

API Reference

<Modal />

<ModalTrigger />

<ModalBackdrop />

<ModalContent />

<ModalTitle />

<ModalDescription />