Compare commits

...

3 Commits

Author SHA1 Message Date
Jordan Diaz
2ad2a6f87b docs: data-field-show descubrible desde el summary y el cheat-sheet
La seccion ya estaba escrita, pero el agente no llegaba a ella. Dos motivos:

- El summary del frontmatter y el parrafo de entrada de 01-builder-fields
  enumeran lo que cubre el doc y no mencionaban ni el agrupado en pestanas ni
  la visibilidad condicional. Ese summary no es decorativo: entra en el texto
  que se embebe (title + summary + primeros 2000 chars) y es lo que se ve en
  list_docs, asi que una seccion en el char 10000 sin rastro arriba es
  invisible para la busqueda semantica y para el que decide que doc abrir.

- 11b-rules-cheat-sheet es el doc de consulta rapida y ya tenia la linea de
  data-field-group; sin la hermana de data-field-show, quien mirase ahi
  concluia que las pestanas no se pueden condicionar.

Se anade la linea al cheat-sheet con la gramatica minima y los dos errores
tipicos (se referencia el nombre de variable y no el label; `campo=` es vacio).
2026-08-20 18:00:16 +00:00
Jordan Diaz
2afc2cdc34 docs: data-field-show para condicionar campos y pestanas del panel de modulos
El doc cubria data-field-group (repartir vars en pestanas) pero no habia forma
documentada de condicionar que se ve: los modulos con modos excluyentes
ensenaban al usuario todos los campos de todos los modos a la vez.

Se documentan los dos atributos nuevos (data-field-show en el campo,
data-field-group-show en una var del grupo), que llegan al builder.json por el
mismo mecanismo generico que data-field-group, con la tabla de la gramatica y
un ejemplo de las dos formas de uso.

Dos avisos que ahorran el error tipico: el campo se referencia por su NOMBRE DE
VARIABLE y no por su label (los acentos se borran, no se transliteran: "Titulo"
es `ttulo`), y `campo=` significa vacio, que es la clave de la primera opcion de
todo `list`.
2026-08-20 17:49:45 +00:00
Jordan Diaz
4835ff9467 docs: checkbox fuera de los tipos del builder y colors a las listas
El commit anterior (49b52b0) anadio un aviso de que `checkbox` no existe como
data-field-type, pero lo dejo listado como tipo valido en cuatro sitios: la
tabla de tipos de 01-builder-fields, su propio frontmatter `summary`, la tabla
de la cheat-sheet 11b y la lista del glosario. El agente consulta esas tablas
antes que el cuerpo del documento, asi que la contradiccion seguia viva:
escribe `checkbox`, el parser lo deja con type indefinido y funciones.php
descarta la variable en silencio. Era el origen del bug de tipos fantasma.

- `checkbox` fuera de las cuatro listas de data-field-type. El aviso se
  reescribe para remitir a `list` de dos opciones.
- OJO: `checkbox` SI existe como tipo de campo de TABLA del CMS
  (server/handlers/schema.py:98 y :284). Se conservan intactas sus menciones en
  05-tables-and-fields, 04-pages-and-records y la tabla de formato de datos de
  11b:88, que son otro vocabulario. El aviso lo dice explicitamente para que no
  se vuelva a borrar por error.
- `colors` entra en la tabla de 01, en la de 11b y en el glosario: tenia
  seccion propia pero no aparecia en ninguna lista, asi que quien consultaba la
  chuleta no sabia que existia. `colorpicker` se anade tambien al parrafo de
  intro de 01, que lo omitia.
- `corners` y `ratio` se dejan fuera de las tablas a proposito (decision del
  usuario: por ahora no se promocionan).
2026-08-13 20:05:21 +00:00
3 changed files with 59 additions and 10 deletions

View File

