feat: inherit global components and provides from root

src/qComponents/QMessageBox/index.ts

@@ -1,4 +1,18 @@
-import { createMessageBox as useMessageBox } from './src';
+import { getCurrentInstance } from 'vue';
+
+import { createMessageBox } from './src';
+import { QMessageBox, QMessageBoxHookOptions } from './src/types';
+
+const useMessageBox = (options?: QMessageBoxHookOptions): QMessageBox => {
+  const parentInstance = getCurrentInstance();
+
+  const messageBox = createMessageBox({
+    parentInstance,
+    ...options
+  });
+
+  return messageBox;
+};
 
 export { useMessageBox };
 export { QMessageBoxContent } from './src/QMessageBoxContent';
@@ -8,4 +22,4 @@ export type {
   QMessageBoxContentInstance
 } from './src/QMessageBoxContent';
 export { QMessageBoxAction } from './src/constants';
-export type { QMessageBoxOptions } from './src/types';
+export type { QMessageBox, QMessageBoxOptions } from './src/types';

src/qComponents/QMessageBox/src/index.ts

@@ -7,58 +7,85 @@ import { QMessageBoxContainer } from './QMessageBoxContainer';
 import type { QMessageBoxContainerInstance } from './QMessageBoxContainer';
 import { QMessageBoxAction } from './constants';
 import type {
+  QMessageBoxHookOptions,
   QMessageBoxContent,
   QMessageBoxOptions,
   QMessageBoxEvent,
-  MessageBoxPromise
+  MessageBoxPromise,
+  QMessageBox
 } from './types';
 
 export const createMessageBox = (
-  content: QMessageBoxContent,
-  options?: QMessageBoxOptions
-): Promise<QMessageBoxEvent> => {
-  let messageBoxPromise: MessageBoxPromise;
-  let app: Optional<App<Element>>;
+  config?: QMessageBoxHookOptions
+): QMessageBox => {
+  const messageBox = (
+    content: QMessageBoxContent,
+    options?: QMessageBoxOptions
+  ): Promise<QMessageBoxEvent> => {
+    let messageBoxPromise: MessageBoxPromise;
+    let app: Optional<App<Element>>;
 
-  const handleDone = ({ action, payload }: QMessageBoxEvent): void => {
-    if (action === QMessageBoxAction.confirm) {
-      messageBoxPromise.resolve({ action, payload });
-    } else if (
-      action === QMessageBoxAction.cancel ||
-      action === QMessageBoxAction.close
-    ) {
-      messageBoxPromise.reject({ action, payload });
-    }
-  };
+    const handleDone = ({ action, payload }: QMessageBoxEvent): void => {
+      if (action === QMessageBoxAction.confirm) {
+        messageBoxPromise.resolve({ action, payload });
+      } else if (
+        action === QMessageBoxAction.cancel ||
+        action === QMessageBoxAction.close
+      ) {
+        messageBoxPromise.reject({ action, payload });
+      }
+    };
 
-  const handleRemove = (): void => {
-    if (!app) return;
+    const handleRemove = (): void => {
+      if (!app) return;
 
-    app.unmount();
-    options?.onUnmounted?.(app);
-  };
+      app.unmount();
+      options?.onUnmounted?.(app);
+    };
 
-  nextTick(() => {
-    app = createApp(QMessageBoxContainer, {
-      ...(options ?? {}),
-      content,
-      onDone: handleDone,
-      onRemove: handleRemove
-    });
+    nextTick(() => {
+      app = createApp(QMessageBoxContainer, {
+        ...(options ?? {}),
+        content,
+        onDone: handleDone,
+        onRemove: handleRemove
+      });
 
-    options?.onBeforeMount?.(app);
+      const parentAppContext = config?.parentInstance?.appContext;
 
-    const container = app.mount(document.createElement('div'));
-    options?.onMounted?.(
-      app,
-      container as NonNullable<UnwrappedInstance<QMessageBoxContainerInstance>>
-    );
-  });
+      // Register a global components from main app instance
+      const components = parentAppContext?.components ?? {};
+      Object.entries(components).forEach(([key, value]) => {
+        app?.component(key, value);
+      });
 
-  return new Promise((resolve, reject) => {
-    messageBoxPromise = {
-      resolve,
-      reject
-    };
-  });
+      // Reprovide a global provides from main app instance
+      const provides = parentAppContext?.provides ?? {};
+      const providerKeys = Object.getOwnPropertySymbols(provides);
+      providerKeys.forEach(key => {
+        // TS does not allow use 'symbol' as index type, so we pretend like we don't
+        const value = provides[key as unknown as string];
+        if (value) app?.provide(key, value);
+      });
+
+      options?.onBeforeMount?.(app);
+
+      const container = app.mount(document.createElement('div'));
+      options?.onMounted?.(
+        app,
+        container as NonNullable<
+          UnwrappedInstance<QMessageBoxContainerInstance>
+        >
+      );
+    });
+
+    return new Promise((resolve, reject) => {
+      messageBoxPromise = {
+        resolve,
+        reject
+      };
+    });
+  };
+
+  return messageBox;
 };

