refactor(editor): Continue porting components over to composition API (no-changelog) (#8893)

packages/design-system/src/components/N8nTabs/Tabs.vue

@@ -47,12 +47,11 @@
 	</div>
 </template>
 
-<script lang="ts">
-import type { PropType } from 'vue';
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { onMounted, onUnmounted, ref } from 'vue';
 import N8nIcon from '../N8nIcon';
 
-export interface N8nTabOptions {
+interface TabOptions {
 	value: string;
 	label?: string;
 	icon?: string;
@@ -61,85 +60,63 @@ export interface N8nTabOptions {
 	align?: 'left' | 'right';
 }
 
-export default defineComponent({
-	name: 'N8nTabs',
-	components: {
-		N8nIcon,
-	},
-	props: {
-		modelValue: {
-			type: String,
-			default: '',
-		},
-		options: {
-			type: Array as PropType<N8nTabOptions[]>,
-			default: (): N8nTabOptions[] => [],
-		},
-	},
-	data() {
-		return {
-			scrollPosition: 0,
-			canScrollRight: false,
-			resizeObserver: null as ResizeObserver | null,
-		};
-	},
-	mounted() {
-		const container = this.$refs.tabs as HTMLDivElement | undefined;
-		if (container) {
-			container.addEventListener('scroll', (event: Event) => {
-				const width = container.clientWidth;
-				const scrollWidth = container.scrollWidth;
-				this.scrollPosition = (event.target as Element).scrollLeft;
+interface TabsProps {
+	modelValue?: string;
+	options?: TabOptions[];
+}
 
-				this.canScrollRight = scrollWidth - width > this.scrollPosition;
-			});
-
-			this.resizeObserver = new ResizeObserver(() => {
-				const width = container.clientWidth;
-				const scrollWidth = container.scrollWidth;
-				this.canScrollRight = scrollWidth - width > this.scrollPosition;
-			});
-			this.resizeObserver.observe(container);
-
-			const width = container.clientWidth;
-			const scrollWidth = container.scrollWidth;
-			this.canScrollRight = scrollWidth - width > this.scrollPosition;
-		}
-	},
-	unmounted() {
-		if (this.resizeObserver) {
-			this.resizeObserver.disconnect();
-		}
-	},
-	methods: {
-		handleTooltipClick(tab: string, event: MouseEvent) {
-			this.$emit('tooltipClick', tab, event);
-		},
-		handleTabClick(tab: string) {
-			this.$emit('update:modelValue', tab);
-		},
-		scrollLeft() {
-			this.scroll(-50);
-		},
-		scrollRight() {
-			this.scroll(50);
-		},
-		scroll(left: number) {
-			const container = this.$refs.tabs as
-				| (HTMLDivElement & { scrollBy: ScrollByFunction })
-				| undefined;
-			if (container) {
-				container.scrollBy({ left, top: 0, behavior: 'smooth' });
-			}
-		},
-	},
+withDefaults(defineProps<TabsProps>(), {
+	options: () => [],
 });
 
-type ScrollByFunction = (arg: {
-	left: number;
-	top: number;
-	behavior: 'smooth' | 'instant' | 'auto';
-}) => void;
+const scrollPosition = ref(0);
+const canScrollRight = ref(false);
+const tabs = ref<Element | undefined>(undefined);
+let resizeObserver: ResizeObserver | null = null;
+
+onMounted(() => {
+	const container = tabs.value as Element;
+	if (container) {
+		container.addEventListener('scroll', (event: Event) => {
+			const width = container.clientWidth;
+			const scrollWidth = container.scrollWidth;
+			scrollPosition.value = (event.target as Element).scrollLeft;
+			canScrollRight.value = scrollWidth - width > scrollPosition.value;
+		});
+
+		resizeObserver = new ResizeObserver(() => {
+			const width = container.clientWidth;
+			const scrollWidth = container.scrollWidth;
+			canScrollRight.value = scrollWidth - width > scrollPosition.value;
+		});
+		resizeObserver.observe(container);
+
+		const width = container.clientWidth;
+		const scrollWidth = container.scrollWidth;
+		canScrollRight.value = scrollWidth - width > scrollPosition.value;
+	}
+});
+
+onUnmounted(() => {
+	resizeObserver?.disconnect();
+});
+
+const $emit = defineEmits<{
+	(event: 'tooltipClick', tab: string, e: MouseEvent): void;
+	(event: 'update:modelValue', tab: string);
+}>();
+
+const handleTooltipClick = (tab: string, event: MouseEvent) => $emit('tooltipClick', tab, event);
+const handleTabClick = (tab: string) => $emit('update:modelValue', tab);
+
+const scroll = (left: number) => {
+	const container = tabs.value;
+	if (container) {
+		container.scrollBy({ left, top: 0, behavior: 'smooth' });
+	}
+};
+const scrollLeft = () => scroll(-50);
+const scrollRight = () => scroll(50);
 </script>
 
 <style lang="scss" module>