Merge pull request #188 from SpeciesFileGroup/development

Development

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>

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>

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')"
         />

src/components/Pagination/VPagination.global.vue

@@ -0,0 +1,134 @@
+<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-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"
+      :key="n"
+    >
+      <li
+        v-if="n < rangeMax && rangeMin < n"
+        class="page-item"
+      >
+        <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">
+      <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
+  },
+
+  rangePages: {
+    type: Number,
+    default: 5
+  }
+})
+
+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)
+  }
+})
+
+const rangeMax = computed(() => props.modelValue + props.rangePages)
+const rangeMin = computed(() => props.modelValue - props.rangePages)
+</script>