Skip to content

Commit

Permalink
feat: match pagination component to related plugin (#29)
Browse files Browse the repository at this point in the history
  • Loading branch information
@bpsmartdesign
bpsmartdesign committed Aug 7, 2023
1 parent c53ed23 commit f65cbf2
Show file tree
Hide file tree
Showing 2 changed files with 69 additions and 62 deletions.
39 changes: 38 additions & 1 deletion .playground/pages/tests/data-display/pagination.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,45 @@ definePageMeta({
>
<div>
<BaseHeading size="xl" weight="medium" class="mb-10">
Pagination
Pagination Shape
</BaseHeading>
<div class="grid grid-cols-3 gap-4">
<BasePagination
:item-per-page="4"
:total-items="200"
:current-page="4"
:max-links-displayed="2"
shape="straight"
/>
<BasePagination
:item-per-page="4"
:total-items="200"
:current-page="4"
:max-links-displayed="2"
shape="rounded"
/>
<BasePagination
:item-per-page="4"
:total-items="200"
:current-page="4"
:max-links-displayed="2"
shape="smooth"
/>
<BasePagination
:item-per-page="4"
:total-items="200"
:current-page="4"
:max-links-displayed="2"
shape="curved"
/>
<BasePagination
:item-per-page="4"
:total-items="200"
:current-page="4"
:max-links-displayed="2"
shape="full"
/>
</div>
</div>
</div>
</template>
92 changes: 31 additions & 61 deletions components/base/BasePagination.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ const props = withDefaults(
/**
* The shape of the pagination.
*/
shape?: 'straight' | 'rounded' | 'curved' | 'full'
shape?: 'straight' | 'rounded' | 'smooth' | 'curved' | 'full'
/**
* The icon to show for the previous button.
Expand Down Expand Up @@ -73,6 +73,14 @@ const shape = computed(
() => props.shape ?? appConfig.nui.defaultShapes?.pagination
)
const shapeStyle = {
straight: '',
rounded: 'nui-pagination-rounded',
smooth: 'nui-pagination-smooth',
curved: 'nui-pagination-curved',
full: 'nui-pagination-full',
}
const route = useRoute()
const lastPage = computed(
() => Math.ceil(props.totalItems / props.itemPerPage) || 1
Expand Down Expand Up @@ -146,30 +154,22 @@ const handleLinkClick = (e: MouseEvent, page = 1) => {
</script>

<template>
<div class="inline-flex w-full flex-col md:flex-row md:justify-between">
<div class="nui-pagination" :class="[shape && shapeStyle[props.shape]]">
<BaseFocusLoop
as="ul"
class="border-muted-200 bg-muted-100 dark:border-muted-600 dark:bg-muted-700 mb-4 inline-flex flex-wrap gap-2 border p-1 md:mb-0 md:gap-1"
:class="[
shape === 'rounded' && 'rounded-md',
shape === 'curved' && 'rounded-xl',
shape === 'full' && 'rounded-full',
]"
class="nui-pagination-list"
:class="shape && shapeStyle[props.shape]"
>
<slot name="before-pagination"></slot>
<!-- Link -->
<li>
<NuxtLink
:to="paginatedLink(1)"
tabindex="0"
class="flex h-10 w-10 items-center justify-center border font-sans text-sm transition-all duration-300"
class="nui-pagination-link"
:class="[
currentPage === 1
? 'bg-primary-500 border-primary-500 shadow-primary-500/50 dark:shadow-primary-500/20 text-white shadow-sm'
: 'dark:bg-muted-800 border-muted-200 dark:border-muted-700 hover:bg-muted-100 dark:hover:bg-muted-900 text-muted-500 hover:text-muted-700 dark:hover:text-muted-400 bg-white',
shape === 'rounded' && 'rounded-md',
shape === 'curved' && 'rounded-xl',
shape === 'full' && 'rounded-full',
currentPage === 1 && 'nui-active',
shape && shapeStyle[props.shape],
]"
@keydown.space="(e:any) => (e.target as HTMLAnchorElement).click()"
@click="(e:any) => handleLinkClick(e, 1)"
Expand All @@ -181,12 +181,8 @@ const handleLinkClick = (e: MouseEvent, page = 1) => {
<!-- Ellipsis -->
<li v-if="showLastLink && pages.length > 0 && pages[0] > 2">
<span
class="border-muted-200 text-muted-500 dark:border-muted-700 dark:bg-muted-800 flex h-10 w-10 items-center justify-center bg-white font-sans text-sm"
:class="[
shape === 'rounded' && 'rounded-md',
shape === 'curved' && 'rounded-xl',
shape === 'full' && 'rounded-full',
]"
class="nui-pagination-ellipsis"
:class="[shape && shapeStyle[props.shape]]"
>
{{ props.ellipsis }}
</span>
Expand All @@ -198,14 +194,10 @@ const handleLinkClick = (e: MouseEvent, page = 1) => {
:to="paginatedLink(page)"
tabindex="0"
:aria-current="currentPage === page ? 'page' : undefined"
class="flex h-10 w-10 items-center justify-center font-sans text-sm transition-all duration-300"
class="nui-pagination-link"
:class="[
currentPage === page
? 'bg-primary-500 border-primary-500 shadow-primary-500/50 dark:shadow-primary-500/20 text-white shadow-sm'
: 'dark:bg-muted-800 border-muted-200 dark:border-muted-700 hover:bg-muted-100 dark:hover:bg-muted-900 text-muted-500 hover:text-muted-700 dark:hover:text-muted-400 bg-white',
shape === 'rounded' && 'rounded-md',
shape === 'curved' && 'rounded-xl',
shape === 'full' && 'rounded-full',
currentPage === page && 'nui-active',
shape && shapeStyle[props.shape],
]"
@keydown.space="(e:any) => (e.target as HTMLAnchorElement).click()"
@click="(e:any) => handleLinkClick(e, page)"
Expand All @@ -217,12 +209,8 @@ const handleLinkClick = (e: MouseEvent, page = 1) => {
<!-- Ellipsis -->
<li v-if="showLastLink && pages[pages.length - 1] < lastPage - 1">
<span
class="border-muted-200 text-muted-500 dark:border-muted-700 dark:bg-muted-800 flex h-10 w-10 items-center justify-center bg-white font-sans text-sm"
:class="[
shape === 'rounded' && 'rounded-md',
shape === 'curved' && 'rounded-xl',
shape === 'full' && 'rounded-full',
]"
class="nui-pagination-ellipsis"
:class="[shape && shapeStyle[props.shape]]"
>
{{ props.ellipsis }}
</span>
Expand All @@ -233,14 +221,10 @@ const handleLinkClick = (e: MouseEvent, page = 1) => {
<NuxtLink
:to="paginatedLink(lastPage)"
tabindex="0"
class="flex h-10 w-10 items-center justify-center font-sans text-sm transition-all duration-300"
class="nui-pagination-link"
:class="[
currentPage === lastPage
? 'bg-primary-500 border-primary-500 shadow-primary-500/50 dark:shadow-primary-500/20 text-white shadow-sm'
: 'dark:bg-muted-800 border-muted-200 dark:border-muted-700 hover:bg-muted-100 dark:hover:bg-muted-900 text-muted-500 hover:text-muted-700 dark:hover:text-muted-400 bg-white',
shape === 'rounded' && 'rounded-md',
shape === 'curved' && 'rounded-xl',
shape === 'full' && 'rounded-full',
currentPage === lastPage && 'nui-active',
shape && shapeStyle[props.shape],
]"
@keydown.space="(e:any) => (e.target as HTMLAnchorElement).click()"
@click="(e:any) => handleLinkClick(e, lastPage)"
Expand All @@ -252,45 +236,31 @@ const handleLinkClick = (e: MouseEvent, page = 1) => {
</BaseFocusLoop>

<BaseFocusLoop
class="border-muted-200 bg-muted-100 dark:border-muted-600 dark:bg-muted-700 flex items-center justify-end gap-1 border p-1"
:class="[
shape === 'rounded' && 'rounded-md',
shape === 'curved' && 'rounded-xl',
shape === 'full' && 'rounded-full',
]"
class="nui-pagination-buttons"
:class="shape && shapeStyle[props.shape]"
>
<slot name="before-navigation"></slot>

<!-- Previous -->
<NuxtLink
:to="paginatedLink(currentPage - 1)"
tabindex="0"
class="border-muted-200 text-muted-500 hover:bg-muted-100 hover:text-muted-700 dark:border-muted-700 dark:bg-muted-800 dark:hover:bg-muted-900 dark:hover:text-muted-400 flex h-10 w-full items-center justify-center bg-white font-sans text-sm transition-all duration-300 md:w-10"
:class="[
shape === 'rounded' && 'rounded-md',
shape === 'curved' && 'rounded-xl',
shape === 'full' && 'rounded-full',
]"
class="nui-pagination-button"
@keydown.space="(e:any) => (e.target as HTMLAnchorElement).click()"
@click="(e:any) => handleLinkClick(e, currentPage - 1)"
>
<Icon :name="previousIcon" class="block h-4 w-4" />
<Icon :name="previousIcon" class="pagination-button-icon" />
</NuxtLink>

<!-- Next -->
<NuxtLink
:to="paginatedLink(currentPage + 1)"
tabindex="0"
class="border-muted-200 text-muted-500 hover:bg-muted-100 hover:text-muted-700 dark:border-muted-700 dark:bg-muted-800 dark:hover:bg-muted-900 dark:hover:text-muted-400 flex h-10 w-full items-center justify-center bg-white font-sans text-sm transition-all duration-300 md:w-10"
:class="[
shape === 'rounded' && 'rounded-md',
shape === 'curved' && 'rounded-xl',
shape === 'full' && 'rounded-full',
]"
class="nui-pagination-button"
@keydown.space="(e:any) => (e.target as HTMLAnchorElement).click()"
@click="(e:any) => handleLinkClick(e, currentPage + 1)"
>
<Icon :name="nextIcon" class="block h-4 w-4" />
<Icon :name="nextIcon" class="pagination-button-icon" />
</NuxtLink>
<slot name="after-navigation"></slot>
</BaseFocusLoop>
Expand Down

0 comments on commit f65cbf2

Please sign in to comment.