From a18ca07954a895422ff7ab602c759a8c6cefc7cf Mon Sep 17 00:00:00 2001
From: jlpereira <pepelui@outlook.com>
Date: Fri, 3 Nov 2023 17:03:31 -0300
Subject: [PATCH 1/2] Add Pagination component

---
 .../Pagination/VPagination.global.vue         | 108 ++++++++++++++++++
 1 file changed, 108 insertions(+)
 create mode 100644 src/components/Pagination/VPagination.global.vue

diff --git a/src/components/Pagination/VPagination.global.vue b/src/components/Pagination/VPagination.global.vue
new file mode 100644
index 0000000..8035d30
--- /dev/null
+++ b/src/components/Pagination/VPagination.global.vue
@@ -0,0 +1,108 @@
+<template>
+  <ul
+    aria-disabled="false"
+    aria-label="Pagination"
+    class="flex flex-row text-sm"
+  >
+    <li>
+      <button
+        type="button"
+        :disabled="currentPage < 2"
+        aria-label="Go to first page"
+        class="border border-base-border rounded-l-md px-2 py-1.5"
+        @click="currentPage = 1"
+      >
+        «
+      </button>
+    </li>
+    <li
+      role="presentation"
+      class="page-item"
+    >
+      <button
+        type="button"
+        :disabled="currentPage < 2"
+        aria-label="Go to previous page"
+        class="border border-base-border px-2 py-1.5"
+        @click="currentPage--"
+      >
+        ‹
+      </button>
+    </li>
+
+    <li
+      v-for="n in pages"
+      class="page-item"
+      :key="n"
+    >
+      <button
+        type="button"
+        aria-label="Go to page 1"
+        class="border border-base-border px-2 py-1.5"
+        :disabled="currentPage === n"
+        :class="
+          currentPage === n
+            ? 'text-primary-content bg-primary-color'
+            : 'text-base-content'
+        "
+        @click="() => (currentPage = n)"
+      >
+        {{ n }}
+      </button>
+    </li>
+
+    <li class="page-item">
+      <button
+        type="button"
+        aria-label="Go to next page"
+        class="border border-base-border px-2 py-1.5"
+        :disabled="currentPage === pages"
+        @click="() => currentPage++"
+      >
+        ›
+      </button>
+    </li>
+    <li role="presentation">
+      <button
+        type="button"
+        :disabled="currentPage === pages"
+        aria-label="Go to last page"
+        class="border border-base-border rounded-r-md px-2 py-1.5"
+        @click="() => (currentPage = pages)"
+      >
+        »
+      </button>
+    </li>
+  </ul>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  modelValue: {
+    type: Number,
+    required: true
+  },
+
+  total: {
+    type: Number,
+    required: true
+  },
+
+  per: {
+    type: Number,
+    required: true
+  }
+})
+
+const emit = defineEmits(['update:modelValue'])
+
+const pages = computed(() => Math.ceil(props.total / props.per))
+const currentPage = computed({
+  get: () => props.modelValue,
+  set: (value) => {
+    emit('update:modelValue', value)
+  }
+})
+</script>

From cfc919c862ca624e466cad78ed61a340a74ab8f8 Mon Sep 17 00:00:00 2001
From: jlpereira <pepelui@outlook.com>
Date: Sat, 4 Nov 2023 16:19:21 -0300
Subject: [PATCH 2/2] Update gallery and pagination components

---
 src/components/Gallery/GalleryMainImage.vue   |  2 +-
 .../Gallery/GalleryThumbnailList.vue          | 11 ++--
 .../ImageViewer/ImageViewer.global.vue        |  2 +-
 .../Pagination/VPagination.global.vue         | 54 ++++++++++++++-----
 4 files changed, 46 insertions(+), 23 deletions(-)

diff --git a/src/components/Gallery/GalleryMainImage.vue b/src/components/Gallery/GalleryMainImage.vue
index 385a558..493c36a 100644
--- a/src/components/Gallery/GalleryMainImage.vue
+++ b/src/components/Gallery/GalleryMainImage.vue
@@ -12,7 +12,7 @@
       ref="imageElement"
       class="max-h-80 h-max w-100 cursor-zoom-in m-auto object-contain"
       :src="image.original"
