Merge pull request #673 from mathuo/672-vu3-injectprovides-not-propagated-to-panels

bug: maintain inject/provide context

packages/dockview-vue/src/utils.ts

@@ -72,6 +72,10 @@ export function mountVueComponent<T extends Record<string, any>>(
     let vNode = createVNode(component, Object.freeze(props));
 
     vNode.appContext = parent.appContext;
+    vNode.appContext.provides = {
+        ...(vNode.appContext.provides ? vNode.appContext.provides : {}),
+        ...((parent as any).provides ? (parent as any).provides : {}),
+    };
 
     render(vNode, element);
 

packages/docs/templates/dockview/basic/vue/src/index.ts

@@ -7,6 +7,7 @@ import {
 } from 'dockview-vue';
 
 const Panel = defineComponent({
+    inject: ['vu3ProvideInjectEvidenceTestMessage'],
     name: 'Panel',
     props: {
         params: {
@@ -14,14 +15,27 @@ const Panel = defineComponent({
             required: true,
         },
     },
-    setup(props) {
+    data() {
         return {
-            title: props.params.api.title,
+            title: '',
+            message: this.vu3ProvideInjectEvidenceTestMessage ?? 'not found',
+        };
+    },
+    mounted() {
+        const disposable = this.params.api.onDidTitleChange(() => {
+            this.title = this.params.api.title;
+        });
+        this.title = this.params.api.title;
+
+        return () => {
+            disposable.dispose();
         };
     },
     template: `
     <div style="height:100%; color:red;">
       Hello World
+      <div>{{title}}</div>
+      <div>{{message}}</div>
     </div>`,
 });
 
@@ -40,6 +54,11 @@ const App = defineComponent({
             });
         },
     },
+    provide() {
+        return {
+            vu3ProvideInjectEvidenceTestMessage: 'Hello from the provider',
+        };
+    },
     template: `
       <dockview-vue
         style="width:100%; height:100%"