WIP Начала изменение календаря

src/components/base/BaseCalendar.vue

@@ -1,7 +1,14 @@
 <template lang="pug">
   .calendar-wrapper.bg-white
-    .header.px-6.pt-5.pb-18px.flex.items-center.justify-between
-      .text-smm.font-semibold {{ internalMonth }}
+    .header.pl-3.pr-6.pt-14px.pb-10px.flex.items-center.justify-between
+      q-btn(
+        size="14px"
+        color="dark"
+        flat,
+        :label="internalMonth"
+        no-caps,
+        padding="10px 12px"
+      )
       .arrows.flex.items-center.justify-center.gap-x-6
         q-btn(
           flat,
@@ -23,7 +30,7 @@
         )
     .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-7.px-5
+    .body.pb-3.px-5
       .flex.items-center.justify-center.cursor-pointer.w-full.h-full(
         v-for="date of internalDatesList",
         @click="selectDate(date)",
@@ -33,6 +40,25 @@
         .flex.items-center.justify-center.rounded-full.w-full.h-full(
           :class="calculateCellClasses(date)",
         ) {{ date.format("D") }}
+    .footer.flex.justify-end.items-center.px-5.py-4
+      q-btn(
+        color="dark"
+        flat,
+        no-caps,
+        label="Отменить",
+        size="14px",
+        padding="6px 12px",
+        @click="cancel"
+      )
+      q-btn(
+        color="primary",
+        flat,
+        no-caps,
+        label="Сохранить",
+        size="14px",
+        padding="6px 12px",
+        @click="save"
+      )
 </template>
 
 <script>
@@ -44,6 +70,14 @@ export default {
     modelValue: Object,
     range: Boolean,
     rangeCount: Number,
+    save: {
+      type: Function,
+      default: () => {},
+    },
+    cancel: {
+      type: Function,
+      default: () => {},
+    },
   },
   data() {
     return {
@@ -218,4 +252,8 @@ export default {
   row-gap: 4px
   justify-content: center
   align-items: center
+.month:hover
+  background-color: var(--bg-light-grey)
+.footer
+  border-top: 1px solid var(--border-light-grey-color)
 </style>

src/pages/newCalendar/components/CalendarHeader.vue

@@ -39,9 +39,15 @@
               transition-show="scale",
               transition-hide="scale"
               self="top middle",
-              :offset="[118, 14]"
+              :offset="[122, 14]"
+            )
+              base-calendar(
+                v-model="date",
+                range,
+                :range-count="7",
+                :save="saveNewDate",
+                :cancel="cancelDateChanges"
               )
-              base-calendar(v-model="date", range, :range-count="7")
       q-btn(
         color="secondary",
         icon="arrow_forward_ios",
@@ -111,17 +117,25 @@ export default {
     ...mapActions({
       changeSelectedDates: "changeSelectedDates",
     }),
-  },
-  watch: {
-    date: {
-      deep: true,
-      handler(val) {
+    saveNewDate() {
+      this.calendarVisibility = false;
       if (
         !this.date?.from.isSame(this.selectedDates?.from) &&
         !this.date?.to.isSame(this.selectedDates?.to)
       )
-          this.changeSelectedDates(val);
+        this.changeSelectedDates(this.date);
     },
+    cancelDateChanges() {
+      this.calendarVisibility = false;
+    },
+  },
+  watch: {
+    calendarVisibility(val) {
+      if (val === false)
+        this.date = {
+          from: this.selectedDates.from.clone(),
+          to: this.selectedDates.to.clone(),
+        };
     },
   },
   mounted() {