From c0119d65c0d7aedbe8a3b98296160ec75089d476 Mon Sep 17 00:00:00 2001 From: mathuo <6710312+mathuo@users.noreply.github.com> Date: Mon, 10 Mar 2025 21:17:21 +0000 Subject: [PATCH] chore: fixup docs --- .../dockview-core/src/api/component.api.ts | 13 ----- .../dockview/components/titlebar/tabs.scss | 29 ++++------ .../src/dockview/dockviewComponent.ts | 18 ------ .../dockview-core/src/dockview/options.ts | 5 -- packages/dockview-core/src/theme.scss | 56 +++++++++++-------- packages/docs/docs/core/panels/add.mdx | 4 ++ .../docs/docs/overview/getStarted/theme.mdx | 16 +++++- .../demo-dockview/src/gridActions.tsx | 47 +--------------- .../src/components/ui/reference/docRef.tsx | 2 + packages/docs/src/config/theme.config.ts | 16 +++--- 10 files changed, 71 insertions(+), 135 deletions(-) diff --git a/packages/dockview-core/src/api/component.api.ts b/packages/dockview-core/src/api/component.api.ts index 0b0850ed0..7f3c40299 100644 --- a/packages/dockview-core/src/api/component.api.ts +++ b/packages/dockview-core/src/api/component.api.ts @@ -629,19 +629,6 @@ export class DockviewApi implements CommonApi { 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. diff --git a/packages/dockview-core/src/dockview/components/titlebar/tabs.scss b/packages/dockview-core/src/dockview/components/titlebar/tabs.scss index 279659fac..df38c6741 100644 --- a/packages/dockview-core/src/dockview/components/titlebar/tabs.scss +++ b/packages/dockview-core/src/dockview/components/titlebar/tabs.scss @@ -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); } diff --git a/packages/dockview-core/src/dockview/dockviewComponent.ts b/packages/dockview-core/src/dockview/dockviewComponent.ts index e9abdf237..13bcb0ec2 100644 --- a/packages/dockview-core/src/dockview/dockviewComponent.ts +++ b/packages/dockview-core/src/dockview/dockviewComponent.ts @@ -195,10 +195,6 @@ export interface IDockviewComponent extends IBaseGrid { 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; readonly onWillDrop: Event; readonly onWillShowOverlay: Event; @@ -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): 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) { diff --git a/packages/dockview-core/src/dockview/options.ts b/packages/dockview-core/src/dockview/options.ts index bf0861006..86546934e 100644 --- a/packages/dockview-core/src/dockview/options.ts +++ b/packages/dockview-core/src/dockview/options.ts @@ -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, }; diff --git a/packages/dockview-core/src/theme.scss b/packages/dockview-core/src/theme.scss index 0c98f152d..3b69d4c37 100644 --- a/packages/dockview-core/src/theme.scss +++ b/packages/dockview-core/src/theme.scss @@ -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); diff --git a/packages/docs/docs/core/panels/add.mdx b/packages/docs/docs/core/panels/add.mdx index cb151eb6e..aceba5e9c 100644 --- a/packages/docs/docs/core/panels/add.mdx +++ b/packages/docs/docs/core/panels/add.mdx @@ -13,6 +13,8 @@ Panels can be added through the dock api. + + ## 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. + + #### Relative to another Panel ```ts diff --git a/packages/docs/docs/overview/getStarted/theme.mdx b/packages/docs/docs/overview/getStarted/theme.mdx index 6240340b9..131950277 100644 --- a/packages/docs/docs/overview/getStarted/theme.mdx +++ b/packages/docs/docs/overview/getStarted/theme.mdx @@ -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; +``` diff --git a/packages/docs/sandboxes/react/dockview/demo-dockview/src/gridActions.tsx b/packages/docs/sandboxes/react/dockview/demo-dockview/src/gridActions.tsx index ec16135ed..5c13128f5 100644 --- a/packages/docs/sandboxes/react/dockview/demo-dockview/src/gridActions.tsx +++ b/packages/docs/sandboxes/react/dockview/demo-dockview/src/gridActions.tsx @@ -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(undefined); - - const [overlayMode, setOverlayMode] = React.useState(false); - - // React.useEffect(() => { - // if (!props.api) { - // return; - // } - // if (typeof gap === 'number') { - // props.api.setGap(gap); - // } else { - // setGap(props.api.gap); - // } - // }, [gap, props.api]); - return (
@@ -200,23 +185,6 @@ export const GridActions = (props: { Use Custom Watermark - {/* - - */} @@ -230,19 +198,6 @@ export const GridActions = (props: { Reset - {/*
- Grid Gap - setGap(Number(event.target.value))} - /> - -
*/}
); }; diff --git a/packages/docs/src/components/ui/reference/docRef.tsx b/packages/docs/src/components/ui/reference/docRef.tsx index 8319d1721..2fccfdd9e 100644 --- a/packages/docs/src/components/ui/reference/docRef.tsx +++ b/packages/docs/src/components/ui/reference/docRef.tsx @@ -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') { diff --git a/packages/docs/src/config/theme.config.ts b/packages/docs/src/config/theme.config.ts index 0946720df..e509c2178 100644 --- a/packages/docs/src/config/theme.config.ts +++ b/packages/docs/src/config/theme.config.ts @@ -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: '', }, ];