From 7a3c35c5c6cfc2991c9a7b22f353d72302603146 Mon Sep 17 00:00:00 2001
From: Francis Dinh <normandy@biribiri.dev>
Date: Mon, 19 Sep 2022 18:19:31 -0400
Subject: [PATCH 1/3] client: refactor container.vue to composition api

---
 .../client/src/components/ui/container.vue    | 172 ++++++++----------
 1 file changed, 74 insertions(+), 98 deletions(-)

diff --git a/packages/client/src/components/ui/container.vue b/packages/client/src/components/ui/container.vue
index 13104a543..e6fc05a81 100644
--- a/packages/client/src/components/ui/container.vue
+++ b/packages/client/src/components/ui/container.vue
@@ -1,5 +1,5 @@
 <template>
-<div v-size="{ max: [380] }" class="ukygtjoj _panel" :class="{ naked, thin, hideHeader: !showHeader, scrollable, closed: !showBody }">
+<div ref="containerEl" v-size="{ max: [380] }" 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">
@@ -13,9 +13,9 @@
 	<transition
 		:name="$store.state.animation ? 'container-toggle' : ''"
 		@enter="enter"
-		@after-enter="afterEnter"
+		@after-enter="removeHeight"
 		@leave="leave"
-		@after-leave="afterLeave"
+		@after-leave="removeHeight"
 	>
 		<div v-show="showBody" ref="content" class="content" :class="{ omitted }">
 			<slot></slot>
@@ -27,107 +27,86 @@
 </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { onMounted, watch } from 'vue';
 import { i18n } from '@/i18n';
 
-export default defineComponent({
-	props: {
-		showHeader: {
-			type: Boolean,
-			required: false,
-			default: true,
-		},
-		thin: {
-			type: Boolean,
-			required: false,
-			default: false,
-		},
-		naked: {
-			type: Boolean,
-			required: false,
-			default: false,
-		},
-		foldable: {
-			type: Boolean,
-			required: false,
-			default: false,
-		},
-		expanded: {
-			type: Boolean,
-			required: false,
-			default: true,
-		},
-		scrollable: {
-			type: Boolean,
-			required: false,
-			default: false,
-		},
-		maxHeight: {
-			type: Number,
-			required: false,
-			default: null,
-		},
-	},
-	data() {
-		return {
-			showBody: this.expanded,
-			omitted: null,
-			ignoreOmit: false,
-		};
-	},
-	mounted() {
-		this.$watch('showBody', showBody => {
-			const headerHeight = this.showHeader ? this.$refs.header.offsetHeight : 0;
-			this.$el.style.minHeight = `${headerHeight}px`;
-			if (showBody) {
-				this.$el.style.flexBasis = 'auto';
+const props = withDefaults(defineProps<{
+	showHeader?: boolean;
+	thin?: boolean;
+	naked?: boolean;
+	foldable?: boolean;
+	expanded?: boolean;
+	scrollable?: boolean;
+	maxHeight?: number;
+}>(), {
+	showHeader: true,
+	thin: false,
+	naked: false,
+	foldable: false,
+	expanded: true,
+	scrollable: false,
+});
+
+let showBody: boolean = $ref(props.expanded);
+let omitted: boolean = $ref(false);
+let ignoreOmit: boolean = $ref(false);
+let containerEl: HTMLElement | null = $ref(null);
+let header: HTMLElement | null = $ref(null);
+let content: HTMLElement | null = $ref(null);
+
+onMounted(() => {
+	watch($$(showBody), showBody_ => {
+		if (header && containerEl) {
+			const headerHeight = props.showHeader ? header.offsetHeight : 0;
+			containerEl.style.minHeight = `${headerHeight}px`;
+			if (showBody_) {
+				containerEl.style.flexBasis = 'auto';
 			} else {
-				this.$el.style.flexBasis = `${headerHeight}px`;
+				containerEl.style.flexBasis = `${headerHeight}px`;
 			}
-		}, {
-			immediate: true,
-		});
-
-		this.$el.style.setProperty('--maxHeight', this.maxHeight + 'px');
-
-		const calcOmit = () => {
-			if (this.omitted || this.ignoreOmit || this.maxHeight == null) return;
-			const height = this.$refs.content.offsetHeight;
-			this.omitted = height > this.maxHeight;
-		};
+		}
+	}, {
+		immediate: true,
+	});
+	if (containerEl && typeof props.maxHeight !== 'undefined') {
+		containerEl.style.setProperty('--maxHeight', props.maxHeight + 'px');
+	}
+	
+	const calcOmit = (): void => {
+		if (omitted || ignoreOmit || props.maxHeight == null) return;
+		
+		if (content) {
+			const height = content.offsetHeight;
+			omitted = height > props.maxHeight;
+		}
+	};
 
+	if (content) {
 		calcOmit();
 		new ResizeObserver(() => {
 			calcOmit();
-		}).observe(this.$refs.content);
-	},
-	methods: {
-		toggleContent(show: boolean) {
-			if (!this.foldable) return;
-			this.showBody = show;
-		},
-
-		enter(el) {
-			const elementHeight = el.getBoundingClientRect().height;
-			el.style.height = 0;
-			el.offsetHeight; // reflow
-			el.style.height = elementHeight + 'px';
-		},
-		afterEnter(el) {
-			el.style.height = null;
-		},
-		leave(el) {
-			const elementHeight = el.getBoundingClientRect().height;
-			el.style.height = elementHeight + 'px';
-			el.offsetHeight; // reflow
-			el.style.height = 0;
-		},
-		afterLeave(el) {
-			el.style.height = null;
-		},
-	},
+		}).observe(content);
+	}
 });
+
+function enter(el: HTMLElement): void {
+	const elementHeight = el.getBoundingClientRect().height;
+	el.style.height = '0';
+	el.offsetHeight; // reflow
+	el.style.height = elementHeight + 'px';
+}
+
+function leave(el: HTMLElement): void {
+	const elementHeight = el.getBoundingClientRect().height;
+	el.style.height = elementHeight + 'px';
+	el.offsetHeight; // reflow
+	el.style.height = '0';
+}
+
+function removeHeight(el: HTMLElement): void {
+	el.style.removeProperty('height');
+}
 </script>
 
 <style lang="scss" scoped>
@@ -240,9 +219,6 @@ export default defineComponent({
 				font-size: 0.9em;
 			}
 		}
-
-		> .content {
-		}
 	}
 }
 
