mirror/cherrypick
1
1
Fork 0
mirror of https://github.com/kokonect-link/cherrypick synced 2024-12-01 08:18:45 +09:00
Code

enhance(client): tweak MkFolder component

Browse Source
This commit is contained in:
syuilo 2023-03-05 20:28:27 +09:00
parent aa01ba7cce
commit f8ab34734c
1 changed files with 48 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
packages/frontend/src/components/MkFolder.vue
View File

@ -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);