UPagination

Pagination component.

• UButtomPagination added at v1.2
• USlotPagination added at v1.3

default usage

<template>
  <u-pagination class="u-pagination" v-model="page" per-page="20" total="100" />
  <u-button-pagination class="u-pagination" v-model="page" per-page="20" total="100" />
  <u-slot-pagination class="u-pagination" v-model="page" per-page="20" total="100">
    <template #page="{ no, handler, current }">
      <button :disabled="current" @click="handler">{{ no }}</button>
    </template>
  </u-slot-pagination>
</template>
<script>
import { UPagination, UButtonPagination, USlotPagination } from '@ubuilder/pagination';
import '@ubuilder/pagination/styles/default.scss';

export default {
  component: {
    UPagination,
    UButtonPagination,
    USlotPagination,
  },
  data() {
    return {
      page: 1,
    };
  },
},
</script>

model

{
    prop: 'page',
    event: 'update:page',
};

props

All props should integer. Prop validator checks is integer and equals or larger than min number.

{
  page: { // min 1
    type: [Number, String],
    default: 1,
  },
  total: { // min 0
    type: [Number, String],
    required: true,
  },
  perPage: { // min 1
    type: [Number, String],
    default: 20,
  },
  pageButtonCount: { // min 5
    type: [Number, String],
    default: 9,
  },
  tag: { // USlotPagination only
    type: String,
    default: 'nav',
  },
  // USlotPagination only - slot rendering order.
  // Don't pass props to custom named slots, but renders in slotOrder.
  slotOrder: {
    type: Array,
    default: () => [ 'first', 'prev', 'page', 'next', 'last' ],
  },
};

slots

UPagination

<template #current="{ no }">
  <a class="current">{{ no }}</a>
</template>
<template #page="{ no, handler }">
  <a href="#" @click.prevent="handler">{{ no }}</a>
</template>
<template #prev="{ no, handler, disabled }">
  <a v-if="disabled" class="disabled">‹</a>
  <a v-else href="#" @click.prevent="handler">‹</a>
</template>
<template #next="{ no, handler, disabled }">
  <a v-if="disabled" class="disabled">›</a>
  <a v-else href="#" @click.prevent="handler">›</a>
</template>
<template #ellipsis>
  ⋯
</template>

UButtonPagination, USlotPagination

USlotPagination don't have default rendering. Should provide slot template.

<template #page="{ no, handler, current }">
  <button :disabled="current" @click="handler">{{ no }}</a>
</template>
<template #first="{ no, handler, disabled }">
  <button :disabled="disabled" @click.prevent="handler">«</a>
</template>
<template #prev="{ no, handler, disabled }">
  <button :disabled="disabled" @click.prevent="handler">‹</a>
</template>
<template #next="{ no, handler, disabled }">
  <button :disabled="disabled" @click.prevent="handler">›</a>
</template>
<template #last="{ no, handler, disabled }">
  <button :disabled="disabled" @click.prevent="handler">»</a>
</template>

rendering example

<nav>
 <ul>
  <li><a class="current">1</a></li>
  <li><a href="#">2</a></li>
  <li>⋯</li>
  <li><a href="#">10</a></li>
  <li><a class="disabled">‹</a></li>
  <li><a href="#">›</a></li>
 </ul>
</nav>

default scss

.u-pagination {
  margin: 0;
  padding: 0;

  & > ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;

    & > li {
      margin: 0.25rem;
      padding: 0;
      min-width: 2.25rem;
      color: #666;
      text-align: center;

      & > a {
        display: flex;
        color: #333;
        border: 1px solid #ccc;
        text-decoration: none;
        outline-style: none;

        box-sizing: border-box;
        border-radius: 0.25rem;
        min-width: 2.25rem;
        margin: 0;
        padding: 0.5rem;
        justify-content: center;

        &:hover {
          color: black;
          border-color: #666;
          box-shadow: 0 0 0.25rem #666;

          &.current,
          &.disabled {
            border-color: #ccc;
            box-shadow: none;
          }
        }

        &:focus {
          color: black;
          border-color: #666;
        }

        &.current {
          background-color: #333;
          color: white;
        }

        &.disabled {
          background-color: #ccc;
          color: #999;
        }
      }
    }
  }
}