# cube-vue-modal

> A simple, basic, highly customizable and mobile friendly modal component for Vue.

Latest version **1.0.9** (published 2023-03-15) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.9 |
| Published | 2023-03-15 |
| First published | 2018-10-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 58.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Fred Gomez |
| Maintainers | f7z |
| Keywords | vue, modal |

## Links

- npm: https://www.npmjs.com/package/cube-vue-modal
- Repository: https://github.com/cube-inc/cube-vue-modal
- Homepage: https://github.com/cube-inc/cube-vue-modal#readme
- Issues: https://github.com/cube-inc/cube-vue-modal/issues
- npm.io page: https://npm.io/package/cube-vue-modal

## 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.0.9 (latest) — 2023-03-15
- 1.0.0-beta.11 (beta) — 2022-09-23
- 1.0.8 — 2023-03-08
- 1.0.7 — 2023-03-04
- 1.0.6 — 2023-03-03
- 1.0.5 — 2023-03-03
- 1.0.4 — 2023-03-03
- 1.0.3 — 2023-03-01
- 1.0.2 — 2023-03-01
- 1.0.1 — 2023-03-01
- 1.0.0 — 2023-03-01
- 1.0.0-beta.10 — 2022-09-23
- 1.0.0-beta.9 — 2022-09-23
- 1.0.0-beta.8 — 2022-09-23
- 1.0.0-beta.7 — 2022-09-22
- … 19 more at https://npm.io/package/cube-vue-modal/versions

## README

# cube-vue-modal

A simple, basic, highly customizable and mobile friendly modal component for Vue.

## Key features

- Easy to use
- Simple HTML structure
- CSS customizable
- Large content support — addresses the well-known Safari over-scroll chaining issue on iOS

## Usage

### Install

```sh
yarn add cube-vue-modal
```

### Exemple

#### Template

```html
<div id="App">
  <p>Click the button below to open the modal.</p>
  <button :disabled="open" @click="open = true">Open</button>
  <Modal v-model="open">
    <header>
      <h1 class="modal-title">Title</h1>
    </header>
    <main>
      <p>This is a content.</p>
    </main>
    <footer>
      <button @click="open = false">Close</button>
    </footer>
  </Modal>
</div>
```

#### Script

```javascript
import Modal from 'cube-vue-modal'

export default {
  components: {
    Modal
  },
  data() {
    return {
      open: false
    }
  }
}
```

#### SCSS

```scss
///
/// Import your own variables
///
@import 'assets/scss/variables';

///
/// Import modal style and animations
///
@import '~cube-vue-modal/src/scss';
/// Or ↴
@import '~cube-vue-modal/src/scss/variables';
@import '~cube-vue-modal/src/scss/modal';
@import '~cube-vue-modal/src/scss/animations';
```

## Props

| Name       | Required | Type           | Default       | Description                                                                                                                                                                                     |
| ---------- | -------- | -------------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| value      | false    | Boolean        | false         | The open state of the modal.                                                                                                                                                                    |
| transition | false    | String         | 'animate'     | The name of the [transition](https://vuejs.org/v2/guide/transitions.html) to use for opening and closing.                                                                                       |
| target     | false    | String, Object | document.body | The [querySelector](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector) or the [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) to append the modal to. |

## Events

| Name   | Description                                        |
| ------ | -------------------------------------------------- |
| input  | The open state of the modal has changed.           |
| open   | The modal is opened.                               |
| opened | The modal is opened and the animation is finished. |
| close  | The modal is closed.                               |
| closed | The modal is closed and the animation is finished. |

## Methods

| Name   | Async | Description                                                    |
| ------ | ----- | -------------------------------------------------------------- |
| open   | true  | Opens the modal and resolves after the animation is finished.  |
| close  | true  | Closes the modal and resolves after the animation is finished. |
| toggle | true  | Switches between the open and close methods.                   |

## HTML structure and classes

```html
<div class="modal">
  <div class="modal-backdrop"></div>
  <div class="modal-dialog" role="dialog">
    <button class="modal-dialog-close"></button>
    <div class="modal-dialog-container">
      <slot />
    </div>
  </div>
</div>
```

## Development Setup

```sh
# Project setup
yarn install

# Compiles and hot-reloads for demo web site development
yarn run serve

# Compiles and minifies for production
yarn run build

# Lints and fixes files
yarn run lint

# Run the unit tests
yarn run test:unit
```

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