refactor(client): use composition api

packages/client/src/components/global/spacer.vue

@@ -6,45 +6,36 @@
 </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
+import { inject, onMounted, onUnmounted, ref } from 'vue';
 import { deviceKind } from '@/scripts/device-kind';
-import { defineComponent, inject, onMounted, onUnmounted, ref } from 'vue';
 
-export default defineComponent({
-	props: {
-		contentMax: {
-			type: Number,
-			required: false,
-			default: null,
-		},
-		marginMin: {
-			type: Number,
-			required: false,
-			default: 12,
-		},
-		marginMax: {
-			type: Number,
-			required: false,
-			default: 24,
-		},
-	},
+const props = withDefaults(defineProps<{
+	contentMax?: number | null;
+	marginMin?: number;
+	marginMax?: number;
+}>(), {
+	contentMax: null,
+	marginMin: 12,
+	marginMax: 24,
+});
 
-	setup(props, context) {
 let ro: ResizeObserver;
-		const root = ref<HTMLElement>();
-		const content = ref<HTMLElement>();
-		const margin = ref(0);
+let root = $ref<HTMLElement>();
+let content = $ref<HTMLElement>();
+let margin = $ref(0);
 const shouldSpacerMin = inject('shouldSpacerMin', false);
+
 const adjust = (rect: { width: number; height: number; }) => {
 	if (shouldSpacerMin || deviceKind === 'smartphone') {
-				margin.value = props.marginMin;
+		margin = props.marginMin;
 		return;
 	}
 
-			if (rect.width > props.contentMax || (rect.width > 360 && window.innerWidth > 400)) {
-				margin.value = props.marginMax;
+	if (rect.width > (props.contentMax ?? 0) || (rect.width > 360 && window.innerWidth > 400)) {
+		margin = props.marginMax;
 	} else {
-				margin.value = props.marginMin;
+		margin = props.marginMin;
 	}
 };
 
@@ -57,28 +48,20 @@ export default defineComponent({
 		});
 		*/
 		adjust({
-					width: root.value!.offsetWidth,
-					height: root.value!.offsetHeight,
+			width: root!.offsetWidth,
+			height: root!.offsetHeight,
 		});
 	});
-			ro.observe(root.value!);
+	ro.observe(root!);
 
 	if (props.contentMax) {
-				content.value!.style.maxWidth = `${props.contentMax}px`;
+		content!.style.maxWidth = `${props.contentMax}px`;
 	}
 });
 
 onUnmounted(() => {
 	ro.disconnect();
 });
-
-		return {
-			root,
-			content,
-			margin,
-		};
-	},
-});
 </script>
 
 <style lang="scss" module>