mirror of
https://github.com/mathuo/dockview
synced 2025-09-16 22:29:57 +00:00
feat: angular examples
This commit is contained in:
mathuo
parent
d18224c5a7
commit
839027391d
@ -14,6 +14,7 @@ const { version } = JSON.parse(
|
||||
|
||||
const REACT_VERSION = '18.2.0';
|
||||
const VUE_VERSION = '3.4.21';
|
||||
const ANGULAR_VERSION = '17.0.0';
|
||||
const DOCKVIEW_VERSION = version; //'latest';;
|
||||
const USE_LOCAL_CDN = argv.slice(2).includes('--local');
|
||||
|
||||
@ -54,7 +55,20 @@ const DOCKVIEW_CDN = {
|
||||
'dockview-core/': `${local}/dockview-core/`,
|
||||
},
|
||||
},
|
||||
angular: {},
|
||||
angular: {
|
||||
remote: {
|
||||
'dockview-core': `https://cdn.jsdelivr.net/npm/dockview-core@${DOCKVIEW_VERSION}/dist/dockview-core.esm.js`,
|
||||
'dockview-core/': `https://cdn.jsdelivr.net/npm/dockview-core@${DOCKVIEW_VERSION}/`,
|
||||
'dockview-angular': `https://cdn.jsdelivr.net/npm/dockview-angular@${DOCKVIEW_VERSION}/dist/dockview-angular.esm.js`,
|
||||
'dockview-angular/': `https://cdn.jsdelivr.net/npm/dockview-angular@${DOCKVIEW_VERSION}/`,
|
||||
},
|
||||
local: {
|
||||
'dockview-core': `${local}/dockview-core/dist/dockview-core.esm.js`,
|
||||
'dockview-core/': `${local}/dockview-core/`,
|
||||
'dockview-angular': `${local}/dockview-angular/dist/dockview-angular.esm.js`,
|
||||
'dockview-angular/': `${local}/dockview-angular/`,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const IMPORTS_PATHS = {
|
||||
@ -69,7 +83,14 @@ const IMPORTS_PATHS = {
|
||||
'vue-sfc-loader': `https://cdn.jsdelivr.net/npm/vue3-sfc-loader@0.9.5/dist/vue3-sfc-loader.js`,
|
||||
},
|
||||
typescript: {},
|
||||
angular: {},
|
||||
angular: {
|
||||
'@angular/core': `https://esm.sh/@angular/core@${ANGULAR_VERSION}`,
|
||||
'@angular/common': `https://esm.sh/@angular/common@${ANGULAR_VERSION}`,
|
||||
'@angular/platform-browser-dynamic': `https://esm.sh/@angular/platform-browser-dynamic@${ANGULAR_VERSION}`,
|
||||
'@angular/platform-browser': `https://esm.sh/@angular/platform-browser@${ANGULAR_VERSION}`,
|
||||
'rxjs': `https://esm.sh/rxjs@7.8.1`,
|
||||
'zone.js': `https://esm.sh/zone.js@0.14.3`,
|
||||
},
|
||||
};
|
||||
|
||||
const template = fs
|
||||
@ -94,7 +115,7 @@ const input_dir = path.join(__dirname, '../templates');
|
||||
const output = path.join(__dirname, '../static/templates');
|
||||
|
||||
const COMPONENTS = ['dockview'];
|
||||
const FRAMEWORKS = ['react', 'vue', 'typescript'];
|
||||
const FRAMEWORKS = ['react', 'vue', 'typescript', 'angular'];
|
||||
|
||||
const list = [];
|
||||
|
||||
@ -128,6 +149,8 @@ for (const component of COMPONENTS) {
|
||||
app:
|
||||
framework === 'react'
|
||||
? './src/index.tsx'
|
||||
: framework === 'angular'
|
||||
? './src/index.ts'
|
||||
: './src/index.ts',
|
||||
importPaths: {
|
||||
...IMPORTS_PATHS[framework],
|
||||
|
||||
82
packages/docs/templates/dockview/basic/angular/src/index.ts
vendored
Normal file
82
packages/docs/templates/dockview/basic/angular/src/index.ts
vendored
Normal file
@ -0,0 +1,82 @@
|
||||
import 'zone.js';
|
||||
import { bootstrapApplication } from '@angular/platform-browser';
|
||||
import { Component, Type } from '@angular/core';
|
||||
import { DockviewAngularComponent } from 'dockview-angular';
|
||||
import 'dockview-core/dist/styles/dockview.css';
|
||||
|
||||
// Default panel component
|
||||
@Component({
|
||||
selector: 'default-panel',
|
||||
template: `<div>{{ api.title }}</div>`,
|
||||
standalone: true,
|
||||
})
|
||||
export class DefaultPanelComponent {
|
||||
api: any;
|
||||
|
||||
constructor() {}
|
||||
}
|
||||
|
||||
// Main app component
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
template: `
|
||||
<div style="height: 100vh;">
|
||||
<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>>;
|
||||
|
||||
constructor() {
|
||||
this.components = {
|
||||
default: DefaultPanelComponent,
|
||||
};
|
||||
}
|
||||
|
||||
onReady(event: any) {
|
||||
const api = event.api;
|
||||
|
||||
api.addPanel({
|
||||
id: 'panel_1',
|
||||
component: 'default',
|
||||
});
|
||||
|
||||
api.addPanel({
|
||||
id: 'panel_2',
|
||||
component: 'default',
|
||||
position: {
|
||||
direction: 'right',
|
||||
referencePanel: 'panel_1',
|
||||
},
|
||||
});
|
||||
|
||||
api.addPanel({
|
||||
id: 'panel_3',
|
||||
component: 'default',
|
||||
position: {
|
||||
direction: 'below',
|
||||
referencePanel: 'panel_1',
|
||||
},
|
||||
});
|
||||
|
||||
api.addPanel({
|
||||
id: 'panel_4',
|
||||
component: 'default',
|
||||
});
|
||||
|
||||
api.addPanel({
|
||||
id: 'panel_5',
|
||||
component: 'default',
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Bootstrap the application
|
||||
bootstrapApplication(AppComponent).catch(err => console.error(err));
|
||||
139
packages/docs/templates/dockview/constraints/angular/src/index.ts
vendored
Normal file
139
packages/docs/templates/dockview/constraints/angular/src/index.ts
vendored
Normal file
@ -0,0 +1,139 @@
|
||||
import 'zone.js';
|
||||
import { bootstrapApplication } from '@angular/platform-browser';
|
||||
import { Component, OnInit, OnDestroy, Type } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { DockviewAngularComponent } from 'dockview-angular';
|
||||
import { Subject } from 'rxjs';
|
||||
import { takeUntil } from 'rxjs/operators';
|
||||
import 'dockview-core/dist/styles/dockview.css';
|
||||
|
||||
// Default panel component with constraints
|
||||
@Component({
|
||||
selector: 'default-panel',
|
||||
template: `
|
||||
<div [ngStyle]="{
|
||||
height: '100%',
|
||||
padding: '20px',
|
||||
background: 'var(--dv-group-view-background-color)',
|
||||
color: 'white'
|
||||
}">
|
||||
<button (click)="onClick()">Set</button>
|
||||
<div *ngIf="constraints" [ngStyle]="{ fontSize: '13px' }">
|
||||
<div *ngIf="constraints.maximumHeight != null" [ngStyle]="constraintItemStyle">
|
||||
<span [ngStyle]="{ color: 'grey' }">Maximum Height: </span>
|
||||
<span>{{ constraints.maximumHeight }}px</span>
|
||||
</div>
|
||||
<div *ngIf="constraints.minimumHeight != null" [ngStyle]="constraintItemStyle">
|
||||
<span [ngStyle]="{ color: 'grey' }">Minimum Height: </span>
|
||||
<span>{{ constraints.minimumHeight }}px</span>
|
||||
</div>
|
||||
<div *ngIf="constraints.maximumWidth != null" [ngStyle]="constraintItemStyle">
|
||||
<span [ngStyle]="{ color: 'grey' }">Maximum Width: </span>
|
||||
<span>{{ constraints.maximumWidth }}px</span>
|
||||
</div>
|
||||
<div *ngIf="constraints.minimumWidth != null" [ngStyle]="constraintItemStyle">
|
||||
<span [ngStyle]="{ color: 'grey' }">Minimum Width: </span>
|
||||
<span>{{ constraints.minimumWidth }}px</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
standalone: true,
|
||||
imports: [CommonModule]
|
||||
})
|
||||
export class DefaultPanelComponent implements OnInit, OnDestroy {
|
||||
api: any;
|
||||
constraints: any = null;
|
||||
private destroy$ = new Subject<void>();
|
||||
|
||||
constraintItemStyle = {
|
||||
border: '1px solid grey',
|
||||
margin: '2px',
|
||||
padding: '1px'
|
||||
};
|
||||
|
||||
ngOnInit() {
|
||||
if (this.api?.group?.api?.onDidConstraintsChange) {
|
||||
this.api.group.api.onDidConstraintsChange((event: any) => {
|
||||
this.constraints = event;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
ngOnDestroy() {
|
||||
this.destroy$.next();
|
||||
this.destroy$.complete();
|
||||
}
|
||||
|
||||
onClick() {
|
||||
if (this.api?.group?.api?.setConstraints) {
|
||||
this.api.group.api.setConstraints({
|
||||
maximumWidth: 300,
|
||||
maximumHeight: 300,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Main app component
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
template: `
|
||||
<div style="height: 100vh;">
|
||||
<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>>;
|
||||
|
||||
constructor() {
|
||||
this.components = {
|
||||
default: DefaultPanelComponent,
|
||||
};
|
||||
}
|
||||
|
||||
onReady(event: any) {
|
||||
const api = event.api;
|
||||
|
||||
const panel1 = api.addPanel({
|
||||
id: 'panel_1',
|
||||
component: 'default',
|
||||
});
|
||||
|
||||
const panel2 = api.addPanel({
|
||||
id: 'panel_2',
|
||||
component: 'default',
|
||||
position: {
|
||||
referencePanel: panel1,
|
||||
direction: 'right',
|
||||
},
|
||||
});
|
||||
|
||||
const panel3 = api.addPanel({
|
||||
id: 'panel_3',
|
||||
component: 'default',
|
||||
position: {
|
||||
referencePanel: panel2,
|
||||
direction: 'right',
|
||||
},
|
||||
});
|
||||
|
||||
const panel4 = api.addPanel({
|
||||
id: 'panel_4',
|
||||
component: 'default',
|
||||
position: {
|
||||
direction: 'below',
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Bootstrap the application
|
||||
bootstrapApplication(AppComponent).catch(err => console.error(err));
|
||||
Loading…
x
Reference in New Issue
Block a user