npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

svelte-awaitable-dialog

v0.1.1

Published

Svelte dialog modals information and confirmation from which can be awaited in functions

Downloads

142

Readme

svelte-awaitable-dialog

NPM

Js library for opening custom modal windows/dialogs/drawers and getting data from them inside a regular js function. With its help, you can get rid of adding additional variables to track the opening of a dialog and storing data from it, as well as adding the layout components themselves.

Demo

REPL Link

Installation

npm install svelte-awaitable-dialog

Or with Yarn

yarn add svelte-awaitable-dialog

Usage

For example, like that you can get user confirmation by the simplest dialog:

SimpleDialog.svelte

<script>
  import { closeDialog, resolveDialog } from 'svelte-awaitable-dialog'
  import { onMount } from 'svelte'

  export let title = 'Confirm action?'
  let dialog
  onMount(() => {
    dialog && dialog.showModal()
  })
</script>
<dialog bind:this={dialog} on:close={closeDialog}>
  <h1>{title}</h1>
  <button on:click={resolveDialog}>Confirm</button>
  <button on:click={closeDialog}>Cancel</button>
</dialog>

+page.svelte

<script lang="ts">
  import { AwaitableDialog, openDialog } from 'svelte-awaitable-dialog'
  import SimpleDialog from './components/dialog_examples/SimpleDialog.svelte'
  async function confirm() {
    // Here you can pass any custom Svelte component and its props
    openDialog(SimpleDialog, { title: 'Confirm action?' })
      .then(() => console.log('CONFIRMED'))
  }
</script>

<button on:click={confirm}>Run action</button>
<!--  You need only one AwaitableDialog on your page (for SvelteKit it's a good idea to add it to root +layout.svelte)-->
<AwaitableDialog/>

Also there's opportunity to return data from dialog as promise result by passing data object to resolveDialog function. Check REPL for example.

API

Methods

openDialog:

Opens custom dialog component and returns Promise with data resolved from dialog

Parameters

  • component: ComponentType<T>. Custom Svelte component to render
  • data: Partial<ComponentProps<T>> = {}. Props of passed component

resolveDialog:

Resolves openDialog Promise with data and closes dialog

Parameters

  • data: object. Arbitrary object with data which can be obtained in openDialog Promise

closeDialog:

Closes opened dialog

License

MIT

Show your support

Give a ⭐️ if this project helped you!