diff options
Diffstat (limited to 'packages/frontend/src/components')
| -rw-r--r-- | packages/frontend/src/components/MkContainer.vue | 200 |
1 files changed, 91 insertions, 109 deletions
diff --git a/packages/frontend/src/components/MkContainer.vue b/packages/frontend/src/components/MkContainer.vue index 962bcaf7e9..0f450e0abc 100644 --- a/packages/frontend/src/components/MkContainer.vue +++ b/packages/frontend/src/components/MkContainer.vue @@ -1,26 +1,32 @@ <template> -<div class="ukygtjoj _panel" :class="{ naked, thin, hideHeader: !showHeader, scrollable, closed: !showBody }"> - <header v-if="showHeader" ref="header"> - <div class="title"><slot name="header"></slot></div> - <div class="sub"> - <slot name="func"></slot> - <button v-if="foldable" class="_button" @click="() => showBody = !showBody"> +<div class="_panel" :class="[$style.root, { [$style.naked]: naked, [$style.thin]: thin, [$style.hideHeader]: !showHeader, [$style.scrollable]: scrollable, [$style.closed]: !showBody }]"> + <header v-if="showHeader" ref="header" :class="$style.header"> + <div :class="$style.title"> + <span :class="$style.titleIcon"><slot name="icon"></slot></span> + <slot name="header"></slot> + </div> + <div :class="$style.headerSub"> + <slot name="func" :button-style-class="$style.headerButton"></slot> + <button v-if="foldable" :class="$style.headerButton" class="_button" @click="() => showBody = !showBody"> <template v-if="showBody"><i class="ti ti-chevron-up"></i></template> <template v-else><i class="ti ti-chevron-down"></i></template> </button> </div> </header> <Transition - :name="$store.state.animation ? 'container-toggle' : ''" + :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" > - <div v-show="showBody" ref="content" class="content" :class="{ omitted }"> + <div v-show="showBody" ref="content" :class="[$style.content, { omitted }]"> <slot></slot> - <button v-if="omitted" class="fade _button" @click="() => { ignoreOmit = true; omitted = false; }"> - <span>{{ $ts.showMore }}</span> + <button v-if="omitted" :class="$style.fade" class="_button" @click="() => { ignoreOmit = true; omitted = false; }"> + <span :class="$style.fadeLabel">{{ $ts.showMore }}</span> </button> </div> </Transition> @@ -129,19 +135,18 @@ export default defineComponent({ }); </script> -<style lang="scss" scoped> -.container-toggle-enter-active, .container-toggle-leave-active { +<style lang="scss" module> +.transition_toggle_enterActive, +.transition_toggle_leaveActive { overflow-y: clip; transition: opacity 0.5s, height 0.5s !important; } -.container-toggle-enter-from { - opacity: 0; -} -.container-toggle-leave-to { +.transition_toggle_enterFrom, +.transition_toggle_leaveTo { opacity: 0; } -.ukygtjoj { +.root { position: relative; overflow: clip; contain: content; @@ -160,116 +165,93 @@ export default defineComponent({ } } - > header { - position: sticky; - top: var(--stickyTop, 0px); - left: 0; - color: var(--panelHeaderFg); - background: var(--panelHeaderBg); - border-bottom: solid 0.5px var(--panelHeaderDivider); - z-index: 2; - line-height: 1.4em; - - > .title { - margin: 0; - padding: 12px 16px; - - > ::v-deep(i) { - margin-right: 6px; - } - - &:empty { - display: none; + &.thin { + > .header { + > .title { + padding: 8px 10px; + font-size: 0.9em; } } + } +} - > .sub { - position: absolute; - z-index: 2; - top: 0; - right: 0; - height: 100%; +.header { + position: sticky; + top: var(--stickyTop, 0px); + left: 0; + color: var(--panelHeaderFg); + background: var(--panelHeaderBg); + border-bottom: solid 0.5px var(--panelHeaderDivider); + z-index: 2; + line-height: 1.4em; +} - > ::v-deep(button) { - width: 42px; - height: 100%; - } - } - } +.title { + margin: 0; + padding: 12px 16px; - > .content { - --stickyTop: 0px; + &:empty { + display: none; + } +} - &.omitted { - position: relative; - max-height: var(--maxHeight); - overflow: hidden; +.titleIcon { + margin-right: 6px; +} - > .fade { - display: block; - position: absolute; - z-index: 10; - bottom: 0; - left: 0; - width: 100%; - height: 64px; - background: linear-gradient(0deg, var(--panel), var(--X15)); +.headerSub { + position: absolute; + z-index: 2; + top: 0; + right: 0; + height: 100%; +} - > span { - display: inline-block; - background: var(--panel); - padding: 6px 10px; - font-size: 0.8em; - border-radius: 999px; - box-shadow: 0 2px 6px rgb(0 0 0 / 20%); - } +.headerButton { + width: 42px; + height: 100%; +} - &:hover { - > span { - background: var(--panelHighlight); - } - } - } - } - } +.content { + --stickyTop: 0px; - &.thin { - > header { - > .title { - padding: 8px 10px; - font-size: 0.9em; - } - } + &.omitted { + position: relative; + max-height: var(--maxHeight); + overflow: hidden; - > .content { - } - } -} + > .fade { + display: block; + position: absolute; + z-index: 10; + bottom: 0; + left: 0; + width: 100%; + height: 64px; + background: linear-gradient(0deg, var(--panel), var(--X15)); -@container (max-width: 380px) { - .ukygtjoj { - > header { - > .title { - padding: 8px 10px; - font-size: 0.9em; + > .fadeLabel { + display: inline-block; + background: var(--panel); + padding: 6px 10px; + font-size: 0.8em; + border-radius: 999px; + box-shadow: 0 2px 6px rgb(0 0 0 / 20%); } - } - } -} -._forceContainerFull_ .ukygtjoj { - > header { - > .title { - padding: 12px 16px !important; + &:hover { + > .fadeLabel { + background: var(--panelHighlight); + } + } } } } -._forceContainerFull_.ukygtjoj { - > header { - > .title { - padding: 12px 16px !important; - } +@container (max-width: 380px) { + .title { + padding: 8px 10px; + font-size: 0.9em; } } </style> |