refactor(editor): Port more components over to composition API (no-changelog) (#8794)

packages/design-system/src/components/N8nDatatable/Datatable.vue

@@ -1,118 +1,3 @@
-<script lang="ts">
-import type { PropType } from 'vue';
-import { computed, defineComponent, ref, useCssModule } from 'vue';
-import type { DatatableColumn, DatatableRow, DatatableRowDataType } from '../../types';
-import { getValueByPath } from '../../utils';
-import { useI18n } from '../../composables/useI18n';
-import N8nSelect from '../N8nSelect';
-import N8nOption from '../N8nOption';
-import N8nPagination from '../N8nPagination';
-
-export default defineComponent({
-	name: 'N8nDatatable',
-	components: {
-		N8nSelect,
-		N8nOption,
-		N8nPagination,
-	},
-	props: {
-		columns: {
-			type: Array as PropType<DatatableColumn[]>,
-			required: true,
-		},
-		rows: {
-			type: Array as PropType<DatatableRow[]>,
-			required: true,
-		},
-		currentPage: {
-			type: Number,
-			default: 1,
-		},
-		pagination: {
-			type: Boolean,
-			default: true,
-		},
-		rowsPerPage: {
-			type: [Number, String] as PropType<number | '*'>,
-			default: 10,
-		},
-	},
-	emits: ['update:currentPage', 'update:rowsPerPage'],
-	setup(props, { emit }) {
-		const { t } = useI18n();
-		const rowsPerPageOptions = ref([10, 25, 50, 100]);
-
-		const style = useCssModule();
-
-		const totalPages = computed(() => {
-			if (props.rowsPerPage === '*') {
-				return 1;
-			}
-
-			return Math.ceil(props.rows.length / props.rowsPerPage);
-		});
-
-		const totalRows = computed(() => {
-			return props.rows.length;
-		});
-
-		const visibleRows = computed(() => {
-			if (props.rowsPerPage === '*') {
-				return props.rows;
-			}
-
-			const start = (props.currentPage - 1) * props.rowsPerPage;
-			const end = start + props.rowsPerPage;
-
-			return props.rows.slice(start, end);
-		});
-
-		const classes = computed(() => {
-			return {
-				datatable: true,
-				[style.datatableWrapper]: true,
-			};
-		});
-
-		function onUpdateCurrentPage(value: number) {
-			emit('update:currentPage', value);
-		}
-
-		function onRowsPerPageChange(value: number | '*') {
-			emit('update:rowsPerPage', value);
-
-			const maxPage = value === '*' ? 1 : Math.ceil(totalRows.value / value);
-			if (maxPage < props.currentPage) {
-				onUpdateCurrentPage(maxPage);
-			}
-		}
-
-		function getTdValue(row: DatatableRow, column: DatatableColumn) {
-			return getValueByPath<DatatableRowDataType>(row, column.path);
-		}
-
-		function getThStyle(column: DatatableColumn) {
-			return {
-				...(column.width ? { width: column.width } : {}),
-			};
-		}
-
-		return {
-			t,
-			classes,
-			totalPages,
-			totalRows,
-			visibleRows,
-			rowsPerPageOptions,
-			getTdValue,
-			getThStyle,
-			onUpdateCurrentPage,
-			onRowsPerPageChange,
-		};
-	},
-});
-</script>
-
 <template>
 	<div :class="classes" v-bind="$attrs">
 		<table :class="$style.datatable">
@@ -175,6 +60,89 @@ export default defineComponent({
 	</div>
 </template>
 
+<script lang="ts" setup>
+import { computed, ref, useCssModule } from 'vue';
+import N8nSelect from '../N8nSelect';
+import N8nOption from '../N8nOption';
+import N8nPagination from '../N8nPagination';
+import type { DatatableColumn, DatatableRow, DatatableRowDataType } from '../../types';
+import { useI18n } from '../../composables/useI18n';
+import { getValueByPath } from '../../utils';
+
+interface DatatableProps {
+	columns: DatatableColumn[];
+	rows: DatatableRow[];
+	currentPage?: number;
+	pagination?: boolean;
+	rowsPerPage?: number | '*';
+}
+
+defineOptions({ name: 'N8nDatatable' });
+const props = withDefaults(defineProps<DatatableProps>(), {
+	currentPage: 1,
+	pagination: true,
+	rowsPerPage: 10,
+});
+
+const $emit = defineEmits(['update:currentPage', 'update:rowsPerPage']);
+
+const { t } = useI18n();
+const rowsPerPageOptions = ref([10, 25, 50, 100]);
+
+const $style = useCssModule();
+
+const totalPages = computed(() => {
+	if (props.rowsPerPage === '*') {
+		return 1;
+	}
+
+	return Math.ceil(props.rows.length / props.rowsPerPage);
+});
+
+const totalRows = computed(() => {
+	return props.rows.length;
+});
+
+const visibleRows = computed(() => {
+	if (props.rowsPerPage === '*') {
+		return props.rows;
+	}
+
+	const start = (props.currentPage - 1) * props.rowsPerPage;
+	const end = start + props.rowsPerPage;
+
+	return props.rows.slice(start, end);
+});
+
+const classes = computed(() => ({
+	datatable: true,
+	[$style.datatableWrapper]: true,
+}));
+
+function onUpdateCurrentPage(value: number) {
+	$emit('update:currentPage', value);
+}
+
+function onRowsPerPageChange(value: number | '*') {
+	$emit('update:rowsPerPage', value);
+
+	const maxPage = value === '*' ? 1 : Math.ceil(totalRows.value / value);
+	if (maxPage < props.currentPage) {
+		onUpdateCurrentPage(maxPage);
+	}
+}
+
+function getTdValue(row: DatatableRow, column: DatatableColumn) {
+	return getValueByPath<DatatableRowDataType>(row, column.path);
+}
+
+function getThStyle(column: DatatableColumn) {
+	return {
+		...(column.width ? { width: column.width } : {}),
+	};
+}
+</script>
+
 <style lang="scss" module>
 .datatableWrapper {
 	display: block;