@vuesimple/vs-pagination
Version:
A simple vue pagination
190 lines (189 loc) • 7.43 kB
JavaScript
(function(){ try {var elementStyle = document.createElement('style'); elementStyle.appendChild(document.createTextNode(".vs-pagination{--page-bg-color: #f0f5fb;--page-color: #68737d;--page-active-color: #2f3941;--page-disabled-color: #d8d8d8;padding:10px 0;display:flex;align-items:center;justify-content:center;margin-bottom:0}.vs-pagination>li{list-style:none}.vs-pagination>li:first-child a{margin-left:0}.vs-pagination>li:last-child a{margin-right:0}.vs-pagination>li>a{min-width:30px;height:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none;border-radius:4px;color:var(--page-color);font-size:14px;margin-left:2px;margin-right:2px;user-select:none}.vs-pagination>li>a:hover{background-color:var(--page-bg-color);color:var(--page-active-color)}.vs-pagination>li>a:focus-visible{box-shadow:0 0 0 2px #1f73b759;outline:none}.vs-pagination>li.vs-pagination--active a{color:var(--page-active-color);background-color:var(--page-bg-color);font-weight:600;position:relative;z-index:1}.vs-pagination>li.vs-pagination--disabled>a{color:var(--page-disabled-color)!important;user-select:none;cursor:default}.vs-pagination>li.vs-pagination--disabled>a:hover{background:transparent}.vs-pagination>li.vs-pagination--disabled.vs-pagination--no-cursor a{cursor:not-allowed}.vs-pagination>li.vs-pagination--gap a{cursor:default;color:var(--page-color)}.vs-pagination>li.vs-pagination--gap a:hover{background:transparent}")); document.head.appendChild(elementStyle);} catch(e) {console.error('vite-plugin-css-injected-by-js', e);} })();import { openBlock as o, createElementBlock as g, createElementVNode as r, normalizeClass as P, withKeys as u, renderSlot as h, createCommentVNode as c, Fragment as d, renderList as f, toDisplayString as m } from "vue";
const _ = (e, i) => {
const t = e.__vccOpts || e;
for (const [n, l] of i)
t[n] = l;
return t;
}, y = {
props: {
totalPages: {
type: Number
},
currentPage: {
type: Number,
default: 1,
validator: (e) => e > 0
},
pagePadding: {
type: Number,
default: 1,
validator: (e) => e > 0
},
pageGap: {
type: Number,
default: 2,
validator: (e) => e > 0
},
hidePrevNext: {
type: Boolean,
default: !1
}
},
data() {
return {
internalPage: this.currentPage
};
},
computed: {
renderPages() {
const e = [], i = this.pagePadding, t = this.pageGap;
for (let n = 1; n <= this.totalPages; n++) {
if (n === this.internalPage || n < t || n > this.totalPages - t + 1) {
e.push(this.createPage(n));
continue;
}
let l, a;
if (this.internalPage <= t + i ? (l = t + 1, a = l + i * 2) : this.internalPage >= this.totalPages - t - i ? (a = this.totalPages - t, l = a - i * 2) : (l = this.internalPage - i, a = this.internalPage + i), n >= l && n <= this.internalPage || n >= this.internalPage && n <= a) {
e.push(this.createPage(n));
continue;
}
if (n === t) {
l > t + 1 && this.internalPage > t + i + 1 ? e.push(this.createGap(n)) : e.push(this.createPage(n));
continue;
}
if (n === this.totalPages - t + 1) {
a < this.totalPages - t && this.internalPage < this.totalPages - t - i ? e.push(this.createGap(n)) : e.push(this.createPage(n));
continue;
}
}
return e;
}
},
watch: {
currentPage(e) {
this.internalPage = e;
}
},
methods: {
createPage(e) {
return {
key: e,
current: this.internalPage === e,
value: e
};
},
createGap(e) {
return {
key: e,
isGap: !0
};
},
firstPageSelected() {
return this.internalPage === 1;
},
lastPageSelected() {
return this.internalPage === this.totalPages || this.totalPages === 0;
},
moveToPage(e) {
e && this.internalPage !== this.totalPages && this.setPage(this.internalPage + 1), !e && this.internalPage !== 1 && this.setPage(this.internalPage - 1);
},
setPage(e) {
this.internalPage = e, this.$emit("change", e);
}
}
}, p = {
role: "navigation",
"aria-label": "Pagination Navigation"
}, b = { class: "vs-pagination" }, x = ["tabindex"], k = /* @__PURE__ */ r("svg", {
xmlns: "http://www.w3.org/2000/svg",
width: "16",
height: "16",
viewBox: "0 0 16 16",
focusable: "false",
role: "presentation"
}, [
/* @__PURE__ */ r("path", {
fill: "currentColor",
d: "M10.39 12.688a.5.5 0 01-.718.69l-.062-.066-4-5a.5.5 0 01-.054-.542l.054-.082 4-5a.5.5 0 01.83.55l-.05.074L6.641 8l3.75 4.688z"
})
], -1), N = /* @__PURE__ */ r("a", null, "...", -1), w = [
N
], S = ["onClick", "onKeyup", "aria-current", "aria-label"], G = ["tabindex"], C = /* @__PURE__ */ r("svg", {
xmlns: "http://www.w3.org/2000/svg",
width: "16",
height: "16",
viewBox: "0 0 16 16",
focusable: "false",
role: "presentation"
}, [
/* @__PURE__ */ r("path", {
fill: "currentColor",
d: "M5.61 3.312a.5.5 0 01.718-.69l.062.066 4 5a.5.5 0 01.054.542l-.054.082-4 5a.5.5 0 01-.83-.55l.05-.074L9.359 8l-3.75-4.688z"
})
], -1);
function B(e, i, t, n, l, a) {
return o(), g("nav", p, [
r("ul", b, [
r("li", {
class: P([
{ "vs-pagination--disabled": a.firstPageSelected() },
{ "vs-pagination--no-cursor": !t.hidePrevNext && a.firstPageSelected() }
])
}, [
r("a", {
onClick: i[0] || (i[0] = (s) => a.moveToPage(!1)),
onKeyup: i[1] || (i[1] = u((s) => a.moveToPage(!1), ["enter"])),
tabindex: !t.hidePrevNext && a.firstPageSelected() ? -1 : 0,
"aria-label": "Previous Page"
}, [
t.hidePrevNext && a.firstPageSelected() ? c("", !0) : h(e.$slots, "leftIcon", { key: 0 }, () => [
k
])
], 40, x)
], 2),
(o(!0), g(d, null, f(a.renderPages, (s) => (o(), g(d, null, [
s.isGap ? (o(), g("li", {
class: "vs-pagination--gap",
key: s.key + "gap"
}, w)) : (o(), g("li", {
key: s.key + "count",
class: P({ "vs-pagination--active": s.current })
}, [
r("a", {
onClick: (v) => a.setPage(s.value),
onKeyup: u((v) => a.setPage(s.value), ["enter"]),
tabindex: "0",
"aria-current": s.current ? "true" : "false",
"aria-label": s.current ? `Current page, Page ${s.value}` : `Goto Page ${s.value}`
}, m(s.value), 41, S)
], 2))
], 64))), 256)),
r("li", {
class: P([
{ "vs-pagination--disabled": a.lastPageSelected() },
{ "vs-pagination--no-cursor": !t.hidePrevNext && a.lastPageSelected() }
])
}, [
r("a", {
onClick: i[2] || (i[2] = (s) => a.moveToPage(!0)),
onKeyup: i[3] || (i[3] = u((s) => a.moveToPage(!0), ["enter"])),
tabindex: !t.hidePrevNext && a.lastPageSelected() ? -1 : 0,
"aria-label": "Next Page"
}, [
t.hidePrevNext && a.lastPageSelected() ? c("", !0) : h(e.$slots, "rightIcon", { key: 0 }, () => [
C
])
], 40, G)
], 2)
])
]);
}
const K = /* @__PURE__ */ _(y, [["render", B]]), V = {
install(e) {
e.component("VsPagination", K);
}
};
export {
K as default,
V as plugin
};