-      :alt="image.depictions.map((d) => d.label).join(';')"
+      :alt="image.depictions?.map((d) => d.label).join(';')"
       @click="emit('open:viewer')"
     />
   </div>
diff --git a/src/components/Gallery/GalleryThumbnailList.vue b/src/components/Gallery/GalleryThumbnailList.vue
index 540ef3b..7545e99 100644
--- a/src/components/Gallery/GalleryThumbnailList.vue
+++ b/src/components/Gallery/GalleryThumbnailList.vue
@@ -1,16 +1,13 @@
 <template>
-  <div class="flex flex-row overflow-x-auto print:flex-wrap">
-    <div 
+  <div class="flex flex-row overflow-x-auto print:flex-wrap gap-1.5">
+    <div
       v-for="(image, index) in images"
       :key="image.id"
-      class="
-        pr-1.5
-        last:pr-0"
     >
       <GalleryThumbnail
         :image="image"
         :class="{ 'border border-secondary-color': current === index }"
-        :title="image.depictions.map(d => d.label).join(';')"
+        :title="image.depictions?.map((d) => d.label).join(';')"
         @click="emit('selectIndex', index)"
       />
     </div>
@@ -32,4 +29,4 @@ defineProps({
 })
 
 const emit = defineEmits(['selectIndex'])
-</script>
\ No newline at end of file
+</script>
diff --git a/src/components/ImageViewer/ImageViewer.global.vue b/src/components/ImageViewer/ImageViewer.global.vue
index b0f8eab..1887ffe 100644
--- a/src/components/ImageViewer/ImageViewer.global.vue
+++ b/src/components/ImageViewer/ImageViewer.global.vue
@@ -19,7 +19,7 @@
           v-show="!errorMessage"
           ref="imageElement"
           class="mx-auto cursor-zoom-out w-auto max-w-full max-h-full h-auto my-auto"
-          :alt="image.depictions.map((d) => d.label).join(';')"
+          :alt="image?.depictions?.map((d) => d.label).join(';')"
           :src="image.original"
           @click="emit('close')"
         />
diff --git a/src/components/Pagination/VPagination.global.vue b/src/components/Pagination/VPagination.global.vue
index 8035d30..e612063 100644
--- a/src/components/Pagination/VPagination.global.vue
+++ b/src/components/Pagination/VPagination.global.vue
@@ -31,24 +31,42 @@
     </li>
 
     <li
+      v-if="modelValue > props.rangePages"
+      class="border border-base-border px-2 py-1.5"
+    >
+      <span class="page gap"> ... </span>
+    </li>
+
+    <template
       v-for="n in pages"
-      class="page-item"
       :key="n"
     >
-      <button
-        type="button"
-        aria-label="Go to page 1"
-        class="border border-base-border px-2 py-1.5"
-        :disabled="currentPage === n"
-        :class="
-          currentPage === n
-            ? 'text-primary-content bg-primary-color'
-            : 'text-base-content'
-        "
-        @click="() => (currentPage = n)"
+      <li
+        v-if="n < rangeMax && rangeMin < n"
+        class="page-item"
       >
-        {{ n }}
-      </button>
+        <button
+          type="button"
+          aria-label="Go to page 1"
+          class="border border-base-border px-2 py-1.5"
+          :disabled="currentPage === n"
+          :class="
+            currentPage === n
+              ? 'text-primary-content bg-primary-color'
+              : 'text-base-content'
+          "
+          @click="() => (currentPage = n)"
+        >
+          {{ n }}
+        </button>
+      </li>
+    </template>
+
+    <li
+      v-if="pages - modelValue >= rangePages"
+      class="border border-base-border px-2 py-1.5"
+    >
+      <span class="page gap"> ... </span>
     </li>
 
     <li class="page-item">
@@ -93,6 +111,11 @@ const props = defineProps({
   per: {
     type: Number,
     required: true
+  },
+
+  rangePages: {
+    type: Number,
+    default: 5
   }
 })
 
@@ -105,4 +128,7 @@ const currentPage = computed({
     emit('update:modelValue', value)
   }
 })
+
+const rangeMax = computed(() => props.modelValue + props.rangePages)
+const rangeMin = computed(() => props.modelValue - props.rangePages)
 </script>