feat: make DynamicDialog more flexible

This will add the following changes: - Allow for container template - Move content component into obj - Seperate child component props & emits - Rename dialogProps to seperate from child component props
marcopixel · May 3, 2024 · e3b29a7 · e3b29a7
1 parent fa42242
commit e3b29a7
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 9 deletions.
diff --git a/components/lib/dialogservice/DialogService.d.ts b/components/lib/dialogservice/DialogService.d.ts
@@ -18,11 +18,10 @@ export default plugin;
 export interface DialogServiceMethods {
     /**
      * Displays the dialog using the dynamic dialog object options.
-     * @param {*} content - Dynamic component for content template
      * @param {DynamicDialogOptions} options - DynamicDialog Object
      * @return {@link DynamicDialogInstance}
      */
-    open(content: any, options?: DynamicDialogOptions): DynamicDialogInstance;
+    open(options?: DynamicDialogOptions): DynamicDialogInstance;
 }
 
 declare module 'vue/types/vue' {

diff --git a/components/lib/dialogservice/DialogService.js b/components/lib/dialogservice/DialogService.js
@@ -5,9 +5,9 @@ import { markRaw } from 'vue';
 export default {
     install: (app) => {
         const DialogService = {
-            open: (content, options) => {
+            open: (options) => {
                 const instance = {
-                    content: content && markRaw(content),
+                    content: options && options.content && markRaw(options.content),
                     options: options || {},
                     data: options && options.data,
                     close: (params) => {

diff --git a/components/lib/dynamicdialog/DynamicDialog.vue b/components/lib/dynamicdialog/DynamicDialog.vue
@@ -1,12 +1,15 @@
 <template>
     <template v-for="(instance, key) in instanceMap" :key="key">
-        <DDialog v-model:visible="instance.visible" :_instance="instance" v-bind="instance.options.props" @hide="onDialogHide(instance)" @after-hide="onDialogAfterHide">
+        <DDialog v-model:visible="instance.visible" :_instance="instance" v-bind="instance.options.dialogProps" @hide="onDialogHide(instance)" @after-hide="onDialogAfterHide">
             <template v-if="instance.options.templates && instance.options.templates.header" #header>
-                <component v-for="(header, index) in getTemplateItems(instance.options.templates.header)" :is="header" :key="index + '_header'" v-bind="instance.options.emits"></component>
+                <component v-for="(header, index) in getTemplateItems(instance.options.templates.header)" :is="header" :key="index + '_header'" v-on="instance.options.emits"></component>
             </template>
-            <component :is="instance.content" v-bind="instance.options.emits"></component>
+            <template v-if="instance.options.templates && instance.options.templates.container" #container="{ closeCallback }">
+                <component v-for="(container, index) in getTemplateItems(instance.options.templates.container)" :is="container" :key="index + '_container'" v-bind="{ ...instance.options.props, closeCallback }" v-on="instance.options.emits"></component>
+            </template>
+            <component v-if="instance.content" :is="instance.content" v-bind="instance.options.props" v-on="instance.options.emits"></component>
             <template v-if="instance.options.templates && instance.options.templates.footer" #footer>
-                <component v-for="(footer, index) in getTemplateItems(instance.options.templates.footer)" :is="footer" :key="index + '_footer'" v-bind="instance.options.emits"></component>
+                <component v-for="(footer, index) in getTemplateItems(instance.options.templates.footer)" :is="footer" :key="index + '_footer'" v-on="instance.options.emits"></component>
             </template>
         </DDialog>
     </template>

diff --git a/components/lib/dynamicdialogoptions/DynamicDialogOptions.d.ts b/components/lib/dynamicdialogoptions/DynamicDialogOptions.d.ts
@@ -17,6 +17,10 @@ export interface DynamicDialogTemplates {
      * Custom header template.
      */
     header?: any;
+    /**
+     * Custom container template.
+     */
+    container?: any;
     /**
      * Custom footer template.
      */
@@ -45,10 +49,14 @@ export interface DynamicDialogCloseOptions {
  * @group Interfaces
  */
 export interface DynamicDialogOptions {
+    /**
+     * Dynamic component for content template
+    */
+    content?: any;
     /**
      * Dialog Props
      */
-    props?: DialogProps;
+    dialogProps?: DialogProps;
     /**
      * Dialog Slots
      */
@@ -57,6 +65,14 @@ export interface DynamicDialogOptions {
      * Custom data object
      */
     data?: any;
+    /**
+     * Custom props object
+     */
+    props?: any;
+    /**
+     * Custom emits object
+     */
+    emits?: any;
     /**
      * Closes the dialog.
      */