This commit is contained in:
syuilo 2023-03-03 08:48:52 +09:00
parent 187a698d54
commit cf8a7f93d5
6 changed files with 27 additions and 4 deletions

View file

@ -23,7 +23,7 @@
<button v-if="closeButton" v-tooltip="i18n.ts.close" class="_button" :class="$style.headerButton" @click="close()"><i class="ti ti-x"></i></button> <button v-if="closeButton" v-tooltip="i18n.ts.close" class="_button" :class="$style.headerButton" @click="close()"><i class="ti ti-x"></i></button>
</span> </span>
</div> </div>
<div :class="$style.content"> <div v-container :class="$style.content">
<slot></slot> <slot></slot>
</div> </div>
</div> </div>

View file

@ -0,0 +1,21 @@
import { Directive } from 'vue';
const map = new WeakMap<HTMLElement, ResizeObserver>();
export default {
mounted(el: HTMLElement, binding, vn) {
const ro = new ResizeObserver((entries, observer) => {
el.style.setProperty('--containerHeight', el.offsetHeight + 'px');
});
ro.observe(el);
map.set(el, ro);
},
unmounted(el, binding, vn) {
const ro = map.get(el);
if (ro) {
ro.disconnect();
map.delete(el);
}
},
} as Directive;

View file

@ -11,6 +11,7 @@ import clickAnime from './click-anime';
import panel from './panel'; import panel from './panel';
import adaptiveBorder from './adaptive-border'; import adaptiveBorder from './adaptive-border';
import adaptiveBg from './adaptive-bg'; import adaptiveBg from './adaptive-bg';
import container from './container';
export default function(app: App) { export default function(app: App) {
app.directive('userPreview', userPreview); app.directive('userPreview', userPreview);
@ -25,4 +26,5 @@ export default function(app: App) {
app.directive('panel', panel); app.directive('panel', panel);
app.directive('adaptive-border', adaptiveBorder); app.directive('adaptive-border', adaptiveBorder);
app.directive('adaptive-bg', adaptiveBg); app.directive('adaptive-bg', adaptiveBg);
app.directive('container', container);
} }

View file

@ -128,7 +128,7 @@ definePageMetadata(computed(() => list ? {
<style lang="scss" module> <style lang="scss" module>
.main { .main {
min-height: calc(100vh - (var(--stickyTop, 0px) + var(--stickyBottom, 0px))); min-height: calc(var(--containerHeight) - (var(--stickyTop, 0px) + var(--stickyBottom, 0px)));
} }
.userItem { .userItem {

View file

@ -22,7 +22,7 @@
<span :class="$style.title"><slot name="header"></slot></span> <span :class="$style.title"><slot name="header"></slot></span>
<button v-tooltip="i18n.ts.settings" :class="$style.menu" class="_button" @click.stop="showSettingsMenu"><i class="ti ti-dots"></i></button> <button v-tooltip="i18n.ts.settings" :class="$style.menu" class="_button" @click.stop="showSettingsMenu"><i class="ti ti-dots"></i></button>
</header> </header>
<div v-show="active" ref="body" :class="$style.body"> <div v-show="active" ref="body" v-container :class="$style.body">
<slot></slot> <slot></slot>
</div> </div>
</section> </section>

View file

@ -2,7 +2,7 @@
<div :class="[$style.root, { [$style.withWallpaper]: wallpaper }]"> <div :class="[$style.root, { [$style.withWallpaper]: wallpaper }]">
<XSidebar v-if="!isMobile" :class="$style.sidebar"/> <XSidebar v-if="!isMobile" :class="$style.sidebar"/>
<MkStickyContainer :class="$style.contents"> <MkStickyContainer v-container :class="$style.contents">
<template #header><XStatusBars :class="$style.statusbars"/></template> <template #header><XStatusBars :class="$style.statusbars"/></template>
<main style="min-width: 0;" :style="{ background: pageMetadata?.value?.bg }" @contextmenu.stop="onContextmenu"> <main style="min-width: 0;" :style="{ background: pageMetadata?.value?.bg }" @contextmenu.stop="onContextmenu">
<div :class="$style.content" style="container-type: inline-size;"> <div :class="$style.content" style="container-type: inline-size;">