# compose-dialog

> A nice dialog component.

Latest version **3.1.1** (published 2018-07-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install compose-dialog
pnpm add compose-dialog
yarn add compose-dialog
bun add compose-dialog
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.1.1 |
| Published | 2018-07-17 |
| First published | 2014-07-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 31.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Maintainers | compose, imathis, jeromegn |

## Links

- npm: https://www.npmjs.com/package/compose-dialog
- Repository: https://github.com/compose-ui/dialog
- Issues: https://github.com/compose-ui/dialog/issues
- npm.io page: https://npm.io/package/compose-dialog

## Dependencies (1)

- [compose-toolbox](https://npm.io/package/compose-toolbox.md) ^1.6.0

## Recent versions

- 3.1.1 (latest) — 2018-07-17
- 3.1.0 — 2018-03-06
- 3.0.2 — 2017-11-02
- 3.0.1 — 2017-10-31
- 3.0.0 — 2017-10-27
- 2.0.4 — 2016-09-09
- 2.0.3 — 2016-08-11
- 2.0.2 — 2016-05-23
- 2.0.1 — 2016-04-28
- 2.0.0 — 2016-04-07
- 1.0.6 — 2014-09-17
- 1.0.5 — 2014-08-29
- 1.0.4 — 2014-07-23
- 1.0.3 — 2014-07-21
- 1.0.2 — 2014-07-08
- … 2 more at https://npm.io/package/compose-dialog/versions

## README

# Dialog [![Build Status](https://travis-ci.org/compose-ui/dialog.svg?branch=master)](https://travis-ci.org/compose-ui/dialog)

A nice dialog component.

![Preview](../../blob/master/preview.png?raw=true)

## Installation

- `npm install compose-dialog`
- Profit.

## Usage

There are a few ways to instantiate a dialog.

### DOM only (almost)

Using the `data-dialog-title="Some title"` attribute on anything will trigger showing a Dialog with the provided options (as `data-dialog` attributes.)

```html
<button class="btn" 
  data-dialog-title="Leaving Already?"
  data-dialog-description="But we were having so much fun…"
  data-dialog-continue="Peace out"
  data-dialog-close="Stick around"
  data-dialog-follow="/session/destroy/"
>Open a dialog</button>
```

```html
<button
  data-dialog-confirm="true"
  data-dialog-title="Delete this user?"
  data-dialog-description="Deleting a user is a permanent action. Are you sure?"
>Delete User</button>
```

**NOTE**: You do have to `require('compose-dialog')` at some point though.

### Programmatically

```javascript
var Dialog = require('compose-dialog')

Dialog.show({ /* options */})
```

This will handle all there is to handle for showing a Dialog.

## Options

### `dialog-if`

Using `data-dialog-if="[selector]"` you can only trigger a dialog if the selector is found. So for example if you
only want to show a dialog if a checkbox is checked.

```
data-dialog-title="Are you sure?" data-dialog-if="#form_id .dangerous-checkbox:checked"
```

Now when the element is clicked, the event will be stopped and the dialog will be shown only if the checkbox is
checked.

---
_Source: https://npm.io/package/compose-dialog · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._