svelte-promise-modal

Yeah you've seen lots of modals. But have you seen a modal that returns a promise?

Installation

npm i -D svelte-promise-modal

How to

Import as shown below

1<script>
2    import { Modal, AlertModal, AskModal } from "svelte-promise-modal";
3    import { get } from "svelte/store"; // you will need this for AskModal
4</script>

Create references to each components as shown below

1let _modal;
2let _alertmodal;
3let _askmodal;

1<Modal bind:this="{_modal}">
2    <h1>Hi! I'm a Modal!</h1>
3</Modal>
4
5<AlertModal bind:this="{_alertmodal}" let:confirm>
6    <div slot="footer">
7        <button on:click="{confirm}">ok</button>
8    </div>
9</AlertModal>
10
11<AskModal let:datastore let:confirm let:cancel bind:this="{_askmodal}">
12    <h1>Hi! I'm an Ask Modal!</h1>
13    <p>I resolve when you press confirm</p>
14    <div>
15        <input value={get(datastore).text} on:input={e => { datastore.set({ text: e.target.value });
16        }} />
17    </div>
18    <div>
19        <button on:click="{cancel}">cancel</button>
20        <button on:click="{confirm}">confirm</button>
21    </div>
22</AskModal>

Open them using corresponding methods.

AlertModal and AskModal will return a promise that is fulfilled once confirm is called.

1
2    <div>
3      <button on:click={_modal.open}>Open Modal</button>
4    </div>
5    <div>
6      <button
7        on:click={() => {
8          _alertmodal.alert(`<h1>Hi! I'm an Alert Modal!</h1>`);
9        }}>
10        Open Alert Modal
11      </button>
12    </div>
13    <div>
14      <button
15        on:click={async () => {
16          try {
17            const data = await _askmodal.ask({ text: 'test' });
18            setTimeout(() => {
19              alert(`You typed: ${data.text}`);
20            }, 500);
21          } catch (e) {
22            setTimeout(() => {
23              alert(`You closed the ask modal without confirmation!`);
24            }, 500);
25          }
26        }}>
27        Open Ask Modal
28      </button>
29    </div>

AskModal datastore

AskModal's ask method expects an object as its first argment. This is the default data that will be stored in the datastore store.

Declaring let:datastore in the AskModal component will provide a way for its inner contents to communiate with the datastore. datastore is a svelte store, so you should use the get function exported from svelte/store in order to access the default values and the set function to edit its values. See example folder for detailed usage.

License

MIT