Merge pull request #6 from ThomasLeconte/develop

Feat: Add of custom component on dialog

Author: ThomasLeconte

README.md

@@ -48,11 +48,34 @@ this.$dialog.create({
   ],
   cardOptions: {
     //any v-card api options
+  },
+  dialogOptions: {
+    //any v-dialog api options
   }
 }).then((anwser) => {
   //Do something with the anwser corresponding to the key of the clicked button
 })
 ```
+<br>
+<hr>
+
+####  **NEW (V1.3.3)**
+You can pass a custom component to render inside the dialog, with it props binded! Here's how to do it :
+```js
+this.$dialog.create({
+  ..., //other options
+  customComponent: {
+    component: MyCustomComponent,
+    props: { myComponentProp: 'Hello world!' }
+  },
+}).then(() => {
+})
+```
+> [!WARNING]  
+> ⚠ If you declare a persistent dialog option, take care that your component emit a `closeDialog` event when you want to close it.
+
+<hr>
+<br>
 
 `this.$dialog` also have a `confirm` method, which is a shortcut for the previous method with only two buttons : "Yes" and "No". 
 ```js

cypress/test-server/src/components/HelloWorld.vue

@@ -15,6 +15,7 @@
           <h3 class="primary-text">Dialogs</h3>
           <div class="mt-5">
             <v-btn id="create-dialog" @click="createDialog()">Create Dialog</v-btn>
+            <v-btn id="create-custom-component-dialog" @click="createCustomComponentDialog()" color="warning">Custom component Dialog</v-btn>
             <v-btn id="success-dialog" @click="successDialog()" color="success">Success Dialog</v-btn>
             <v-btn id="confirm-dialog" @click="confirmDialog()" color="primary">Confirm Dialog</v-btn>
           </div>
