finished modal movement

src/components/Notifications/TheNotificationProvider.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
   teleport(:to="appContainer")
-  .absolute.bottom-0.p-2.right-0.overflow-hidden.z-50(class="w-1/4 xl:w-1/3 sm:w-1/2")
+  .absolute.top-0.p-2.right-0.overflow-hidden.z-50(class="w-1/4 xl:w-1/3 sm:w-1/2")
     .pt-32(v-if="displayPadding")
     .flex.gap-2.flex-col.relative
       transition-group(name="list", @before-leave="displayPadding = true", @after-leave="displayPadding = false")
@@ -54,7 +54,7 @@ export default {
 .list-enter-from,
 .list-leave-to {
   opacity: 0;
-  transform: translateY(30px);
+  transform: translateY(-30px);
   pointer-events: none;
 }
 </style>

src/components/TheHeader.vue

@@ -155,8 +155,3 @@ export default {
   border-radius: 4px
   background-color: var(--default-white)
 </style>
-
-<style lang="sass">
-.q-menu
-  z-index: 40 !important
-</style>

src/components/base/BaseClientFormCreate.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-  base-modal(v-model="value", hide-overlay, title="Создание клиента", draggable )
+  base-modal(v-model="value", hide-overlay, title="Создание клиента", draggable, height="696px" )
     .wrapper-create.gap-y-8.flex.flex-col.pt-8
       .flex.gap-x-4.h-fit
         .flex.gap-x-3.w-full
@@ -525,11 +525,4 @@ export default {
   background-repeat: no-repeat
   background-position: center
   background-image: url(@/assets/icons/download.svg)
-
-.modal
-  max-width: 1220px
-  max-height: 794px
-  width: 1220px
-  height: 794px
-  background-color: var(--default-white)
 </style>

src/components/base/BaseModal.vue

@@ -5,7 +5,7 @@
     @hide="onHide",
     ref="dialog"
     )
-    .base-content(ref="contentRef", :style="contentStyles")
+    .base-content(:class="{'draggable': draggable}", ref="contentRef", :style="{...contentStyles, height}")
       q-resize-observer(@resize="onResize")
       .base-header(draggable, :class="{'cursor-move': draggable}", ref="headerRef")
         .header-title.text {{ title }}
@@ -25,13 +25,13 @@ export default {
     showCloseIcon: Boolean,
     draggable: Boolean,
     hideOverlay: Boolean,
+    height: {
+      type: String,
+    },
   },
   data() {
     return {
-      contentStyles: {
+      contentStyles: {},
-        top: 0,
-        left: 0,
-      },
     };
   },
   methods: {
@@ -64,6 +64,8 @@ export default {
       )
         this.contentStyles.top =
           parseInt(originalStyles.top) + e.movementY + "px";
+      this.contentStyles.bottom = "unset";
+      this.contentStyles.right = "unset";
     },
 
     onLetGo() {
@@ -106,6 +108,12 @@ export default {
     } else backdropEl.style.background = "rgba(0,0,0,0)";
     console.log("123");
   },
+  watch: {
+    value(val) {
+      if (val || !this.draggable) return;
+      this.contentStyles = {};
+    },
+  },
 };
 </script>
 
@@ -125,7 +133,10 @@ export default {
   background-color: var(--default-white)
   box-shadow: 4px 4px 8px rgba(9, 10, 21, 0.1), -4px -4px 8px rgba(9, 10, 21, 0.1)
   border-radius: 4px
-  position: relative
+  &.draggable
+    position: fixed
+    bottom: 10px
+    right: 10px
 
 .header-title
   font-weight: 700

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,11 +1,6 @@
 <template lang="pug">
-  .flex.flex-col.gap-y-6.pt-6.pb-7.px-8.event-form.fixed.right-6.bottom-6(
+  base-modal(v-model="value", :title="!selectedEventData.id ? 'Запись на прием' : 'Изменение записи'", draggable, hide-overlay )
-    v-click-outside="clearForm"
+    .event-form.flex.flex-col.gap-y-6.pt-8
-  )
-    .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"
@@ -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
+  width: 550px
-  background-color: var(--default-white)
-  box-shadow: var(--default-shadow)
-  border-radius: 4px
-  z-index: 5
 
 .form-item
   border-radius: 4px