WIP: add basic features

src/components/base/BaseModal.vue

@@ -1,30 +1,110 @@
 <template lang="pug">
-  q-dialog(v-model="value")
-    .base-content
-      .base-header
+  q-dialog(
+    v-model="value"
+    @show="onShow",
+    @hide="onHide",
+    ref="dialog"
+    )
+    .base-content(ref="contentRef", :style="contentStyles")
+      q-resize-observer(@resize="onResize")
+      .base-header(draggable, :class="{'cursor-move': draggable}", ref="headerRef")
         .header-title.text {{ title }}
-        .icon-cancel.text-sm(@click="value = false", v-if="!showIcon")
+        .icon-cancel.text-sm(@click="value = false", v-if="!showCloseIcon")
       slot
 </template>
 
 <script>
+import { v_model } from "@/shared/mixins/v-model";
+
 export default {
   name: "BaseModal",
+  mixins: [v_model],
+  emits: ["show", "hide"],
   props: {
     title: String,
-    modelValue: Boolean,
-    showIcon: Boolean,
+    showCloseIcon: Boolean,
+    draggable: Boolean,
+    hideOverlay: Boolean,
   },
-  emits: ["update:modelValue"],
-  computed: {
-    value: {
-      get() {
-        return this.modelValue;
-      },
-      set(value) {
-        this.$emit("update:modelValue", value);
+  data() {
+    return {
+      contentStyles: {
+        top: 0,
+        left: 0,
       },
+    };
+  },
+  methods: {
+    onShow() {
+      if (this.draggable) {
+        this.$refs.headerRef.addEventListener("mousedown", this.onGrab);
+      }
+      this.$emit("show");
     },
+    onHide() {
+      if (this.draggable) {
+        document.removeEventListener("mousemove", this.onDrag);
+        document.removeEventListener("mouseup", this.onLetGo);
+      }
+      this.$emit("hide");
+    },
+    onDrag(e) {
+      const target = this.$refs.contentRef;
+      const originalStyles = window.getComputedStyle(target);
+      const { x, width, y, height } = target.getBoundingClientRect();
+      if (
+        x + e.movementX > 10 &&
+        x + e.movementX + width + 10 <= window.innerWidth
+      )
+        this.contentStyles.left =
+          parseInt(originalStyles.left) + e.movementX + "px";
+      if (
+        y + e.movementY > 10 &&
+        y + e.movementY + height + 10 <= window.innerHeight
+      )
+        this.contentStyles.top =
+          parseInt(originalStyles.top) + e.movementY + "px";
+    },
+
+    onLetGo() {
+      document.removeEventListener("mousemove", this.onDrag);
+      document.removeEventListener("mouseup", this.onLetGo);
+    },
+
+    onGrab() {
+      document.addEventListener("mousemove", this.onDrag);
+      document.addEventListener("mouseup", this.onLetGo);
+    },
+    onResize() {
+      const target = this.$refs.contentRef;
+      const originalStyles = window.getComputedStyle(target);
+      const { x, width, y, height } = target.getBoundingClientRect();
+      if (x < 10) {
+        const delta = 10 - x;
+        this.contentStyles.left = parseInt(originalStyles.left) + delta + "px";
+      }
+      if (y < 10) {
+        const delta = 10 - y;
+        this.contentStyles.top = parseInt(originalStyles.top) + delta + "px";
+      }
+      if (x + width + 10 > window.innerWidth) {
+        const delta = window.innerWidth - (x + width + 10);
+        this.contentStyles.left = parseInt(originalStyles.left) + delta + "px";
+      }
+      if (y + height + 10 > window.innerHeight) {
+        const delta = window.innerHeight - (y + height + 10);
+        this.contentStyles.top = parseInt(originalStyles.top) + delta + "px";
+      }
+    },
+  },
+  updated() {
+    const backdropEl = this.$refs.dialog?.contentEl?.previousSibling;
+    if (!backdropEl) return;
+    if (!this.hideOverlay) {
+      backdropEl.style.background = "rgba(37, 40, 80, 0.2)";
+      backdropEl.style.backdropFilter = "blur(4px)";
+    } else backdropEl.style.background = "rgba(0,0,0,0)";
+    console.log("123");
   },
 };
 </script>
@@ -45,12 +125,14 @@ 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
 
 .header-title
   font-weight: 700
   font-size: 20px
   line-height: 23px
   color: var(--font-dark-blue-color)
+  user-select: none
 .base-header
   display: flex
   justify-content: space-between
@@ -62,10 +144,6 @@ export default {
   color: var(--font-grey-color)
 </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