@@ -57,12 +58,14 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 import sfcExampleVue from "./sfc-example.vue";
+import MyComponent from "./MyComponent.vue";
 
   
 export default defineComponent({
   name: "HelloWorld",
   components: {
     sfcExampleVue,
+    MyComponent
   },
   data: () => ({
     show: true
@@ -78,6 +81,18 @@ export default defineComponent({
         ]
       })
     },
+    createCustomComponentDialog(){
+      this.$dialog.create({
+        customComponent: {
+          component: MyComponent,
+          props: { message: "Hello world!" }
+        },
+        dialogOptions: {
+          width: "600px",
+          persistent: true
+        }
+      })
+    },
     successDialog(){
       this.$dialog.success("Hello world!", "My success dialog")
     },

cypress/test-server/src/components/MyComponent.vue

@@ -0,0 +1,25 @@
+<template>
+  <h1 @click="close()">{{message}}</h1>
+</template>
+
+<script>
+import { defineEmits } from 'vue'
+export default {
+  name: 'MyComponent',
+  props: {
+    message: {
+      type: String,
+      required: false
+    }
+  },
+  methods: {
+    close() {
+      this.$emit('closeDialog', false)
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

src/Dialog.ts

@@ -22,8 +22,13 @@ export function createDialog(options: CreateDialogOptions) {
   try {
     const div = document.createElement('div');
 
-    if (!isNotEmptyAndNotNull(options.title)) throw new Error('title is required');
-    if (!isNotEmptyAndNotNull(options.text)) throw new Error('text is required');
+    if (!options.customComponent) {
+      if (!isNotEmptyAndNotNull(options.title)) throw new Error('title is required');
+      if (!isNotEmptyAndNotNull(options.text)) throw new Error('text is required');
+    } else {
+      options.title = options.title || '';
+      options.text = options.text || '';
+    }
 
     if (options.buttons) {
       options.buttons.forEach(validateButton);
@@ -35,7 +40,9 @@ export function createDialog(options: CreateDialogOptions) {
         text: options.text,
         buttons: options.buttons,
         level: options.level,
-        dialogOptions: PluginContext.getPluginOptions().defaults?.dialog?.component || undefined,
+        customComponent: options.customComponent,
+        dialogOptions:
+          PluginContext.getPluginOptions().defaults?.dialog?.component || options.dialogOptions || undefined,
         cardOptions: options.cardOptions ||
           PluginContext.getPluginOptions().defaults?.dialog?.card || {
             location: 'center center',

src/components/Dialog.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { DialogButton } from "types";
-import { computed, defineComponent, reactive, ref } from "vue";
+import { ComponentOptions, DialogButton } from "types";
+import { Component, computed, defineComponent, getCurrentInstance, onMounted, PropType, reactive, ref } from "vue";
 import { VDialog } from 'vuetify/lib/components/index.mjs'
 import Card from './Card.vue'
 
@@ -31,6 +31,10 @@ const props = defineProps({
   dialogOptions: {
     type: Object,
     default: () => ({})
+  },
+  customComponent: {
+    type: Object as PropType<ComponentOptions>,
+    required: false
   }
 })
 
@@ -54,7 +58,11 @@ function close(buttonKey: string | boolean){
     v-model="showDialog"
     v-bind="dialogOptions"
   >
+    <template v-if="customComponent">
+      <component :is="customComponent.component" v-bind="customComponent.props" @closeDialog="close" ref="custom-component" />
+    </template>
     <Card
+      v-else
       v-bind="cardOptions"
       :title="title"
       :text="text"

src/components/MyComponent.vue

@@ -0,0 +1,25 @@
+<template>
+  <h1 @click="close()">Coucou !</h1>
+</template>
+
+<script>
+import { defineEmits } from 'vue'
+export default {
+  name: 'MyComponent',
+  // setup() {
+  //   const emits = defineEmits(['closeDialog']);
+  //   return {
+  //     emits
+  //   }
+  // },
+  methods: {
+    close() {
+      this.$emit('closeDialog', false)
+    }
+  }
+}
+</script>
+
+<style>
+
+</style>

src/index.d.ts

@@ -1,4 +1,4 @@
-import type { App, Plugin } from 'vue';
+import type { App, Component, Plugin } from 'vue';
 import { VBottomSheet } from 'vuetify/labs/VBottomSheet';
 import { VBtn } from 'vuetify/lib/components/VBtn/index.mjs';
 import { VCard } from 'vuetify/lib/components/VCard/index.mjs';
@@ -22,11 +22,18 @@ export type Level = 'warning' | 'error' | 'info' | 'success';
 
 export type DialogButton = Omit<Omit<VBtn['$props'], 'text'>, 'key'> & { title: string; key: string | boolean };
 
+export type ComponentOptions = {
+  component: Component;
+  props: any;
+};
+
 export type CreateDialogOptions = {
   title: string;
   text: string;
   buttons?: DialogButton[];
   level?: Level;
+  customComponent?: ComponentOptions;
+  dialogOptions?: VDialog['$props'];
   cardOptions?: VCard['$props'];
 };
 

src/types.ts

@@ -1,4 +1,4 @@
-import { Plugin } from 'vue';
+import { Component, Plugin } from 'vue';
 import { VBottomSheet } from 'vuetify/labs/VBottomSheet';
 import { VBtn } from 'vuetify/lib/components/VBtn/index.mjs';
 import { VCard } from 'vuetify/lib/components/VCard/index.mjs';
@@ -22,11 +22,18 @@ export type Level = 'warning' | 'error' | 'info' | 'success';
 
 export type DialogButton = Omit<Omit<VBtn['$props'], 'text'>, 'key'> & { title: string; key: string | boolean };
 
+export type ComponentOptions = {
+  component: Component;
+  props: any;
+};
+
 export type CreateDialogOptions = {
   title: string;
   text: string;
   buttons?: DialogButton[];
   level?: Level;
+  customComponent?: ComponentOptions;
+  dialogOptions?: VDialog['$props'];
   cardOptions?: VCard['$props'];
 };