Update gallery and pagination components

wbbaker · Nov 4, 2023 · cfc919c · cfc919c
1 parent a18ca07
commit cfc919c
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 23 deletions.
diff --git 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
@@ -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>
+</script>
diff --git 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
@@ -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>