Support component for prev and next buttons

[mr-raccoon-dev]

Hi, @lokyoung

I saw that you remove support for prevContent and nextContent slots after 1.9.5 version. You replaced it with using next-text and prev-text props (using html there). But now I can't use custom components for these buttons. Can you revert prevContent and nextContent slots?

Thanks!

[3Descape]

would love to do the same..just feels more like the vue-way to use slots.. but great component, love it!

[tyteen4a03]

This is sorely needed - Foundation 6 expects pagination-previous disabled and pagination-next disabled to not have <a> links inside the <li>, but right now it's not possible to do this in this package.

[AwsmOli]

One additional point for this: We are Using PUG to write our templates - but the properties do only support regular HTML - with slots it would work fine with whatever template engine i would choose

[yuxino]

I install old version and it work ..

> yarn add vuejs-paginate@1.9.4

[renatodeleao]

Hey, i'm also trying to understand why this was removed.

Most vue codebases have icon components or custom buttons that need to be passed to this kind of plugin slots, instead of relying on css trickery.

If still want to allow raw html to be passed as prop just conditionally display the slot:

<!-- the easy way is to add a span for the html since we can't conditionally add v-html -->
 <a 
  @click="prevPage()" 
  @keyup.enter="prevPage()" 
  :class="prevLinkClass" 
  :tabindex="firstPageSelected() ? -1 : 0" 
 >
 <span v-if="!$slots.prevLinkContent" v-html="prevText" />
 <slot v-else name="prevLinkContent"/>
</a>

A more ugly, but working approach if you don't want the extra 'span' (computing attributes and events into computed props and using v-bind and v-on would clean it up)

<!-- the easy way is to add a span for the html since we can't conditionally add v-html -->
 <a 
  @click="prevPage()" 
  @keyup.enter="prevPage()" 
  :class="prevLinkClass" 
  :tabindex="firstPageSelected() ? -1 : 0" 
  v-html="prevText"
  v-if="!$slots.prevLinkContent"
 />
<a 
  v-else
  @click="prevPage()" 
  @keyup.enter="prevPage()" 
  :class="prevLinkClass" 
  :tabindex="firstPageSelected() ? -1 : 0" 
 />
 <slot name="prevLinkContent"/>
</a>

Then

<vuejs-paginate>
   <template #prevLinkContent>
     <my-custom-icon-component />
  </template>
</vuejs-paginate>

A more radical approach

As i've mentioned besides "custom content", we might want to pass a custom link entirely from our own design system/framework. For that we could expose the methods and attributes via slot-scope.

<slot 
  name="prevLink" 
  v-bind="{
    prevLinkEvents: { 
      click: prevPage,
      keyup: prevPage // just add if (e.key === 'Enter') verification to the method
    },
    prevLinkAttrs: {
       tabindex: firstPageSelected() ? -1 : 0,
       class: prevLinkClass
    }
  }"
>
  <!-- for those who don't pass slots-->
  <a 
    @click="prevPage()" 
    @keyup.enter="prevPage()" 
    :class="prevLinkClass" 
    :tabindex="firstPageSelected() ? -1 : 0" 
    v-html="prevText"
  />
</slot>

<vuejs-paginate>
   <template #prevLink="{ prevLinkEvents, prevLinkAttrs }">
     <my-custom-button v-bind="prevLinkAttrs" v-on="prevLinkEvents" />
  </template>
</vuejs-paginate>

Contributing

The package seems unmaintained judging by the repo activity. It's fine, i also have my own unmaintained plugins, but just probing if should just fork or if there's plans to future releases or updates.

Cheers ✌️

[nullablebool]

Feel free to install my fork:

npm npm i --save-dev nullablebool/vuejs-paginate yarn yarn add https://github.com/nullablebool/vuejs-paginate -D

Slot example

<paginate ...>
    <template v-slot:prev>
        <icon name="chevron-left" />
    </template>
    <template v-slot:next>
        <icon name="chevron-right" />
    </template>
</paginate>