# vue-promise-modals

> A Vue 3 library to create modals that are resolved with promises.

Latest version **0.1.0** (published 2023-09-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-promise-modals
pnpm add vue-promise-modals
yarn add vue-promise-modals
bun add vue-promise-modals
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.0 |
| Published | 2023-09-30 |
| First published | 2023-09-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 13.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Andrew Bastin |
| Maintainers | andrewbastin |
| Keywords | vue, dialog, modals |

## Links

- npm: https://www.npmjs.com/package/vue-promise-modals
- Homepage: https://github.com/AndrewBastin/vue-promise-modals
- npm.io page: https://npm.io/package/vue-promise-modals

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^3.3.4

## 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.1.0 (latest) — 2023-09-30

## README

<div align="center">

# vue-promise-modals

</div>

A Vue 3 library to create modals that are resolved with promises.

**A demo of this library is available at [vue-promise-modals.andrewbast.in](https://vue-promise-modals.andrewbast.in).**

## Installation
 - Install the NPM package.
   ```bash
   $ npm install vue-promise-modals
   ```

 - Install the plugin on the Vue app
   ```js
   import App from "./App.vue"
   import { createApp } from "vue"
   import VuePromiseModalsPlugin from "vue-promise-modals"
   
   createApp(App)
     .use(VuePromiseModalsPlugin, {
       // Options go here
     })
   ```

 - Define DialogHost component on the component where you want to render the modals.
   ```vue
   <template>
     ...
     <DialogHost />
     ...
   </template>
   ```

## Usage
vue-promise-modals exposes a useModals composable that returns the openModal function that can be used to open modals. The modals are 'resolved' using either the modal-resolve (for successful completion) or modal-reject (for failure) events.

### Example Modal Component
```vue
<!-- GreetModal.vue -->
<template>
  <dialog open>
    <h1>Hello {{ props.name }}!</h1>

    <button @click="emit('modal-reject')">
      Close
    </button>
  </dialog>
</template>

<script setup lang="ts">
// Use props to define modal inputs
const props = defineProps<{
  name: string
}>();

// Use emits to define modal outputs
const emit = defineEmits<{
  (e: 'modal-reject'): void // Emit can also accept a payload
  (e: 'modal-resolve', value: { name: string }): void
}>();
</script>
```

### Summoning the modal
```vue
<script setup lang="ts">
import { useModals } from 'vue-promise-modals';
import GreetModal from "./GreetModal.vue";

const { openModal } = useModals()

async function openDialog() {
  try {
    const result = await openModal(GreetModal, {
      // Props go here (and its type checked!)
      name: `Modal ${counter++}`,
    })

    // The result value will be the same value emitted through the `modal-resolve` event
    console.log(result.name)
  } catch (e) {
    // The error value will be the same value as emitted through the `modal-reject` event
    console.log("Modal Rejected:", e)
  }
}
</script>
```

### Transitions
Transition animations can be applied to the modals by passing in the options in the `vue-promise-modals` Vue plugin. The plugin options follow the same options as the props accepted by the [Vue `TransitionGroup` element](https://vuejs.org/api/built-in-components.html#transitiongroup).

```js
import { createApp } from 'vue'
import App from './App.vue'
import { plugin } from "vue-promise-modals"

createApp(App)
.use(plugin, {
  transition: {
    name: "modal" // Uses the modal-* classes for transition animations for the modals
  }
})
.mount('#app')
```

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