@hennge/vue3-pagination
Version:
A Vue 3 component for pagination.
288 lines (277 loc) • 10.7 kB
JavaScript
;var vue=require('vue');const _hoisted_1 = {
viewBox: "0 0 8 2",
fill: "none",
xmlns: "http://www.w3.org/2000/svg"
};
const _hoisted_2 = /*#__PURE__*/vue.createVNode("path", {
d: "M2.24 1c0 .556-.445 1-1 1-.556 0-1-.444-1-1s.444-1 1-1c.555 0 1 .444 1 1zm5.333 0c0 .556-.444 1-1 1-.555 0-1-.444-1-1s.445-1 1-1c.556 0 1 .444 1 1z",
fill: "#BBB"
}, null, -1 /* HOISTED */);
function render(_ctx, _cache) {
return (vue.openBlock(), vue.createBlock("svg", _hoisted_1, [
_hoisted_2
]))
}var script = vue.defineComponent({
name: 'VPage',
components: { IconPaginationDots: render },
props: {
page: {
type: Number,
default: null,
},
current: {
type: Number,
default: 0,
},
activeColor: {
type: String,
default: '#DCEDFF',
},
},
emits: ['update'],
setup(props, { emit }) {
const isActive = vue.computed(() => {
return props.page === props.current;
});
function clickHandler() {
emit('update', props.page);
}
return { isActive, clickHandler };
},
});const _withId = /*#__PURE__*/vue.withScopeId("data-v-060ca318");
vue.pushScopeId("data-v-060ca318");
const _hoisted_1$1 = {
key: 0,
class: "DotsHolder"
};
vue.popScopeId();
const render$1 = /*#__PURE__*/_withId((_ctx, _cache, $props, $setup, $data, $options) => {
const _component_icon_pagination_dots = vue.resolveComponent("icon-pagination-dots");
return (vue.openBlock(), vue.createBlock("li", null, [
(_ctx.page === null)
? (vue.openBlock(), vue.createBlock("span", _hoisted_1$1, [
vue.createVNode(_component_icon_pagination_dots, { class: "Dots" })
]))
: (vue.openBlock(), vue.createBlock("button", {
key: 1,
class: ["Page", { 'Page-active': _ctx.isActive }],
type: "button",
"aria-label": `Go to page ${_ctx.page}`,
style: `background-color: ${_ctx.isActive ? _ctx.activeColor : 'transparent'};`,
onClick: _cache[1] || (_cache[1] = (...args) => (_ctx.clickHandler && _ctx.clickHandler(...args)))
}, vue.toDisplayString(_ctx.page), 15 /* TEXT, CLASS, STYLE, PROPS */, ["aria-label"]))
]))
});script.render = render$1;
script.__scopeId = "data-v-060ca318";
script.__file = "src/components/atoms/VPage.vue";const _hoisted_1$2 = {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24"
};
const _hoisted_2$1 = /*#__PURE__*/vue.createVNode("path", { d: "M18.41 16.59L13.82 12l4.59-4.59L17 6l-6 6 6 6 1.41-1.41M6 6h2v12H6V6z" }, null, -1 /* HOISTED */);
function render$2(_ctx, _cache) {
return (vue.openBlock(), vue.createBlock("svg", _hoisted_1$2, [
_hoisted_2$1
]))
}const _hoisted_1$3 = {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24"
};
const _hoisted_2$2 = /*#__PURE__*/vue.createVNode("path", { d: "M5.59 7.41L10.18 12l-4.59 4.59L7 18l6-6-6-6-1.41 1.41M16 6h2v12h-2V6z" }, null, -1 /* HOISTED */);
function render$3(_ctx, _cache) {
return (vue.openBlock(), vue.createBlock("svg", _hoisted_1$3, [
_hoisted_2$2
]))
}const _hoisted_1$4 = {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24"
};
const _hoisted_2$3 = /*#__PURE__*/vue.createVNode("path", { d: "M15.41 16.58L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.42z" }, null, -1 /* HOISTED */);
function render$4(_ctx, _cache) {
return (vue.openBlock(), vue.createBlock("svg", _hoisted_1$4, [
_hoisted_2$3
]))
}const _hoisted_1$5 = {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 24 24"
};
const _hoisted_2$4 = /*#__PURE__*/vue.createVNode("path", { d: "M8.59 16.58L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.42z" }, null, -1 /* HOISTED */);
function render$5(_ctx, _cache) {
return (vue.openBlock(), vue.createBlock("svg", _hoisted_1$5, [
_hoisted_2$4
]))
}var script$1 = vue.defineComponent({
name: 'VPagination',
components: { IconPageFirst: render$2, IconChevronLeft: render$4, IconChevronRight: render$5, IconPageLast: render$3, VPage: script },
props: {
pages: {
type: Number,
default: 0,
},
rangeSize: {
type: Number,
default: 1,
},
modelValue: {
type: Number,
default: 0,
},
activeColor: {
type: String,
default: '#DCEDFF',
},
hideFirstButton: {
type: Boolean,
default: false,
},
hideLastButton: {
type: Boolean,
default: false,
},
},
emits: ['update:modelValue'],
setup(props, { emit }) {
// pagination
const pagination = vue.computed(() => {
const res = [];
const minPaginationElems = 5 + props.rangeSize * 2;
let rangeStart = props.pages <= minPaginationElems ? 1 : props.modelValue - props.rangeSize;
let rangeEnd = props.pages <= minPaginationElems ? props.pages : props.modelValue + props.rangeSize;
rangeEnd = rangeEnd > props.pages ? props.pages : rangeEnd;
rangeStart = rangeStart < 1 ? 1 : rangeStart;
if (props.pages > minPaginationElems) {
const isStartBoundaryReached = rangeStart - 1 < 3;
const isEndBoundaryReached = props.pages - rangeEnd < 3;
if (isStartBoundaryReached) {
rangeEnd = minPaginationElems - 2;
for (let i = 1; i < rangeStart; i++) {
res.push(i);
}
}
else {
res.push(1);
res.push(null);
}
if (isEndBoundaryReached) {
rangeStart = props.pages - (minPaginationElems - 3);
for (let i = rangeStart; i <= props.pages; i++) {
res.push(i);
}
}
else {
for (let i = rangeStart; i <= rangeEnd; i++) {
res.push(i);
}
res.push(null);
res.push(props.pages);
}
}
else {
for (let i = rangeStart; i <= rangeEnd; i++) {
res.push(i);
}
}
return res;
});
function updatePageHandler(params) {
emit('update:modelValue', params);
}
// controls
const isPrevControlsActive = vue.computed(() => {
return props.modelValue > 1;
});
const isNextControlsActive = vue.computed(() => {
return props.modelValue < props.pages;
});
function goToFirst() {
if (isPrevControlsActive.value) {
emit('update:modelValue', 1);
}
}
function goToPrev() {
if (isPrevControlsActive.value) {
emit('update:modelValue', props.modelValue - 1);
}
}
function goToLast() {
if (isNextControlsActive.value) {
emit('update:modelValue', props.pages);
}
}
function goToNext() {
if (isNextControlsActive.value) {
emit('update:modelValue', props.modelValue + 1);
}
}
return {
pagination,
updatePageHandler,
isPrevControlsActive,
isNextControlsActive,
goToFirst,
goToLast,
goToPrev,
goToNext,
};
},
});const _withId$1 = /*#__PURE__*/vue.withScopeId("data-v-2a30deb0");
vue.pushScopeId("data-v-2a30deb0");
const _hoisted_1$6 = { class: "Pagination" };
const _hoisted_2$5 = {
key: 0,
class: "PaginationControl"
};
const _hoisted_3 = { class: "PaginationControl" };
const _hoisted_4 = { class: "PaginationControl" };
const _hoisted_5 = {
key: 1,
class: "PaginationControl"
};
vue.popScopeId();
const render$6 = /*#__PURE__*/_withId$1((_ctx, _cache, $props, $setup, $data, $options) => {
const _component_icon_page_first = vue.resolveComponent("icon-page-first");
const _component_icon_chevron_left = vue.resolveComponent("icon-chevron-left");
const _component_v_page = vue.resolveComponent("v-page");
const _component_icon_chevron_right = vue.resolveComponent("icon-chevron-right");
const _component_icon_page_last = vue.resolveComponent("icon-page-last");
return (vue.openBlock(), vue.createBlock("ul", _hoisted_1$6, [
(!_ctx.hideFirstButton)
? (vue.openBlock(), vue.createBlock("li", _hoisted_2$5, [
vue.createVNode(_component_icon_page_first, {
class: ["Control", { 'Control-active': _ctx.isPrevControlsActive }],
onClick: _ctx.goToFirst
}, null, 8 /* PROPS */, ["class", "onClick"])
]))
: vue.createCommentVNode("v-if", true),
vue.createVNode("li", _hoisted_3, [
vue.createVNode(_component_icon_chevron_left, {
class: ["Control", { 'Control-active': _ctx.isPrevControlsActive }],
onClick: _ctx.goToPrev
}, null, 8 /* PROPS */, ["class", "onClick"])
]),
(vue.openBlock(true), vue.createBlock(vue.Fragment, null, vue.renderList(_ctx.pagination, (page) => {
return (vue.openBlock(), vue.createBlock(_component_v_page, {
key: `pagination-page-${page}`,
page: page,
current: _ctx.modelValue,
"active-color": _ctx.activeColor,
onUpdate: _ctx.updatePageHandler
}, null, 8 /* PROPS */, ["page", "current", "active-color", "onUpdate"]))
}), 128 /* KEYED_FRAGMENT */)),
vue.createVNode("li", _hoisted_4, [
vue.createVNode(_component_icon_chevron_right, {
class: ["Control", { 'Control-active': _ctx.isNextControlsActive }],
onClick: _ctx.goToNext
}, null, 8 /* PROPS */, ["class", "onClick"])
]),
(!_ctx.hideLastButton)
? (vue.openBlock(), vue.createBlock("li", _hoisted_5, [
vue.createVNode(_component_icon_page_last, {
class: ["Control", { 'Control-active': _ctx.isNextControlsActive }],
onClick: _ctx.goToLast
}, null, 8 /* PROPS */, ["class", "onClick"])
]))
: vue.createCommentVNode("v-if", true)
]))
});script$1.render = render$6;
script$1.__scopeId = "data-v-2a30deb0";
script$1.__file = "src/components/VPagination.vue";module.exports=script$1;