SimplePaginator.vue

<template lang="pug">
.simple-paginator
  ul.paginator
    li.item(@click="$dispatch('click-page', 1)" v-show="existPrevPage")
      i.fa.fa-angle-double-left
    li.item(@click="$dispatch('click-page', currentPage-1)" v-show="existPrevPage")
      i.fa.fa-angle-left
    li.item(@click="$dispatch('click-page', currentPage-window-1)" v-show="existBeforePages")
      i.fa.fa-ellipsis-h
    li.item(
      v-for="p in windowRange"
      v-text="p"
      @click="$dispatch('click-page', p)"
      :class="{ '-current': p == currentPage }"
    )
    li.item(@click="$dispatch('click-page', currentPage+window+1)" v-show="existAfterPages")
      i.fa.fa-ellipsis-h
    li.item(@click="$dispatch('click-page', currentPage+1)" v-show="existNextPage")
      i.fa.fa-angle-right
    li.item(@click="$dispatch('click-page', totalPages)" v-show="existNextPage")
      i.fa.fa-angle-double-right

  .detail
    span(v-text="`${this.totalCount}件中 ${this.pageStart}-${this.pageEnd}件を表示中`")

</template>

<script lang="coffee">
export default
  props:
    window:
      type: Number
      required: false
      default: 2
    totalCount:
      type: Number
      required: true
      coerce: (val) -> parseInt(val, 10)
    totalPages:
      type: Number
      required: true
      coerce: (val) -> parseInt(val, 10)
    currentPage:
      type: Number
      required: true
      coerce: (val) -> parseInt(val, 10)
    limitValue:
      type: Number
      required: true
      coerce: (val) -> parseInt(val, 10)
  computed:
    windowStart: -> _.max([@currentPage - @window, 1])
    windowEnd:   -> _.min([@currentPage + @window, @totalPages])
    windowRange: -> _.range(@windowStart, @windowEnd + 1)
    pageStart:   -> ((@currentPage - 1) * @limitValue) + 1
    pageEnd:     -> _.min([(@currentPage * @limitValue), @totalCount])
    firstPage: -> 1
    lastPage:  -> @totalPages
    existPrevPage: -> if @currentPage == @firstPage then false else true
    existNextPage: -> if @currentPage == @lastPage  then false else true
    existBeforePages: -> if @currentPage - @window <= @firstPage then false else true
    existAfterPages:  -> if @currentPage + @window >= @lastPage  then false else true
</script>

<style lang="scss" scoped>
.simple-paginator {
  > .paginator {
    > .item {
      display: inline-block;
      font-size: $large-font-size;
      padding-left: $small-spacing;
      padding-right: $small-spacing;
      cursor: pointer;
      &.-current {
        background-color: $action-color;
        color: $white;
      }
    }
  }
  > .detail {
    margin-top: $small-spacing;
    font-size: $small-font-size;
  }
}
</style>