# vue-global-modal

> The vue global modal based on global emitter of npm package [vue-happy-bus](https://www.npmjs.com/package/vue-happy-bus).

Latest version **1.0.4-beta** (published 2023-11-02) · 0 weekly downloads

## Install

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

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4-beta |
| Published | 2023-11-02 |
| First published | 2023-11-02 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | huibizhang |

## Links

- npm: https://www.npmjs.com/package/vue-global-modal
- npm.io page: https://npm.io/package/vue-global-modal

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^3.2.25
- [vue-happy-bus](https://npm.io/package/vue-happy-bus.md) ^2.0.1-vue3

## Recent versions

- 1.0.4-beta (latest) — 2023-11-02
- 1.0.3-beta — 2023-11-02
- 1.0.2-beta — 2023-11-02
- 1.0.1-beta — 2023-11-02
- 1.0.0-beta — 2023-11-02

## README

# vue-global-modal

The vue global modal based on global emitter of npm package [vue-happy-bus](https://www.npmjs.com/package/vue-happy-bus).

---

## Why This?

- **Easy to use**
  Just a few steps, no complicated setup required.
   

- **Only logic & No style**
  Focus on implementing the logic of components, no any default styles.
   

## Usage

#### First Step

Define your modal and put into **`vue-global-modal`**:

```html
<!-- ExampleModal.vue -->

<template>
  <GlobalModal name="test" v-slot="{ onConfirm, onCancel }">
    <button class="btn-confirm" @click="onConfirm">OK</button>
    <button class="btn-cancel" @click="onCancel">Cancel</button>
  </GlobalModal>
</template>

<script setup>
  import GlobalModal from "vue-plugin-modal";
</script>
```

#### Second Step

import and call **`$emit`** anywhere you need:

```html
<script setup>
  import { $emit } from "vue-plugin-modal";

  const emitFromApp = () => {
    $emit("Alert", {
      onConfirm: () => {
        console.log("data saved!!");
      },
    });
  };
</script>

<template>
  <div>
    ...
    <div>
      <!-- something deep in the components -->
      <button @click="emitFromApp">emit!</button>
    </div>
    ...
  </div>
</template>
```

&nbsp;

## Properties

- #### name

  _type: `String`_
  _default: `"globalModal"`_
  _description:_ Event name for emit.

- #### classOnShow

  _type: `String`_
  _default: `""`_
  _description:_ class names apply when modal **showed**.

- #### classOnHide

  _type: `String`_
  _default: `""`_
  _description:_ class names apply when modal **hided**.

- #### styleOnShow

  _type: `Object`_
  _default: `{}`_
  _description:_ styles apply when modal **showed**.

- #### styleOnShow

  _type: `Object`_
  _default: `{}`_
  _description:_ styles apply when modal **hided**.

- #### showLogs

  _type: `Boolean`_
  _default: `false`_
  _description:_ Whether to display the console log when the event is triggered.

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