feat(Pagination): add first and last page buttons (#842)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>
Co-authored-by: Max Steinwand <msteinwand@kues.de>

docs/components/content/examples/PaginationExampleFirstLastSlots.vue

@@ -0,0 +1,20 @@
+<script setup>
+const page = ref(1)
+const items = ref(Array(55))
+</script>
+
+<template>
+  <UPagination v-model="page" :total="items.length" :ui="{ rounded: 'first-of-type:rounded-s-md last-of-type:rounded-e-md' }">
+    <template #first="{ onClick }">
+      <UTooltip text="First page">
+        <UButton icon="i-heroicons-arrow-uturn-left" color="primary" :ui="{ rounded: 'rounded-full' }" class="rtl:[&_span:first-child]:rotate-180 me-2" @click="onClick" />
+      </UTooltip>
+    </template>
+
+    <template #last="{ onClick }">
+      <UTooltip text="Last page">
+        <UButton icon="i-heroicons-arrow-uturn-right-20-solid" color="primary" :ui="{ rounded: 'rounded-full' }" class="rtl:[&_span:last-child]:rotate-180 ms-2" @click="onClick" />
+      </UTooltip>
+    </template>
+  </UPagination>
+</template>

docs/content/5.navigation/3.pagination.md

@@ -39,6 +39,8 @@ Use the `size` prop to change the size of the buttons.
 baseProps:
   modelValue: 1
   total: 100
+  showLast: true
+  showFirst: true
 props:
   size: 'sm'
 ---
@@ -89,6 +91,33 @@ excludedProps:
 ---
 ::
 
+### First / Last :u-badge{label="New" class="align-middle ml-2 !rounded-full" variant="subtle"}
+
+Use the `first-button` and `last-button` props to customize the first and last buttons of the Pagination.
+
+::component-card
+---
+baseProps:
+  modelValue: 1
+  total: 100
+  showFirst: true
+  showLast: true
+props:
+  firstButton:
+    icon: 'i-heroicons-arrow-small-left-20-solid'
+    label: First
+    color: 'gray'
+  lastButton:
+    icon: 'i-heroicons-arrow-small-right-20-solid'
+    trailing: true
+    label: Last
+    color: 'gray'
+excludedProps:
+  - firstButton
+  - lastButton
+---
+::
+
 ## Slots
 
 ### `prev` / `next`
@@ -97,6 +126,12 @@ Use the `#prev` and `#next` slots to set the content of the previous and next bu
 
 :component-example{component="pagination-example-prev-next-slots"}
 
+### `first` / `last` :u-badge{label="New" class="align-middle ml-2 !rounded-full" variant="subtle"}
+
+Use the `#first` and `#last` slots to set the content of the first and last buttons.
+
+:component-example{component="pagination-example-first-last-slots"}
+
 ## Props
 
 :component-props