# @arfedulov/vue2-modal

> An easy to style vue component for creating modal windows.

Latest version **0.5.0** (published 2022-03-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install @arfedulov/vue2-modal
pnpm add @arfedulov/vue2-modal
yarn add @arfedulov/vue2-modal
bun add @arfedulov/vue2-modal
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.5.0 |
| Published | 2022-03-16 |
| First published | 2021-09-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 772.8 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Artem Fedulov |
| Maintainers | arfedulov |
| Keywords | vue, vue2, modal, dialog |

## Links

- npm: https://www.npmjs.com/package/@arfedulov/vue2-modal
- Repository: https://github.com/arfedulov/vue2-modal
- Homepage: https://github.com/arfedulov/vue2-modal#readme
- Issues: https://github.com/arfedulov/vue2-modal/issues
- npm.io page: https://npm.io/package/@arfedulov/vue2-modal

## Dependencies (3)

- [vue](https://npm.io/package/vue.md) ^2.6.11
- [core-js](https://npm.io/package/core-js.md) ^3.6.5
- [portal-vue](https://npm.io/package/portal-vue.md) ^2.1.7

## 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

- 0.5.0 (latest) — 2022-03-16
- 0.4.0 — 2022-03-10
- 0.3.2 — 2021-11-01
- 0.3.1 — 2021-11-01
- 0.3.0 — 2021-09-15
- 0.2.0 — 2021-09-14
- 0.1.3 — 2021-09-14
- 0.1.2 — 2021-09-12
- 0.1.1 — 2021-09-12
- 0.1.0 — 2021-09-12

## README

# vue2-modal

This is a vue component for creating your modal windows. It is
designed to be highly customizable in its appearance, so it goes
almost without any styling. It is a responsibility of a user of this
package to provide css for your component.

So what is the responsibility of this package then? It provides
the core functionality of modal windows, like the following:

- opens over the main document;
- disables the access to main document (navigation, scrolling etc.);
- has a backdrop which may obscure the underlying page content (for
  focusing user attention on the modal content);
- allows receiving yes/no response from a user;
- built with accessibility in mind;

[See an example](https://www.w3.org/TR/wai-aria-practices-1.1/examples/dialog-modal/dialog.html)

## some examples

In your _main.js_ file:

```js
import Vue2Modal from "@arfedulov/vue2-modal";

Vue.use(Vue2Modal);
```

In your application root:

```html
<template>
  <div>
    <!-- this is the place where your modals will be mounted at -->
    <v-modal-target name="the-name-of-the-target" />
  </div>
</template>
```

In multiple components of your application you may
have something like this:

```html
<template>
  <div>
    <button @click="openMyModal">open</button>

    <v-modal
      ref="myModal"
      target="the-name-of-the-target"
      close-on-backdrop-click
    >
      <div class="my-modal">
        Agree?

        <button v-modal-cancel>cancel</button>
        <button v-modal-submit>ok</button>
      </div>
    </v-modal>
  </div>
</template>
```

```js
export default {
  methods: {
    async openMyModal() {
      const result = await this.$refs.myModal.open();

      console.log(result); // `true` or `false`
    },
  },
};
```

## API

### v-modal properties

- `target` - the name of the modal's target
- `close-on-backdrop-click`
- `backdrop-styles` - an object of styles which is forwarded to backdrop element
- `transition-name` - optional name of vue <transition> which is applied to the modal

### direcitves

- `v-modal-submit` - mark a submit button
- `v-modal-cancel` - mark a cancel button

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