finished modal movement

src/pages/calendar/TheCalendar.vue

@@ -26,7 +26,7 @@
     )
     transition(name="form")
       calendar-form-add-event(
-        v-if="isOpenForm",
+        v-model="isOpenForm"
         :close-form="closeFormCreateEvent",
         :selected-event-data="selectedEvent",
         :event-statuses="eventStatuses",

src/pages/calendar/components/CalendarFormAddEvent.vue

@@ -1,76 +1,71 @@
 <template lang="pug">
-  .flex.flex-col.gap-y-6.pt-6.pb-7.px-8.event-form.fixed.right-6.bottom-6(
-    v-click-outside="clearForm"
-  )
-    .flex.justify-between
-      span.title.text-xl.font-bold {{!selectedEventData.id ? "Запись на прием" : "Изменение записи"}}
-      .flex.pt-2
-        .icon-cancel.close-icon.tesxt-xs.cursor-pointer(@click="clearForm")
-    .flex.flex-col.gap-y-8
-      base-select(
-        v-if="selectedEventData.id"
-        v-model="status",
-        :items="eventStatuses",
-        label="Статус приема"
+  base-modal(v-model="value", :title="!selectedEventData.id ? 'Запись на прием' : 'Изменение записи'", draggable, hide-overlay )
+    .event-form.flex.flex-col.gap-y-6.pt-8
+      .flex.flex-col.gap-y-8
+        base-select(
+          v-if="selectedEventData.id"
+          v-model="status",
+          :items="eventStatuses",
+          label="Статус приема"
+        )
+        base-input(
+          v-else,
+          disabled,
+          v-model="status.label",
+          label="Статус приема",
+          outlined
+        )
+        base-select(
+          :items="ownersList",
+          v-model="employees.employee",
+          placeholder="Выберите сотрудника"
+          label="Сотрудник"
+        )
+        base-select(
+          :items="membersList",
+          v-model="members.person",
+          placeholder="Выберите клиента",
+          label="Клиент"
+        )
+      .flex.gap-x-4
+        base-input(
+          v-model="eventDate",
+          label="Дата",
+          type="date",
+          outlined
+        )
+        .flex.gap-x-2.items-center.justify-between
+          base-input(
+            type="time",
+            v-model="startTime",
+            label="Начало",
+            outlined
+          )
+          span.mt-4 —
+          base-input(
+            type="time",
+            v-model="endTime",
+            label="Конец",
+            outlined
+          )
+      q-btn.create-button(
+        v-if="!selectedEventData.id",
+        label="Создать событие",
+        no-caps,
+        color="primary",
+        padding="10px 22px",
+        :disabled="disabledCreateButton",
+        @click="sendEventData",
       )
-      base-input(
+      q-btn.update-button(
         v-else,
-        disabled,
-        v-model="status.label",
-        label="Статус приема",
-        outlined
+        label="Сохранить",
+        no-caps,
+        color="primary",
+        padding="10px 22px",
+        :disabled="disabledUpdateButton",
+        @click="updateEventData",
       )
-      base-select(
-        :items="ownersList",
-        v-model="employees.employee",
-        placeholder="Выберите сотрудника"
-        label="Сотрудник"
-      )
-      base-select(
-        :items="membersList",
-        v-model="members.person",
-        placeholder="Выберите клиента",
-        label="Клиент"
-      )
-    .flex.gap-x-4
-      base-input(
-        v-model="eventDate",
-        label="Дата",
-        type="date",
-        outlined
-      )
-      .flex.gap-x-2.items-center.justify-between
-        base-input(
-          type="time",
-          v-model="startTime",
-          label="Начало",
-          outlined
-        )
-        span.mt-4 —
-        base-input(
-          type="time",
-          v-model="endTime",
-          label="Конец",
-          outlined
-        )
-    q-btn.create-button(
-      v-if="!selectedEventData.id",
-      label="Создать событие",
-      no-caps,
-      color="primary",
-      padding="10px 22px",
-      :disabled="disabledCreateButton",
-      @click="sendEventData",
-    )
-    q-btn.update-button(
-      v-else,
-      label="Сохранить",
-      no-caps,
-      color="primary",
-      padding="10px 22px",
-      :disabled="disabledUpdateButton",
-      @click="updateEventData",
-    )
 </template>
 
 <script>
@@ -81,14 +76,18 @@ import BaseInput from "@/components/base/BaseInput.vue";
 import BaseSelect from "@/components/base/BaseSelect.vue";
 import * as moment from "moment/moment";
 import { statusesDictionary } from "../utils/statusesDictionary.js";
+import BaseModal from "@/components/base/BaseModal.vue";
+import { v_model } from "@/shared/mixins/v-model";
 
 export default {
   name: "FormChangeEvent",
   components: {
+    BaseModal,
     BaseSelect,
     BaseInput,
     TheNotificationProvider,
   },
+  mixins: [v_model],
   emits: ["clear-selected-event-data", "close-change-form"],
   props: {
     closeForm: Function,
@@ -594,11 +593,7 @@ export default {
 
 <style lang="sass" scoped>
 .event-form
-  width: 634px
-  background-color: var(--default-white)
-  box-shadow: var(--default-shadow)
-  border-radius: 4px
-  z-index: 5
+  width: 550px
 
 .form-item
   border-radius: 4px