76 lines
4.1 KiB
Vue
76 lines
4.1 KiB
Vue
<script setup>
|
|
import { Link } from '@inertiajs/vue3';
|
|
|
|
const props = defineProps({
|
|
links: Array,
|
|
from: Number,
|
|
to: Number,
|
|
total: Number
|
|
});
|
|
|
|
const num = props.links.length;
|
|
|
|
</script>
|
|
<template>
|
|
<div class="flex items-center justify-between bg-white px-4 py-3 sm:px-6">
|
|
<div class="flex flex-1 justify-between sm:hidden">
|
|
<a href="#" class="relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">Previous</a>
|
|
<a href="#" class="relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">Next</a>
|
|
</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="(link, index) in links">
|
|
<component
|
|
:is="link.url ? Link : 'span'"
|
|
v-if="index === 0 || index === (num - 1)"
|
|
:href="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': index === 0,
|
|
'rounded-r-md': index === (num - 1),
|
|
'text-gray-900 hover:bg-gray-50': link.url,
|
|
'text-gray-400 bg-gray-100': ! link.url}"
|
|
>
|
|
|
|
<span class="sr-only">
|
|
{{ index === 0 ? 'Previous' : 'Next' }}
|
|
</span>
|
|
<svg v-if="index === 0" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
|
|
<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" data-slot="icon">
|
|
<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>
|
|
<component
|
|
v-else
|
|
:is="link.url ? Link : 'span'"
|
|
:href="link.url"
|
|
v-html="link.label"
|
|
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': ! link.url,
|
|
'text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-20': link.url && ! 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': link.url && link.active
|
|
}"
|
|
>
|
|
|
|
</component>
|
|
</template>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template> |