Merge 82f1d37e1e into 1b6891cd0f

packages/frontend/@n8n/design-system/src/v2/components/N8nPagination/Pagination.vue

@@ -0,0 +1,183 @@
+<script setup lang="ts">
+import {
+	PaginationRoot,
+	PaginationList,
+	PaginationFirst,
+	PaginationPrev,
+	PaginationListItem,
+	PaginationEllipsis,
+	PaginationNext,
+	PaginationLast,
+} from 'reka-ui';
+import { ref } from 'vue';
+
+interface Props {
+	page?: number;
+	itemsPerPage?: number;
+	total?: number;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	page: undefined,
+	itemsPerPage: undefined,
+	total: undefined,
+});
+
+const emit = defineEmits<{
+	// eslint-disable-next-line @typescript-eslint/naming-convention
+	'update:current-page': [page: number];
+}>();
+
+const page = ref(props.page ?? 1);
+
+// Handle page changes and emit events
+function handlePageChange(newPage: number) {
+	page.value = newPage;
+	emit('update:current-page', newPage);
+}
+</script>
+
+<template>
+	<PaginationRoot
+		:total="total"
+		:items-per-page="itemsPerPage"
+		:page="page"
+		:sibling-count="2"
+		:show-edges="true"
+		:class="{
+			'n8n-pagination': true,
+		}"
+		@update:page="handlePageChange"
+	>
+		<PaginationList v-slot="{ items }">
+			<PaginationFirst class="n8n-pagination__button n8n-pagination__button--first">
+			</PaginationFirst>
+
+			<PaginationPrev class="n8n-pagination__button n8n-pagination__button--prev"> </PaginationPrev>
+
+			<template>
+				<template v-for="(item, index) in items" :key="index">
+					<PaginationListItem
+						v-if="item.type === 'page'"
+						:value="item.value"
+						:class="{
+							'n8n-pagination__button': true,
+							'n8n-pagination__button--page': true,
+							'is-active': item.value === page,
+						}"
+					>
+						{{ item.value }}
+					</PaginationListItem>
+					<PaginationEllipsis v-else :index="index" class="n8n-pagination__ellipsis">
+						&#8230;
+					</PaginationEllipsis>
+				</template>
+			</template>
+
+			<PaginationNext class="n8n-pagination__button n8n-pagination__button--next"> </PaginationNext>
+
+			<PaginationLast class="n8n-pagination__button n8n-pagination__button--last"> </PaginationLast>
+		</PaginationList>
+	</PaginationRoot>
+</template>
+
+<style lang="scss" scoped>
+.n8n-pagination {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	font-size: var(--font-size--sm);
+	height: 32px;
+	padding: 2px 0;
+
+	&.is-disabled {
+		opacity: 0.6;
+		pointer-events: none;
+	}
+}
+
+.n8n-pagination__button {
+	min-width: 28px;
+	height: 28px;
+	padding: 0 6px;
+	margin: 0 2px;
+	border: none;
+	background: transparent !important;
+	border-radius: var(--radius);
+	cursor: pointer;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	font-size: var(--font-size--2xs);
+	font-weight: var(--font-weight--bold);
+	color: var(--color--text--inverse);
+	transition: color 0.2s ease;
+	user-select: none;
+
+	:deep(button) {
+		color: inherit;
+		padding: 0;
+	}
+
+	&:hover:not(:disabled):not(.is-active):not(.n8n-pagination__button--prev):not(
+			.n8n-pagination__button--next
+		):not(.n8n-pagination__button--first):not(.n8n-pagination__button--last) {
+		background: var(--color--background--light-3) !important;
+		color: var(--color--primary);
+		border: 1px solid var(--color--foreground);
+
+		:deep(button) {
+			color: var(--color--primary);
+			border: 1px solid var(--color--foreground);
+		}
+	}
+
+	&:active:not(:disabled) {
+		transform: scale(0.98);
+	}
+
+	&:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+
+	&--prev,
+	&--next,
+	&--first,
+	&--last {
+		font-size: 14px;
+	}
+
+	&--next {
+		margin-right: 8px;
+	}
+
+	&.is-active {
+		color: var(--color--primary);
+		border: 1px solid var(--color--primary);
+
+		:deep(button) {
+			color: var(--color--primary);
+			border: 1px solid var(--color--primary);
+		}
+
+		&:hover {
+			background: var(--color--background--light-3) !important;
+
+			:deep(button) {
+				background: var(--color--background--light-3) !important;
+			}
+		}
+	}
+}
+
+.n8n-pagination__ellipsis {
+	min-width: 28px;
+	height: 28px;
+	color: var(--color--text--inverse);
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	user-select: none;
+}
+</style>

packages/frontend/@n8n/design-system/src/v2/components/N8nPagination/index.ts

@@ -0,0 +1,3 @@
+import N8nPagination from './Pagination.vue';
+
+export default N8nPagination;