201 lines
6.6 KiB
Vue
201 lines
6.6 KiB
Vue
<script setup>
|
|
import { Link } from "@inertiajs/vue3";
|
|
import { computed } from "vue";
|
|
|
|
const props = defineProps({
|
|
links: { type: Array, default: () => [] },
|
|
from: { type: Number, default: 0 },
|
|
to: { type: Number, default: 0 },
|
|
total: { type: Number, default: 0 },
|
|
});
|
|
|
|
const num = props.links?.length || 0;
|
|
|
|
const prevLink = computed(() => (num > 0 ? props.links[0] : null));
|
|
const nextLink = computed(() => (num > 1 ? props.links[num - 1] : null));
|
|
const numericLinks = computed(() => {
|
|
if (num < 3) return [];
|
|
return props.links
|
|
.slice(1, num - 1)
|
|
.map((l) => ({
|
|
...l,
|
|
page: Number.parseInt(String(l.label).replace(/[^0-9]/g, ""), 10),
|
|
}))
|
|
.filter((l) => !Number.isNaN(l.page));
|
|
});
|
|
const currentPage = computed(() => numericLinks.value.find((l) => l.active)?.page || 1);
|
|
const lastPage = computed(() =>
|
|
numericLinks.value.length ? Math.max(...numericLinks.value.map((l) => l.page)) : 1
|
|
);
|
|
const linkByPage = computed(() => {
|
|
const m = new Map();
|
|
for (const l of numericLinks.value) m.set(l.page, l);
|
|
return m;
|
|
});
|
|
const windowItems = computed(() => {
|
|
const items = [];
|
|
const cur = currentPage.value;
|
|
const last = lastPage.value;
|
|
const show = new Set([1, last, cur - 1, cur, cur + 1]);
|
|
if (cur <= 3) {
|
|
show.add(2);
|
|
show.add(3);
|
|
}
|
|
if (cur >= last - 2) {
|
|
show.add(last - 1);
|
|
show.add(last - 2);
|
|
}
|
|
|
|
// Prev
|
|
items.push({ kind: "prev", link: prevLink.value });
|
|
|
|
// Pages with ellipses
|
|
let inGap = false;
|
|
for (let p = 1; p <= last; p++) {
|
|
if (show.has(p)) {
|
|
items.push({
|
|
kind: "page",
|
|
link: linkByPage.value.get(p) || {
|
|
url: null,
|
|
label: String(p),
|
|
active: p === cur,
|
|
},
|
|
});
|
|
inGap = false;
|
|
} else if (!inGap) {
|
|
items.push({ kind: "ellipsis" });
|
|
inGap = true;
|
|
}
|
|
}
|
|
|
|
// Next
|
|
items.push({ kind: "next", link: nextLink.value });
|
|
|
|
return items;
|
|
});
|
|
</script>
|
|
<template>
|
|
<div class="flex items-center justify-between bg-white px-4 py-3 sm:px-6">
|
|
<!-- Mobile: Prev / Next -->
|
|
<div class="flex flex-1 justify-between sm:hidden">
|
|
<component
|
|
:is="links?.[0]?.url ? Link : 'span'"
|
|
:href="links?.[0]?.url"
|
|
:aria-disabled="!links?.[0]?.url"
|
|
:tabindex="!links?.[0]?.url ? -1 : 0"
|
|
class="relative inline-flex items-center rounded-md border px-4 py-2 text-sm font-medium"
|
|
:class="
|
|
links?.[0]?.url
|
|
? 'border-gray-300 bg-white text-gray-700 hover:bg-gray-50'
|
|
: 'border-gray-200 bg-gray-100 text-gray-400'
|
|
"
|
|
>
|
|
Prejšnja
|
|
</component>
|
|
<component
|
|
:is="links?.[num - 1]?.url ? Link : 'span'"
|
|
:href="links?.[num - 1]?.url"
|
|
:aria-disabled="!links?.[num - 1]?.url"
|
|
:tabindex="!links?.[num - 1]?.url ? -1 : 0"
|
|
class="relative ml-3 inline-flex items-center rounded-md border px-4 py-2 text-sm font-medium"
|
|
:class="
|
|
links?.[num - 1]?.url
|
|
? 'border-gray-300 bg-white text-gray-700 hover:bg-gray-50'
|
|
: 'border-gray-200 bg-gray-100 text-gray-400'
|
|
"
|
|
>
|
|
Naslednja
|
|
</component>
|
|
</div>
|
|
<div class="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
|
|
<div>
|
|
<p class="text-sm text-gray-700">
|
|
Showing
|
|
<span class="font-medium">{{ from }}</span>
|
|
to
|
|
<span class="font-medium">{{ to }}</span>
|
|
of
|
|
<span class="font-medium">{{ total }}</span>
|
|
results
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<nav
|
|
class="isolate inline-flex -space-x-px rounded-md shadow-sm"
|
|
aria-label="Pagination"
|
|
>
|
|
<template v-for="(item, idx) in windowItems" :key="idx">
|
|
<!-- Prev / Next -->
|
|
<component
|
|
v-if="item.kind === 'prev' || item.kind === 'next'"
|
|
:is="item.link?.url ? Link : 'span'"
|
|
:href="item.link?.url"
|
|
class="relative inline-flex items-center px-2 py-2 ring-1 ring-inset ring-gray-300 focus:z-20 focus:outline-offset-0"
|
|
:class="{
|
|
'rounded-l-md': item.kind === 'prev',
|
|
'rounded-r-md': item.kind === 'next',
|
|
'text-gray-900 hover:bg-gray-50': item.link?.url,
|
|
'text-gray-400 bg-gray-100': !item.link?.url,
|
|
}"
|
|
>
|
|
<span class="sr-only">{{
|
|
item.kind === "prev" ? "Prejšnja" : "Naslednja"
|
|
}}</span>
|
|
<svg
|
|
v-if="item.kind === 'prev'"
|
|
class="h-5 w-5"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
<svg
|
|
v-else
|
|
class="h-5 w-5"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
aria-hidden="true"
|
|
>
|
|
<path
|
|
fill-rule="evenodd"
|
|
d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
|
|
clip-rule="evenodd"
|
|
/>
|
|
</svg>
|
|
</component>
|
|
|
|
<!-- Ellipsis -->
|
|
<span
|
|
v-else-if="item.kind === 'ellipsis'"
|
|
class="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-500 ring-1 ring-inset ring-gray-200 select-none"
|
|
>…</span
|
|
>
|
|
|
|
<!-- Page number -->
|
|
<component
|
|
v-else-if="item.kind === 'page'"
|
|
:is="item.link?.url ? Link : 'span'"
|
|
:href="item.link?.url"
|
|
class="relative inline-flex items-center px-4 py-2 text-sm font-semibold focus:outline-offset-0"
|
|
:class="{
|
|
'text-gray-700 ring-1 ring-inset ring-gray-300': !item.link?.url,
|
|
'text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20':
|
|
item.link?.url && !item.link?.active,
|
|
'z-10 bg-blue-600 text-white focus:z-20 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600':
|
|
item.link?.active,
|
|
}"
|
|
>
|
|
{{ item.link?.label || "" }}
|
|
</component>
|
|
</template>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|