vue3-pagin8
Version:
Vue pagination using beautiful and simple methods
211 lines (196 loc) • 11.5 kB
JavaScript
import { openBlock, createElementBlock, normalizeClass, createElementVNode, withKeys, createTextVNode, toDisplayString, pushScopeId, popScopeId } from 'vue';
var script = {
props: {
initPage: {
type: Number,
required: false,
default: 1,
validator: function (value) {
if (value <= 1) return 1;
return value > 0;
}
},
totalPages: {
type: Number,
required: false,
default: 2,
validator: function (value) {
if (value <= 0) return 1;
return value > 0;
}
},
color: {
type: String,
required: false,
default: "green",
validator: function (value) {
if (value == "red" || value == "green" || value == "blue" || value == "gray" || value == "purple" || value == "orange" || value == "dark") return value;
return "green";
}
}
},
data() {
return {
page: 1,
backupPage: 1
};
},
computed: {
formattedPage() {
return this.totalPages < 10 ? `0${this.totalPages}` : this.totalPages;
}
},
methods: {
reset() {
this.page = this.initPage;
this.backupPage = this.initPage;
},
onBlur() {
this.page = this.backupPage;
},
nextPage() {
if (this.page >= this.totalPages) return;
this.page += 1;
this.backupPage = this.page;
this.$emit("currentPage", this.page);
},
prevPage() {
if (this.page <= 1) return;
this.page -= 1;
this.backupPage = this.page;
this.$emit("currentPage", this.page);
},
userPage(e) {
if (parseInt(e)) {
this.page = parseInt(e);
}
},
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(newValue, oldValue) {
console.log("here");
if (newValue != oldValue) {
if (newValue < 0) this.page = 1;else this.page = newValue;
}
},
page() {
if (this.page == 1) {
this.$refs.page.value = "01";
}
if (this.page <= 0 || this.page > this.totalPages) {
this.page = this.backupPage;
}
}
}
};
const _withScopeId = n => (pushScopeId("data-v-46b0323c"), n = n(), popScopeId(), n);
const _hoisted_1 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/createElementVNode("svg", {
width: "30",
height: "30",
viewBox: "0 0 30 30",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
class: "paginate-icon"
}, [/*#__PURE__*/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));
const _hoisted_2 = [_hoisted_1];
const _hoisted_3 = {
class: "paginate-text-cont"
};
const _hoisted_4 = {
class: "paginate-input"
};
const _hoisted_5 = ["value"];
const _hoisted_6 = {
class: "paginate-text"
};
const _hoisted_7 = /*#__PURE__*/_withScopeId(() => /*#__PURE__*/createElementVNode("svg", {
width: "30",
height: "30",
viewBox: "0 0 30 30",
fill: "none",
xmlns: "http://www.w3.org/2000/svg",
class: "paginate-icon"
}, [/*#__PURE__*/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));
const _hoisted_8 = [_hoisted_7];
function render(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("div", {
class: normalizeClass(["paginate-cont", 'color-' + $props.color])
}, [createElementVNode("div", {
class: normalizeClass(["paginate-back", $data.page <= 1 && $data.backupPage == $data.page ? 'deactive' : '']),
onClick: _cache[0] || (_cache[0] = $event => $options.prevPage())
}, _hoisted_2, 2), createElementVNode("div", _hoisted_3, [createElementVNode("div", _hoisted_4, [createElementVNode("input", {
type: "number",
ref: "page",
onFocus: _cache[1] || (_cache[1] = $event => $data.backupPage = $data.page),
onInput: _cache[2] || (_cache[2] = $event => $options.userPage($event.target.value)),
onBlur: _cache[3] || (_cache[3] = $event => $options.onBlur()),
onKeyup: _cache[4] || (_cache[4] = withKeys($event => $options.submitPage(), ["enter"])),
value: $data.page ? $data.page < 10 ? `0${$data.page}` : $data.page : '01',
class: "paginate-input-text"
}, null, 40, _hoisted_5)]), createElementVNode("div", _hoisted_6, [createTextVNode(" /"), createElementVNode("span", null, toDisplayString($options.formattedPage), 1)])]), createElementVNode("div", {
class: normalizeClass(["paginate-next", $data.page >= $props.totalPages && $data.backupPage == $data.page ? 'deactive' : '']),
onClick: _cache[5] || (_cache[5] = $event => $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 entry_esm = /*#__PURE__*/(() => {
// Get component instance
const installable = script;
// Attach install function executed by Vue.use()
installable.install = 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;
export { entry_esm as default };