vue3-pagin8
Version:
Vue pagination using beautiful and simple methods
271 lines (264 loc) • 14.1 kB
JavaScript
'use strict';var vue=require('vue');function _iterableToArrayLimit(arr, i) {
var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
if (null != _i) {
var _s,
_e,
_x,
_r,
_arr = [],
_n = !0,
_d = !1;
try {
if (_x = (_i = _i.call(arr)).next, 0 === i) {
if (Object(_i) !== _i) return;
_n = !1;
} else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0);
} catch (err) {
_d = !0, _e = err;
} finally {
try {
if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return;
} finally {
if (_d) throw _e;
}
}
return _arr;
}
}
function _slicedToArray(arr, i) {
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
}
function _arrayWithHoles(arr) {
if (Array.isArray(arr)) return arr;
}
function _unsupportedIterableToArray(o, minLen) {
if (!o) return;
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor) n = o.constructor.name;
if (n === "Map" || n === "Set") return Array.from(o);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}
function _arrayLikeToArray(arr, len) {
if (len == null || len > arr.length) len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
return arr2;
}
function _nonIterableRest() {
throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}var script = {
props: {
initPage: {
type: Number,
required: false,
default: 1,
validator: function validator(value) {
if (value <= 1) return 1;
return value > 0;
}
},
totalPages: {
type: Number,
required: false,
default: 2,
validator: function validator(value) {
if (value <= 0) return 1;
return value > 0;
}
},
color: {
type: String,
required: false,
default: "green",
validator: function validator(value) {
if (value == "red" || value == "green" || value == "blue" || value == "gray" || value == "purple" || value == "orange" || value == "dark") return value;
return "green";
}
}
},
data: function data() {
return {
page: 1,
backupPage: 1
};
},
computed: {
formattedPage: function formattedPage() {
return this.totalPages < 10 ? "0".concat(this.totalPages) : this.totalPages;
}
},
methods: {
reset: function reset() {
this.page = this.initPage;
this.backupPage = this.initPage;
},
onBlur: function onBlur() {
this.page = this.backupPage;
},
nextPage: function nextPage() {
if (this.page >= this.totalPages) return;
this.page += 1;
this.backupPage = this.page;
this.$emit("currentPage", this.page);
},
prevPage: function prevPage() {
if (this.page <= 1) return;
this.page -= 1;
this.backupPage = this.page;
this.$emit("currentPage", this.page);
},
userPage: function userPage(e) {
if (parseInt(e)) {
this.page = parseInt(e);
}
},
submitPage: function submitPage() {
if (this.page == 1) {
this.$refs.page.value = "01";
}
if (this.page > 0 && this.page <= this.totalPages) {
this.backupPage = this.page;
this.$refs.page.blur();
this.$emit("currentPage", this.page);
} else {
this.page = this.backupPage;
this.$refs.page.blur();
}
}
},
watch: {
initPage: function initPage(newValue, oldValue) {
console.log("here");
if (newValue != oldValue) {
if (newValue < 0) this.page = 1;else this.page = newValue;
}
},
page: function page() {
if (this.page == 1) {
this.$refs.page.value = "01";
}
if (this.page <= 0 || this.page > this.totalPages) {
this.page = this.backupPage;
}
}
}
};var _withScopeId = function _withScopeId(n) {
return vue.pushScopeId("data-v-46b0323c"), n = n(), vue.popScopeId(), n;
};
var _hoisted_1 = /*#__PURE__*/_withScopeId(function () {
return /*#__PURE__*/vue.createElementVNode("svg", {
width: "30",
height: "30",
viewBox: "0 0 30 30",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
class: "paginate-icon"
}, [/*#__PURE__*/vue.createElementVNode("path", {
d: "M18.7285 23.7407C19.0591 23.4249 19.0887 22.9293 18.8097 22.5835L18.726 22.4932L10.5863 14.8038C10.2219 14.4593 9.63328 14.4605 9.27141 14.8062C9.09171 14.9778 9 15.2036 9 15.4281C9 15.6172 9.06369 15.8055 9.19034 15.9624L9.27388 16.0525L17.4136 23.7418C17.7779 24.0863 18.3666 24.0851 18.7285 23.7407ZM18.7259 8.36405C19.0915 8.01955 19.089 7.46107 18.7284 7.11658C18.3966 6.79972 17.8744 6.77233 17.509 7.0344L17.4135 7.11305L12.0076 12.2193C11.8255 12.391 11.7338 12.6179 11.7338 12.8436C11.7338 13.0682 11.8255 13.2939 12.0052 13.4656C12.3369 13.7825 12.8592 13.8099 13.2246 13.5478L13.3201 13.4691L18.7259 8.36405Z",
fill: "black"
})], -1);
});
var _hoisted_2 = [_hoisted_1];
var _hoisted_3 = {
class: "paginate-text-cont"
};
var _hoisted_4 = {
class: "paginate-input"
};
var _hoisted_5 = ["value"];
var _hoisted_6 = {
class: "paginate-text"
};
var _hoisted_7 = /*#__PURE__*/_withScopeId(function () {
return /*#__PURE__*/vue.createElementVNode("svg", {
width: "30",
height: "30",
viewBox: "0 0 30 30",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
class: "paginate-icon"
}, [/*#__PURE__*/vue.createElementVNode("path", {
d: "M11.2715 6.25935C10.9409 6.57513 10.9113 7.07072 11.1903 7.41648L11.274 7.50681L19.4137 15.1962C19.7781 15.5407 20.3667 15.5395 20.7286 15.1938C20.9083 15.0222 21 14.7964 21 14.5719C21 14.3828 20.9363 14.1945 20.8097 14.0376L20.7261 13.9475L12.5864 6.25817C12.2221 5.91368 11.6334 5.91485 11.2715 6.25935ZM11.2741 21.636C10.9085 21.9804 10.911 22.5389 11.2716 22.8834C11.6034 23.2003 12.1256 23.2277 12.491 22.9656L12.5865 22.8869L17.9924 17.7807C18.1745 17.609 18.2662 17.3821 18.2662 17.1564C18.2662 16.9318 18.1745 16.7061 17.9948 16.5344C17.6631 16.2175 17.1408 16.1901 16.7754 16.4522L16.6799 16.5309L11.2741 21.636Z",
fill: "black"
})], -1);
});
var _hoisted_8 = [_hoisted_7];
function render(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock("div", {
class: vue.normalizeClass(["paginate-cont", 'color-' + $props.color])
}, [vue.createElementVNode("div", {
class: vue.normalizeClass(["paginate-back", $data.page <= 1 && $data.backupPage == $data.page ? 'deactive' : '']),
onClick: _cache[0] || (_cache[0] = function ($event) {
return $options.prevPage();
})
}, _hoisted_2, 2), vue.createElementVNode("div", _hoisted_3, [vue.createElementVNode("div", _hoisted_4, [vue.createElementVNode("input", {
type: "number",
ref: "page",
onFocus: _cache[1] || (_cache[1] = function ($event) {
return $data.backupPage = $data.page;
}),
onInput: _cache[2] || (_cache[2] = function ($event) {
return $options.userPage($event.target.value);
}),
onBlur: _cache[3] || (_cache[3] = function ($event) {
return $options.onBlur();
}),
onKeyup: _cache[4] || (_cache[4] = vue.withKeys(function ($event) {
return $options.submitPage();
}, ["enter"])),
value: $data.page ? $data.page < 10 ? "0".concat($data.page) : $data.page : '01',
class: "paginate-input-text"
}, null, 40, _hoisted_5)]), vue.createElementVNode("div", _hoisted_6, [vue.createTextVNode(" /"), vue.createElementVNode("span", null, vue.toDisplayString($options.formattedPage), 1)])]), vue.createElementVNode("div", {
class: vue.normalizeClass(["paginate-next", $data.page >= $props.totalPages && $data.backupPage == $data.page ? 'deactive' : '']),
onClick: _cache[5] || (_cache[5] = function ($event) {
return $options.nextPage();
})
}, _hoisted_8, 2)], 2);
}function styleInject(css, ref) {
if ( ref === void 0 ) ref = {};
var insertAt = ref.insertAt;
if (!css || typeof document === 'undefined') { return; }
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (insertAt === 'top') {
if (head.firstChild) {
head.insertBefore(style, head.firstChild);
} else {
head.appendChild(style);
}
} else {
head.appendChild(style);
}
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}var css_248z = "\n@import url(\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;700;900&display=swap\");\n.paginate-cont[data-v-46b0323c] {\n width: 100%;\n background-color: white;\n border: solid 1px #eaeaea;\n border-radius: 10px;\n height: 40px;\n max-width: 200px;\n margin: 0 auto;\n overflow: hidden;\n text-align: left !important;\n}\n.paginate-cont .paginate-back[data-v-46b0323c] {\n width: 25%;\n height: 100%;\n text-align: center;\n padding-top: 4px;\n float: left;\n transition: opacity 0.3s linear;\n}\n.paginate-cont .paginate-back.deactive[data-v-46b0323c] {\n opacity: 0.3;\n}\n.paginate-cont .paginate-back[data-v-46b0323c]:hover {\n background-color: #f6f6f6;\n}\n.paginate-cont .paginate-back:hover.deactive[data-v-46b0323c] {\n background-color: white;\n}\n.paginate-cont .paginate-text-cont[data-v-46b0323c] {\n width: 50%;\n height: 100%;\n float: left;\n box-sizing: border-box;\n border-right: solid 1px #eaeaea;\n border-left: solid 1px #eaeaea;\n padding-top: 7px;\n display: flex;\n user-select: none;\n justify-content: center;\n flex-direction: row;\n font-family: \"Poppins\", sans-serif;\n}\n.paginate-cont .paginate-text-cont .paginate-input[data-v-46b0323c] {\n width: 43%;\n height: 25px;\n}\n.paginate-cont\n .paginate-text-cont\n .paginate-input\n input[type=\"number\"][data-v-46b0323c]::-webkit-inner-spin-button,\n.paginate-cont\n .paginate-text-cont\n .paginate-input\n input[type=\"number\"][data-v-46b0323c]::-webkit-outer-spin-button {\n -webkit-appearance: none;\n margin: 0;\n display: none;\n}\n.paginate-cont .paginate-text-cont .paginate-input input[type=\"number\"][data-v-46b0323c] {\n -moz-appearance: textfield;\n /* Firefox */\n font-family: \"Poppins\", sans-serif;\n}\n.paginate-cont .paginate-text-cont .paginate-input input[type=\"number\"][data-v-46b0323c] {\n width: 100%;\n height: 100%;\n border: none;\n font-size: 16px;\n color: black;\n font-weight: 700;\n text-align: right;\n background-color: rgba(255, 255, 255, 0);\n border-radius: 5px;\n padding-top: 0;\n}\n.paginate-cont .paginate-text-cont .paginate-input input[type=\"number\"][data-v-46b0323c]:focus {\n outline: solid 1px #e8e8e8;\n}\n.paginate-cont .paginate-text-cont .paginate-text[data-v-46b0323c] {\n width: 45%;\n height: 25px;\n font-weight: 700;\n color: #bbb;\n padding-left: 5px;\n font-size: 16px;\n}\n.paginate-cont .paginate-next[data-v-46b0323c] {\n width: 25%;\n height: 100%;\n text-align: center;\n float: left;\n padding-top: 4px;\n transition: 0.3s linear;\n}\n.paginate-cont .paginate-next.deactive[data-v-46b0323c] {\n opacity: 0.3;\n}\n.paginate-cont .paginate-next[data-v-46b0323c]:hover {\n background-color: #f6f6f6;\n}\n.color-red .paginate-icon path[data-v-46b0323c] {\n fill: #ed1c16;\n}\n.color-red .paginate-input-text[data-v-46b0323c] {\n color: #ed1c16 !important;\n}\n.color-green .paginate-icon path[data-v-46b0323c] {\n fill: #22c5a9;\n}\n.color-green .paginate-input-text[data-v-46b0323c] {\n color: #22c5a9 !important;\n}\n.color-blue .paginate-icon path[data-v-46b0323c] {\n fill: #0085c3;\n}\n.color-blue .paginate-input-text[data-v-46b0323c] {\n color: #0085c3 !important;\n}\n.color-gray .paginate-icon path[data-v-46b0323c] {\n fill: #616161;\n}\n.color-gray .paginate-input-text[data-v-46b0323c] {\n color: #616161 !important;\n}\n.color-purple .paginate-icon path[data-v-46b0323c] {\n fill: #833ab4;\n}\n.color-purple .paginate-input-text[data-v-46b0323c] {\n color: #833ab4 !important;\n}\n.color-orange .paginate-icon path[data-v-46b0323c] {\n fill: #f90;\n}\n.color-orange .paginate-input-text[data-v-46b0323c] {\n color: #f90 !important;\n}\n.color-dark[data-v-46b0323c] {\n background-color: #121212;\n}\n.color-dark .paginate-icon path[data-v-46b0323c] {\n fill: white;\n}\n.color-dark .paginate-input-text[data-v-46b0323c] {\n color: white !important;\n}\n";
styleInject(css_248z);script.render = render;
script.__scopeId = "data-v-46b0323c";// Import vue component
// Default export is installable instance of component.
// IIFE injects install function into component, allowing component
// to be registered via Vue.use() as well as Vue.component(),
var component = /*#__PURE__*/(function () {
// Get component instance
var installable = script;
// Attach install function executed by Vue.use()
installable.install = function (app) {
app.component('Vue3Pagin8', 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;
var namedExports=/*#__PURE__*/Object.freeze({__proto__:null,'default':component});// Attach named exports directly to component. IIFE/CJS will
// only expose one global var, with named exports exposed as properties of
// that global var (eg. plugin.namedExport)
Object.entries(namedExports).forEach(function (_ref) {
var _ref2 = _slicedToArray(_ref, 2),
exportName = _ref2[0],
exported = _ref2[1];
if (exportName !== 'default') component[exportName] = exported;
});module.exports=component;