WIP Почти доделана форма создания клиента

src/components/base/BaseModal.vue

@@ -1,36 +1,22 @@
 <template lang="pug">
-  teleport(:to="appContainer")
-    transition
-      .base-overlay(:class="{'base-overlay-bg': !hideOverlay}", :style="styleOverlay", v-if="value")
-        .base-content(v-click-outside="clickOutside", :style="styleContent")
-          .base-header
-            .header-title.text {{ title }}
-            .icon-cancel.text-sm(@click="value = false", v-if="!showIcon")
-          slot
-
+  q-dialog(v-model="value")
+    .base-content
+      .base-header
+        .header-title.text {{ title }}
+        .icon-cancel.text-sm(@click="value = false", v-if="!showIcon")
+      slot
 </template>
 
 <script>
 export default {
   name: "BaseModal",
   props: {
-    hideOverlay: Boolean,
-    styleOverlay: Object,
-    styleContent: Object,
     title: String,
     modelValue: Boolean,
     showIcon: Boolean,
   },
   emits: ["update:modelValue"],
-  methods: {
-    clickOutside() {
-      this.value = false;
-    },
-  },
   computed: {
-    appContainer() {
-      return this.$.appContext.app._container;
-    },
     value: {
       get() {
         return this.modelValue;
@@ -43,7 +29,7 @@ export default {
 };
 </script>
 
-<style scoped lang="sass">
+<style lang="sass" scoped>
 .base-overlay
   z-index: 10000
   position: absolute
@@ -53,12 +39,8 @@ export default {
   justify-content: center
   align-items: center
 
-.base-overlay-bg
-  background: rgba(37, 40, 80, 0.2)
-  backdrop-filter: blur(4px)
-  width: 100vw
-  height: 100vh
 .base-content
+  width: auto
   padding: 32px 40px
   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)
@@ -78,13 +60,13 @@ export default {
   margin-right: -11px
   cursor: pointer
   color: var(--font-grey-color)
-
-.v-enter-active,
-.v-leave-active
-  transition: opacity 0.3s ease-in-out
-
-
-.v-enter-from,
-.v-leave-to
-  opacity: 0
+</style>
+<style lang="sass">
+.q-dialog__backdrop
+  background: rgba(37, 40, 80, 0.2) !important
+  backdrop-filter: blur(4px) !important
+
+@media (min-width: 600px)
+  .q-dialog__inner--minimized > div
+    max-width: 100vh !important
 </style>