Component Request - Page Counter

[farosFreed]

Component Description

This component is used in the Pagination component to display clickable page numbers that navigate to each page of content.

See designs specs for hover states and mobile specific styling rules, including hiding the button text (previous and next) on mobile.

Although there are specs below, it should be easiest to use this design as a starting point https://github.com/celdotro/simple-pagination/blob/master/src/components/SimplePagination.vue

Design

This component will handle FTVA pagination:

Default pagination:

(ignore yellow 1 dot in image)

This component will NOT handle carousel pagination (pictured below), that is already part of the carousel component.

Please see attached design specs for full design details: https://www.figma.com/design/EKazRIMP4B15bD16UDbOwR/UCLA-Library-Design-System?node-id=418-11186&node-type=canvas&t=09RzN7zpPdX7K7Y0-0 https://www.figma.com/design/EKazRIMP4B15bD16UDbOwR/UCLA-Library-Design-System?node-id=418-11186&t=pDSZVGTPLK3kSvZf-0

Slots

I don't believe we will need to use slots for this, but if a use case is found during implementation then we can discuss.

Props

There are 2 required props for this component: totalPages, a number representing the total number of page bubbles in the list currentPage, the number representing the currently highlighted /displayed page

NOTE: It may make more sense to implement currentPage as a v-model attribute to enable 2 way binding https://vuejs.org/guide/components/v-model.html

const props = defineProps({
    totalPages: {
            type: Number,
            required: true
        },
     currentPage: {
            type: Number,
            required: true
        },
})

Optional: instead of emitting an event below, we could take a method to execute on page change as well. This component has that pattern https://github.com/celdotro/simple-pagination/blob/master/src/components/SimplePagination.vue

Developer Tips

It's a good idea to look at other pagination components for patterns that we may want to reuse, especially for the truncation logic for inserting ellipses in the list of page numbers https://github.com/celdotro/simple-pagination/blob/master/src/components/SimplePagination.vue https://nextui.org/docs/components/pagination https://ui.nuxt.com/components/pagination

Events

Describe any events that should be emitted by this component.

1. paginationNavClicked when a page button is clicked on, with the buttons number value emitted with the event. Parent components implementing pagination will need to listen for this event and navigate to the new search results.

Child components

n/a

[farosFreed]

Discussion for team:

Q: Does Page Counter need to be a separate child component from Pagination, or can it just be an enhancement to Pagination component?

My thoughts: Having it as a separate component means we have to pass props and emit events through 2 layers (Pagination and PageCounter), but makes it easier to show/hide it. However, as we are only using it on one page, it doesn't seem like we want to hide it? leaning towards just putting it in Pagination Component

[farosFreed]

Additional note: however we implement themeing for components, we should apply the pattern to this component as well

[farosFreed]

@tinuola brought up the need for truncation in our pagination, so I double checked. It looks like the simple pagination does have a basic implementation of this https://github.com/celdotro/simple-pagination/blob/35dda83ece4a2bd124deebb2279e254bbb1ff938/src/components/SimplePagination.vue#L12