diff --git a/packages/frontend/src/components/MkWindow.vue b/packages/frontend/src/components/MkWindow.vue index f7565ca59f..e7ad2b9a43 100644 --- a/packages/frontend/src/components/MkWindow.vue +++ b/packages/frontend/src/components/MkWindow.vue @@ -23,7 +23,7 @@ -
+
diff --git a/packages/frontend/src/directives/container.ts b/packages/frontend/src/directives/container.ts new file mode 100644 index 0000000000..a8a93eb9be --- /dev/null +++ b/packages/frontend/src/directives/container.ts @@ -0,0 +1,21 @@ +import { Directive } from 'vue'; + +const map = new WeakMap(); + +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; diff --git a/packages/frontend/src/directives/index.ts b/packages/frontend/src/directives/index.ts index a690fd6c42..854f0a544e 100644 --- a/packages/frontend/src/directives/index.ts +++ b/packages/frontend/src/directives/index.ts @@ -11,6 +11,7 @@ import clickAnime from './click-anime'; import panel from './panel'; import adaptiveBorder from './adaptive-border'; import adaptiveBg from './adaptive-bg'; +import container from './container'; export default function(app: App) { app.directive('userPreview', userPreview); @@ -25,4 +26,5 @@ export default function(app: App) { app.directive('panel', panel); app.directive('adaptive-border', adaptiveBorder); app.directive('adaptive-bg', adaptiveBg); + app.directive('container', container); } diff --git a/packages/frontend/src/pages/my-lists/list.vue b/packages/frontend/src/pages/my-lists/list.vue index 037d00d8ff..205434971d 100644 --- a/packages/frontend/src/pages/my-lists/list.vue +++ b/packages/frontend/src/pages/my-lists/list.vue @@ -128,7 +128,7 @@ definePageMetadata(computed(() => list ? {