noxious_client/src/components/utilities/Modal.vue

<template>
  <Teleport to="body">
    <div class="modal-container" :style="{ top: y + 'px', left: x + 'px' }" v-if="isModalOpenRef">
      <div class="modal-header" @mousedown="startDrag">
        <slot name="modalHeader" />
        <button @click="close" v-if="closable"><img draggable="false" src="/assets/icons/close-button-white.svg" /></button>
      </div>
      <div class="modal-body">
        <slot name="modalBody" />
      </div>
      <div v-if="$slots.modalFooter" class="modal-footer">
        <slot name="modalFooter" />
      </div>
    </div>
  </Teleport>
</template>

<script setup lang="ts">
import { defineEmits, onMounted, onUnmounted, ref, watch } from 'vue'

const properties = defineProps({
  isModalOpen: {
    type: Boolean,
    default: false
  },
  closable: {
    type: Boolean,
    default: true
  }
})

watch(
  () => properties.isModalOpen,
  (value) => {
    isModalOpenRef.value = value
  }
)

const isModalOpenRef = ref(properties.isModalOpen)
const emit = defineEmits(['modal:close', 'character:create'])

function close() {
  emit('modal:close')
}

// make modal draggable
let startX = 0
let startY = 0
let initialX = 0
let initialY = 0
const x = ref(0)
const y = ref(0)
const isDragging = ref(false)

// set modal position center of the screen
onMounted(() => {
  x.value = window.innerWidth / 2 - 150
  y.value = window.innerHeight / 2 - 100
})

const startDrag = (event: MouseEvent) => {
  isDragging.value = true
  startX = event.clientX
  startY = event.clientY
  initialX = x.value
  initialY = y.value
  event.preventDefault()
}

const drag = (event: MouseEvent) => {
  if (!isDragging.value) return
  const dx = event.clientX - startX
  const dy = event.clientY - startY
  x.value = initialX + dx
  y.value = initialY + dy
}

const stopDrag = () => {
  isDragging.value = false
}

onMounted(() => {
  addEventListener('mousemove', drag)
  addEventListener('mouseup', stopDrag)
})

onUnmounted(() => {
  removeEventListener('mousemove', drag)
  removeEventListener('mouseup', stopDrag)
})

</script>

<style lang="scss">
@import '@/assets/scss/main';

.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  max-width: 1000px;
  min-width: 500px;
  min-height: 280px;
  background-color: rgba($dark-gray, 0.8);
  border: 2px solid $dark-cyan;
  z-index: 999;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  backdrop-filter: blur(5px);
  box-shadow: 0 0 10px rgba($black, 0.5);

  .modal-header {
    cursor: move;
    padding: 0 20px;
    min-height: 50px;
    display: flex;
    justify-content: space-between;
    gap: 30px;
    align-items: center;
    border-bottom: 1px solid $dark-cyan;

    .modal-title {
      margin: 0;
      font-weight: 400;
    }

    button {
      width: 20px;
      height: 20px;
      margin: 0;
      padding: 0;
      position: relative;

      img {
        width: 100%;
        height: 100%;
      }

      &:hover {
        transform: rotate(180deg);
        transition: ease-in-out transform 0.3s;
      }
    }
  }

  .modal-body {
    max-height: 80vh;
    overflow: auto;
    padding: 15px;
    flex-grow: 1;

    .submit {
      display: inline-block;
      button {
        margin-right: 20px;
      }
    }

    button {
      padding: 6px 15px;
      min-width: 100px;
      border-radius: 5px;
      border-width: 1px;
    }

    .modal-form {
      display: inline;

      .form-fields {
        display: flex;
        flex-direction: column;
        margin-bottom: 20px;

        label {
          margin-bottom: 10px;
          font-family: "Poppins";
        }

        input {
          max-width: 250px;
          font-family: "Poppins";
          border: 1px solid $cyan;
          border-radius: 5px;
          background-color: rgba($white, 0.8);
          padding: 8px 10px;
        }
      }
    }
  }

  .modal-footer {
    padding: 0 20px;
    min-height: 50px;
    display: flex;
    justify-content: end;
    gap: 30px;
    align-items: center;
    border-top: 1px solid $dark-cyan;

    button {
      padding: 6px 15px;
      min-width: 100px;
      border-radius: 5px;
      border-width: 1px;
    }
  }
}
</style>