npm package: @lemonadejs/modal
Description: LemonadeJS modal is a JavaScript component to create floating modals.
Author: Contact
Latest version: 5.8.2

# LemonadeJS Modal

[Official website and documentation is here](https://lemonadejs.com/plugins/modal)

Compatible with Vanilla JavaScript, LemonadeJS, React, VueJS or Angular.

The LemonadeJS JavaScript Modal is a responsive and reactive component that creates floating modals. With its flexible settings, users can easily configure draggability, closability, and resizability according to their needs.

## Features

-   Lightweight: The JavaScript Modal is only about 4 KBytes;
-   Reactive: Any changes to the underlying data are automatically applied to the HTML, making it easy to keep your grid up-to-date;
-   Integration: It can be used as a standalone library or integrated with any modern framework;

## Getting Started

You can install using NPM or using directly from a CDN.

### npm Installation

To install it in your project using npm, run the following command:

```bash
$ npm install @lemonadejs/modal
```

### CDN

To use modal via a CDN, include the following script tags in your HTML file:

```html
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@lemonadejs/modal/dist/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/modal/dist/style.min.css" />
```

### Usage

Declarative—Quick example with Lemonade

```javascript
import Modal from '@lemonadejs/modal';
import '@lemonadejs/modal/dist/style.css';

export default function App() {
    const toggle = () => {
        this.modal.closed = !this.modal.closed;
    };

    return (render) => render`<>
        <Modal :center="true" :width="400" :height="200" title="My window modal" :ref="self.modal">
            <div style="display: flex; flex-direction: column; justify-content: center; padding: 10px;">
                <p>Quick example!</p>
                <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor...</div>
            </div>
        </Modal>
        <input type="button" value="Toggle Modal" onclick="${toggle}" />        
    </>`;
}
```

Quick example with React

```jsx
import React, { useRef } from 'react';
import Modal from '@lemonadejs/modal/dist/react';
import '@lemonadejs/modal/dist/style.css';

export default function App() {
    const modal = useRef();

    const toggle = () => {
        modal.current.closed = !modal.current.closed;
    };

    return (
        <div>
            <Modal center={true} width={400} height={200} title="My window modal" ref={modal}>
                <div
                    style={{
                        display: 'flex',
                        flexDirection: 'column',
                        justifyContent: 'center',
                        padding: '10px',
                    }}
                >
                    <p>Quick example!</p>
                    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor...</div>
                </div>
            </Modal>
            <input type="button" value="Toggle Modal" id="button" onClick={toggle} />
        </div>
    );
}
```

Quick example with Vue

```vue
<template>
    <Modal ref="modal" :center="true" :width="400" :height="200" title="My window modal">
        <div style="display: flex; flex-direction: column; justify-content: center; padding: 10px;">
            <p>Quick example!</p>
            <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor...</div>
        </div>
    </Modal>
    <input type="button" value="Toggle Modal" id="button" @click="toggleModal" />
</template>
<script>
import Modal from '@lemonadejs/modal/dist/vue';
import '@lemonadejs/modal/dist/style.css';

export default {
    name: 'App',
    components: {
        Modal,
    },
    methods: {
        toggleModal() {
            console.log(this.$refs.modal);
            this.$refs.modal.current.closed = !this.$refs.modal.current.closed;
        },
    },
};
</script>
```

Programmatically - Quick example with Javascript

```html
<html>
    <script src="https://cdn.jsdelivr.net/npm/lemonadejs/dist/lemonade.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@lemonadejs/modal/dist/index.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@lemonadejs/modal/dist/style.min.css" />

    <div id="root">
        <div style="display: flex; flex-direction: column; justify-content: center; padding: 10px;">
            <p>Quick example!</p>
            <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor...</div>
        </div>
    </div>
    <input type="button" value="Toggle Modal" id="button" />

    <script>
        const modal = Modal(document.getElementById('root'), {
            width: 400,
            height: 200,
            title: 'My window modal',
            closed: true,
            center: true,
        });
        button.addEventListener('click', () => {
            console.log(modal.closed);
            modal.closed = !modal.closed;
        });
    </script>
</html>
```

### Configuration

You can configure things such as position, size, and functionalities.

### Settings

| Attribute    | Type    | Description                                                                |
| ------------ | ------- | -------------------------------------------------------------------------- |
| title?       | String  | The header title of the modal. If empty, the header will be not displayed. |
| height?      | Number  | The height of the modal in pixels.                                         |
| width?       | Number  | The width of the modal in pixels.                                          |
| top?         | Number  | The vertical position of the modal within its window in pixels.            |
| left?        | Number  | The horizontal position of the modal within its window in pixels.          |
| draggable?   | Boolean | Determines if the modal can be dragged. `Default: false`.                  |
| resizable?   | Boolean | Determines if the modal can be resized. `Default: false`.                  |
| closed?      | Boolean | Controls the open and close state of the modal. `Default: false`.          |
| closable?    | Boolean | Disables the ability to close the modal. `Default: false`.                 |
| center?      | Boolean | Enables rendering the modal in the center of its window. `Default: false`. |
| url?         | String  | The URL from which to fetch and render content.                            |
| auto-close?  | Boolean | Close the modal when it loses the focus. `Default: false`.                 |
| auto-adjust? | Boolean | Ensures modal will be visible on screen. `Default: false`.                 |
| backdrop?    | Boolean | Enables the backdrop when the modal is opened.                             |
| minimizable? | Boolean | Modal can be minimized. `Default: false`.                                  |
| minimized?   | Boolean | Current minimized state of the modal.                                      |
| position?    | String  | Modal is automatic align during initialization.                            |
| title?       | String  | Title of the modal.                                                        |
| responsive?  | Boolean | Enables responsive mode. `Default: true`.                                  |
| layers?      | Boolean | Bring to front on focus.                                                   |
| focus?       | Boolean | Focus on the modal when open it. `Default: true`.                          |
| overflow?    | Boolean | Create scroll when the content is larger than the modal. `Default: false`. |

### Events

| Event     | Description                              |
| --------- | ---------------------------------------- |
| onload?   | When the modal is ready.                 |
| onclose?  | Called when modal closes.                |
| onopen?   | Called when modal opens.                 |
| onresize? | When the user resize the modal.          |
| onmove?   | When the user change the modal position. |

## License

The LemonadeJS Modal is released under the MIT.

## Changelog

### 3.1.1

-   Added new events: `onmove` and `onresize`.

### 3.1.0

-   Close modal using the keyboard by pressing `Shift + Tab` on the icon.

## Other Tools

-   [jSuites](https://jsuites.net/docs)
-   [Jspreadsheet Data Grid](https://jspreadsheet.com)