parallelvirtualcluster/pvc-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Close config when clicking outside

Browse Source
This commit is contained in:
Joshua Boniface 2025-02-26 17:00:49 -05:00
parent c74952e1a4
commit 27c33cb2f8
1 changed files with 62 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

105
pvcweb-vue/src/components/ConfigPanel.vue
View File

@ -1,50 +1,59 @@
<template>
<div class="config-panel" :class="{ 'open': modelValue }">
<div class="config-content">
<h3>Configuration</h3>
<form @submit.prevent="saveConfig">
<div class="mb-3">
<label for="apiUri" class="form-label">API URI</label>
<input
type="text"
class="form-control"
id="apiUri"
v-model="formData.apiUri"
placeholder="http://your-pvc-api:7370/api/v1"
required
>
</div>
<div>
<!-- Overlay that captures clicks outside the panel -->
<div
v-if="modelValue"
class="config-overlay"
@click="closePanel"
></div>
<div class="mb-3">
<label for="apiKey" class="form-label">API Key</label>
<input
type="password"
class="form-control"
id="apiKey"
v-model="formData.apiKey"
placeholder="Your API key"
required
>
</div>
<div class="config-panel" :class="{ 'open': modelValue }">
<div class="config-content" @click.stop>
<h3>Configuration</h3>
<form @submit.prevent="saveConfig">
<div class="mb-3">
<label for="apiUri" class="form-label">API URI</label>
<input
type="text"
class="form-control"
id="apiUri"
v-model="formData.apiUri"
placeholder="http://your-pvc-api:7370/api/v1"
required
>
</div>
<div class="mb-3">
<label for="updateInterval" class="form-label">Update Interval (ms)</label>
<input
type="number"
class="form-control"
id="updateInterval"
v-model="formData.updateInterval"
min="1000"
step="1000"
required
>
</div>
<div class="mb-3">
<label for="apiKey" class="form-label">API Key</label>
<input
type="password"
class="form-control"
id="apiKey"
v-model="formData.apiKey"
placeholder="Your API key"
required
>
</div>
<div class="d-grid gap-2">
<button type="submit" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-secondary" @click="closePanel">Cancel</button>
</div>
</form>
<div class="mb-3">
<label for="updateInterval" class="form-label">Update Interval (ms)</label>
<input
type="number"
class="form-control"
id="updateInterval"
v-model="formData.updateInterval"
min="1000"
step="1000"
required
>
</div>
<div class="d-grid gap-2">
<button type="submit" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-secondary" @click="closePanel">Cancel</button>
</div>
</form>
</div>
</div>
</div>
</template>
@ -81,6 +90,16 @@ const closePanel = () => {
</script>
<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 {
position: fixed;
top: 0;