refactor(editor): Migrate BreakpointsObserver component to Vue 3 sy…

…ntax (no-changelog) (#9758) Signed-off-by: Oleg Ivaniv <[email protected]>
n8n-io · Jun 18, 2024 · 0524f58 · 0524f58
1 parent b7d356f
commit 0524f58
Showing 1 changed file with 64 additions and 72 deletions.
diff --git a/packages/editor-ui/src/components/BreakpointsObserver.vue b/packages/editor-ui/src/components/BreakpointsObserver.vue
@@ -4,9 +4,12 @@
 	</span>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script setup lang="ts">
+import { ref, computed, onMounted, onBeforeUnmount, nextTick } from 'vue';
 import { BREAKPOINT_SM, BREAKPOINT_MD, BREAKPOINT_LG, BREAKPOINT_XL } from '@/constants';
+import { useUIStore } from '@/stores/ui.store';
+import { getBannerRowHeight } from '@/utils/htmlUtils';
+import { useDebounce } from '@/composables/useDebounce';
 
 /**
  * matching element.io https://element.eleme.io/#/en-US/component/layout#col-attributes
@@ -16,85 +19,74 @@ import { BREAKPOINT_SM, BREAKPOINT_MD, BREAKPOINT_LG, BREAKPOINT_XL } from '@/co
  * lg >= 1200
  * xl >= 1920
  */
+interface Props {
+	valueXS?: number;
+	valueXL?: number;
+	valueLG?: number;
+	valueMD?: number;
+	valueSM?: number;
+	valueDefault?: number;
+}
 
-import { useUIStore } from '@/stores/ui.store';
-import { getBannerRowHeight } from '@/utils/htmlUtils';
-import { useDebounce } from '@/composables/useDebounce';
-
-export default defineComponent({
-	name: 'BreakpointsObserver',
-	props: ['valueXS', 'valueXL', 'valueLG', 'valueMD', 'valueSM', 'valueDefault'],
-	setup() {
-		const { callDebounced } = useDebounce();
-		return { callDebounced };
-	},
-	data() {
-		return {
-			width: window.innerWidth,
-		};
-	},
-	computed: {
-		bp(): string {
-			if (this.width < BREAKPOINT_SM) {
-				return 'XS';
-			}
-
-			if (this.width >= BREAKPOINT_XL) {
-				return 'XL';
-			}
-
-			if (this.width >= BREAKPOINT_LG) {
-				return 'LG';
-			}
+const props = defineProps<Props>();
 
-			if (this.width >= BREAKPOINT_MD) {
-				return 'MD';
-			}
+const { callDebounced } = useDebounce();
+const uiStore = useUIStore();
 
-			return 'SM';
-		},
+const width = ref(window.innerWidth);
 
-		value(): number | undefined {
-			if (this.valueXS !== undefined && this.width < BREAKPOINT_SM) {
-				return this.valueXS;
-			}
+const bp = computed(() => {
+	if (width.value < BREAKPOINT_SM) {
+		return 'XS';
+	}
+	if (width.value >= BREAKPOINT_XL) {
+		return 'XL';
+	}
+	if (width.value >= BREAKPOINT_LG) {
+		return 'LG';
+	}
+	if (width.value >= BREAKPOINT_MD) {
+		return 'MD';
+	}
+	return 'SM';
+});
 
-			if (this.valueXL !== undefined && this.width >= BREAKPOINT_XL) {
-				return this.valueXL;
-			}
+const value = computed(() => {
+	if (props.valueXS && width.value < BREAKPOINT_SM) {
+		return props.valueXS;
+	}
+	if (props.valueXL && width.value >= BREAKPOINT_XL) {
+		return props.valueXL;
+	}
+	if (props.valueLG && width.value >= BREAKPOINT_LG) {
+		return props.valueLG;
+	}
+	if (props.valueMD && width.value >= BREAKPOINT_MD) {
+		return props.valueMD;
+	}
+	if (props.valueSM) {
+		return props.valueSM;
+	}
+	return props.valueDefault;
+});
 
-			if (this.valueLG !== undefined && this.width >= BREAKPOINT_LG) {
-				return this.valueLG;
-			}
+const onResize = () => {
+	void callDebounced(onResizeEnd, { debounceTime: 50 });
+};
 
-			if (this.valueMD !== undefined && this.width >= BREAKPOINT_MD) {
-				return this.valueMD;
-			}
+const onResizeEnd = async () => {
+	width.value = window.innerWidth;
+	await nextTick();
 
-			if (this.valueSM !== undefined) {
-				return this.valueSM;
-			}
+	const bannerHeight = await getBannerRowHeight();
+	uiStore.updateBannersHeight(bannerHeight);
+};
 
-			return this.valueDefault;
-		},
-	},
-	created() {
-		window.addEventListener('resize', this.onResize);
-	},
-	beforeUnmount() {
-		window.removeEventListener('resize', this.onResize);
-	},
-	methods: {
-		onResize() {
-			void this.callDebounced(this.onResizeEnd, { debounceTime: 50 });
-		},
-		async onResizeEnd() {
-			this.width = window.innerWidth;
-			await this.$nextTick();
+onMounted(() => {
+	window.addEventListener('resize', onResize);
+});
 
-			const bannerHeight = await getBannerRowHeight();
-			useUIStore().updateBannersHeight(bannerHeight);
-		},
-	},
+onBeforeUnmount(() => {
+	window.removeEventListener('resize', onResize);
 });
 </script>