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
index 1fe1b00e4..3dfa8ebe0 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,31 @@
-.idea/
-node_modules/
+# 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 55ea34366..669db287a 100644
--- a/.npmignore
+++ b/.npmignore
@@ -1,8 +1,8 @@
-.idea
-.gitignore
-node_modules/
-src/
-docs/
-test/
-*.log
-.tmp
\ 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/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 66e641c96..dbe4f3bac 100644
--- a/README.md
+++ b/README.md
@@ -1,510 +1,40 @@
-# Vuejs Dialog Plugin
+# Vuejs Dialog
> A lightweight, promise based alert, prompt and confirm dialog.
[](https://badge.fury.io/js/vuejs-dialog)
[](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
-[https://godofbrowser.github.io/vuejs-dialog/](https://godofbrowser.github.io/vuejs-dialog/)
+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)
-## Important updates in version v1.x.x
+| 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) |
-1. Dialog will always resolve with an object. (i.e callback for proceed always will receive an object)
-2. For directives usage, the object returned in (1) above will include a node. The node is the element the directive was bound to (see issue [#5](https://github.com/Godofbrowser/vuejs-dialog/issues/5)
-3. Styles will have to be included explicitly as they have been extracted into a separate file (see issue [#28](https://github.com/Godofbrowser/vuejs-dialog/issues/28))
-4. If loader is enabled globally, and a dialog is triggered via a directive without a callback, the loader is ignored for clicks on proceed
-5. Custom class injection on parent node (see issue [#25](https://github.com/Godofbrowser/vuejs-dialog/issues/25))
-6. Ability to register custom views. This allows for custom logic, custom buttons, etc (see issue [#13](https://github.com/Godofbrowser/vuejs-dialog/issues/13), [#14](https://github.com/Godofbrowser/vuejs-dialog/issues/14), [#33](https://github.com/Godofbrowser/vuejs-dialog/issues/33))
-7. For installation via **HTML script tag**
- - The library has been namespaced as it has been split into two. The main library which is the plugin and the mixin which is useful in custom components
- - To this effect, the new way to install the plugin is slightly dufferent: `window.Vue.use(VuejsDialog.main.default)`
- - And the mixin can be added to components like so: `mixins: [VuejsDialog.mixin.default, ...otherMixins]`
+## Installing the release candidate (vue3)
-## Installation
+To install the Vue3 compatible version while it's not released officially yet, please use either of the command below with the "next" tag.
-#### HTML
-
-```html
-// Include vuejs
-
-
-// Include vuejs-dialog plugin
-
-
- // only needed in custom components
-
-
-```
-
-#### Package Manager
-
-```javascript
-// installation via npm
-npm i -S vuejs-dialog
-
-// or
-
-// installation via yarn
-yarn add vuejs-dialog
-```
-
-```javascript
-// then
-
-// import into project
-import Vue from 'vue';
-import VuejsDialog from 'vuejs-dialog';
-import VuejsDialogMixin from 'vuejs-dialog/dist/vuejs-dialog-mixin.min.js'; // only needed in custom components
-
-// include the default style
-import 'vuejs-dialog/dist/vuejs-dialog.min.css';
-
-// Tell Vue to install the plugin.
-Vue.use(VuejsDialog);
-```
-
-#### Webpack External
-
-```javascript
-// If you're including via script tag and importing as Webpack external
-// Webpack config
-{
- // ... other webpack config
- externals: {
- // .. other externals if any
- 'vuejs-dialog': 'VuejsDialog'
- }
-}
-```
-
-```javascript
-// then
-
-// import into project
-import Vue from 'vue';
-import VuejsDialog from 'vuejs-dialog';
-
-// Tell Vue to install the plugin.
-Vue.use(VuejsDialog.main.default);
-
-// mixin available at: VuejsDialog.mixin.default
-```
-
-## Basic Usage inside a vuejs application
-
-```javascript
-// Anywhere in your Vuejs App.
-
-// Trigger an Alert dialog
-this.$dialog.alert('Request completed!').then(function(dialog) {
- console.log('Closed');
-});
-
-// Trigger a confirmation dialog
-this.$dialog
- .confirm('Please confirm to continue')
- .then(function(dialog) {
- console.log('Clicked on proceed');
- })
- .catch(function() {
- console.log('Clicked on cancel');
- });
-```
-
-## Basic Usage outside a vuejs application
-
-```javascript
-// VuejsDialog Methods are also available on the global vue
-// This makes it possible to use the plugin inside a ReactJs application
-// or just any javascript application
-// Simply include vue, vuejs-dialog, ask vue to use the plugin and that's all:
-
-Vue.dialog.alert('Request completed!').then(function(dialog) {
- console.log('Closed');
-});
-
-Vue.dialog
- .confirm('Please confirm to continue')
- .then(function(dialog) {
- console.log('Clicked on proceed');
- })
- .catch(function() {
- console.log('Clicked on cancel');
- });
-```
-
-## Return value on success
-
-```javascript
-// Whenever a user clicks on proceed,
-// the promise returned by the dialog call will be
-// resolved with a dialog object with the following shape:
-
-
-{
- close: function | sometimes | A method that can be used to close the dialog if it's in a loading state
- loading: function | sometimes | A method that can be used to stop the dialog loader
- node: DOMElement | sometimes | A DOM element which the directive was bound to, when triggered via a directive
- data: any | always | Data sent with the positive action. Useful in prompts or custom components where you have multiple proceed buttons
-}
-
-// Example:
-
-