add nova
This commit is contained in:
181
nova/resources/js/components/Pagination/PaginationLinks.vue
Normal file
181
nova/resources/js/components/Pagination/PaginationLinks.vue
Normal file
@@ -0,0 +1,181 @@
|
||||
<template>
|
||||
<nav class="rounded-b-lg font-bold flex items-center">
|
||||
<div class="flex text-sm">
|
||||
<!-- First Link -->
|
||||
<button
|
||||
:disabled="!hasPreviousPages || linksDisabled"
|
||||
class="border-r border-gray-200 dark:border-gray-700 text-xl h-9 min-w-9 px-2 rounded-bl-lg focus:outline-none focus:bg-gray-50 hover:bg-gray-50 dark:hover:bg-gray-700"
|
||||
:class="{
|
||||
'text-gray-500': hasPreviousPages,
|
||||
'text-gray-500': !hasPreviousPages || linksDisabled,
|
||||
}"
|
||||
rel="first"
|
||||
@click.prevent="selectPage(1)"
|
||||
dusk="first"
|
||||
>
|
||||
«
|
||||
</button>
|
||||
|
||||
<!-- Previous Link -->
|
||||
<button
|
||||
:disabled="!hasPreviousPages || linksDisabled"
|
||||
class="border-r border-gray-200 dark:border-gray-700 text-xl h-9 min-w-9 px-2 focus:outline-none focus:bg-gray-50 hover:bg-gray-50 dark:hover:bg-gray-700"
|
||||
:class="{
|
||||
'text-gray-500': hasPreviousPages,
|
||||
'text-gray-500': !hasPreviousPages || linksDisabled,
|
||||
}"
|
||||
rel="prev"
|
||||
@click.prevent="selectPreviousPage()"
|
||||
dusk="previous"
|
||||
>
|
||||
‹
|
||||
</button>
|
||||
|
||||
<!-- Pages Links -->
|
||||
<button
|
||||
:disabled="linksDisabled"
|
||||
v-for="n in printPages"
|
||||
:key="n"
|
||||
class="border-r border-gray-200 dark:border-gray-700 h-9 min-w-9 px-2 focus:outline-none focus:bg-gray-50 hover:bg-gray-50 dark:hover:bg-gray-700"
|
||||
:class="{
|
||||
'text-gray-500': page !== n,
|
||||
'text-gray-500 bg-gray-50 dark:bg-gray-700': page === n,
|
||||
}"
|
||||
@click.prevent="selectPage(n)"
|
||||
:dusk="`page:${n}`"
|
||||
>
|
||||
{{ n }}
|
||||
</button>
|
||||
|
||||
<!-- Next Link -->
|
||||
<button
|
||||
:disabled="!hasMorePages || linksDisabled"
|
||||
class="border-r border-gray-200 dark:border-gray-700 text-xl h-9 min-w-9 px-2 focus:outline-none focus:bg-gray-50 hover:bg-gray-50 dark:hover:bg-gray-700"
|
||||
:class="{
|
||||
'text-gray-500': hasMorePages,
|
||||
'text-gray-500': !hasMorePages || linksDisabled,
|
||||
}"
|
||||
rel="next"
|
||||
@click.prevent="selectNextPage()"
|
||||
dusk="next"
|
||||
>
|
||||
›
|
||||
</button>
|
||||
|
||||
<!-- Last Link -->
|
||||
<button
|
||||
:disabled="!hasMorePages || linksDisabled"
|
||||
class="border-r border-gray-200 dark:border-gray-700 text-xl h-9 min-w-9 px-2 focus:outline-none focus:bg-gray-50 hover:bg-gray-50 dark:hover:bg-gray-700"
|
||||
:class="{
|
||||
'text-gray-500': hasMorePages,
|
||||
'text-gray-500': !hasMorePages || linksDisabled,
|
||||
}"
|
||||
rel="last"
|
||||
@click.prevent="selectPage(pages)"
|
||||
dusk="last"
|
||||
>
|
||||
»
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<slot />
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
emits: ['page'],
|
||||
|
||||
props: {
|
||||
page: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
pages: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
next: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
previous: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
|
||||
data: () => ({ linksDisabled: false }),
|
||||
|
||||
mounted() {
|
||||
Nova.$on('resources-loaded', this.listenToResourcesLoaded)
|
||||
},
|
||||
|
||||
beforeUnmount() {
|
||||
Nova.$off('resources-loaded', this.listenToResourcesLoaded)
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* Select the page.
|
||||
*/
|
||||
selectPage(page) {
|
||||
if (this.page != page) {
|
||||
this.linksDisabled = true
|
||||
this.$emit('page', page)
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Select the previous page.
|
||||
*/
|
||||
selectPreviousPage() {
|
||||
this.selectPage(this.page - 1)
|
||||
},
|
||||
|
||||
/**
|
||||
* Select the next page.
|
||||
*/
|
||||
selectNextPage() {
|
||||
this.selectPage(this.page + 1)
|
||||
},
|
||||
|
||||
listenToResourcesLoaded() {
|
||||
this.linksDisabled = false
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
/**
|
||||
* Determine if prior pages are available.
|
||||
*/
|
||||
hasPreviousPages: function () {
|
||||
return this.page > 1
|
||||
},
|
||||
|
||||
/**
|
||||
* Determine if more pages are available.
|
||||
*/
|
||||
hasMorePages: function () {
|
||||
return this.page < this.pages
|
||||
},
|
||||
|
||||
/**
|
||||
* Get printable pages.
|
||||
*/
|
||||
printPages() {
|
||||
const middlePage = Math.min(Math.max(3, this.page), this.pages - 2),
|
||||
fromPage = Math.max(middlePage - 2, 1),
|
||||
toPage = Math.min(middlePage + 2, this.pages)
|
||||
|
||||
let pages = []
|
||||
|
||||
for (let n = fromPage; n <= toPage; ++n) {
|
||||
if (n > 0) pages.push(n)
|
||||
}
|
||||
|
||||
return pages
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<div
|
||||
class="bg-20 h-9 px-3 text-center rounded-b-lg flex items-center justify-between"
|
||||
>
|
||||
<p class="leading-normal text-sm text-gray-500">{{ resourceCountLabel }}</p>
|
||||
|
||||
<p v-if="allResourcesLoaded" class="leading-normal text-sm">
|
||||
{{ __('All resources loaded.') }}
|
||||
</p>
|
||||
|
||||
<button
|
||||
v-else
|
||||
@click="loadMore"
|
||||
class="h-9 focus:outline-none focus:ring ring-inset rounded-lg px-4 font-bold text-primary-500 hover:text-primary-600 active:text-primary-400"
|
||||
>
|
||||
{{ buttonLabel }}
|
||||
</button>
|
||||
|
||||
<p class="leading-normal text-sm text-gray-500">
|
||||
{{ __(':amount Total', { amount: resourceTotalCountLabel }) }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
emits: ['load-more'],
|
||||
|
||||
props: {
|
||||
currentResourceCount: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
allMatchingResourceCount: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
resourceCountLabel: {
|
||||
type: String,
|
||||
required: true,
|
||||
},
|
||||
perPage: {
|
||||
type: [Number, String],
|
||||
required: true,
|
||||
},
|
||||
page: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
pages: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
next: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
previous: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
loadMore() {
|
||||
this.$emit('load-more')
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
buttonLabel() {
|
||||
return this.__('Load :perPage More', {
|
||||
perPage: Nova.formatNumber(this.perPage),
|
||||
})
|
||||
},
|
||||
|
||||
allResourcesLoaded() {
|
||||
return this.currentResourceCount == this.allMatchingResourceCount
|
||||
},
|
||||
|
||||
resourceTotalCountLabel() {
|
||||
return Nova.formatNumber(this.allMatchingResourceCount)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
131
nova/resources/js/components/Pagination/PaginationSimple.vue
Normal file
131
nova/resources/js/components/Pagination/PaginationSimple.vue
Normal file
@@ -0,0 +1,131 @@
|
||||
<template>
|
||||
<div class="rounded-b-lg">
|
||||
<nav class="flex justify-between items-center">
|
||||
<!-- Previous Link -->
|
||||
<button
|
||||
:disabled="!hasPreviousPages || linksDisabled"
|
||||
class="text-xs font-bold py-3 px-4 focus:outline-none rounded-bl-lg focus:ring focus:ring-inset"
|
||||
:class="{
|
||||
'text-primary-500 hover:text-primary-400 active:text-primary-600':
|
||||
hasPreviousPages,
|
||||
'text-gray-300 dark:text-gray-600':
|
||||
!hasPreviousPages || linksDisabled,
|
||||
}"
|
||||
rel="prev"
|
||||
@click.prevent="selectPreviousPage"
|
||||
dusk="previous"
|
||||
>
|
||||
{{ __('Previous') }}
|
||||
</button>
|
||||
|
||||
<slot />
|
||||
|
||||
<!-- Next Link -->
|
||||
<button
|
||||
:disabled="!hasMorePages || linksDisabled"
|
||||
class="text-xs font-bold py-3 px-4 focus:outline-none rounded-br-lg focus:ring focus:ring-inset"
|
||||
:class="{
|
||||
'text-primary-500 hover:text-primary-400 active:text-primary-600':
|
||||
hasMorePages,
|
||||
'text-gray-300 dark:text-gray-600': !hasMorePages || linksDisabled,
|
||||
}"
|
||||
rel="next"
|
||||
@click.prevent="selectNextPage"
|
||||
dusk="next"
|
||||
>
|
||||
{{ __('Next') }}
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
emits: ['page'],
|
||||
|
||||
props: {
|
||||
currentResourceCount: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
allMatchingResourceCount: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
resourceCountLabel: {
|
||||
type: [Number, String],
|
||||
required: true,
|
||||
},
|
||||
page: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
pages: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
next: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
previous: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
|
||||
data: () => ({ linksDisabled: false }),
|
||||
|
||||
mounted() {
|
||||
Nova.$on('resources-loaded', this.listenToResourcesLoaded)
|
||||
},
|
||||
|
||||
beforeUnmount() {
|
||||
Nova.$off('resources-loaded', this.listenToResourcesLoaded)
|
||||
},
|
||||
|
||||
methods: {
|
||||
/**
|
||||
* Select the previous page.
|
||||
*/
|
||||
selectPreviousPage() {
|
||||
this.selectPage(this.page - 1)
|
||||
},
|
||||
|
||||
/**
|
||||
* Select the next page.
|
||||
*/
|
||||
selectNextPage() {
|
||||
this.selectPage(this.page + 1)
|
||||
},
|
||||
|
||||
/**
|
||||
* Select the page.
|
||||
*/
|
||||
selectPage(page) {
|
||||
this.linksDisabled = true
|
||||
this.$emit('page', page)
|
||||
},
|
||||
|
||||
listenToResourcesLoaded() {
|
||||
this.linksDisabled = false
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
/**
|
||||
* Determine if prior pages are available.
|
||||
*/
|
||||
hasPreviousPages: function () {
|
||||
return this.previous
|
||||
},
|
||||
|
||||
/**
|
||||
* Determine if more pages are available.
|
||||
*/
|
||||
hasMorePages: function () {
|
||||
return this.next
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
@@ -0,0 +1,47 @@
|
||||
<template>
|
||||
<!-- Pagination -->
|
||||
<div class="border-t border-gray-200 dark:border-gray-700">
|
||||
<component
|
||||
:is="paginationComponent"
|
||||
:next="hasNextPage"
|
||||
:previous="hasPreviousPage"
|
||||
@load-more="loadMore"
|
||||
@page="selectPage"
|
||||
:pages="totalPages"
|
||||
:page="currentPage"
|
||||
:per-page="perPage"
|
||||
:resource-count-label="resourceCountLabel"
|
||||
:current-resource-count="currentResourceCount"
|
||||
:all-matching-resource-count="allMatchingResourceCount"
|
||||
>
|
||||
<span
|
||||
v-if="resourceCountLabel"
|
||||
class="text-xs px-4"
|
||||
:class="{
|
||||
'ml-auto hidden md:inline':
|
||||
paginationComponent === 'pagination-links',
|
||||
}"
|
||||
>
|
||||
{{ resourceCountLabel }}
|
||||
</span>
|
||||
</component>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: [
|
||||
'paginationComponent',
|
||||
'hasNextPage',
|
||||
'hasPreviousPage',
|
||||
'loadMore',
|
||||
'selectPage',
|
||||
'totalPages',
|
||||
'currentPage',
|
||||
'perPage',
|
||||
'resourceCountLabel',
|
||||
'currentResourceCount',
|
||||
'allMatchingResourceCount',
|
||||
],
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user