Skip to content

Commit 59d7bc7

Browse files
GodofbrowserGodofbrowser
committed
initial commit
0 parents  commit 59d7bc7

25 files changed

+8315
-0
lines changed

‎.babelrc

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"presets": [
3+
["env", { "modules": false }]
4+
]
5+
}

‎README.md

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
# Vuejs Dialog Plugin
2+
3+
> A robost, promise based alert and confirm dialog.
4+
5+
![Vuejs Dialog Plugin](./src/example/img/html-enabled.png?raw=true "Vuejs Dialog Plugin example")
6+
![Vuejs Dialog Plugin](./src/example/img/demo.gif?raw=true "Vuejs Dialog Plugin usage demo")
7+
8+
## Installation
9+
10+
Todo:: publish plugin
11+
12+
## Basic Usage
13+
```javascript
14+
// Parameters
15+
16+
let message = "Are you sure?";
17+
18+
let options = {
19+
html: false, // set to true if your message contains HTML tags. eg: "Delete <b>Foo</b> ?"
20+
loader: false, // set to true if you want the dailog to show a loader after click on "proceed"
21+
type: 'simple', // coming soon: 'soft', 'hard'
22+
verification: 'continue', // for hard confirm, user will be prompted to type this to enable the proceed button
23+
clicks: 3, // for soft confirm, user will be asked to click on "proceed" btn 3 times before actually proceeding
24+
};
25+
26+
vm.$dialog.confirm(message, options)
27+
.then(function () {
28+
// This will be triggered when user clicks on proceed
29+
})
30+
.catch(function () {
31+
// This will be triggered when user clicks on cancel
32+
});
33+
```
34+
35+
```javascript
36+
// Anywhere in your Vuejs App.
37+
38+
vm.$dialog.confirm('Please confirm to continue')
39+
.then(function () {
40+
console.log('Clicked on proceed')
41+
})
42+
.catch(function () {
43+
console.log('Clicked on cancel')
44+
});
45+
```
46+
47+
48+
## Usage with ajax - Loader enabled
49+
```javascript
50+
// Anywhere in your Vuejs App.
51+
52+
vm.$dialog.confirm("If you delete this record, it'll be gone forever.", {
53+
loader: true // default: false - when set to true, the proceed button shows a loader when clicked.
54+
// And a dialog object will be passed to the then() callback
55+
})
56+
.then((dialog) => {
57+
// Triggered when proceed button is clicked
58+
59+
// dialog.loading(false) // stops the proceed button's loader
60+
// dialog.loading(true) // starts the proceed button's loader again
61+
// dialog.close() // stops the loader and close the dialog
62+
63+
// do some stuff like ajax request.
64+
setTimeout(() => {
65+
console.log('Delete action completed ');
66+
dialog.close();
67+
}, 2500);
68+
69+
})
70+
.catch(() => {
71+
// Triggered when cancel button is clicked
72+
73+
console.log('Delete aborted');
74+
});
75+
```

‎dist/vuejs-dialog.js

Lines changed: 186 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/vuejs-dialog.min.js

Lines changed: 7 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/vuejs-dialog.min.js.map

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example/app.main.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
*{box-sizing:border-box}body{margin:0;padding:0}

‎example/app.main.js

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example/index.html

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>VueJs Plugin usage example</title>
6+
<link href="app.main.css?422153db09f17b34f100" rel="stylesheet"></head>
7+
<body>
8+
<div id="app"></div>
9+
<script type="text/javascript" src="app.main.js?422153db09f17b34f100"></script></body>
10+
</html>

0 commit comments

Comments
 (0)