Support component for prev and next buttons

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!

[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 ✌️