feat: vue3 prep

2025-08-16 22:26:01 +00:00 · 2024-04-17 20:53:47 +01:00 · 2024-04-17 20:53:47 +01:00 · b0ed0a99ff
commit b0ed0a99ff
parent 6ca39ba58b
27 changed files with 270 additions and 489 deletions
--- a/packages/dockview-vue/src/dockview/dockview.vue
+++ b/packages/dockview-vue/src/dockview/dockview.vue
@ -300,6 +300,8 @@ onMounted(() => {
     */
    instance.value = markRaw(dockview);

+    console.log(getCurrentInstance())
+

    emit('ready', { api: new DockviewApi(dockview) });
 });
--- a/packages/dockview-vue/src/utils.ts
+++ b/packages/dockview-vue/src/utils.ts
@ -2,9 +2,12 @@ import type {
    DockviewGroupPanel,
    GroupPanelPartInitParameters,
    IContentRenderer,
+    IDockviewPanelHeaderProps,
+    IDockviewPanelProps,
    IGroupHeaderProps,
    IHeaderActionsRenderer,
    ITabRenderer,
+    IWatermarkPanelProps,
    IWatermarkRenderer,
    PanelUpdateEvent,
    Parameters,
@ -15,7 +18,6 @@ import {
    type ComponentOptionsBase,
    render,
    cloneVNode,
-    mergeProps,
    type DefineComponent,
    type ComponentInternalInstance,
 } from 'vue';
@ -33,6 +35,26 @@ export type ComponentInterface = ComponentOptionsBase<

 export type VueComponent<T = any> = DefineComponent<T>;

+export function findComponent(parent: ComponentInternalInstance, name: string) {
+    let instance = parent as any;
+    let component = null;
+
+    while (!component && instance.parent) {
+        component = instance.components?.[name];
+        instance = instance.parent;
+    }
+
+    if (!component) {
+        component = parent.appContext.components?.[name];
+    }
+
+    if (!component) {
+        throw new Error(`Failed to find Vue Component ${name}`);
+    }
+
+    return component;
+}
+
 /**
 * TODO List
 *
@ -90,7 +112,7 @@ export class VueContentRenderer implements IContentRenderer {
    }

    init(parameters: GroupPanelPartInitParameters): void {
-        const props = {
+        const props: IDockviewPanelProps = {
            params: parameters.params,
            api: parameters.api,
            containerApi: parameters.containerApi,
@ -100,7 +122,7 @@ export class VueContentRenderer implements IContentRenderer {
        this._renderDisposable = mountVueComponent(
            this.component,
            this.parent,
-            props,
+            { params: props },
            this.element
        );
    }
@ -141,7 +163,7 @@ export class VueTabRenderer implements ITabRenderer {
    }

    init(parameters: GroupPanelPartInitParameters): void {
-        const props = {
+        const props: IDockviewPanelHeaderProps = {
            params: parameters.params,
            api: parameters.api,
            containerApi: parameters.containerApi,
@ -151,7 +173,7 @@ export class VueTabRenderer implements ITabRenderer {
        this._renderDisposable = mountVueComponent(
            this.component,
            this.parent,
-            props,
+            { params: props },
            this.element
        );
    }
@ -188,7 +210,7 @@ export class VueWatermarkRenderer implements IWatermarkRenderer {
    }

    init(parameters: WatermarkRendererInitParameters): void {
-        const props = {
+        const props: IWatermarkPanelProps = {
            group: parameters.group,
            containerApi: parameters.containerApi,
        };
@ -197,7 +219,7 @@ export class VueWatermarkRenderer implements IWatermarkRenderer {
        this._renderDisposable = mountVueComponent(
            this.component,
            this.parent,
-            props,
+            { params: props },
            this.element
        );
    }
@ -238,13 +260,12 @@ export class VueHeaderActionsRenderer implements IHeaderActionsRenderer {
        this._element.style.height = '100%';
    }

-    init(params: IGroupHeaderProps): void {
-        console.log(params);
+    init(props: IGroupHeaderProps): void {
        this._renderDisposable?.dispose();
        this._renderDisposable = mountVueComponent(
            this.component,
            this.parent,
-            { ...params },
+            { params: props },
            this.element
        );
    }
--- a/packages/dockview/src/dockview/dockview.tsx
+++ b/packages/dockview/src/dockview/dockview.tsx
@ -70,7 +70,9 @@ export interface IDockviewReactProps extends DockviewOptions {
 function extractCoreOptions(props: IDockviewReactProps): DockviewOptions {
    const coreOptions = (PROPERTY_KEYS as (keyof DockviewOptions)[]).reduce(
        (obj, key) => {
-            obj[key] = props[key] as any;
+            if (key in props) {
+                obj[key] = props[key] as any;
+            }
            return obj;
        },
        {} as Partial<DockviewComponentOptions>
@ -137,7 +139,7 @@ export const DockviewReact = React.forwardRef(
                    const key = propKey as keyof DockviewOptions;
                    const propValue = props[key];

-                    if (propValue !== prevProps.current[key]) {
+                    if (key in props && propValue !== prevProps.current[key]) {
                        changes[key] = propValue as any;
                    }
                });
--- a/packages/docs/blog/2024-04-19-dockview-1.13.0.md
+++ b/packages/docs/blog/2024-04-19-dockview-1.13.0.md
@ -14,6 +14,8 @@ Please reference docs @ [dockview.dev](https://dockview.dev).

 ## 🛠 Miscs

+-   Bug: width and height set incorrectly on floating groups when resized [#580](https://github.com/mathuo/dockview/issues/580)
+
 -   Create framework packages in preperation for multiple framework support [#541](https://github.com/mathuo/dockview/pull/541)
    These are still in active development and will be offically support soon.

--- a/packages/docs/docs/core/locked.mdx
+++ b/packages/docs/docs/core/locked.mdx
@ -12,4 +12,6 @@ This section describes how to lock the dock to prevent movement.
 You may want to combine this with `disableDnd={true}` to provide a locked grid with no dnd funtionality. See [Disable Dnd](/docs/core/dnd/disable) for more.
 :::

+Locking the component prevent the resizing of components using the drag handles between panels.
+
 <CodeRunner id='dockview/locked'/>
--- a/packages/docs/docs/overview/getStarted/installation.mdx
+++ b/packages/docs/docs/overview/getStarted/installation.mdx
@ -22,3 +22,12 @@ npm install dockview
 ```
 </FrameworkSpecific>

+
+<FrameworkSpecific framework='Vue'>
+Firstly, install the `dockview-vue` library:
+
+```sh
+npm install dockview-vue
+```
+</FrameworkSpecific>
+
--- a/packages/docs/scripts/buildTemplates.mjs
+++ b/packages/docs/scripts/buildTemplates.mjs
@ -6,9 +6,15 @@ import { fileURLToPath } from 'url';

 const __dirname = path.dirname(fileURLToPath(import.meta.url));

+const { version } = JSON.parse(
+    fs.readFileSync(
+        path.join(__dirname, '..', '..', 'dockview', 'package.json')
+    )
+);
+
 const REACT_VERSION = '18.2.0';
 const VUE_VERSION = '3.4.21';
-const DOCKVIEW_VERSION = '1.11.0';
+const DOCKVIEW_VERSION = version;
 const USE_LOCAL_CDN = argv.slice(2).includes('--local');

 const local = 'http://localhost:1111';
@ -107,7 +113,7 @@ for (const component of COMPONENTS) {
                path.join(output, component, folder, framework, 'src')
            );
            const template = createIndexHTML({
-                title: 'React App',
+                title: `Dockview | ${folder} ${framework}`,
                app:
                    framework === 'react'
                        ? './src/index.tsx'
--- a/packages/docs/scripts/template.html
+++ b/packages/docs/scripts/template.html
@ -1,120 +1,95 @@
 <!DOCTYPE html>
 <html lang="en">
+    <head>
+        <title>{{title}}</title>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="/img/dockview_logo.ico" data-rh="true" />
+        <link
+            rel="stylesheet"
+            href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
+        />
+        <style media="only screen">
+            html,
+            body,
+            #app {
+                height: 100%;
+                width: 100%;
+                margin: 0;
+                box-sizing: border-box;
+                -webkit-overflow-scrolling: touch;
+                font-family: ui-sans-serif, system-ui, -apple-system,
+                    BlinkMacSystemFont, Segoe UI, Roboto;
+            }

-<head>
-  <title>{{title}}</title>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <link rel="icon" href="/img/dockview_logo.ico" data-rh="true">
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
-  <style media="only screen">
-    html,
-    body,
-    #app {
-      height: 100%;
-      width: 100%;
-      margin: 0;
-      box-sizing: border-box;
-      -webkit-overflow-scrolling: touch;
-      font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto;
-    }
+            html {
+                position: absolute;
+                top: 0;
+                left: 0;
+                padding: 0;
+                overflow: auto;
+            }

-    html {
-      position: absolute;
-      top: 0;
-      left: 0;
-      padding: 0;
-      overflow: auto;
-    }
+            body {
+                padding: 16px;
+                overflow: auto;
+            }
+        </style>
+        <script type="systemjs-importmap">
+            {
+              "imports": {
+                {{importPaths}}
+              }
+            }
+        </script>
+        <script src="https://cdn.jsdelivr.net/npm/systemjs@6.8.0/dist/system.min.js"></script>
+        <script src="https://cdn.jsdelivr.net/npm/systemjs-babel@0.3.2/dist/systemjs-babel.js"></script>
+        <script>
+            async function importCSSStyleSheet(uri) {
+                const link = document.createElement('link');
+                link.rel = 'stylesheet';
+                link.href = uri;
+                document.head.appendChild(link);
+            }

-    body {
-      padding: 16px;
-      overflow: auto;
-    }
-  </style>
-  <script type="systemjs-importmap">
-      {
-        "imports": {
-          {{importPaths}}
-        }
-      }
-    </script>
-  <script src="https://cdn.jsdelivr.net/npm/systemjs@6.8.0/dist/system.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/systemjs-babel@0.3.2/dist/systemjs-babel.js"></script>
-  <script>
-    async function importCSSStyleSheet(uri) {
+            System.onload = function (err, id, deps, isErrSource) {
+                console.log(id);
+                if (id.endsWith('.css') && !err) {
+                    importCSSStyleSheet(id);
+                }
+            };
+        </script>
+    </head>

-      const link = document.createElement('link');
-      link.rel = 'stylesheet';
-      link.href = uri;
-      document.head.appendChild(link);
-      console.log('add link')
-
-      // const styles = (await import(uri)).default;
-
-      // const el = document.createElement('style');
-      // el.type = 'text/css';
-
-      // el.innerHTML = Array.from(styles.cssRules)
-      //     .map((x) => x.cssText)
-      //     .join(' ');
-
-      // document.head.appendChild(el);
-    }
-
-    // System.resolve = function (id, parentUrl) {
-    //   console.log(id, parentUrl);
-    //   return id;
-    //   return ''
-    // }
-
-    System.onload = function (err, id, deps, isErrSource) {
-      console.log(id);
-      if (id.endsWith('.css') && !err) {
-          importCSSStyleSheet(id);
-
-        // const module = System.get(id);
-        // console.log(module);
-        // const styles = module?.default;
-        // if (styles) {
-        //   // importCSSStyleSheet(styles);
-        //   document.adoptedStyleSheets = [...document.adoptedStyleSheets, styles];
-        // }
-      }
-    };
-  </script>
-
-</head>
-
-<body>
-  <div id="app">
-    <script type="systemjs-module" src="import:{{app}}"></script>
-  </div>
-  <object id="loading-spinner" style="
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%) scale(0.75);
-      " type="image/svg+xml" data="https://dockview.dev/img/dockview_logo.svg" aria-label="loading"></object>
-  <script id="loading-script">
-    (function () {
-      const cleanupLoading = () => {
-        if (
-          document.querySelector(
-            '.dv-dockview'
-          )
-        ) {
-          document.querySelector('#loading-spinner').remove();
-          document.querySelector('#loading-script').remove();
-        } else {
-          requestAnimationFrame(() => cleanupLoading());
-        }
-      };
-
-      cleanupLoading();
-    })();
-  </script>
-
-</body>
+    <body>
+        <div id="app">
+            <script type="systemjs-module" src="import:{{app}}"></script>
+        </div>
+        <object
+            id="loading-spinner"
+            style="
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%) scale(0.75);
+            "
+            type="image/svg+xml"
+            data="https://dockview.dev/img/dockview_logo.svg"
+            aria-label="loading"
+        ></object>
+        <script id="loading-script">
+            (function () {
+                const cleanupLoading = () => {
+                    if (document.querySelector('.dv-dockview')) {
+                        document.querySelector('#loading-spinner').remove();
+                        document.querySelector('#loading-script').remove();
+                    } else {
+                        requestAnimationFrame(() => cleanupLoading());
+                    }
+                };

+                cleanupLoading();
+            })();
+        </script>
+    </body>
 </html>
--- a/packages/docs/src/components/frameworkSpecific.tsx
+++ b/packages/docs/src/components/frameworkSpecific.tsx
@ -4,9 +4,10 @@ import * as React from 'react';
 import { IS_PROD } from '../flags';

 const frameworks = [
-    { value: 'JavaScript', label: 'JavaScript' },
+    // { value: 'JavaScript', label: 'JavaScript' },
    { value: 'React', label: 'React' },
-    { value: 'Angular', label: 'Angular' },
+    { value: 'Vue', label: 'Vue' },
+    // { value: 'Angular', label: 'Angular' },
 ];

 const activeFrameworkGlobal = new DockviewEmitter<string>({ replay: true });
@ -36,7 +37,7 @@ export function useActiveFramework(): [string, (value: string) => void] {
        activeFrameworkGlobal.fire(value);
    }, []);

-    return [IS_PROD ? frameworks[1].value : value, setter];
+    return [IS_PROD ? frameworks[0].value : value, setter];
 }

 const FrameworkSelector1 = () => {
--- a/packages/docs/src/components/ui/codeRunner.tsx
+++ b/packages/docs/src/components/ui/codeRunner.tsx
@ -22,6 +22,13 @@ export const _CodeRunner = (props: {
            />
            <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
                <CodeSandbox url={sandboxUrl} />
+                <a
+                    target="#blank"
+                    href={path}
+                    className="material-symbols-outlined"
+                >
+                    open_in_new
+                </a>
            </div>
        </div>
    );
--- a/packages/docs/src/flags.ts
+++ b/packages/docs/src/flags.ts
@ -1 +1 @@
-export const IS_PROD = true;
+export const IS_PROD = false;
--- a/packages/docs/templates/dockview/basic/vue/src/index.ts
+++ b/packages/docs/templates/dockview/basic/vue/src/index.ts
@ -6,22 +6,14 @@ import { DockviewReadyEvent, IDockviewPanelProps } from 'dockview-core';
 const Panel = defineComponent({
    name: 'Panel',
    props: {
-        api: {
-            type: Object as PropType<IDockviewPanelProps['api']>,
-            required: true,
-        },
-        containerApi: {
-            type: Object as PropType<IDockviewPanelProps['containerApi']>,
-            required: true,
-        },
        params: {
-            type: Object as PropType<IDockviewPanelProps['params']>,
+            type: Object as PropType<IDockviewPanelProps>,
            required: true,
        },
    },
    setup(props) {
        return {
-            title: props.api.title,
+            title: props.params.api.title,
        };
    },
    template: `
--- a/packages/docs/templates/dockview/custom-header/vue/src/index.ts
+++ b/packages/docs/templates/dockview/custom-header/vue/src/index.ts
@ -10,16 +10,8 @@ import {
 const Panel = defineComponent({
    name: 'Panel',
    props: {
-        api: {
-            type: Object as PropType<IDockviewPanelProps['api']>,
-            required: true,
-        },
-        containerApi: {
-            type: Object as PropType<IDockviewPanelProps['containerApi']>,
-            required: true,
-        },
        params: {
-            type: Object as PropType<IDockviewPanelProps['params']>,
+            type: Object as PropType<IDockviewPanelProps>,
            required: true,
        },
    },
@ -43,9 +35,9 @@ const Panel = defineComponent({
            console.log('interval');

            const interval = setInterval(() => {
-                this.api.updateParameters({ myValue: Date.now() });
+                this.params.api.updateParameters({ myValue: Date.now() });
            }, 1000);
-            this.api.updateParameters({ myValue: Date.now() });
+            this.parmas.api.updateParameters({ myValue: Date.now() });

            return () => {
                clearInterval(interval);
@ -53,10 +45,10 @@ const Panel = defineComponent({
        },
    },
    mounted() {
-        const disposable = this.api.onDidTitleChange(() => {
-            this.title = this.api.title;
+        const disposable = this.params.api.onDidTitleChange(() => {
+            this.title = this.params.api.title;
        });
-        this.title = this.api.title;
+        this.title = this.params.api.title;

        return () => {
            disposable.dispose();
@ -78,28 +70,14 @@ interface CustomParams {
 const Tab = defineComponent({
    name: 'Tab',
    props: {
-        api: {
-            type: Object as PropType<
-                IDockviewPanelHeaderProps<CustomParams>['api']
-            >,
-            required: true,
-        },
-        containerApi: {
-            type: Object as PropType<
-                IDockviewPanelHeaderProps<CustomParams>['containerApi']
-            >,
-            required: true,
-        },
        params: {
-            type: Object as PropType<
-                IDockviewPanelHeaderProps<CustomParams>['params']
-            >,
+            type: Object as PropType<IDockviewPanelHeaderProps<CustomParams>>,
            required: true,
        },
    },
    data() {
        return {
-            myValue: this.params.myValue,
+            myValue: this.params.params.myValue,
            title: '',
        };
    },
@ -118,9 +96,9 @@ const Tab = defineComponent({
            }

            const interval = setInterval(() => {
-                this.api.updateParameters({ myValue: Date.now() });
+                this.params.api.updateParameters({ myValue: Date.now() });
            }, 1000);
-            this.api.updateParameters({ myValue: Date.now() });
+            this.params.api.updateParameters({ myValue: Date.now() });

            return () => {
                clearInterval(interval);
--- a/packages/docs/templates/dockview/floating-groups/vue/src/index.ts
+++ b/packages/docs/templates/dockview/floating-groups/vue/src/index.ts
@ -48,18 +48,8 @@ const MaterialIcon = defineComponent({
 const LeftAction = defineComponent({
    name: 'LeftAction',
    props: {
-        containerApi: {
-            type: Object as PropType<
-                IDockviewHeaderActionsProps['containerApi']
-            >,
-            required: true,
-        },
-        api: {
-            type: Object as PropType<IDockviewHeaderActionsProps['api']>,
-            required: true,
-        },
-        group: {
-            type: Object as PropType<IDockviewHeaderActionsProps['group']>,
+        params: {
+            type: Object as PropType<IDockviewHeaderActionsProps>,
            required: true,
        },
    },
@ -68,7 +58,7 @@ const LeftAction = defineComponent({
    },
    methods: {
        onClick() {
-            this.containerApi.addPanel({
+            this.params.containerApi.addPanel({
                id: (++panelCount).toString(),
                title: `Tab ${panelCount}`,
                component: 'default',
@ -84,18 +74,8 @@ const LeftAction = defineComponent({
 const RightAction = defineComponent({
    name: 'RightAction',
    props: {
-        containerApi: {
-            type: Object as PropType<
-                IDockviewHeaderActionsProps['containerApi']
-            >,
-            required: true,
-        },
-        api: {
-            type: Object as PropType<IDockviewHeaderActionsProps['api']>,
-            required: true,
-        },
-        group: {
-            type: Object as PropType<IDockviewHeaderActionsProps['group']>,
+        params: {
+            type: Object as PropType<IDockviewHeaderActionsProps>,
            required: true,
        },
    },
@ -104,23 +84,25 @@ const RightAction = defineComponent({
    },
    data() {
        return {
-            floating: this.api.location.type === 'floating',
+            floating: this.params.api.location.type === 'floating',
        };
    },
    methods: {
        onClick() {
            if (this.floating) {
-                const group = this.containerApi.addGroup();
+                const group = this.params.containerApi.addGroup();
                this.group.api.moveTo({ group });
            } else {
-                this.containerApi.addFloatingGroup(this.group);
+                this.containerApi.addFloatingGroup(this.params.group);
            }
        },
    },
    mounted() {
-        const disposable = this.group.api.onDidLocationChange((event) => {
-            this.floating = event.location.type === 'floating';
-        });
+        const disposable = this.params.group.api.onDidLocationChange(
+            (event) => {
+                this.floating = event.location.type === 'floating';
+            }
+        );

        return () => {
            disposable.dispose();
@ -136,16 +118,8 @@ const RightAction = defineComponent({
 const Panel = defineComponent({
    name: 'Panel',
    props: {
-        api: {
-            type: Object as PropType<IDockviewPanelProps['api']>,
-            required: true,
-        },
-        containerApi: {
-            type: Object as PropType<IDockviewPanelProps['containerApi']>,
-            required: true,
-        },
        params: {
-            type: Object as PropType<IDockviewPanelProps['params']>,
+            type: Object as PropType<IDockviewPanelProps>,
            required: true,
        },
    },
@ -155,10 +129,10 @@ const Panel = defineComponent({
        };
    },
    mounted() {
-        const disposable = this.api.onDidTitleChange(() => {
-            this.title = this.api.title;
+        const disposable = this.params.api.onDidTitleChange(() => {
+            this.title = this.params.api.title;
        });
-        this.title = this.api.title;
+        this.title = this.params.api.title;

        return () => {
            disposable.dispose();
--- a/packages/docs/templates/dockview/group-actions/vue/src/index.ts
+++ b/packages/docs/templates/dockview/group-actions/vue/src/index.ts
@ -2,7 +2,6 @@ import 'dockview-core/dist/styles/dockview.css';
 import { PropType, createApp, defineComponent } from 'vue';
 import { DockviewVue } from 'dockview-vue';
 import {
-    DockviewGroupPanelApi,
    DockviewReadyEvent,
    IDockviewHeaderActionsProps,
    IDockviewPanelProps,
@ -12,18 +11,8 @@ import './app.css';
 const LeftAction = defineComponent({
    name: 'LeftAction',
    props: {
-        containerApi: {
-            type: Object as PropType<
-                IDockviewHeaderActionsProps['containerApi']
-            >,
-            required: true,
-        },
-        api: {
-            type: Object as PropType<IDockviewHeaderActionsProps['api']>,
-            required: true,
-        },
-        group: {
-            type: Object as PropType<IDockviewHeaderActionsProps['group']>,
+        params: {
+            type: Object as PropType<IDockviewHeaderActionsProps>,
            required: true,
        },
    },
@ -33,11 +22,11 @@ const LeftAction = defineComponent({
        };
    },
    mounted() {
-        const disposable = this.api.onDidActivePanelChange((event) => {
+        const disposable = this.params.api.onDidActivePanelChange((event) => {
            this.activePanel = event.panel.id;
        });

-        this.activePanel = this.group.activePanel.id;
+        this.activePanel = this.params.group.activePanel.id;

        return () => {
            disposable.dispose();
@ -54,18 +43,8 @@ const LeftAction = defineComponent({
 const RightAction = defineComponent({
    name: 'RightAction',
    props: {
-        containerApi: {
-            type: Object as PropType<
-                IDockviewHeaderActionsProps['containerApi']
-            >,
-            required: true,
-        },
-        api: {
-            type: Object as PropType<IDockviewHeaderActionsProps['api']>,
-            required: true,
-        },
-        group: {
-            type: Object as PropType<IDockviewHeaderActionsProps['group']>,
+        params: {
+            type: Object as PropType<IDockviewHeaderActionsProps>,
            required: true,
        },
    },
@ -75,7 +54,7 @@ const RightAction = defineComponent({
        };
    },
    mounted() {
-        const disposable = this.api.onDidActiveChange((event) => {
+        const disposable = this.params.api.onDidActiveChange((event) => {
            this.isGroupActive = event.isActive;
        });

@ -99,14 +78,8 @@ const RightAction = defineComponent({
 const PrefixAction = defineComponent({
    name: 'PrefixAction',
    props: {
-        containerApi: {
-            type: Object as PropType<
-                IDockviewHeaderActionsProps['containerApi']
-            >,
-            required: true,
-        },
-        group: {
-            type: Object as PropType<IDockviewHeaderActionsProps['group']>,
+        params: {
+            type: Object as PropType<IDockviewHeaderActionsProps>,
            required: true,
        },
    },
@ -116,16 +89,8 @@ const PrefixAction = defineComponent({
 const Panel = defineComponent({
    name: 'Panel',
    props: {
-        api: {
-            type: Object as PropType<IDockviewPanelProps['api']>,
-            required: true,
-        },
-        containerApi: {
-            type: Object as PropType<IDockviewPanelProps['containerApi']>,
-            required: true,
-        },
        params: {
-            type: Object as PropType<IDockviewPanelProps['params']>,
+            type: Object as PropType<IDockviewPanelProps>,
            required: true,
        },
    },
@ -136,10 +101,10 @@ const Panel = defineComponent({
    },

    mounted() {
-        const disposable = this.api.onDidTitleChange(() => {
-            this.title = this.api.title;
+        const disposable = this.params.api.onDidTitleChange(() => {
+            this.title = this.params.api.title;
        });
-        this.title = this.api.title;
+        this.title = this.params.api.title;

        return () => {
            disposable.dispose();
--- a/packages/docs/templates/dockview/layout/vue/src/index.ts
+++ b/packages/docs/templates/dockview/layout/vue/src/index.ts
@ -65,18 +65,8 @@ const MaterialIcon = defineComponent({
 const LeftAction = defineComponent({
    name: 'LeftAction',
    props: {
-        containerApi: {
-            type: Object as PropType<
-                IDockviewHeaderActionsProps['containerApi']
-            >,
-            required: true,
-        },
-        api: {
-            type: Object as PropType<IDockviewHeaderActionsProps['api']>,
-            required: true,
-        },
-        group: {
-            type: Object as PropType<IDockviewHeaderActionsProps['group']>,
+        params: {
+            type: Object as PropType<IDockviewHeaderActionsProps>,
            required: true,
        },
    },
@ -85,7 +75,7 @@ const LeftAction = defineComponent({
    },
    methods: {
        onClick() {
-            this.containerApi.addPanel({
+            this.params.containerApi.addPanel({
                id: (++panelCount).toString(),
                title: `Tab ${panelCount}`,
                component: 'default',
@ -101,16 +91,8 @@ const LeftAction = defineComponent({
 const Panel = defineComponent({
    name: 'Panel',
    props: {
-        api: {
-            type: Object as PropType<IDockviewPanelProps['api']>,
-            required: true,
-        },
-        containerApi: {
-            type: Object as PropType<IDockviewPanelProps['containerApi']>,
-            required: true,
-        },
        params: {
-            type: Object as PropType<IDockviewPanelProps['params']>,
+            type: Object as PropType<IDockviewPanelProps>,
            required: true,
        },
    },
@ -120,7 +102,7 @@ const Panel = defineComponent({
        };
    },
    mounted() {
-        const disposable = this.api.onDidTitleChange(() => {
+        const disposable = this.params.api.onDidTitleChange(() => {
            this.title = this.api.title;
        });
        this.title = this.api.title;
--- a/packages/docs/templates/dockview/locked/vue/src/index.ts
+++ b/packages/docs/templates/dockview/locked/vue/src/index.ts
@ -1,25 +1,13 @@
 import 'dockview-core/dist/styles/dockview.css';
 import { PropType, createApp, defineComponent } from 'vue';
 import { DockviewVue } from 'dockview-vue';
-import {
-    DockviewApi,
-    DockviewReadyEvent,
-    IDockviewPanelProps,
-} from 'dockview-core';
+import { DockviewReadyEvent, IDockviewPanelProps } from 'dockview-core';

 const Panel = defineComponent({
    name: 'Panel',
    props: {
-        api: {
-            type: Object as PropType<IDockviewPanelProps['api']>,
-            required: true,
-        },
-        containerApi: {
-            type: Object as PropType<IDockviewPanelProps['containerApi']>,
-            required: true,
-        },
        params: {
-            type: Object as PropType<IDockviewPanelProps['params']>,
+            type: Object as PropType<IDockviewPanelProps>,
            required: true,
        },
    },
@ -30,7 +18,7 @@ const Panel = defineComponent({
    },

    mounted() {
-        const disposable = this.api.onDidTitleChange(() => {
+        const disposable = this.params.api.onDidTitleChange(() => {
            this.title = this.api.title;
        });
        this.title = this.api.title;
--- a/packages/docs/templates/dockview/maximize-group/vue/src/index.ts
+++ b/packages/docs/templates/dockview/maximize-group/vue/src/index.ts
@ -47,14 +47,8 @@ const MaterialIcon = defineComponent({
 const LeftAction = defineComponent({
    name: 'LeftAction',
    props: {
-        containerApi: {
-            type: Object as PropType<
-                IDockviewHeaderActionsProps['containerApi']
-            >,
-            required: true,
-        },
-        group: {
-            type: Object as PropType<IDockviewHeaderActionsProps['group']>,
+        params: {
+            type: Object as PropType<IDockviewHeaderActionsProps>,
            required: true,
        },
    },
@ -63,11 +57,11 @@ const LeftAction = defineComponent({
    },
    methods: {
        onClick() {
-            this.containerApi.addPanel({
+            this.parmas.containerApi.addPanel({
                id: (++panelCount).toString(),
                title: `Tab ${panelCount}`,
                component: 'default',
-                position: { referenceGroup: this.group },
+                position: { referenceGroup: this.params.group },
            });
        },
    },
@ -80,18 +74,8 @@ const LeftAction = defineComponent({
 const RightAction = defineComponent({
    name: 'RightAction',
    props: {
-        containerApi: {
-            type: Object as PropType<
-                IDockviewHeaderActionsProps['containerApi']
-            >,
-            required: true,
-        },
-        api: {
-            type: Object as PropType<IDockviewHeaderActionsProps['api']>,
-            required: true,
-        },
-        group: {
-            type: Object as PropType<IDockviewHeaderActionsProps['group']>,
+        params: {
+            type: Object as PropType<IDockviewHeaderActionsProps>,
            required: true,
        },
    },
@ -101,9 +85,11 @@ const RightAction = defineComponent({
        };
    },
    mounted() {
-        const disposable = this.containerApi.onDidMaximizedGroupChange(() => {
-            this.maximized = this.api.isMaximized();
-        });
+        const disposable = this.params.containerApi.onDidMaximizedGroupChange(
+            () => {
+                this.maximized = this.api.isMaximized();
+            }
+        );

        this.maximized = this.api.isMaximized();

@ -133,16 +119,8 @@ const RightAction = defineComponent({
 const Panel = defineComponent({
    name: 'Panel',
    props: {
-        api: {
-            type: Object as PropType<IDockviewPanelProps['api']>,
-            required: true,
-        },
-        containerApi: {
-            type: Object as PropType<IDockviewPanelProps['containerApi']>,
-            required: true,
-        },
        params: {
-            type: Object as PropType<IDockviewPanelProps['params']>,
+            type: Object as PropType<IDockviewPanelProps>,
            required: true,
        },
    },
@ -153,7 +131,7 @@ const Panel = defineComponent({
    },

    mounted() {
-        const disposable = this.api.onDidTitleChange(() => {
+        const disposable = this.params.api.onDidTitleChange(() => {
            this.title = this.api.title;
        });
        this.title = this.api.title;
--- a/packages/docs/templates/dockview/nested/vue/src/index.ts
+++ b/packages/docs/templates/dockview/nested/vue/src/index.ts
@ -6,16 +6,8 @@ import { DockviewReadyEvent, IDockviewPanelProps } from 'dockview-core';
 const Panel = defineComponent({
    name: 'Panel',
    props: {
-        api: {
-            type: Object as PropType<IDockviewPanelProps['api']>,
-            required: true,
-        },
-        containerApi: {
-            type: Object as PropType<IDockviewPanelProps['containerApi']>,
-            required: true,
-        },
        params: {
-            type: Object as PropType<IDockviewPanelProps['params']>,
+            type: Object as PropType<IDockviewPanelProps>,
            required: true,
        },
    },
@ -25,7 +17,7 @@ const Panel = defineComponent({
        };
    },
    mounted() {
-        const disposable = this.api.onDidTitleChange(() => {
+        const disposable = this.params.api.onDidTitleChange(() => {
            this.title = this.api.title;
        });
        this.title = this.api.title;
--- a/packages/docs/templates/dockview/popout-group/vue/src/index.ts
+++ b/packages/docs/templates/dockview/popout-group/vue/src/index.ts
@ -48,18 +48,8 @@ const MaterialIcon = defineComponent({
 const LeftAction = defineComponent({
    name: 'LeftAction',
    props: {
-        containerApi: {
-            type: Object as PropType<
-                IDockviewHeaderActionsProps['containerApi']
-            >,
-            required: true,
-        },
-        api: {
-            type: Object as PropType<IDockviewHeaderActionsProps['api']>,
-            required: true,
-        },
-        group: {
-            type: Object as PropType<IDockviewHeaderActionsProps['group']>,
+        params: {
+            type: Object as PropType<IDockviewHeaderActionsProps>,
            required: true,
        },
    },
@ -68,7 +58,7 @@ const LeftAction = defineComponent({
    },
    methods: {
        onClick() {
-            this.containerApi.addPanel({
+            this.params.containerApi.addPanel({
                id: (++panelCount).toString(),
                title: `Tab ${panelCount}`,
                component: 'default',
@ -84,18 +74,8 @@ const LeftAction = defineComponent({
 const RightAction = defineComponent({
    name: 'RightAction',
    props: {
-        containerApi: {
-            type: Object as PropType<
-                IDockviewHeaderActionsProps['containerApi']
-            >,
-            required: true,
-        },
-        api: {
-            type: Object as PropType<IDockviewHeaderActionsProps['api']>,
-            required: true,
-        },
-        group: {
-            type: Object as PropType<IDockviewHeaderActionsProps['group']>,
+        params: {
+            type: Object as PropType<IDockviewHeaderActionsProps>,
            required: true,
        },
    },
@ -104,25 +84,27 @@ const RightAction = defineComponent({
    },
    data() {
        return {
-            isPopout: this.api.location.type === 'popout',
+            isPopout: this.params.api.location.type === 'popout',
        };
    },
    methods: {
        onClick() {
            if (this.isPopout) {
-                const group = this.containerApi.addGroup();
+                const group = this.params.containerApi.addGroup();
                this.group.api.moveTo({ group });
            } else {
-                this.containerApi.addPopoutGroup(this.group, {
+                this.params.containerApi.addPopoutGroup(this.params.group, {
                    popoutUrl: '/popout/index.html',
                });
            }
        },
    },
    mounted() {
-        const disposable = this.group.api.onDidLocationChange((event) => {
-            this.isPopout = event.location.type === 'popout';
-        });
+        const disposable = this.params.group.api.onDidLocationChange(
+            (event) => {
+                this.isPopout = event.location.type === 'popout';
+            }
+        );

        return () => {
            disposable.dispose();
@ -138,16 +120,8 @@ const RightAction = defineComponent({
 const Panel = defineComponent({
    name: 'Panel',
    props: {
-        api: {
-            type: Object as PropType<IDockviewPanelProps['api']>,
-            required: true,
-        },
-        containerApi: {
-            type: Object as PropType<IDockviewPanelProps['containerApi']>,
-            required: true,
-        },
        params: {
-            type: Object as PropType<IDockviewPanelProps['params']>,
+            type: Object as PropType<IDockviewPanelProps>,
            required: true,
        },
    },
@ -157,7 +131,7 @@ const Panel = defineComponent({
        };
    },
    mounted() {
-        const disposable = this.api.onDidTitleChange(() => {
+        const disposable = this.params.api.onDidTitleChange(() => {
            this.title = this.api.title;
        });
        this.title = this.api.title;
--- a/packages/docs/templates/dockview/render-mode/vue/src/index.ts
+++ b/packages/docs/templates/dockview/render-mode/vue/src/index.ts
@ -6,16 +6,8 @@ import { DockviewReadyEvent, IDockviewPanelProps } from 'dockview-core';
 const Panel = defineComponent({
    name: 'Panel',
    props: {
-        api: {
-            type: Object as PropType<IDockviewPanelProps['api']>,
-            required: true,
-        },
-        containerApi: {
-            type: Object as PropType<IDockviewPanelProps['containerApi']>,
-            required: true,
-        },
        params: {
-            type: Object as PropType<IDockviewPanelProps['params']>,
+            type: Object as PropType<IDockviewPanelProps>,
            required: true,
        },
    },
@ -27,18 +19,18 @@ const Panel = defineComponent({
    },
    methods: {
        onToggleRenderMode() {
-            this.api.setRenderer(
-                this.api.renderer === 'onlyWhenVisible'
+            this.params.api.setRenderer(
+                this.params.api.renderer === 'onlyWhenVisible'
                    ? 'always'
                    : 'onlyWhenVisible'
            );
        },
    },
    mounted() {
-        const disposable = this.api.onDidTitleChange(() => {
+        const disposable = this.params.api.onDidTitleChange(() => {
            this.title = this.api.title;
        });
-        const disposable2 = this.api.onDidRendererChange((event) => {
+        const disposable2 = this.params.api.onDidRendererChange((event) => {
            this.renderer = event.renderer;
        });

--- a/packages/docs/templates/dockview/resize-container/vue/src/index.ts
+++ b/packages/docs/templates/dockview/resize-container/vue/src/index.ts
@ -6,16 +6,8 @@ import { DockviewReadyEvent, IDockviewPanelProps } from 'dockview-core';
 const Panel = defineComponent({
    name: 'Panel',
    props: {
-        api: {
-            type: Object as PropType<IDockviewPanelProps['api']>,
-            required: true,
-        },
-        containerApi: {
-            type: Object as PropType<IDockviewPanelProps['containerApi']>,
-            required: true,
-        },
        params: {
-            type: Object as PropType<IDockviewPanelProps['params']>,
+            type: Object as PropType<IDockviewPanelProps>,
            required: true,
        },
    },
@ -25,7 +17,7 @@ const Panel = defineComponent({
        };
    },
    mounted() {
-        const disposable = this.api.onDidTitleChange(() => {
+        const disposable = this.params.api.onDidTitleChange(() => {
            this.title = this.api.title;
        });
        this.title = this.api.title;
--- a/packages/docs/templates/dockview/resize/vue/src/index.ts
+++ b/packages/docs/templates/dockview/resize/vue/src/index.ts
@ -7,16 +7,8 @@ import './resize.css';
 const Panel = defineComponent({
    name: 'Panel',
    props: {
-        api: {
-            type: Object as PropType<IDockviewPanelProps['api']>,
-            required: true,
-        },
-        containerApi: {
-            type: Object as PropType<IDockviewPanelProps['containerApi']>,
-            required: true,
-        },
        params: {
-            type: Object as PropType<IDockviewPanelProps['params']>,
+            type: Object as PropType<IDockviewPanelProps>,
            required: true,
        },
    },
@ -29,20 +21,20 @@ const Panel = defineComponent({
    },
    methods: {
        onResizeGroupWidth() {
-            this.api.group.api.setSize({ width: this.width });
+            this.params.api.group.api.setSize({ width: this.width });
        },
        onResizePanelWidth() {
-            this.api.setSize({ width: this.width });
+            this.params.api.setSize({ width: this.width });
        },
        onResizeGroupHeight() {
-            this.api.group.api.setSize({ height: this.height });
+            this.params.api.group.api.setSize({ height: this.height });
        },
        onResizePanelHeight() {
-            this.api.setSize({ height: this.height });
+            this.params.api.setSize({ height: this.height });
        },
    },
    mounted() {
-        const disposable = this.api.onDidTitleChange(() => {
+        const disposable = this.params.api.onDidTitleChange(() => {
            this.title = this.api.title;
        });
        this.title = this.api.title;
--- a/packages/docs/templates/dockview/tabview/vue/src/index.ts
+++ b/packages/docs/templates/dockview/tabview/vue/src/index.ts
@ -10,16 +10,8 @@ import {
 const Panel = defineComponent({
    name: 'Panel',
    props: {
-        api: {
-            type: Object as PropType<IDockviewPanelProps['api']>,
-            required: true,
-        },
-        containerApi: {
-            type: Object as PropType<IDockviewPanelProps['containerApi']>,
-            required: true,
-        },
        params: {
-            type: Object as PropType<IDockviewPanelProps['params']>,
+            type: Object as PropType<IDockviewPanelProps>,
            required: true,
        },
    },
@ -29,7 +21,7 @@ const Panel = defineComponent({
        };
    },
    mounted() {
-        const disposable = this.api.onDidTitleChange(() => {
+        const disposable = this.params.api.onDidTitleChange(() => {
            this.title = this.api.title;
        });
        this.title = this.api.title;
--- a/packages/docs/templates/dockview/update-parameters/vue/src/index.ts
+++ b/packages/docs/templates/dockview/update-parameters/vue/src/index.ts
@ -10,16 +10,8 @@ import {
 const Panel = defineComponent({
    name: 'Panel',
    props: {
-        api: {
-            type: Object as PropType<IDockviewPanelProps['api']>,
-            required: true,
-        },
-        containerApi: {
-            type: Object as PropType<IDockviewPanelProps['containerApi']>,
-            required: true,
-        },
        params: {
-            type: Object as PropType<IDockviewPanelProps['params']>,
+            type: Object as PropType<IDockviewPanelProps>,
            required: true,
        },
    },
@ -51,9 +43,9 @@ const Panel = defineComponent({
            }

            const interval = setInterval(() => {
-                this.api.updateParameters({ myValue: Date.now() });
+                this.params.api.updateParameters({ myValue: Date.now() });
            }, 1000);
-            this.api.updateParameters({ myValue: Date.now() });
+            this.params.api.updateParameters({ myValue: Date.now() });

            return () => {
                clearInterval(interval);
@ -71,16 +63,8 @@ const Panel = defineComponent({
 const Tab = defineComponent({
    name: 'Tab',
    props: {
-        api: {
-            type: Object as PropType<IDockviewPanelHeaderProps['api']>,
-            required: true,
-        },
-        containerApi: {
-            type: Object as PropType<IDockviewPanelHeaderProps['containerApi']>,
-            required: true,
-        },
        params: {
-            type: Object as PropType<IDockviewPanelHeaderProps['params']>,
+            type: Object as PropType<IDockviewPanelHeaderProps>,
            required: true,
        },
    },
@ -91,11 +75,11 @@ const Tab = defineComponent({
        };
    },
    mounted() {
-        const disposable = this.api.onDidTitleChange(() => {
+        const disposable = this.params.api.onDidTitleChange(() => {
            this.title = this.api.title;
        });

-        const disposable2 = this.api.onDidParametersChange(() => {
+        const disposable2 = this.params.api.onDidParametersChange(() => {
            this.value = this.params.myValue;
        });

--- a/packages/docs/templates/dockview/update-title/vue/src/index.ts
+++ b/packages/docs/templates/dockview/update-title/vue/src/index.ts
@ -1,24 +1,13 @@
 import 'dockview-core/dist/styles/dockview.css';
 import { PropType, createApp, defineComponent } from 'vue';
 import { DockviewVue } from 'dockview-vue';
-import {
-    DockviewReadyEvent,
-    IDockviewPanelProps,
-} from 'dockview-core';
+import { DockviewReadyEvent, IDockviewPanelProps } from 'dockview-core';

 const Panel = defineComponent({
    name: 'Panel',
    props: {
-        api: {
-            type: Object as PropType<IDockviewPanelProps['api']>,
-            required: true,
-        },
-        containerApi: {
-            type: Object as PropType<IDockviewPanelProps['containerApi']>,
-            required: true,
-        },
        params: {
-            type: Object as PropType<IDockviewPanelProps['params']>,
+            type: Object as PropType<IDockviewPanelProps>,
            required: true,
        },
    },
@ -30,7 +19,7 @@ const Panel = defineComponent({
    },
    methods: {
        onChangeTitle() {
-            this.api.setTitle(this.value);
+            this.params.api.setTitle(this.value);
        },
        updateTitle(title: string) {
            this.title = title;
--- a/packages/docs/templates/dockview/watermark/vue/src/index.ts
+++ b/packages/docs/templates/dockview/watermark/vue/src/index.ts
@ -12,16 +12,8 @@ import {
 const Panel = defineComponent({
    name: 'Panel',
    props: {
-        api: {
-            type: Object as PropType<IDockviewPanelProps['api']>,
-            required: true,
-        },
-        containerApi: {
-            type: Object as PropType<IDockviewPanelProps['containerApi']>,
-            required: true,
-        },
        params: {
-            type: Object as PropType<IDockviewPanelProps['params']>,
+            type: Object as PropType<IDockviewPanelProps>,
            required: true,
        },
    },
@ -37,27 +29,23 @@ const Panel = defineComponent({
 const WatermarkPanel = defineComponent({
    name: 'Panel',
    props: {
-        group: {
-            type: Object as PropType<IWatermarkPanelProps['group']>,
-            required: true,
-        },
-        containerApi: {
-            type: Object as PropType<IWatermarkPanelProps['containerApi']>,
+        params: {
+            type: Object as PropType<IWatermarkPanelProps>,
            required: true,
        },
    },
    setup(props) {
-        return { isGroup: props.containerApi.groups.length > 0 };
+        return { isGroup: props.params.containerApi.groups.length > 0 };
    },
    methods: {
        onAddNewPanel() {
-            this.containerApi.addPanel({
+            this.params.containerApi.addPanel({
                id: Date.now().toString(),
                component: 'default',
            });
        },
        onCloseGroup() {
-            this.group?.api.close();
+            this.params.group?.api.close();
        },
    },
    template: `
@ -88,10 +76,11 @@ const App = defineComponent({
                default: Panel,
            },
            watermarkComponent: WatermarkPanel,
+            api: null as DockviewApi | null,
        };
    },
    methods: {
-        onClick(event: MouseEvent) {
+        onClick() {
            if (!this.api) {
                return;
            }
@ -99,6 +88,7 @@ const App = defineComponent({
            this.api.addGroup();
        },
        onReady(event: DockviewReadyEvent) {
+            this.api = event.api;
            event.api.fromJSON({
                grid: {
                    orientation: Orientation.HORIZONTAL,