Skip to content

Commit

Permalink
chore: fixup docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@mathuo
mathuo committed Mar 10, 2025
1 parent d3d57b6 commit c0119d6
Show file tree
Hide file tree
Showing 10 changed files with 73 additions and 137 deletions.
13 changes: 0 additions & 13 deletions packages/dockview-core/src/api/component.api.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
29 changes: 10 additions & 19 deletions packages/dockview-core/src/dockview/components/titlebar/tabs.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -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);
}
Expand Down
18 changes: 0 additions & 18 deletions packages/dockview-core/src/dockview/dockviewComponent.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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) {
Expand Down
5 changes: 0 additions & 5 deletions packages/dockview-core/src/dockview/options.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -119,7 +115,6 @@ export const PROPERTY_KEYS_DOCKVIEW: (keyof DockviewOptions)[] = (() => {
noPanelsOverlay: undefined,
dndEdges: undefined,
theme: undefined,
gap: undefined,
disableTabsOverflowList: undefined,
};

Expand Down
60 changes: 34 additions & 26 deletions packages/dockview-core/src/theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -214,39 +216,43 @@
.dv-groupview {
&.dv-active-group {
> .dv-tabs-and-actions-container {
> .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;
> .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;
}
}
}
}
}
}
&.dv-inactive-group {
> .dv-tabs-and-actions-container {
> .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;
> .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;
}
}
}
}
Expand Down Expand Up @@ -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);
Expand Down
4 changes: 4 additions & 0 deletions packages/docs/docs/core/panels/add.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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
Expand Down
16 changes: 14 additions & 2 deletions packages/docs/docs/overview/getStarted/theme.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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/>

Expand Down
47 changes: 1 addition & 46 deletions packages/docs/sandboxes/react/dockview/demo-dockview/src/gridActions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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>
Expand All @@ -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 changes: 2 additions & 0 deletions packages/docs/src/components/ui/reference/docRef.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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') {
Expand Down
16 changes: 8 additions & 8 deletions packages/docs/src/config/theme.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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: '',
},
];

0 comments on commit c0119d6

Please sign in to comment.