Workshop Kit · referencia del widget
Publicadotext-input
La primitiva de captura central del Método. Un input de una sola línea o multilínea que guarda automáticamente en MuntinContext al cambiar, anuncia el guardado vía una región de aria-live polite, y escribe en cualquier clave de contexto que el autor de la lección le indique. Doce de las dieciséis lecciones del bootcamp lo usan.
Demo en vivo
Dos variantes abajo — una sola línea para capturas cortas (un nombre, un teléfono), multilínea para párrafos y listas. Las dos guardan automáticamente; las dos hacen ida y vuelta por MuntinContext. Escribe cualquier cosa; recarga la página; tu valor vuelve.
Una línea · data-context-key="demoSingle"
Multilínea · data-context-key="demoMulti" data-multiline="true"
Contrato
Coloca un <section class="course-widget" data-widget="text-input"> en una lección y configúralo vía atributos data. El motor de widgets (/assets/js/workshop-widget.js) lo descubre, hidrata desde el estado guardado, lo monta y le hace commit.
| Atributo | Tipo | Propósito |
|---|---|---|
data-widgetRequerido |
literal | Siempre "text-input". Le dice al motor qué módulo renderer importar dinámicamente. |
data-context-keyRequerido |
cadena · con puntos | Dónde aterriza el valor capturado en MuntinContext. Soporta claves anidadas como restaurantProfile.name (el motor recorre la ruta al hacer el commit). |
data-labelRequerido |
cadena | Etiqueta visible que aparece encima del input. Usa data-label-es para la copia en español en la misma instancia del widget (el motor elige según <html lang> o data-locale). |
data-help |
cadena | Texto de ayuda de una línea debajo de la etiqueta. data-help-es para ES. |
data-placeholder |
cadena | Placeholder del input. data-placeholder-es para ES. |
data-max |
número | Tope de caracteres. El contador en la fila meta cambia de color a medida que el operador se acerca; el input fuerza el límite duro vía maxlength. |
data-multiline |
booleano | Pon "true" para un textarea; el default es un input de una línea. |
Qué escribe: el valor aterriza en la clave de contexto que nombraste, con debounce de 250ms. La ruta de commit del motor serializa a localStorage['mtn:context'] y emite un evento mtn:context-change para cualquier suscriptor (la barra lateral, la lista de revisión de la L14, la vista previa en vivo).
Marcado
Dónde se publica
- L1 — Bienvenida (captura nombre, cocina, dirección vía tres instancias)m1-orient/welcome
- L3 — Tu única promesam1-orient/one-promise
- L4 — Tu cliente en un párrafom2-decide/customer
- L5a — Nombre y dominiom2-decide/fresh/naming
- L5b — Audita tu sitio actualm2-decide/rebuild/audit
- L10 — Horarios, festivos, contacto (captura teléfono)m3-assemble/hours-contact
- L12 — Anclas de SEO local (ocho frases clave)m4-launch/local-seo
- L13 — Reseñas y confianza de la primera semana (plantilla de respuesta)m4-launch/reviews
- L16 — El ritmo de 30 días (cadencia comprometida)m4-launch/rhythm
Más L6a, L6b, L7, L9a, L9b, L11a, L11b para varias capturas de apoyo — doce lecciones en total.
Código fuente
/tools/_shared/workshop/text-input.js — ~120 LOC. Exporta { tag, contextKeys, mount, serialize } según el contrato de widgets del Workshop Kit. Lee data-context-key, busca valores anidados vía recorrido de ruta con puntos, guarda automáticamente al escribir con debounce de 250ms, anuncia vía role="status" aria-live="polite".
El motor (/assets/js/workshop-widget.js) descubre cada .course-widget[data-widget="text-input"] en una página, importa dinámicamente el módulo, llama a mount() con la raíz descubierta + la porción de estado actual. Compatible con hot-reload (devuelve un unmount).