vue-pagination-tw
Version:
Simple Vue Pagination component that can be used in any project with range & ui customization.
259 lines (229 loc) • 9.79 kB
JavaScript
import { defineComponent, ref, computed, openBlock, createElementBlock, normalizeClass, createElementVNode, unref, withModifiers, createCommentVNode, Fragment, renderList, toDisplayString, withDirectives, vModelText, createTextVNode } from 'vue';
const _hoisted_1 = /*#__PURE__*/createElementVNode("span", {
class: "sr-only"
}, "Previous", -1);
const _hoisted_2 = /*#__PURE__*/createElementVNode("svg", {
class: "h-5 w-5",
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 20 20",
fill: "currentColor",
"aria-hidden": "true"
}, [/*#__PURE__*/createElementVNode("path", {
"fill-rule": "evenodd",
d: "M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z",
"clip-rule": "evenodd"
})], -1);
const _hoisted_3 = [_hoisted_1, _hoisted_2];
const _hoisted_4 = {
key: 1,
class: "relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700"
};
const _hoisted_5 = ["onClick"];
const _hoisted_6 = {
key: 2,
class: "relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700"
};
const _hoisted_7 = /*#__PURE__*/createElementVNode("span", {
class: "sr-only"
}, "Next", -1);
const _hoisted_8 = /*#__PURE__*/createElementVNode("svg", {
class: "h-5 w-5",
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 20 20",
fill: "currentColor",
"aria-hidden": "true"
}, [/*#__PURE__*/createElementVNode("path", {
"fill-rule": "evenodd",
d: "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z",
"clip-rule": "evenodd"
})], -1);
const _hoisted_9 = [_hoisted_7, _hoisted_8];
const _hoisted_10 = {
class: "text-sm text-gray-700"
};
const _hoisted_11 = /*#__PURE__*/createTextVNode(" Showing ");
const _hoisted_12 = {
class: "font-medium"
};
const _hoisted_13 = /*#__PURE__*/createTextVNode(" to ");
const _hoisted_14 = {
class: "font-medium"
};
const _hoisted_15 = /*#__PURE__*/createTextVNode(" of ");
const _hoisted_16 = {
class: "font-medium"
};
const _hoisted_17 = /*#__PURE__*/createTextVNode(" results ");
const _hoisted_18 = {
key: 0
};
const _hoisted_19 = {
for: "search",
class: "pr-3 text-gray-500 text-xs font-semibold uppercase"
};
var script = /*#__PURE__*/defineComponent({
props: {
currentPage: {
type: Number,
required: true
},
totalItems: {
type: Number,
required: true
},
perPage: {
type: Number,
required: true
},
pageRange: {
type: Number,
default: 2
},
goButton: {
type: Boolean,
default: false
},
textBeforeInput: {
type: String,
default: 'Go to page'
},
textAfterInput: {
type: String,
default: 'Go'
},
borderActiveColor: {
type: String,
default: 'border-indigo-500'
},
borderTextActiveColor: {
type: String,
default: 'text-indigo-500'
},
styled: {
type: String,
default: 'simple'
}
},
emits: ["page-changed"],
setup(__props, _ref) {
let {
emit
} = _ref;
const props = __props;
const pageInput = ref(1);
const totalPages = Math.ceil(props.totalItems / props.perPage);
const paginationFrom = computed(() => (props.currentPage - 1) * props.perPage + 1);
const paginationTo = computed(() => {
let end = props.currentPage * props.perPage;
return props.totalItems < end ? props.totalItems : end;
});
const isFirstPage = computed(() => {
return props.currentPage === 1;
});
const isLastPage = computed(() => {
return props.currentPage >= totalPages;
}); // methods
const changePage = page => {
if (page > 0 && page <= totalPages) {
emit('page-changed', page);
}
}; // try
const rangeStart = computed(() => {
var start = props.currentPage - props.pageRange;
return start > 0 ? start : 1;
});
const rangeEnd = computed(() => {
var end = props.currentPage + props.pageRange;
return end < totalPages ? end : totalPages;
});
const hasFirst = () => {
return rangeStart.value !== 1;
};
const hasLast = () => {
return rangeEnd.value < totalPages;
};
const calculatedPages = computed(() => {
var pages = [];
for (var i = rangeStart.value; i <= rangeEnd.value; i++) {
pages.push(i);
}
return pages;
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
class: normalizeClass({
'flex justify-between items-center': __props.goButton
})
}, [createElementVNode("div", {
class: normalizeClass({
'flex justify-between items-center': props.styled === 'simple'
})
}, [createElementVNode("nav", {
class: normalizeClass(["relative z-0 inline-flex rounded-md shadow-sm -space-x-px", {
'mb-3': props.styled === 'centered'
}]),
"aria-label": "Pagination"
}, [createElementVNode("a", {
href: "#",
class: normalizeClass(["relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50", {
'cursor-not-allowed bg-gray-200 hover:bg-gray-300': unref(isFirstPage)
}]),
onClick: _cache[0] || (_cache[0] = withModifiers($event => changePage(__props.currentPage - 1), ["prevent"]))
}, _hoisted_3, 2), hasFirst() ? (openBlock(), createElementBlock("a", {
key: 0,
href: "#",
"aria-current": "page",
class: "bg-white border border-gray-300 text-gray-500 relative inline-flex items-center px-4 py-2 text-sm font-medium",
onClick: _cache[1] || (_cache[1] = withModifiers($event => changePage(1), ["prevent"]))
}, "1")) : createCommentVNode("", true), hasFirst() ? (openBlock(), createElementBlock("span", _hoisted_4, "...")) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList(unref(calculatedPages), (page, index) => {
return openBlock(), createElementBlock("a", {
href: "#",
"aria-current": "page",
key: index,
class: normalizeClass(["bg-white border border-gray-300 text-gray-500 relative inline-flex items-center px-4 py-2 text-sm font-medium", {
[`z-10 bg-indigo-50 !${__props.borderActiveColor} !${__props.borderTextActiveColor}`]: __props.currentPage == page
}]),
onClick: withModifiers($event => changePage(page), ["prevent"])
}, toDisplayString(page), 11, _hoisted_5);
}), 128)), hasLast() ? (openBlock(), createElementBlock("span", _hoisted_6, "...")) : createCommentVNode("", true), hasLast() ? (openBlock(), createElementBlock("a", {
key: 3,
href: "#",
"aria-current": "page",
class: "bg-white border border-gray-300 text-gray-500 relative inline-flex items-center px-4 py-2 text-sm font-medium",
onClick: _cache[2] || (_cache[2] = withModifiers($event => changePage(unref(totalPages)), ["prevent"]))
}, toDisplayString(unref(totalPages)), 1)) : createCommentVNode("", true), createElementVNode("a", {
href: "#",
class: normalizeClass(["relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50", {
'cursor-not-allowed bg-gray-200 hover:bg-gray-300': unref(isLastPage)
}]),
onClick: _cache[3] || (_cache[3] = withModifiers($event => changePage(__props.currentPage + 1), ["prevent"]))
}, _hoisted_9, 2)], 2), createElementVNode("div", {
class: normalizeClass({
'order-first': props.styled === 'simple'
})
}, [createElementVNode("p", _hoisted_10, [_hoisted_11, createElementVNode("span", _hoisted_12, toDisplayString(unref(paginationFrom)), 1), _hoisted_13, createElementVNode("span", _hoisted_14, toDisplayString(unref(paginationTo)), 1), _hoisted_15, createElementVNode("span", _hoisted_16, toDisplayString(__props.totalItems), 1), _hoisted_17])], 2)], 2), __props.goButton ? (openBlock(), createElementBlock("div", _hoisted_18, [createElementVNode("label", _hoisted_19, toDisplayString(__props.textBeforeInput), 1), withDirectives(createElementVNode("input", {
type: "text",
placeholder: "Page no",
class: normalizeClass(["w-28 px-4 py-1 rounded-l outline-none border-t-2 border-l-2 border-b-2 placeholder:text-xs uppercase font-semibold", `focus:${__props.borderActiveColor}`]),
"onUpdate:modelValue": _cache[4] || (_cache[4] = $event => pageInput.value = $event)
}, null, 2), [[vModelText, pageInput.value]]), createElementVNode("button", {
class: "px-4 py-1.5 rounded-r bg-indigo-500 text-white",
onClick: _cache[5] || (_cache[5] = withModifiers($event => changePage(pageInput.value), ["prevent"]))
}, toDisplayString(__props.textAfterInput), 1)])) : createCommentVNode("", true)], 2);
};
}
});
// Import vue component
// IIFE injects install function into component, allowing component
// to be registered via Vue.use() as well as Vue.component(),
var entry_esm = /*#__PURE__*/(() => {
// Assign InstallableComponent type
const installable = script; // Attach install function executed by Vue.use()
installable.install = app => {
app.component("VuePaginationTw", installable);
};
return installable;
})(); // It's possible to expose named exports when writing components that can
// also be used as directives, etc. - eg. import { RollupDemoDirective } from 'rollup-demo';
// export const RollupDemoDirective = directive;
export { entry_esm as default };