vue3-pagin8
Version:
Vue pagination using beautiful and simple methods
1 lines • 9.98 kB
JavaScript
var Vue3Pagin8=function(t){"use strict";function n(t,n){return function(t){if(Array.isArray(t))return t}(t)||function(t,n){var e=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null!=e){var a,i,o,r,c=[],p=!0,l=!1;try{if(o=(e=e.call(t)).next,0===n){if(Object(e)!==e)return;p=!1}else for(;!(p=(a=o.call(e)).done)&&(c.push(a.value),c.length!==n);p=!0);}catch(t){l=!0,i=t}finally{try{if(!p&&null!=e.return&&(r=e.return(),Object(r)!==r))return}finally{if(l)throw i}}return c}}(t,n)||function(t,n){if(!t)return;if("string"==typeof t)return e(t,n);var a=Object.prototype.toString.call(t).slice(8,-1);"Object"===a&&t.constructor&&(a=t.constructor.name);if("Map"===a||"Set"===a)return Array.from(t);if("Arguments"===a||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a))return e(t,n)}(t,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function e(t,n){(null==n||n>t.length)&&(n=t.length);for(var e=0,a=new Array(n);e<n;e++)a[e]=t[e];return a}var a={props:{initPage:{type:Number,required:!1,default:1,validator:function(t){return t<=1?1:t>0}},totalPages:{type:Number,required:!1,default:2,validator:function(t){return t<=0?1:t>0}},color:{type:String,required:!1,default:"green",validator:function(t){return"red"==t||"green"==t||"blue"==t||"gray"==t||"purple"==t||"orange"==t||"dark"==t?t:"green"}}},data:function(){return{page:1,backupPage:1}},computed:{formattedPage:function(){return this.totalPages<10?"0".concat(this.totalPages):this.totalPages}},methods:{reset:function(){this.page=this.initPage,this.backupPage=this.initPage},onBlur:function(){this.page=this.backupPage},nextPage:function(){this.page>=this.totalPages||(this.page+=1,this.backupPage=this.page,this.$emit("currentPage",this.page))},prevPage:function(){this.page<=1||(this.page-=1,this.backupPage=this.page,this.$emit("currentPage",this.page))},userPage:function(t){parseInt(t)&&(this.page=parseInt(t))},submitPage:function(){1==this.page&&(this.$refs.page.value="01"),this.page>0&&this.page<=this.totalPages?(this.backupPage=this.page,this.$refs.page.blur(),this.$emit("currentPage",this.page)):(this.page=this.backupPage,this.$refs.page.blur())}},watch:{initPage:function(t,n){console.log("here"),t!=n&&(this.page=t<0?1:t)},page:function(){1==this.page&&(this.$refs.page.value="01"),(this.page<=0||this.page>this.totalPages)&&(this.page=this.backupPage)}}},i=function(n){return t.pushScopeId("data-v-46b0323c"),n=n(),t.popScopeId(),n},o=[i((function(){return t.createElementVNode("svg",{width:"30",height:"30",viewBox:"0 0 30 30",fill:"none",xmlns:"http://www.w3.org/2000/svg",class:"paginate-icon"},[t.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)}))],r={class:"paginate-text-cont"},c={class:"paginate-input"},p=["value"],l={class:"paginate-text"},g=[i((function(){return t.createElementVNode("svg",{width:"30",height:"30",viewBox:"0 0 30 30",fill:"none",xmlns:"http://www.w3.org/2000/svg",class:"paginate-icon"},[t.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)}))];!function(t,n){void 0===n&&(n={});var e=n.insertAt;if(t&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],i=document.createElement("style");i.type="text/css","top"===e&&a.firstChild?a.insertBefore(i,a.firstChild):a.appendChild(i),i.styleSheet?i.styleSheet.cssText=t:i.appendChild(document.createTextNode(t))}}('\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'),a.render=function(n,e,a,i,u,s){return t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(["paginate-cont","color-"+a.color])},[t.createElementVNode("div",{class:t.normalizeClass(["paginate-back",u.page<=1&&u.backupPage==u.page?"deactive":""]),onClick:e[0]||(e[0]=function(t){return s.prevPage()})},o,2),t.createElementVNode("div",r,[t.createElementVNode("div",c,[t.createElementVNode("input",{type:"number",ref:"page",onFocus:e[1]||(e[1]=function(t){return u.backupPage=u.page}),onInput:e[2]||(e[2]=function(t){return s.userPage(t.target.value)}),onBlur:e[3]||(e[3]=function(t){return s.onBlur()}),onKeyup:e[4]||(e[4]=t.withKeys((function(t){return s.submitPage()}),["enter"])),value:u.page?u.page<10?"0".concat(u.page):u.page:"01",class:"paginate-input-text"},null,40,p)]),t.createElementVNode("div",l,[t.createTextVNode(" /"),t.createElementVNode("span",null,t.toDisplayString(s.formattedPage),1)])]),t.createElementVNode("div",{class:t.normalizeClass(["paginate-next",u.page>=a.totalPages&&u.backupPage==u.page?"deactive":""]),onClick:e[5]||(e[5]=function(t){return s.nextPage()})},g,2)],2)},a.__scopeId="data-v-46b0323c";var u=function(){var t=a;return t.install=function(n){n.component("Vue3Pagin8",t)},t}(),s=Object.freeze({__proto__:null,default:u});return Object.entries(s).forEach((function(t){var e=n(t,2),a=e[0],i=e[1];"default"!==a&&(u[a]=i)})),u}(Vue);