feat: pagination in the SPA for the Sites and Authors lists

web/src/components/PageSizeSelect.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { t } from '@/i18n'
+
+import { computed } from 'vue'
+import { PAGE_SIZES } from '@/lib/pageQuery'
+
+const FOCUS_RING =
+	'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary'
+
+const props = defineProps<{
+	size: number
+	disabled: boolean
+	touch?: boolean
+}>()
+
+const emit = defineEmits<{ 'update:size': [size: number] }>()
+
+const sizeItems = computed(() =>
+	PAGE_SIZES.map((value) => ({
+		label: t('{0} per page', [value]),
+		value,
+	})),
+)
+
+const height = computed(() => (props.touch ? 'h-11' : 'h-8'))
+</script>
+
+<template>
+	<USelectMenu
+		:model-value="size"
+		:items="sizeItems"
+		value-key="value"
+		:search-input="false"
+		:disabled="disabled"
+		:aria-label="t('Rows per page')"
+		:content="{ side: 'top', align: touch ? 'end' : 'start' }"
+		color="neutral"
+		variant="outline"
+		class="w-30"
+		:ui="{
+			base: `${height} rounded-none border border-accented bg-default pl-3 pr-2 text-sm ring-0 focus-visible:ring-0 disabled:opacity-40 ${FOCUS_RING}`,
+			trailingIcon: 'size-3.5 text-muted',
+			content: 'w-40 rounded-none',
+			itemTrailingIcon: 'hidden',
+			item: `${height} rounded-none data-[state=checked]:bg-(--rc-sand) data-[state=checked]:font-semibold data-[state=checked]:text-(--rc-on-sand)`,
+		}"
+		@update:model-value="emit('update:size', $event as number)"
+	/>
+</template>