diff --git a/.babelrc b/.babelrc
index 900e857f3..f64da13b3 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,11 +1,6 @@
{
"presets": [
- ["env", { "modules": false }]
- ],
- "plugins": [
- ["transform-runtime", {
- "polyfill": false,
- "regenerator": true
- }]
+ "env",
+ "stage-2"
]
}
diff --git a/.eslintrc b/.eslintrc
new file mode 100644
index 000000000..75271ce11
--- /dev/null
+++ b/.eslintrc
@@ -0,0 +1,22 @@
+{
+ "parser": "babel-eslint",
+ "extends": [
+ "standard"
+ ],
+ "plugins": [
+ "babel"
+ ],
+ "env": {
+ "es6": true
+ },
+ "rules": {
+ "semi" : 0,
+ "indent" : [2, "tab"],
+ "no-tabs" : 0,
+ "no-trailing-spaces" : 0,
+ "key-spacing" : 0,
+ "jsx-quotes" : [2, "prefer-single"],
+ "max-len" : [2, 120, 2],
+ "object-curly-spacing" : [2, "always"]
+ }
+}
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
new file mode 100644
index 000000000..6f40582dd
--- /dev/null
+++ b/.eslintrc.cjs
@@ -0,0 +1,15 @@
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution')
+
+module.exports = {
+ root: true,
+ 'extends': [
+ 'plugin:vue/vue3-essential',
+ 'eslint:recommended',
+ '@vue/eslint-config-typescript',
+ '@vue/eslint-config-prettier/skip-formatting'
+ ],
+ parserOptions: {
+ ecmaVersion: 'latest'
+ }
+}
diff --git a/.github/workflows/docs.yml b/.github/workflows/docs.yml
new file mode 100644
index 000000000..8048e705f
--- /dev/null
+++ b/.github/workflows/docs.yml
@@ -0,0 +1,51 @@
+name: docs
+
+on:
+ # trigger deployment on every push to main branch
+ push:
+ branches: [master]
+ # trigger deployment manually
+ workflow_dispatch:
+
+jobs:
+ docs:
+ runs-on: ubuntu-latest
+
+ steps:
+ - uses: actions/checkout@v4
+ with:
+ # fetch all commits to get last updated time or other git log info
+ fetch-depth: 0
+
+ - name: Setup pnpm
+ uses: pnpm/action-setup@v2
+ with:
+ # choose pnpm version to use
+ version: 8
+ # install deps with pnpm
+ run_install: true
+
+ - name: Setup Node.js
+ uses: actions/setup-node@v4
+ with:
+ # choose node.js version to use
+ node-version: 20
+ # cache deps for pnpm
+ cache: pnpm
+
+ # run build script
+ - name: Build VuePress site
+ run: pnpm docs:build
+
+ # please check out the docs of the workflow for more details
+ # @see https://github.com/crazy-max/ghaction-github-pages
+ - name: Deploy to GitHub Pages
+ uses: crazy-max/ghaction-github-pages@v4
+ with:
+ # deploy to gh-pages branch
+ target_branch: gh-pages
+ # deploy the default output dir of VuePress
+ build_dir: docs/.vuepress/dist
+ env:
+ # @see https://docs.github.com/en/actions/reference/authentication-in-a-workflow#about-the-github_token-secret
+ GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 000000000..3dfa8ebe0
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,31 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+dist-app
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*.tsbuildinfo
diff --git a/.npmignore b/.npmignore
index 6e9d1e363..669db287a 100644
--- a/.npmignore
+++ b/.npmignore
@@ -1,5 +1,8 @@
-.idea
-.gitignore
-node_modules
-src
-*.log
\ No newline at end of file
+# Ignore everything
+*
+
+# Don't ignore the dist/ folder's content
+!dist/*
+
+# Don't ignore the package.json file
+!package.json
diff --git a/.nvmrc b/.nvmrc
new file mode 100644
index 000000000..7950a4457
--- /dev/null
+++ b/.nvmrc
@@ -0,0 +1 @@
+v18.17.0
diff --git a/.prettierrc.json b/.prettierrc.json
new file mode 100644
index 000000000..66e23359c
--- /dev/null
+++ b/.prettierrc.json
@@ -0,0 +1,8 @@
+{
+ "$schema": "https://json.schemastore.org/prettierrc",
+ "semi": false,
+ "tabWidth": 2,
+ "singleQuote": true,
+ "printWidth": 100,
+ "trailingComma": "none"
+}
\ No newline at end of file
diff --git a/.travis.yml b/.travis.yml
new file mode 100644
index 000000000..41e658fc2
--- /dev/null
+++ b/.travis.yml
@@ -0,0 +1,8 @@
+language: node_js
+node_js:
+ - 8
+cache:
+ directories:
+ - node_modules
+script:
+- npm run test
diff --git a/LICENSE b/LICENSE
deleted file mode 100644
index 06bafe042..000000000
--- a/LICENSE
+++ /dev/null
@@ -1,20 +0,0 @@
-The MIT License (MIT)
-
-Copyright (c) 2017 Ajeh Emeke
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of
-this software and associated documentation files (the "Software"), to deal in
-the Software without restriction, including without limitation the rights to
-use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
-the Software, and to permit persons to whom the Software is furnished to do so,
-subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
-FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
-COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
-IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
-CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/README.md b/README.md
index 3460c219e..dbe4f3bac 100644
--- a/README.md
+++ b/README.md
@@ -1,174 +1,40 @@
-# Vuejs Dialog Plugin
+# Vuejs Dialog
> A lightweight, promise based alert, prompt and confirm dialog.
[](https://badge.fury.io/js/vuejs-dialog)
-[](https://scrutinizer-ci.com/g/Godofbrowser/vuejs-dialog/build-status/master)
-[](https://scrutinizer-ci.com/g/Godofbrowser/vuejs-dialog/?branch=master)
+[](https://travis-ci.org/Godofbrowser/vuejs-dialog)
+[](https://scrutinizer-ci.com/g/Godofbrowser/vuejs-dialog/?branch=master)
+[](https://github.com/Godofbrowser/vuejs-dialog/archive/master.zip)
-
-
+
+
-## Demo
+The content below is for the Vue3 compatible version of vuejs-dialog, you can find the Vue2 compatible version [here](https://github.com/Godofbrowser/vuejs-dialog/tree/v1.x)
-[https://godofbrowser.github.io/vuejs-dialog/](https://godofbrowser.github.io/vuejs-dialog/)
+| Vue Version | Plugin Version |
+|-------------|-----------------------------------------------------------------|
+| Vue 2 | [1.x](https://github.com/Godofbrowser/vuejs-dialog/tree/v1.x) |
+| Vue 3 | [2.x](https://github.com/Godofbrowser/vuejs-dialog/tree/master) |
-## Installation
+## Installing the release candidate (vue3)
-#### HTML
-Include the script:
-
- ```html
- // Include vuejs
-
-
- // Include the vuejs-dialog plugin
-
-
-
- ```
-#### NPM
-```javascript
-// installation via npm
-npm install vuejs-dialog
-
-// import into project
-import Vue from "vue"
-import VuejsDialog from "vuejs-dialog"
-
-// Tell Vue to install the plugin.
-Vue.use(VuejsDialog)
-```
-
-## Basic Usage
-
-```javascript
-// Anywhere in your Vuejs App.
-
-this.$dialog.confirm('Please confirm to continue')
- .then(function () {
- console.log('Clicked on proceed')
- })
- .catch(function () {
- console.log('Clicked on cancel')
- });
-```
-
-
-## Usage with ajax - Loader enabled
-```javascript
-// Anywhere in your Vuejs App.
-
-this.$dialog.confirm("If you delete this record, it'll be gone forever.", {
- loader: true // default: false - when set to true, the proceed button shows a loader when clicked.
- // And a dialog object will be passed to the then() callback
-})
- .then((dialog) => {
- // Triggered when proceed button is clicked
-
- // dialog.loading(false) // stops the proceed button's loader
- // dialog.loading(true) // starts the proceed button's loader again
- // dialog.close() // stops the loader and close the dialog
-
- // do some stuff like ajax request.
- setTimeout(() => {
- console.log('Delete action completed ');
- dialog.close();
- }, 2500);
-
- })
- .catch(() => {
- // Triggered when cancel button is clicked
-
- console.log('Delete aborted');
- });
-```
-
-## Usage as a directive (new)
-
-If you don't pass a message, the global/default message would be used.
-```html
-
-```
-
-
-```html
-// Callbacks can be provided
-// Note: If "loader" is set to true, the makeAdmin callback will be passed a "dialog" object
-// Which is useful for stoping the loader, or closing the dialog.
-
-```
-```javascript
-methods: {
- makeAdmin: function() {
- // Do stuffs
-
- },
- doNothing: function() {
- // Do nothing or some other stuffs
- }
-}
-```
-
-
-For v-confirm directive, if an "OK" callback is not provided, the default event would be triggered.
-
-```html
-// You can use it on links too
-Go to example.com
+To install the Vue3 compatible version while it's not released officially yet, please use either of the command below with the "next" tag.
+```shell
+npm install --save vuejs-dialog@next
```
-
-### Options
-```javascript
-// Parameters and options
-
-let message = "Are you sure?";
-
-let options = {
- html: false, // set to true if your message contains HTML tags. eg: "Delete Foo ?"
- loader: false, // set to true if you want the dailog to show a loader after click on "proceed"
- reverse: false, // switch the button positions (left to right, and vise versa)
- okText: 'Continue',
- cancelText: 'Close',
- animation: 'zoom', // Available: "zoom", "bounce", "fade"
- type: 'basic', // coming soon: 'soft', 'hard'
- verification: 'continue', // for hard confirm, user will be prompted to type this to enable the proceed button
- clicks: 3, // for soft confirm, user will be asked to click on "proceed" btn 3 times before actually proceeding
-};
-
-this.$dialog.confirm(message, options)
- .then(function () {
- // This will be triggered when user clicks on proceed
- })
- .catch(function () {
- // This will be triggered when user clicks on cancel
- });
+```shell
+pnpm add vuejs-dialog@next
```
-### Global Configuration
-```javascript
-// You can also set all your defaults at the point of installation.
-// This will be your global configuration
-
-Vue.use(VuejsDialog, {
- html: true,
- loader: true,
- okText: 'Proceed',
- cancelText: 'Cancel',
- animation: 'bounce',
-})
-
-// Please note that local configurations will be considered before global configurations.
-// This gives you the flexibility of overriding the global config on individual call.
+```shell
+pnpm add vuejs-dialog@next
```
-# License
-[MIT](http://opensource.org/licenses/MIT)
+## Links
-## Contributing
+- [Documentation](https://godofbrowser.github.io/vuejs-dialog/)
+- [Features](https://godofbrowser.github.io/vuejs-dialog/features)
+- [v1.x (vue2) documentation](https://godofbrowser.github.io/vuejs-dialog/1.x)
-Let's make it better :)
\ No newline at end of file
diff --git a/dist/vuejs-dialog.min.js b/dist/vuejs-dialog.min.js
deleted file mode 100644
index 746938823..000000000
--- a/dist/vuejs-dialog.min.js
+++ /dev/null
@@ -1,2 +0,0 @@
-!function(t,n){"object"==typeof exports&&"object"==typeof module?module.exports=n():"function"==typeof define&&define.amd?define([],n):"object"==typeof exports?exports.VuejsDialog=n():t.VuejsDialog=n()}(this,function(){return function(t){function n(o){if(e[o])return e[o].exports;var r=e[o]={i:o,l:!1,exports:{}};return t[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}var e={};return n.m=t,n.c=e,n.d=function(t,e,o){n.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:o})},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,n){return Object.prototype.hasOwnProperty.call(t,n)},n.p="/dist/",n(n.s=31)}([function(t,n,e){var o=e(26)("wks"),r=e(27),i=e(2).Symbol,a="function"==typeof i;(t.exports=function(t){return o[t]||(o[t]=a&&i[t]||(a?i:r)("Symbol."+t))}).store=o},function(t,n){t.exports=function(t,n,e,o){var r,i=t=t||{},a=typeof t.default;"object"!==a&&"function"!==a||(r=t,i=t.default);var c="function"==typeof i?i.options:i;if(n&&(c.render=n.render,c.staticRenderFns=n.staticRenderFns),e&&(c._scopeId=e),o){var s=c.computed||(c.computed={});Object.keys(o).forEach(function(t){var n=o[t];s[t]=function(){return n}})}return{esModule:r,exports:i,options:c}}},function(t,n){var e=t.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=e)},function(t,n){t.exports=function(){var t=[];return t.toString=function(){for(var t=[],n=0;n0?o:e)(t)}},function(t,n){t.exports=function(t){if(void 0==t)throw TypeError("Can't call method on "+t);return t}},function(t,n){var e=t.exports={version:"2.5.1"};"number"==typeof __e&&(__e=e)},function(t,n){t.exports=function(t){return"object"==typeof t?null!==t:"function"==typeof t}},function(t,n){t.exports=function(t,n){return{enumerable:!(1&t),configurable:!(2&t),writable:!(4&t),value:n}}},function(t,n){t.exports={}},function(t,n,e){var o=e(26)("keys"),r=e(27);t.exports=function(t){return o[t]||(o[t]=r(t))}},function(t,n,e){function o(t){for(var n=0;ne.parts.length&&(o.parts.length=e.parts.length)}else{for(var a=[],r=0;r0?r(o(t),9007199254740991):0}},function(t,n,e){var o=e(2),r=o["__core-js_shared__"]||(o["__core-js_shared__"]={});t.exports=function(t){return r[t]||(r[t]={})}},function(t,n){var e=0,o=Math.random();t.exports=function(t){return"Symbol(".concat(void 0===t?"":t,")_",(++e+o).toString(36))}},function(t,n){t.exports="constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf".split(",")},function(t,n,e){var o=e(5).f,r=e(8),i=e(0)("toStringTag");t.exports=function(t,n,e){t&&!r(t=e?t:t.prototype,i)&&o(t,i,{configurable:!0,value:n})}},function(t,n,e){var o=e(11);t.exports=function(t){return Object(o(t))}},function(t,n,e){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var o=e(32),r=e.n(o),i=e(9),a=e(53),c=e(18),s=function(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};this.globalOptions=n,this.Dialog=function(){var n=t.extend(r.a),e=document.createElement("div");return document.querySelector("body").appendChild(e),(new n).$mount(e)}()};s.prototype.alert=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return t&&(n.message=t),this.open(i.d.ALERT,n)},s.prototype.confirm=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return t&&(n.message=t),this.open(i.d.CONFIRM,n)},s.prototype.open=function(t){var n=this,e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};return new Promise(function(o,r){e.id="dialog."+Date.now(),e.window=t,e.promiseResolver=o,e.promiseRejecter=r,n.Dialog.commit(Object(c.a)(i.c,n.globalOptions,e))})},s.install=function(t,n){var e=new a.a(t);t.directive("confirm",e.confirmDefinition),t.dialog=new s(t,n),Object.defineProperties(t.prototype,{$dialog:{get:function(){return t.dialog}}})},n.default=s},function(t,n,e){var o=e(1)(e(33),e(52),null,null);t.exports=o.exports},function(t,n,e){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var o=e(34),r=e.n(o);n.default={data:function(){return{dialogs:[]}},methods:{commit:function(t){this.dialogs.push({options:t})},closeDialog:function(t){this.dialogs.splice(t,1)}},components:{DialogWindow:r.a}}},function(t,n,e){e(35);var o=e(1)(e(40),e(51),null,null);t.exports=o.exports},function(t,n,e){var o=e(36);"string"==typeof o&&(o=[[t.i,o,""]]),o.locals&&(t.exports=o.locals);e(17)("5204f3be",o,!0)},function(t,n,e){n=t.exports=e(3)(),n.i(e(37),""),n.i(e(38),""),n.push([t.i,"",""])},function(t,n,e){n=t.exports=e(3)(),n.push([t.i,".fadeTr-enter-active{transition:opacity .3s ease-in;transition-delay:.1s}.fadeTr-leave-active{transition:opacity .1s ease-out}.fadeTr-enter,.fadeTr-leave-to{opacity:0}.slide-enter-active,.slide-leave-active{transition:all 1s}.slide-enter,.slide-leave-to{opacity:0;transform:translateX(30px)}.dg-backdrop-enter-active{animation:dg-fadeIn .16s}.dg-backdrop-leave-active{animation:dg-fadeOut .16s}.dg-fade-enter-active{animation:dg-fadeIn .6s}.dg-fade-leave-active{animation:dg-fadeOut .5s}@keyframes dg-fadeIn{0%{opacity:0}to{opacity:1}}@keyframes dg-fadeOut{0%{opacity:1}to{opacity:0}}.dg-zoom-enter-active{animation:dg-zoomIn .3s}.dg-zoom-leave-active{animation:dg-zoomOut .3s}@keyframes dg-zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes dg-zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}.dg-bounce-enter-active{animation:dg-bounceIn .6s}.dg-bounce-leave-active{animation:dg-zoomOut .6s}@keyframes dg-bounceIn{0%{opacity:0;transform:scale(.3)}40%{opacity:1;transform:scale(1.06)}60%{transform:scale(.92)}to{transform:scale(1)}}@keyframes dg-bounceOut{0%{transform:scale(1)}25%{transform:scale(.95)}50%{opacity:1;transform:scale(1.1)}to{opacity:0;transform:scale(.3)}}",""])},function(t,n,e){n=t.exports=e(3)(),n.push([t.i,"@import url(https://fonts.googleapis.com/css?family=Noto+Sans:400,700);",""]),n.push([t.i,'.dg-container *{box-sizing:border-box}.dg-backdrop{background-color:rgba(0,0,0,.8);z-index:50000}.dg-backdrop,.dg-container{position:fixed;top:0;left:0;width:100%;height:100%}.dg-container{z-index:50001}.dg-content-cont{width:100%;font-family:Noto Sans,sans-serif}.dg-main-content{width:98%;max-width:400px;padding:15px;border-radius:5px;margin:25px auto;background-color:#fff}.dg-content{font-size:16px;padding:10px 0}.dg-footer{position:relative;margin-top:15px;padding:15px 0 0;border-top:1px solid #e1e6ea}.dg-content-cont--floating{position:absolute;top:35%;transform:translateY(-70%);margin-top:0}.dg-btn{display:inline-block;position:relative;min-width:80px;padding:6px 20px;border-radius:4px;outline:0;border:2px solid transparent;text-align:center;text-decoration:none;cursor:pointer;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-size:16px;font-weight:700}.dg-btn.dg-btn--cancel{color:#fefefe;background-color:#0096d9}.dg-btn.dg-btn--ok{color:#0096d9;background-color:#fefefe;border-color:#0096d9}.dg-pull-right{float:right}.dg-btn.dg-btn--loading .dg-btn-content{visibility:hidden}.dg-clear:before{content:" ";display:block;clear:both}',""])},function(t,n){t.exports=function(t,n){for(var e=[],o={},r=0;r0&&void 0!==arguments[0]?arguments[0]:null;null===t&&(t=!this.loading),this.loading=!!t},close:function(){this.show=!1},anmiationEnded:function(){this.canceled&&this.options.promiseRejecter(!1),this.$emit("close")},escapeKeyListener:function(t){27===t.keyCode&&(this.cancelBtnDisabled?this.proceed():this.cancel())}},created:function(){document.addEventListener("keydown",this.escapeKeyListener)},destroyed:function(){document.removeEventListener("keydown",this.escapeKeyListener)},components:{CancelBtn:a.a,OkBtn:r.a}}},function(t,n,e){var o=e(1)(e(42),e(47),null,null);t.exports=o.exports},function(t,n,e){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var o=e(43),r=e.n(o),i=e(9);n.default={data:function(){return{clicks_count:0}},props:["enabled","options","focus","loading"],mounted:function(){this.focus&&this.$refs.btn.focus()},computed:{soft_confirm:function(){return this.options.type===i.b.SOFT},clicks_remaining:function(){return Math.max(this.options.clicksCount-this.clicks_count,0)}},methods:{proceed:function(){this.validateProceed()&&this.$emit("click")},validateProceed:function(){switch(this.options.type){case i.b.SOFT:return++this.clicks_count>=this.options.clicksCount;case i.b.BASIC:default:return!0}}},components:{BtnLoader:r.a}}},function(t,n,e){e(44);var o=e(1)(null,e(46),null,null);t.exports=o.exports},function(t,n,e){var o=e(45);"string"==typeof o&&(o=[[t.i,o,""]]),o.locals&&(t.exports=o.locals);e(17)("6062526c",o,!0)},function(t,n,e){n=t.exports=e(3)(),n.push([t.i,".dg-btn-loader{width:100%;height:100%;position:absolute;display:flex;align-items:center;top:0;left:0}#dg-circleG{width:67px;margin:auto}.dg-circleG{background-color:#fff;float:left;height:14px;margin-left:8px;width:14px;animation-name:dg-bounce_circleG;-o-animation-name:dg-bounce_circleG;-ms-animation-name:dg-bounce_circleG;-webkit-animation-name:dg-bounce_circleG;-moz-animation-name:dg-bounce_circleG;animation-duration:.5875s;-o-animation-duration:.5875s;-ms-animation-duration:.5875s;-webkit-animation-duration:.5875s;-moz-animation-duration:.5875s;animation-iteration-count:infinite;-o-animation-iteration-count:infinite;-ms-animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;-moz-animation-iteration-count:infinite;animation-direction:normal;-o-animation-direction:normal;-ms-animation-direction:normal;-webkit-animation-direction:normal;-moz-animation-direction:normal;border-radius:9px;-o-border-radius:9px;-ms-border-radius:9px;-webkit-border-radius:9px;-moz-border-radius:9px}#dg-circleG_1{animation-delay:.1195s;-o-animation-delay:.1195s;-ms-animation-delay:.1195s;-webkit-animation-delay:.1195s;-moz-animation-delay:.1195s}#dg-circleG_2{animation-delay:.2755s;-o-animation-delay:.2755s;-ms-animation-delay:.2755s;-webkit-animation-delay:.2755s;-moz-animation-delay:.2755s}#dg-circleG_3{animation-delay:.3485s;-o-animation-delay:.3485s;-ms-animation-delay:.3485s;-webkit-animation-delay:.3485s;-moz-animation-delay:.3485s}@keyframes dg-bounce_circleG{50%{background-color:#09a2e3}}@-o-keyframes dg-bounce_circleG{50%{background-color:#09a2e3}}@-ms-keyframes dg-bounce_circleG{50%{background-color:#09a2e3}}@-webkit-keyframes dg-bounce_circleG{50%{background-color:#09a2e3}}@-moz-keyframes dg-bounce_circleG{50%{background-color:#09a2e3}}",""])},function(t,n){t.exports={render:function(){var t=this,n=t.$createElement;t._self._c;return t._m(0)},staticRenderFns:[function(){var t=this,n=t.$createElement,e=t._self._c||n;return e("span",{staticClass:"dg-btn-loader"},[e("span",{attrs:{id:"dg-circleG"}},[e("span",{staticClass:"dg-circleG",attrs:{id:"dg-circleG_1"}}),t._v(" "),e("span",{staticClass:"dg-circleG",attrs:{id:"dg-circleG_2"}}),t._v(" "),e("span",{staticClass:"dg-circleG",attrs:{id:"dg-circleG_3"}})])])}]}},function(t,n){t.exports={render:function(){var t=this,n=t.$createElement,e=t._self._c||n;return t.enabled?e("button",{ref:"btn",class:["dg-btn","dg-btn--ok",{"dg-btn--loading":t.loading},{"dg-pull-right":!t.options.reverse}],on:{click:function(n){n.preventDefault(),t.proceed()}}},[e("span",{staticClass:"dg-btn-content"},[t._t("default"),t._v(" "),t.soft_confirm?e("span",[t._v("("+t._s(t.clicks_remaining)+")")]):t._e()],2),t._v(" "),t.loading?e("btn-loader",{tag:"span"}):t._e()]):t._e()},staticRenderFns:[]}},function(t,n,e){var o=e(1)(e(49),e(50),null,null);t.exports=o.exports},function(t,n,e){"use strict";Object.defineProperty(n,"__esModule",{value:!0}),n.default={props:["enabled","options","focus","loading"],mounted:function(){this.focus&&this.$refs.btn.focus()}}},function(t,n){t.exports={render:function(){var t=this,n=t.$createElement,e=t._self._c||n;return t.enabled?e("button",{ref:"btn",class:["dg-btn","dg-btn--cancel",{"dg-pull-right":t.options.reverse}],on:{click:function(n){n.preventDefault(),t.$emit("click")}}},[t._t("default")],2):t._e()},staticRenderFns:[]}},function(t,n){t.exports={render:function(){var t=this,n=t.$createElement,e=t._self._c||n;return e("div",[e("transition",{attrs:{name:t.animation,appear:""},on:{"after-leave":function(n){t.backdrop=!1}}},[t.show?e("div",{ref:"container",staticClass:"dg-container"},[e("div",{staticClass:"dg-content-cont dg-content-cont--floating"},[e("div",{staticClass:"dg-main-content"},[t.options.html?e("div",{staticClass:"dg-content",domProps:{innerHTML:t._s(t.options.message)}}):e("div",{staticClass:"dg-content"},[t._v(t._s(t.options.message))]),t._v(" "),e("div",{staticClass:"dg-footer"},[e(t.leftBtnComponent,{tag:"button",attrs:{loading:t.loading,enabled:t.leftBtnEnabled,options:t.options,focus:t.leftBtnFocus},on:{click:function(n){t.clickLeftBtn()}}},[e("span",[t._v(t._s(t.options.reverse?t.options.okText:t.options.cancelText))])]),t._v(" "),e(t.rightBtnComponent,{tag:"button",attrs:{loading:t.loading,enabled:t.rightBtnEnabled,options:t.options,focus:t.rightBtnFocus},on:{click:function(n){t.clickRightBtn()}}},[e("span",[t._v(t._s(t.options.reverse?t.options.cancelText:t.options.okText))])]),t._v(" "),e("div",{staticClass:"dg-clear"})])])])]):t._e()]),t._v(" "),e("transition",{attrs:{name:"dg-backdrop",appear:""},on:{"after-leave":t.anmiationEnded,"after-enter":function(n){t.show=!0}}},[t.backdrop?e("div",{staticClass:"dg-backdrop"}):t._e()])],1)},staticRenderFns:[]}},function(t,n){t.exports={render:function(){var t=this,n=t.$createElement,e=t._self._c||n;return t.dialogs.length>0?e("div",t._l(t.dialogs,function(n,o){return e("dialog-window",{attrs:{options:n.options},on:{close:function(n){t.closeDialog(o)}}})})):t._e()},staticRenderFns:[]}},function(t,n,e){"use strict";var o=e(18),r=function(t){this.Vue=t,this.confirmDefinition=this.defineConfirm(),this.alertDefinition=this.defineAlert()};r.prototype.defineConfirm=function(){var t=this,n={},e=function(n,e,r){n.preventDefault(),n.stopImmediatePropagation();var i=function(){return r.value&&r.value.message?r.value.message:"string"==typeof r.value?r.value:null}(),a=function(){return r.value&&r.value.ok?r.value.ok:function(){e.removeEventListener("click",e.VuejsDialog.clickHandler,!0),t.Vue.nextTick(function(){!function(t){if(document.createEvent){var n=document.createEvent("MouseEvents");n.initEvent("click",!0,!1),t.dispatchEvent(n)}else document.createEventObject?t.fireEvent("onclick"):"function"==typeof t.onclick&&t.onclick()}(e),e.addEventListener("click",e.VuejsDialog.clickHandler,!0)})}}(),c=function(){return r.value&&r.value.cancel?r.value.cancel:o.b}();t.Vue.dialog.confirm(i).then(a).catch(c)};return n.bind=function(t,n){void 0===t.VuejsDialog&&(t.VuejsDialog={}),t.VuejsDialog.clickHandler=function(o){e(o,t,n)},t.addEventListener("click",t.VuejsDialog.clickHandler,!0)},n.unbind=function(t){t.removeEventListener("click",t.VuejsDialog.clickHandler,!0)},n},r.prototype.defineAlert=function(){},n.a=r},function(t,n,e){"use strict";n.__esModule=!0;var o=e(55),r=function(t){return t&&t.__esModule?t:{default:t}}(o);n.default=function(t){if(Array.isArray(t)){for(var n=0,e=Array(t.length);n=n.length?{value:void 0,done:!0}:(t=o(n,e),this._i+=t.length,{value:t,done:!1})})},function(t,n,e){var o=e(10),r=e(11);t.exports=function(t){return function(n,e){var i,a,c=String(r(n)),s=o(e),u=c.length;return s<0||s>=u?t?"":void 0:(i=c.charCodeAt(s),i<55296||i>56319||s+1===u||(a=c.charCodeAt(s+1))<56320||a>57343?t?c.charAt(s):i:t?c.slice(s,s+2):a-56320+(i-55296<<10)+65536)}}},function(t,n,e){"use strict";var o=e(60),r=e(19),i=e(64),a=e(4),c=e(8),s=e(15),u=e(65),l=e(29),f=e(74),d=e(0)("iterator"),p=!([].keys&&"next"in[].keys()),v=function(){return this};t.exports=function(t,n,e,g,m,h,b){u(e,n,g);var y,x,_,k=function(t){if(!p&&t in C)return C[t];switch(t){case"keys":case"values":return function(){return new e(this,t)}}return function(){return new e(this,t)}},w=n+" Iterator",O="values"==m,j=!1,C=t.prototype,E=C[d]||C["@@iterator"]||m&&C[m],S=E||k(m),M=m?O?k("entries"):S:void 0,T="Array"==n?C.entries||E:E;if(T&&(_=f(T.call(new t)))!==Object.prototype&&_.next&&(l(_,w,!0),o||c(_,d)||a(_,d,v)),O&&E&&"values"!==E.name&&(j=!0,S=function(){return E.call(this)}),o&&!b||!p&&!j&&C[d]||a(C,d,S),s[n]=S,s[w]=v,m)if(y={values:O?S:k("values"),keys:h?S:k("keys"),entries:M},b)for(x in y)x in C||i(C,x,y[x]);else r(r.P+r.F*(p||j),n,y);return y}},function(t,n){t.exports=!0},function(t,n){t.exports=function(t){if("function"!=typeof t)throw TypeError(t+" is not a function!");return t}},function(t,n,e){t.exports=!e(7)&&!e(21)(function(){return 7!=Object.defineProperty(e(22)("div"),"a",{get:function(){return 7}}).a})},function(t,n,e){var o=e(13);t.exports=function(t,n){if(!o(t))return t;var e,r;if(n&&"function"==typeof(e=t.toString)&&!o(r=e.call(t)))return r;if("function"==typeof(e=t.valueOf)&&!o(r=e.call(t)))return r;if(!n&&"function"==typeof(e=t.toString)&&!o(r=e.call(t)))return r;throw TypeError("Can't convert object to primitive value")}},function(t,n,e){t.exports=e(4)},function(t,n,e){"use strict";var o=e(66),r=e(14),i=e(29),a={};e(4)(a,e(0)("iterator"),function(){return this}),t.exports=function(t,n,e){t.prototype=o(a,{next:r(1,e)}),i(t,n+" Iterator")}},function(t,n,e){var o=e(6),r=e(67),i=e(28),a=e(16)("IE_PROTO"),c=function(){},s=function(){var t,n=e(22)("iframe"),o=i.length;for(n.style.display="none",e(73).appendChild(n),n.src="javascript:",t=n.contentWindow.document,t.open(),t.write("\r\n\n\n\n// WEBPACK FOOTER //\n// dialog.vue?5fbc5f9c","\n/* styles */\nrequire(\"!!vue-style-loader!css-loader?minimize!../../../node_modules/vue-loader/lib/style-rewriter?id=data-v-2c4e0b92!../../../node_modules/vue-loader/lib/selector?type=styles&index=0!./dialog-window.vue\")\n\nvar Component = require(\"!../../../node_modules/vue-loader/lib/component-normalizer\")(\n /* script */\n require(\"!!babel-loader!../../../node_modules/vue-loader/lib/selector?type=script&index=0!./dialog-window.vue\"),\n /* template */\n require(\"!!../../../node_modules/vue-loader/lib/template-compiler?id=data-v-2c4e0b92!../../../node_modules/vue-loader/lib/selector?type=template&index=0!./dialog-window.vue\"),\n /* scopeId */\n null,\n /* cssModules */\n null\n)\n\nmodule.exports = Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/plugin/components/dialog-window.vue\n// module id = 34\n// module chunks = 0","// style-loader: Adds some css to the DOM by adding a \r\n\n\n\n// WEBPACK FOOTER //\n// dialog-window.vue?57407155","var Component = require(\"!../../../node_modules/vue-loader/lib/component-normalizer\")(\n /* script */\n require(\"!!babel-loader!../../../node_modules/vue-loader/lib/selector?type=script&index=0!./ok-btn.vue\"),\n /* template */\n require(\"!!../../../node_modules/vue-loader/lib/template-compiler?id=data-v-424ea784!../../../node_modules/vue-loader/lib/selector?type=template&index=0!./ok-btn.vue\"),\n /* scopeId */\n null,\n /* cssModules */\n null\n)\n\nmodule.exports = Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/plugin/components/ok-btn.vue\n// module id = 41\n// module chunks = 0","\r\n \r\n\r\n\r\n\n\n\n// WEBPACK FOOTER //\n// ok-btn.vue?21434634","\n/* styles */\nrequire(\"!!vue-style-loader!css-loader?minimize!../../../node_modules/vue-loader/lib/style-rewriter?id=data-v-0a4b5bf7!../../../node_modules/vue-loader/lib/selector?type=styles&index=0!./btn-loader.vue\")\n\nvar Component = require(\"!../../../node_modules/vue-loader/lib/component-normalizer\")(\n /* script */\n null,\n /* template */\n require(\"!!../../../node_modules/vue-loader/lib/template-compiler?id=data-v-0a4b5bf7!../../../node_modules/vue-loader/lib/selector?type=template&index=0!./btn-loader.vue\"),\n /* scopeId */\n null,\n /* cssModules */\n null\n)\n\nmodule.exports = Component.exports\n\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/plugin/components/btn-loader.vue\n// module id = 43\n// module chunks = 0","// style-loader: Adds some css to the DOM by adding a
+```
+
+```javascript
+import Vue from 'vue';
+import CustomView from './path/to/file/custom-component.vue';
+
+const VIEW_NAME = 'my-unique-view-name';
+Vue.dialog.registerComponent(VIEW_NAME, CustomView);
+
+let vm = new Vue({
+ methods: {
+ showCustomView() {
+ // Note: Use confirm instead of alert if you need to handle rejection
+ this.$dialog.alert(trans('messages.html'), {
+ view: VIEW_NAME, // can be set globally too
+ html: true,
+ animation: 'fade',
+ backdropClose: true
+ });
+ }
+ }
+});
+```
+
+... and you get your custom view
+
+
+
+[Here's a working fiddle for custom component/view](http://jsfiddle.net/godofbrowser/pktL3mjb/)
diff --git a/docs/app.main.css b/docs/app.main.css
deleted file mode 100644
index 9b163528a..000000000
--- a/docs/app.main.css
+++ /dev/null
@@ -1 +0,0 @@
-*{box-sizing:border-box}body{margin:0;padding:0}.page-title{border-bottom:2px solid #0096d9}
\ No newline at end of file
diff --git a/docs/app.main.js b/docs/app.main.js
deleted file mode 100644
index 08503ff12..000000000
--- a/docs/app.main.js
+++ /dev/null
@@ -1 +0,0 @@
-!function(e){function t(o){if(n[o])return n[o].exports;var i=n[o]={i:o,l:!1,exports:{}};return e[o].call(i.exports,i,i.exports,t),i.l=!0,i.exports}var n={};t.m=e,t.c=n,t.d=function(e,n,o){t.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:o})},t.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(n,"a",n),n},t.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},t.p="",t(t.s=2)}([function(e,t){e.exports=Vue},function(e,t){e.exports=function(){var e=[];return e.toString=function(){for(var e=[],t=0;t=0&&(l.timer=setTimeout(function(){t.destroy(l)},l.length));var u=this.reverse?!this.botToTop:this.botToTop,f=-1;u?(this.list.push(l),this.active.length>this.max&&(f=-1)):(this.list.unshift(l),this.active.length>this.max&&(f=this.active.length-1)),-1!==f&&this.destroy(this.active[f])}},"nСlass":function(e){return["notification",this.classes,e.type]},nwStyle:function(e){return this.isVA?null:{transition:"all "+e.speed+"ms"}},destroy:function(e){clearTimeout(e.timer),e.state=p.DESTROYED,this.isVA||this.clean()},destroyAll:function(){this.active.forEach(this.destroy)},getAnimation:function(e,t){var n=this.animation[e];return"function"==typeof n?n.call(this,t):n},enter:function(e){var t=e.el,n=e.complete,o=this.getAnimation("enter",t);this.velocity(t,o,{duration:this.speed,complete:n})},leave:function(e){var t=e.el,n=e.complete,o=this.getAnimation("leave",t);this.velocity(t,o,{duration:this.speed,complete:n})},clean:function(){this.list=this.list.filter(function(e){return e.state!==p.DESTROYED})}}};h.configure=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};void 0!==e.velocity&&(m.velocity=e.velocity)},t.default=h},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={name:"VelocityGroup",methods:{enter:function(e,t){this.$emit("enter",{el:e,complete:t})},leave:function(e,t){this.$emit("leave",{el:e,complete:t})},afterLeave:function(){this.$emit("afterLeave")}}}},function(e,t,n){"use strict";t.a={position:["top","right"],cssAnimation:"vn-fade",velocityAnimation:{enter:function(e){return{height:[e.clientHeight,0],opacity:[1,0]}},leave:{height:0,opacity:[0,1]}}}},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=n(3),i=n.n(o),r=n(1),a="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},s={install:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(!this.installed){this.installed=!0,this.params=t;var n=t.velocity;n&&i.a.configure({velocity:n}),e.component("notifications",i.a),e.prototype.$notify=function(e){"string"==typeof e&&(e={title:"",text:e}),"object"===(void 0===e?"undefined":a(e))&&r.a.$emit("add",e)}}}};t.default=s},function(e,t,n){"use strict";var o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},i=[{name:"px",regexp:new RegExp("^[-+]?[0-9]*.?[0-9]+px$")},{name:"%",regexp:new RegExp("^[-+]?[0-9]*.?[0-9]+%$")},{name:"px",regexp:new RegExp("^[-+]?[0-9]*.?[0-9]+$")}],r=function(e){if("auto"===e)return{type:e,value:0};for(var t=0;tn.parts.length&&(o.parts.length=n.parts.length)}else{for(var a=[],i=0;in.parts.length&&(o.parts.length=n.parts.length)}else{for(var a=[],i=0;i0&&void 0!==arguments[0]&&arguments[0];this.$dialog.confirm(Object(o.a)("messages.loading"),{html:!0,okText:"Proceed",loader:!0}).then(function(t){setTimeout(function(){e.$notify({type:"success",text:Object(o.a)("messages.loading_completed")}),t.close()},2500)}).catch(function(){e.$notify({text:Object(o.a)("messages.loading_canceled")})})},showReversedDialog:function(){var e=this;this.$dialog.confirm(Object(o.a)("messages.reverse"),{html:!0,okText:"Proceed",loader:!0,reverse:!0}).then(function(t){setTimeout(function(){e.$notify({type:"success",text:Object(o.a)("messages.loading_completed")}),t.close()},2500)}).catch(function(){e.$notify({text:Object(o.a)("messages.loading_canceled")})})},clickOkHandler:function(){this.$notify({type:"success",text:Object(o.a)("messages.click_continue")})},clickCancelHandler:function(){this.$notify({type:"error",text:Object(o.a)("messages.click_cancel")})}}}},function(e,t,n){"use strict";var o=n(15),i=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:".",n=window.navigator.languages[1]||window.navigator.userLanguage[1];this.lang=void 0!==e[n]?n:"en",this.separator=t,this.translations=e};i.prototype.get=function(e){for(var t=e.split(this.separator),n=this.translations[this.lang],o=0;oHTML enabled. Click the button below to close.',basic:"This is a basic confirmation dialog. Clicking on either button dismisses the dialog instantly",soft:"This is a soft confirmation dialog. Multiple clicks required to proceed.",loading:"This is a loading dialog. The loader will start once you Click on Proceed button",reverse:"Left button is the Proceed button in this dialog. Click to have a feel of the reverse buttons",click_continue:"You clicked continue",click_cancel:"Closed because cancel was clicked",loading_completed:"If you see me, then the loader has completed",loading_canceled:"You clicked cancel, so there was no loading"}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",{staticStyle:{"max-width":"350px",margin:"auto","font-family":"'Noto Sans', sans-serif","text-align":"center"}},[n("h1",{staticClass:"page-title"},[e._v("Vuejs-Dialog Plugin Examples")]),e._v(" "),n("section",[n("h2",[e._v("Usage as a method")]),e._v(" "),n("hr"),e._v(" "),n("h4",[n("button",{on:{click:function(t){e.showAlertDialog()}}},[e._v("Alert Dialog - one button")])]),e._v(" "),n("h4",[n("button",{on:{click:function(t){e.showHtmlDialog()}}},[e._v("Html Dialog - style/format content")])]),e._v(" "),n("h4",[n("button",{on:{click:function(t){e.showBasicDialog()}}},[e._v("Basic confirm - close instantly")])]),e._v(" "),n("h4",[n("button",{on:{click:function(t){e.showLoadingDialog()}}},[e._v("Loading Dialog - Useful with ajax")])]),e._v(" "),n("h4",[n("button",{on:{click:function(t){e.showReversedDialog()}}},[e._v("Reversed Dialog - switch buttons")])]),e._v(" "),n("h4",[n("button",{on:{click:function(t){e.showAnimationFadeDialog()}}},[e._v("Fade Dialog - Animation")])]),e._v(" "),n("h4",[n("button",{on:{click:function(t){e.showAnimationBounceDialog()}}},[e._v("Bounce Dialog - Animation")])])]),e._v(" "),n("section",[n("h2",[e._v("Usage as a directive")]),e._v(" "),n("hr"),e._v(" "),n("h4",[n("a",{directives:[{name:"confirm",rawName:"v-confirm",value:"This will take you to http://example.com. Proceed with caution",expression:"'This will take you to http://example.com. Proceed with caution'"}],attrs:{href:"http://example.com"}},[e._v("Go to example.com")])]),e._v(" "),n("h4",[n("button",{directives:[{name:"confirm",rawName:"v-confirm",value:"This is a message",expression:"`This is a message`"}]},[e._v('\n Give it a string v-confirm="This is a message"\n ')])]),e._v(" "),n("h4",[n("button",{directives:[{name:"confirm",rawName:"v-confirm",value:{message:"This dialog was also triggered using a v-confirm directive. It has both OK and CANCEL callback",ok:e.clickOkHandler,cancel:e.clickCancelHandler},expression:"{\n message: 'This dialog was also triggered using a v-confirm directive. It has both OK and CANCEL callback',\n ok: clickOkHandler,\n cancel: clickCancelHandler}"}]},[e._v('\n Give it an object v-confirm="messageAndCallback"\n ')])]),e._v(" "),n("h4",[n("form",{on:{submit:function(t){t.preventDefault(),e.submitDemo1Form()}}},[n("fieldset",[n("input",{directives:[{name:"model",rawName:"v-model",value:e.forms.demo1.name,expression:"forms.demo1.name"}],attrs:{type:"text",name:"name",placeholder:"Your name"},domProps:{value:e.forms.demo1.name},on:{input:function(t){t.target.composing||(e.forms.demo1.name=t.target.value)}}}),e._v(" "),n("button",{directives:[{name:"confirm",rawName:"v-confirm",value:"Changes would be discarded. Reset this form?",expression:"'Changes would be discarded. Reset this form?'"}],attrs:{type:"reset"}},[e._v("Reset")]),e._v(" "),n("button",{directives:[{name:"confirm",rawName:"v-confirm",value:"Submit this form?",expression:"'Submit this form?'"}],attrs:{type:"submit"}},[e._v("submit")])])])])]),e._v(" "),n("section",[n("h2",[e._v("Confirmation types")]),e._v(" "),n("hr"),e._v(" "),n("p",[e._v("All dialogs used above are BASIC confirmation dialogs. There are more strict dialogs available.")]),e._v(" "),n("p",[e._v(" SOFT and HARD confirmation dialogs. Examples below:")]),e._v(" "),n("h4",[n("button",{on:{click:function(t){e.showSoftConfirmDialog()}}},[e._v("Soft confirm - multiple clicks required")])])]),e._v(" "),n("notifications",{attrs:{position:"bottom left"}})],1)},staticRenderFns:[]}},function(e,t){}]);
\ No newline at end of file
diff --git a/docs/components/examples/FeaturesExampleAlert.vue b/docs/components/examples/FeaturesExampleAlert.vue
new file mode 100644
index 000000000..c929d902d
--- /dev/null
+++ b/docs/components/examples/FeaturesExampleAlert.vue
@@ -0,0 +1,20 @@
+
+ Show alert
+
+
+
diff --git a/docs/components/examples/FeaturesExampleConfirm.vue b/docs/components/examples/FeaturesExampleConfirm.vue
new file mode 100644
index 000000000..8a15797b1
--- /dev/null
+++ b/docs/components/examples/FeaturesExampleConfirm.vue
@@ -0,0 +1,21 @@
+
+ Show confirm | basic
+
+
+
diff --git a/docs/components/examples/FeaturesExampleConfirmHard.vue b/docs/components/examples/FeaturesExampleConfirmHard.vue
new file mode 100644
index 000000000..7d463e89b
--- /dev/null
+++ b/docs/components/examples/FeaturesExampleConfirmHard.vue
@@ -0,0 +1,22 @@
+
+ Show confirm | hard
+
+
+
diff --git a/docs/components/examples/FeaturesExampleConfirmSoft.vue b/docs/components/examples/FeaturesExampleConfirmSoft.vue
new file mode 100644
index 000000000..c43561a97
--- /dev/null
+++ b/docs/components/examples/FeaturesExampleConfirmSoft.vue
@@ -0,0 +1,23 @@
+
+ Show confirm | soft
+
+
+
diff --git a/docs/components/examples/FeaturesExampleDirective.vue b/docs/components/examples/FeaturesExampleDirective.vue
new file mode 100644
index 000000000..5e37a9b6c
--- /dev/null
+++ b/docs/components/examples/FeaturesExampleDirective.vue
@@ -0,0 +1,10 @@
+
+ A link
+ or a
+
+
diff --git a/docs/components/examples/FeaturesExamplePrompt.vue b/docs/components/examples/FeaturesExamplePrompt.vue
new file mode 100644
index 000000000..9b1874105
--- /dev/null
+++ b/docs/components/examples/FeaturesExamplePrompt.vue
@@ -0,0 +1,25 @@
+
+ Show prompt
+
+
+
diff --git a/docs/components/examples/OptionsExampleAnimation.vue b/docs/components/examples/OptionsExampleAnimation.vue
new file mode 100644
index 000000000..0ebed7d84
--- /dev/null
+++ b/docs/components/examples/OptionsExampleAnimation.vue
@@ -0,0 +1,24 @@
+
+ Zoom
+ Fade
+ Bounce
+
+
+
diff --git a/docs/components/examples/OptionsExampleLoader.vue b/docs/components/examples/OptionsExampleLoader.vue
new file mode 100644
index 000000000..16a5571b3
--- /dev/null
+++ b/docs/components/examples/OptionsExampleLoader.vue
@@ -0,0 +1,24 @@
+
+ Show dialog
+
+
+
diff --git a/docs/components/examples/UIExamplesButton.vue b/docs/components/examples/UIExamplesButton.vue
new file mode 100644
index 000000000..7e61898d2
--- /dev/null
+++ b/docs/components/examples/UIExamplesButton.vue
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
diff --git a/docs/components/examples/UIExamplesWrapper.vue b/docs/components/examples/UIExamplesWrapper.vue
new file mode 100644
index 000000000..676c684e3
--- /dev/null
+++ b/docs/components/examples/UIExamplesWrapper.vue
@@ -0,0 +1,19 @@
+
+
+
+
+
+
+
diff --git a/docs/demos.md b/docs/demos.md
new file mode 100644
index 000000000..a4eedccad
--- /dev/null
+++ b/docs/demos.md
@@ -0,0 +1,16 @@
+# Live Demos
+Below are some practical example use cases that you may find useful.
+
+## Quick alert after an event occurs
+// Todo - documentation & example
+
+## Confirming CRUD operations
+// Todo - documentation & example
+
+
+## Confirming link clicks
+// Todo - documentation & example
+
+
+## Confirming form reset/submit
+// Todo - documentation & example
diff --git a/docs/digging-deeper.md b/docs/digging-deeper.md
new file mode 100644
index 000000000..7b5626e25
--- /dev/null
+++ b/docs/digging-deeper.md
@@ -0,0 +1,43 @@
+# Digging deeper
+
+## Options
+
+```typescript
+declare interface DialogOptions {
+ message: MessageWithTitle;
+ html: boolean;
+ loader: boolean;
+ reverse: boolean;
+ backdropClose: boolean;
+ okText: string;
+ cancelText: string;
+ type: ConfirmTypeEnum;
+ clicksCount: number;
+ animation: 'zoom' | 'bounce' | 'fade';
+ customClass: {
+ [k: string]: string;
+ };
+ verification: string;
+ verificationHelp: string;
+ promptHelp: string;
+}
+```
+
+### Animation
+There are three options to choose from so you have some flexibility with how the dialog transitions into view.
+
+
+@[code](components/examples/OptionsExampleAnimation.vue)
+
+
+### Loader
+You may use the loader option to indicate that an asynchronous task is being performed after the user decides to proceed.
+
+@[code](components/examples/OptionsExampleLoader.vue)
+
+
+
+
+## Custom component
+// Todo
+
diff --git a/docs/features.md b/docs/features.md
new file mode 100644
index 000000000..c48a6c8d3
--- /dev/null
+++ b/docs/features.md
@@ -0,0 +1,37 @@
+# Basic Features
+
+[[toc]]
+
+## Alert
+An alert dialog can be triggered using the `$dialog.alert()` method. This method returns a promise which resolves when the dialog is dismissed.
+
+
+@[code](components/examples/FeaturesExampleAlert.vue)
+
+## Confirm
+A confirm dialog can be triggered with the `$dialog.confirm()` method. Like the alert dialog, this method returns a promise which resolves when the dialog is dismissed.
+In this section we shall explore how to create a basic confirm dialog as well as the two other variations of the confirm dialog namely; soft and hard confirmation dialogs.
+
+### Basic confirm dialog
+
+@[code](components/examples/FeaturesExampleConfirm.vue)
+
+### Soft confirm dialog
+
+@[code](components/examples/FeaturesExampleConfirmSoft.vue)
+
+### Hard confirm dialog
+
+@[code](components/examples/FeaturesExampleConfirmHard.vue)
+
+## Prompt
+The `$dialog.prompt()` method creates a prompt dialog. Use the prompt dialog to ask user directly for input.
+
+
+@[code](components/examples/FeaturesExamplePrompt.vue)
+
+## Confirm directive
+Add the `v-confirm` directive to any element to instantly cause it to trigger a confirm dialog. This dialog upon confirmation will trigger the default action or the provided callback when available.
+
+
+@[code](components/examples/FeaturesExampleDirective.vue)
diff --git a/docs/index.html b/docs/index.html
deleted file mode 100644
index d0885f2db..000000000
--- a/docs/index.html
+++ /dev/null
@@ -1,25 +0,0 @@
-
-
-
-
- VueJs Plugin usage example
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/docs/index.md b/docs/index.md
new file mode 100644
index 000000000..52949b4f8
--- /dev/null
+++ b/docs/index.md
@@ -0,0 +1,143 @@
+# Getting started
+
+[[toc]]
+
+Vuejs-dialog is a vue plugin that's designed to serve as a replacement to the native confirm and alert that ships with the browser. The it is lightweight and comes with a simple api, yet very customizable and extendable.
+
+## Installation
+
+### Package manager
+
+
+
+```shell title="installation via pnpm"
+pnpm add vuejs-dialog@next
+```
+
+
+
+
+
+```shell title="installation via yarn"
+yarn add vuejs-dialog@next
+```
+
+
+
+
+
+```bash{2} title="installation via npm"
+npm i -S vuejs-dialog@next
+```
+
+
+
+
+
+```js title="main.js"
+// import into the project's entry file
+import { createApp } from 'vue';
+import VuejsDialog from 'vuejs-dialog';
+import AppComponent from './App.vue'
+
+// include the default style
+import 'vuejs-dialog/dist/vuejs-dialog.min.css';
+
+// Create the app instance
+const app = createApp(AppComponent)
+
+// Install the plugin for the app instance.
+app.use(VuejsDialog);
+
+// Mount the application on the dom element with id="app"
+app.mount('#app')
+```
+
+### Script tag
+
+View it on [jsfiddle](https://jsfiddle.net/godofbrowser/rhxkz14f/3/)
+
+```html
+
+
+
+
+
+
+
+
+ You’ve successfully created a project with
+ Vite +
+ Vue 3. What's next?
+
+
+
+
+
diff --git a/src/components/TheWelcome.vue b/src/components/TheWelcome.vue
new file mode 100644
index 000000000..49d8f7354
--- /dev/null
+++ b/src/components/TheWelcome.vue
@@ -0,0 +1,88 @@
+
+
+
+
+
+
+
+ Documentation
+
+ Vue’s
+ official documentation
+ provides you with all information you need to get started.
+
+
+
+
+
+
+ Tooling
+
+ This project is served and bundled with
+ Vite. The
+ recommended IDE setup is
+ VSCode +
+ Volar. If
+ you need to test your components and web pages, check out
+ Cypress and
+ Cypress Component Testing.
+
+
+
+ More instructions are available in README.md.
+
+
+
+
+
+
+ Ecosystem
+
+ Get official tools and libraries for your project:
+ Pinia,
+ Vue Router,
+ Vue Test Utils, and
+ Vue Dev Tools. If
+ you need more resources, we suggest paying
+ Awesome Vue
+ a visit.
+
+
+
+
+
+
+ Community
+
+ Got stuck? Ask your question on
+ Vue Land, our official
+ Discord server, or
+ StackOverflow. You should also subscribe to
+ our mailing list and follow
+ the official
+ @vuejs
+ twitter account for latest news in the Vue world.
+
+
+
+
+
+
+ Support Vue
+
+ As an independent project, Vue relies on community backing for its sustainability. You can help
+ us by
+ becoming a sponsor.
+
+
diff --git a/src/components/WelcomeItem.vue b/src/components/WelcomeItem.vue
new file mode 100644
index 000000000..6d7086aea
--- /dev/null
+++ b/src/components/WelcomeItem.vue
@@ -0,0 +1,87 @@
+
+