# vue-comps-modal

> the best modal you can get

Latest version **1.2.1** (published 2016-09-19) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-comps-modal
pnpm add vue-comps-modal
yarn add vue-comps-modal
bun add vue-comps-modal
```

## 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 | 1.2.1 |
| Published | 2016-09-19 |
| First published | 2016-04-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | * |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | Paul Pflugradt |
| Maintainers | paulpflug |
| Keywords | modal, component, vue |

## Links

- npm: https://www.npmjs.com/package/vue-comps-modal
- Repository: https://github.com/vue-comps/vue-comps-modal
- Homepage: https://github.com/vue-comps
- Issues: https://github.com/vue-comps/vue-comps-modal/issues
- npm.io page: https://npm.io/package/vue-comps-modal

## Dependencies (2)

- [vue-mixins](https://npm.io/package/vue-mixins.md) ^0.3.0
- [vue-overlay](https://npm.io/package/vue-overlay.md) ^1.0.1

## Alternatives

- [react-native-root-siblings](https://npm.io/package/react-native-root-siblings.md) — 102.9K weekly downloads
- [@praxisui/dialog](https://npm.io/package/@praxisui/dialog.md) — 2.0K weekly downloads
- [easy-toggle-state](https://npm.io/package/easy-toggle-state.md) — 350 weekly downloads
- [ngx-lightbox-evp](https://npm.io/package/ngx-lightbox-evp.md) — 19 weekly downloads
- [react-native-modal-translucent-axton](https://npm.io/package/react-native-modal-translucent-axton.md) — 4 weekly downloads

## Recent versions

- 1.2.1 (latest) — 2016-09-19
- 1.2.0 — 2016-09-19
- 1.1.1 — 2016-09-17
- 1.1.0 — 2016-09-16
- 1.0.0 — 2016-08-26
- 0.1.3 — 2016-08-11
- 0.1.2 — 2016-08-11
- 0.1.1 — 2016-05-31
- 0.1.0 — 2016-04-09
- 0.0.1 — 2016-04-08

## README

# vue-comps-modal

the best modal you can get.

### [Demo](https://vue-comps.github.io/vue-comps-modal)

# Install

```sh
npm install --save-dev vue-comps-modal
```
or include `build/bundle.js`.

## Usage
```coffee
# in your component
components:
  "modal": require("vue-comps-modal")
# or, when using bundle.js
components:
  "modal": window.vueComps.modal
```
```html
<button> Open Modal
  <modal>
    Content
  </modal>
</button>
```

For examples see [`dev/`](https://github.com/vue-comps/vue-comps-modal/tree/master/dev).

Note, that the modal will be appended to `document.body` on first opening.

#### Props
Name | type | default | description
---:| --- | ---| ---
opacity | Number | 0.5 | opacity of the overlay
not-dismissable | Boolean | false | can it get closed by click on overlay or ESC?
ignore-parent | Boolean | false | will not set-up click listener on parent
is-opened | Boolean | false | (two-way) set to open / close
transition | String | "modal" | name of a vue transition. [Detailed description](#transition)
parent | Element | parentElement | where to listen for open click
z-index | Number | 1500 | minimum zIndex of the overlay, cannot be lower than 1000 (see [vue-overlay](https://github.com/vue-comps/vue-overlay) for specifics)


#### Events
Name |  description
---:| ---
before-enter | will be called before open animation
after-enter |  will be called when opened
before-leave |  will be called before close animation
after-leave |  will be called when closed
toggled(isOpened:Boolean) | emitted when gets opened or closed. Alternative to use two-way `is-opened` prop

#### Transition

You can provide a vue transition like this:
```js
Vue.transition("fade",{
  // your transition
})
// or in the instance:
transitions: {
  fade: {
    // your transition
  }
}
// usage:
template: "<modal transition='fade'></modal>"
```

The background is managed by `vue-overlay`.
See [here](https://github.com/vue-comps/vue-overlay#overlayfadeelopacitycb) for an example on how to change its fading function.

## Changelog
- 1.2.0  
added toggled event  
set default transition  

- 1.1.1  
removed usage of `$appendTo`  

- 1.1.0  
now using vue transitions  
events are renamed after vue transitions  

- 1.0.0  
added `z-index` prop  
remove `close` event listening  

# Development
Clone repository.
```sh
npm install
npm run dev
```
Browse to `http://localhost:8080/`.

## License
Copyright (c) 2016 Paul Pflugradt
Licensed under the MIT license.

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