Modal

An overlaying window to take focus away from the current context.

<script lang="ts">
	import { Modal, ModalContent, ModalDescription, ModalOverlay, ModalTitle } from 'lithesome';
	import { Button, Input } from '$site/index.js';
	import { XIcon } from 'lucide-svelte';
	import { fade, fly } from 'svelte/transition';

	let visible = $state(false);

	let currentPwd = $state('');
	let newPwd = $state('');
	let repeatPwd = $state('');
	let errors = $state<{
		currentPwd?: string;
		newPwd?: string;
		repeatPwd?: string;
	}>({
		currentPwd: '',
		newPwd: '',
		repeatPwd: ''
	});

	const submit = () => {
		if (newPwd !== repeatPwd) {
			errors.newPwd = 'Passwords do not match.';
			return;
		}

		visible = false;
		currentPwd = '';
		newPwd = '';
		repeatPwd = '';
		errors = {};
	};
</script>

<Button variant="primary" onclick={() => (visible = true)}>Update Password</Button>

<Modal bind:visible>
	<ModalOverlay
		class="fixed inset-0 z-40 bg-black/50 backdrop-blur"
		transition={[fade, { duration: 200 }]}
		onclick={() => (visible = false)}
	/>
	<ModalContent
		transition={[fly, { y: 15, duration: 150 }]}
		class="fixed left-1/2 top-1/2 z-50 w-[500px] -translate-x-1/2 -translate-y-1/2 rounded-xl border border-neutral-500 bg-white/95 p-8 shadow-xl dark:border-white/10 dark:bg-neutral-950/95"
	>
		<header class="flex items-center justify-between">
			<div>
				<ModalTitle class="mb-2 text-xl font-semibold text-black dark:text-white">Update Password</ModalTitle>
				<ModalDescription class="text-sm text-neutral-400 dark:text-neutral-500">
					Change the password to your account.
				</ModalDescription>
			</div>
		</header>
		<main class="mt-8 flex flex-col gap-6">
			<div class="flex flex-col gap-2">
				<label for="password" class="inline-flex text-sm">
					Current Password <span class="text-red-500">*</span>
				</label>
				<Input bind:value={currentPwd} id="password" type="password" data-lpignore="true" />
			</div>
			<div class="flex flex-col gap-2">
				<label for="password-new" class="inline-flex text-sm">
					New Password <span class="text-red-500">*</span>
				</label>
				<Input bind:value={newPwd} error={errors.newPwd} id="password-new" type="password" data-lpignore="true" />
				{#if errors.newPwd}
					<p class="text-xs text-red-500">{errors.newPwd}</p>
				{/if}
			</div>
			<div class="flex flex-col gap-2">
				<label for="password-repeat" class="inline-flex text-sm">
					Repeat New Password <span class="text-red-500">*</span>
				</label>
				<Input bind:value={repeatPwd} id="password-repeat" type="password" data-lpignore="true" />
			</div>
			<div class="flex justify-end">
				<Button variant="primary" class="px-10" onclick={submit}>Save</Button>
			</div>
		</main>
		<button
			type="button"
			class="focusOutline absolute right-6 top-6 rounded-md p-2 hover:bg-black/10 dark:hover:bg-white/10"
			onclick={() => (visible = false)}
		>
			<XIcon class="size-6" />
		</button>
	</ModalContent>
</Modal>

API Reference

Modal

Prop	Type	Description
`visible` *	`boolean` `Default: false`
`portalTarget`	`string \| HTMLElement` `Default: 'body'`	The target element to mount the modal.
`use`	`Array` `Default: []`	Any svelte action to be applied to the underlying element. View use api for more info.
`self`	`HTMLDivElement` `Default: ——`	The underlying html element that you can use to bind to.

Data attribute	Value	Description
`data-modal`	`''`	The base data attribute, can be used for styling.

ModalOverlay

This component is a child of Modal

Prop	Type	Description
`transition`	`Transition` `Default: undefined`	The svelte transition you wish to use. View transition api for more info.
`use`	`Array` `Default: []`	Any svelte action to be applied to the underlying element. View use api for more info.
`self`	`HTMLDivElement` `Default: ——`	The underlying html element that you can use to bind to.

Data attribute	Value	Description
`data-modaloverlay`	`''`	The base data attribute, can be used for styling.

ModalContent

This component is a child of Modal

Prop	Type	Description
`transition`	`Transition` `Default: undefined`	The svelte transition you wish to use. View transition api for more info.
`use`	`Array` `Default: []`	Any svelte action to be applied to the underlying element. View use api for more info.
`self`	`HTMLDivElement` `Default: ——`	The underlying html element that you can use to bind to.

Data attribute	Value	Description
`data-modalcontent`	`''`	The base data attribute, can be used for styling.

ModalTitle

This component is a child of ModalContent

Prop	Type	Description
`use`	`Array` `Default: []`	Any svelte action to be applied to the underlying element. View use api for more info.
`self`	`HTMLHeadingElement` `Default: ——`	The underlying html element that you can use to bind to.

Data attribute	Value	Description
`data-modaltitle`	`''`	The base data attribute, can be used for styling.

ModalDescription

This component is a child of ModalContent

Prop	Type	Description
`use`	`Array` `Default: []`	Any svelte action to be applied to the underlying element. View use api for more info.
`self`	`HTMLParagraphElement` `Default: ——`	The underlying html element that you can use to bind to.

Data attribute	Value	Description
`data-modaldescription`	`''`	The base data attribute, can be used for styling.

Basic Example

<script>
	import { Modal, ModalOverlay, ModalContent, ModalTitle, ModalDescription } from 'lithesome';

	let visible = $state(false);
</script>

<button onclick={() => (visible = !visible)}> Toggle modal </button>

<Modal bind:visible>
	<ModalOverlay />
	<ModalContent>
		<ModalTitle>Title</ModalTitle>
		<ModalDescription>Modal content that could contain anything.</ModalDescription>
	</ModalContent>
</Modal>