Merge pull request #17 from joffreyBerrier/feat/use-dayjs

use dayjs remove fecha

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-calendar-3",
-  "version": "1.1.2",
+  "version": "1.1.4",
   "repository": "https://github.com/joffreyBerrier/vue-datepicker",
   "funding": "https://github.com/sponsors/joffreyBerrier",
   "author": "Joffrey Berrier <[email protected]>",
@@ -34,7 +34,7 @@
     "vue": "^3.2.31"
   },
   "dependencies": {
-    "fecha": "^4.2.1"
+    "dayjs": "^1.11.1"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.1.0",

src/components/Calendar.vue

@@ -8,8 +8,7 @@ export default {
 import { computed, ref, onBeforeMount, onUnmounted } from "vue";
 import type { ComputedRef, PropType, Ref } from "vue";
 
-import { format } from "fecha";
-
+import { format } from "../plugins/day";
 import BaseIcon from "./BaseIcon.vue";
 import CalendarDays from "./CalendarDays.vue";
 import CalendarHeader from "./CalendarHeader.vue";
@@ -332,17 +331,22 @@ const dayMouseLeave = () => {
 
 // Trigger each time the click on day is triggered
 const dayClicked = (day: Day): void => {
-  if (isInBookingDates(day)) {
-    emit("select-booking-date", day, getBooking(day));
-  } else if (props.checkIn === day.date) {
+  emit("select-booking-date", day, getBooking(day));
+
+  if (isInBookingDates(day) && !isInCheckinHalfDayAndCheckin(day)) return;
+
+  if (props.checkIn === day.date) {
     // CheckIn when already CheckIn
     emit("update:checkIn", null);
     emit("update:checkOut", null);
     nextDisableBookingDate.value = null;
     currentPeriod.value = null;
     hoveringDates.value = [];
     hoveringDay.value = null;
-  } else if (props.checkIn && !props.checkOut) {
+  } else if (
+    (props.checkIn && !props.checkOut) ||
+    (isInBookingDates(day) && isInCheckinHalfDayAndCheckin(day) && props.checkIn)
+  ) {
     // CheckIn + !ChecKout
     emit("update:checkOut", day.date);
     currentPeriod.value = null;
@@ -413,14 +417,20 @@ const isInBookingDates = (day: Day) => {
     !isInCheckoutHalfDay(day)
   );
 };
-const isInCheckinHalfDayAndCheckin = (day: Day) => {
-  return checkIncheckOutHalfDay.value[day.formatDay]?.checkIn && props.checkIn;
+const isInCheckinHalfDayAndCheckin = (day: Day): boolean => {
+  return (
+    Boolean(checkIncheckOutHalfDay.value[day.formatDay]?.checkIn) &&
+    Boolean(props.checkIn)
+  );
 };
-const isInCheckinHalfDayAndNotCheckin = (day: Day) => {
-  return checkIncheckOutHalfDay.value[day.formatDay]?.checkIn && !props.checkIn;
+const isInCheckinHalfDayAndNotCheckin = (day: Day): boolean => {
+  return (
+    Boolean(checkIncheckOutHalfDay.value[day.formatDay]?.checkIn) &&
+    Boolean(!props.checkIn)
+  );
 };
-const isInCheckoutHalfDay = (day: Day) => {
-  return checkIncheckOutHalfDay.value[day.formatDay]?.checkOut;
+const isInCheckoutHalfDay = (day: Day): boolean => {
+  return Boolean(checkIncheckOutHalfDay.value[day.formatDay]?.checkOut);
 };
 const getBooking = (day: Day): FlatBooking | null => {
   if (
@@ -501,8 +511,7 @@ const getBookingType = (day: Day): string | null => {
                 `calendar_day--${getBookingType(day)}`,
                 { 'calendar_day-wrap--no-border': !day.belongsToThisMonth },
                 {
-                  'calendar_day-wrap--disabled':
-                    inDisabledDay(day) && !isInBookingDates(day),
+                  'calendar_day-wrap--disabled': inDisabledDay(day),
                 },
               ]"
               @mouseenter="dayMouseOver(day)"
@@ -542,8 +551,7 @@ const getBookingType = (day: Day): string | null => {
                   },
                   // Disabled date
                   {
-                    'calendar_day--disabled':
-                      inDisabledDay(day) && !isInBookingDates(day),
+                    'calendar_day--disabled': inDisabledDay(day),
                   },
                   // Hovering date
                   {
@@ -674,6 +682,7 @@ body {
   @apply border-2;
   border-color: var(--day-today);
 }
+.calendar_day--checkIn-checkOut,
 .calendar_day--checkIn-checkOut.calendar_day--hovering {
   background-color: var(--day-checkIn-checkOut);
 }
@@ -704,7 +713,7 @@ body {
   @apply w-full;
 }
 .calendar_wrapper--year .calendar_wrapper_content {
-  @apply grid grid-cols-4 gap-x-6 gap-y-2;
+  @apply grid grid-cols-4 gap-x-6 gap-y-6;
 }
 
 .calendar_paginate-wrapper {

src/components/CalendarDays.vue

@@ -5,6 +5,7 @@ export default {
 </script>
 
 <script setup lang="ts">
+import locale from "./locale";
 import { ref } from "vue";
 import type { Ref } from "vue";
 

src/components/__tests__/CalendarInput.spec.ts

@@ -1,6 +1,6 @@
 import { afterEach, beforeEach, describe, expect, it } from "vitest";
 
-import { format } from "fecha";
+import { format } from "../plugins/day";
 
 import { mount } from "@vue/test-utils";
 import CalendarInput from "~/components/CalendarInput.vue";

src/components/compose/useCreateMonth.ts

@@ -1,4 +1,4 @@
-import { format } from "fecha";
+import { format } from "../../plugins/day";
 
 import { addDays } from "../helpers";
 import {

src/components/compose/useGetNextBookingDate.ts

@@ -1,6 +1,5 @@
-import { format } from "fecha";
+import { format } from "../../plugins/day";
 import { addDays } from "../helpers";
-import type { Ref } from "vue";
 
 import type { Booking } from "~/types";
 import { resetTimeDate, validateDateBetweenTwoDates } from "../helpers";

src/components/generateMonth.ts

@@ -1,4 +1,4 @@
-import { format } from "fecha";
+import { format } from "../plugins/day";
 import { addDays } from "./helpers";
 
 import type { Month } from "~/types";

src/components/helpers.ts

@@ -1,14 +1,6 @@
-import { format } from "fecha";
+import { addDays, format } from "../plugins/day";
 import type { Booking } from "~/types";
 
-const addDays = (date: string | Date, quantity: number): Date => {
-  const result = new Date(date);
-
-  result.setDate(result.getDate() + quantity);
-
-  return result;
-};
-
 const isDateAfter = (time1: Date, time2: Date): boolean => {
   return new Date(time1) > new Date(time2);
 };

src/plugins/day.ts

@@ -0,0 +1,16 @@
+import * as dayjs from "dayjs";
+
+// Format DayJs
+const format = (date: Date, format: string): Date => {
+  const d = dayjs(date);
+
+  return d.format(format);
+};
+
+const addDays = (date: Date, quantity: number): Date => {
+  const d = dayjs(date);
+
+  return d.add(quantity, "day").toDate();
+};
+
+export { addDays, format };