docs: colors/colorpicker/corners/ratio y aviso de que checkbox no existe

01-builder-fields.md documentaba `checkbox` y `colorpicker` como tipos validos
—y usaba colorpicker en un ejemplo— pero el parser no los reconocia. Verificado
contra el parser real: ambos salian con `type` indefinido, y en ese caso
funciones.php hace `continue` y **descarta la variable en silencio**. O sea que
el doc mandaba al agente a escribir campos que nunca llegaban al builder.json.

En cambio no documentaba `colors`, `corners` ni `ratio`, que si funcionan.

- Se documentan los cuatro tipos reales, con el formato de valor de cada uno.
  `colors` es una paleta de N colores en una sola variable (JSON de pares
  nombre/color, nombres declarados en data-field-colors); `colorpicker` es un
  color suelto (hex plano).
- `colorpicker` pasa a existir de verdad: se anade al parser y al compilador
  (companion en el plugin maestro). Forge ya tenia widget para ambos —
  ColorsField y ColorField— asi que solo faltaba la pieza del parser.
- `checkbox` se marca explicitamente como inexistente, con la alternativa
  (`list` de dos opciones).
- set_module_example_data documenta el formato de ambos, que el agente no podia
  adivinar.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jordan Diaz
2026-08-13 17:50:03 +00:00
parent 76221ee1d4
commit 49b52b0f9f
2 changed files with 49 additions and 5 deletions

View File

@@ -7,7 +7,7 @@ summary: "Atributos data-field-* (textfield, headfield, link, upload, list, mult
--- ---
# Builder Fields — Campos editables del index-base.tpl # Builder Fields — Campos editables del index-base.tpl
Este documento define los campos editables que el usuario rellena desde el panel del builder de Acai. Cubre el atributo `data-field-type` con todos sus tipos (`textfield`, `headfield`, `textbox`, `wysiwyg`, `link`, `upload`, `uploadMulti`, `list`, `multiv2`, `checkbox`, `colorpicker`), la regla `data-field-label` → nombre de variable, los atributos Acai (`c-if`, `c-else`, `c-for`, `c-class`, `c-hidden`, `c-required`), el tag `<set>`, la inclusión de módulos, los formularios `c-form` y los componentes built-in. Léelo antes de crear o modificar cualquier `index-base.tpl`. Este documento define los campos editables que el usuario rellena desde el panel del builder de Acai. Cubre el atributo `data-field-type` con todos sus tipos (`textfield`, `headfield`, `textbox`, `wysiwyg`, `link`, `upload`, `uploadMulti`, `list`, `multiv2`, `colors`, `corners`, `ratio`), la regla `data-field-label` → nombre de variable, los atributos Acai (`c-if`, `c-else`, `c-for`, `c-class`, `c-hidden`, `c-required`), el tag `<set>`, la inclusión de módulos, los formularios `c-form` y los componentes built-in. Léelo antes de crear o modificar cualquier `index-base.tpl`.
## Reglas de nomenclatura de variables ## Reglas de nomenclatura de variables
@@ -210,13 +210,55 @@ Uso en Twig:
{% endfor %} {% endfor %}
``` ```
### checkbox ### colors — paleta de colores
Devuelve `1` o `0` (número), nunca `true`/`false`. Un solo campo que agrupa VARIOS colores. Los nombres de cada color se declaran en
`data-field-colors`, separados por comas:
### colorpicker ```html
<div c-hidden="true">
<div data-field-type="colors"
data-field-label="Colores"
data-field-colors="fondo,titulo,boton"></div>
</div>
```
Devuelve un string hexadecimal (`#ff0000`). Almacenado en config-vars (no en `builder_custom`). El valor guardado es un JSON con pares nombre/valor. Cada color puede ser sólido o un
gradiente lineal:
```json
{"fondo": "#ffffff", "titulo": "#111111", "boton": "linear-gradient(90deg, #aaa, #000)"}
```
En Twig se accede a cada color por su nombre: `{{ colores.fondo }}`.
### colorpicker — un solo color
Cuando solo necesitas UN color, no una paleta. El valor es un string hexadecimal plano:
```html
<div c-hidden="true">
<div data-field-type="colorpicker" data-field-label="Color de fondo"></div>
</div>
```
Valor guardado: `#ff0000`. En Twig: `{{ colordefondo }}`.
Usa `colorpicker` para un color suelto y `colors` cuando el módulo tenga varios: `colors`
gasta UNA sola variable para N colores, mientras que N `colorpicker` gastan N.
### corners — radios de esquina
Selector de radio de borde en escala Tailwind. Mismo patrón que `colors`.
### ratio — proporción
Selector de proporción de imagen (16/9, 4/3, 1/1...).
> **`checkbox` no existe.** Aparecía en versiones antiguas de este documento, pero el parser NO
> lo reconoce: un elemento con `data-field-type="checkbox"` se queda con `type` indefinido y el
> compilador **descarta la variable en silencio** — no llega al `builder.json` y el campo nunca
> aparece en el panel. Para un booleano usa `list` con dos opciones.
## Agrupar campos en pestañas (`data-field-group`) ## Agrupar campos en pestañas (`data-field-group`)

View File

@@ -20,6 +20,8 @@ export function registerSetModuleExampleDataTool(server) {
Reglas críticas: Reglas críticas:
- Uploads SIEMPRE como [{ urlPath: "..." }] (nunca strings ni objetos sueltos). - Uploads SIEMPRE como [{ urlPath: "..." }] (nunca strings ni objetos sueltos).
- 'colors' como STRING con un JSON de pares nombre/color, usando los nombres declarados en data-field-colors: "{\\"fondo\\":\\"#ffffff\\",\\"titulo\\":\\"#111111\\"}". Cada color admite hex o linear-gradient(...).
- 'colorpicker' como un hex plano ("#ff0000"), no como objeto.
- 'multiv2' como array con al menos 2 items para que el preview se vea representativo. - 'multiv2' como array con al menos 2 items para que el preview se vea representativo.
- Los nombres de variables se derivan de 'data-field-label' (minúsculas, sin espacios ni acentos). - Los nombres de variables se derivan de 'data-field-label' (minúsculas, sin espacios ni acentos).
- Para URLs de imagen usa 'generate_image' o un placeholder (e.g. https://placehold.co/800x600). - Para URLs de imagen usa 'generate_image' o un placeholder (e.g. https://placehold.co/800x600).