Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added pageinate-links custom tag support & improved compatibility #56

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Added pageinate-links custom tag support & improved compatibility #56

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 64 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ Now, let’s see them in an example:
### Example

In this example, we have a small list of items registered in our data list.

``` js
new Vue({
el: '#app',
Expand Down Expand Up @@ -427,6 +427,69 @@ Here's an example:

Note that this feature works on all link types – full links, simple links, and limited links.

#### Custom Link Tag Support

In some UI framework (such as [Semantic UI](https://semantic-ui.com/)), pagination menu is not supported by `<ul>`, `<li>` and `<a>` tag. Therefore, we allow tag customization in `paginate-links` with additional props.

Default values renders to the following structure:

```html
<ul>
<li><a>1</a></li>
<li><a>2</a></li>
...
</ul>
```

We call the `<ul>` tag paginate link **container**, the `<li>` tag paginate list **item**, the `<a>` tag paginate **link**.

Assume we want to achieve something like this:

```html
<div>
<a><span>1</span></a>
<a><span>2</span></a>
...
</div>
```

and let the click event handled in `<a>` tag at **item** level, we can customize tags such by setting props like this:

```vue
<paginate-links
containerTag="div"
itemTag="a"
linkTag="span"
clickHandlerTag="item"
></paginate-links>
```

Note that the `clickHandlerTag` should be either `item` or by default `link`. Then by properly setting the classes prop, like

```vue
<paginate-links
for="languages"
containerTag="div"
itemTag="a"
linkTag="span"
clickHandlerTag="item"
v-bind:classes="{ 'a': [ 'item' ] }"
class="ui pagination menu"
></paginate-links>
```

We can achieve something like this,

```html
<div class="ui pagination menu">
<a class="item"><span>1</span></a>
<a class="item"><span>2</span></a>
...
</div>
```

as indicated in the [Semantic UI docs](https://semantic-ui.com/collections/menu.html#pagination) (`<span>` does not influence the formatting here).

## License

[MIT](http://opensource.org/licenses/MIT)
Expand Down
133 changes: 79 additions & 54 deletions dist/vue-paginate.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6707,6 +6707,23 @@
async: {
type: Boolean,
default: false
},
containerTag: {
type: String,
default: 'ul'
},
itemTag: {
type: String,
default: 'li'
},
linkTag: {
type: String,
default: 'a'
},
clickHandlerTag: {
type: String,
default: 'link',
validator: function (value) { return ['item', 'link'].indexOf(value) !== -1; }
}
},
data: function data () {
Expand Down Expand Up @@ -6789,13 +6806,13 @@
return null
}

var el = h('ul', {
var el = h(this.containerTag, {
class: ['paginate-links', this.for]
}, links)

if (this.classes) {
Vue$3.nextTick(function () {
addAdditionalClasses(el.elm, this$1.classes)
addAdditionalClasses(el.elm, this$1.classes, this$1.containerTag)
})
}
return el
Expand All @@ -6807,19 +6824,15 @@
? [vm.stepLinks.prev ].concat( vm.listOfPages, [vm.stepLinks.next])
: vm.listOfPages
return allLinks.map(function (link) {
var data = {
on: {
click: function (e) {
e.preventDefault()
vm.currentPage = getTargetPageForLink(
link,
vm.limit,
vm.currentPage,
vm.listOfPages,
vm.stepLinks
)
}
}
var clickHandler = function (e) {
e.preventDefault()
vm.currentPage = getTargetPageForLink(
link,
vm.limit,
vm.currentPage,
vm.listOfPages,
vm.stepLinks
)
}
var liClasses = getClassesForLink(
link,
Expand All @@ -6830,7 +6843,9 @@
var linkText = link === vm.stepLinks.next || link === vm.stepLinks.prev
? link
: link + 1 // it means it's a number
return h('li', { class: liClasses }, [h('a', data, linkText)])
return vm.clickHandlerTag === 'link'
? h(vm.itemTag, { class: liClasses }, [h(vm.linkTag, { on: { click: clickHandler } }, linkText)])
: h(vm.itemTag, { class: liClasses, on: { click: clickHandler } }, [h(vm.linkTag, {}, linkText)])
})
}

Expand All @@ -6849,20 +6864,16 @@
var limitedLinksMetadata = getLimitedLinksMetadata(limitedLinks)

return limitedLinks.map(function (link, index) {
var data = {
on: {
click: function (e) {
e.preventDefault()
vm.currentPage = getTargetPageForLink(
link,
vm.limit,
vm.currentPage,
vm.listOfPages,
vm.stepLinks,
limitedLinksMetadata[index]
)
}
}
var clickHandler = function (e) {
e.preventDefault()
vm.currentPage = getTargetPageForLink(
link,
vm.limit,
vm.currentPage,
vm.listOfPages,
vm.stepLinks,
limitedLinksMetadata[index]
)
}
var liClasses = getClassesForLink(
link,
Expand All @@ -6874,32 +6885,42 @@
// then incremented by 1 (since it's 0 based).
// otherwise, do nothing (so, it's a symbol).
var text = Number.isInteger(link) ? link + 1 : link
return h('li', { class: liClasses }, [h('a', data, text)])
return vm.clickHandler === 'link'
? h(vm.itemTag, { class: liClasses }, [h(vm.linkTag, { on: { click: clickHandler } }, text)])
: h(vm.itemTag, { class: liClasses, on: { click: clickHandler } }, [h(vm.linkTag, {}, text)])
})
}

function getSimpleLinks (vm, h) {
var lastPage = vm.listOfPages.length - 1
var prevClickHandler = function (e) {
e.preventDefault()
if (vm.currentPage > 0) { vm.currentPage -= 1 }
}
var nextClickHandler = function (e) {
e.preventDefault()
if (vm.currentPage < lastPage) { vm.currentPage += 1 }
}
var prevData = {
on: {
click: function (e) {
e.preventDefault()
if (vm.currentPage > 0) { vm.currentPage -= 1 }
}
click: prevClickHandler
}
}

var nextData = {
on: {
click: function (e) {
e.preventDefault()
if (vm.currentPage < lastPage) { vm.currentPage += 1 }
}
}
}
var nextListData = { class: ['next', vm.currentPage >= lastPage ? 'disabled' : ''] }
var prevListData = { class: ['prev', vm.currentPage <= 0 ? 'disabled' : ''] }
var prevLink = h('li', prevListData, [h('a', prevData, vm.simple.prev)])
var nextLink = h('li', nextListData, [h('a', nextData, vm.simple.next)])
click: nextClickHandler
}
}
var nextListClass = ['next', vm.currentPage >= lastPage ? 'disabled' : '']
var prevListClass = ['prev', vm.currentPage <= 0 ? 'disabled' : '']
var prevLink = vm.clickHandlerTag === 'link'
? h(vm.itemTag, { class: prevListClass }, [h(this.containerTag, { on: { click: prevClickHandler } }, vm.simple.prev)])
: h(vm.itemTag, { class: prevListClass, on: { click: prevClickHandler } }, [h(this.containerTag, {}, vm.simple.prev)])
var nextLink = vm.clickHandlerTag === 'link'
? h(vm.itemTag, { class: nextListClass }, [h(this.containerTag, { on: { click: nextClickHandler } }, vm.simple.next)])
: h(vm.itemTag, { class: nextListClass, on: { click: nextClickHandler } }, [h(this.containerTag, {}, vm.simple.next)])

return [prevLink, nextLink]
}

Expand Down Expand Up @@ -6985,24 +7006,28 @@
})
}

function addAdditionalClasses (linksContainer, classes) {
function addAdditionalClasses (linksContainer, classes, containerTag) {
Object.keys(classes).forEach(function (selector) {
if (selector === 'ul') {
var selectorValue = classes['ul']
if (selector === containerTag) {
var selectorValue = classes[containerTag]
if (Array.isArray(selectorValue)) {
selectorValue.forEach(function (c) { return linksContainer.classList.add(c); })
} else {
linksContainer.classList.add(selectorValue)
}
}
linksContainer.querySelectorAll(selector).forEach(function (node) {
var selectorValue = classes[selector]
if (Array.isArray(selectorValue)) {
selectorValue.forEach(function (c) { return node.classList.add(c); })
var selectedTags = linksContainer.querySelectorAll(selector)
var loop = function ( i ) {
var node = selectedTags[i]
var selectorValue$1 = classes[selector]
if (Array.isArray(selectorValue$1)) {
selectorValue$1.forEach(function (c) { return node.classList.add(c); })
} else {
node.classList.add(selectorValue)
node.classList.add(selectorValue$1)
}
})
};

for (var i = 0; i < selectedTags.length; ++i) loop( i );
})
}

Expand Down
6 changes: 3 additions & 3 deletions dist/vue-paginate.min.js
View file
Open in desktop

Large diffs are not rendered by default.

Loading