From 14bfb1b0966fbd1643c5b38ec9bb5be0d5ecfd8b Mon Sep 17 00:00:00 2001 From: mathuo <6710312+mathuo@users.noreply.github.com> Date: Thu, 16 Jul 2026 19:39:51 +0100 Subject: [PATCH] docs: refresh READMEs for v8 Root README: - Add the brand lockup via , light/dark aware; swap the hero to demo-hero.webp - Consolidate the badge row onto shields.io and centre it (one row, 632px) - Fix the Quick Start: `className` is not the theming API, use `theme={themeDark}` - Fix the broken ./LICENSE link and state the multi-licence split - List dockview-enterprise in the packages table - Correct the React (16.8-19) and Angular (>=21.0.6) peer ranges - Drop build-tool detail (NX, Biome) and the build-order diagram; AGENTS.md already documents these for contributors - Fix the #Provenance anchor Published package READMEs: - Add the lockup and demo-hero, consolidate badges onto shields.io - Fix theming to the `theme` property across every binding - Fix the Angular example: DockviewAngularModule (not DockviewModule) and (not ) - Reframe dockview-core as an internal package that redirects to dockview - dockview-enterprise: lockup, badges, and a commercial licence note AGENTS.md: - Document the public-documentation conventions: dockview-core is internal, the module system is internal, don't enumerate enterprise features, don't document the unlicensed behaviour Co-Authored-By: Claude Opus 4.8 (1M context) --- AGENTS.md | 26 ++++ README.md | 124 +++++++++--------- packages/dockview-angular/README.md | 46 ++++--- packages/dockview-core/README.md | 103 +++------------ packages/dockview-enterprise/README.md | 47 ++++--- packages/dockview-react/README.md | 35 ++--- packages/dockview-vue/README.md | 34 +++-- packages/dockview/README.md | 33 ++--- .../docs/static/img/dockview-lockup-dark.svg | 5 + .../docs/static/img/dockview-lockup-light.svg | 5 + 10 files changed, 234 insertions(+), 224 deletions(-) create mode 100644 packages/docs/static/img/dockview-lockup-dark.svg create mode 100644 packages/docs/static/img/dockview-lockup-light.svg diff --git a/AGENTS.md b/AGENTS.md index 9346d9cdf..49d9fc7b0 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -170,6 +170,32 @@ NX handles build ordering automatically via `dependsOn: ["^build"]`. The depende - Code comments describe the current state of the code, not its history. Don't reference the fix, PR, or what changed unless that context is critical to understanding the code as it stands. - Keep comments brief and concise. +### Public Documentation + +- **Refrain from mentioning `dockview-core` in public-facing documentation.** It is + an internal module, not a supported install target. This covers the root README, + the docs site, blog posts, release notes, and the published package READMEs. +- Point consumers at `dockview` or a framework binding (`dockview-react`, + `dockview-vue`, `dockview-angular`) instead. Where a dependency graph or build + order would otherwise name it, describe the chain from `dockview` onwards. +- Only refer to `dockview-core` where its internal nature is itself the point (for + example, contributor-facing notes in this file), and say that it is internal when + you do. +- **The module system is an internal concept — don't mention it in public-facing + documentation.** Avoid "modules", "feature modules" and `registerModules` in the + surfaces listed above. Describe what the user gets and what they do ("importing + the package enables the enterprise features"), not how registration works + internally. Angular's `DockviewAngularModule` is an unrelated Angular NgModule + and is fine to name. +- **Don't enumerate the enterprise features** in READMEs or package docs. The + canonical list lives on ; link to it instead. + An inline list duplicates that page and drifts out of date as the feature set + changes. +- **Don't document the unlicensed behaviour.** Public docs should not say that + dockview keeps working without a valid licence key, or describe the watermark. + State that enterprise features are governed by a licence key and link to the + enterprise page; don't present the key as optional. + ## Release Management ### Creating Release Notes diff --git a/README.md b/README.md index 85a137add..ea4c46540 100644 --- a/README.md +++ b/README.md @@ -1,49 +1,54 @@
-

dockview

+ + + + Dockview + + +

docking engine for the web

Zero dependency layout manager supporting tabs, groups, grids and splitviews. Supports React, Vue, Angular and JavaScript

