diff --git a/public/forms/formulario-inscripcion.json b/public/forms/formulario-inscripcion.json index 428c71f..ccb45d2 100644 --- a/public/forms/formulario-inscripcion.json +++ b/public/forms/formulario-inscripcion.json @@ -31,7 +31,7 @@ { "key": "correo", "label": "form.correo", "type": "email", "required": true, "colspan": 2 }, { "key": "reglamento_firma", "label": "form.reglamento_firma", "type": "text", "required": true, "colspan": 2, "placeholder": "form.reglamento_firma_placeholder" }, { "key": "fecha_nacimiento", "label": "form.fecha_nacimiento", "type": "date", "required": true }, - { "key": "nacionalidad", "label": "form.nacionalidad", "type": "text", "required": true }, + { "key": "nacionalidad", "label": "form.nacionalidad", "type": "autocomplete", "required": true, "source": "/forms/paises.json" }, { "key": "sexo", "label": "form.sexo", @@ -46,11 +46,11 @@ }, { "key": "direccion_completa", "label": "form.direccion", "type": "text", "required": true, "colspan": 2 }, { "key": "ciudad", "label": "form.ciudad", "type": "text", "required": true }, - { "key": "estado", "label": "form.estado", "type": "text", "required": true }, - { "key": "pais", "label": "form.pais", "type": "text", "required": true }, + { "key": "estado", "label": "form.estado", "type": "text" }, + { "key": "pais", "label": "form.pais", "type": "select", "required": true, "source": "/forms/paises.json" }, { "key": "postal", "label": "form.codigo_postal", "type": "text", "required": true }, { "key": "telefono", "label": "form.mobile", "type": "text", "required": true }, - { "key": "whatsapp", "label": "form.whatsapp", "type": "text", "required": true } + { "key": "whatsapp", "label": "form.whatsapp", "type": "text" } ] }, { diff --git a/public/forms/paises.json b/public/forms/paises.json new file mode 100644 index 0000000..0d08a5d --- /dev/null +++ b/public/forms/paises.json @@ -0,0 +1,195 @@ +[ + { "label": "Afganistán", "value": "Afganistán" }, + { "label": "Albania", "value": "Albania" }, + { "label": "Alemania", "value": "Alemania" }, + { "label": "Andorra", "value": "Andorra" }, + { "label": "Angola", "value": "Angola" }, + { "label": "Antigua y Barbuda", "value": "Antigua y Barbuda" }, + { "label": "Arabia Saudita", "value": "Arabia Saudita" }, + { "label": "Argelia", "value": "Argelia" }, + { "label": "Argentina", "value": "Argentina" }, + { "label": "Armenia", "value": "Armenia" }, + { "label": "Australia", "value": "Australia" }, + { "label": "Austria", "value": "Austria" }, + { "label": "Azerbaiyán", "value": "Azerbaiyán" }, + { "label": "Bahamas", "value": "Bahamas" }, + { "label": "Bangladés", "value": "Bangladés" }, + { "label": "Barbados", "value": "Barbados" }, + { "label": "Baréin", "value": "Baréin" }, + { "label": "Bélgica", "value": "Bélgica" }, + { "label": "Belice", "value": "Belice" }, + { "label": "Benín", "value": "Benín" }, + { "label": "Bielorrusia", "value": "Bielorrusia" }, + { "label": "Birmania", "value": "Birmania" }, + { "label": "Bolivia", "value": "Bolivia" }, + { "label": "Bosnia y Herzegovina", "value": "Bosnia y Herzegovina" }, + { "label": "Botsuana", "value": "Botsuana" }, + { "label": "Brasil", "value": "Brasil" }, + { "label": "Brunéi", "value": "Brunéi" }, + { "label": "Bulgaria", "value": "Bulgaria" }, + { "label": "Burkina Faso", "value": "Burkina Faso" }, + { "label": "Burundi", "value": "Burundi" }, + { "label": "Cabo Verde", "value": "Cabo Verde" }, + { "label": "Camboya", "value": "Camboya" }, + { "label": "Camerún", "value": "Camerún" }, + { "label": "Canadá", "value": "Canadá" }, + { "label": "Catar", "value": "Catar" }, + { "label": "Chad", "value": "Chad" }, + { "label": "Chile", "value": "Chile" }, + { "label": "China", "value": "China" }, + { "label": "Chipre", "value": "Chipre" }, + { "label": "Colombia", "value": "Colombia" }, + { "label": "Comoras", "value": "Comoras" }, + { "label": "Congo", "value": "Congo" }, + { "label": "Corea del Norte", "value": "Corea del Norte" }, + { "label": "Corea del Sur", "value": "Corea del Sur" }, + { "label": "Costa de Marfil", "value": "Costa de Marfil" }, + { "label": "Costa Rica", "value": "Costa Rica" }, + { "label": "Croacia", "value": "Croacia" }, + { "label": "Cuba", "value": "Cuba" }, + { "label": "Dinamarca", "value": "Dinamarca" }, + { "label": "Dominica", "value": "Dominica" }, + { "label": "Ecuador", "value": "Ecuador" }, + { "label": "Egipto", "value": "Egipto" }, + { "label": "El Salvador", "value": "El Salvador" }, + { "label": "Emiratos Árabes Unidos", "value": "Emiratos Árabes Unidos" }, + { "label": "Eritrea", "value": "Eritrea" }, + { "label": "Eslovaquia", "value": "Eslovaquia" }, + { "label": "Eslovenia", "value": "Eslovenia" }, + { "label": "España", "value": "España" }, + { "label": "Estados Unidos", "value": "Estados Unidos" }, + { "label": "Estonia", "value": "Estonia" }, + { "label": "Etiopía", "value": "Etiopía" }, + { "label": "Filipinas", "value": "Filipinas" }, + { "label": "Finlandia", "value": "Finlandia" }, + { "label": "Fiyi", "value": "Fiyi" }, + { "label": "Francia", "value": "Francia" }, + { "label": "Gabón", "value": "Gabón" }, + { "label": "Gambia", "value": "Gambia" }, + { "label": "Georgia", "value": "Georgia" }, + { "label": "Ghana", "value": "Ghana" }, + { "label": "Granada", "value": "Granada" }, + { "label": "Grecia", "value": "Grecia" }, + { "label": "Guatemala", "value": "Guatemala" }, + { "label": "Guinea", "value": "Guinea" }, + { "label": "Guinea Ecuatorial", "value": "Guinea Ecuatorial" }, + { "label": "Guinea-Bisáu", "value": "Guinea-Bisáu" }, + { "label": "Guyana", "value": "Guyana" }, + { "label": "Haití", "value": "Haití" }, + { "label": "Honduras", "value": "Honduras" }, + { "label": "Hungría", "value": "Hungría" }, + { "label": "India", "value": "India" }, + { "label": "Indonesia", "value": "Indonesia" }, + { "label": "Irak", "value": "Irak" }, + { "label": "Irán", "value": "Irán" }, + { "label": "Irlanda", "value": "Irlanda" }, + { "label": "Islandia", "value": "Islandia" }, + { "label": "Islas Marshall", "value": "Islas Marshall" }, + { "label": "Islas Salomón", "value": "Islas Salomón" }, + { "label": "Israel", "value": "Israel" }, + { "label": "Italia", "value": "Italia" }, + { "label": "Jamaica", "value": "Jamaica" }, + { "label": "Japón", "value": "Japón" }, + { "label": "Jordania", "value": "Jordania" }, + { "label": "Kazajistán", "value": "Kazajistán" }, + { "label": "Kenia", "value": "Kenia" }, + { "label": "Kirguistán", "value": "Kirguistán" }, + { "label": "Kiribati", "value": "Kiribati" }, + { "label": "Kuwait", "value": "Kuwait" }, + { "label": "Laos", "value": "Laos" }, + { "label": "Lesoto", "value": "Lesoto" }, + { "label": "Letonia", "value": "Letonia" }, + { "label": "Líbano", "value": "Líbano" }, + { "label": "Liberia", "value": "Liberia" }, + { "label": "Libia", "value": "Libia" }, + { "label": "Liechtenstein", "value": "Liechtenstein" }, + { "label": "Lituania", "value": "Lituania" }, + { "label": "Luxemburgo", "value": "Luxemburgo" }, + { "label": "Madagascar", "value": "Madagascar" }, + { "label": "Malasia", "value": "Malasia" }, + { "label": "Malaui", "value": "Malaui" }, + { "label": "Maldivas", "value": "Maldivas" }, + { "label": "Mali", "value": "Mali" }, + { "label": "Malta", "value": "Malta" }, + { "label": "Marruecos", "value": "Marruecos" }, + { "label": "Mauricio", "value": "Mauricio" }, + { "label": "Mauritania", "value": "Mauritania" }, + { "label": "México", "value": "México" }, + { "label": "Micronesia", "value": "Micronesia" }, + { "label": "Moldavia", "value": "Moldavia" }, + { "label": "Mónaco", "value": "Mónaco" }, + { "label": "Mongolia", "value": "Mongolia" }, + { "label": "Montenegro", "value": "Montenegro" }, + { "label": "Mozambique", "value": "Mozambique" }, + { "label": "Namibia", "value": "Namibia" }, + { "label": "Nauru", "value": "Nauru" }, + { "label": "Nepal", "value": "Nepal" }, + { "label": "Nicaragua", "value": "Nicaragua" }, + { "label": "Níger", "value": "Níger" }, + { "label": "Nigeria", "value": "Nigeria" }, + { "label": "Noruega", "value": "Noruega" }, + { "label": "Nueva Zelanda", "value": "Nueva Zelanda" }, + { "label": "Omán", "value": "Omán" }, + { "label": "Países Bajos", "value": "Países Bajos" }, + { "label": "Pakistán", "value": "Pakistán" }, + { "label": "Palaos", "value": "Palaos" }, + { "label": "Palestina", "value": "Palestina" }, + { "label": "Panamá", "value": "Panamá" }, + { "label": "Papúa Nueva Guinea", "value": "Papúa Nueva Guinea" }, + { "label": "Paraguay", "value": "Paraguay" }, + { "label": "Perú", "value": "Perú" }, + { "label": "Polonia", "value": "Polonia" }, + { "label": "Portugal", "value": "Portugal" }, + { "label": "Reino Unido", "value": "Reino Unido" }, + { "label": "República Centroafricana", "value": "República Centroafricana" }, + { "label": "República Checa", "value": "República Checa" }, + { "label": "República Dominicana", "value": "República Dominicana" }, + { "label": "República del Congo", "value": "República del Congo" }, + { "label": "Ruanda", "value": "Ruanda" }, + { "label": "Rumania", "value": "Rumania" }, + { "label": "Rusia", "value": "Rusia" }, + { "label": "Samoa", "value": "Samoa" }, + { "label": "San Cristóbal y Nieves", "value": "San Cristóbal y Nieves" }, + { "label": "San Marino", "value": "San Marino" }, + { "label": "San Vicente y las Granadinas", "value": "San Vicente y las Granadinas" }, + { "label": "Santa Lucía", "value": "Santa Lucía" }, + { "label": "Santo Tomé y Príncipe", "value": "Santo Tomé y Príncipe" }, + { "label": "Senegal", "value": "Senegal" }, + { "label": "Serbia", "value": "Serbia" }, + { "label": "Seychelles", "value": "Seychelles" }, + { "label": "Sierra Leona", "value": "Sierra Leona" }, + { "label": "Singapur", "value": "Singapur" }, + { "label": "Siria", "value": "Siria" }, + { "label": "Somalia", "value": "Somalia" }, + { "label": "Sri Lanka", "value": "Sri Lanka" }, + { "label": "Suazilandia", "value": "Suazilandia" }, + { "label": "Sudáfrica", "value": "Sudáfrica" }, + { "label": "Sudán", "value": "Sudán" }, + { "label": "Sudán del Sur", "value": "Sudán del Sur" }, + { "label": "Suecia", "value": "Suecia" }, + { "label": "Suiza", "value": "Suiza" }, + { "label": "Surinam", "value": "Surinam" }, + { "label": "Tailandia", "value": "Tailandia" }, + { "label": "Tanzania", "value": "Tanzania" }, + { "label": "Tayikistán", "value": "Tayikistán" }, + { "label": "Timor Oriental", "value": "Timor Oriental" }, + { "label": "Togo", "value": "Togo" }, + { "label": "Tonga", "value": "Tonga" }, + { "label": "Trinidad y Tobago", "value": "Trinidad y Tobago" }, + { "label": "Túnez", "value": "Túnez" }, + { "label": "Turkmenistán", "value": "Turkmenistán" }, + { "label": "Turquía", "value": "Turquía" }, + { "label": "Tuvalu", "value": "Tuvalu" }, + { "label": "Ucrania", "value": "Ucrania" }, + { "label": "Uganda", "value": "Uganda" }, + { "label": "Uruguay", "value": "Uruguay" }, + { "label": "Uzbekistán", "value": "Uzbekistán" }, + { "label": "Vanuatu", "value": "Vanuatu" }, + { "label": "Vaticano", "value": "Vaticano" }, + { "label": "Venezuela", "value": "Venezuela" }, + { "label": "Vietnam", "value": "Vietnam" }, + { "label": "Yemen", "value": "Yemen" }, + { "label": "Yibuti", "value": "Yibuti" }, + { "label": "Zambia", "value": "Zambia" }, + { "label": "Zimbabue", "value": "Zimbabue" } +] diff --git a/src/components/forms/DynamicForm.vue b/src/components/forms/DynamicForm.vue index fda6876..94f2c68 100644 --- a/src/components/forms/DynamicForm.vue +++ b/src/components/forms/DynamicForm.vue @@ -225,6 +225,44 @@ const handleSubmit = async () => { const getFieldError = (key) => stepErrors[key] || false; +const suggestionsCache = ref({}); +const showSuggestions = reactive({}); + +const loadSuggestions = async (source) => { + if (suggestionsCache.value[source]) return; + try { + const res = await fetch(source); + suggestionsCache.value[source] = await res.json(); + } catch {} +}; + +const filteredSuggestions = (field) => { + const val = formData[field.key]?.toLowerCase().trim() || ""; + if (!val) return []; + const list = suggestionsCache.value[field.source] || []; + return list.filter(item => item.label.toLowerCase().includes(val)); +}; + +const selectSuggestion = (field, item) => { + formData[field.key] = item.value; + showSuggestions[field.key] = false; + stepErrors[field.key] = false; +}; + +const onAutocompleteFocus = (field) => { + loadSuggestions(field.source); + showSuggestions[field.key] = true; +}; + +const onAutocompleteBlur = (field) => { + setTimeout(() => { showSuggestions[field.key] = false; }, 200); +}; + +const getSelectOptions = (field) => { + loadSuggestions(field.source); + return suggestionsCache.value[field.source] || []; +}; + const findField = (key) => { if (!config.value) return null; for (const step of config.value.steps) { @@ -325,9 +363,9 @@ const getFieldInputType = (field) => {
-
-