Workshop Kit · referencia del widget
Publicadomenu-builder
Una lista de platos reordenable con edición en línea de nombre y precio. Agrega / quita / reordena hasta un máximo configurable (por defecto 12); el mínimo (por defecto 3) impide que el operador publique sin querer una página de menú vacía. Mismo modelo de reordenamiento con teclado primero que drag-rank — botones arriba/abajo, sin arrastrar HTML5 — más edición en línea en cada campo. Escribe en dishes[]; el generador de la L14 renderiza el mismo arreglo como menu.html.
Demo en vivo
Haz clic en Agregar para crecer la lista; escribe en los campos de nombre/precio; reordena con los botones arriba/abajo; quita con ×. Guarda con cada cambio. La lección L8 le da al operador el marco de "lista corta del menú" — 5-8 platos que demuestran el rango de la cocina, no el menú entero.
data-context-key="dishes" data-min="3" data-max="12"
Contrato
Deja caer una <section> con data-context-key y el widget renderiza la lista editable. data-min y data-max opcionales establecen los topes duros; el botón Agregar se desactiva al máximo, el botón Quitar se desactiva al mínimo.
| Atributo | Tipo | Propósito |
|---|---|---|
data-widgetRequerido |
literal | Siempre "menu-builder". |
data-context-keyRequerido |
cadena | Dónde aterriza el arreglo de platos en MuntinContext. La forma es [{ name: string, price: string }, …]. L8 usa "dishes" por convención; el generador de la L14 lee de esa clave exacta. |
data-min |
entero | Número mínimo de filas. Default 3. El botón Quitar en cada fila se desactiva cuando length === min, previniendo eliminación accidental por debajo del piso. |
data-max |
entero | Número máximo de filas. Default 12. El botón Agregar se desactiva cuando length === max. Por qué un tope: una página de menú generada con 40 platos es un muro de texto que pierde contra el scroll de un teléfono; el operador imprime la versión larga en papel. |
Qué escribe: el arreglo se guarda en la clave de contexto nombrada con cada edición de nombre/precio, agregar, quitar y reordenar. Los valores de precio pasan por una regex estricta (/^\$?\d{1,4}(?:\.\d{1,2})?$/ después de quitar espacios) al momento de renderizar en el generador — el widget mismo acepta cualquier cadena, pero los precios mal formados renderizan en blanco en la página del menú desplegado.
Marcado
Modelo de teclado
Misma postura que drag-rank: sin arrastrar y soltar de HTML5, cada reordenamiento pasa por un botón. Más campos editables en línea:
- Tab recorre las filas; dentro de una fila, Tab se mueve entre nombre, precio, arriba, abajo, quitar en orden de fuente.
- Escribir en nombre o precio guarda con cada cambio (con debounce de 250ms vía el motor).
- Los botones arriba/abajo son
<button>reales. Presionar uno mueve la fila un puesto; el foco se queda en el mismo botón después de reordenar (para que puedas seguir presionando para mover varios puestos, igual que drag-rank). - Quitar elimina la fila de inmediato — sin confirmar. El operador puede volver a agregar; el anuncio de la región en vivo nombra qué plato se quitó para que la acción no sea silenciosa.
- Agregar añade una fila vacía nueva al final y enfoca el campo de nombre. Desactivado cuando length === max.
- La región de aria-live polite anuncia reordenamientos ("Pollo asado movido al puesto 1 de 6"), adiciones ("Fila vacía agregada, ahora 4 de 12") y eliminaciones.
Por qué una lista corta, no el menú entero
La tentación en L8 es meter cada plato del menú impreso del operador. El tope duro de 12 del widget aleja de eso. Razones:
- Los comensales deciden qué pedir en el comedor, no en el sitio web. El trabajo del sitio es mostrar rango, no ser el menú.
- Los menús largos se desactualizan más rápido que los cortos — una lista corta de 12 se re-curate trimestralmente; un menú entero de 40 nunca se actualiza.
- El generador de la L14 emite
menu.htmlcomo una sola columna con nombre + precio. 40 de esos es un muro vertical; 8 es un resumen escaneable. - El operador que quiere la versión larga puede imprimirla. El sitio debería hacer que el comensal quiera entrar.
Dónde se publica
El generador de L14 lee el mismo arreglo dishes y renderiza menu.html en la paleta del operador.
Código fuente
/tools/_shared/workshop/menu-builder.js — ~290 LOC. Exporta { tag, contextKeys, mount, serialize } según el contrato de widgets del Workshop Kit. Lee los topes min/max, hidrata desde el estado guardado (o siembra con tres filas vacías en el primer montaje), conecta los manejadores de eventos por fila para ediciones de nombre/precio + botones de reordenamiento + quitar, maneja el estado desactivado del botón Agregar, y anuncia cada acción vía la región en vivo polite.
Manejo del foco al reordenar: después de presionar arriba/abajo, el foco se queda en el mismo botón de dirección (no en el primer input de la fila). Esto coincide con el patrón de drag-rank — los operadores que quieren seguir moviendo un elemento pueden seguir presionando sin volver a tabular.