From b285ce65e0bc38e03ab355ae962bcf60fb23b93c Mon Sep 17 00:00:00 2001
From: braks <78412429+bcakmakoglu@users.noreply.github.com>
Date: Tue, 2 Aug 2022 22:00:51 +0200
Subject: [PATCH] feat(gui-v2): add general overlay component

---
 .../nc-gui-v2/components/general/Overlay.vue  | 40 +++++++++++++++++++
 1 file changed, 40 insertions(+)
 create mode 100644 packages/nc-gui-v2/components/general/Overlay.vue

diff --git a/packages/nc-gui-v2/components/general/Overlay.vue b/packages/nc-gui-v2/components/general/Overlay.vue
new file mode 100644
index 0000000000..67f705648e
--- /dev/null
+++ b/packages/nc-gui-v2/components/general/Overlay.vue
@@ -0,0 +1,40 @@
+<script lang="ts" setup>
+import { onKeyDown } from '@vueuse/core'
+import { useVModel, watch } from '#imports'
+
+interface Props {
+  modelValue?: any
+}
+
+interface Emits {
+  (event: 'update:modelValue', value: boolean): void
+  (event: 'close'): void
+  (event: 'open'): void
+}
+
+const props = defineProps<Props>()
+
+const emits = defineEmits<Emits>()
+
+const vModel = useVModel(props, 'modelValue', emits)
+
+onKeyDown('Escape', () => {
+  vModel.value = false
+})
+
+watch(vModel, (nextVal) => {
+  if (nextVal) emits('open')
+  else emits('close')
+})
+</script>
+
+<template>
+  <teleport to="body">
+    <div
+      :class="[vModel ? 'opacity-100' : 'opacity-0 pointer-events-none']"
+      class="transition-opacity duration-200 ease-in-out fixed z-100 top-0 left-0 bottom-0 right-0 bg-gray-700/75"
+    >
+      <slot :is-open="vModel" />
+    </div>
+  </teleport>
+</template>