-- 
2.43.0


From 67852b741dd44e5089b356403e36cc7d5725ccd1 Mon Sep 17 00:00:00 2001
From: Johann150 <johann.galle@protonmail.com>
Date: Wed, 21 Sep 2022 11:55:52 +0200
Subject: [PATCH 2/3] remove unnecessary whitespace

---
 packages/client/src/components/ui/container.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/components/ui/container.vue b/packages/client/src/components/ui/container.vue
index e6fc05a81..4c10a67dd 100644
--- a/packages/client/src/components/ui/container.vue
+++ b/packages/client/src/components/ui/container.vue
@@ -72,10 +72,10 @@ onMounted(() => {
 	if (containerEl && typeof props.maxHeight !== 'undefined') {
 		containerEl.style.setProperty('--maxHeight', props.maxHeight + 'px');
 	}
-	
+
 	const calcOmit = (): void => {
 		if (omitted || ignoreOmit || props.maxHeight == null) return;
-		
+
 		if (content) {
 			const height = content.offsetHeight;
 			omitted = height > props.maxHeight;
-- 
2.43.0


From e6fb4aa5056efd6c6a1d156edce6919936f53dff Mon Sep 17 00:00:00 2001
From: Johann150 <johann.galle@protonmail.com>
Date: Wed, 21 Sep 2022 11:57:24 +0200
Subject: [PATCH 3/3] add maxHeight default

---
 packages/client/src/components/ui/container.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/client/src/components/ui/container.vue b/packages/client/src/components/ui/container.vue
index 4c10a67dd..0dfb32310 100644
--- a/packages/client/src/components/ui/container.vue
+++ b/packages/client/src/components/ui/container.vue
@@ -38,7 +38,7 @@ const props = withDefaults(defineProps<{
 	foldable?: boolean;
 	expanded?: boolean;
 	scrollable?: boolean;
-	maxHeight?: number;
+	maxHeight?: number | null;
 }>(), {
 	showHeader: true,
 	thin: false,
@@ -46,6 +46,7 @@ const props = withDefaults(defineProps<{
 	foldable: false,
 	expanded: true,
 	scrollable: false,
+	maxHeight: null,
 });
 
 let showBody: boolean = $ref(props.expanded);
@@ -69,7 +70,7 @@ onMounted(() => {
 	}, {
 		immediate: true,
 	});
-	if (containerEl && typeof props.maxHeight !== 'undefined') {
+	if (containerEl && props.maxHeight != null) {
 		containerEl.style.setProperty('--maxHeight', props.maxHeight + 'px');
 	}
 
-- 
2.43.0