Svelte Component Dialogs

This library aims to provide a flexible, Nebular-like API for opening HTML5 dialogs with pre-made svelte components as the content.

• Documentation
• NPM

Installation

npm install svelte-component-dialogs

Usage

• Add DialogProvider somewhere in your app (for SvelteKit you can use your root +layout.svelte file)

<script>
    import { DialogProvider } from 'svelte-component-dialogs';
</script>

<slot />
<DialogProvider />

• Open your first dialog with the openDialog utility

<script>
    import PreMadeComponent from './PreMadeComponent.svelte';
    import { openDialog } from 'svelte-component-dialogs';

    const open = () => openDialog(PreMadeComponent);
</script>

<button on:click="{open}">Open Dialog</button>

Contributing

This is my first open source project, so contributions are welcomed.
You can start the project locally in the following way:

• Clone the repository
• Run pnpm install to install dependencies (or npm, yarn)
• Run pnpm dev to start the dev server
• Run pnpm format to format the project with eslint and prettier
• Run pnpm build:package to build the library
• Run pnpm build:docs to build the documentation site

Roadmap

Some things that still need to be done:

• Write tests for the library
• Add github actions for linting, building and testing the project
• Improve documentation

Acknowledgments

• svelte-dialogs provides similar functionality, with a somewhat different API

License

MIT