@@ -3,11 +3,11 @@ title: "Campos editables del builder"
tags: [builder, twig, html, modules] tags: [builder, twig, html, modules]
load_priority: 80 load_priority: 80
load_when: [always] load_when: [always]
summary: "Atributos data-field-* (textfield, headfield, link, upload, list, multiv2, checkbox), agrupar campos en pestañas con data-field-group, c-if/c-for/c-class, c-form, componentes built-in del builder Acai." summary: "Atributos data-field-* (textfield, headfield, link, upload, list, multiv2, colors, colorpicker), agrupar campos en pestañas con data-field-group, mostrar u ocultar campos y pestañas segun otro campo con data-field-show y data-field-group-show, c-if/c-for/c-class, c-form, componentes built-in del builder Acai."
--- ---
# 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`, `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`. 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`, `colorpicker`, `corners`, `ratio`), la regla `data-field-label` → nombre de variable, el reparto en pestañas (`data-field-group`) y su visibilidad condicional (`data-field-show`, `data-field-group-show`), 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
@@ -39,7 +39,7 @@ Reglas obligatorias:
| `list` (fijo) | `<div data-list-options="...">` | Valor seleccionado | | `list` (fijo) | `<div data-list-options="...">` | Valor seleccionado |
| `list` (tabla) | `<div data-list-table="...">` | `num` del registro | | `list` (tabla) | `<div data-list-table="...">` | `num` del registro |
| `multiv2` | `<li>` wrapper | Array de objetos repetibles | | `multiv2` | `<li>` wrapper | Array de objetos repetibles |
| `checkbox` | `<div>` o `<input>` | `1` o `0` (número) | | `colors` | `<div data-field-colors="fondo,titulo">` | Objeto de N colores por nombre: `{{ colores.fondo }}` |
| `colorpicker` | `<div>` | Hex color string | | `colorpicker` | `<div>` | Hex color string |
### textfield ### textfield
@@ -255,10 +255,9 @@ Selector de radio de borde en escala Tailwind. Mismo patrón que `colors`.
Selector de proporción de imagen (16/9, 4/3, 1/1...). 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 > Para un valor booleano usa `list` con dos opciones: el builder no tiene un tipo de casilla.
> lo reconoce: un elemento con `data-field-type="checkbox"` se queda con `type` indefinido y el > (No lo confundas con el tipo `checkbox` de los campos de TABLA del CMS, que sí existe y se
> compilador **descarta la variable en silencio** — no llega al `builder.json` y el campo nunca > documenta en `05-tables-and-fields.md`. Son dos vocabularios distintos.)
> 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`)
@@ -295,6 +294,54 @@ Recomendación de uso:
- Reparto habitual: **Contenido** (textos e imágenes), **Estilos** (colores, alineación, bordes), **Ajustes** (opciones de comportamiento, límites, enlaces). - Reparto habitual: **Contenido** (textos e imágenes), **Estilos** (colores, alineación, bordes), **Ajustes** (opciones de comportamiento, límites, enlaces).
- Mantén los nombres de grupo consistentes entre módulos y en español. Son literales: `Estilos` y `estilos` generan dos pestañas distintas. - Mantén los nombres de grupo consistentes entre módulos y en español. Son literales: `Estilos` y `estilos` generan dos pestañas distintas.
## Mostrar u ocultar campos y pestañas (`data-field-show`)
Un campo o una pestaña entera pueden depender del valor de otro campo del mismo módulo. Se declara con dos atributos, que viajan al `builder.json` por el mismo mecanismo genérico que `data-field-group` (`customDataField.show` y `customDataField['group-show']`):
- `data-field-show="campo=valor"` — en el elemento del campo que se quiere condicionar.
- `data-field-group-show="campo=valor"` — en **una** var del grupo; condiciona la pestaña completa.
Gramática:
| Condición | Se muestra cuando |
|-----------|-------------------|
| `modo=1` | el valor es `1` |
| `modo=1,2` | el valor es `1` o `2` |
| `modo=` | el campo está **vacío** — es la clave de la primera opción de todo `list` |
| `modo!=1` | el valor NO es `1` |
| `modo=1;otro=2` | se cumplen ambas (AND) |
El campo se referencia por su **nombre de variable**, no por su label: se aplican las [reglas de nomenclatura](#reglas-de-nomenclatura-de-variables), así que `Mostrar Estilos` se referencia como `mostrarestilos` y `Título` como `ttulo` (los acentos se borran, no se transliteran). Los valores no pueden contener coma ni punto y coma.
```html
<div c-hidden="true">
<!-- Pestaña completa: "Estilos" solo aparece si el usuario activa el switch -->
<div data-field-type="list" data-field-label="Mostrar Estilos" data-list-options="|No,1|Si"></div>
<div data-field-type="textfield"
data-field-label="Texto de Estilos"
data-field-group="Estilos"
data-field-group-show="mostrarestilos=1"></div>
<!-- Campo a campo: cada opción del list muestra su propio campo -->
<div data-field-type="list"
data-field-label="Modo Modulo"
data-list-options="|Opcion 1,1|Opcion 2,2|Opcion 3"
data-field-group="Contenido"></div>
<div data-field-type="textfield" data-field-label="Opcion 1" data-field-group="Contenido" data-field-show="modomodulo="></div>
<div data-field-type="textfield" data-field-label="Opcion 2" data-field-group="Contenido" data-field-show="modomodulo=1"></div>
<div data-field-type="textfield" data-field-label="Opcion 3" data-field-group="Contenido" data-field-show="modomodulo=2"></div>
</div>
```
Comportamiento del panel:
- **Ocultar no borra.** El valor sigue guardado y sigue llegando al Twig; si el usuario vuelve a mostrar el campo, lo escrito sigue ahí.
- **Por eso la plantilla debe repetir la condición con `c-if`.** Ocultar el campo en el panel NO lo quita de la web: si `Texto de Estilos` no debe pintarse cuando `mostrarestilos` está a `0`, el `index-base.tpl` necesita su propio `c-if="mostrarestilos = '1'"`.
- Una pestaña se oculta sola cuando todos sus campos han quedado ocultos por su `show`; en la mayoría de casos basta con condicionar los campos y no hace falta `data-field-group-show`.
- Si varias vars del mismo grupo declaran `data-field-group-show`, **gana la primera** y las demás se ignoran.
- Si una condición apunta a un campo que no existe (typo, o un label renombrado que cambió el nombre de variable), el campo **se muestra igualmente** y el aviso queda en la consola del navegador. Nunca desaparece en silencio.
- Dentro de `multiv2` la condición se evalúa contra los valores **de ese item**, no contra los del módulo.
- En modo traducción las condiciones se evalúan contra los valores del **idioma base**.
## Atributos Acai ## Atributos Acai
### `c-if` — Renderizado condicional ### `c-if` — Renderizado condicional

View File

@@ -3,7 +3,7 @@ title: "Reglas inmutables y cheat-sheet de tipos"
tags: [reference, rules, cheat] tags: [reference, rules, cheat]
load_priority: 90 load_priority: 90
load_when: [cheatsheet] load_when: [cheatsheet]
summary: "Reglas no negociables (cms_, num, _num, upload arrays, c-if/{% if %}), tipos de builder field, atributos Acai, filtros Twig, formato de datos para insert/update, errores comunes." summary: "Reglas no negociables (cms_, num, _num, upload arrays, c-if/{% if %}), tipos de builder field, pestañas y visibilidad condicional de campos (data-field-group, data-field-show), atributos Acai, filtros Twig, formato de datos para insert/update, errores comunes."
--- ---
# Reglas inmutables y cheat-sheet # Reglas inmutables y cheat-sheet
@@ -42,11 +42,13 @@ Resumen ejecutable de reglas críticas, tipos de campo, filtros y formatos de da
| `list` (fijo) | `<div data-list-options="...">` | Valor seleccionado | | `list` (fijo) | `<div data-list-options="...">` | Valor seleccionado |
| `list` (tabla) | `<div data-list-table="...">` | `num` del registro | | `list` (tabla) | `<div data-list-table="...">` | `num` del registro |
| `multiv2` | `<li>` wrapper | Array de objetos | | `multiv2` | `<li>` wrapper | Array de objetos |
| `checkbox` | `<input>` o `<div>` | `1` / `0` | | `colors` | `<div data-field-colors="fondo,titulo">` | Objeto de N colores por nombre |
| `colorpicker` | `<div>` | Hex color | | `colorpicker` | `<div>` | Hex color |
Pestañas en el panel del módulo: `data-field-group="Estilos"` en el elemento del campo (sin group → pestaña "Principal"). Pestañas en el panel del módulo: `data-field-group="Estilos"` en el elemento del campo (sin group → pestaña "Principal").
Visibilidad condicional: `data-field-show="modo=1"` en el campo, y `data-field-group-show="modo=1"` en **una** var del grupo para condicionar la pestaña entera. Se referencia el NOMBRE DE VARIABLE, no el label. `modo=` significa vacío (clave de la primera opción de todo `list`), `,` es OR, `!=` niega y `;` encadena condiciones (AND).
## Atributos Acai ## Atributos Acai
| Atributo | Uso | Ejemplo | | Atributo | Uso | Ejemplo |

View File

@@ -61,7 +61,7 @@ Definiciones cortas de los términos que aparecen en docs y prompts. Si te pierd
**`c-form`** — atributo que convierte un `<form>` en un formulario que persiste a una tabla del CMS. Sintaxis: `<c-form tableName="'contacto'" captcha="true">`. Se renderiza como form HTML con submit a un endpoint Acai. **`c-form`** — atributo que convierte un `<form>` en un formulario que persiste a una tabla del CMS. Sintaxis: `<c-form tableName="'contacto'" captcha="true">`. Se renderiza como form HTML con submit a un endpoint Acai.
**`data-field-*`** — familia de atributos que marca un elemento como editable en el builder visual. Tipos: `textfield`, `headfield`, `textbox`, `wysiwyg`, `link`, `upload`, `uploadMulti`, `list`, `multiv2`, `checkbox`, `colorpicker`. **`data-field-*`** — familia de atributos que marca un elemento como editable en el builder visual. Tipos: `textfield`, `headfield`, `textbox`, `wysiwyg`, `link`, `upload`, `uploadMulti`, `list`, `multiv2`, `colors`, `colorpicker`.
**`c-if`, `c-for`, `c-class`, `c-hidden`, `c-required`** — atributos de lógica visual. **`c-if` usa un solo `=`** (`c-if="x = 1"`), Twig `{% if %}` usa **doble** `==`. **`c-if`, `c-for`, `c-class`, `c-hidden`, `c-required`** — atributos de lógica visual. **`c-if` usa un solo `=`** (`c-if="x = 1"`), Twig `{% if %}` usa **doble** `==`.