@improba/page-builder 0.1.0 → 0.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +26 -26
- package/dist/index.cjs +5 -5
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +1 -1
- package/dist/index.js +2588 -3070
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,33 +1,33 @@
|
|
|
1
1
|
# @improba/page-builder
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Vue 3 library for building and rendering pages from a JSON tree. It provides **read mode** (static rendering, SSR-compatible) and **edit mode** (WYSIWYG editor with component palette, property panel, drag-and-drop, undo/redo). The backend sends a single JSON contract (`IPageData`); the frontend renders it and, in edit mode, allows visual editing.
|
|
4
4
|
|
|
5
|
-
**
|
|
5
|
+
**In short:** install the Vue plugin, provide `IPageData`, and use `<PageBuilder>` with `mode="read"` for display or `mode="edit"` for editing. You can register your own components (hero, cards, etc.) and use them as blocks in the tree.
|
|
6
6
|
|
|
7
|
-
##
|
|
7
|
+
## Overview
|
|
8
8
|
|
|
9
|
-
**
|
|
9
|
+
**Edit mode** — WYSIWYG editor with component palette, property panel, and responsive preview.
|
|
10
10
|
|
|
11
|
-

|
|
12
12
|
|
|
13
|
-
**
|
|
13
|
+
**Read mode** — Page rendering without editor UI (SSR-compatible).
|
|
14
14
|
|
|
15
|
-

|
|
16
16
|
|
|
17
|
-
*
|
|
17
|
+
*To regenerate screenshots: `docker compose -f docker/docker-compose.yml run --rm e2e sh -lc "npm install && npm run docs:screenshots"`.*
|
|
18
18
|
|
|
19
|
-
##
|
|
19
|
+
## Features
|
|
20
20
|
|
|
21
|
-
- **
|
|
22
|
-
- **
|
|
23
|
-
- **
|
|
24
|
-
- **
|
|
21
|
+
- **Read mode** — Renders content from a JSON tree, SSR-compatible. Integrable with Nuxt or any Vue 3 app.
|
|
22
|
+
- **Edit mode** — WYSIWYG editor with component palette, property panel, drag-and-drop, undo/redo, and responsive preview (desktop / tablet / mobile).
|
|
23
|
+
- **Component registry** — Register custom Vue components (typed props, slots, edit metadata). Ships with layout and content components (PbColumn, PbRow, PbText, PbImage, etc.).
|
|
24
|
+
- **Single JSON contract** — Backend sends one `IPageData` payload; frontend renders and edits it. Clear separation of concerns.
|
|
25
25
|
|
|
26
|
-
##
|
|
26
|
+
## Quick Start
|
|
27
27
|
|
|
28
|
-
|
|
28
|
+
For a step-by-step guide (installation, first render, edit mode, custom components), see **[Quick Start](./docs/quickstart.md)**.
|
|
29
29
|
|
|
30
|
-
|
|
30
|
+
Minimal summary:
|
|
31
31
|
|
|
32
32
|
### Installation
|
|
33
33
|
|
|
@@ -204,19 +204,19 @@ docker compose -f docker/docker-compose.yml run --rm e2e npm run e2e:install
|
|
|
204
204
|
|
|
205
205
|
## Documentation
|
|
206
206
|
|
|
207
|
-
|
|
207
|
+
All documentation lives in `docs/`:
|
|
208
208
|
|
|
209
209
|
| Document | Description |
|
|
210
210
|
|----------|-------------|
|
|
211
|
-
| **[Quick Start](./docs/quickstart.md)** |
|
|
212
|
-
| **[
|
|
213
|
-
| **[Architecture](./docs/architecture/)** |
|
|
214
|
-
| **[
|
|
215
|
-
| **[Conventions](./docs/conventions/)** |
|
|
216
|
-
| **[Roadmap](./docs/plans/roadmap.md)** | Phases
|
|
217
|
-
| **[
|
|
218
|
-
|
|
219
|
-
|
|
211
|
+
| **[Quick Start](./docs/quickstart.md)** | Get started: installation, setup, first render, edit mode, API |
|
|
212
|
+
| **[Backend integration](./docs/backend-integration.md)** | Expected routes, contracts (IPageData, IPageSavePayload), validation, media, security |
|
|
213
|
+
| **[Architecture](./docs/architecture/)** | Overview, JSON schema, component system, rendering pipeline, edit mode architecture |
|
|
214
|
+
| **[Features](./docs/features/)** | Read mode, edit mode, component registry, JSON format |
|
|
215
|
+
| **[Conventions](./docs/conventions/)** | Code style, git workflow |
|
|
216
|
+
| **[Roadmap](./docs/plans/roadmap.md)** | Phases and milestones |
|
|
217
|
+
| **[API reference](./docs/api/)** | TypeDoc output (public types and functions) |
|
|
218
|
+
|
|
219
|
+
To regenerate the API reference:
|
|
220
220
|
|
|
221
221
|
```bash
|
|
222
222
|
docker compose -f docker/docker-compose.yml run --rm dev npm run docs:api
|