Yet Another Svelte Package: Modals

Modals wrapper for Svelte3

Features

• No top-level Modals context
• open and close modals easily with a function
• No crazy boilerplate

Installing

npm install --save-dev yasp-modals

Very quick example

View live there : https://svelte.dev/repl/1dde32baa79d4d80a9d30937c5cf48f8?version=3.20.1

1<!-- App.svelte -->
2<script>
3  import { Modals, openModal, closeModal } from 'yasp-modals';
4  import MySimpleModal from 'MySimpleModal.svelte';
5
6  function onClick() {
7    openModal(MySimpleModal, {
8      title: 'My Modal',
9    });
10  }
11</script>
12
13<div>
14  <a class="back" href="/">&lt; Back to examples</a>
15</div>
16
17<main>Main content Blablabl</main>
18<button on:click="{onClick}">Open Modal !</button>
19<Modals />
20
21<!-- MySimpleModal.svelte -->
22<script>
23  import { fly } from "svelte/transition";
24  export let title = "My Modal Title";
25
26  export let closeModal;
27  let props = {};
28  let classname = "";
29  $: {
30    props = $$props;
31    if (props.class) {
32      classname = props.class;
33    }
34
35    delete props.class;
36  }
37</script>
38
39<style>
40  .modal {
41    min-width: 400px;
42    min-height: 400px;
43    background-color: white;
44    text-align: center;
45    display: flex;
46    flex-direction: column;
47  }
48
49  .modal__header,
50  .modal__footer {
51    background-color: darkcyan;
52    color: white;
53    padding: 20px;
54  }
55
56  h1 {
57    margin: 0;
58  }
59
60  .modal__body {
61    padding-top: 40px;
62    flex: 1 1 0;
63  }
64</style>
65
66<section
67  class={`modal ${classname}`}
68  {...props}
69  transition:fly={{ y: 100, duration: 400 }}>
70  <header class="modal__header">
71    <h1>{title}</h1>
72  </header>
73  <div class="modal__body">My modal content !</div>
74  <header class="modal__footer">
75    <button on:click={() => closeModal()}>Cancel</button>
76  </header>
77</section>

Components & methods

This package provides 1 Component and 2 methods, an event emitter and one store to use

Components :

• Modals

Methods:

• openModal
• closeModal

emitter

$modals

<Modals {options?:object}>

Parameters

Parameter	Optional	Description
options	optional	Options for the modal layout and behavior

• options
  • close
    • showBtn: boolean (default: true) - if a button to close the modal wrapper is added to the layout. Will have modals__close for classname
    • btnText: string (default: 'close') - the text to show in the close button
    • onClickOutside: boolean (default: true) - if the modals wrapper closes when clicking outside a modal content
    • onEscKey: boolean (default true) - if the modals wrapper closes when the esc key is pressed
  • transition
    • type: svelte/transition (default: fade) - the transition type for wrapper appearance
    • props: object (default: {}) - the transition properties
  • props: object
    • style: string (default: see src/components/Modals.svelte) - the style to apply to the wrapper
    • all properties in this object will be passed as attributes using {...props} to the wrapper element

openModal(component:SvelteComponent, props?:object)

Opens a Modal

• component - the component to add to the Modal wrapper
• props: object (default: {}) - props to pass to the component

When a component is rendered, it will also have openModal and closeModal as properties

closeModal()

Closes the current modal

emitter

emitter is an EventEmitter.

Events:

• open ({component, props}) - emitted when a Modal is opened
• beforeClose - emitted before closing a Modal
• close - emitted when a modal closes

modals

Modals is a custom store. It contains a reference to openModal, closeModal and the emitter.

When the no modal is opened, $modals as for value null When a modal is opened, $modals as for value {component, props}

Other examples Shipped with this package

The directory examples contains examples of different usage of this package.

• the most basic way to open a modal

The best way to test the example(s) is to clone this repository and launch the examples quick server shipped within

git clone git@gitlab.com:dievardump/yasp-modals.git
cd yasp-modals/examples
npm install
npm run dev

This should create a local server accessible to http://localhost:3333 (if you kept the default port)

Author

Simon Fremaux / dievardump (dievardump@gmail.com)