Merge pull request 'abc fate picker' (#53) from main into production

Reviewed-on: #53

src/components/forms/DynamicForm.vue

@@ -52,8 +52,19 @@ const fieldHelp = (key) => {
 const stepErrors = reactive({});
 const formatErrors = reactive({});
 const phoneParts = reactive({});
+const dateParts = reactive({});
 const triedToProceed = ref(false);
 
+const months = [
+  "Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio",
+  "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"
+];
+
+const years = (() => {
+  const y = new Date().getFullYear();
+  return Array.from({ length: 101 }, (_, i) => y - i);
+})();
+
 const remainingRequired = computed(() => {
   const step = config.value?.steps?.[currentStep.value];
   if (!step) return 0;
@@ -97,6 +108,9 @@ const fetchConfig = async () => {
       step.fields.forEach((field) => {
         if (field.type === "checkbox") {
           formData[field.key] = [];
+        } else if (field.type === "date") {
+          formData[field.key] = "";
+          dateParts[field.key] = { day: null, month: null, year: null };
         } else if (field.type === "phone_country") {
           formData[field.key] = "";
           phoneParts[field.key] = { code: "", number: "", flag: "" };
@@ -347,6 +361,20 @@ const handleSubmit = async () => {
 
 const getFieldError = (key) => stepErrors[key] || false;
 
+const composeDate = (key) => {
+  const parts = dateParts[key];
+  if (!parts) return;
+  const d = parts.day;
+  const m = parts.month;
+  const y = parts.year;
+  if (d && m && y) {
+    formData[key] = `${y}-${String(m).padStart(2, "0")}-${String(d).padStart(2, "0")}`;
+  } else {
+    formData[key] = "";
+  }
+  stepErrors[key] = false;
+};
+
 const onPhoneInput = (key, event) => {
   const cleaned = event.target.value.replace(/\D/g, "");
   formData[key] = cleaned;
@@ -651,19 +679,39 @@ const getFieldInputType = (field) => {
                 />
               </label>
 
-              <label
+              <div
                 v-else-if="field.type === 'date'"
-                class="input w-full bg-white rounded-xl focus-within:outline-2 focus-within:outline-[#22523F]"
+                class="flex gap-2 w-full"
-                :class="{ 'input-error border-red-500 focus-within:outline-red-500': getFieldError(field.key) }"
+                :class="{ 'input-error': getFieldError(field.key) }"
               >
-                <Icon icon="ph:calendar" class="shrink-0 opacity-50 text-gray-400 text-lg" />
+                <select
-                <input
+                  class="select select-bordered bg-white rounded-xl w-full focus:outline-2 focus:outline-[#22523F] text-[#1a1a1a]"
-                  class="grow text-[#1a1a1a]"
+                  :class="{ 'border-red-500 focus:outline-red-500': getFieldError(field.key) }"
-                  type="date"
+                  v-model="dateParts[field.key].day"
-                  v-model="formData[field.key]"
+                  @change="composeDate(field.key)"
-                  @change="stepErrors[field.key] = false"
+                >
-                />
+                  <option :value="null" disabled>Día</option>
-              </label>
+                  <option v-for="d in 31" :key="d" :value="d">{{ d }}</option>
+                </select>
+                <select
+                  class="select select-bordered bg-white rounded-xl w-full focus:outline-2 focus:outline-[#22523F] text-[#1a1a1a]"
+                  :class="{ 'border-red-500 focus:outline-red-500': getFieldError(field.key) }"
+                  v-model="dateParts[field.key].month"
+                  @change="composeDate(field.key)"
+                >
+                  <option :value="null" disabled>Mes</option>
+                  <option v-for="(m, i) in months" :key="i" :value="i + 1">{{ m }}</option>
+                </select>
+                <select
+                  class="select select-bordered bg-white rounded-xl w-full focus:outline-2 focus:outline-[#22523F] text-[#1a1a1a]"
+                  :class="{ 'border-red-500 focus:outline-red-500': getFieldError(field.key) }"
+                  v-model="dateParts[field.key].year"
+                  @change="composeDate(field.key)"
+                >
+                  <option :value="null" disabled>Año</option>
+                  <option v-for="y in years" :key="y" :value="y">{{ y }}</option>
+                </select>
+              </div>
 
               <div v-else-if="field.type === 'select'" class="relative">
                 <label