src/qComponents/QMessageBox/src/types.ts

@@ -1,4 +1,4 @@
-import type { App } from 'vue';
+import type { App, ComponentInternalInstance } from 'vue';
 
 import type { Nullable, UnwrappedInstance } from '#/helpers';
 
@@ -16,7 +16,12 @@ type Styles = Record<string, string | number>;
 export type QMessageBoxOptionWrapClass = Nullable<string | Classes | Classes[]>;
 export type QMessageBoxOptionWrapStyle = Nullable<string | Styles | Styles[]>;
 
+export interface QMessageBoxHookOptions {
+  parentInstance?: Nullable<ComponentInternalInstance>;
+}
+
 export interface QMessageBoxOptions {
+  parentInstance?: Nullable<ComponentInternalInstance>;
   closeOnClickShadow?: Nullable<boolean>;
   distinguishCancelAndClose?: Nullable<boolean>;
   wrapClass?: QMessageBoxOptionWrapClass;
@@ -38,3 +43,10 @@ export interface MessageBoxPromise {
   resolve: (event: QMessageBoxEvent) => void;
   reject: (event: QMessageBoxEvent) => void;
 }
+
+export interface QMessageBox {
+  (
+    content: QMessageBoxContent,
+    options?: QMessageBoxOptions
+  ): Promise<QMessageBoxEvent>;
+}

stories/plugins/QMessageBox/Component.stories.ts

@@ -11,9 +11,11 @@ const storyMetadata: Meta = {
 const QMessageBoxComponentStory: Story<never> = () =>
   defineComponent({
     setup() {
+      const messageBox = useMessageBox();
+
       const handleClick = async (): Promise<void> => {
         try {
-          const result = await useMessageBox(
+          const result = await messageBox(
             defineAsyncComponent(() => import('./MessageBoxFormTest.vue')),
             { distinguishCancelAndClose: true }
           );

stories/plugins/QMessageBox/Default.stories.ts

@@ -15,6 +15,8 @@ const storyMetadata: Meta = {
 const QMessageBoxStory: Story<QMessageBoxContentProps> = args =>
   defineComponent({
     setup() {
+      const messageBox = useMessageBox();
+
       const beforeClose: QMessageBoxContentPropBeforeClose = async action => {
         if (action !== 'confirm') return true;
 
@@ -34,7 +36,7 @@ const QMessageBoxStory: Story<QMessageBoxContentProps> = args =>
 
       const handleClick = async (): Promise<void> => {
         try {
-          const result = await useMessageBox(
+          const result = await messageBox(
             {
               title: args.title,
               message: args.message,

stories/plugins/QMessageBox/Extended.stories.ts

@@ -11,9 +11,11 @@ const storyMetadata: Meta = {
 const QMessageBoxExtendedStory: Story<never> = () =>
   defineComponent({
     setup() {
+      const messageBox = useMessageBox();
+
       const handleClick = async (): Promise<void> => {
         try {
-          const result = await useMessageBox(
+          const result = await messageBox(
             {
               component: defineAsyncComponent(
                 () => import('./MessageBoxFormTest.vue')