nucleo000/radiusNucleo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: Usar DropdownMenu de radix-vue para menú de configuración
All checks were successful
build-and-deploy / build-and-deploy (push) Successful in 26s
Details

Browse Source 
- Reemplaza dropdown manual por componente DropdownMenu con radix-vue
- Agrega avoid-collisions y collision-padding para posicionamiento automático
- El menú ahora se ajusta automáticamente cuando no hay espacio horizontal
- Actualiza DropdownMenuItem para soportar prop 'as' y 'href' para enlaces
This commit is contained in:
josedario87
2025-11-25 01:17:39 -06:00
parent 2d1c2b1df3
commit 6639c93cfe
3 changed files with 41 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
frontend/src/App.vue
View File

@@ -1,6 +1,6 @@
<script setup>
import { onMounted, reactive, ref, computed, watch } from 'vue';
import { Button, Badge, Input, Card, CardHeader, CardTitle, CardActions, CardContent, Textarea } from '@/components/ui';
import { Button, Badge, Input, Card, CardHeader, CardTitle, CardActions, CardContent, Textarea, DropdownMenu, DropdownMenuItem, DropdownMenuSeparator } from '@/components/ui';
import EventCard from '@/components/EventCard.vue';
import UserCard from '@/components/UserCard.vue';
import DispositivoCard from '@/components/DispositivoCard.vue';
@@ -45,7 +45,6 @@ const mainCollapsed = ref(false);
const layoutMode = ref('user');
const theme = ref(localStorage.getItem('theme') || 'dark');
const statusText = ref('OK');
const showSettingsMenu = ref(false);
const showInfoModal = ref(false);
async function fetchUsers() {
@@ -305,13 +304,12 @@ function openAddGuest() {
userFormModel.value = { username:'', password:'', vlan:'5', disabled:false, etiquetas: ['invitado'] };
showUserForm.value = true;
}
function toggleSettingsMenu() { showSettingsMenu.value = !showSettingsMenu.value; }
const showRawDb = ref(false);
const rawDbFullscreen = ref(false);
function openRawDb() { showSettingsMenu.value = false; showRawDb.value = true; }
function openRawDb() { showRawDb.value = true; }
function closeRawDb() { showRawDb.value = false; }
const showVlan = ref(false);
function openVlanForm() { showSettingsMenu.value = false; showVlan.value = true; }
function openVlanForm() { showVlan.value = true; }
function closeVlan() { showVlan.value = false; }
function onVlanCreated() { showVlan.value = false; }
const showDevice = ref(false);
@@ -426,22 +424,23 @@ async function handleUserFormSubmit(data) {
<img class="size-4 opacity-90" src="/icons/guest.svg" alt="invitado"> Invitado
</Button>
<UserDropdown />
<div class="relative">
<Button @click="toggleSettingsMenu">
<img class="size-4 opacity-90" src="/icons/settings.svg" alt="config"> Configuración
</Button>
<div v-if="showSettingsMenu" class="absolute right-0 top-full mt-1.5 glass-card p-1.5 min-w-[200px] shadow-lg border border-pink-200 dark:border-pink-600/50 z-50 space-y-1">
<Button variant="ghost" class="w-full justify-start" @click="openRawDb">ver rawDB</Button>
<Button variant="ghost" class="w-full justify-start" @click="openVlanForm">crear VLAN</Button>
<hr class="border-border my-1" />
<Button as="a" variant="ghost" class="w-full justify-start" href="/api/users.csv">Exportar usuarios CSV</Button>
<Button as="a" variant="ghost" class="w-full justify-start" href="/api/devices.csv">Exportar dispositivos CSV</Button>
<Button as="a" variant="ghost" class="w-full justify-start" href="/api/vlans.csv">Exportar VLANs CSV</Button>
<Button variant="ghost" class="w-full justify-start" @click="openImport('users')">Importar usuarios CSV</Button>
<Button variant="ghost" class="w-full justify-start" @click="openImport('devices')">Importar dispositivos CSV</Button>
<Button variant="ghost" class="w-full justify-start" @click="openImport('vlans')">Importar VLANs CSV</Button>
</div>
</div>
<DropdownMenu align="end">
<template #trigger>
<Button>
<img class="size-4 opacity-90" src="/icons/settings.svg" alt="config"> Configuración
</Button>
</template>
<DropdownMenuItem @click="openRawDb">ver rawDB</DropdownMenuItem>
<DropdownMenuItem @click="openVlanForm">crear VLAN</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem as="a" href="/api/users.csv">Exportar usuarios CSV</DropdownMenuItem>
<DropdownMenuItem as="a" href="/api/devices.csv">Exportar dispositivos CSV</DropdownMenuItem>
<DropdownMenuItem as="a" href="/api/vlans.csv">Exportar VLANs CSV</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem @click="openImport('users')">Importar usuarios CSV</DropdownMenuItem>
<DropdownMenuItem @click="openImport('devices')">Importar dispositivos CSV</DropdownMenuItem>
<DropdownMenuItem @click="openImport('vlans')">Importar VLANs CSV</DropdownMenuItem>
</DropdownMenu>
</div>
</header>