From a541071692aabaf9f7a2c6b9306a8b9e4dcb4134 Mon Sep 17 00:00:00 2001 From: SemianiakaVY Date: Fri, 25 Sep 2026 11:23:26 +0000 Subject: [PATCH] docs(widgets): add widget system section index --- widgets/README.md | 35 +++++++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) create mode 100644 widgets/README.md diff --git a/widgets/README.md b/widgets/README.md new file mode 100644 index 0000000..e0cc6da --- /dev/null +++ b/widgets/README.md @@ -0,0 +1,35 @@ +# Widgets + +Widgets are the building blocks of the canvas and the Control Panel. Each widget is a small, +self-contained app: its own data, its own presentation settings, and optionally a live data binding. + +## Two families + +| Family | Source | Rendered as | Examples | +| --- | --- | --- | --- | +| **Vue widgets** | `w4c-quasar/src/components/widgets/` | native Vue components | List, Tree, Table, Board | +| **React widgets** | `w4c-quasar/src/components/excalidraw/` | Excalidraw `embeddable` elements | Chart, Visualization, Markdown, Diagram, Form, Code | + +## Where widgets render + +- **Excalidraw canvas** — a widget is an `embeddable` element. Its frame, fill and stroke are drawn by + the node itself, so a widget never draws its own border. +- **Control Panel** (`/control-panel`) — a grid of widget cells. Each cell renders the same widget + type, with the style stored per cell. + +## The registry + +`src/components/control-panel/widgetRegistry.ts` is the catalog: every type with its label, icon, +category and size constraints. Widgets **self-seed** their metadata when empty, so adding a new one +always shows a sensible default instead of an empty frame. + +## Data: static or bound + +- **Static** — the data lives in the widget's own metadata (columns and rows for a table, cards for a + board). Everything is editable in place. +- **Bound** — the widget carries a data binding instead. Bound widgets are read-only and refresh from + their source. + +## Pages + +- [Table](#/docs/widgets/table)