feat: added support for slots in dynamic modal (#734)

Author: kaguya3222

src/PluginCore.js

@@ -17,6 +17,7 @@ const PluginCore = (Vue, options = {}) => {
   const showDynamicModal = (
     component,
     componentProps,
+    componentSlots,
     modalProps = {},
     modalEvents
   ) => {
@@ -26,6 +27,7 @@ const PluginCore = (Vue, options = {}) => {
     container?.add(
       component,
       componentProps,
+      componentSlots,
       { ...defaults, ...modalProps },
       modalEvents
     )

src/components/ModalsContainer.vue

@@ -12,12 +12,17 @@
         v-bind="modal.componentAttrs"
         v-on="$listeners"
         @close="$modal.hide(modal.modalAttrs.name, $event)"
-      />
+      >
+        <template v-for="(slot, key) in modal.componentSlots" #[key]="scope">
+          <VNode :node="slot" :key="key" :scope="scope" />
+        </template>
+      </component>
     </modal>
   </div>
 </template>
 <script>
 import { generateId } from '../utils'
+import VNode from './VNode.vue'
 
 const PREFIX = 'dynamic_modal_'
 
@@ -27,6 +32,9 @@ export default {
       modals: []
     }
   },
+  components: {
+    VNode
+  },
   created() {
     /**
      * Register ModalContainer so that it was availiable inside the plugin
@@ -39,7 +47,13 @@ export default {
     })
   },
   methods: {
-    add(component, componentAttrs = {}, modalAttrs = {}, modalListeners = {}) {
+    add(
+      component,
+      componentAttrs = {},
+      componentSlots = {},
+      modalAttrs = {},
+      modalListeners = {}
+    ) {
       const id = generateId()
       const name = modalAttrs.name || PREFIX + id
 
@@ -48,7 +62,8 @@ export default {
         modalAttrs: { ...modalAttrs, name },
         modalListeners,
         component,
-        componentAttrs
+        componentAttrs,
+        componentSlots
       })
 
       this.$nextTick(() => {

src/components/VNode.vue

@@ -0,0 +1,22 @@
+<script>
+import { isFunction } from '../utils/types'
+
+export default {
+  name: 'VNode',
+  props: {
+    node: {
+      type: [Object, Function],
+      required: true
+    },
+    scope: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  render() {
+    if (isFunction(this.node)) return this.node(this.scope)
+
+    return this.node
+  }
+}
+</script>

src/utils/types.js

@@ -9,3 +9,7 @@ export const isObject = value => {
 export const isFn = value => {
   return typeof value === 'function'
 }
+
+export const isFunction = value => {
+  return typeof value === 'function'
+}

types/index.d.ts

@@ -14,6 +14,7 @@ declare interface VModal {
   show(
     component: typeof Vue | ComponentOptions<Vue> | AsyncComponent,
     componentProps?: object,
+    componentSlots?: object,
     modalProps?: object,
     modalEvents?: object
   ): void