Workshop Kit · referencia del widget
Publicadoweekly-hours-grid
Siete filas — una por día — con selectores nativos <input type="time"> de apertura y cierre más un checkbox de "cerrado". Un atajo "copiar lunes a viernes" arriba llena la semana laboral desde la fila del lunes en un clic. Escribe un solo objeto hours en MuntinContext que la página de contacto del generador de la L14 lee como la tabla de siete días.
Demo en vivo
Pon la apertura + cierre del lunes, haz clic en "copiar lun→vie" para llenar el resto de la semana laboral, marca domingo cerrado. Abre el estado en vivo abajo para ver el objeto hours exacto que lee la plantilla de la página de contacto.
data-context-key="hours" (siempre — la lección L10 no usa otra configuración)
Contrato
Sin atributos data más allá de data-widget. El widget siempre escribe en hours y renderiza la cuadrícula de siete días en orden de semana (lunes primero, domingo último — la semana amigable para el operador empieza en el día de trabajo, no en el domingo de la semana de calendario).
| Atributo / comportamiento | Notas |
|---|---|
data-widgetRequerido |
Siempre "weekly-hours-grid". |
Escribe MuntinContext.hours |
Un objeto con clave por nombre de día (monday, tuesday, …, sunday), cada valor { open: string, close: string, closed: boolean }. Los horarios son cadenas de 24 horas ("11:00", "21:00") — lo que <input type="time"> emite nativamente. |
| Atajo "Copiar lun→vie" | Desactivado cuando el lunes está cerrado (propagaría el vacío por toda la semana laboral — default destructivo). Cuando el lunes tiene apertura/cierre, un clic llena martes–viernes con el mismo par. El anuncio de la región en vivo nombra qué se copió a dónde. |
| Checkbox cerrado | Cuando está marcado, los inputs de apertura/cierre del día se desactivan + la fila se atenúa. El valor closed=true persiste para que el generador emita una celda "Cerrado" en contact.html. Desmarcar restaura los tiempos previamente escritos (preservados en estado, nunca borrados por el toggle del checkbox). |
Marcado
Eso es todo el sitio de llamada. La lección L10 monta exactamente esto; nada más se configura.
Por qué inputs de tiempo nativos, no un selector personalizado
<input type="time"> en móvil abre el selector de tiempo nativo del sistema operativo — el mismo que el operador usa para la alarma de su teléfono, con la misma accesibilidad, el mismo formato 12/24 horas, el mismo comportamiento de lector de pantalla. Un selector personalizado sería más consistente visualmente entre navegadores; el nativo es lo que la memoria muscular del operador ya conoce.
El compromiso: los inputs de tiempo se renderizan ligeramente diferente en cada navegador. Ese es el menor de dos males. El generador de la L14 normaliza la salida a cadenas "HH:MM – HH:MM", para que la página de contacto renderizada sea idéntica sin importar desde qué navegador editó el operador.
Por qué lunes primero (no domingo)
El widget renderiza los días en orden monday, tuesday, …, sunday. La UI estándar de calendario pone domingo primero — eso es un resto de los calendarios impresos optimizados para "qué semana es esta." A los operadores de restaurantes les importa en qué día están abiertos; para las cocinas con semana laboral primero (la mayoría de los desayunos/almuerzos americanos, la mayoría de operadores en distrito de oficinas), lunes es el comienzo natural. Los calendarios con domingo primero empujan la semana laboral al centro visual, dividiéndola en dos filas en la cabeza del operador.
Dónde se publica
El generador de L14 lee el mismo objeto hours y renderiza la tabla de horarios de contact.html. La lección L13 referencia los horarios como una señal de confianza de la primera semana; el ritmo de L16 incluye una revisión mensual de horarios como una de las cuatro tareas recurrentes.
Código fuente
/tools/_shared/workshop/weekly-hours-grid.js — ~280 LOC. Exporta { tag, contextKeys, mount, serialize } según el contrato de widgets del Workshop Kit. Renderiza las siete filas en orden fijo, conecta manejadores de cambio de apertura/cierre/cerrado por día, maneja la guarda del atajo Lun→Vie desactivado-cuando-Lunes-cerrado, y anuncia cada acción vía la región en vivo polite.
Preservación de estado en cerrado: cuando el operador marca "cerrado," las cadenas existentes de apertura/cierre se quedan en estado (solo visualmente atenuadas). Desmarcar las restaura — sin pérdida silenciosa de datos por un toggle. Un error común del operador es marcar cerrado para "guardar un borrador para después"; el estado preservado significa que no pierde lo que escribió.