Make alert() return a promise.

constkhi · Oct 25, 2019 · 859a175 · 859a175
1 parent 6f9e22c
commit 859a175
Show file tree

Hide file tree

Showing 23 changed files with 827 additions and 372 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,16 @@
+# EditorConfig defines and maintains consistent coding styles between different
+# editors and IDEs: http://EditorConfig.org/
+
+# Top-most EditorConfig file
+root = true
+
+# All files
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+quote_type = double
+insert_final_newline = true
+trim_trailing_whitespace = true
+max_line_length = 80
diff --git a/.eslintignore b/.eslintignore
@@ -1,2 +1,3 @@
 **/node_modules/*
 **/dist/*
+**/lib/*
diff --git a/.gitignore b/.gitignore
@@ -11,3 +11,4 @@ node_modules/
 
 # Dist
 /dist/
+/lib/
diff --git a/README.md b/README.md
@@ -1,15 +1,24 @@
 # Vue Simple Alert
 
-A simplest but beautiful *alert()*, *confirm()*, *prompt()* for Vue.js, using sweetalert2.
+![downloads](https://img.shields.io/npm/dw/vue-simple-alert)
+![version](https://img.shields.io/npm/v/vue-simple-alert)
+![license](https://img.shields.io/npm/l/vue-simple-alert)
+
+Simple but cool _**alert()**_, _**confirm()**_, _**prompt()**_ for Vue.js.
 
 ## Demo
 
-[https://constkhi.github.io/vue-simple-alert/](https://constkhi.github.io/vue-simple-alert/)
+<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">
+
+Check out live
+<a href="https://constkhi.github.io/vue-simple-alert/" target="_blank">demo <i class="fas fa-external-link-alt"></i></a>
 
 ## Features
 
-- Provides simple *alert()*, *confirm()*, *prompt()* like DOM Window methods.
-- Installed as a Vue plugin.
+- Provides simple _alert()_, _confirm()_, _prompt()_ like DOM Window methods.
+- Based on sweetalert2.
+- Installed as a Vue.js plugin.
+- Promise based API.
 - Support typescript.
 
 ## Install
@@ -60,7 +69,7 @@ this.$prompt("Input your name").then((text) => {
 
 ## Advanced Usage
 
-You can use sweetalert2's *fire()* method through *$fire()*.
+You can use sweetalert2's _**fire()**_ method through _**$fire()**_.
 For detailed usage, refer to [sweetalert2](https://sweetalert2.github.io) documentation.
 
 ```javascript
@@ -76,6 +85,80 @@ this.$fire({
 });
 ```
 
+## API
+
+### alert(message?, title?, type?)
+
+The _alert()_ method displays an alert box with a specified message and an OK button.
+
+- message: string
+
+> Optional. Specifies the text to display in the alert box
+
+- title: string
+
+> Optional. Specifies title of the alert box
+
+- type: 'success' | 'error' | 'warning' | 'info' | 'question'
+
+> Optional. Specifies icon type.
+
+- returns: Promise\<boolean\>
+
+> Will be resolved when OK button clicked. If alert box closed by any other reason, this promise will be rejected.
+
+### confirm(message?, title?, type?, reverseButton?)
+
+The confirm() method displays a dialog box with a specified message, along with an OK and a Cancel button.
+
+- message: string
+
+> Optional. Specifies the text to display in the confirm box
+
+- title: string
+
+> Optional. Specifies title of the confirm box
+
+- type: 'success' | 'error' | 'warning' | 'info' | 'question'
+
+> Optional. Specifies icon type.
+
+- reverseButton: boolean
+
+> Optional. Set to true if you want to invert default buttons positions.
+
+- returns: Promise\<boolean\>
+
+> Will be resolved when OK button clicked. If confirm box closed by any other reason, this promise will be rejected.
+
+### prompt(message, defaultText?, title?, type?, reverseButton?)
+
+The prompt() method displays a dialog box that prompts the user for input.
+
+- message: string
+
+> Required. Specifies the text to display in the dialog box
+
+- defaultText: string
+
+> Optional. The default input text
+
+- title: string
+
+> Optional. Specifies title of the confirm box
+
+- type: 'success' | 'error' | 'warning' | 'info' | 'question'
+
+> Optional. Specifies icon type.
+
+- reverseButton: boolean
+
+> Optional. Set to true if you want to invert default buttons positions.
+
+- returns: Promise\<string\>
+
+> Will be resolved with input text when OK button clicked. If the user clicks OK without entering any text, promise will be resolved with an empty string. If dialog box closed by any other reason, this promise will be rejected.
+
 ## Versioning
 
 We use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/constkhi/vue-simple-alert/tags).

diff --git a/docs/_config.yml b/docs/_config.yml
diff --git a/docs/index.html b/docs/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/vue-simple-alert/favicon.ico><link rel=stylesheet href=https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css><title>vue-simple-alert example</title><link href=/vue-simple-alert/css/app.css rel=preload as=style><link href=/vue-simple-alert/js/app.js rel=preload as=script><link href=/vue-simple-alert/css/app.css rel=stylesheet></head><body><noscript><strong>We're sorry but example doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script defer src=https://use.fontawesome.com/releases/v5.8.1/js/all.js integrity=sha384-g5uSoOSBd7KkhAMlnQILrecXvzst9TdC09/VM+pjDTCM+1il8RHz5fKANTFFb+gQ crossorigin=anonymous></script><script src=/vue-simple-alert/js/app.js></script></body></html>
+<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=/vue-simple-alert/favicon.ico><link rel=stylesheet href=https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css><title>vue-simple-alert example</title><link href=/vue-simple-alert/css/app.css rel=preload as=style><link href=/vue-simple-alert/js/app.js rel=preload as=script><link href=/vue-simple-alert/js/chunk-vendors.js rel=preload as=script><link href=/vue-simple-alert/css/app.css rel=stylesheet></head><body><noscript><strong>We're sorry but example doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script defer src=https://use.fontawesome.com/releases/v5.8.1/js/all.js integrity=sha384-g5uSoOSBd7KkhAMlnQILrecXvzst9TdC09/VM+pjDTCM+1il8RHz5fKANTFFb+gQ crossorigin=anonymous></script><script src=/vue-simple-alert/js/chunk-vendors.js></script><script src=/vue-simple-alert/js/app.js></script></body></html>
diff --git a/docs/js/app.js b/docs/js/app.js
diff --git a/docs/js/app.js.map b/docs/js/app.js.map
diff --git a/docs/js/chunk-vendors.js b/docs/js/chunk-vendors.js
diff --git a/docs/js/chunk-vendors.js.map b/docs/js/chunk-vendors.js.map
diff --git a/example/.editorconfig b/example/.editorconfig
@@ -0,0 +1,16 @@
+# EditorConfig defines and maintains consistent coding styles between different
+# editors and IDEs: http://EditorConfig.org/
+
+# Top-most EditorConfig file
+root = true
+
+# All files
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+quote_type = double
+insert_final_newline = true
+trim_trailing_whitespace = true
+max_line_length = 80
diff --git a/example/.eslintignore b/example/.eslintignore
@@ -1,2 +1,3 @@
+**/.history/*
 **/node_modules/*
-**/dist/*
+**/public/*
diff --git a/example/README.md b/example/README.md
@@ -1,24 +1,29 @@
 # example
 
 ## Project setup
-```
+
+```shell
 npm install
 ```
 
 ### Compiles and hot-reloads for development
-```
+
+```shell
 npm run serve
 ```
 
 ### Compiles and minifies for production
-```
+
+```shell
 npm run build
 ```
 
 ### Lints and fixes files
-```
+
+```shell
 npm run lint
 ```
 
 ### Customize configuration
+
 See [Configuration Reference](https://cli.vuejs.org/config/).