defineAsyncComponent

kolirt · Jul 17, 2023 · e0afa2f · e0afa2f
1 parent 15e2a75
commit e0afa2f
Show file tree

Hide file tree

Showing 9 changed files with 25 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -109,6 +109,7 @@ Then you can use your modal.
 ```vue
 
 <script setup lang="ts">
+import {defineAsyncComponent} from 'vue'
 import {openModal} from '@kolirt/vue-modal'
 import TestModal from '@/components/modals/TestModal.vue'
 
@@ -125,6 +126,20 @@ function runModal() {
         console.log('catch')
       })
 }
+
+function runDynamicModal() {
+  openModal(defineAsyncComponent(() => import('@/components/modals/TestModal.vue')), {
+    test: 'some props'
+  })
+      // 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')
+      })
+}
 </script>
 
 <template>

diff --git a/demo/assets/Test1Modal-d7cae5c6.js b/demo/assets/Test1Modal-d7cae5c6.js
diff --git a/demo/assets/index-ad437199.js b/demo/assets/index-ad437199.js
diff --git a/demo/assets/index-b143dac6.js b/demo/assets/index-b143dac6.js
diff --git a/demo/assets/index-36f5fc1a.css → demo/assets/index-b33a0378.css b/demo/assets/index-36f5fc1a.css → demo/assets/index-b33a0378.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=G-38YS8MVCYR"></script>
     <script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-38YS8MVCYR');</script>
-  <script type="module" crossorigin src="/vue-modal/assets/index-ad437199.js"></script>
-  <link rel="stylesheet" href="/vue-modal/assets/index-36f5fc1a.css">
+  <script type="module" crossorigin src="/vue-modal/assets/index-b143dac6.js"></script>
+  <link rel="stylesheet" href="/vue-modal/assets/index-b33a0378.css">
 </head>
 <body>
 <div id="app"></div>

diff --git a/lib/actions.ts b/lib/actions.ts
@@ -1,5 +1,5 @@
 import type {Component} from 'vue'
-import type {/*Options,*/ CloseEventData, OpenModalOptions} from './types'
+import type {CloseEventData, OpenModalOptions} from './types'
 import {Events} from './types'
 import {addModal, state as stateData} from './data'
 import {$emit, $off, $on} from './event'

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@kolirt/vue-modal",
-  "version": "0.0.12",
+  "version": "0.0.13",
   "description": "Simple Vue3 modal package",
   "author": "kolirt",
   "license": "MIT",

diff --git a/src/App.vue b/src/App.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import {notify} from '@kyvg/vue3-notification'
 import {ModalTarget, openModal} from '../lib'
-import TestModal from './components/Test1Modal.vue'
 import Test2Modal from './components/Test2Modal.vue'
 import Test3Modal from './components/Test3Modal.vue'
+import {defineAsyncComponent} from 'vue'
 
 function runModal1() {
-  openModal(TestModal, {
+  openModal(defineAsyncComponent(() => import('@/components/Test1Modal.vue')), {
     test: 'modal1'
   }, {
     modalStyle: {