Añadir inputs

src/components/@inputs/Calendar.vue

@@ -1,22 +1,130 @@
 <template>
-  <div class="custom-input-el">
-    <IconCalendar />
+  <div class="custom-input-el calendar">
+    <q-btn round size="sm" class="custom-date-btn">
+      <IconCalendar />
+
+      <q-popup-proxy
+        @before-show="updateProxy"
+        cover
+        transition-show="scale"
+        transition-hide="scale"
+      >
+        <q-date
+          v-model="proxyDate"
+          :options="optionsValidDates"
+          mask="DD-MM-YYYY"
+        >
+          <div class="row items-center justify-end q-gutter-sm">
+            <q-btn label="Cancel" color="primary" flat v-close-popup />
+            <q-btn
+              label="OK"
+              color="primary"
+              flat
+              @click="save"
+              v-close-popup
+            />
+          </div>
+        </q-date>
+      </q-popup-proxy>
+    </q-btn>
 
     <div class="custom-block-content">
       <p class="custom-head-paragraph">¿Cuándo?</p>
-      <p class="custom-main-paragraph">Elige una fecha</p>
+      <q-input
+        class="custom-date-input"
+        label="Elige una fecha"
+        placeholder="DD/MM/YYYY"
+        v-model="calendar"
+        mask="##/##/####"
+        :error="!!errors.date"
+        :error-message="errors.date"
+        @blur="onBlur"
+        borderless
+        dense
+      />
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
+import { toTypedSchema } from '@vee-validate/zod';
+import { storeToRefs } from 'pinia';
+import { useFormStore } from 'src/stores/forms';
+import { useForm } from 'vee-validate';
+import { defineComponent, ref } from 'vue';
+import { z } from 'zod';
 import IconCalendar from '../icons/IconCalendar.vue';
 
 export default defineComponent({
   name: 'calendar-input',
   components: { IconCalendar },
+  setup() {
+    const getDate = new Date();
+    const currentDay = getDate.getDate().toString().padStart(2, '0');
+    const currentMonth = getDate.getMonth() + 1;
+    const currentYear = getDate.getFullYear();
+    const fullCurrentDate = `${currentYear}/${currentMonth}/${currentDay}`;
+
+    const formStore = useFormStore();
+    const { availability } = storeToRefs(formStore);
+    const proxyDate = ref(fullCurrentDate);
+
+    const validationSchema = toTypedSchema(
+      z.object({
+        date: z.string().refine((val) => {
+          const [day, month, year] = val.split('/');
+          console.log({ day, month, year });
+          const regex = /\//g;
+          const valWithoutSlash = val.replace(regex, '');
+          /* const daysOnMonth = (month: number, year: number) => {
+            const data = new Date(year, month, 0);
+            return data.getDate();
+          };
+          const daysOnMonthValue = daysOnMonth(+month, +year); */
+
+          const data = new Date(`${year}-${month}-${day}`);
+          const today = new Date();
+
+          return (
+            valWithoutSlash.length === 8 &&
+            /* +year >= currentYear &&
+            +month >= currentMonth &&
+            +day >= +currentDay && */
+            data >= today /* &&
+            +month > 0 &&
+            +month <= 12 &&
+            +day > 0 &&
+            +day <= daysOnMonthValue */
+          );
+        }, 'La fecha no puede ser inferior al día de hoy!'),
+      })
+    );
+    const { errors, defineField } = useForm({
+      validationSchema,
+    });
+    const [calendar, calendarAttrs] = defineField('date');
+    const onBlur = () => {
+      availability.value.date = calendar.value as string;
+    };
+
+    return {
+      availability,
+      proxyDate,
+      calendar,
+      calendarAttrs,
+      errors,
+      onBlur,
+      updateProxy() {
+        proxyDate.value = availability.value.date;
+      },
+      optionsValidDates(date: string) {
+        return date >= fullCurrentDate /* && date <= '2019/02/15' */;
+      },
+      save() {
+        availability.value.date = proxyDate.value;
+        calendar.value = proxyDate.value;
+      },
+    };
+  },
 });
 </script>
-
-<style lang="scss" scoped></style>

src/components/@inputs/PostalCode.vue

@@ -1,22 +1,74 @@
 <template>
-  <div class="custom-input-el">
+  <div class="custom-input-el postal-code">
     <IconPostalCode />
 
     <div class="custom-block-content">
       <p class="custom-head-paragraph">¿Dónde?</p>
-      <p class="custom-main-paragraph">código postal</p>
+      <!-- <p class="custom-main-paragraph">código postal</p> -->
+      <q-input
+        borderless
+        class="custom-main-paragraph"
+        v-model="postalCode"
+        v-bind="postalCodeAttrs"
+        :error="!!errors.postalCode"
+        :error-message="errors.postalCode"
+        label="código postal"
+        placeholder="00000-000"
+        mask="#####-###"
+        @blur="onBlur"
+        dense
+      />
     </div>
   </div>
 </template>
 
 <script lang="ts">
+import { toTypedSchema } from '@vee-validate/zod';
+import { storeToRefs } from 'pinia';
+import { useFormStore } from 'src/stores/forms';
+import { useForm } from 'vee-validate';
 import { defineComponent } from 'vue';
+import { z } from 'zod';
 import IconPostalCode from '../icons/IconPostalCode.vue';
 
 export default defineComponent({
   name: 'postal-code',
   components: { IconPostalCode },
+  setup() {
+    const formStore = useFormStore();
+    const { availability } = storeToRefs(formStore);
+    const validationSchema = toTypedSchema(
+      z
+        .object({
+          postalCode: z.string().refine((val) => {
+            const valWithoutHifen = val.replace('-', '');
+            const valLength = valWithoutHifen.length;
+            const regex = /^[0-9]+$/;
+
+            return (
+              regex.test(valWithoutHifen) && valLength === 8 && valLength > 0
+            );
+          }, 'El código postal no puede contener letras y debe constar de 8 caracteres!'),
+        })
+        .partial()
+    );
+    const { errors, defineField } = useForm({
+      validationSchema,
+      initialValues: {
+        postalCode: availability.value.date,
+      },
+    });
+    const [postalCode, postalCodeAttrs] = defineField('postalCode');
+    const onBlur = () => {
+      availability.value.postalCode = postalCode.value as string;
+    };
+
+    return {
+      postalCode,
+      postalCodeAttrs,
+      errors,
+      onBlur,
+    };
+  },
 });
 </script>
-
-<style lang="scss" scoped></style>

src/components/@inputs/PriceRange.vue

@@ -34,11 +34,7 @@ export default defineComponent({
   setup() {
     const rangePriceStore = useRangePriceStore();
 
-    const handleChange = (e: Event) => {
-      console.log(e);
-    };
-
-    return { rangePriceStore, handleChange };
+    return { rangePriceStore };
   },
 });
 </script>