elk/components/modal/ModalDialog.vue

<script setup lang='ts'>
const { modelValue } = defineModel<{
  modelValue: boolean
}>()

let init = $ref(modelValue)
watchOnce(modelValue, () => {
  init = true
})
</script>

<template>
  <div
    class="fixed top-0 bottom-0 left-0 right-0 z-60"
    :class="modelValue ? '' : 'pointer-events-none'"
  >
    <div
      class="
        bg-base bottom-0 left-0 right-0 top-0 absolute transition-opacity duration-500 ease-out
      "
      :class="modelValue ? 'opacity-85' : 'opacity-0'"
      @click="modelValue = false"
    />
    <div
      class="
        bg-base absolute transition-all duration-200 ease-out shadow rounded-md transform
        border border-base top-1/2 -translate-y-1/2 mx-8 md:(left-1/2 -translate-x-1/2)
      "
      :class="modelValue ? 'opacity-100' : 'opacity-0'"
    >
      <slot v-if="init" />
    </div>
  </div>
</template>