From cf4352c658ee0d3d9be42ec64c5544ad6cb350fc Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Thu, 23 Jan 2025 13:50:24 +0100
Subject: [PATCH] DTL panel - click outside to close the panel

---
 src/App.vue                                 |  8 +++++++-
 src/components/design-to-light/DTLPanel.vue | 12 +++++++++++-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index e9cb19a..e86df3b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,7 +7,7 @@
   <DTLPanel v-if="isDTLPanelOpen" @close="isDTLPanelOpen = false" />
   <DTLButton
     v-if="page?.designToLight?.length > 0"
-    @click="isDTLPanelOpen = !isDTLPanelOpen"
+    @click="openDTLPanel($event)"
   />
 </template>
 
@@ -22,4 +22,10 @@ import { ref } from "vue";
 const { page } = storeToRefs(usePageStore());
 
 const isDTLPanelOpen = ref(false);
+
+// Functions
+function openDTLPanel(event) {
+  isDTLPanelOpen.value = true;
+  event.stopImmediatePropagation();
+}
 </script>
diff --git a/src/components/design-to-light/DTLPanel.vue b/src/components/design-to-light/DTLPanel.vue
index 790e8b4..c31ea12 100644
--- a/src/components/design-to-light/DTLPanel.vue
+++ b/src/components/design-to-light/DTLPanel.vue
@@ -1,5 +1,5 @@
 <template>
-  <aside>
+  <aside @click="preventClose($event)">
     <button @click="emits('close')">X</button>
     <ul class="tabs">
       <li v-for="(proposal, index) in proposals">
@@ -55,15 +55,25 @@ proposals[0].isActive = true;
 const activeProposal = ref(proposals[0]);
 
 window.addEventListener("keyup", closeOnEscape);
+window.addEventListener("click", close);
 
 onBeforeUnmount(() => {
   window.removeEventListener("keyup", closeOnEscape);
+  window.removeEventListener("click", close);
 });
 
 // Functions
 function closeOnEscape(event) {
   if (event.key === "Escape") emits("close");
 }
+
+function close() {
+  emits("close");
+}
+
+function preventClose(event) {
+  event.stopImmediatePropagation();
+}
 </script>
 
 <style scoped>