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

<!-- App.svelte -->
<script>
  import { Modals, openModal, closeModal } from 'yasp-modals';
  import MySimpleModal from 'MySimpleModal.svelte';

  function onClick() {
    openModal(MySimpleModal, {
      title: 'My Modal',
    });
  }
</script>

<div>
  <a class="back" href="/">&lt; Back to examples</a>
</div>

<main>Main content Blablabl</main>
<button on:click="{onClick}">Open Modal !</button>
<Modals />

<!-- MySimpleModal.svelte -->
<script>
  import { fly } from "svelte/transition";
  export let title = "My Modal Title";

  export let closeModal;
  let props = {};
  let classname = "";
  $: {
    props = $$props;
    if (props.class) {
      classname = props.class;
    }

    delete props.class;
  }
</script>

<style>
  .modal {
    min-width: 400px;
    min-height: 400px;
    background-color: white;
    text-align: center;
    display: flex;
    flex-direction: column;
  }

  .modal__header,
  .modal__footer {
    background-color: darkcyan;
    color: white;
    padding: 20px;
  }

  h1 {
    margin: 0;
  }

  .modal__body {
    padding-top: 40px;
    flex: 1 1 0;
  }
</style>

<section
  class={`modal ${classname}`}
  {...props}
  transition:fly={{ y: 100, duration: 400 }}>
  <header class="modal__header">
    <h1>{title}</h1>
  </header>
  <div class="modal__body">My modal content !</div>
  <header class="modal__footer">
    <button on:click={() => closeModal()}>Cancel</button>
  </header>
</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 [email protected]: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 ([email protected])