fix: doc template issues across all frameworks

packages/docs/scripts/template.html

@@ -42,6 +42,11 @@
               height: calc(100% - 25px);
             }
 
+            app-root {
+              display: block;
+              height: 100%;
+            }
+
             html {
                 position: absolute;
                 top: 0;

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

@@ -25,7 +25,7 @@ export class DefaultPanelComponent {
 @Component({
     selector: 'app-root',
     template: `
-        <div style="height: 100vh;">
+        <div style="height: 100%;">
             <dv-dockview
                 [components]="components"
                 className="dockview-theme-abyss"

packages/docs/templates/dockview/constraints/angular/src/index.ts

@@ -1,10 +1,11 @@
 import 'zone.js';
-import { bootstrapApplication } from '@angular/platform-browser';
-import { Component, OnInit, OnDestroy, Type } from '@angular/core';
+import '@angular/compiler';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { Component, OnInit, OnDestroy, Type, NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { DockviewAngularComponent } from 'dockview-angular';
+import { BrowserModule } from '@angular/platform-browser';
+import { DockviewAngularModule } from 'dockview-angular';
 import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
 import 'dockview-core/dist/styles/dockview.css';
 
 // Default panel component with constraints
@@ -38,8 +39,6 @@ import 'dockview-core/dist/styles/dockview.css';
             </div>
         </div>
     `,
-    standalone: true,
-    imports: [CommonModule]
 })
 export class DefaultPanelComponent implements OnInit, OnDestroy {
     api: any;
@@ -75,20 +74,18 @@ export class DefaultPanelComponent implements OnInit, OnDestroy {
     }
 }
 
-// Main app component  
+// Main app component
 @Component({
     selector: 'app-root',
     template: `
-        <div style="height: 100vh;">
+        <div style="height: 100%;">
             <dv-dockview
                 [components]="components"
                 className="dockview-theme-abyss"
                 (ready)="onReady($event)">
             </dv-dockview>
         </div>
     `,
-    standalone: true,
-    imports: [DockviewAngularComponent]
 })
 export class AppComponent {
     components: Record<string, Type<any>>;
@@ -135,5 +132,11 @@ export class AppComponent {
     }
 }
 
-// Bootstrap the application
-bootstrapApplication(AppComponent).catch(err => console.error(err));
+@NgModule({
+    declarations: [AppComponent, DefaultPanelComponent],
+    imports: [BrowserModule, CommonModule, DockviewAngularModule],
+    bootstrap: [AppComponent]
+})
+export class AppModule { }
+
+platformBrowserDynamic().bootstrapModule(AppModule).catch(err => console.error(err));

packages/docs/templates/dockview/custom-header/angular/src/index.ts

@@ -91,7 +91,7 @@ export class CustomTabComponent {
 @Component({
     selector: 'app-root',
     template: `
-        <div style="height: 100vh;">
+        <div style="height: 100%;">
             <dv-dockview
                 [components]="components"
                 [tabComponents]="tabComponents"

packages/docs/templates/dockview/floating-groups/angular/src/index.ts

@@ -114,7 +114,7 @@ export class RightHeaderActionsComponent {
 @Component({
     selector: 'app-root',
     template: `
-        <div style="height: 100vh; display: flex; flex-direction: column;">
+        <div style="height: 100%; display: flex; flex-direction: column;">
             <div style="height: 25px;">
                 <button (click)="save()">Save</button>
                 <button (click)="load()">Load</button>

packages/docs/templates/dockview/group-actions/angular/src/index.ts

@@ -115,7 +115,7 @@ export class PrefixHeaderActionsComponent {
 @Component({
     selector: 'app-root',
     template: `
-        <div style="height: 100vh;">
+        <div style="height: 100%;">
             <dv-dockview
                 [components]="components"
                 [prefixHeaderActionsComponent]="prefixHeaderActionsComponent"

packages/docs/templates/dockview/watermark/angular/src/index.ts

@@ -68,7 +68,7 @@ export class WatermarkComponent {
 @Component({
     selector: 'app-root',
     template: `
-        <div style="height: 100vh; display: flex; flex-direction: column;">
+        <div style="height: 100%; display: flex; flex-direction: column;">
             <div>
                 <button (click)="addEmptyGroup()" style="margin: 10px;">Add Empty Group</button>
             </div>

packages/docs/templates/gridview/basic/angular/src/index.ts

@@ -19,7 +19,7 @@ export class DefaultPanelComponent {
 @Component({
     selector: 'app-root',
     template: `
-        <div style="height: 100vh;">
+        <div style="height: 100%;">
             <dv-gridview
                 [components]="components"
                 className="dockview-theme-abyss"

packages/docs/templates/gridview/basic/react/src/index.tsx

@@ -1,5 +1,6 @@
 import ReactDOM from 'react-dom/client';
 import React from 'react';
+import 'dockview/dist/styles/dockview.css';
 import App from './app.tsx';
 
 const container = document.getElementById('app')!;

packages/docs/templates/gridview/basic/typescript/src/index.ts

@@ -55,7 +55,7 @@ const api = createGridview(container, {
 });
 
 // Layout BEFORE adding panels (critical for gridview)
-api.layout(window.innerWidth, window.innerHeight);
+api.layout(container.clientWidth, container.clientHeight);
 
 const panel1 = api.addPanel({
     id: 'panel_1',

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

@@ -9,22 +9,30 @@ import {
 const Panel = defineComponent({
     name: 'Panel',
     props: {
-        params: {
-            type: Object as PropType<IGridviewPanelProps>,
+        api: {
+            type: Object,
+            required: true,
+        },
+        containerApi: {
+            type: Object,
             required: true,
         },
+        params: {
+            type: Object,
+            default: () => ({}),
+        },
     },
     data() {
         return {
-            id: '',
+            panelId: '',
         };
     },
     mounted() {
-        this.id = this.params.api.id;
+        this.panelId = this.api.id;
     },
     template: `
     <div style="height: 100%; padding: 10px; color: white; background: #1e1e1e; border: 1px solid #333;">
-      Panel {{ id }}
+      Panel {{ panelId }}
     </div>`,
 });
 
@@ -44,19 +52,19 @@ const App = defineComponent({
             const panel2 = event.api.addPanel({
                 id: 'panel_2',
                 component: 'panel',
-                position: { referencePanel: panel1, direction: 'right' },
+                position: { referencePanel: panel1.id, direction: 'right' },
             });
 
             event.api.addPanel({
                 id: 'panel_3',
                 component: 'panel',
-                position: { referencePanel: panel1, direction: 'below' },
+                position: { referencePanel: panel1.id, direction: 'below' },
             });
 
             event.api.addPanel({
                 id: 'panel_4',
                 component: 'panel',
-                position: { referencePanel: panel2, direction: 'below' },
+                position: { referencePanel: panel2.id, direction: 'below' },
             });
         },
     },

packages/docs/templates/paneview/basic/angular/src/index.ts

@@ -19,11 +19,11 @@ export class DefaultPanelComponent {
 @Component({
     selector: 'app-root',
     template: `
-        <div style="height: 100vh;">
+        <div style="height: 100%;">
             <dv-paneview
                 [components]="components"
                 className="dockview-theme-abyss"
-                orientation="vertical"
+                orientation="VERTICAL"
                 (ready)="onReady($event)">
             </dv-paneview>
         </div>

packages/docs/templates/paneview/basic/react/src/app.tsx

@@ -50,7 +50,7 @@ export default () => {
     return (
         <PaneviewReact
             className={'dockview-theme-abyss'}
-            orientation="vertical"
+            orientation="VERTICAL"
             onReady={onReady}
             components={components}
         />

packages/docs/templates/paneview/basic/react/src/index.tsx

@@ -1,5 +1,6 @@
 import ReactDOM from 'react-dom/client';
 import React from 'react';
+import 'dockview/dist/styles/dockview.css';
 import App from './app.tsx';
 
 const container = document.getElementById('app')!;

packages/docs/templates/paneview/basic/typescript/src/index.ts

@@ -100,7 +100,7 @@ const api = createPaneview(container, {
 });
 
 // Layout BEFORE adding panels (critical for paneview)
-api.layout(window.innerWidth, window.innerHeight);
+api.layout(container.clientWidth, container.clientHeight);
 
 api.addPanel({
     id: 'panel_1',

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

@@ -9,24 +9,34 @@ import {
 const Panel = defineComponent({
     name: 'Panel',
     props: {
-        params: {
-            type: Object as PropType<IPaneviewPanelProps>,
+        api: {
+            type: Object,
+            required: true,
+        },
+        containerApi: {
+            type: Object,
             required: true,
         },
+        title: {
+            type: String,
+            required: true,
+        },
+        params: {
+            type: Object,
+            default: () => ({}),
+        },
     },
     data() {
         return {
-            id: '',
-            title: '',
+            panelId: '',
         };
     },
     mounted() {
-        this.id = this.params.api.id;
-        this.title = this.params.api.title;
+        this.panelId = this.api.id;
     },
     template: `
     <div style="height: 100%; padding: 10px; color: white; background: #1e1e1e; border: 1px solid #333;">
-      Panel {{ id }}
+      Panel {{ panelId }}
     </div>`,
 });
 
@@ -64,7 +74,7 @@ const App = defineComponent({
       <paneview-vue
         style="width: 100%; height: 100%"
         class="dockview-theme-abyss"
-        orientation="vertical"
+        orientation="VERTICAL"
         @ready="onReady"
       >
       </paneview-vue>`,

packages/docs/templates/splitview/basic/angular/src/index.ts

@@ -8,7 +8,8 @@ import 'dockview-core/dist/styles/dockview.css';
 
 @Component({
     selector: 'default-panel',
-    template: `<div style="padding: 10px; color: white; background: #1e1e1e;">Panel {{ api?.id || 'Unknown' }}</div>`
+    template: `<div style="height: 100%; padding: 10px; color: white; background: #1e1e1e;">Panel {{ api?.id || 'Unknown' }}</div>`,
+    styles: [`:host { display: block; height: 100%; }`]
 })
 export class DefaultPanelComponent {
     @Input() api: any;
@@ -19,11 +20,12 @@ export class DefaultPanelComponent {
 @Component({
     selector: 'app-root',
     template: `
-        <div style="height: 100vh;">
+        <div style="height: 100%;">
             <dv-splitview
+                style="width: 100%; height: 100%"
                 [components]="components"
                 className="dockview-theme-abyss"
-                orientation="horizontal"
+                orientation="VERTICAL"
                 (ready)="onReady($event)">
             </dv-splitview>
         </div>
@@ -41,6 +43,9 @@ export class AppComponent {
     onReady(event: any) {
         const api = event.api;
 
+        const el = document.getElementById('app')!;
+        api.layout(el.clientWidth, el.clientHeight);
+
         api.addPanel({
             id: 'panel_1',
             component: 'default',

packages/docs/templates/splitview/basic/react/src/app.tsx

@@ -7,7 +7,7 @@ import React from 'react';
 
 const Default = (props: ISplitviewPanelProps) => {
     return (
-        <div style={{ padding: '10px', color: 'white', background: '#1e1e1e' }}>
+        <div style={{ height: '100%', padding: '10px', color: 'white', background: '#1e1e1e' }}>
             Panel {props.api.id}
         </div>
     );
@@ -41,7 +41,7 @@ export default () => {
     return (
         <SplitviewReact
             className={'dockview-theme-abyss'}
-            orientation="horizontal"
+            orientation="VERTICAL"
             onReady={onReady}
             components={components}
         />

packages/docs/templates/splitview/basic/react/src/index.tsx

@@ -1,5 +1,6 @@
 import ReactDOM from 'react-dom/client';
 import React from 'react';
+import 'dockview/dist/styles/dockview.css';
 import App from './app.tsx';
 
 const container = document.getElementById('app')!;