enhance(client): tweak MkFolder component
This commit is contained in:
parent
aa01ba7cce
commit
f8ab34734c
|
@ -1,41 +1,46 @@
|
||||||
<template>
|
<template>
|
||||||
<div ref="rootEl" :class="[$style.root, { [$style.opened]: opened }]">
|
<div ref="rootEl" :class="$style.root">
|
||||||
<div :class="$style.header" class="_button" @click="toggle">
|
<MkStickyContainer>
|
||||||
<div :class="$style.headerIcon"><slot name="icon"></slot></div>
|
<template #header>
|
||||||
<div :class="$style.headerText">
|
<div :class="[$style.header, { [$style.opened]: opened }]" class="_button" @click="toggle">
|
||||||
<div :class="$style.headerTextMain">
|
<div :class="$style.headerIcon"><slot name="icon"></slot></div>
|
||||||
<slot name="label"></slot>
|
<div :class="$style.headerText">
|
||||||
</div>
|
<div :class="$style.headerTextMain">
|
||||||
<div :class="$style.headerTextSub">
|
<slot name="label"></slot>
|
||||||
<slot name="caption"></slot>
|
</div>
|
||||||
</div>
|
<div :class="$style.headerTextSub">
|
||||||
</div>
|
<slot name="caption"></slot>
|
||||||
<div :class="$style.headerRight">
|
</div>
|
||||||
<span :class="$style.headerRightText"><slot name="suffix"></slot></span>
|
|
||||||
<i v-if="opened" class="ti ti-chevron-up icon"></i>
|
|
||||||
<i v-else class="ti ti-chevron-down icon"></i>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-if="openedAtLeastOnce" :class="[$style.body, { [$style.bgSame]: bgSame }]" :style="{ maxHeight: maxHeight ? `${maxHeight}px` : null }">
|
|
||||||
<Transition
|
|
||||||
:enter-active-class="$store.state.animation ? $style.transition_toggle_enterActive : ''"
|
|
||||||
:leave-active-class="$store.state.animation ? $style.transition_toggle_leaveActive : ''"
|
|
||||||
:enter-from-class="$store.state.animation ? $style.transition_toggle_enterFrom : ''"
|
|
||||||
:leave-to-class="$store.state.animation ? $style.transition_toggle_leaveTo : ''"
|
|
||||||
@enter="enter"
|
|
||||||
@after-enter="afterEnter"
|
|
||||||
@leave="leave"
|
|
||||||
@after-leave="afterLeave"
|
|
||||||
>
|
|
||||||
<KeepAlive>
|
|
||||||
<div v-show="opened">
|
|
||||||
<MkSpacer :margin-min="14" :margin-max="22">
|
|
||||||
<slot></slot>
|
|
||||||
</MkSpacer>
|
|
||||||
</div>
|
</div>
|
||||||
</KeepAlive>
|
<div :class="$style.headerRight">
|
||||||
</Transition>
|
<span :class="$style.headerRightText"><slot name="suffix"></slot></span>
|
||||||
</div>
|
<i v-if="opened" class="ti ti-chevron-up icon"></i>
|
||||||
|
<i v-else class="ti ti-chevron-down icon"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<div v-if="openedAtLeastOnce" :class="[$style.body, { [$style.bgSame]: bgSame }]" :style="{ maxHeight: maxHeight ? `${maxHeight}px` : null, overflow: maxHeight ? `auto` : null }">
|
||||||
|
<Transition
|
||||||
|
:enter-active-class="$store.state.animation ? $style.transition_toggle_enterActive : ''"
|
||||||
|
:leave-active-class="$store.state.animation ? $style.transition_toggle_leaveActive : ''"
|
||||||
|
:enter-from-class="$store.state.animation ? $style.transition_toggle_enterFrom : ''"
|
||||||
|
:leave-to-class="$store.state.animation ? $style.transition_toggle_leaveTo : ''"
|
||||||
|
@enter="enter"
|
||||||
|
@after-enter="afterEnter"
|
||||||
|
@leave="leave"
|
||||||
|
@after-leave="afterLeave"
|
||||||
|
>
|
||||||
|
<KeepAlive>
|
||||||
|
<div v-show="opened">
|
||||||
|
<MkSpacer :margin-min="14" :margin-max="22">
|
||||||
|
<slot></slot>
|
||||||
|
</MkSpacer>
|
||||||
|
</div>
|
||||||
|
</KeepAlive>
|
||||||
|
</Transition>
|
||||||
|
</div>
|
||||||
|
</MkStickyContainer>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -117,12 +122,6 @@ onMounted(() => {
|
||||||
|
|
||||||
.root {
|
.root {
|
||||||
display: block;
|
display: block;
|
||||||
|
|
||||||
&.opened {
|
|
||||||
> .header {
|
|
||||||
border-radius: 6px 6px 0 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
|
@ -132,6 +131,8 @@ onMounted(() => {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding: 9px 12px 9px 12px;
|
padding: 9px 12px 9px 12px;
|
||||||
background: var(--buttonBg);
|
background: var(--buttonBg);
|
||||||
|
-webkit-backdrop-filter: var(--blur, blur(15px));
|
||||||
|
backdrop-filter: var(--blur, blur(15px));
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
transition: border-radius 0.3s;
|
transition: border-radius 0.3s;
|
||||||
|
|
||||||
|
@ -144,6 +145,10 @@ onMounted(() => {
|
||||||
color: var(--accent);
|
color: var(--accent);
|
||||||
background: var(--buttonHoverBg);
|
background: var(--buttonHoverBg);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.opened {
|
||||||
|
border-radius: 6px 6px 0 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.headerUpper {
|
.headerUpper {
|
||||||
|
@ -153,7 +158,7 @@ onMounted(() => {
|
||||||
|
|
||||||
.headerLower {
|
.headerLower {
|
||||||
color: var(--fgTransparentWeak);
|
color: var(--fgTransparentWeak);
|
||||||
font-size: .85em;
|
font-size: .85em;
|
||||||
padding-left: 4px;
|
padding-left: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -202,7 +207,6 @@ onMounted(() => {
|
||||||
background: var(--panel);
|
background: var(--panel);
|
||||||
border-radius: 0 0 6px 6px;
|
border-radius: 0 0 6px 6px;
|
||||||
container-type: inline-size;
|
container-type: inline-size;
|
||||||
overflow: auto;
|
|
||||||
|
|
||||||
&.bgSame {
|
&.bgSame {
|
||||||
background: var(--bg);
|
background: var(--bg);
|
||||||
|
|
Loading…
Reference in New Issue