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>