+[![npm version](https://img.shields.io/npm/v/dockview)](https://www.npmjs.com/package/dockview) +[![npm downloads](https://img.shields.io/npm/dm/dockview)](https://www.npmjs.com/package/dockview) +[![CI](https://img.shields.io/github/actions/workflow/status/mathuo/dockview/main.yml?branch=master&label=CI)](https://github.com/mathuo/dockview/actions?query=workflow%3ACI) +[![Coverage](https://img.shields.io/sonar/coverage/mathuo_dockview?server=https%3A%2F%2Fsonarcloud.io)](https://sonarcloud.io/summary/overall?id=mathuo_dockview) +[![Quality gate](https://img.shields.io/sonar/quality_gate/mathuo_dockview?server=https%3A%2F%2Fsonarcloud.io)](https://sonarcloud.io/summary/overall?id=mathuo_dockview) +[![Bundle size](https://img.shields.io/bundlephobia/minzip/dockview?label=size)](https://bundlephobia.com/result?p=dockview) +
--- -[![npm version](https://badge.fury.io/js/dockview.svg)](https://www.npmjs.com/package/dockview) -[![npm](https://img.shields.io/npm/dm/dockview)](https://www.npmjs.com/package/dockview) -[![CI Build](https://github.com/mathuo/dockview/workflows/CI/badge.svg)](https://github.com/mathuo/dockview/actions?query=workflow%3ACI) -[![Coverage](https://sonarcloud.io/api/project_badges/measure?project=mathuo_dockview&metric=coverage)](https://sonarcloud.io/summary/overall?id=mathuo_dockview) -[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=mathuo_dockview&metric=alert_status)](https://sonarcloud.io/summary/overall?id=mathuo_dockview) -[![Bundle Phobia](https://badgen.net/bundlephobia/minzip/dockview)](https://bundlephobia.com/result?p=dockview) - -## - -![](packages/docs/static/img/splashscreenv2.png) +![A Dockview layout showing docked, tabbed and split panels in a trading workbench](packages/docs/static/img/demo-hero.webp) Please see the website: https://dockview.dev ## Features -- Serialization / deserialization with full layout management -- Support for split-views, grid-views and 'dockable' views -- Themeable and customizable -- Tab and Group docking / Drag n' Drop -- Touch & mobile support -- Popout Windows -- Floating Groups -- Extensive API -- Supports Shadow DOMs -- High test coverage -- Documentation website with live examples -- Transparent builds and Code Analysis -- Security at mind - verified publishing and builds through GitHub Actions +- Serialization / deserialization with full layout management +- Support for split-views, grid-views and 'dockable' views +- Themeable and customizable +- Tab and Group docking / Drag n' Drop +- Touch & mobile support +- Popout Windows +- Floating Groups +- Extensive API +- Supports Shadow DOMs +- High test coverage +- Documentation website with live examples +- Transparent builds and Code Analysis +- Security in mind - verified publishing and builds through GitHub Actions ## Packages -| Package | Description | Version | -| --- | --- | --- | -| [`dockview`](https://www.npmjs.com/package/dockview) | JavaScript, zero dependencies, full feature set out of the box | [![npm version](https://badge.fury.io/js/dockview.svg)](https://www.npmjs.com/package/dockview) | -| [`dockview-react`](https://www.npmjs.com/package/dockview-react) | React bindings (peer: `react` ≥16.8) | [![npm version](https://badge.fury.io/js/dockview-react.svg)](https://www.npmjs.com/package/dockview-react) | -| [`dockview-vue`](https://www.npmjs.com/package/dockview-vue) | Vue 3 bindings (peer: `vue` ≥3.4) | [![npm version](https://badge.fury.io/js/dockview-vue.svg)](https://www.npmjs.com/package/dockview-vue) | -| [`dockview-angular`](https://www.npmjs.com/package/dockview-angular) | Angular bindings (peer: `@angular/core` ≥21) | [![npm version](https://badge.fury.io/js/dockview-angular.svg)](https://www.npmjs.com/package/dockview-angular) | +| Package | Description | Version | +|----------------------------------------------------------------------------|--------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------| +| [`dockview`](https://www.npmjs.com/package/dockview) | JavaScript, zero dependencies, full feature set out of the box | [![npm version](https://img.shields.io/npm/v/dockview)](https://www.npmjs.com/package/dockview) | +| [`dockview-react`](https://www.npmjs.com/package/dockview-react) | React bindings (peer: `react` 16.8–19) | [![npm version](https://img.shields.io/npm/v/dockview-react)](https://www.npmjs.com/package/dockview-react) | +| [`dockview-vue`](https://www.npmjs.com/package/dockview-vue) | Vue 3 bindings (peer: `vue` ≥3.4) | [![npm version](https://img.shields.io/npm/v/dockview-vue)](https://www.npmjs.com/package/dockview-vue) | +| [`dockview-angular`](https://www.npmjs.com/package/dockview-angular) | Angular bindings (peer: `@angular/core` ≥21.0.6) | [![npm version](https://img.shields.io/npm/v/dockview-angular)](https://www.npmjs.com/package/dockview-angular) | +| [`dockview-enterprise`](https://www.npmjs.com/package/dockview-enterprise) | Enterprise features, drop-in superset of `dockview` (commercial licence) | [![npm version](https://img.shields.io/npm/v/dockview-enterprise)](https://www.npmjs.com/package/dockview-enterprise) | ## Installation @@ -57,29 +62,29 @@ npm install dockview-angular # Angular ## Quick Start (React) ```tsx -import { DockviewReact } from 'dockview-react'; +import { DockviewReact, themeDark } from 'dockview-react'; import 'dockview-react/dist/styles/dockview.css'; const components = { - default: (props) =>
Hello {props.params.title}
, + default: (props) =>
Hello {props.params.title}
, }; function App() { - const onReady = (event) => { - event.api.addPanel({ - id: 'panel_1', - component: 'default', - params: { title: 'World' }, - }); - }; - - return ( - - ); + const onReady = (event) => { + event.api.addPanel({ + id: 'panel_1', + component: 'default', + params: { title: 'World' }, + }); + }; + + return ( + + ); } ``` @@ -87,32 +92,29 @@ For Vue and Angular examples see the [documentation](https://dockview.dev). ## Development -This project is an [NX](https://nx.dev) monorepo using [Yarn v1](https://classic.yarnpkg.com) workspaces. +This project is a monorepo using [Yarn v1](https://classic.yarnpkg.com) workspaces. ```bash yarn install # Install dependencies yarn build # Build all packages yarn test # Run tests -yarn lint # Run ESLint -yarn format # Run Prettier -``` - -Build order is managed automatically by NX: - -``` -dockview-core → dockview → dockview-react -dockview-core → dockview → dockview-vue -dockview-core → dockview → dockview-angular +yarn lint # Lint all packages +yarn format # Format all packages ``` ## Contributing Contributions are welcome! Please open an [issue](https://github.com/mathuo/dockview/issues) or submit a pull request. -## License +## Licence + +This repository contains packages under more than one licence. Everything is MIT +except `dockview-enterprise`, which is proprietary and governed by a commercial +licence agreement. -MIT. See [LICENSE](./LICENSE) for details. +See [LICENCE.md](./LICENCE.md) for the breakdown. Each published package ships +its own `LICENCE.md`, which is the authoritative licence for that package. --- -Want to verify our builds? Go [here](https://www.npmjs.com/package/dockview-react#user-content-provenance). +Want to verify our builds? Go [here](https://www.npmjs.com/package/dockview-react#Provenance). diff --git a/packages/dockview-angular/README.md b/packages/dockview-angular/README.md index 3b468efef..732c8a928 100644 --- a/packages/dockview-angular/README.md +++ b/packages/dockview-angular/README.md @@ -1,22 +1,26 @@
+ + + + Dockview + +

dockview-angular

Angular bindings for dockview, a zero dependency layout manager supporting tabs, groups, grids and splitviews

+[![npm version](https://img.shields.io/npm/v/dockview-angular)](https://www.npmjs.com/package/dockview-angular) +[![npm downloads](https://img.shields.io/npm/dm/dockview-angular)](https://www.npmjs.com/package/dockview-angular) +[![CI](https://img.shields.io/github/actions/workflow/status/mathuo/dockview/main.yml?branch=master&label=CI)](https://github.com/mathuo/dockview/actions?query=workflow%3ACI) +[![Coverage](https://img.shields.io/sonar/coverage/mathuo_dockview?server=https%3A%2F%2Fsonarcloud.io)](https://sonarcloud.io/summary/overall?id=mathuo_dockview) +[![Quality gate](https://img.shields.io/sonar/quality_gate/mathuo_dockview?server=https%3A%2F%2Fsonarcloud.io)](https://sonarcloud.io/summary/overall?id=mathuo_dockview) +[![Bundle size](https://img.shields.io/bundlephobia/minzip/dockview-angular?label=size)](https://bundlephobia.com/result?p=dockview-angular) +
--- -[![npm version](https://badge.fury.io/js/dockview-angular.svg)](https://www.npmjs.com/package/dockview-angular) -[![npm](https://img.shields.io/npm/dm/dockview-angular)](https://www.npmjs.com/package/dockview-angular) -[![CI Build](https://github.com/mathuo/dockview/workflows/CI/badge.svg)](https://github.com/mathuo/dockview/actions?query=workflow%3ACI) -[![Coverage](https://sonarcloud.io/api/project_badges/measure?project=mathuo_dockview&metric=coverage)](https://sonarcloud.io/summary/overall?id=mathuo_dockview) -[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=mathuo_dockview&metric=alert_status)](https://sonarcloud.io/summary/overall?id=mathuo_dockview) -[![Bundle Phobia](https://badgen.net/bundlephobia/minzip/dockview-angular)](https://bundlephobia.com/result?p=dockview-angular) - -## - -![](https://github.com/mathuo/dockview/blob/HEAD/packages/docs/static/img/splashscreenv2.png?raw=true) +![A Dockview layout showing docked, tabbed and split panels in a trading workbench](https://github.com/mathuo/dockview/blob/HEAD/packages/docs/static/img/demo-hero.webp?raw=true) Please see the website: https://dockview.dev @@ -36,11 +40,11 @@ Please see the website: https://dockview.dev - High test coverage - Documentation website with live examples - Transparent builds and Code Analysis -- Security at mind - verified publishing and builds through GitHub Actions +- Security in mind - verified publishing and builds through GitHub Actions ## Quick Start -Dockview-angular has a peer dependency on `@angular/core >= 21`. Install from [npm](https://www.npmjs.com/package/dockview-angular): +Dockview-angular has a peer dependency on `@angular/core >= 21.0.6`. Install from [npm](https://www.npmjs.com/package/dockview-angular): ``` npm install dockview-angular @@ -56,23 +60,29 @@ Use the component in your Angular template: ```typescript import { Component } from '@angular/core'; -import { DockviewModule } from 'dockview-angular'; -import { DockviewReadyEvent } from 'dockview-angular'; +import { + DockviewAngularModule, + DockviewReadyEvent, + themeDark, +} from 'dockview-angular'; @Component({ selector: 'app-root', standalone: true, - imports: [DockviewModule], + imports: [DockviewAngularModule], template: ` -
- + + >
`, }) export class AppComponent { + theme = themeDark; + components = { myComponent: /* your panel component */, }; diff --git a/packages/dockview-core/README.md b/packages/dockview-core/README.md index 879b66c53..52b38470f 100644 --- a/packages/dockview-core/README.md +++ b/packages/dockview-core/README.md @@ -1,96 +1,27 @@
+ + + + Dockview + +

dockview-core

-

Framework-agnostic core layout engine, zero dependencies, JavaScript. Supports tabs, groups, grids and splitviews

+

Internal core layout engine. Not a supported install target.

--- -[![npm version](https://badge.fury.io/js/dockview-core.svg)](https://www.npmjs.com/package/dockview-core) -[![npm](https://img.shields.io/npm/dm/dockview-core)](https://www.npmjs.com/package/dockview-core) -[![CI Build](https://github.com/mathuo/dockview/workflows/CI/badge.svg)](https://github.com/mathuo/dockview/actions?query=workflow%3ACI) -[![Coverage](https://sonarcloud.io/api/project_badges/measure?project=mathuo_dockview&metric=coverage)](https://sonarcloud.io/summary/overall?id=mathuo_dockview) -[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=mathuo_dockview&metric=alert_status)](https://sonarcloud.io/summary/overall?id=mathuo_dockview) -[![Bundle Phobia](https://badgen.net/bundlephobia/minzip/dockview-core)](https://bundlephobia.com/result?p=dockview-core) - -## - -![](https://github.com/mathuo/dockview/blob/HEAD/packages/docs/static/img/splashscreenv2.png?raw=true) - -Please see the website: https://dockview.dev - -> **`dockview-core` is an internal package.** Install -> **[`dockview`](https://www.npmjs.com/package/dockview)** instead, the -> JavaScript / TypeScript package that ships the full feature set out of the box. Using a -> framework? Install the bindings: [`dockview-react`](https://www.npmjs.com/package/dockview-react), -> [`dockview-vue`](https://www.npmjs.com/package/dockview-vue) or -> [`dockview-angular`](https://www.npmjs.com/package/dockview-angular). - -## Features - -- Serialization / deserialization with full layout management -- Support for split-views, grid-views and 'dockable' views -- Themeable and customizable -- Tab and Group docking / Drag n' Drop -- Touch & mobile support -- Popout Windows -- Floating Groups -- Edge Groups -- Tab Groups -- Extensive API -- Supports Shadow DOMs -- High test coverage -- Documentation website with live examples -- Transparent builds and Code Analysis -- Security at mind - verified publishing and builds through GitHub Actions - -## Quick Start - -Install from [npm](https://www.npmjs.com/package/dockview-core): - -``` -npm install dockview-core -``` - -Import the stylesheet: - -```css -@import 'dockview-core/dist/styles/dockview.css'; -``` - -Create a dockview instance: - -```ts -import { DockviewComponent } from 'dockview-core'; - -const element = document.getElementById('app'); - -const dockview = new DockviewComponent(element, { - createComponent: (options) => { - switch (options.name) { - case 'my-component': - return { - init: (params) => { - params.containerElement.textContent = 'Hello World'; - }, - }; - } - }, -}); - -dockview.addPanel({ - id: 'panel_1', - component: 'my-component', -}); -``` - -Apply a theme to a parent element: - -```html -
-``` +> **`dockview-core` is an internal package.** It is published only because the +> public packages depend on it at install time. Install one of these instead: +> +> - **[`dockview`](https://www.npmjs.com/package/dockview)** - JavaScript / TypeScript +> - **[`dockview-react`](https://www.npmjs.com/package/dockview-react)** - React +> - **[`dockview-vue`](https://www.npmjs.com/package/dockview-vue)** - Vue 3 +> - **[`dockview-angular`](https://www.npmjs.com/package/dockview-angular)** - Angular -See the [documentation](https://dockview.dev) for full examples. +`dockview` re-exports this package in full, so everything documented on the website +is available from `dockview` or a framework binding. -Want to verify our builds? Go [here](https://www.npmjs.com/package/dockview-core#Provenance). +Documentation: https://dockview.dev diff --git a/packages/dockview-enterprise/README.md b/packages/dockview-enterprise/README.md index 70cd964d4..d0181dee2 100644 --- a/packages/dockview-enterprise/README.md +++ b/packages/dockview-enterprise/README.md @@ -1,12 +1,29 @@ -# dockview-enterprise +
-Enterprise feature modules and licensing for [dockview](https://github.com/mathuo/dockview). + + + Dockview + + +

dockview-enterprise

+ +

Enterprise features and licensing for dockview

+ +[![npm version](https://img.shields.io/npm/v/dockview-enterprise)](https://www.npmjs.com/package/dockview-enterprise) +[![npm downloads](https://img.shields.io/npm/dm/dockview-enterprise)](https://www.npmjs.com/package/dockview-enterprise) +[![CI](https://img.shields.io/github/actions/workflow/status/mathuo/dockview/main.yml?branch=master&label=CI)](https://github.com/mathuo/dockview/actions?query=workflow%3ACI) +[![Coverage](https://img.shields.io/sonar/coverage/mathuo_dockview?server=https%3A%2F%2Fsonarcloud.io)](https://sonarcloud.io/summary/overall?id=mathuo_dockview) +[![Quality gate](https://img.shields.io/sonar/quality_gate/mathuo_dockview?server=https%3A%2F%2Fsonarcloud.io)](https://sonarcloud.io/summary/overall?id=mathuo_dockview) + +
+ +--- `dockview-enterprise` is a drop-in **superset** of the free `dockview` package: -it re-exports the entire `dockview` API and adds the enterprise feature modules -(pinned tabs, smart guides, drop guide, auto-hide edge groups, multi-row tabs, -context menu, tab-group chips, keyboard docking, layout history) plus the license -gate. Importing the package self-registers all of them. +it re-exports the entire `dockview` API and adds the enterprise features plus +licensing. Importing the package enables all of them. + +See [licensing](https://dockview.dev/docs/overview/features) for what's included. ## Install @@ -22,15 +39,13 @@ It depends on `dockview`; use it **instead of** `dockview` (not alongside). Ever ```ts import { DockviewComponent, LicenseManager } from 'dockview-enterprise'; -// Optional: set your license key. Without a valid key, dockview keeps working -// but shows a small corner watermark. +// Set your license key. LicenseManager.setLicenseKey('your-license-key'); ``` -Merely importing `dockview-enterprise` registers the enterprise modules and the -license check, so the feature options (`pinnedTabs`, `smartGuides`, …) become -available on every `DockviewComponent`. No explicit `registerModules` call is -needed. +Merely importing `dockview-enterprise` enables the enterprise features and the +license check, so their options become available on every `DockviewComponent`. +No further setup is needed. Using a framework binding (`dockview-react` / `dockview-vue` / `dockview-angular`)? Keep importing your components from the binding and add a @@ -43,6 +58,8 @@ import 'dockview-enterprise'; ## License Enterprise features are governed by a license key set via -`LicenseManager.setLicenseKey(...)`. Without a valid key, dockview keeps working -but shows a small corner watermark. See -. +`LicenseManager.setLicenseKey(...)`. See +[licensing](https://dockview.dev/docs/overview/features). + +`dockview-enterprise` is proprietary software governed by a commercial licence +agreement. See [LICENCE.md](./LICENCE.md). diff --git a/packages/dockview-react/README.md b/packages/dockview-react/README.md index 24d7089eb..74b93574c 100644 --- a/packages/dockview-react/README.md +++ b/packages/dockview-react/README.md @@ -1,22 +1,26 @@
+ + + + Dockview + +

dockview-react

React bindings for dockview, a zero dependency layout manager supporting tabs, groups, grids and splitviews

+[![npm version](https://img.shields.io/npm/v/dockview-react)](https://www.npmjs.com/package/dockview-react) +[![npm downloads](https://img.shields.io/npm/dm/dockview-react)](https://www.npmjs.com/package/dockview-react) +[![CI](https://img.shields.io/github/actions/workflow/status/mathuo/dockview/main.yml?branch=master&label=CI)](https://github.com/mathuo/dockview/actions?query=workflow%3ACI) +[![Coverage](https://img.shields.io/sonar/coverage/mathuo_dockview?server=https%3A%2F%2Fsonarcloud.io)](https://sonarcloud.io/summary/overall?id=mathuo_dockview) +[![Quality gate](https://img.shields.io/sonar/quality_gate/mathuo_dockview?server=https%3A%2F%2Fsonarcloud.io)](https://sonarcloud.io/summary/overall?id=mathuo_dockview) +[![Bundle size](https://img.shields.io/bundlephobia/minzip/dockview-react?label=size)](https://bundlephobia.com/result?p=dockview-react) +
--- -[![npm version](https://badge.fury.io/js/dockview-react.svg)](https://www.npmjs.com/package/dockview-react) -[![npm](https://img.shields.io/npm/dm/dockview-react)](https://www.npmjs.com/package/dockview-react) -[![CI Build](https://github.com/mathuo/dockview/workflows/CI/badge.svg)](https://github.com/mathuo/dockview/actions?query=workflow%3ACI) -[![Coverage](https://sonarcloud.io/api/project_badges/measure?project=mathuo_dockview&metric=coverage)](https://sonarcloud.io/summary/overall?id=mathuo_dockview) -[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=mathuo_dockview&metric=alert_status)](https://sonarcloud.io/summary/overall?id=mathuo_dockview) -[![Bundle Phobia](https://badgen.net/bundlephobia/minzip/dockview-react)](https://bundlephobia.com/result?p=dockview-react) - -## - -![](https://github.com/mathuo/dockview/blob/HEAD/packages/docs/static/img/splashscreenv2.png?raw=true) +![A Dockview layout showing docked, tabbed and split panels in a trading workbench](https://github.com/mathuo/dockview/blob/HEAD/packages/docs/static/img/demo-hero.webp?raw=true) Please see the website: https://dockview.dev @@ -36,11 +40,11 @@ Please see the website: https://dockview.dev - High test coverage - Documentation website with live examples - Transparent builds and Code Analysis -- Security at mind - verified publishing and builds through GitHub Actions +- Security in mind - verified publishing and builds through GitHub Actions ## Quick Start -Dockview has a peer dependency on `react >= 16.8.0` and `react-dom >= 16.8.0`. Install from [npm](https://www.npmjs.com/package/dockview-react): +Dockview has a peer dependency on `react` and `react-dom`, versions 16.8 to 19. Install from [npm](https://www.npmjs.com/package/dockview-react): ``` npm install dockview-react @@ -52,10 +56,10 @@ Import the stylesheet: @import 'dockview-react/dist/styles/dockview.css'; ``` -Apply a theme and render the component: +Pass a theme and render the component: ```tsx -import { DockviewReact } from 'dockview-react'; +import { DockviewReact, themeDark } from 'dockview-react'; const components = { myComponent: (props) =>
Hello World
, @@ -63,8 +67,9 @@ const components = { function App() { return ( -
+
{ event.api.addPanel({ diff --git a/packages/dockview-vue/README.md b/packages/dockview-vue/README.md index 6ed968504..1180146b8 100644 --- a/packages/dockview-vue/README.md +++ b/packages/dockview-vue/README.md @@ -1,22 +1,26 @@
+ + + + Dockview + +

dockview-vue

Vue 3 bindings for dockview, a zero dependency layout manager supporting tabs, groups, grids and splitviews

+[![npm version](https://img.shields.io/npm/v/dockview-vue)](https://www.npmjs.com/package/dockview-vue) +[![npm downloads](https://img.shields.io/npm/dm/dockview-vue)](https://www.npmjs.com/package/dockview-vue) +[![CI](https://img.shields.io/github/actions/workflow/status/mathuo/dockview/main.yml?branch=master&label=CI)](https://github.com/mathuo/dockview/actions?query=workflow%3ACI) +[![Coverage](https://img.shields.io/sonar/coverage/mathuo_dockview?server=https%3A%2F%2Fsonarcloud.io)](https://sonarcloud.io/summary/overall?id=mathuo_dockview) +[![Quality gate](https://img.shields.io/sonar/quality_gate/mathuo_dockview?server=https%3A%2F%2Fsonarcloud.io)](https://sonarcloud.io/summary/overall?id=mathuo_dockview) +[![Bundle size](https://img.shields.io/bundlephobia/minzip/dockview-vue?label=size)](https://bundlephobia.com/result?p=dockview-vue) +
--- -[![npm version](https://badge.fury.io/js/dockview-vue.svg)](https://www.npmjs.com/package/dockview-vue) -[![npm](https://img.shields.io/npm/dm/dockview-vue)](https://www.npmjs.com/package/dockview-vue) -[![CI Build](https://github.com/mathuo/dockview/workflows/CI/badge.svg)](https://github.com/mathuo/dockview/actions?query=workflow%3ACI) -[![Coverage](https://sonarcloud.io/api/project_badges/measure?project=mathuo_dockview&metric=coverage)](https://sonarcloud.io/summary/overall?id=mathuo_dockview) -[![Quality Gate Status](https://sonarcloud.io/api/project_badges/measure?project=mathuo_dockview&metric=alert_status)](https://sonarcloud.io/summary/overall?id=mathuo_dockview) -[![Bundle Phobia](https://badgen.net/bundlephobia/minzip/dockview-vue)](https://bundlephobia.com/result?p=dockview-vue) - -## - -![](https://github.com/mathuo/dockview/blob/HEAD/packages/docs/static/img/splashscreenv2.png?raw=true) +![A Dockview layout showing docked, tabbed and split panels in a trading workbench](https://github.com/mathuo/dockview/blob/HEAD/packages/docs/static/img/demo-hero.webp?raw=true) Please see the website: https://dockview.dev @@ -36,7 +40,7 @@ Please see the website: https://dockview.dev - High test coverage - Documentation website with live examples - Transparent builds and Code Analysis -- Security at mind - verified publishing and builds through GitHub Actions +- Security in mind - verified publishing and builds through GitHub Actions ## Quick Start @@ -56,8 +60,8 @@ Use the component in a Vue SFC: ```vue