fix(modal-plugin): add props on modal options (#330)

pubg · Feb 18, 2025 · b8acb9a · b8acb9a
1 parent 78d05cb
commit b8acb9a
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 12 deletions.
diff --git a/packages/vlossom/src/components/vs-content-renderer/VsContentRenderer.vue b/packages/vlossom/src/components/vs-content-renderer/VsContentRenderer.vue
@@ -1,6 +1,6 @@
 <template>
     <div v-if="typeof content === 'string'" v-html="content" />
-    <component v-else :is="toRaw(content)" />
+    <component v-else :is="toRaw(content)" v-bind="props" />
 </template>
 
 <script lang="ts">
@@ -10,6 +10,7 @@ export default defineComponent({
     name: 'VsContentRenderer',
     props: {
         content: { type: [String, Object, Function] as PropType<string | Component>, required: true },
+        props: { type: Object as PropType<Record<string, any>>, default: () => ({}) },
     },
     setup() {
         return { toRaw };

diff --git a/packages/vlossom/src/components/vs-modal/VsModalView.vue b/packages/vlossom/src/components/vs-modal/VsModalView.vue
@@ -17,11 +17,11 @@
                 :callbacks="modal.callbacks"
             >
                 <template #header v-if="modal.header">
-                    <vs-content-renderer :content="modal.header" />
+                    <vs-content-renderer :content="modal.header" :props="modal.props" />
                 </template>
-                <vs-content-renderer v-if="modal.component" :content="modal.component" />
+                <vs-content-renderer v-if="modal.component" :content="modal.component" :props="modal.props" />
                 <template #footer v-if="modal.footer">
-                    <vs-content-renderer :content="modal.footer" />
+                    <vs-content-renderer :content="modal.footer" :props="modal.props" />
                 </template>
             </vs-modal-node>
         </TransitionGroup>
@@ -31,7 +31,7 @@
 <script lang="ts">
 import { computed, ComputedRef, defineComponent, toRefs, watch } from 'vue';
 import { store } from '@/stores';
-import { useContentRenderer, useScrollLock } from '@/composables';
+import { useScrollLock } from '@/composables';
 import VsModalNode from '@/components/vs-modal/VsModalNode.vue';
 import VsContentRenderer from '@/components/vs-content-renderer/VsContentRenderer.vue';
 import { MODAL_DURATION } from '@/declaration';
@@ -47,8 +47,6 @@ export default defineComponent({
             return store.modal.itemsByContainer.value[container.value] || [];
         });
 
-        const { getRenderedContent } = useContentRenderer();
-
         const wrapperId = computed(() => `vs-modal-${container.value.replace('#', '').replace('.', '')}`);
 
         const isFixed = computed(() => container.value === 'body');
@@ -73,7 +71,7 @@ export default defineComponent({
             }
         });
 
-        return { modals, getRenderedContent, wrapperId, isFixed, MODAL_DURATION };
+        return { modals, wrapperId, isFixed, MODAL_DURATION };
     },
 });
 </script>

diff --git a/packages/vlossom/src/composables/content-renderer-composable.ts b/packages/vlossom/src/composables/content-renderer-composable.ts
@@ -2,8 +2,8 @@ import { Component, h } from 'vue';
 import { VsContentRenderer } from '@/components';
 
 export function useContentRenderer() {
-    function getRenderedContent(content: string | Component) {
-        return h(VsContentRenderer, { content });
+    function getRenderedContent(content: string | Component, props: Record<string, any> = {}) {
+        return h(VsContentRenderer, { content, ...props });
     }
 
     return { getRenderedContent };

diff --git a/packages/vlossom/src/declaration/types.ts b/packages/vlossom/src/declaration/types.ts
@@ -217,6 +217,7 @@ export type OverlayCallbacks<T = void> = { [eventName: string]: (...args: any[])
 
 export interface ModalOptions<T> {
     component: string | Component;
+    props?: Record<string, any>;
     header?: string | Component;
     footer?: string | Component;
     container?: string;

diff --git a/packages/vlossom/src/plugins/confirm-plugin/confirm-plugin.ts b/packages/vlossom/src/plugins/confirm-plugin/confirm-plugin.ts
@@ -8,7 +8,7 @@ import { useContentRenderer } from '@/composables';
 export const confirmPlugin: ConfirmPlugin = {
     open: (content: string | Component, confirmOptions: ConfirmOptions = {}): Promise<boolean> => {
         return new Promise((resolve) => {
-            const { okText, cancelText, size = 'xs', callbacks = {}, styleSet } = confirmOptions;
+            const { okText, cancelText, size = 'xs', callbacks = {}, styleSet, props } = confirmOptions;
             const { getRenderedContent } = useContentRenderer();
             const modalId = modalPlugin.open({
                 ...confirmOptions,
@@ -17,7 +17,7 @@ export const confirmPlugin: ConfirmPlugin = {
                     { okText, cancelText, styleSet },
                     {
                         default: () => {
-                            return getRenderedContent(content);
+                            return getRenderedContent(content, props);
                         },
                     },
                 ),