---
title: "Nested Widget Descriptors"
slug: "nested-widget-descriptors"
category: "Patterns"
locale: "es"
reactExample: "pattern-descriptor.tsx"
hosts: "vue"
---

# Nested Widget Descriptors (Object-Notation)

## AI Defaults (read first)


- **Root** in Vue: the `ArcWidget…` component with `:data` and `@action`.
- **Nested** in a slot: `{ widget, uid, data }` inside the parent's `data`.
- **`widget`**: kebab-case ID (`"arc-widget-button"`), not the Vue component name.


---

# Widgets anidados como objeto JSON

Los mini-widgets y otros widgets se colocan en slots como **objeto JSON puro** — no como HTML pre-renderizado.

Esto es útil en bloques de layout, celdas de tabla, sidebars de drawing y superficies profundamente anidadas.

## Dos notaciones


### Root (componente de Vue)

El punto de entrada es el componente. Los descriptores anidados viven **dentro** de `data`.


### Anidado (contenido en un slot)

En `blocks[].value` (y slots comparables) usas la **notación de descriptor de widget**:

```javascript
{
    widget: "arc-widget-button",
    uniqueId: "open-btn-" + Nr,   // oder kurz: uid: "open-btn-" + Nr
    data: {
        title: "Öffnen",
        height: "20px",
        width: "auto",
        actions: [{ type: "popup", recordId: "42" }]
    }
}
```

Para el ID, el descriptor acepta **ambas notaciones** por igual:
- `uniqueId` — coherente con la configuración raíz
- `uid` — forma corta, igualmente válida

### Correspondencia


| Componente de Vue | Descriptor |
|----------------|------------|
| `<ArcWidgetLayout … />` | `widget: "arc-widget-layout"` |
| Config-Props | En `data: { … }` |


## Ejemplo completo (Layout → Button)

Ver también [Custom Layout](/docs/vue/widgets/custom-layout) para bloques de layout anidados.

```javascript
{
    widget: "arc-widget-layout",
    uniqueId: "sidebar-item-" + Nr,   // uid: "sidebar-item-" + Nr wäre gleichwertig
    data: {
        embedded: true,
        direction: "horizontal",
        gap: "10px",
        blocks: [{
            width: "fraction",
            height: "auto",
            value: "Mangel ID"
        }, {
            width: "auto",
            height: "auto",
            value: {
                widget: "arc-widget-button",
                uniqueId: "open-btn-" + Nr,   // uid: "open-btn-" + Nr wäre gleichwertig
                data: {
                    title: "Öffnen",
                    height: "20px",
                    actions: [{ type: "popup", recordId: "42" }]
                }
            }
        }]
    }
}
```


## Widgets padre con slots de descriptor

Estos widgets montan descriptores anidados (tienen `append_content`):

| ID de widget | Slots típicos |
|-----------|----------------|
| `arc-widget-layout` | `blocks[].value` |
| `arc-widget-button` | `icon`, `title`, `subtitle`, `prefix`, `suffix` |
| `arc-widget-table` | `table[].columns[].value` |
| `arc-widget-drawing` | `sidebarItem`, `rightSideContent`, contenido de shapes |
| `arc-widget-kanban` | `value` de tarjetas, contenido de swimlanes |
| `arc-widget-select` | `currentValue`, `items[].title` |
| `arc-widget-input` | slots de label/prefix |
| `arc-widget-badge` | contenido del badge |
| `arc-widget-upload` | `container.value` |
| `arc-widget-calendar-week` | contenido de entries |
| `arc-widget-calendar-timeline` | contenido de celdas/entries |
| `arc-widget-calendar-grid` | contenido de celdas |

## Widgets hijo (frecuentemente anidados)

Todos los widgets registrados en el bundle pueden aparecer como **valor de `widget`**, por ejemplo:


| Valor de `widget` | Componente de Vue (solo root) |
|---------------|---------------------------|
| `arc-widget-layout` | `ArcWidgetLayout` |
| `arc-widget-button` | `ArcWidgetButton` |


## ¿Qué formato usar cuándo?


| Situación | Formato |
|-----------|--------|
| Widget raíz en la app | `<ArcWidgetXxx :data @action />` |
| Contenido en un slot | `{ widget, uid, data }` |
| Texto plano en un bloque | String (`value: "Text"`) |


## Errores a evitar

- ❌ `widget: "arcCustomLayout"` oder `widget: "ArcWidgetLayout"` — ID incorrecto (CamelCase)
- ❌ Poner `uniqueId` o `uid` **dentro** de `data` — siempre al nivel superior (al mismo nivel que `widget` y `data`)


## Ver también

- [Custom Layout](/docs/vue/widgets/custom-layout) — bloques de layout y slots `value`
- [Button](/docs/vue/mini-widgets/buttons) — `prefix` / `suffix` como widgets anidados