refactor: rewrite MkFolder

packages/client/src/components/MkFolder.vue

@@ -31,72 +31,76 @@
 	</section>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { defineComponent } from "vue";
+import { ref, watch } from "vue";
 import { getUniqueId } from "@/os";
 import { defaultStore } from "@/store";
 // import icon from "@/scripts/icon";
 
 const localStoragePrefix = "ui:folder:";
 
-export default defineComponent({
+const props = withDefaults(
-	props: {
+	defineProps<{
-		expanded: {
+		expanded?: boolean;
-			type: Boolean,
+		persistKey?: string | null;
-			required: false,
+	}>(),
-			default: true,
+	{
-		},
+		expanded: true,
-		persistKey: {
+		persistKey: null,
-			type: String,
-			required: false,
-			default: null,
-		},
 	},
-	data() {
+);
-		return {
-			bodyId: getUniqueId(),
-			showBody:
-				this.persistKey &&
-				localStorage.getItem(localStoragePrefix + this.persistKey)
-					? localStorage.getItem(localStoragePrefix + this.persistKey) === "t"
-					: this.expanded,
-			animation: defaultStore.state.animation,
-		};
-	},
-	watch: {
-		showBody() {
-			if (this.persistKey) {
-				localStorage.setItem(
-					localStoragePrefix + this.persistKey,
-					this.showBody ? "t" : "f",
-				);
-			}
-		},
-	},
-	methods: {
-		toggleContent(show: boolean) {
-			this.showBody = show;
-		},
 
-		enter(el) {
+const bodyId = ref(getUniqueId());
-			const elementHeight = el.getBoundingClientRect().height;
+
-			el.style.height = 0;
+const showBody = ref(
-			el.offsetHeight; // reflow
+	props.persistKey &&
-			el.style.height = elementHeight + "px";
+		localStorage.getItem(localStoragePrefix + props.persistKey)
-		},
+		? localStorage.getItem(localStoragePrefix + props.persistKey) === "t"
-		afterEnter(el) {
+		: props.expanded,
-			el.style.height = null;
+);
-		},
+
-		leave(el) {
+const animation = defaultStore.state.animation;
-			const elementHeight = el.getBoundingClientRect().height;
+
-			el.style.height = elementHeight + "px";
+watch(showBody, () => {
-			el.offsetHeight; // reflow
+	if (props.persistKey) {
-			el.style.height = 0;
+		localStorage.setItem(
-		},
+			localStoragePrefix + props.persistKey,
-		afterLeave(el) {
+			showBody.value ? "t" : "f",
-			el.style.height = null;
+		);
-		},
+	}
-	},
+});
+
+function toggleContent(show: boolean) {
+	showBody.value = show;
+}
+
+function enter(el) {
+	const elementHeight = el.getBoundingClientRect().height;
+	el.style.height = 0;
+	el.offsetHeight; // reflow
+	// biome-ignore lint/style/useTemplate: <explanation>
+	el.style.height = elementHeight + "px";
+}
+function afterEnter(el) {
+	el.style.height = null;
+}
+function leave(el) {
+	const elementHeight = el.getBoundingClientRect().height;
+	// biome-ignore lint/style/useTemplate: <explanation>
+	el.style.height = elementHeight + "px";
+	el.offsetHeight; // reflow
+	el.style.height = 0;
+}
+function afterLeave(el) {
+	el.style.height = null;
+}
+
+defineExpose({
+	toggleContent,
+	enter,
+	afterEnter,
+	leave,
+	afterLeave,
 });
 </script>