rei-mirrors/dockview
1
0
Fork 0
mirror of https://github.com/mathuo/dockview synced 2025-05-02 17:48:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: fixup docs

Browse Source
This commit is contained in:
mathuo 2025-03-10 21:17:21 +00:00
parent d3d57b62b2
commit c0119d65c0
No known key found for this signature in database
GPG Key ID: C6EEDEFD6CA07281
10 changed files with 71 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
packages/dockview-core/src/api/component.api.ts
View File

@ -629,19 +629,6 @@ export class DockviewApi implements CommonApi<SerializedDockview> {
return this.component.totalPanels;
}
/**
* @deprecated dockview: dockviewComponent.gap has been deprecated. Use `theme` instead. This will be removed in a future version.
*/
get gap(): number {
return this.component.gap;
}
/**
* @deprecated dockview: dockviewComponent.setGap has been deprecated. Use `theme` instead. This will be removed in a future version.
*/
setGap(gap: number | undefined): void {
this.component.updateOptions({ gap: gap });
}
/**
* Invoked when the active group changes. May be undefined if no group is active.

29
packages/dockview-core/src/dockview/components/titlebar/tabs.scss
View File

@ -43,17 +43,17 @@
&::-webkit-scrollbar-thumb {
background: var(--dv-tabs-container-scrollbar-color);
}
}
.dv-tab {
-webkit-user-drag: element;
outline: none;
padding: 0.25rem 0.5rem;
cursor: pointer;
position: relative;
box-sizing: border-box;
font-size: var(--dv-tab-font-size);
margin: var(--dv-tab-margin);
}
.dv-tab {
-webkit-user-drag: element;
outline: none;
padding: 0.25rem 0.5rem;
cursor: pointer;
position: relative;
box-sizing: border-box;
font-size: var(--dv-tab-font-size);
margin: var(--dv-tab-margin);
}
.dv-tabs-overflow-container {
@ -63,15 +63,6 @@
background-color: var(--dv-group-view-background-color);
.dv-tab {
-webkit-user-drag: element;
outline: none;
padding: 0.25rem 0.5rem;
cursor: pointer;
position: relative;
box-sizing: border-box;
font-size: var(--dv-tab-font-size);
margin: var(--dv-tab-margin);
&:not(:last-child) {
border-bottom: 1px solid var(--dv-tab-divider-color);
}

18
packages/dockview-core/src/dockview/dockviewComponent.ts
View File

@ -195,10 +195,6 @@ export interface IDockviewComponent extends IBaseGrid<DockviewGroupPanel> {
readonly totalPanels: number;
readonly panels: IDockviewPanel[];
readonly orientation: Orientation;
/**
* @deprecated use `theme` instead. This will be removed in a future version
*/
readonly gap: number;
readonly onDidDrop: Event<DockviewDidDropEvent>;
readonly onWillDrop: Event<DockviewWillDropEvent>;
readonly onWillShowOverlay: Event<WillShowOverlayLocationEvent>;
@ -373,13 +369,6 @@ export class DockviewComponent
return this._api;
}
get gap(): number {
console.warn(
'dockview: dockviewComponent.gap has been deprecated. Use `theme` instead. This will be removed in a future version.'
);
return this.gridview.margin;
}
get floatingGroups(): DockviewFloatingGroupPanel[] {
return this._floatingGroups;
}
@ -1180,13 +1169,6 @@ export class DockviewComponent
override updateOptions(options: Partial<DockviewComponentOptions>): void {
super.updateOptions(options);
if ('gap' in options) {
console.warn(
'dockview: dockviewComponent.setGap has been deprecated. Use `theme` instead. This will be removed in a future version.'
);
this.gridview.margin = options.gap ?? 0;
}
if ('floatingGroupBounds' in options) {
for (const group of this._floatingGroups) {
switch (options.floatingGroupBounds) {

5
packages/dockview-core/src/dockview/options.ts
View File

@ -52,10 +52,6 @@ export interface DockviewOptions {
};
popoutUrl?: string;
defaultRenderer?: DockviewPanelRenderer;
/**
* @deprecated dockview: dockviewComponent.gap has been deprecated. Use `theme` instead. This will be removed in a future version.
*/
gap?: number;
debug?: boolean;
// #start dnd
dndEdges?: false | DroptargetOverlayModel;
@ -119,7 +115,6 @@ export const PROPERTY_KEYS_DOCKVIEW: (keyof DockviewOptions)[] = (() => {
noPanelsOverlay: undefined,
dndEdges: undefined,
theme: undefined,
gap: undefined,
disableTabsOverflowList: undefined,
};

56
packages/dockview-core/src/theme.scss
View File

@ -69,6 +69,8 @@
//
--dv-separator-border: rgba(128, 128, 128, 0.35);
--dv-paneview-header-border-color: rgb(51, 51, 51);
--dv-scrollbar-background-color: rgba(0, 0, 0, 0.25);
}
.dockview-theme-dark {
@ -214,19 +216,21 @@
.dv-groupview {
&.dv-active-group {
> .dv-tabs-and-actions-container {
> .dv-tabs-container {
> .dv-tab.dv-active-tab {
position: relative;
> .dv-scrollable {
> .dv-tabs-container {
> .dv-tab.dv-active-tab {
position: relative;
&::after {
position: absolute;
left: 0px;
top: 0px;
content: '';
width: 100%;
height: 1px;
background-color: #94527e;
z-index: 999;
&::after {
position: absolute;
left: 0px;
top: 0px;
content: '';
width: 100%;
height: 1px;
background-color: #94527e;
z-index: 999;
}
}
}
}
@ -234,19 +238,21 @@
}
&.dv-inactive-group {
> .dv-tabs-and-actions-container {
> .dv-tabs-container {
> .dv-tab.dv-active-tab {
position: relative;
> .dv-scrollable {
> .dv-tabs-container {
> .dv-tab.dv-active-tab {
position: relative;
&::after {
position: absolute;
left: 0px;
bottom: 0px;
content: '';
width: 100%;
height: 1px;
background-color: #5e3d5a;
z-index: 999;
&::after {
position: absolute;
left: 0px;
bottom: 0px;
content: '';
width: 100%;
height: 1px;
background-color: #5e3d5a;
z-index: 999;
}
}
}
}
@ -444,6 +450,8 @@
padding: 10px;
background-color: #f6f5f9;
--dv-scrollbar-background-color: rgba(0, 0, 0, 0.25);
.dv-resize-container {
.dv-groupview {
border: 2px solid rgb(255, 255, 255, 0.1);

4
packages/docs/docs/core/panels/add.mdx
View File

@ -13,6 +13,8 @@ Panels can be added through the dock api.
<DocRef declaration="DockviewApi" methods={['addPanel']} />
## Opening a Basic Panel
To open a panel requires a unique `id` and the name of the `component` to render.
@ -95,6 +97,8 @@ See [Panel Rendering](/docs/core/panels/rendering).
You can position a panel relative to an existing panel, group using `direction`. If you do not provide a reference panel
or group then the panel will be positioned to the edge of the dock in the specified direction.
<DocRef declaration="Direction" />
#### Relative to another Panel
```ts

16
packages/docs/docs/overview/getStarted/theme.mdx
View File

@ -34,8 +34,20 @@ Firstly, you should import `dockview.css`:
## Provided themes
`dockview` comes with a number of themes which are all CSS classes and can be found [here](https://github.com/mathuo/dockview/blob/master/packages/dockview-core/src/theme.scss).
To use a `dockview` theme the CSS must encapsulate the component. The current list of themes is:
`dockview` comes with a number of built-in themes. Each theme is represented as an object that can be imported.
For dock components you should pass the theme object to the `theme` property, for other components such as split, pane and grid views you should
use set the themes associated CSS class to the `className` property.
```tsx
import { themeAbyss } from "dockview";
// For dock components
theme={themeAbyss}
// For other components
const {className} = themeAbyss;
```
<ThemeTable/>

47
packages/docs/sandboxes/react/dockview/demo-dockview/src/gridActions.tsx
View File

@ -2,7 +2,7 @@ import { DockviewApi } from 'dockview';
import * as React from 'react';
import { defaultConfig, nextId } from './defaultLayout';
import { createRoot, Root } from 'react-dom/client';
import { createRoot } from 'react-dom/client';
import { PanelBuilder } from './panelBuilder';
let mount = document.querySelector('.popover-anchor') as HTMLElement | null;
@ -151,21 +151,6 @@ export const GridActions = (props: {
props.api?.addGroup();
};
// const [gap, setGap] = React.useState<number | undefined>(undefined);
const [overlayMode, setOverlayMode] = React.useState<boolean>(false);
// React.useEffect(() => {
// if (!props.api) {
// return;
// }
// if (typeof gap === 'number') {
// props.api.setGap(gap);
// } else {
// setGap(props.api.gap);
// }
// }, [gap, props.api]);
return (
<div className="action-container">
<div className="button-group">
@ -200,23 +185,6 @@ export const GridActions = (props: {
Use Custom Watermark
</button>
</span>
{/* <span className="button-action">
<button
className={
overlayMode ? 'demo-button selected' : 'demo-button'
}
onClick={() => {
props.api?.updateOptions({
dndOverlayMode: !overlayMode
? 'static'
: 'transitional',
});
setOverlayMode(!overlayMode);
}}
>
Use static overlay
</button>
</span> */}
<button className="text-button" onClick={onClear}>
Clear
</button>
@ -230,19 +198,6 @@ export const GridActions = (props: {
Reset
</button>
<span style={{ flexGrow: 1 }} />
{/* <div style={{ display: 'flex', alignItems: 'center' }}>
<span style={{ paddingRight: '4px' }}>Grid Gap</span>
<input
style={{ width: 40 }}
type="number"
min={0}
max={99}
step={1}
value={gap ?? 0}
onChange={(event) => setGap(Number(event.target.value))}
/>
<button onClick={() => setGap(0)}>Reset</button>
</div> */}
</div>
);
};

2
packages/docs/src/components/ui/reference/docRef.tsx
View File

@ -192,6 +192,8 @@ function filter(docs: TypeSystem.Type, methods: string[]) {
.map((v) => filter(v, methods))
.flat();
}
return [docs];
}
if (docs.kind === 'class' || docs.kind === 'interface') {

16
packages/docs/src/config/theme.config.ts
View File

@ -12,43 +12,43 @@ import {
export const themeConfig = [
{
id: themeDark,
key: '**[dockview-theme-dark](/demo?theme=dockview-theme-dark)**',
key: '**[Dark](/demo?theme=dark)**',
text: '',
},
{
id: themeLight,
key: '**[dockview-theme-light](/demo?theme=dockview-theme-light)**',
key: '**[Light](/demo?theme=light)**',
text: '',
},
{
id: themeVisualStudio,
key: '**[dockview-theme-vs](/demo?theme=dockview-theme-vs)**',
key: '**[Visual Studio](/demo?theme=visualStudio)**',
text: 'Based on [Visual Studio](https://visualstudio.microsoft.com)',
},
{
id: themeAbyss,
key: '**[dockview-theme-abyss](/demo?theme=dockview-theme-abyss)**',
key: '**[Abyss](/demo?theme=abyss)**',
text: 'Based on [Visual Studio Code](https://code.visualstudio.com/docs/getstarted/themes) abyss theme',
},
{
id: themeDracula,
key: '**[dockview-theme-dracula](/demo?theme=dockview-theme-dracula)**',
key: '**[Dracula](/demo?theme=dracula)**',
text: 'Based on [Visual Studio Code](https://code.visualstudio.com/docs/getstarted/themes) dracula theme',
},
{
id: themeReplit,
key: '**[dockview-theme-replit](/demo?theme=dockview-theme-replit)**',
key: '**[Replit](/demo?theme=replit)**',
text: 'Based on [Replit](https://replit.com)',
},
{
id: themeLightSpaced,
key: '**[dockview-theme-replit](/demo?theme=dockview-theme-kraken)**',
key: '**[Light Spaced](/demo?theme=lightSpaced)**',
text: '',
},
{
id: themeAbyssSpaced,
key: '**[dockview-theme-replit](/demo?theme=dockview-theme-kraken)**',
key: '**[Abyss Spaced](/demo?theme=abyssSpaced)**',
text: '',
},
];