Gava/agenciapsilmno
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

+ Menu Hover no Layout Rail, Twilio, Sms, Email, Templates, LNovo Layout Configurações

Browse Source
This commit is contained in:
Leonardo
2026-03-25 08:39:45 -03:00
parent 53a4980396
commit 3f1786c9bf
59 changed files with 2553 additions and 1106 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layout/AppConfigurator.vue
+34 -3
View File
@@ -15,11 +15,22 @@
|--------------------------------------------------------------------------
-->
<script setup>
import { computed, inject } from 'vue';
import { computed, inject, onMounted, onBeforeUnmount, ref } from 'vue';
import { useLayout } from '@/layout/composables/layout';
import { useConfiguratorBar } from '@/layout/composables/useConfiguratorBar';
import { primaryColors, surfaces, presetOptions, applyThemeEngine } from '@/theme/theme.options';
const { layoutConfig, isDarkTheme, changeMenuMode, setVariant } = useLayout();
const { layoutConfig, isDarkTheme, changeMenuMode, setVariant, setRailOpenMode } = useLayout();
const { open, close } = useConfiguratorBar();
// ── Fechar ao clicar fora ────────────────────────────────────
const panelEl = ref(null);
function onDocClick(e) {
if (!open.value) return;
if (!panelEl.value?.contains(e.target)) close();
}
onMounted(() => document.addEventListener('mousedown', onDocClick, true));
onBeforeUnmount(() => document.removeEventListener('mousedown', onDocClick, true));
// ✅ vem do AppTopbar (mesma instância)
const queuePatch = inject('queueUserSettingsPatch', null);
@@ -74,8 +85,11 @@ function updateColors(type, item) {
</script>
<template>
<Teleport to="body">
<div
class="config-panel hidden absolute top-[3.25rem] right-0 w-64 p-4 bg-surface-0 dark:bg-surface-900 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)]"
v-if="open"
ref="panelEl"
class="config-panel fixed bottom-18 left-18 w-64 p-4 bg-surface-0 dark:bg-surface-900 border border-surface rounded-border origin-bottom-left shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)] z-2000"
>
<div class="flex flex-col gap-4">
<div>
@@ -122,6 +136,22 @@ function updateColors(type, item) {
<SelectButton v-model="menuModeModel" :options="menuModeOptions" :allowEmpty="false" optionLabel="label" optionValue="value" />
</div>
<!-- Abrir Menu: visível apenas no Layout Rail -->
<div v-show="layoutConfig.variant === 'rail'" class="flex flex-col gap-1">
<span class="text-sm text-muted-color font-semibold">Abrir Menu</span>
<div class="flex flex-col gap-1">
<button type="button" class="layout-option" :class="{ 'layout-option--active': layoutConfig.railOpenMode === 'hover' }" @click="setRailOpenMode('hover')">
<i :class="layoutConfig.railOpenMode === 'hover' ? 'pi pi-check-circle' : 'pi pi-circle'" class="layout-option__icon" />
<span class="layout-option__label">Mouse Hover</span>
<span v-if="layoutConfig.railOpenMode === 'hover'" class="layout-option__badge layout-option__badge--default">Padrão</span>
</button>
<button type="button" class="layout-option" :class="{ 'layout-option--active': layoutConfig.railOpenMode === 'click' }" @click="setRailOpenMode('click')">
<i :class="layoutConfig.railOpenMode === 'click' ? 'pi pi-check-circle' : 'pi pi-circle'" class="layout-option__icon" />
<span class="layout-option__label">Com Clique</span>
</button>
</div>
</div>
<div class="flex flex-col gap-2">
<span class="text-sm text-muted-color font-semibold">Layout</span>
<div class="flex flex-col gap-1">
@@ -141,6 +171,7 @@ function updateColors(type, item) {
</div>
</div>
</div>
</Teleport>
</template>
<style scoped>