vuejs-paginate
vuejs-paginate copied to clipboard
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!
would love to do the same..just feels more like the vue-way to use slots.. but great component, love it!
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.
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
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 ✌️
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>