From ce6405063b7a6538913a4cb42cecf4fca4bc6870 Mon Sep 17 00:00:00 2001
From: Joffrey Berrier <joffreyberrier@macbook-pro-de-joffrey-1.home>
Date: Tue, 3 May 2022 10:46:12 +0200
Subject: [PATCH] use dayjs remove fecha

---
 package-lock.json                             | 22 +++++-----
 package.json                                  |  4 +-
 src/components/Calendar.vue                   | 43 +++++++++++--------
 src/components/CalendarDays.vue               |  1 +
 .../__tests__/CalendarInput.spec.ts           |  2 +-
 src/components/compose/useCreateMonth.ts      |  2 +-
 .../compose/useGetNextBookingDate.ts          |  3 +-
 src/components/generateMonth.ts               |  2 +-
 src/components/helpers.ts                     | 10 +----
 src/plugins/day.ts                            | 16 +++++++
 10 files changed, 61 insertions(+), 44 deletions(-)
 create mode 100644 src/plugins/day.ts

diff --git a/package-lock.json b/package-lock.json
index 0001e88..73020c6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,7 @@
       "version": "1.1.2",
       "license": "MIT",
       "dependencies": {
-        "fecha": "^4.2.1"
+        "dayjs": "^1.11.1"
       },
       "devDependencies": {
         "@rushstack/eslint-patch": "^1.1.0",
@@ -1285,6 +1285,11 @@
         "node": ">=12"
       }
     },
+    "node_modules/dayjs": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.1.tgz",
+      "integrity": "sha512-ER7EjqVAMkRRsxNCC5YqJ9d9VQYuWdGt7aiH2qA5R5wt8ZmWaP2dLUSIK6y/kVzLMlmh1Tvu5xUf4M/wdGJ5KA=="
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -2206,11 +2211,6 @@
         "reusify": "^1.0.4"
       }
     },
-    "node_modules/fecha": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/fecha/-/fecha-4.2.1.tgz",
-      "integrity": "sha512-MMMQ0ludy/nBs1/o0zVOiKTpG7qMbonKUzjJgQFEuvq6INZ1OraKPRAWkBq5vlKLOUMpmNYG1JoN3oDPUQ9m3Q=="
-    },
     "node_modules/file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -5024,6 +5024,11 @@
         "whatwg-url": "^10.0.0"
       }
     },
+    "dayjs": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.1.tgz",
+      "integrity": "sha512-ER7EjqVAMkRRsxNCC5YqJ9d9VQYuWdGt7aiH2qA5R5wt8ZmWaP2dLUSIK6y/kVzLMlmh1Tvu5xUf4M/wdGJ5KA=="
+    },
     "debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -5618,11 +5623,6 @@
         "reusify": "^1.0.4"
       }
     },
-    "fecha": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/fecha/-/fecha-4.2.1.tgz",
-      "integrity": "sha512-MMMQ0ludy/nBs1/o0zVOiKTpG7qMbonKUzjJgQFEuvq6INZ1OraKPRAWkBq5vlKLOUMpmNYG1JoN3oDPUQ9m3Q=="
-    },
     "file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
diff --git a/package.json b/package.json
index d20fcec..70d7ddf 100644
--- a/package.json
+++ b/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 <joffrey.berrier@gmail.com>",
@@ -34,7 +34,7 @@
     "vue": "^3.2.31"
   },
   "dependencies": {
-    "fecha": "^4.2.1"
+    "dayjs": "^1.11.1"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.1.0",
diff --git a/src/components/Calendar.vue b/src/components/Calendar.vue
index 082e08e..4450f13 100644
--- a/src/components/Calendar.vue
+++ b/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,9 +331,11 @@ 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);
@@ -342,7 +343,10 @@ const dayClicked = (day: Day): void => {
     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 {
diff --git a/src/components/CalendarDays.vue b/src/components/CalendarDays.vue
index 3d7897f..ba536c6 100644
--- a/src/components/CalendarDays.vue
+++ b/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";
 
diff --git a/src/components/__tests__/CalendarInput.spec.ts b/src/components/__tests__/CalendarInput.spec.ts
index 9a0bf1d..1da71b3 100644
--- a/src/components/__tests__/CalendarInput.spec.ts
+++ b/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";
diff --git a/src/components/compose/useCreateMonth.ts b/src/components/compose/useCreateMonth.ts
index 30bd39d..b56a8d4 100644
--- a/src/components/compose/useCreateMonth.ts
+++ b/src/components/compose/useCreateMonth.ts
@@ -1,4 +1,4 @@
-import { format } from "fecha";
+import { format } from "../../plugins/day";
 
 import { addDays } from "../helpers";
 import {
diff --git a/src/components/compose/useGetNextBookingDate.ts b/src/components/compose/useGetNextBookingDate.ts
index 2016245..6c92e6d 100644
--- a/src/components/compose/useGetNextBookingDate.ts
+++ b/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";
diff --git a/src/components/generateMonth.ts b/src/components/generateMonth.ts
index 9399012..e2f09b6 100644
--- a/src/components/generateMonth.ts
+++ b/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";
diff --git a/src/components/helpers.ts b/src/components/helpers.ts
index 93ea3f7..dda2e10 100644
--- a/src/components/helpers.ts
+++ b/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);
 };
diff --git a/src/plugins/day.ts b/src/plugins/day.ts
new file mode 100644
index 0000000..fedf109
--- /dev/null
+++ b/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 };