Close config when clicking outside
This commit is contained in:
parent
c74952e1a4
commit
27c33cb2f8
@ -1,6 +1,14 @@
|
|||||||
<template>
|
<template>
|
||||||
|
<div>
|
||||||
|
<!-- Overlay that captures clicks outside the panel -->
|
||||||
|
<div
|
||||||
|
v-if="modelValue"
|
||||||
|
class="config-overlay"
|
||||||
|
@click="closePanel"
|
||||||
|
></div>
|
||||||
|
|
||||||
<div class="config-panel" :class="{ 'open': modelValue }">
|
<div class="config-panel" :class="{ 'open': modelValue }">
|
||||||
<div class="config-content">
|
<div class="config-content" @click.stop>
|
||||||
<h3>Configuration</h3>
|
<h3>Configuration</h3>
|
||||||
<form @submit.prevent="saveConfig">
|
<form @submit.prevent="saveConfig">
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
@ -47,6 +55,7 @@
|
|||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
@ -81,6 +90,16 @@ const closePanel = () => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
.config-overlay {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
z-index: 999;
|
||||||
|
}
|
||||||
|
|
||||||
.config-panel {
|
.config-panel {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user