Selectores en cascada

Compón varios SSelector donde el valor de uno condiciona las opciones del siguiente — país → departamento → ciudad es el caso canónico.

Cuándo usarla

• Direcciones físicas (país → depto/estado → ciudad → barrio) en perfiles o checkouts.
• Jerarquías de negocio: sector → industria → subindustria.
• Cualquier escenario donde una selección reduce drásticamente el conjunto de opciones del siguiente paso.

Decisiones de diseño

Pegado visual

No hay pegado. Los selectores se apilan verticalmente con space-y-3; cada uno tiene su propia SLabel. Unirlos con rounded sería engañoso porque son decisiones secuenciales, no un único valor. El layout vertical deja claro que hay un orden.

Forma del v-model

Tres refs independientes (country, department, city). Cada SSelector mantiene su propio estado; el enlace entre ellos es lógica de derivación en computed y de reset en watch.

Al momento de enviar, combina en un objeto { country, department, city }. Considera un valor como "completo" solo cuando los tres están definidos.

Coordinación del error

• error en el último selector vacío si el formulario fue enviado y falta completar la cadena.
• No propagues el error hacia arriba: si falta solo la ciudad, el selector de país no tiene por qué volverse rojo. La cadena de dependencias es vertical, no horizontal.

Deshabilitado en cascada

• department arranca disabled hasta que haya un country seleccionado.
• city arranca disabled hasta que haya un department seleccionado.
• Al cambiar un selector "padre", resetea todos los hijos dependientes. Esto evita combinaciones imposibles como "Colombia + Jalisco".

Etiqueta y mensaje

Cada selector lleva su propia SLabel ("País", "Departamento", "Ciudad") porque son preguntas distintas. El mensaje de error vive junto al selector afectado, no agrupado al final.

Accesibilidad

• Cada SSelector debe tener un id enlazado a su SLabel por for.
• El estado disabled se anuncia automáticamente por el componente.
• Tabulación natural: país → depto → ciudad.

Variantes

• Carga asíncrona: reemplaza las estructuras inline por llamadas fetch en watch. Muestra loading en el selector dependiente mientras llega la respuesta. Útil cuando el catálogo es grande o cambia con frecuencia.
• Con búsqueda por nivel: activa search en los selectores con más de ~8 opciones (típicamente ciudad). Evita activarlo en país si el conjunto es corto.
• Precarga de valores existentes: al editar una dirección, hidrata los tres refs en orden (country → department → city) respetando las dependencias — una sola asignación en bloque puede dejar estados intermedios vacíos por el watch de reset.

Relacionado

• SSelector
• SLabel