🎨

packages/frontend/src/directives/container.ts

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

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