WIP Доделала календарь

src/components/base/BaseCalendar.vue

@@ -23,12 +23,12 @@
         )
     .week.py-4.px-5.grid.grid-rows-1.grid-cols-7
       .flex.items-center.justify-center.week-item.text-xsx.py-1(v-for="day of week", :key="day") {{ day }}
-    .body.pb-5.px-5
+    .body.pb-7.px-5
       .flex.items-center.justify-center.cursor-pointer.w-full.h-full(
         v-for="date of internalDatesList",
         @click="selectDate(date)",
         :key="date",
-        :style="calculateRangeStyle(date)"
+        :style="calculateRangeStyle(date)",
       )
         .flex.items-center.justify-center.rounded-full.w-full.h-full(
           :class="calculateCellClasses(date)",
@@ -92,10 +92,6 @@ export default {
       this.internalDate = this.internalDate.clone().add(1, "month");
     },
     calculateCellClasses(date) {
-      if (date.isSame(this.today, "day"))
-        return {
-          "date-today": true,
-        };
       if (this.defineDateRange(date))
         return {
           "date-active": true,
@@ -106,6 +102,11 @@ export default {
       )
         return {
           "text-white": true,
+          "date-range": true,
+        };
+      if (date.isSame(this.today, "day"))
+        return {
+          "date-today": true,
         };
       if (date.isSame(this.internalDate, "month"))
         return {
@@ -116,7 +117,12 @@ export default {
       };
     },
     calculateRangeStyle(date) {
-      if (this.range && this.value?.from && this.value?.to) {
+      if (
+        this.range &&
+        this.value?.from &&
+        this.value?.to &&
+        !this.value?.from.isSame(this.value?.to?.format("YYYY-MM-DD"))
+      ) {
         if (date.isSame(this.value?.from?.format("YYYY-MM-DD")))
           return {
             "border-top-left-radius": "9999px",
@@ -167,21 +173,7 @@ export default {
         date.isSame(this.value?.to?.format("YYYY-MM-DD"))
       );
     },
-    calculateRange(start, end, count) {
-      let internalCount = count ? count : end.diff(start, "days");
-      return [...Array(internalCount - 2)].map(() =>
-        start.add(1, "day").clone()
-      );
-    },
   },
-  // watch: {
-  //   modelValue: {
-  //     deep: true,
-  //     handler(value) {
-  //       console.log(value);
-  //     },
-  //   },
-  // },
   mounted() {
     if (this.value) {
       if (this.range) {
@@ -210,8 +202,10 @@ export default {
   color: var(--font-grey-color)
 .date-month
   color: var(--font-black-color)
-.date-other:hover, .date-month:hover, .date-today:hover
+.date-other:hover, .date-month:hover
   background-color: var(--border-light-grey-color)
+.date-today:hover, .date-range:hover
+  background-color: var(--btn-blue-color-2)
 .date-today
   border: 1px dashed var(--btn-blue-color)
   color: var(--btn-blue-color)