# Designer

NexaDesigner is a fully-featured WYSIWYG report designer built as a Vue 3 component. It provides a ribbon toolbar, canvas with rulers, sidebars for dictionary/properties/settings, drag-and-drop banded report editing, and real-time preview.

## Usage

```vue
<template>
  <NexaDesigner
    :report="reportDefinition"
    :locale="'es'"
    :license-key="'NXBR-XXXX-XXXX-XXXX'"
    @save="onSave"
    @update:locale="onLocaleChange"
  />
</template>

<script setup>
import NexaDesigner from 'nexabase-report/designer';
import { ref } from 'vue';

const reportDefinition = ref({ /* report JSON */ });

function onSave(reports) {
  console.log('Reports saved:', reports);
}
</script>
```

## Designer UI Layout

```
┌─────────────────────────────────────────────────────────┐
│  [Logo]  File  Home  Insert  Page  Data  View            │ ← Ribbon
├────────┬────────────────────────────────────────┬─────────┤
│        │  1   2   3   4   5   6   7   8   9   10 │         │
│ 📁     │  └────────── rulers ──────────────────┘ │  🔍     │
│ Dict   │                                          │ Props   │
│        │  ┌──────────────────────────────────┐  │         │
│ Fields │  │       Page Canvas                 │  │ x: 2cm  │
│ Params │  │  ┌────────────────────────────┐  │  │ y: 1cm  │
│        │  │  │ ReportHeader               │  │  │ w: 18cm │
│        │  │  ├────────────────────────────┤  │  │ h: 1cm  │
│        │  │  │ DataBand ──────────────── │  │  │         │
│        │  │  ├────────────────────────────┤  │  │         │
│        │  │  │ PageFooter                │  │  │         │
│        │  │  └────────────────────────────┘  │  │         │
│        │                                          │         │
├────────┴────────────────────────────────────────┴─────────┤
│  Ready to design   │   x: 2cm y: 1cm w: 18cm h: 1cm      │ ← Status bar
└─────────────────────────────────────────────────────────┘
```

## Sidebar Tabs

### Dictionary (📁)
- Data source list with fields
- Add/remove data sources
- Drag fields onto the canvas to create elements

### Properties (🔍)
- **Content**: Element content, binding expressions, image source
- **Position/Size**: X, Y, Width, Height (in cm)
- **Format**: Font size, weight, color

### Settings (⚙)
- **Language**: ES / EN / PT
- **NexaBase Connection**: API URL and Key
- **License**: Activate commercial license

## Ribbon Tabs

| Tab | Sections |
|-----|----------|
| **File** | New, Open, Save, Preview, Export/Import, Settings, About |
| **Home** | Clipboard, Undo/Redo, Delete, Select All |
| **Insert** | Text, Image, Barcode, QR Code, Table, Chart, Shapes (Rectangle, Ellipse, Line) |
| **Page** | Page format, orientation, margins, ruler toggle, grid toggle |
| **Data** | Data source management, parameter binding |
| **View** | Zoom, panels visibility |

## Adding Elements

### From the Ribbon

1. Click **Insert** tab
2. Choose element type (Text, Image, Barcode, Table, Chart, Shape)
3. Click on the canvas to place the element

### From Dictionary (drag & drop)

1. Open **Dictionary** sidebar
2. Drag a field from the list
3. Drop it onto a band in the canvas

## Band Context Menu

Right-click on a band tag to access:
- **Add Element** — insert new element into the band
- **Delete Band** — remove the band
- **Change Band Type** — convert between compatible types

## Report Types

### Banded Report (default)
- Supports: ReportHeader, PageHeader, DataBand, DetailBand, GroupHeader, GroupFooter, PageFooter, ReportFooter
- Full expression engine: `{{field}}`, `{[expression]}`

### Dashboard
- Grid-based widget layout
- Widget types: Indicator (KPI), Chart, Gauge, Table

Switch between modes via **File → New → Report** or **Dashboard**.

## Save and Sync

- **Save locally**: Downloads the report JSON file
- **Save to NexaBase**: Syncs to your NexaBase instance (requires API key in Settings)

## Licensing

The designer shows a watermark banner when no valid license is provided. Activate a license in **Settings → License** by pasting a key like `NXBR-XXXX-XXXX-XXXX`. License types:

| Type | Features |
|------|----------|
| `personal` | Basic use, watermark visible |
| `business` | No watermark, unlimited projects |
| `enterprise` | No watermark, priority support |

Generate license keys using: `npm run license:gen -- --type=business --expires=2027-12-31`