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

MelissaConfiguracoes: accordion enxuto pra tirar o lag

Browse Source 
Continua usando o <Accordion> do PrimeVue, mas DOM/CSS bem mais leves:

- Header: icone inline + label + badge (era icone 36x36 caixa
  centralizada + label + desc 2-linhas + badge)
- Sub-itens: botao denso 1-linha (icone + label, desc vai pro
  title="" como tooltip nativo)
- Removidas transitions de box-shadow e color-mix nos hovers
  (eram custosas com o backdrop-filter blur do parent)
- Removidas as line-clamp 2-linhas em cada item (~30 itens
  abertos = ~30 layouts caros)
- Hover/active dos sub-itens com color-mix(--p-primary-color),
  alinhado com o padrao do MelissaMenu (.mm-foot-item)
- Padding compactado, gap entre items 1px (era 6px)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Leonardo
2026-05-06 14:49:38 -03:00
parent e912558769
commit a0948919ef
1 changed files with 55 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layout/melissa/MelissaConfiguracoes.vue
+55 -105
View File
@@ -349,13 +349,8 @@ function resetCores() {
<AccordionPanel v-for="g in grupos" :key="g.key" :value="g.key">
<AccordionHeader>
<div class="mcfg-grp-head">
<div class="mcfg-grp-icon">
<i :class="g.icon" />
</div>
<div class="mcfg-grp-text">
<span class="mcfg-grp-label">{{ g.label }}</span>
<span class="mcfg-grp-desc">{{ g.desc }}</span>
</div>
<i :class="g.icon" class="mcfg-grp-icon" />
<span class="mcfg-grp-label">{{ g.label }}</span>
<span class="mcfg-grp-badge">{{ g.items.length }}</span>
</div>
</AccordionHeader>
@@ -367,15 +362,11 @@ function resetCores() {
type="button"
class="mcfg-nav-item"
:class="{ 'is-active': secaoAtiva === s.key }"
:title="s.desc"
@click="selecionar(s)"
>
<div class="mcfg-nav-item__icon">
<i :class="s.icon" />
</div>
<div class="mcfg-nav-item__text">
<span class="mcfg-nav-item__label">{{ s.label }}</span>
<span class="mcfg-nav-item__desc">{{ s.desc }}</span>
</div>
<i :class="s.icon" class="mcfg-nav-item__icon" />
<span class="mcfg-nav-item__label">{{ s.label }}</span>
</button>
</div>
</AccordionContent>
@@ -714,46 +705,38 @@ function resetCores() {
.mcfg-side::-webkit-scrollbar { width: 5px; }
.mcfg-side::-webkit-scrollbar-thumb { background: var(--m-border-strong); border-radius: 3px; }
/* Accordion — neutralizando cores do PrimeVue pra tema Melissa */
.mcfg-accordion :deep(.p-accordion) {
display: flex;
flex-direction: column;
gap: 2px;
background: transparent;
}
/* Accordion — usando o componente do PrimeVue, neutralizando cores
pra tema Melissa. Estilo enxuto pra evitar lag (sem transitions
de box-shadow/color-mix, sem line-clamp em cada item). */
.mcfg-accordion :deep(.p-accordionpanel) {
border: none;
background: transparent;
}
.mcfg-accordion :deep(.p-accordionheader) {
padding: 8px;
padding: 6px 8px;
background: transparent;
border: none;
color: var(--m-text);
border-radius: 9px;
transition: background-color 140ms ease;
min-height: 56px;
border-radius: 8px;
}
.mcfg-accordion :deep(.p-accordionheader:hover) {
background: var(--m-bg-soft-hover);
}
.mcfg-accordion :deep(.p-accordionheader-toggle-icon) {
color: var(--m-text-muted);
font-size: 0.7rem;
margin-left: 4px;
transition: transform 200ms ease;
font-size: 0.72rem;
}
.mcfg-accordion :deep(.p-accordioncontent) {
border: none;
.mcfg-accordion :deep(.p-accordioncontent),
.mcfg-accordion :deep(.p-accordioncontent-content) {
padding: 0;
background: transparent;
border: none;
}
.mcfg-accordion :deep(.p-accordioncontent-content) {
padding: 4px 4px 6px;
background: transparent;
border: none;
padding: 2px 0 6px;
}
/* Header de grupo — ícone + label/desc + badge contador */
/* Header de grupo — icone inline + label + badge */
.mcfg-grp-head {
display: flex;
align-items: center;
@@ -762,119 +745,86 @@ function resetCores() {
min-width: 0;
}
.mcfg-grp-icon {
width: 36px; height: 36px;
display: grid; place-items: center;
background: var(--m-accent-soft);
color: var(--m-accent);
border-radius: 9px;
width: 16px;
text-align: center;
color: var(--p-primary-color);
font-size: 0.92rem;
flex-shrink: 0;
transition: box-shadow 140ms ease;
}
.mcfg-grp-icon > i { font-size: 0.92rem; }
.mcfg-accordion :deep(.p-accordionheader:hover) .mcfg-grp-icon {
box-shadow: 0 0 0 2px color-mix(in srgb, var(--m-accent) 28%, transparent);
}
.mcfg-grp-text {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 1px;
text-align: left;
}
.mcfg-grp-label {
flex: 1;
min-width: 0;
font-size: 0.86rem;
font-weight: 600;
color: var(--m-text);
line-height: 1.25;
}
.mcfg-grp-desc {
font-size: 0.72rem;
color: var(--m-text-muted);
line-height: 1.3;
text-align: left;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
white-space: nowrap;
}
.mcfg-grp-badge {
flex-shrink: 0;
min-width: 22px;
height: 22px;
padding: 0 7px;
min-width: 20px;
height: 18px;
padding: 0 6px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--m-bg-medium);
border: 1px solid var(--m-border);
color: var(--m-text-muted);
font-size: 0.68rem;
font-size: 0.66rem;
font-weight: 700;
border-radius: 999px;
}
/* Cards de sub-itens dentro do grupo */
/* Sub-itens — botao linha unica, denso */
.mcfg-nav-list {
display: flex;
flex-direction: column;
gap: 6px;
padding-left: 14px;
padding-right: 2px;
gap: 1px;
padding-left: 22px;
padding-right: 4px;
}
.mcfg-nav-item {
display: flex;
align-items: flex-start;
align-items: center;
gap: 10px;
padding: 10px;
background: var(--m-bg-medium);
border: 1px solid var(--m-border);
border-radius: 10px;
padding: 7px 10px;
background: transparent;
border: none;
border-radius: 7px;
color: var(--m-text);
cursor: pointer;
text-align: left;
font-family: inherit;
transition: background-color 140ms ease, border-color 140ms ease;
font-size: 0.84rem;
width: 100%;
}
.mcfg-nav-item:hover {
background: var(--m-bg-soft-hover);
border-color: var(--m-border-strong);
background: color-mix(in srgb, var(--p-primary-color) 12%, transparent);
color: var(--p-primary-color);
}
.mcfg-nav-item:hover .mcfg-nav-item__icon { color: var(--p-primary-color); }
.mcfg-nav-item.is-active {
background: var(--m-accent-soft);
border-color: color-mix(in srgb, var(--m-accent) 55%, transparent);
background: color-mix(in srgb, var(--p-primary-color) 16%, transparent);
color: var(--p-primary-color);
}
.mcfg-nav-item.is-active .mcfg-nav-item__icon { color: var(--p-primary-color); }
.mcfg-nav-item__icon {
width: 32px; height: 32px;
display: grid; place-items: center;
background: var(--m-bg-soft);
width: 16px;
text-align: center;
color: var(--m-text-muted);
border-radius: 9px;
font-size: 0.82rem;
flex-shrink: 0;
transition: background-color 140ms ease, color 140ms ease;
}
.mcfg-nav-item.is-active .mcfg-nav-item__icon {
background: color-mix(in srgb, var(--m-accent) 22%, transparent);
color: var(--m-accent);
}
.mcfg-nav-item__icon > i { font-size: 0.82rem; }
.mcfg-nav-item__text {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.mcfg-nav-item__label {
font-size: 0.84rem;
font-weight: 600;
line-height: 1.2;
}
.mcfg-nav-item.is-active .mcfg-nav-item__label { color: var(--m-accent); }
.mcfg-nav-item__desc {
font-size: 0.7rem;
color: var(--m-text-muted);
line-height: 1.3;
flex: 1;
min-width: 0;
font-weight: 500;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ═════ COL 2: Main ═════ */