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