# vue-promise-modal

> ## Promise를 이용한 Vue.js Modal Component

Latest version **0.2.0** (published 2020-08-26) · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2020-08-26 |
| First published | 2020-07-29 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 14 |
| Unpacked size | 5.8 MB |
| Known vulnerabilities | 0 (+3 in 2 direct dependencies) |
| Install scripts | no |
| Author | Junyup Hong |
| Maintainers | junyup0319 |
| Keywords | vue, vuejs, vue-promise-modal, promise-modal, modal |

## Links

- npm: https://www.npmjs.com/package/vue-promise-modal
- Homepage: https://github.com/junyup0319/skb_project
- Issues: https://github.com/junyup0319/skb_project/issue
- npm.io page: https://npm.io/package/vue-promise-modal

## Dependencies (14)

- [vue](https://npm.io/package/vue.md) ^2.6.11
- [vuex](https://npm.io/package/vuex.md) ^3.4.0
- [core-js](https://npm.io/package/core-js.md) ^3.6.5
- [vuetify](https://npm.io/package/vuetify.md) ^2.2.11
- [babel-jest](https://npm.io/package/babel-jest.md) ^26.3.0
- [vue-router](https://npm.io/package/vue-router.md) ^3.2.0
- [@babel/core](https://npm.io/package/@babel/core.md) ^7.11.1
- [ant-design-vue](https://npm.io/package/ant-design-vue.md) ^1.6.4
- [@babel/preset-env](https://npm.io/package/@babel/preset-env.md) ^7.11.0
- [jest-serializer-vue](https://npm.io/package/jest-serializer-vue.md) ^2.0.2
- [vue-class-component](https://npm.io/package/vue-class-component.md) ^7.2.3
- [vue-property-decorator](https://npm.io/package/vue-property-decorator.md) ^8.4.2
- [register-service-worker](https://npm.io/package/register-service-worker.md) ^1.7.1
- [@babel/preset-typescript](https://npm.io/package/@babel/preset-typescript.md) ^7.10.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.2.0 (latest) — 2020-08-26
- 0.1.31 — 2020-08-13
- 0.1.30 — 2020-08-13
- 0.1.29 — 2020-08-13
- 0.1.28 — 2020-08-04
- 0.1.26 — 2020-07-31
- 0.1.25 — 2020-07-31
- 0.1.24 — 2020-07-31
- 0.1.23 — 2020-07-31
- 0.1.22 — 2020-07-31
- 0.1.21 — 2020-07-31
- 0.1.20 — 2020-07-30
- 0.1.19 — 2020-07-30
- 0.1.18 — 2020-07-29
- 0.1.17 — 2020-07-29
- … 13 more at https://npm.io/package/vue-promise-modal/versions

## README

# skb_project

## Promise를 이용한 Vue.js Modal Component

### 2020 SK Broadband Internship Project

#### 기간

-   2020.07.13 ~ 2020.08.28

#### 기술스택

-   Vue.js
-   HTML
-   SCSS
-   TypeScript
-   ESLint

## Project setup

`npm install`

### Compiles and hot-reloads for development

`npm run serve`

### Compiles and minifies for production

`npm run build`

### Run your unit tests

`npm run test:unit`

### Lints and fixes files

`npm run lint`

## Type

```
export type SizeType = 'normal' | 'small' | 'big' | 'full';
export type AlignType = 'center' | 'left';
export interface UIOptionType {
    size?: SizeType;
    align?: AlignType;
    negativeMessage?: string;
    positiveMessage?: string;
}
```

## Usage

### Modal

```
const uiOption: UIOptionType = {
    size: 'normal', // default: normal
    align: 'center', // default: center
    positiveMessage: '확인', //default: 확인
    negativeMessage: '취소',
};
const content: string = 'DESCRIPTION';
const title: string = 'TITLE';

this.$modal.on(uiOption, content, title);
```

### PromiseModal

```
const uiOption: UIOptionType = {
    size: 'normal', // default: normal
    align: 'center', // default: center
    positiveMessage: '확인', //default: 확인
    negativeMessage: '취소',
};
const content: string = 'DESCRIPTION';
const title: string = 'TITLE';

try {
    await this.$promiseModal.on(uiOption, content, title);
    // resolve - click positive message button
} catch (e) {
    // reject - click negative message button
}
```

### MultiPromiseModal

```
const uiOption: UIOptionType = {
    size: 'normal', // default: normal
    align: 'center', // default: center
    positiveMessage: '확인', //default: 확인
    negativeMessage: '취소',
};
const content: string = 'DESCRIPTION';
const title: string = 'TITLE';
const buttons: string[] = ['1', '2', '3'];

try {
    const idx = await this.$promiseModal.on(uiOption, content, title, buttons);
    // resolve - click positive message button

    // idx: index of clicked button
    switch (idx) {
        case 0: // do 1
            break;
        case 1: // do 2
            break;
        case 2: // do 3
            break;
        default: // do else
    }
} catch (e) {
    // reject - click negative message button
}
```

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