version 0.0.2

kolirt · Jun 28, 2023 · 3c0fa59 · 3c0fa59
1 parent 6c2828b
commit 3c0fa59
Show file tree

Hide file tree

Showing 21 changed files with 411 additions and 213 deletions.
diff --git a/README.md b/README.md
@@ -13,12 +13,13 @@ Easy to use and highly customizable Vue3 modal package.
     - [Setup](#setup)
 - [Usage](#usage)
     - [Basic usage](#basic-usage)
+    - [Advanced usage](#)
 - [Demo](#demo)
 - [Example](#example)
 - [Faq](#faq)
 - [License](#license)
 - [Other projects](#other-projects)
- 
+
 <a href="https://www.buymeacoffee.com/kolirt" target="_blank">
   <img src="https://cdn.buymeacoffee.com/buttons/v2/arial-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" >
 </a>
@@ -53,6 +54,7 @@ app.mount('#app')
 Add `ModalTarget` to `App.vue`
 
 ```vue
+
 <template>
   <ModalTarget/>
 </template>
@@ -65,6 +67,7 @@ Add `ModalTarget` to `App.vue`
 First, you need to create modal. Instead of `SimpleModal`, you can implement your own wrapper with your own styles.
 
 ```vue
+
 <script setup lang="ts">
 import {closeModal, confirmModal} from '@kolirt/vue-modal'
 
@@ -117,6 +120,23 @@ function runModal() {
 </template>
 ```
 
+## Advanced usage
+Open modal with clearing modal history.
+
+```js
+openModal(TestModal, {
+    test: 'some props'
+}, {force: true})
+    // runs when modal is closed via confirmModal
+    .then((data) => {
+        console.log('success', data)
+    })
+    // runs when modal is closed via closeModal or esc
+    .catch(() => {
+        console.log('catch')
+    })
+```
+
 # Demo
 
 [Demo here](https://kolirt.github.io/vue-modal/).
@@ -136,4 +156,6 @@ Check closed [issues](https://github.com/kolirt/vue-modal/issues) to get answers
 # Other projects
 
 Check out my other projects:
-- [@kolirt/vue-web3-auth](https://github.com/kolirt/vue-web3-auth) - simple WalletConnect v2 integration package for Vue3 apps.
+
+- [@kolirt/vue-web3-auth](https://github.com/kolirt/vue-web3-auth) - simple WalletConnect v2 integration package for
+  Vue3 apps.
diff --git a/demo/assets/index-478a685d.js b/demo/assets/index-478a685d.js
diff --git a/demo/assets/index-7525807f.js b/demo/assets/index-7525807f.js
diff --git a/demo/assets/index-6c188281.css → demo/assets/index-aea88243.css b/demo/assets/index-6c188281.css → demo/assets/index-aea88243.css
diff --git a/demo/index.html b/demo/index.html
@@ -8,8 +8,8 @@
 
     <script async src="https://www.googletagmanager.com/gtag/js?id="></script>
     <script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', '');</script>
-  <script type="module" crossorigin src="/vue-modal/assets/index-478a685d.js"></script>
-  <link rel="stylesheet" href="/vue-modal/assets/index-6c188281.css">
+  <script type="module" crossorigin src="/vue-modal/assets/index-7525807f.js"></script>
+  <link rel="stylesheet" href="/vue-modal/assets/index-aea88243.css">
 </head>
 <body>
 <div id="app"></div>

diff --git a/dist/vue-modal.d.ts b/dist/vue-modal.d.ts
@@ -3,9 +3,11 @@ import type { Plugin as Plugin_2 } from 'vue';
 
 declare type AnimationType = 'slideDown' | 'slideUp' | 'slideLeft' | 'slideRight' | 'fade' | 'none';
 
-export declare function closeModal(): void;
+export declare function closeAllModals(forceCloseAll?: boolean): Promise<void>;
 
-export declare function confirmModal(data?: any): void;
+export declare function closeModal(): Promise<void>;
+
+export declare function confirmModal(data?: any): Promise<any>;
 
 export declare function createModal(options?: Options): Plugin_2;
 
@@ -15,7 +17,11 @@ declare type ModalStyle = {
     'z-index'?: number;
 };
 
-export declare function openModal(component: Component, props?: {}): Promise<unknown>;
+export declare function openModal(component: Component, props?: {}, options?: OpenModalOptions): Promise<unknown>;
+
+declare type OpenModalOptions = {
+    force?: boolean;
+};
 
 declare type Options = {
     transitionTime?: number;