Merge pull request #1294 from PrefectHQ/nicholas/p-pager-refresh-2024…

…-05-15

Enhancement: `PPager` design and functionality update

demo/sections/components/Pager.vue

@@ -20,12 +20,12 @@
         <div>{{ item }}</div>
       </template>
       <hr class="my-2">
-      <p-pager v-model:page="page" :pages="pages" />
+      <p-pager v-model:page="page" :pages="pages" class="mx-auto w-max" />
     </template>
 
     <template #table>
       <p-table :data="data" class="mb-2" />
-      <p-pager v-model:page="page" :pages="pages" />
+      <p-pager v-model:page="page" v-model:limit="itemsPerPage" :pages="pages" />
     </template>
   </ComponentPage>
 </template>

src/components/Pager/PPager.vue

@@ -1,45 +1,81 @@
 <template>
   <div class="p-pager">
-    <p class="p-pager__context">
-      <template v-if="pages">
-        Showing page <span class="p-pager__page">{{ page }}</span> of <span class="p-pager__page">{{ pages }}</span>
+    <slot name="limit">
+      <template v-if="limit">
+        <div class="p-pager__limit">
+          {{ limitText }} <p-select v-model="limit" small class="p-pager__limit-select" :options="limits" />
+        </div>
       </template>
-      <template v-else>
-        Page <span class="p-pager__page">{{ page }}</span>
-      </template>
-    </p>
+    </slot>
+
+    <div class="p-pager__slot">
+      <slot />
+    </div>
+
     <div class="p-pager__buttons">
-      <p-button small icon="ChevronLeftIcon" :disabled="!showPrevious" @click="previous">
-        Previous
-      </p-button>
-      <p-button small icon-append="ChevronRightIcon" :disabled="!showNext" @click="next">
-        Next
-      </p-button>
+      <p-button
+        v-if="pages"
+        icon="ChevronDoubleLeftIcon"
+        :disabled="disableFirst"
+        size="sm"
+        variant="ghost"
+        @click="first"
+      />
+
+      <p-button icon="ChevronLeftIcon" :disabled="disablePrevious" size="sm" variant="ghost" @click="previous" />
+
+      <p class="p-pager__context">
+        Page
+        <template v-if="pages">
+          <span class="p-pager__page">{{ page }}</span> of <span class="p-pager__page">{{ pages }}</span>
+        </template>
+        <template v-else>
+          <span class="p-pager__page">{{ page }}</span>
+        </template>
+      </p>
+      <p-button icon="ChevronRightIcon" :disabled="disableNext" size="sm" variant="ghost" @click="next" />
+
+      <p-button
+        v-if="pages"
+        icon="ChevronDoubleRightIcon"
+        :disabled="disableLast"
+        size="sm"
+        variant="ghost"
+        @click="last"
+      />
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
   import { computed } from 'vue'
 
-  const props = defineProps<{
-    page: number,
-    pages?: number,
-  }>()
+  const page = defineModel<number>('page', { required: true })
+  const pages = defineModel<number>('pages')
+  const limit = defineModel<number>('limit')
 
-  const emit = defineEmits<{
-    (event: 'update:page', value: number): void,
-  }>()
+  const limits = defineModel<number[]>('limits', { default: () => [5, 10, 25, 50] })
+  const limitText = computed(() => 'Items per page')
 
-  const showPrevious = computed(() => props.page > 1)
-  const showNext = computed(() => props.page < (props.pages ?? Infinity))
+  const disableFirst = computed(() => page.value === 1)
+  const disableLast = computed(() => page.value === (pages.value ?? Infinity))
+  const disableNext = computed(() => page.value >= (pages.value ?? Infinity))
+  const disablePrevious = computed(() => page.value <= 1)
 
   function previous(): void {
-    emit('update:page', props.page - 1)
+    --page.value
   }
 
   function next(): void {
-    emit('update:page', props.page + 1)
+    ++page.value
+  }
+
+  function first(): void {
+    page.value = 1
+  }
+
+  function last(): void {
+    page.value = pages.value ?? 1
   }
 </script>
 
@@ -49,24 +85,31 @@
   flex-col
   flex-wrap
   items-center
-  justify-between
   gap-2
   sm:flex-row
 }
 
 .p-pager__context { @apply
-  text-sm
+  text-xs
   text-subdued
 }
 
-.p-pager__page { @apply
-  font-medium
-}
-
 .p-pager__buttons { @apply
   flex
   flex-wrap
   items-center
   gap-2
 }
+
+.p-pager__slot { @apply
+  grow
+}
+
+.p-pager__limit { @apply
+  text-xs
+  text-subdued
+  flex
+  items-center
+  gap-1
+}
 </style>